This document discusses how to create custom blocks for the Gutenberg editor in WordPress. It explains the basic steps, which include creating a plugin, registering a block type using registerBlockType(), defining edit and save functions, and importing controls and components from the editor and components folders. It also covers topics like block attributes, inner blocks, and creating dynamic blocks that retrieve data through PHP calls.

1. Creating Custom
Gutenberg Blocks
in WordPress
Paul Stonier
Ithaca Web People
March 5, 2019

2. What is Gutenberg
Original TinyMCE Editor Gutenberg (ReactJS-based Block Editor)

5. create-guten-block

6. my-new-block plugin.php

7. my-new-block init.php

8. registerBlockType()

9. Block Attributes

10. Edit Function

11. Edit Function

12. Edit Function

13. Save Function

14. Importing Controls and Other Components

15. Importing Controls and Other Components
From Editor:
• BlockControls
• AlignmentToolbar
• RichText
• InnerBlocks
• MediaUpload

16. Inner Blocks (Nesting)

17. Importing Controls and Other Components
From Components
• Button
• ColorPalette
• Panel (InspectorControls)
• QueryControls
• RadioControl
• RangeControl
• SelectControl
• TextControl
• ToggleControl

18. Dynamic Blocks
Standard Gutenberg
blocks save static
content to the MySQL
database, but what
about dynamic data,
such as latest blog
posts or weather data?
That requires some PHP
to make those calls and
render the dynamic
content as part of the
block on the front end.