How to use & develop WordPress Blocks
Latest articles
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your website.
Read more Learn Gutenberg block building – Create a block that renders an ACF field
What is the theme.json in WordPress Full Site Editing?
Short introduction to the theme.json file that defines a WordPress full site editing theme. Includes useful resources to learn more!
Read more What is the theme.json in WordPress Full Site Editing?
Creating a server side rendered Gutenberg block
Learn how to create your first ‘Hello World’ server side block. Adding dynamic content to your block theme with ease.
Admin styles and scripts
Adding custom styles to WordPress Gutenberg blocks is easy and at the same time extremely useful when developing your website.
Best chart & visualization Gutenberg block plugins 2021
We recently did a large website for a government agency that needed to show charts in their articles. Here we share the result of the deep dive we did to find the optimal solution.
Read more Best chart & visualization Gutenberg block plugins 2021
Register block styles in WordPress
Adding custom styles to WordPress Gutenberg blocks is easy and at the same time extremely useful when developing your website.
How to add an excerpt to pages and custom post types in WordPress
To add support for excerpts in pages and custom post types you simply use the add_post_type_support() function.
Read more How to add an excerpt to pages and custom post types in WordPress
The Hello World Block – Create a custom Gutenberg Block
The Hello World of Gutenberg Block development. In this tutorial we show the very basic structure of a block.
Read more The Hello World Block – Create a custom Gutenberg Block
MediaUpload – Using Gutenberg editor controls
Upload media to your custom Gutenberg block. WordPress has made this easy with the MediaUpload component that is part of the block editor.
Toggle Control – Using Gutenberg editor controls
The Form Toggle control is basically like a checkbox, a boolean control, or if you will, an on/off switch. It’s by far the most common control we use when building blocks.
How to code the Inspector Controls?
The Inspector Controls are the settings in the sidebar of Gutenberg blocks. In code it is a React component used in the edit-function of a block.
Change the color palette of the Gutenberg Blocks editor in WordPress
Here is a simple guide on how to update the color palette of the Block editor to fit your theme.
Read more Change the color palette of the Gutenberg Blocks editor in WordPress
Tool to generate code for your WordPress Block Patterns
We made a little tool to make it easier to make the code snippet you need to add patterns in your functions.php file.
Read more Tool to generate code for your WordPress Block Patterns
Remove default block patterns from WordPress
If you want to remove all the default block patterns*, add the below snippet to your functions.php or plugin file. You will still be able to register your own patterns.
How to make a Pattern for the WordPress Gutenberg editor
There are two methods: Adding a snippet in your functions.php file or by using a plugin. Here we show both.
Read more How to make a Pattern for the WordPress Gutenberg editor
Why a dedicated development blog for WordPress Gutenberg Blocks?
The Gutenberg editor is a big deal for WordPress and WordPress is a big deal for the internet. It has (or will) totally change the way developers make WordPress sites. Going from page template based development to block patterns is fundamentally different for both the developer and content producers. We thought we could share our gained knowledge to other developers, to make their transition abit more smooth.
