I have wanted to write a blog post on the
How to Access registerBlockType()
WordPress makes this function accessible as a global variable in the window object as
Here is a shortcut you can add at the top of your JS file to “import” this function into your code:
NOTE: At the time of writing, wp.blocks is NOT available as a package you can actually import into your code as you would other packages. It is only available via the global window object.
registerBlockType Name and Settings Parameters
registerBlockType() function takes two parameters: name and settings.
- name [string] – “Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block” Source
- settings [Object] – The settings parameter is an object with several predefined properties that must be assigned for your block to work. We will look at these in more depth.
Here is what this would look like without all of the settings configured.
registerBlockType() settings object has seven properties that include both meta information about the block as well as methods controlling the UI and functionality for the block in the editor and on the frontend.
- title [string] – The title setting gives your block a searchable, human readable name. It should be escaped using wp.i18n.__().
- category [string] – The category setting determines under which heading a user can find your block. Options include “common”, “formatting”, “layout”, “widgets” and “embed.”
- icon [Dashicon|Element] – The icon setting for registerBlockType determines what icon will represent your custom block. Can use a WP Dashicon or custom SVG.
- keywords [Array] – The keyword setting provides three additional keyword / phrases that will display your block when searched for. Limited to 3.
- attributes [Object] – The attribute setting identifies what dynamic content we are using in our blocks. Several attribute options exist depending on what types of data we are using. Attribute settings are optional if your block uses no dynamic data. This data is then made available via props.attributes.name. Read more.
- edit [function] – The edit setting determines what be displayed in the editor area for the block. Must return a valid React element using wp.element.createElement() or JSX. Also accepts dynamic data as a props parameter.
- save [function] – The save setting determines what be displayed when the block is converted to content for the frontend. Must return a valid React element using wp.element.createElement() or JSX. Also accepts dynamic data as a props parameter.
The first four of these [title, category, icon and keywords] are more for the user and include meta information about the block itself. The last few settings [attributes, edit, save] are a bit more complex and control the actual functionality of a block.
Example of registerBlockType in Action
In order to show all of the settings in action, particularly the attributes setting, we need to have a block with some sort of dynamic data.
Below is an example of a simple block with one editable field. This shows
registerBlockType() in action with all it’s parameters and settings.
Hopefully though, this post helps you understand the basics of how
registerBlockType() works and gives you a basis to get started with it.
Learn More About Building Blocks in WordPress
To learn more about building blocks and other aspects of Gutenberg Development, please check out my Gutenberg Development Course.