Gutenberg Development: Beginner to Advanced


Gutenberg is merged into WordPress core from 5.0. Gutenberg is not limited for the Editor.

Gutenberg is now using outside the editor. Below are some places in WordPress which are build with Gutenberg.

  • The Customizer
  • The Widgets screen
  • The Menu screen

The Gutenberg development phase 2 has some important improvements which include Global Styles, Block Templates, Block Patterns, and most interesting Full Site Editing which is a game-changer in WordPress.

So, I am going to create a series of articles in which we will learn everything about the Gutenberg.

We are going to Learn:

  • How to create a simple Gutenberg block?
  • How to add block styles?
  • How to add block variations?
  • How to add block settings?
    • What is the difference in between BlockControls vs InspectorControls?
    • How to add inline controls with BlockControls?
    • How to add sidebar settings with InspectorControls?
    • How to add the rich text editor with the RichText component?
    • How to add an alignment control with the AlignmentToolbar component?
  • How to create a Dynamic block?
  • What are the Block Templates?
  • What are the Block Patterns?
  • How to store block settings in custom fields instead of the block settings?
  • How to extend Gutenberg Editor Interface with SlotFills?
    • How to add a custom block settings menu?
    • How to add a custom document setting panel?
    • How to add a custom more menu items?
    • How to add custom post publish panel?
    • How to add a custom post status info?
    • How to add a custom pre-publish panel?
    • How to add a custom sidebar?
    • How to add a custom sidebar more menu item?
  • How to add Gutenberg theme supports?
  • What are the Block-based Themes?

Below are some screenshots of what we are going to learn.

Example Blocks Example Blocks

We are going to learn how to create a simple Card and Heading block.

Simple Card Block
Headings Block
Headings Block in Search Result

We can also add a new block by pressing a key / and then name of the block. We’ll get the available blocks into the dropdown from the search. below is the screenshot of our Headings block.

Headings block from search result
Block Styles

We can change the block styles from the sidebar Inspector Controls window.

Change block style from InspectorControls

We can also change the block style from inline Block Controls like:

Change block style from BlockControls

Almost same as block styles we can also create block variations. There is a little bit difference in the UI but it works almost same.

Block Variations

Note: We could not see the variations in quick search with /. We can see only the block in the quick block search.

See below screenshot:

Block Variations Not Available in Quick Search

We will learn how to extend Gutenberg block editor with available SlotFills.

Add Custom Menu
Custom Document Panel
Custom Plugin More Menu
Custom Pre Publish Panel
Custom Publish Panel
Add Custom Controls in State & Visibility Panel
Custom Sidebars
Custom Sidebar with Custom Menu

And much more..

2 thoughts on “Gutenberg Development: Beginner to Advanced

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: