Gutenberg Snippets

Category: Page 1 of 1

Add Text-align Control to Gutenberg Block Toolbar

First add a new attribute to hold the state of the alignment: Then add WordPress’ alignment control to the block toolbar in the block’s edit function: From there, the same attribute can be used in a save function or in a PHP render callback for dynamic blocks to apply the…

Unique HTML ID in Gutenberg Blocks with useInstanceId

Recently I was working on building a pair of tabs and tab blocks for a project and needed a way to get a unique ID for each tab that is created. I had previously used withInstanceId but while I was checking the reference for this function I came across…

Gutenberg Custom InnerBlocks Appender

The updated Block Editor that ships with WordPress 5.3 gives us the ability to define a custom control to add inner blocks to our custom blocks. This is great if you have limited which blocks are allowed in your parent block and do not need the full inserter interface. As…