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 .

1. Custom Gutenberg Block
Development With React
@imranhsayed
Imran Sayed

2. What are Gutenberg
Blocks?

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.

4. Gutenberg Blocks
Design Reuse
Editing
Experience

5. Ways of building Gutenberg Blocks
ES 5
ESNext &
JSX

6. Why write blocks in ES6/ESNext?
Arrows
Block
Scoping
Modules
Classes
Promises

7. ES5

8. ES5 ESNext

9. ES5 ESNext

10. Adding JSX
What is JSX?

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.

12. JSX Example
Type of Component

13. JSX Example
Type of Component
Lowercase letter: Built in component
Capitalized: React Component

14. ES5 ESNext

15. ES5 ESNext + JSX

16. Why write blocks in ES6/ESNext?
Easy to Read & Write Code

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.

21. Browser support

22. Solution
@wordpress/scripts
A collection of reusable scripts for
WordPress Development.

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.

24. Block Development

25. Build blocks in 3
steps

26. 1.Installing Packages

27. Install packages with @wordpress/scripts
mkdir custom-blocks
cd custom-blocks
npm init
npm i --save-dev --save-exact @wordpress/scripts
mkdir src
touch index.php src/index.js src/editor.css src/style.css

28. Directory Structure
├── node_modules
├── package-lock.json
├── package.json
└── src
├── editor.css
├── style.css
└── index.js
├── index.php

29. Install packages with @wordpress/scripts
Entry point : src/index.js
Output: build/index.js ( enqueue this file )

30. Add scripts in package.json
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},

31. npm run start

32. Directory structure after build
├── build
│ └── index.js
├── node_modules
├── package-lock.json
├── package.json
└── src
├── editor.css
├── index.js
└── style.css
├── index.php

33. 2. Register Block
Server Side

34. Register block Server Side
add_action( 'init', 'register_block' );
function register_block() {}

35. Register front-end styles
public function register_block() {
// Block front end styles.
wp_register_style(
'gtcb-block-front-end-styles',
GTCB_BLOCKS_URL . '/src/style.css',
[ ],
filemtime( GTCB_BLOCKS_PATH . '/src/style.css' )
);

36. Register editor styles
public function register_block() {
…..
// Block editor styles.
wp_register_style(
'gtcb-block-editor-styles',
GTCB_BLOCKS_URL . '/src/editor.css',
[ 'wp-edit-blocks' ],
filemtime( GTCB_BLOCKS_PATH . '/src/editor.css' )
);

37. Register script
public function register_block() {
…..
// Block editor script.
wp_register_script(
'gtcb-block-editor-js',
GTCB_BLOCKS_URL . '/build/index.js',
[ 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n' ],
filemtime( GTCB_BLOCKS_PATH . '/build/index.js' ), true
);

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

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',
] );

42. 3. Register Block
Client Side

43. Register block client side
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
registerBlockType( 'gtcb-blocks/custom-block', { key: value } );
Block name Block configuration object

44. Register block client side
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
registerBlockType( 'gtcb-blocks/custom-block', {
title: __( 'Custom Block', 'custom-blocks' ),
icon: 'megaphone',
category: 'common',
edit: () => ( <div>Hello World</div> ),
save: () => ( <div>Hello World</div> )
} );

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> ),

47. Run the script

49. State of a Block

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

52. Attributes

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()

55. Define Attributes
registerBlockType( 'gtcb-blocks/custom-block', {
...
attributes: {
fullName: {
type: 'array',
source: 'children',
selector: 'p'
},
},
look for the text inside of selector

56. Attributes passed to edit() and save()
edit: ( props ) => {
console.warn( props );
return ( <div>Hello World</div> )
},
save: ( props ) => {
return ( <div>Hello World</div> )
},

57. Let’s console props
attributes:
fullName: []
className: "wp-block-gtcb-blocks-custom-block"
name: "gtcb-blocks/custom-block"
setAttributes: ƒ ()

58. Reusable Components

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,

60. RichText

61. RichText Component
const { RichText } = wp.editor;
registerBlockType( 'gtcb-blocks/custom-block', {
….

62. edit: ( props ) => {
let { attributes: { fullName } , setAttributes, className } = props;
return (
<RichText
tagName="div"
placeholder={ __( 'Full Name', 'custom-blocks' ) }
value={ fullName }
onChange={ ( value ) => setAttributes( { fullName: value } ) }
className={ className }
/>
)
},

63. save: ( props ) => {
let { attributes: { fullName } , className } = props;
return (
<RichText.Content
tagName="div"
value={ fullName }
className={ className }
/>
)
},

64. registerBlockType( 'gtcb-blocks/custom-block', {
attributes: {
fullName: {
type: 'array',
source: 'children',
selector: 'div'
},
},
edit: ( props ) => {
let { attributes: { fullName } , setAttributes, className } = props;
return (
<RichText
tagName="div"
placeholder={ __( 'Full Name', 'custom-blocks' ) }
value={ fullName }
onChange={ ( value ) => setAttributes( { fullName: value } ) }
className={ className }
/>
)
},
save: ( props ) => {
let { attributes: { fullName }, className } = props;
return (
<RichText.Content
tagName="div"
value={ fullName }
className={ className }
/>
)

65. User enters the data:
edit ()

67. User saves the data:
save ()

69. More Ways of building Blocks
● Ahmed Awais create-guten-block
● rtCamp’s Gutenberg’s Field Middleware

70. Third Party Libraries
● Editor Blocks
● Gutenberg Hub
● Gutenberg Cloud

71. WordPress Core for
Gutenberg

72. Gutenberg Core
● registerBlockType() resides in
https://github.com/WordPress/gutenberg/blob/master/
packages/blocks/src/api/registration.js.
● Components core files:
https://github.com/WordPress/gutenberg/blob/master/
packages/block-editor/src/components/

73. Git repo
● Git repo for this example
https://github.com/imranhsayed/custom-blocks
● Gutenberg Workshop
https://github.com/imranhsayed/gutenberg-workshop

74. Questions?

75. Questions?
Imran Sayed
@imranhsayed