A Sample Block: Spoilers

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

1. spoilers.php – This is the main PHP file
2. spoilers/index.js – This is the code
3. spoilers/editor.css – This formats what you see on the editor
4. 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!