In this tutorial – published Oct. 5, 2018 – Rich Tape gives a great overview of block editor terminology along with example code for adding a custom panel to the block editor sidebar.
Simplifying terminology used in block editor development
Registering and rendering a custom block setting panel
Whitelisting the panel for specific block types
Rich does a great job breaking down some of the vernacular the Gutenberg team uses in naming its APIs and draws understandable comparisons between how the legacy meta box and new Sidebar APIs work. Bonus points are awarded for explaining how to go about whitelisting use of the custom panel for one or more specific block types.
In this tutorial – published June 8, 2016 – Pippin Williamson gives a great tour of how the WordPress core Metadata API works and how to go about extending it with minimal effort and maximum utility.
Full disclosure: I work for Sandhills Development, Pippin is my boss. 😉
Review of core object types with metadata and available CRUD (create, read, update, delete) functionality
Extending the Metadata API
Creating the metadata table, including gotchas and code examples
Interacting with metadata via core APIs
Like some of the other “evergreen” content highlighted on Level Up WP, this post from Pippin Williamson stands the test of time in that it’s still very useful and relevant regardless of when it was originally published (2016).
Every WordPress developer should at least be aware of the mechanics for how the core metadata API works even if they aren’t extending it. It’s one of the few core APIs that is elegant in its simplicity: plug things in in just the way core expects and it just works.
In the post – published July 17, 2017 – Alain Schlesser examines use of the Singleton pattern in WordPress development with PHP, whether it’s a good or bad idea, and alternative approaches to solve the same problems.
What is a Singleton?
Problems with the Singleton pattern: Singleton vs SOLID
Singleton in practical usage
Alternatives to using the Singleton pattern with code examples
In-depth examination of the Factory and Static Proxy patterns, also service locators with code examples
Using the WordPress Plugins API (as a Singleton alternative), with code examples
Using some combination of the aforementioned patterns together
Although this post was published more than a year ago, the fact that it covers software design means that its usefulness doesn’t really have an expiration date. This post is something that the WordPress development community needs more of: in-depth examination of different common software patterns that can be used to solve specific problems.
Easily one of the biggest issues in WordPress plugin and theme development today is developers having very little sense of structure or forethought in how they structure their code. Just because the shoe fits now, doesn’t mean you should wear it, and it doesn’t mean it will always fit.
Even if you don’t end up implementing any of the suggested patterns from this post, this post is an excellent, authoritative example for a better approach to software design you come back to again and again and always glean something new.
In this post – published July 26, 2018 and part of a two-part series – Hardeep Asrani outlines a comprehensive guide for converting meta boxes, shortcodes, TinyMCE buttons, and other editor features in plugins to leverage block editor APIs.
Identifying elements to convert, such as meta boxes, shortcodes, TinyMCE buttons, or other legacy editing features
How to adapt a plugin to work with the block editor
Setting up a block editor development environment
Approaches for adapting plugins to work with the Block API
Enqueuing scripts and importing dependencies
Defining block attributes and configuring the editing interface
Intro to the Sidebar API (covered in detail in part II)
Extending block inspector, working with block controls and toolbar
It’s worth noting that this post is merely part I of a two-part series published by this author. The second part is just as in-depth as the first and will probably be shared as its own post later.
This tutorial is particularly useful it directly addresses a problem plaguing many plugin developers, even following the WordPress 5.0 release – how to go about updating your plugin features. Hardeep does an excellent job illustrating how to solve many old problems in a new, accepted way, without focusing too heavily on shiny things.
This tutorial series is primarily useful in that provides excellently-documented code examples with very plausible real-world use cases, something every tutorial should aspire to.
Part I: Overview of support for block styles in several core blocks
Part I: Introduction to how to go about registering new block styles, including basic code examples (see Part II for implementation)
Part I: Gotchas around overriding block styles in the editor
Part II largely covers implementation details, many parts with code
Part II: Tips for creating a basic block to style (with create-guten-block)
Part II: Working with editor-only or editor + front end stylesheets
Part II: Registering custom CSS against block styles
Part II: Gotchas of working with block style defaults
Part II: Registering block styles in plugins and themes and understanding logistical challenges with those approache
This two-part series comprehensively covers the ins, outs, and gotchas of working with the block styles API in WordPress 5.0+. The fact that it’s published on TutsPlus gives it some authority and weight, and David does an excellent job of breaking down complex topics into bite-sized pieces.
For anyone looking to better tailor their writing and reading experience on their block-enabled site, this two-part guide provides an excellent foundation upon which to realize that experience.
In this article – published Dec. 12, 2018 – Brenda Barron paints a dynamic picture of what the WordPress REST API is, its history and how it works, and some of its potential use cases in real-world development.
Overview of REST API concepts, including routes & endpoints, requests, responses, schema, controllers, and how to access endpoints
Extending the REST API, with code examples
Explanation of other key concepts, including the use of namespacing for endpoints & routes, sanitization, validation, callbacks, and more.
True to its title, this article provides an excellent overview of what the WP REST API is, how to get started understanding how it works, and a little bit on how to start extending it. It doesn’t go particularly in-depth with code, but it does provide an excellent foundation upon which developers can build an understanding of what the WP REST API is capable of.
Extending Advanced Custom Fields to register, style, and render a custom testimonial block using example PHP, HTML, and CSS
Registering and rendering ACF fields for the custom block with PHP or JSON, including example code
Scaffolding a custom testimonial block with the create-guten-block utility using Node JS
Building out the scaffolded testimonial block with React and JSX with extensive code examples
Approach to defining attributes and adding inspector controls for the scaffolded block
Closes with an interesting discussion about the need for a server-side Gutenberg API and existing solutions to improve the developer experience.
There’s something for everyone in this tutorial, which makes it a great resource for WordPress developers on any level! Notably, the tutorial does a fantastic job of contrasting what it looks like to register a block using something like Advanced Custom Fields – a very turn-key, PHP-based solution – vs using full-blown scaffolding and further development with React and JSX. Nice job on this one, Jason!
What event listeners are and how they work at a basic level
Overview of the Single Responsibility principle with code examples
Defining business logic and best practices for keeping it separated
Best practices for separating JS event handling from business logic
In this guide – published Sept. 18, 2018 – Ashley Rich of Delicious Brains takes a deep dive into the three of the most common encryption methods available in modern PHP today.
Broad coverage of three common types of encryption: hashing, secret key encryption (via Libsodium), and envelope encryption (via Cloud KMS)
In-depth analysis for each type of encryption along with code examples showing how they are best used
Ashley does a good job of covering three of the more common types of encryption. The post is rich with recommendations for best practices, which makes it a valuable resource worth bookmarking and referring back to later as needed. Code examples were clear and useful, a great combination in a reference guide like this.
In this tutorial – published in the Gutenberg Handbook – the WordPress docs team does a great job of explaining the basics for enqueuing block editor assets from a plugin or theme for both the editor only and both the editor and front end.
Enqueuing custom scripts for use in the block editor
Instructions for how to cite the Blocks API as a dependency
Enqueuing custom styles for use in both the block editor & front end
Registering and styling a new custom block style for a core block (Quote block)
This is a great addition to the Gutenbook Designer & Developer Handbook, which continues to be a work in progress. The docs team did a great job getting this tutorial shaped up (special shout out to Marcus Kazmierczak – @mkaz for notable contributions!).
This tutorial is especially useful because it illustrates how established WordPress APIs (like the dependencies API) works together with the new block editor in the admin and display of blocks on the front end. The custom quote block style tutorial near the end was a nice a bonus!
Side note: When you’re reading the tutorial, make sure to draw a distinction between usage of the enqueue_block_editor_assets and enqueue_block_assets hooks in the “Extending the Block Editor” section of the tutorial.
enqueue_block_editor_assets hook only enqueues assets in the editor, whereas enqueue_block_assets enqueues assets in both editor and the front end. Something to keep in mind.