I work with WordPress sites that have lots of meta fields exposed through the REST API. Within Gutenberg, I’m often checking those values by querying the “meta” attribute in the data. Sometimes the larger number of meta fields makes it difficult to find the specific fields I’m interested in. To make my life easier, I’ve put together a code snippet that filters the keys in the meta object that is returned.
Gutenberg
unregisterFormatType() for Specific Block Type in Gutenberg
The WordPress block editor (a.k.a. Gutenberg) allows formatting in RichText fields via the Formatting Toolbar API](. Each type of formatting (e.g. Bold and Italic) is a “formatType”. Here we’ll look at removing one of these formatTypes from a specific block type (e.g. removing Bold from the core paragraph block).
How to Close and Re-Open WordPress Gutenberg Sidebar
The sidebar gets a lot of use in the WordPress Block Editor, a.k.a. Gutenberg, but I found myself in a situation where I needed to programmatically close the sidebar and then re-open it later. This is how I did it.
Change Render Size of Featured Image in WordPress Gutenberg Block Editor
In the WordPress block editor (a.k.a. Gutenberg) the “Featured Image” is rendered at the WordPress ‘large’ image size by default. By adding a WordPress JavaScript filter to the ‘editor.PostFeaturedImage.imageSize’ hook, we can change this default rendering.
WordPress View Block Attributes
When developing a WordPress plugin that creates a Gutenberg block, it is invaluable to be able to view the attributes on the block. Here are some tricks I use to view this information.
WordPress Gutenberg Trigger Autosave
Recently, I was documenting the steps to reproduce a certain bug and the bug required the presence of an autosave (along with the “There is an autosave of this post that is more recent than the version below.” message). Rather than wait for an autosave to occur naturally, I wanted to speed things up and manually trigger one. This is the command I use to do that.
WordPress Gutenberg Notice in JavaScript
You can display four types of notices in the WordPress Block Editor (a.k.a. Gutenberg) using JavaScript: error, warning, info, and success. This blog post contains an example of each.
Display Keyboard Shortcut in WordPress Gutenberg
In Gutenberg (a.k.a. the WordPress Block Editor), keyboard shortcuts are displayed differently on Apple devices and other devices, e.g. ^H on an Apple device and Ctrl+H on other devices. This is accomplished with wp.keycodes.displayShortcut.
Enable, Read, and Write Post Meta in WordPress Gutenberg
The WordPress block editor (a.k.a. Gutenberg) communicates with the database via the WordPress REST API. We can read and write post meta from within the Gutenberg editor after we enable the specific post meta field in the WordPress REST API.
Add Gutenberg JavaScript Filter
WordPress PHP filters allow you make a value modifiable from outside of your code. With the WordPress Block Editor (a.k.a. Gutenberg), you can now do the same thing in JavaScript.