A comment block that is only shown when editing content. It is not displayed on front end.
I recently completed a complex WooCommerce based site. I avoided the temptation to use Elementor and stuck with Gutenberg and Genesis Blocks. For styling some of the blocks needed additional CSS classes added. Knowing to add the classes to add is easy to forget. I needed an in-editor note.
ACF Pro or Genesis Custom Blocks
The easiest solution would have been to create a block with Advanced Custom Fieds Pro or Genesis Custom Blocks. This would have required the installation of an additional plugin – overkill for something that would only be useful when editing a page or post.
This was a great excuse to try to learn to write a custom Gutenberg block.
Online tutorial
I read through the first few pages of the Writing Your First Block Type tutorial. The static block was simple enough though the ES5/ESNext differences totally confused me.
I quickly jumped forward to the sample editable block and started changing variable names etc. It worked quite well.
Now I can add it to client sites with notes to help site editors.
Prevent front end display
For a while I got stuck on preventing the block from being displayed on the front end. I first used the ‘render_block’ filter that I wrote about back in late 2019. I simply returned the empty string for my block.
Then I was browsing the code blocks and saw that the Latest Posts code block is registered with a custom callback (‘render_callback’ argument). I replaced the ‘render_block‘ filter with this argument and just return an empty string. Much easier!
After finishing my code I wanted to add a tag to clearly indicate that the block was a comment. I found the Editor Blocks Outline plugin from a WordPress Tavern article. The plugin adds the block name to the top right of the block. I looked at the CSS and copied it to add ‘Comment‘ to my blocks.
Code on GitHub
I wrote this plugin as a way to learn about Gutenberg block development (though it didn’t really work) and because I didn’t find any comment block out there. I have put the code on GitHub as it may be useful to others and I might submit it to the WordPress plugin repository.
The first release is available at 0.1.zip (I need to learn how to name releases).
Leave a Reply