June 11, 2024 — WordPress 6.6 will be released on July 16, 2024, and one of the exciting new features will be overrides for synced patterns. Overrides allow you to ensure a synced layout and style across patterns while allowing each instance of the pattern to have customized content. This provides flexibility to content editors while enforcing design consistency.

In this Developer Hours session, we explored how you’ll be able to implement overrides in 6.6 (or today using the Gutenberg plugin) and how they work under the hood. You will learn:

– What Synced Pattern Overrides are and when you should use them
– How to create overrides in the Editor
– What blocks and attributes are currently supported
– How overrides work at a fundamental level and their connection to the Block Bindings API
– How to share your feedback and help contribute to the future enhancement of this feature

Presentation Slides »

May 28, 2024 — WordPress Playground offers a powerful way to experiment with WordPress environments instantaneously. In this session, we dove into the world of WordPress Playground blueprints, exploring how they can be used to create dynamic, disposable WordPress instances.

We started with a brief overview of WordPress Playground, ensuring you have a solid understanding of its capabilities. Then, we looked at the details of blueprint creation and usage, providing hands-on examples and practical tips. When watching the recording, you will learn how to:

– Set up your first Playground environment.
– Create custom blueprints that include specific plugins, themes, and content.
– Use blueprints for testing, which includes enabling experimental features in Gutenberg.
– Use WP-CLI commands with Playground to add posts and attachments.
– Leverage blueprints for teaching and demonstrations.
– And much more!

Presentation Slides »

May 14, 2024 — Custom meta boxes have been a common tool used by plugin and theme developers to add additional functionality to posts and pages in WordPress. While meta boxes are supported in the Block Editor, they are considered a “legacy” tool and do not provide an ideal user experience. There are also a number of technical downsides to meta boxes, and developers are encouraged to migrate to alternatives.

In this session, we explored the current options available for adding custom plugin and theme settings in the Block Editor and how you can manage metadata using React and native WordPress components. You will learn how to:

– Use slots to add custom panels in the Settings Sidebar
– Implement a modal for additional settings
– Fetch and save post metadata using JavaScript
– Connect post metadata to blocks

Presentation Slides »

April 30, 2024 — WordPress 6.5 introduced the Block Bindings API, which lets you connect custom fields (or any data) to Core blocks. In this session, we discussed how this fits into the bigger picture of the block system and how you can combine it with existing features, laying the groundwork for much more advanced and dynamic site builds.

You’ll learn everything you need to know to start using the Block Bindings API.

Presentation Slides »

April 9, 2024 — The Interactivity API was recently released in WordPress 6.5. Now is the time to experiment with the API and incorporate interactions into your custom blocks, but where should you start?

Often, the best way to learn is through real-world examples. In this Developer Hours session, Damon Cook from WP Engine demonstrates how he built a form submission block that leverages the API. This example will teach you how to kickstart a custom interactive block using the Create Block package, use directives to assign critical attributes to your HTML markup, create the store, and hook up the client-side JavaScript.

Resources:

Damon’s demo plugin: https://github.com/colorful-tones/feedback-block
Interactivity API documentation: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/
Tutorial on building a custom block: https://developer.wordpress.org/block-editor/getting-started/tutorial/

January 16, 2024 — Welcome to the first Developer Hours session of 2024 where we explored the “Build your first block” tutorial from the Block Editor Handbook.

During the session, we worked through the tutorial together, answering any questions folks had along the way. Attendees learned the basics of building a custom block, including the key concepts of block development and an overview of the common tools and packages used.

December 19, 2023 — In the final installment of Developer Hours for 2023, we explored how the wp-scripts package has become an essential tool for modern WordPress development, such as when building blocks and block themes. If you are looking to streamline your development process, harness the power of build tools, and simplify tasks such as checking for compliance with WordPress coding standards, this session recording is for you.

November 29, 2023 — In this installment of Developer Hours, we explored how to extend core WordPress blocks and why this approach can be preferred over creating a custom block. Extension techniques also allow you to curate the editing experience within WordPress beyond simply adding new functionality.

The session began with a presentation on the fundamentals of block extension. Then, we covered practical examples of adding new features to existing blocks, utilizing hooks for advanced extensions, and modifying block behavior to suit your unique site requirements.

Presentation Slides »

November 2, 2023 — WordPress 6.4 is set to launch on November 7, 2023, and with it, a new default theme for the upcoming year. This discussion focused on the development and design of the new Twenty Twenty-Four theme. Jessica Lyschik led the presentation, which was followed by a Q&A session.

The presentation included a demo/walkthrough of Twenty Twenty-Four, showing what the theme is capable of. We also shared some background information and tips and tricks on the new features and how to make it your own.

July 26, 2023 — Styling blocks: empowering users with CSS custom properties

It’s important not to be too prescriptive when developing blocks, and to allow users to have as much control as possible over the look and feel of the blocks on their websites.

In this edition of WordPress Developer Hours we talk about CSS custom properties (also known as CSS variables) and look at how you can leverage them in blocks to give users more control over the styling and presentation of their sites.

First up, Michael Burridge presents a solution to a common problem, i.e. how to allow users to have control over the styling of inner elements in blocks which have complex markup. While it’s relatively simple to allow users to style a block at the root level, this presentation looks at how you can assign the values stored in block attributes to CSS custom properties and use them to apply user-defined styling to child-elements in both static and dynamic blocks.

Then, for the second presentation of the session, Justin Tadlock shows you how to integrate CSS custom properties into your block stylesheets that play nicely with themes. The technique used integrates block plugins and theme.json while still giving preference to user choice.

Whether you’re just starting out with block development or have built dozens of blocks already, this WordPress Developer Hours session is for you, and you’re sure to learn a ton.