Add a custom sidebar panel to Gutenberg – Richard Tape

Experience Level: Intermediate to Advanced JavaScript

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.

Article:

Add a custom sidebar panel to Gutenberg

Topics:

  • Simplifying terminology used in block editor development
  • Registering and rendering a custom block setting panel
  • Whitelisting the panel for specific block types

Takeaways:

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.

The code examples are well-documented, and the mix of JavaScript and JSX make for a great introduction to what you can expect when interacting with WordPress’ block APIs.

Related Reading:

Extending the WordPress metadata API – Pippin Williamson

Experience Level: Beginner to Intermediate PHP

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. 😉

Article:

Extending the WordPress metadata API

Topics:

  • 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
  • Wrap up

Takeaways:

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.

Related Reading:

[PHP] Singletons and Shared Instances – Alain Schlesser

Experience Level: Intermediate to Advanced PHP

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.

Article:

Singletons And Shared Instances

Topics:

  • 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

Takeaways:

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.

Related Reading:

How to Adapt Your Plugin for Gutenberg: Part 1 (Block API) – Hardeep Asrani

Experience Level: Intermediate to Advanced JavaScript

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.

Article

How to Adapt Your Plugin for Gutenberg: Part 1 (Block API)

Topics:

  • 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

Takeaways:

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.

Related Reading:

Create Style Variations for WordPress Gutenberg Blocks: Parts I & II – David Gwyer

Experience Level: Intermediate JavaScript, CSS

In this two-part tutorial – published Nov. 28 and Dec. 14, 2018, respectively – TutsPlus instructor David Gwyer breaks down exactly how to go about giving blocks the exact style you’re looking for.

Part I: https://code.tutsplus.com/tutorials/implementing-block-style-variations-in-gutenberg-part-1–cms-32243

Part II: https://code.tutsplus.com/tutorials/implementing-block-style-variations-in-gutenberg-part-2–cms-32254

Topics:

  • 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

Takeaways

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.

Related Reading:

A Quick Start Guide To The WordPress REST API – Brenda Barron

Experience Level: Beginner to Intermediate  PHP

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.

Article:  https://www.wpsuperstars.net/wordpress-rest-api/

Topics:

  • What the WordPress REST API is and how it works
  • 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.

Takeaways:

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.

Related Reading:

Two ways to build Gutenberg Blocks – Jason Bahl

Experience Level: Beginner PHP, Intermediate to Advanced JavaScript

In this tutorial – published Nov. 15. 2018 – Jason Bahl covers how to build the same custom testimonial block two different ways: Extending Advanced Custom Fields PHP, and create-guten-block with JavaScript.

Article:

Two ways to build Gutenberg Blocks

Topics Covered:

  • 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.

Takeaways:

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!

Related Reading:

[JavaScript] Event Listeners and Business Logic – Thorsten Frommen

Experience Level: Beginner to Intermediate JavaScript

In this post – published Jan. 23 2018 – Thorsten Frommen from Human Made examines the relationship between the Separation of Concerns and Single Responsibility principles when mixing JavaScript event listeners with business logic.

Article:

Event Listeners and Business Logic

Topics Covered:

  • 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

Takeaways:

This article is maybe a little bit different from your run-of-the-mill JavaScript guide or tutorial  in that it specifically focuses on foundational principles of object oriented programming. It’s also not WordPress-specific, though still very relevant.

Thorsten does a great job of explaining key aspects of the SOLID (Single Responsibility) and Separation of Concerns principles as they apply to coupling event handling with business logic. This article can be viewed as a great resource to those who aren’t yet set in their JavaScript-writing ways. 🙂

Related Reading:

PHP Encryption Methods for Passwords & Other Sensitive Data – Ashley Rich

Experience Level: Intermediate to Advanced PHP

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.

Article:

PHP Encryption Methods for Passwords & Other Sensitive Data

Topics Covered:

  • 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

Takeaways:

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.

Related Reading:


Getting Started with JavaScript – Gutenberg Handbook

Experience Level: Beginner JavaScript

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.

Article:

Getting Started with JavaScript

Topics Covered:

  • 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)
  • Troubleshooting tips
  • Information about the different versions of JavaScript & build steps

Takaways:

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.

Related Reading: