Category Archives: Software Hacks

WordPress Block rending simple HTML

When I wrote my notes on the Grit boot I made a mini quiz based on the questions in the book – originally that was just in a “classic” WordPress posting, but with the recent update to Gutenberg the hacky little script stopped working. So I thought I’d have a look at coming up with a slightly less hacky WordPress Block. This is just some notes on what I did to basically create a block which is a block with predefined HTML (nothing fancy).

Using the WordPress command line interface (CLI) I created a simple package (needed to hold a block) followed by a block using:

$ php wp-cli.phar scaffold plugin "grit-quiz"
$ php wp-cli.phar scaffold block grit-quiz --title="Grit Quiz" --plugin="grit-quiz"

The changes then just need to be made to the index.js file in wp-content/plugins/grit-quiz/blocks/grit-quiz. After a bit of hunting I needed to have an element RawHTML returned so I changed the save method so that it would store the HTML directly.

save: function() {
	return el(
		"p", 
		null, 
		el(
			wp.element.RawHTML, 
			null, 
			formHtml // a variable with the basic HTML
		)
	);
}

The final step is to include the blocks – surprisingly this is not done automatically by the cli tool. Just open the php file in the plugin directory – in this example that is “grit-quiz.php” and add the include for the blocks.

include("blocks/grit-quiz.php");

As with all of these things the result is quite simple but only when you know the answer. I have popped the full code here for future reference.