WordPress block tutorial
The Hello World Block – Create a custom WordPress Gutenberg Block
Share
Basics of the registerBlockType function
In this article we will focus on the basics of what a block is and how they are registered. We will not cover how to set up your environment and project for block development. We will do this in a later post!
You register a block in javascript with the function registerBlockType (found in ‘@wordpress/blocks’). The function takes a name and a block object as parameters. The block object basically contains:
- Meta data. This includes name, category and attributes that the block will use.
- Edit function. A React functional component that is run in the editor when you create your pages and posts.
- Save function. A React functional component that is run when you click on save. WordPress will save the html that is returned from this function into the database with your post.
Both the save & edit functions return jsx. Below we register a ‘Hello World’ block:
import { registerBlockType } from '@wordpress/blocks';
registerBlockType("your-namespace/helloworld", {
category: "helloworld",
attributes: {},
title: 'Hello World',
icon: 'block-default',
keywords: ['sample-block', 'hello world'],
edit: (props) => {
const { attributes, setAttributes } = props; // you will use these!
return (
<div>
Hello World (in the editor)!
</div>
);
},
save: (props) => {
const { attributes } = props; // you will use these!
return (
<div>
Hello World!
</div>
);
},
});
For this block to actually be useful we will need to add editing capabilities. This is done by either adding inline-editing with the ‘toolbar’ or adding editing controls on the right sidebar. Here is a short intro to coding the inspector controls (adding controls to the editor sidebar).
When you create larger blocks, you will put the edit & save function in seperate files and import them when you register your block registration. That is why you will find edit.js & save.js snippets in other tutorials on Wpblockz.
To get a block to show up in the editor, you will have to register the scripts with php. We will cover the setup of your first block in our next post. You can also check the official docs here: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/. Sign up to our newsletter below to get the latest tops on WordPress Gutenberg blocks!
Read more tutorials
Top 50 WordPress Blogs to market your WordPress product (2024 edition)
Discover the top 50 WordPress blogs to market your WordPress product in 2024. Learn effective strategies and stay tuned for more tips on boosting your plugin, theme, or tool’s visibility.
Read more Top 50 WordPress Blogs to market your WordPress product (2024 edition)
How to use multiple post types in a Query Loop Block
Currently the Query Loop only supports one post type. In this article we will show how we add multiple post types to query using the pre_get_posts action.
Read more How to use multiple post types in a Query Loop Block
How to add filters and search to the WordPress Query Loop Block
It has been a pain to add filters and search to your feeds in Gutenberg. Not any more, we will teach you how.
Read more How to add filters and search to the WordPress Query Loop Block