Design System Bridge to WordPress, Fonts management, Playground and more – Weekend Edition #239


Welcome to the last edition of the year 2022! It’s been a fantastic year for the block editor with many new features. What is your most favorite feature that gives you joy whenever you use it? Please let me know or use the comments.

For me, it’s the little things, like drag & drop (🐉 + 💧) an image from a screenshot right into the post or the [[ -shortcut to link to other posts and pages on the same site or the gallery block that now has individual image blocks, or the nicely revamped color-picker to assign colors. I am excited about the next WordPress version, to see great enhancements of the Site Editor. It will feel much more natural to use and easier for a user to orient oneself.

This last edition of the year has a lot of interesting content for all WordPress users, developers, site builders and designers.

Wishing you and yours Happy Holidays, and a happy, healthy and prosperous New Year!

Yours, 💕

PS: With all the talk about collaborative editing, I just came across a great article by the CKEditor team. (Thank you, Mark Andrew) There are quite a few considerations and decisions to make. If you want to start thinking deeply about the problem, this is one article for you. Lessons learned from creating a rich-text editor with real-time collaboration, by Szymon Cofalik, Collaboration Features Technical Leader and Anna Tomanek, Documentation & Content Manager at CKEditor.

Reserve your seats! The next Gutenberg Live Q & A will take place on January 11th, 2023 at 5pm ET / 22:00 UTC .

In this show, Isabel BrisonAndrew Serong and Justin Tadlock will discuss the opportunities and challenges of the Layout features for site builders, and they will be available to answer your questions. Isabel Brison will also give us a demo of various layout scenarios. Join us!

This is also a preview on Isabel Brison’s talk at WordCamp Asia in February 2023

Developing Gutenberg and WordPress

Anne McCarthy posted a new FSE Program Testing Call #19: Running Through Refinements. The test instructions have you focus on several changes to the site editing experience, including an easier way to navigate between content, the ability to change menus from within the block settings sidebar, and the addition of block inspector tabs to make blocks with numerous controls easier to configure and customize.

The goal of these changes is to make it easier to navigate, see changes at scale, create an easier navigation editing/creation experience, and have a more intuitive experience when editing individual blocks. The testing instructions outline how to use a prebuilt test site or set up your own test site and then walk through the steps of exploring the browse mode, editing navigation, and updating the homepage and overall styling.

State of the Word

In his State of the Word, Matt Mullenweg spoke about the big things in 2022 and 2023. The Q & A was also recorded. You can watch the recording on YouTube. The fine folks at various WordPress News outlets, already published their recap articles:

Emily Schiola, editor at the Torque Magazine wrote in Open for All: State of the Word 2022, “Some themes were familiar such as the power of the community, and the importance of keeping open-source open. But others like collaborative editing within the dashboard and new plugin taxonomies spoke to an exciting and vibrant future of the project that couldn’t have been imagined when it was created 20 years ago.”

Sarah Gooding wrote in her article, State of the Word 2022: Matt Mullenweg Highlights Gutenberg’s Progress, Announces New Community Tools, “Mullenweg said he is hoping Gutenberg can create an “open block standard that can be used anywhere,” where users learn it on one system, and it can be applied in other apps.” Gooding also explains more on the “Tools Coming to the Community: New Taxonomies for the Plugin and Theme Directories and Staging “Playground” that Runs WordPress in the Browser”.

Matt Mederios published a recap on The WPMinute, with a great list of bullet points, links to mention activities and sites, and a transcript: State of The Word 2022

In addition, I just want to point out the gigantic numbers around contributors in 2022.

These are very impressive numbers of unique contributors on releases in 2022.

  • 1,399 – unique count of contributors to releases in 2022
  • 652 – first time contributors, that’s almost half! 🤯 That’s a huge amount of onboarding work by the teams!
  • 424 – contributed in 2021 and returned in 2022
  • 322 – who took a break in 2021 and returned in 2022
  • 204 – contributed to all releases in 2022

On a side note: The Pew Research Center received a shout-out for their “Politology” Quiz, built with blocks and over 1 Million people taking it. Seth Rubenstein, lead web developer, was a guest on a Gutenberg Times Live Q & A and gave a great demonstration about the team’s work with the block editor.

Live Q & A: Block-First Approach at Pew Research Center
On July 22, 2022, Michael Piccorossi, Head of Digital Strategy and Seth Rubenstein, Lead Developer at Pew Research Center talked to co-hosts Anne McCarthy, WordPress Product Liaison and Birgit Pauli-Haack,…
Live Q & A: Block-First Approach at Pew Research Center
On July 22, 2022, Michael Piccorossi, Head of Digital Strategy and Seth Rubenstein, Lead Developer at Pew Research Center talked to co-hosts Anne McCarthy, WordPress Product Liaison and Birgit Pauli-Haack,…

Gutenberg 14.7

Sarah Gooding reported on the Gutenberg 14.7 release Gutenberg 14.7 Introduces Color Coding for Template Parts and Reusable Blocks, Adds Media Tab to Inserter.

Gutenberg 14.8 RC candidate is already available for testing. Stable release is scheduled for December 21st, 2022. Release lead is Ryan Welcher.

Plugins, Themes, and Tools for #nocode site builders and owners

Create a Call to Action is the recording of a recent workshop by Wes Theron, WordPress Training team. A Call To Action (CTA) is an element on your site that asks people to take a specific action. In this session, you will look at how you can create your own CTA by only using the block editor.

Anne McCarthy was a guest on Press This the WordPress Community Podcast. Doc Pop discussed with McCarthy what’s beyond Site Editing, What’s Next for WordPress 6.2?

In Episode 285 Rob Cairns, of Stunning Digital Marketing and host of the podcast with the same name, sat down with Birgit Pauli-Haack and Matias Ventura to talk all things WordPress

Sarah Gooding reports on the latest release of WooCommerce Blocks. WooCommerce Blocks 9.1.0 Introduces Products Block in Beta. WooCommerce Blocks is a plugin that helps users to create and customize online stores using blocks. The latest version, 9.1.0, includes the beta release of a new Product Query-powered Products block, which allows users to arrange and display products using preset options and control the layout. The Products block is based on the core Query Loop block and is intended to eventually replace all the plugin’s current product-displaying blocks.

In addition to the Products block, version 9.1.0 introduces three new “product-adjacent” block patterns, which focus on presentation rather than store data. It also includes support for alignment settings in the Add to Cart Button and Product Rating elements.

Doc Pop hosted the Torque Social Hour: Learning to use the Site Editor. This week’s episode features Brian Gardner teaching Doc how to edit a block-based WordPress theme with the new Site Editor. Gardner designed one of the Style Variations in the new Twenty Twenty Three theme

Tutorials on WordPressTV

Theme Development for Full Site Editing and Blocks

Anne McCarthy invites you to a Hallway Hangout: Performance Considerations for Block Themes on January 10, 2023 at 9:30 ET / 14:30 UTC. She wrote: “As more is being done to work on performance as it relates to block themes, a hallway hangout has been planned to bring together folks from various backgrounds to see what else can be worked on, unblocked, and better understood. This is meant to be both a knowledge sharing and alignment creating session between folks from various areas”. The Zoom link will be shared in the #core-performance Slack channel before starting.

In this article, Exporting Design System Tokens From Figma to WordPress, Alec Geatches, and Gopal Krishnan, both software developers at Automattic walk you through their process – in great detail – to connect the design system created in Figma with the WordPress theme to keep both in sync. With the assistance of two plugins one for Figma and one for WordPress, they showed how you can import your design system from Figma into the theme.json of a WordPress theme. The two plugins are Figma Tokens plugin and Design System Bridge

In a new two-part series, Geatches and Krishan build on that foundation by showing you how you can use imported design tokens from theme.json in the block editor. This allows you to better organize your WordPress site to reflect your design system. The first part of the series is already published: Using a Design System with the WordPress Block Editor Pt. 1: theme.json

In his article on the Developer Blog, Justin Tadlock, outlined how theme developers can leverage theme.json and per-block styles for more performant themes. The block system in WordPress also allows for per-block styles to be loaded, in-lining the CSS for specific blocks in the front-end view. It is recommended for theme developers to utilize theme.json and per-block styles to ensure a performant theme, and to check for available settings and styles before using custom CSS.

In this workshop recording, Jonathan Bossenger took participants on a WordPress theme template tour. Templates are the WordPress theme files used to render website pages. Getting acquainted with templates is an important step in learning to build themes for WordPress.

 “Keeping up with Gutenberg – Index 2022” 
A chronological list of the WordPress Make Blog posts from various teams involved in Gutenberg development: Design, Theme Review Team, Core Editor, Core JS, Core CSS, Test and Meta team from Jan. 2021 on. Updated by yours truly. The index 2020 is here

In his video, Manage your block theme fonts with Create Block Theme, Jonathan Bossenger, shows you how you can add external fonts to your block theme by using the updated plugin Create Block Theme. Whether you want to download a font from Google fonts, or install a font you’ve downloaded elsewhere, Create Block Theme makes it painless to add them to your block theme.

Building Blocks and Tools for the Block editor.

With his post, Saving Settings for a Custom WordPress Block in the Block Editor on CSS Tricks, Manoj Kumar, published the fourth part of the series Working With External APIs in WordPress Blocks. Kumar covers saving the settings options, so they persist the next time someone edits a post that contains the custom block, that was created and expanded in the last three post of the series.

In his recent live streams, Ryan Welcher started building an Advanced Query Loop plugin. Part one is now available on his YouTube channel. This plugin introduces a Query Loop block variation that will empower users to be able to do much more complicated queries with the Query Loop block, such number of posts to display and post meta. The source code is already available on GitHub. Part 2 will be posted in the next couple of weeks.

The latest article on the WordPress Developer Blog, come from Dean Sas, JavaScript wrangler at Automattic. It’s an introduction of Application state managed withDispatch, withSelect and compose 101. withDispatch, withSelect and compose are a triad of Gutenberg methods that are often used together to manage application state. This article briefly explains why these methods are important, what they’re used for and how to use them.

Jonathan Bossenger continues is series of videos Developing blocks without React! — The video on Block Supports is the latest of the series. He wrote: “So far, we’ve built a WordPress block using plain JavaScript which supports custom styles via a stylesheet, uses block attributes and the RichText component to allow the user to edit the block content, and uses a custom toolbar control to allow the user to align the RichText content. Next, we will look at adding additional support for managing the block styles, via the Block Supports API.”

The other editions

Sarah Gooding reported on the latest Drupal Gutenberg 2.6 Released with Drupal 10 Compatibility. The module allows users to build landing pages and save reusable blocks using a block-based editor without needing to know code – Over 3,300 Drupal installations currently use Gutenberg, and the module has been regularly updated for over 4 years – Gutenberg ships with 60+ blocks and access to a cross-platform community library for custom blocks. More info is available in the article.

The WordPress Playground was mentioned in the State of the Word this week. It was renamed from the former WordPress Sandbox title, as it was too close to a commercial product in the WordPress space. Sarah Gooding reported on it in here article Project Demos: Test-Drive Themes and Plugins in the Browser. The WordPress Playground project uses WASM to provide in-browser IDE and test environment for theme and plugin development. Adam Zieliński, core contributor sponsored by Automattic, introduced the project in September wiith his post on the Make Blog: Client-side WebAssembly WordPress with no server. Documentation and API reference is also available

Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Have you been using it? Hit reply and let me know.

GitHub all releases

Upcoming WordPress events

January 11, 2023 – 5 pm ET / 22:00 UTC
Gutenberg Times Live Q & A: Layout, layout, layout
Panel discussion with Isabel Brison, Andrew Serong, Justing Tadlock and Birgit Pauli-Haack

February 17 – 19, 2023
WordCamp Asia 2023 

Learn WordPress Online Meetups

December 21, 2022 – 7 pm ET / 24:00 UTC
Creating a Theme with the Create Block Theme Plugin Session 1

December 21, 2022 – 3 am ET / 8 am UTC
Creating a Theme with the Create Block Theme Plugin Session 2

January 19, 2023 – 7 pm ET / 24:00 UTC
Let’s make custom templates in the Site Editor!

Featured Image: Imajinn AI – Holidays-at-futuristic-Times-Square

Don’t want to miss the next Weekend Edition?

We hate spam, too and won’t give your email address to anyone except Mailchimp to send out our Weekend Edition

Thanks for subscribing.