Before I jump into this, I have to say .. this post was not written in Gutenberg.
Sadly the plugin I use for code display, when I need it to be colored and easy to read, isn’t yet Gutenberg friendly. And, worse IMO, there’s a bug that causes multiline shortcodes to be smashed into one line, which makes a code block unusable. My two fixes are either the plugin I use be updated (which is beyond my skills at the moment) or I find a new plugin (looking). Or I wait.
Anyway.
Let’s make a simple block that you can’t edit!
There are Four Files Needed
spoilers.php
– This is the main PHP filespoilers/index.js
– This is the codespoilers/editor.css
– This formats what you see on the editorspoilers/style.css
– This formats what you see on the front end
The last two aren’t required but I use them to make things pretty.
The PHP
The PHP file will need to be included in your code however you want to do it. I have a file called _blocks.php
which includes all my Gutenblocks. In turn, it is included in my plugin’s main file.
function lp_spoilers_block_init() { $dir = dirname( __FILE__ ); $index_js = 'spoilers/index.js'; wp_register_script( 'spoilers-block-editor', plugins_url( $index_js, __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element' ), filemtime( "$dir/$index_js" ) ); $editor_css = 'spoilers/editor.css'; wp_register_style( 'spoilers-block-editor', plugins_url( $editor_css, __FILE__ ), array( 'wp-blocks' ), filemtime( "$dir/$editor_css" ) ); $style_css = 'spoilers/style.css'; wp_register_style( 'spoilers-block', plugins_url( $style_css, __FILE__ ), array( 'wp-blocks' ), filemtime( "$dir/$style_css" ) ); register_block_type( 'library/spoilers', array( 'editor_script' => 'spoilers-block-editor', 'editor_style' => 'spoilers-block-editor', 'style' => 'spoilers-block', ) ); } add_action( 'init', 'lp_spoilers_block_init' );
The JS
Here’s the weird stuff. And I’m going to be honest here … I don’t understand all of this yet. But I picked this very simple example because it lets you see what’s going on in a concrete way.
( function( wp ) { var registerBlockType = wp.blocks.registerBlockType; var el = wp.element.createElement; var __ = wp.i18n.__; registerBlockType( 'library/spoilers', { title: __( 'Spoiler Warning' ), icon: 'vault', category: 'widgets', supportHTML: false, edit: function( props ) { return el( 'div', { className: props.className }, __( 'Warning: This post contains spoilers!' ) ); }, save: function() { return el( 'div', { className: 'alert alert-danger'}, __( 'Warning: This post contains spoilers!' ) ); } } ); } )( window.wp );
The CSS
There are two CSS files.
editor.css
.wp-block-library-spoilers { border: 1px dotted #f00; background-color: pink; font-weight: bold; }
style.css
.wp-block-library-spoilers { font-weight: bold; }
Back in the js there was a bit that looked like this: { className: props.className },
That’s what tells it to use these. In addition, I use this to call some theme specific code: { className: 'alert alert-danger'},
The Output
On the editor, I see this:
I included the block icon so you could see the little vault I used to indicate the block.
On the front end, everyone sees this:
What’s Next?
Making it editable, of course!