Gutenberg Development: Beginner to Advanced

Advertisement

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.

Gutenberg Development: Beginner to Advanced 1
Simple Card Block
Gutenberg Development: Beginner to Advanced 2
Headings Block
Gutenberg Development: Beginner to Advanced 3
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.

Gutenberg Development: Beginner to Advanced 4
Headings block from search result
Gutenberg Development: Beginner to Advanced 5
Block Styles

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

Gutenberg Development: Beginner to Advanced 6
Change block style from InspectorControls

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

Gutenberg Development: Beginner to Advanced 7
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.

Gutenberg Development: Beginner to Advanced 8
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:

Gutenberg Development: Beginner to Advanced 4
Block Variations Not Available in Quick Search

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

Gutenberg Development: Beginner to Advanced 10
Add Custom Menu
Gutenberg Development: Beginner to Advanced 11
Custom Document Panel
Gutenberg Development: Beginner to Advanced 12
Custom Plugin More Menu
Gutenberg Development: Beginner to Advanced 13
Custom Pre Publish Panel
Gutenberg Development: Beginner to Advanced 14
Custom Publish Panel
Gutenberg Development: Beginner to Advanced 15
Add Custom Controls in State & Visibility Panel
Gutenberg Development: Beginner to Advanced 16
Custom Sidebars
Gutenberg Development: Beginner to Advanced 17
Custom Sidebar with Custom Menu

And much more.

%d bloggers like this: