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 file
spoilers/index.js
– This is the code
spoilers/editor.css
– This formats what you see on the editor
spoilers/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!