I’ve written about my love for WordPress’s Gutenberg editor before, so this weekend I thought I’d try my hand at writing my first block.
I wanted to make something that would make maintaining the UX Engineer Playbook a bit easier.
Until today, I had been manually copying and pasting the HTML for the playbook into an HTML block. While the new HTML block was far better than dealing with the old TinyMCE editor, it was starting to get a bit unwieldy.
I’m not going to go into details of how to code the block, as there are already plenty of articles and how-tos on that. I will, however, share a few first impressions:
- WordPress’s own documentation on creating blocks is decent, but it really could use some work in the more advanced sections. In particular, the documentation on many of the components you might use in the Inspector is lacking.
- WordPress should make ESNext the official standard for writing blocks. Combing through examples in both ES5 and ESNext is annoying. The extra compile step is well worth it. Just commit.
- As part of my effort, I went ahead and enqueued my main stylesheet on the back-end as well, so that my experience in the Gutenberg editor more closely matched the front-end. Having the same fonts and styles in the WYSIWYG as on the front-end of the site is fantastic. WordPress should make this a first-tier feature, rather than something you need to code; it’s useful for everyone.
Need Hosting? If you’re looking for a reliable WordPress host, check out my review of Bluehost vs GoDaddy.