Blog · Page 2 · Florian Brinkmann

Change block edit wrapper attributes

Posted on August 5, 2020August 5, 2020

In Gutenberg, the markup from the edit function is wrapped in a few other elements. The outer wrapper of each block has the wp-block class and a data-block attribute that contains the name of the block with its namespace – core/group for the group block, for example.

We can change the attributes of that wrapper, so we could add class names depending on the selected/changed block options, what could make the styling of blocks in the backend easier.

Create Gutenberg field like the one for post tags

Posted on August 5, 2020August 5, 2020

For a project I needed the feature to link posts of a custom post type with posts of another custom post type. I did not know which Gutenberg component would be the best match for that, but then the tags field for post tags seemed like a good fit: the user types something and gets suggestions which he can add to a selection.

The FormTokenField can be used to create that behavior, all possible options can be found in the linked readme. With that, I had my component of choice, just with custom post type posts instead of tags.

Conditionally prevent publishing/updating in Gutenberg

Posted on April 30, 2020April 29, 2020

It is possible to disable the publish/update button in Gutenberg. With that, we could, for example, force the user to add data to a custom block that adds metadata to a custom post type.

Block plugin updates and the sometimes delayed effect on the frontend

Posted on April 29, 2020April 29, 2020

I am a big fan of Gutenberg. But a few weeks back I had multiple content pages that got destroyed in the frontend after updating, without changing much.

The reason: a block plugin had an update earlier which changes block markup, and with that, a few of my custom CSS rules did not apply any longer. Well, that could also happen with plugins that use shortcodes, but…

Get correct metadata after post update in block editor

Posted on January 12, 2020January 12, 2020

Sometimes it is necessary to do something after a post was saved. When using the old hooks like save_post and post_updated, the result is not as expected with the block editor: the metadata values are the old ones from before saving.

The rest_after_insert_{$this->post_type} action hook comes to the rescue ({$this->post_type} needs to be replaced with the post type, for example, post or page). It gets the post object as the first param and when fetching data via get_post_meta(), we get the correct data.

Remove panels from the block editor sidebar

Posted on November 8, 2019February 9, 2020

The document sidebar of the block editor contains various panels, for example, one for the featured image and, for posts, one for tags. If specific panels are not used, it could be useful to hide them, to make the sidebar clearer. This post shows you how to do this.

Get post type in block editor

Posted on July 6, 2019February 9, 2020

If you need to distinguish between post types in a block editor script, you can use the following code to get the post type:

wp.data.select('core/editor').getCurrentPostType()
Code language: JavaScript (javascript)

Define block templates for new pages, posts, and custom post types

Posted on May 31, 2019February 9, 2020

WordPress’ block editor comes with the feature of block templates. This allows us to defined a set of blocks that will be present in the content of new pages, posts and/or custom post types. This post shows you how to use that functionality and how to use reusable blocks in templates.

Modify save function of block

Posted on March 7, 2019February 9, 2020

Sometimes there is a block for the WordPress block editor that is almost what we want, but it would be necessary to modify the markup it saves to the database. This post shows how we can filter the save function of a block to get that done.

Display specific Gutenberg blocks of a post outside of the post content in the theme

Posted on January 20, 2019February 9, 2020

Sometimes it could be useful to display parts of a post or page on another place on the site. For example, a slider above the title of the post/page. Here I show you how to loop through the blocks of a post block per block in a theme to get this done.