In our last guide we looked at creating a settings page using WordPress Block Editor (Gutenberg) components. In this guide we are going to take it even further and use Gutenberg components inside the WordPress Customizer. 1.Prerequisites Have followed the…
C.
Create a Settings Page using WordPress Block Editor (Gutenberg) Components
We have previously looked at storing options and settings using the WordPress Block Editor (Gutenberg), and expanding the Create Block Script to allow for extra end points. In this guide we are going to put them all together to create…
A.
Add Entry Points to the WordPress Create Block Script
When you first create a block with the WordPress create block script using npm init @wordpress/block it provides you with an entry point to /src/index.js, that you can use to compile all of your block based assets and styles. Sometimes…
U.
Using Options to Store Data in the WordPress Block Editor (Gutenberg)
We have previously explored storing WordPress block editor (Gutenberg) data in block attributes, and in post meta, but did you know you can store and retrieve from in the WordPress options table by importing api from @wordpress/api. In this guide…
C.
Create Custom Meta Boxes Using the WordPress Block Editor (Gutenberg)
The first question you might have is “why would I need to create custom meta boxes with the Block Editor (Gutenberg)?“, you can still implement meta boxes with PHP, and add controls to the block, post, or even a custom…
U.
Using Post Meta Fields to Store Attributes in the WordPress Block Editor (Gutenberg)
When you register and store attributes in the WordPress block editor (Gutenberg) you have the option to store them as post meta, instead of the usual block attributes. Using this method, you could have a setting in your block that…
U.
Using PHP to Render a Block in the WordPress Editor (Gutenberg)
When creating a block in the WordPress Block Editor (Gutenberg) you have likely been using JavaScript to render the block into the content of your post. In this guide we are going to look at using PHP to render the…
U.
Using a Template with InnerBlocks in the WordPress Block Editor (Gutenberg)
When you create a block in the WordPress Block Editor (Gutenberg) you can create an area that allows other block types to be nested inside your block. You do this with the InnerBlocks component. In our other guides we previously…
R.
Register a Block Template for the WordPress Block Editor (Gutenberg)
In my previous guide I explored the power of block patterns. Block templates are similar, but instead of relying on your client to insert block patterns into the editor, it gives them a full layout as soon as they insert…
R.
Register a Block Pattern in the WordPress Block Editor (Gutenberg)
Block patterns in the WordPress block editor (Gutenberg) are a powerful feature that let you create varied layouts with very little effort. Using register_block_pattern you can very quickly create a block pattern for you or your clients. 1.Prerequisites WordPress installation…