Learn how to build custom Gutenberg blocks in WordPress.
Git repo: https://github.com/imranhsayed/custom-blocks
YouTube Video:
https://youtu.be/U4sfx7vN0Iw?list=PLD8nQCAhR3tSijB-KSc26ZiYYz3Lts4HD
Learn how to develop custom Gutenberg blocks using ESNext .
3. Gutenberg Blocks
● Every content element (e.g. heading, paragraph, or
YouTube embed) is a block.
● The collection of blocks makes up the content on the
page.
● Gutenberg is a block-based editor.
11. Adding JSX
● JavaScript XML
● A syntax that blends HTML and JavaScript.
● Provides syntactic sugar for the React.createElement() or
wp.element.createElement() in Gutenberg.
17. Why write blocks in ES6/ESNext?
Prevents need
for globals Shorter Syntax
Functions
18. Why write blocks in ES6/ESNext?
● Simpler Code - Easy to read and write.
● Shorter Syntax using Arrow functions.
● Organize your code into smaller modules.
● Anticipate and prevent need of globals.
19. Why write blocks in ES6/ESNext?
● Block Scoping solves possible scoping ambiguity.
● Promises provide improved readability via methods
chaining and succinct error handling
20. Challenges
● Requires an extra build step for code transformation.
● ES5 without JSX can run straight in the browser.
● Locating and understanding the compiled source code is
difficult.
● Tooling around JavaScript could be intimidating.
23. Features of @wordpress/scripts
● Abstracts required libraries away to standardize and
simplify development.
● Handles the dependencies and default configuration for
webpack and Babel.
● Linting tools for JavaScript and Css.
● Code testing using jest.
● Check required licence and engines.
38. Dependencies
● wp-blocks : includes block type registration and related
functions.
● wp-element : includes the WordPress Element abstraction for
describing the structure of your blocks.
● wp-editor : includes components like RichText, MediaUpload
etc
39.
40. Register block server side
public function register_block() {
…..
// Block editor script.
register_block_type(
'gtcb-blocks/custom-blocks',
[
'style' => 'gtcb-block-front-end-styles',
'editor_style' => 'gtcb-block-editor-styles',
'editor_script' => 'gtcb-block-editor-js',
] );
45. Edit function
● Describes the structure of the block
● Represents what the editor will render when the block is
used on the editor.
edit: () => ( <div>Hello World</div> ),
46. Save function
● Decides how your content would look at the front end.
● Defines how the attribute will combine together to
generate a final mark up.
● Mark up then serialized and saved into the database
save: () => ( <div>Hello World</div> ),
50. State
● A state is a plain JavaScript object.
● A state of a block is maintained through the editing
session.
● To achieve dynamic change in the block’s structure when
the user changes a block.
● Everytime a block is updated edit function is called.
51. Post saved in database
<!-- wp:gtcb-blocks/custom-block -->
<div class="wp-block-gtcb-blocks-custom-block" >Hello World</div>
<!-- /wp:gtcb-blocks/custom-block -->
Block name
53. Attributes
● Help you extract block attribute values from saved post
content.
● Map from the saved markup to a JavaScript
representation of a block.
● Attribute sources are a superset of functionality
provided by hpq
54. Attributes
● hpq: A small library used to parse and query HTML
markup into an object shape.
● When you define these attributes into
registerBlockType(), it is passed to the edit() and save()
59. Reusable Components
● Instead of creating DOM nodes using createElement(),
we can encapsulate this behavior using Components.
● Hide the complexity into their self-contained units
● Many blocks share the same complex behaviors
● Reusable Components simplify implementations of your
block’s edit function
● RichText, BlockControls, AlignmentToolbar,
73. Git repo
● Git repo for this example
https://github.com/imranhsayed/custom-blocks
● Gutenberg Workshop
https://github.com/imranhsayed/gutenberg-workshop