Contents
How to create custom Gutenberg blocks in WordPress?
With the PHP file ready, it’s time to set up the test-block.js JavaScript file. Go ahead and create this file within the same plugin directory as plugin.php: When the file is ready, open it using a text editor, and prepare to code! This example is a very simple block to let you add a text box with a border to your pages:
How do you set up styles in Gutenberg?
A somewhat less known feature in Gutenberg is the option to set up different styles for blocks. You can register as many different styles upon any type of block in order to give the same block different designs. Possible styles for blocks are displayed as a section in the editor’s right hand side.
What’s the latest version of Gutenberg for WordPress?
WordPress 5.0 is out, and with it comes the new block-based editor, Gutenberg. Out of the box, it packs in a decent selection of blocks you can use across your pages and posts. However, since this is WordPress, there’s always room for more custom functionality.
How to add custom block styles to…?
The above code adds a custom block style onto the Heading block type, which would result in the class is-style-colored-bottom-border onto any Heading that has chosen this style.
What are the fields in a Gutenberg block?
For this block we will be using three fields: “Title”, “link” and “color”. I set it up like this inside ACF: To make our block render on the front end, all we have to do it to create the callback function listed in the array in the acf_register_block above.
Can you build your own Gutenberg theme with ACF?
Thankfully the team behind ACF thought of that, and made it easier. But if you want to build your own theme, you probably want your own building blocks as well. Well, off course they thought of that when developing Gutenberg, and you can, if you’re React savvy build your own blocks with Gutenbergs Block API.