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.