WordPress.org

Howdy,

Some people in the community are worried about that WordPress 5.9 will change “everything”. Of Full site- editing, all you will see in 5.9 is a sneak preview of what will be, in an impressive way. But that doesn’t change anything, if you don’t want it to. There won’t be an overnight automatic update of your site, and you don’t know how to handle it. I understand the fear, though.

The last five years, there was plenty of doomsday amplification. That’s what social networks depend on for advertising. People coming back in outrage. It might also happen in WordPress groups on Facebook and other places.

WordPress changes are not sudden. You are in control. You got this.

The web follows wabi-sabi, a Japanese philosophy, appreciating beauty that is “imperfect, impermanent, and incomplete” in nature. Or as I phrase it – nothing’s perfect, nothing lasts and nothing is ever finished. There is beauty in it and there is peace in it. And there is exciting creative and brilliant work being done on all the WordPress teams.

I am very happy that you are here, so I can tell you about it. And please, let me know what grabs you. What are you working on?

Yours, 💕
Birgit

PS: And if you have questions about Full-site editing, you can send in your question to the FSE outreach program by October 27, 2021.

---

Gutenberg Development and Design

In his post Site Editing iA concepts – Part 2, James Koster picks up where Kelly Hoffman ended her explorations last week. Koster tested both ideas on real life examples “to see how they handle complex plugins that add custom post types”. Read the post and find out about his recommendation.

---

Anne McCarthy published the FSE Program Pattern Party Summary. Apart from providing important feedback to the developers and designers of Gutenberg, McCarthy also highlighted encouraging quotes from the comments:

While some things are still not totally intuitive to new users, I feel that Gutenberg made more big steps ahead in just a few months. I enjoy creating content in it and some of the things I have in mind are easier to achieve.

Piermario

---

In the post, Hallway Hangout: 5.9 Go/No Go, Site Editor IA, and more, Anne McCarthy summarizes a impromptu online hangout with community and team members to talk through the various aspects what features will land in WordPress 5.9. They also looked at Tammie Lister’s Block Patterns, the locking API for blocks and the Navigation block. A fast paced run down of what’s going on among friends.

 “Keeping up with Gutenberg – Index 2021” 
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.

---

In yesterday’s post by Justin Ferriman, former Learndash, wrote about what works and doesn’t work in Matt’s Page Builder. Once you look past the ClickBait headline and the expression of personal frustrations, there isn’t much you can argue with Ferriman. He is right. Gutenberg is not a page builder. Yet.

Only with WordPress 5.9, will we see the first version of site editing, template, template parts and a user interface to change some global designs. Built in the open, the full-site editing part in the next version, will only give users an idea what Gutenberg can become in terms of page building. It will not hold comparisons with page builders that have many years of development in their own universe. Elementor is in its fifth year, Beaver Builder in it’s seventh year. Gutenberg full-site editing? Not yet.

---

If you want to see what is possible at the moment, watch Anne McCarthy demostrating in this five minute video: Using duotone in theme.json to customize your image blocks. See how it works for Cover Image, Feature Image in Query Block and stand alone image block.

Still images from the video

---

In this post Using Block Patterns to speed up site builds,  Courtney Robertson walks you through the steps to adopt page sections with Block patters from your Theme or Block Directory. Roberston answered the questions on why you should use them, how you use them and where to learn more.

---

Joe Casabona just published his new course on LinkedIN Learning: Creating Block Patterns with WordPress. “In this course, experienced course developer Joe Casabona shows you how to take advantage of block patterns to create more flexible WordPress without needing to know code.” read the course description. Casabona tweeted: “It’s a cookbook style course that shows you how to make all sorts of patterns!”

---

There is new hope for the Gutenberg Forms plugin, the only Forms plugin with a Gutenberg-first approach. Justin Tadlock wrote about the plugin’s Odysee in his article: WPChill Takes Over Gutenberg Forms, Plans To Shake Up the Free Forms Market

Developing Custom Blocks for WordPress

Next Week! Don’t miss it! Join us on October 28th at 12 pm EDT / 16:00 UTC
Gutenberg Times Live Q & A: Converting classic widgets to blocks
Learn from the BuddyPress team members, Mathieu Viet, David Cavins, Varun Dubey.

In this week’s Twitch stream, Ryan Welcher can be watched Building a pre-publish checklist plugin for Gutenberg.

---

Carlo Daniele created this comprehensive tutorial for Building Custom Gutenberg Blocks on the Kinsta blog. It’s meant to bring Beginners up to speed. Daniele covers the set-up and the scaffolding tool @wordpress/create-block, explains in depth the folder and file structure, and this also includes the handling of the built-in local web environment wp-env. The example Block is a Call to action (CTA) for affiliates, something quite useful and a nice change to the basic hello-world example.

What I am missing and what would probably be a nice follow-up is a discussion on when you have to build your blocks. There are other ways to provide content creators with great experience by adoption existing blocks: be it by creating Block Patterns, augment the Block Styles, or build Block Variations. All options are much less involved, then going all in on Custom Blocks, that need to be maintained separately.

---

And if you want to dive deeper into block development, Ryan Welcher got you covered. He updated the Example Blocks repository on GitHub. Welcher wrote in his Make post: “These examples can be used in many ways. You can read through them to learn how to create blocks, check out the repository and modify them to see how they work, or use them as a starting point for your own blocks.” He asked “Please consider opening an issue or pull request with your example suggestion.”

---

WPCampus has released their video recordings. Here are three that covered developing for Gutenberg and blocks:

• Making Gutenberg viable with real world strategies with Jesse Janowiak
• Dynamic blocks FTW!: Customize Gutenberg without living in fear of validation errors with Joni Halabi
• Panel Discussion: What I’ve learned from using Gutenberg with Brian DeConinck, Amy Grace Wells, Jesse Janowiak and Travis Cook

All their recordings are linked from their schedule. It’s a treasure trove for sure!

---

Speaking for recording: Video and Slidedeck of my page builder summit talk is now online: Gutenberg Adoption: Levels One through Five. The Google Slides have all the links to the resources shared. I covered these topics and shared a ton of links and resources.

• Level 1: Style and Control 
• Level 2: Create Block Patterns 
• Level 3: Adding Block Styles and Variations
• Level 4: Create Custom Blocks with ACF
• Level 5: Create Custom Blocks with ReactJS

---

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

What is a Universal theme?

The theme team at Automattic has now five Universal themes in the WordPress repository.

• Blockbase
• Quadrat
• Geologist
• Seedlet Blocks
• Mayland Blocks

What is a Universal theme? You might ask: “A Universal Theme is a block theme that can use the Site editor but can also be configured in a more classic way.” – Or that’s the idea. For the themes to work, you would need minimum WordPress 5.8 (for the theme.json) and the Gutenberg plugin (for the site editor) .

The team also published on the site Themeshaper a few articles for developers exploring Universal themes in more depth.

• Universal Themes
• Universal Themes: Customization
• Universal Themes some Ideas
• Blockbase: A parent theme for block themes

We will need to see how far the idea can be pushed with WordPress 5.9. We’ll start testing with the alpha version, as soon as 11.9 is merged into core.

You can help testing by using the WordPress Beta Tester plugin and select the bleeding edge channel and the nightlies stream from the settings page.

WordPress Events

October 28, 2021 – 1 pm EDT / 17:00 UTC
Post Status: Headless WordPress Webinar

With Experts from WebDevStudios

• Brad Williams, CEO and Co-Founder
• Lisa Sabin-Wilson, COO and Co-Founder
• Greg Rickaby, Director of Engineering
• Amor Kumar, Frontend Engineer

---

November 4th, 2021,
WPEngine Summit 2021 (EMEA)
starts at 10 am UTC / 6am EDT

With many fantastic speakers, among them CEO Heather Brunner, Chris Weigman, Rob Stinson, Hashim Warren, Grace Erixon, and Brian Gardner

• Schedule
• Tickets

---

On the Calendar for WordPress Online Events site, you can browse a list of the upcoming WordPress Events, around the world, including WordCamps, WooCommerce, Elementor, Divi Builder and Beaver Builder meetups.

---

Don’t want to miss the next Weekend Edition?

Type in your Email address to subscribe.

Subscribe

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

Thanks for subscribing.

---

“Blocks on a Wood Floor” by Thomas Hawk is licensed under CC BY-NC 2.0

WPChill is now the owner of Gutenberg Forms, a project created by Munir Kamal. While still rough around the edges a year ago, the plugin was updated regularly and was something to at least keep an eye on as it matured. Extendify acquired it alongside Kamal’s Editor Plus and Gutenberg Hub at the end of 2020.

Then, Gutenberg Forms seemed to stall. Since Extendify took over the project, outside of bug fixes, most of the changes revolved around the addition of its commercial template and pattern library. However, the plugin still racked up over 1,000 active installs and a 4.6-star rating.

Cristian Raiber, the CEO of WPChill, said he had discussed acquiring the plugin early on. However, he backed out before closing the deal because his company already owned Kali Forms, a commercial forms solution.

“After a while of not gaining enough market share with Kali Forms, we circled back, and luckily, this time around, Chris Lubkert, the CEO of Extendify, was actually looking for someone to take over the project (adopt it) and keep it going,” he said.

There are no plans to merge the two form solutions. Both plugins serve different markets.

“Kali Forms is a more complex and complete solution whereas Gutenberg Forms just focuses on simpler forms, which also makes it limited in functionality but also in scope,” said Raiber. “There’s a market for people who just need a basic form solution built into Gutenberg, and we just happen to be the new owners of that solution.”

Gutenberg Forms is still in its infancy, and there are many paths the new development team could take. Given enough time and resources, WPChill could shake up the free forms market.

Building a simple contact form with Gutenberg Forms.

The first order of business will be clearing the backlog of issues, according to Raiber. Then, his team will focus on new features as requested by users.

“Features such as the ability to build Quizzes or even more field types that will unlock even more powerful form types,” he said. “There’s also quite a bit of overlap with our existing plugins. A bunch of our plugins are already providing a form functionality that’s…well, kind of limited and hard to maintain at the same time. A goal I’d see us pursuing is removing those form components from our existing plugins and instead recommending Gutenberg Forms as a one-click install module.”

Such a solution would allow his team to focus its efforts on a single code base. Then, they can extend their other plugins without recreating bits and pieces across each project.

“For our Strong Testimonials plugin, we’ve had people ask several times if the form collection plugin could be used for something else as well,” said Raiber. “Right now, that’s not possible, unfortunately. We’ve got a knowledge base + help desk plugin as well that could benefit from an enhanced form solution, such as Gutenberg Forms.”

Currently, his team is about halfway through migrating all of their plugins into the block system. He said they are fully committed and on board with being a “Gutenberg-first” plugin shop.

“The market’s full of form plugins, and they’re all competing on features, pricing, and really complex scenarios,” he said. “But what happens to those people that just need a simpler solution for free? My really long-term goal here is to be able to keep Gutenberg Forms 100% free and maybe become a worthy alternative to the aging Contact Form 7, a form solution that’s got a really huge technical debt and has been poised with a lot of bugs. And that’s normal for a plugin that’s grown that big and has been around for that long without a team around it.”

Raiber wanted to point out that they are not looking to compete with popular commercial solutions with Gutenberg Forms. A paid version is not even on the roadmap.

Commercially, they plan to integrate with their other projects and get users to jump on their other pro plugins. The goal is to disrupt the free forms market.

“If you're a founder of a company go through your own customer experience yourself — with your own eyes.”

In this episode of Post Status Excerpt, Cory and David talk about their best and worst support experiences as customers. If you are a freelancer or small agency and your ability to deal with support issues from customers isn't working, then that's a sign of something broken in your workflow. Companies should try to be more proactive and helpful to customers even if they can't help them immediately or solve all their problems.

Also don't forget: We're encouraging listeners to check out the “Week at WordPress.org” — get the feed here) — and submit your Black Friday / Cyber Monday deals to us at Post Status.

Every week Post Status Excerpt will brief you on important WordPress news — in about 15 minutes or less! Learn what's new in WordPress in a flash.

You can listen to past episodes of The Excerpt, browse all our podcasts, and don’t forget to subscribe on Spotify, Amazon Music, Google Podcasts, iTunes, Castro, YouTube, Stitcher, Player.fm, Pocket Casts, Simplecast, or by RSS.

Mentioned in the show:

• SuperDuper!
• Profitable Project Plan | Business Training For Web Designers
• The E-Myth Revisited: Why Most Small Businesses Don't Work and What to Do About It
• Share Black Friday / Cyber Monday Deals With Post Status
• David Bisset (Twitter)
• Cory Miller (Twitter)
• Post Status (Twitter)

Sponsor: Yoast SEO

Yoast is SEO for everyone. Yoast SEO Premium gives you 24/7 support and extra features like internal linking, social previews, a redirect manager, tutorial videos, and integration with Google Webmaster Tools. Get on board today with the premiere SEO plugin for WordPress — Yoast.

Generated social images seem to be all the rage now. Automattic scooped up Daniel Post’s Social Image Generator last month for eventual inclusion in Jetpack. There is a proposal to dynamically generate them for plugins and themes hosted on WordPress.org. And, there is a new player in town: Branded Social Images.

Admittedly, I have had a mild obsession lately with the concept, and I would like to see the Tavern use dynamically-generated social images at some point. Because we already use Jetpack, I will wait to see where its development team takes the feature.

Branded Social Images is a solid addition to the WordPress plugin directory for those who want a solution now. It is not as featured-filled as Social Image Generator, which is no longer available for purchase. However, it is an introduction to the concept for those trying it out for the first time. And, it may just prove well-rounded enough for many users.

The plugin was released by Internetbureau Clearsite, a web development and design agency. Branded Social Images is the team’s first extension on WordPress.org.

My favorite feature from this plugin is that it allows users to upload any TTF or OTF font file for the social image’s text. I tested it with the Oleo Script Swash Caps and Rampart One font families to see how it worked.

Testing custom font families.

Well, I tested with several more than that, but I had to stop myself before going too far. I have a font addiction and am easily sucked into hours of tinkering with them. The goal was to test this plugin feature, and it worked as it was supposed to.

The plugin already packages a reasonable set of 10 font families to choose from out of the box. If nothing suits your fancy, just snag one from Google Fonts or another site of your choosing and upload the .ttf or .otf file.

Branded Social Images is straightforward to use. Its settings screen has a preview image at the top and two boxes with settings. One for the social image text. The other is for the background image and logo.

Where it fails to live up to the competition is that it does not have any pre-built templates. This is not necessarily a make-or-break feature, but it also does not have the design options to recreate many of the layouts of something like Social Image Generator.

Essentially, the layout options boil down to positioning a logo and text atop a background image via a three-by-three grid.

Plugin options.

However, its scaled-back interface with minimal options could be seen as a feature in and of itself. Not everyone needs or desires a swath of settings when a few baseline customizations will do.

I did have some trouble understanding whether the placeholder logo could be removed. After some testing, I realized it was limited to the settings screen unless I explicitly uploaded a custom one. I would also like to see an option to use the site title instead — not every site has a logo but might still want to show their brand name.

Users can also modify the social image on a per-post basis. The plugin adds a meta box with four options on the post-editing screen for:

• Disabling the social image.
• Editing the text.
• Disabling the text.
• Adding a custom image.

Per-post social image options.

By default, the text will be the post’s document title. It should work with most SEO plugins, such as Yoast SEO. The featured image will also be swapped in for the background if a custom one is not added.

After three years of using the current WordPress post editor, it still catches me off-guard when a plugin puts a meta box at the bottom of the screen instead of the sidebar. It always looks out of place. In this case, it takes up a ton of real estate for four options, and there is no need for it. If I could wave a magic wand and change one thing about the plugin, this would be it.

The plugin also breaks the cardinal rule of not adding a top-level admin menu item for a single screen. WordPress literally allows for sub-menu items under Settings. So, maybe I need that magic wand for two things.

Outside of a few issues, I love what the plugin team has created thus far. It is a little rough around the edges, but that is OK for a version 1.x. Software is meant to be iterated and improved upon, and Branded Social Images has the foundation for becoming even better.

Jetpack is splitting out its commercial Backup feature into a standalone plugin that can be used without installing the core Jetpack plugin.

The commercial product includes automated daily or real-time backups with one-click restores, even for sites that are offline. Backups include all WordPress database, theme, and plugin files, which are stored on WordPress.com’s infrastructure with redundant copies on multiple servers. The product was built with WooCommerce in mind and can restore a site to any past state while keeping current orders and products in place.

Jetpack representative Rob Pugh said the product was split out of the core plugin because “many developers and site owners asked for the flexibility to use specific components of Jetpack as part of their own, custom-built ‘tech stack’ of plugins.”

The standalone plugin is available on WordPress.org and requires a user connection to WordPress.com. It is essentially a shell for connecting the commercial product, as the plugin doesn’t have a free tier or perform any function unless you click “Upgrade Now.”

The plugin’s description on WordPress.org is somewhat misleading, as it isn’t explicit that this is a commercial-only product. The “Get Started” section states, “Installation is free, quick, and easy. It only takes a few minutes to install Jetpack Backup.” The fact that it’s a paid product isn’t evident unless you dig into the accordion FAQ section about how to create a backup: “As soon as you purchase Jetpack Backup, it will be activated, and the first backup will be completed.”

The launch of the new standalone plugin should not affect current Jetpack customers using the backup services.

“It’s the same engine that powers the backup solution that’s part of the full Jetpack plugin and we’ve developed loaders to only load the engine once—whether you have only Jetpack, only this, or both,” Jetpack engineer Brandon Kraft said. “If you have Jetpack already, this adds some UI for you, but the same service.

“The loader tech is the same that ensures the connection code only loads once between this, Jetpack, Boost, WooCommerce Payments, etc and ensure the latest version is running. [You] don’t have to load into memory more than you need.”

Jetpack is often criticized for being “bloated” and bundling too many features. In 2019, the Jetpack team began promoting feature suggestions on the plugin search screen in an attempt to solve a discovery problem, where users are quite often not familiar with the plugin’s dozens of modules and end up installing plugins to perform functionality that Jetpack already includes. Splitting the backup feature out into its own plugin should be helpful on this front and is part of a long-term plan to make Jetpack more modular. Jetpack Backup joins Jetpack CRM and Jetpack Boost, two features already available as standalone plugins outside of the core plugin.

“It's easier to sell courses today… what hasn't changed is HOW you sell and the validation of what you're selling.”

Cory Miller talks with Sean McCabe, CEO of Seanwes Media. While it’s likely never been easier to sell courses for an audience (especially if you are using a system like WordPress), what hasn’t changed — according to Sean — is the marketing and the validation of what you are marketing, how you are marketing it, and how you are pricing it. Sean shares his perspectives on these permanent problems, outlining what has and hasn’t worked for him. Sean also shares his thoughts on what comes first — the community, the courses, or both. This is a must-listen for anyone with a membership course or learning site, or anyone who is thinking of starting one.

Every week Post Status Live will brief you on important WordPress news — in about 15 minutes or less! Learn what's new in WordPress in a flash.

You can listen to past episodes of Post Status Live, browse all our podcasts, and don’t forget to subscribe on Spotify, Amazon Music, Google Podcasts, iTunes, Castro, YouTube, Stitcher, Player.fm, Pocket Casts, Simplecast, or by RSS.

Mentioned in the show:

• Seanwes.com on presale profitsCory Miller (Twitter)
• Post Status (Twitter)

Sponsor: Pagely

You need durable Managed WordPress Hosting for all your mission-critical sites. Pagely offers managed DevOps and a flexible stack with the same enterprise-level support to all its customers. Peace of mind starts with Pagely. Try it today!

Two weeks ago, Cate and Topher DeRosia launched the HeroPress Network, a centralized website that would host various projects for helping people with WordPress. Today, the duo announced the opening of Find It WP, a new site that is part of the collective. It will serve as a database or archive of all things WordPress.

The goal is ambitious, and it is powered by submissions from the community. The site is open to anyone who wants to share a WordPress-related resource. “Resources” in this sense is literally anything. It can be a plugin, agency, podcast, theme shop, or even more. And, if there is not a category available, submitters can recommend a new one.

“This new way to search WordPress resources helps both veteran and beginner users by saving them time and frustration as they try to find what they need,” wrote Cate DeRosia in the announcement post. “Often, I’ve seen someone tweet out that they’re looking for a WooCommerce specialist or have a friend ask me if I know of a plugin that does x. Now everyone has a new place to start: Find It WP.”

All of the submissions are manually approved to make sure the content is appropriate. This will add to the team’s workload. DeRosia jokingly said her role has become “Chief Approval Officer.”

Partial view of the resource submission form.

“And this really highlights the reason we’ll be reaching out for funding,” she said. “There’s a lot to maintain with the new additions to the HeroPress Network, resources that seem like they’ll be a real asset to the growth of the WordPress community. Instead of each company trying to do this on their own, let’s pool our resources and support it together.”

The current plan is to open some funding options for the HeroPress Network on October 24. DeRosia said in an earlier announcement that this would be similar to Patreon, where users could fund the mission. However, they will also have a corporate sponsorship program for WordPress businesses.

“I think of it like the local library,” she said. “Not everyone needs to be in there checking out books and shelving things, but somebody does, and they have to buy groceries, too.”

DeRosia believes this will benefit individuals as well as smaller and larger agencies.

“You never know where a customer is going to come from or what up and coming agency could give you unexpected competition, so this is a simple way to see what all is going on in the WordPress ecosystem,” she said. “It’s also an ideal opportunity to find smaller products and business larger companies may want to acquire.”

I asked her whether including plugins and themes was worth it because there are already dedicated directories and marketplaces for those types of resources.

“We had the same thoughts as you about whether it was worth including plugins and themes, particularly free ones,” she responded. She listed four primary reasons they thought it was worth doing:

• If it’s for “all things WordPress,” we need to include all things WordPress.
• We liked that free and paid plugins were searchable alongside each other.
• The WordPress repositories don’t have our advanced searching. We’re not a replacement for them, just an additional option.
• Reviews can negatively impact products that don’t always deserve them. We wanted to level the playing field there.

DeRosia said the idea for this project and WP Podcasts came along at about the same time (note: the WP Tavern podcast is listed on the site). The latter was less ambitious in scope, so they launched it first as a case study.

“From the beginning, the driving force behind the HeroPress expansion was to create bridges between the various WordPress communities, and Find It WP seemed like a natural element to that,” said DeRosia. “It’s really difficult to be successful and stay on top of an ever-growing ecosystem like WordPress. With Find It WP, we can simplify it all, for both searchers and those looking to be found.

“I’ve spent the last 18 months looking at ways people can get visibility in the WordPress Community, and it’s nearly impossible. It’s so large and spread out that, even if you have the most amazing new product, it’s hard to get noticed. Find It WP simplifies all of that and provides equitable opportunities for anyone.”

Equity is a a crucial part of this project, leveling the playing field for creators regardless of their size. There is no special attention given to major players. The resources are simply there for people to search for and find what they are looking for.

At the moment, there are currently 42 listings spread across multiple categories. DeRosia said she was getting back to approving more as we ended our chat. As the site grows, it should offer opportunities for more businesses and people to connect.

“The idea for Find It WP did come out of our experiences with HeroPress and expanding into the HeroPress Network,” she said. “We’ve needed help along the way and have been thrilled by the talent we’ve come across. If we hadn’t been looking or had the connections we had, we wouldn’t have found them. We didn’t want to keep that to ourselves. We want everyone to be able to experience the benefits that come from working together as a community.”

Topher DeRosia also published a Find It WP announcement on the HeroPress blog.

Last summer when Cate and I were on our anniversary trip we were brainstorming about new things we could bring to the WordPress community that would really help people. Cate came up with the idea of a site that lists every single WordPress resource in the entire world. I was a little dubious at first, but she pitched it well, and I came around. We’ve spent months planning, building, starting over, and dreaming about it at night, and today we released FindItWP.com as part of the HeroPress Network.

So What Is It?

Imagine a list of every WordPress resource in the world. Every podcast, every email newsletter, every plugin, every theme, every agency for hire, every news outlet, every training site, etc. Then imagine you can search and filter it, to find exactly what you’re looking for.

Now also imagine you’re a small plugin or theme shop selling a product, struggling to get visibility an overwhelming world. You can get your item listed on an equal platform as places that have far more marketing resources.

That’s FindItWP.com.

Who Is It For?

Anyone who wants to find something, and anyone who wants to be found.

Can I Help?

Yes! The entire foundation of Find It WP is the community entering all the resources.  There’s no way a single person, or even a large group could handle it.  It has to be all of us or it won’t really work. Anyone can enter any resource, even if it’s not theirs. Then if the owner wants to take over the listed we’ll facilitate that. So literally EVERYONE can help, and be entering content!

So if you’re ready to be on the team, start adding resources!

Where Can I Learn More?

Cate did a wonderful post over on the HeroPress Network site, and it has TONS more information about it than I’ve written here.  I highly recommend checking it out!

Inside of a Vizio TV – Model V435-J01 – photo credit: Software Freedom Conservancy

" data-medium-file="https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM-300x218.png" data-large-file="https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM-500x363.png" loading="lazy" width="880" height="638" src="https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM.png" alt="" class="wp-image-124577" srcset="https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM.png 880w, https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM-300x218.png 300w, https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM-500x363.png 500w, https://wptavern.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-20-at-1.14.16-PM-768x557.png 768w" sizes="(max-width: 880px) 100vw, 880px" />Inside of a Vizio TV – Model V435-J01 – photo credit: Software Freedom Conservancy

The Software Freedom Conservancy announced that it is suing Vizio, an American TV manufacturer, for what it alleges are “repeated failures to fulfill even the basic requirements of the General Public License (GPL).”

The 501(c)(3) charity organization is a non-profit that provides infrastructure support for free and open source software projects, defending users’ rights under copyleft licenses and the GPL. A few of its member projects include BusyBox, Git, Homebrew, OpenWrt, and phpMyAdmin. As part of its mission, the Conservancy assists member projects in enforcing the terms of FLOSS licenses, including through litigation.

The Software Freedom Conservancy contends that Vizio’s TV products contain software with copyleft licenses but the company refused to provide the source code after multiple attempts at contact since 2018. Vizio also did not inform its customers about the rights included with the software it was bundling.

“We filed suit as a purchaser of TVs to stand up for copyleft,” Software Freedom Conservancy Executive Director Karen Sandler said. “There was no source or offer for source even after we’d been working with them for a long time on older products. Copyleft can help us take control of our tech in a meaningful way, it’s a huge benefit to consumers.”

In a new twist on GPL enforcement, the organization is presenting this lawsuit on behalf of individual consumers, as opposed to the traditional path of defending copyright holders of the GPL code in question.

The Software Freedom Conservancy contends that Vizio’s alleged noncompliance prevents consumers from being able to repair their devices, improve and control them, as well as curtail surveillance and ads through modifications. The full text of the complaint includes examples of how consumers might benefit from having access to the source code:

Vizio is unlikely to unilaterally implement features that prevent the collection of such user data, as such user data is valuable to Vizio. Access to the Source Code of the Linux kernel, the other SmartCast Programs at Issue, and for the Library Linking Programs, as used on Vizio smart TVs, would enable software developers to preserve useful but obsolete features. It would also allow software developers to maintain and update the operating system should Vizio or its successor ever decide to abandon it or go out of business. In these ways, purchasers of Vizio smart TVs can be confident that their devices would not suffer from software-induced obsolescence, planned or otherwise.

In the organization’s announcement of the lawsuit, Sandler highlighted the environmental impact of denying consumers access to the code.

“The global supply chain shortages that have affected everything from cars to consumer electronics underscore one of the reasons why it is important to be able to repair products we already own,” says Sandler. “Even without supply chain challenges, the forced obsolescence of devices like TVs isn’t in the best interest of the consumer or even the planet. This is another aspect of what we mean by ‘ethical technology.’ Throwing away a TV because its software is no longer supported by its manufacturer is not only wasteful, it has dire environmental consequences. Consumers should have more control over this, and they would if companies like Vizio played by the rules.”

The complaint alleges that Vizio is in breach of the GPLv2 and the LGPLv2.1 every time they distribute a smart TV without the source code or a written offer to provide it. It claims that none of the smart TVs Vizio has introduced in the US market in the past four years have been accompanied by the source code.

Open source leaders from affiliate organizations commented on the unique approach of this lawsuit, where the Conservancy is acting on behalf of consumers as the plaintiff, as opposed to prevailing upon the copyright holder to defend its users. The complaint states:

No one other than the purchaser has both the information and motive to enforce the Source Code Provision. Purchasers will both know whether the Source Code Provision has been honored and have a desire to examine and further develop the corresponding source code.

“If this consumer-rights-based approach succeeds, the main excuse for copyright assignments to organizations like the FSF will be gone and we can unambiguously treat a CLA as a red flag,” Open Source Initiative Director of Standards/Policy Simon Phipps said.

The complaint states that the “Plaintiff and other members of the class of persons intended to benefit from the GPLv2 and LGPLv2.1 have been damaged in an amount that cannot be readily determined.” Vizio’s alleged noncompliance has effectively stunted the source code’s potential for improvements from consumers for years. It has also robbed consumers of the control of their electronics and given Vizio an unfair advantage that protects their corporate interests at the expense of users’ freedoms. The Conservancy is not seeking an exact amount for damages but rather leaving it to the judgment of the court.

“This lawsuit has the potential to empower many consumers, radically changing the landscape of consumer technology,” Open Source Initiative Executive Director Stefano Maffulli said.

The Conservancy’s case will be an important one to watch, as its decision could set a precedent for GPL enforcement in the future. If nothing else, it should signal to companies benefiting from GPL-licensed code that they must also respect consumers’ rights. If consumers are the intended third-party beneficiaries of the license agreement, then they have a right to the source code.

A few weeks ago, WP Ninjas announced it was stepping into the media optimization plugin market. The team released its Remove Unused Media plugin as a commercial project for tidying storage space. I received a full copy of it and put it through the ropes.

With so many commercial plugins, I am accustomed to the developers creating an entirely new menu item, taking up precious admin real estate. This happens even with those that just have a single screen too. However, I was happy to see the WP Ninjas team tucked everything neatly under “Media” as a sub-menu. We were off to a good start, and things only got better.

When I review plugins, there is one thing that I consistently preach: simplicity. That begins with following the core WordPress UI and sticking as closely to it as the plugin’s features will allow. In essence, don’t make me think about how to use your plugin.

For the most part, Remove Unused Media got the user experience right.

I could nitpick a few design choices with the interface, such as modifying the list table with rounded corners and extra padding. The “filter” sub-navigation also deviates from the standard. And, the “last analysis” message should receive the WordPress admin notice treatment so that it stands out.

These are all core UI elements with unnecessary customizations. However, they did not diminish the experience on the whole. The plugin mostly stuck with the WordPress standard.

The real question is whether the plugin does what it says on the tin. What is the experience of removing unused media like?

It was easy. Users merely need to click the “Start Analysis” button and wait a few seconds. The plugin then has three tabs:

• Unused Media
• Used Media
• Ignored

The Unused Media tab presents an overview of all media that the plugin could not find used on the site. There is a possibility that it missed something. However, I only found one old-school scenario where this happened, which I will dive into later.

Unused media screen.

From this point, end-users can manually delete individual media attachments or use the bulk-delete option. Before doing so, the plugin recommends making a backup of the site — solid advice for any such plugin.

My favorite feature of the plugin was not its primary feature of deleting media. It was actually the “Used Media” screen. Its “Where?” and “How?” columns break down where images, videos, and other files are used and in what context.

Used media screen.

It reminded me of the “instances” screen for the WordPress admin block directory proposal from 2019. The concept showed where specific blocks were used across the site. Remove Unused Media does the same thing for media files.

The “Ignore” tab for the plugin keeps track of media files that should not be deleted, even if they are unused. Users can click a link from the other screens to add them to the list. This persists after running a new analysis too.

The plugin scans several third-party plugins like Elementor, Beaver Builder, ACF, and Yoast SEO. Some store media instances outside of the post content, such as in custom post meta, and Remove Unused Media searches those specific fields.

Pricing starts at 39€ ($45.38 at today’s exchange rate) for one year of support and updates for a single site. It also has a five-site option at 149€ and a 100-site tier at 299€.

For the first version, the user experience felt solid. However, it does not have much in the way of customizability. That could be a sticking point for users who are looking for a more flexible premium option.

Exploring Alternatives

The plugin is not the first of its kind. The Media Cleaner plugin by Meow Apps is free, routinely updated, and has over 40,000 active installations. It also has a commercial version with more features, such as third-party plugin integration, WP-CLI support, filesystem scan, and live-site analysis.

Media Cleaner plugin results.

The UI for Remove Unused Media feels more like WordPress. Its “Used” tab also shows where (i.e., what posts) and how (e.g., content, featured image) specific media files are used across the site. This feature alone makes it worthwhile for me.

One area where Media Cleaner shines is its option for ignoring (not deleting) attached media. This is a vital feature if users have ever added the old gallery shortcode. At one point, WordPress simply displayed all attached images as a gallery. Eventually, it specified the IDs in the shortcode. However, for those older instances, this was not the case. Without enabling this option, those media items might get queued up for deletion.

The Remove Unused Media plugin does not have such an option. Attached images that are not explicitly used are considered unused. This may not be an issue for most users, but those with old gallery shortcodes should be aware of potential problems.

The baseline features for both are similar. Remove Unused Media gets the edge in its default user interface and experience. However, Media Cleaner has many more options for customizing how the plugin works. Plus, users who cannot afford an upgrade can always run the free version.

This is not to say either is better or worse than the other. Both were solid options in my tests. I just want to merge the best features from each, snagging the interface from Remove Unused Media and the configurability of Media Cleaner.

Thank you for attending my talk at the Page Builder Summit! 💕

Follow-up from the Page Builder Summit October 18 – 22, 2021 and the presentation: “Customizing WordPress Block Editor for Client Projects” by Birgit Pauli-Haack

Transcript

Birgit Pauli-Haack: Well, hello everybody. Thank you all for inviting me to the Page Builder Summit. I’m honored to be here, and I can only hope that today’s topic will be valuable to you. 

My talk is about how you as an agency or freelancer can start adopting working with the block editor and provide your customers, content creators, a true what you see is what you get experience.

I know we have been promised true vis-a-vig for the last 25 years. We have come closer and closer every five years. The tools and modern software development have really advanced. And I talk to many site owners, freelancers and consultants in the WebPress community, and there have been plenty of sites that still rely on the classic editor for a myriad of reasons. And 80% of our customer sites are still on the classic editor. So don’t feel bad, but it’s also always good to figure out what would I do if a customer would come and want to start using the block editor.

So should you consider migrating your building block enable site? You don’t need to know it all. You can start introducing only some features of the block editor without having to know ReactJS or even build a block. There are quite a few levels of expertise that I will show you where you don’t need any of the React or modern JavaScript to be successful.

So I call them levels of expertise. So level one is style and control. Level two is create block patterns. Level three is adding block styles and variations. And then level four is creating custom blocks with ACF or other tools like genesis blocks or lazy blocks plugin. And then level five is create native customs, static or dynamic blocks.

So this talk was inspired by a conversation that I had with Victoria Ramirez on the Gutenberg Times YouTube channel about a year ago. And I modified it a little bit with adding a few things. And I have for all five levels I show you examples and resources, so you can kind of jump in wherever you think it’s possible for you. But I will also go a bit deeper into level one and level two, to give you a head start.

We won’t have time for the rest. But I’ll share the resources because quite a few developers have gone the path before you, and they share very generously what they learned and what they found. So let’s dive in.

So out of a box we heard in 2018 that any theme works with a block editor. And that is mostly still true today. Mid-2019 two client project managers within a few months of each other came to me and said, “Let’s just enable the block editor and see what happens our contact readers will figure it out. And we’ll just ask you to restrict the color selections to our brand colors.”

And you might know that there is actually a custom color option and one client wanted it to be removed and the other said, “Well, let’s see if it’s a problem first.” So those are the two different approaches. But they all said, okay, let’s just kind of keep the theme, adopt some brand colors and see where the block editor takes us.

So the first step that we did was to, is the theme actually the theme block editor compatible. And for that, we developed a test that’s not rocket science. We create a page with all the blocks and see how they look. And then we evaluate the amount of styling that is needed. And we share our test site as code in the gist that’s kind of linked in the slides. There are also linked to the instructions if you need more of them. And yeah, just so the bit.ly/pagebuilder1021 is actually the link to the slide deck if you want to follow along or use other links that I share.

So with this, we tested our theme. The theme just looks something like this. Yeah. With some blocks in there. And also some additional attributes. But I’m going to show you how that looked in just a normal theme. First, I just tested it in the starter theme underscore. And so that’s graded by automatic and has been a starter theme for many, many classic themes in this space. And I’m click you on that video and it gives you… So it’s a sample test and we scroll through.

We have added the test page and then we scroll through and see how things work or how things don’t work. And for this one, it seems fairly well adoptable. So if you, as freelancers have used underscore and didn’t change a whole lot, except the styling of course, and added a few things you should be fine with the block editor out of the box.

Well, I also tested it with the Naked WordPress starter theme by Josh Beckman. It’s a little bit dated, but it has a few more opinionated stylings already. So when we click on the same video again, you see, okay, the page looks a little bit different but in essence, and we see there are some line height issues that we would need to change. There are also some justification issues. But nothing really that is earth shattering or that would take a lot of time to fix. Well the drop caps there, you could disable that if you wanted to. And that even though the table with the stripes came through.

So that was easy. Well, let’s test one more. I had a client recently, he approached us because their are mobile ranking is very, very bad. So I tested the theme and that’s a theme from 2007. That’s 14 years old. And I just created a page with my blocks and you see it has some line height issues here but we can take care of that. Even the quote comes through with the background image, the buttons have round the corners and the columns look nice. We have a few distance issues there. They’re not as generous with white spaces, other themes are. But nothing earth shattering even there. So that should get you started and make your clients and yourself feel much better about using the block editor on an existing site and not have to do too many adjustments.

So if you want to add a custom color palette then you would need to do two things depending on which version of WordPress you are on. So having a color palette, that means the colors that are in the side bar of the block editor for maybe a paragraph block or the background image and the text color that’s where your custom palette would go.

So depending on which version on WordPress you are. For WordPress 5.7 or older, 5.6, 5.5, you had a two step there. One is to put in the functions, PHP, add the theme support for editor color palette, and add an array of your colors with the name, the slug and the hexadecimal representation of the color. And then you will need to go to your style sheet and add for each color two more classes like has black color and has black background color.

So you had three places to when you want to change your color, for instance here to modify. Starting with WebPress 5.8 or higher there’s… You probably heard that the theme json file was introduced and there was actually introduced for themes that prepare for full-site editing. But guess what? The theme json works also for classic themes. And you could use all the advantages of that for your classic themes when you start out and have it all in one configuration file. So there, you only would need to put in the json file, the settings and then the color, and then the palette with names, slogan, the color and hexadecimal, but you would not need to do the updates in your style sheet because the block editor is styling that out of the box. So you only need to set the palette and then the rest will be handled automatically.

Now, there was this one little thing where you have colors for background and text color. You also have these custom color link that opens up a little window where your user could change any color or add any color that is in that color picker. If you want your, or the customer decides to adhere just to the brand colors. You can remove that either by theme support and disable underscore custom, underscore colors. Or in the theme json you have the settings and then the color and the set the custom to false. So these are few for the custom colors.

Let’s look at the text fonts. You could also do a custom font sizes. Right now the topography selection for paragraph has font sizes with small, medium, large, huge. And in the theme json you can set the pixel sizes for that, but with the custom font size the content creator could change. If you don’t want that, if you want to disable that you just use in the theme json typography, and then custom font size and set that to false.

So that’s kind of a glimpse into how you can just change the configuration of the block editor, add custom colors, add custom font sizes to it and add some styling. And you are golden there. You haven’t touched any JavaScript, maybe just a little bit your functions PHP. But that wouldn’t be the first time that you tweak the theme with through functions and filters in the functions PHP.

The next level I want to discuss with you is our block patterns. They are a complete game changer for Gutenberg now that they’re introduced. They help content creators to use a set combination of core blocks and reproduce a wanted design and section over and over. That could be testimonials or a price list or a header pattern. So you could check out the pattern directory at wordpress.org/pattern.

So sometimes I get the question because some of the early users of the block editor were very taken by the concept of reusable blocks and have used reusable blocks actually like block pattern, because there was nothing available with that. But block patterns are the opposite of reusable blocks. So reusable block is you will use on various places the identical block including the content and you could use it on every page or on 15 blog posts. And when you change the content, it changes every single instance of the block. And so you only have to change it once.

Now, block pattern is, as I said, the collection of core blocks that you can add to your candles and then adjust to your needs. But the previous instances of the black pattern stay the same. So just because you modify a black pattern, now the tenth, you will not change previous instances of that. The block pattern directory is right now in version one, one where you can copy paste of patterns from the directory into your editor. Soon there is also a way to submit that’s designers submit patterns to the directory. Right now they are 84 that are with a design team together and outside designers of course. But they tested also how to translate them and how it all functions.

So version two is coming soon. I just wanted to show you a few more examples of the block patterns that you find in the directory, because it also shows what you can do with them. So the next one. This is a team page kind of pattern, where you have your team member with a profile picture, the name, and the title. And underneath if you want a group of social links and that is repeated in a three-column layout. That’s just beautiful and depending on how the images are that you use for the profile, you can switch out every part of that once you put it into your block editor. Then also a testimonial is there with a little picture there, the testimonial and then the name of the person who said it. And then there is another beautiful header pattern. So check it out. It’s wordpress.org/pattern.

The next part is that you could actually create custom block patterns if you have sections in your new website or an existing website that needs to have the same layout over and over. We have that on our website that called impact stories. We have media and text pattern, one with a picture on the left and the other one with the picture on the right. And then we have a header, a paragraph, and a smaller citation, which organization that is. But there were also some attributes with the media text where we said okay, adopt the size of the picture, apply that background and apply it completely and have these kind of spaces left and right around the text. You can register a category and then register a block pattern that fits into the category. You don’t have to have a certain category. But you see it’s only a four attributes kind of array. It’s in PHP so it goes into your function, PHP.

You need a title, you need a description, the category is optional, and then the content. And when you see the content it’s not quite displayed here well. But you see it starts with a block comment with the attributes in the curly brackets. And that is so you can… And when you grab a pattern from the directory and click the copy and paste that into here, then it would be a new register block pattern for your site. It’s quite interesting to do that.

So there are also plugins available for content creators to create custom patterns without using code. So Marcus Kazmierczak created one just recently called templates, which allows you to actually store your block pattern as a custom post type and then bring it in into your block editor. Jean Baptist Audras also added a block pattern featured to his reusable block, extended plugin, and in EditorsKit by Extendify, that was first built by Jeffrey Carandang and then taken over by Extendify a few months ago. There is a huge selection of patterns and page layouts that you can use.

And if you don’t have enough creative inspiration, there are also quite a few themes now that offer a great selection of block pattern. I think Anders Noren tweeted the other day and said, “When is it enough to ship the theme after 40 block patterns?” So his full-site editing so you can’t just install it as a classic theme. But if you put it up on a test site and add the Gutenberg plugin to it, you can test his theme Tove. That’s the new one. And Ellen Bauer from Elma Studio also has a new theme, it’s called Aino. And Carolina Nymark and the Theme team build the Twenty Twenty One theme also as a block-based theme. And they also have quite a few block patterns that you want to consult and see how they work. So you can replicate something for your clients there.

Here is the resource list for block patterns. There’s a big resource list on the Gutenberg Times. Then there is developer handbook docs on… Sorry, the developer handbook on patterns. And then Justin Tadlock on WPTavern has a post on block patterns will change everything. And so that concludes our level two of… And see how far you already have come without touching any code but still create custom designs for your clients.

And then on level three. Get to a little bit into more code. The level three is add block styles and variations. Adding block styles means there’s a few you more choices in the sidebar for a block, and can also be selected as a default style and variations show up a bit more elaborate in creation and can be found in core for instance for the social icons block or layout elements for different buttons that’s from one of the tutorials out there.

And with the documented block filters you can also add custom attribution and additional functionality that how plugins extend the core blocks. So here are a few more block styles that I found in the wild. Here are two for columns where there’s a style not to use any gutters or horizontal separators. And this is a style for the for list block here with check marks and then block styles for an image where you can… The rounded is coming with core but then one plugin also had the bottom wave and the top wave for the images.

To dive in a little bit deeper into block variations. So they’re more elaborate rather than just styling. There’s also additional functionality in there. Like for the block variations for the core columns, you see for instance a two-column variation. A two column with a 50/50 split and a two column with a 30/70 split either way left or right. And then a three-column split with the same size or 25, 50. Those are variation that come in with the block into your site.

Here is an example from one of the tutorials where they had a one block that has some additional information about a portfolio. Like a page intro where they identify the client and the role of the organization with the freelancer on that particular project. And so they don’t have to design it every time when they add that to a block. They just can use their block variations for that. And you see in that little box here, that’s also coming through the inserter of the block here.

So on the next slide, I have a few articles that dive deeper in those topics. As I said, we don’t have enough time here. But you will be able to kind of follow along on those. Yeah. With add custom size, a White Pixel is a great site to visit about Gutenberg blocks and development. Then there is the dev note when the block variations API was introduced into WordPress, then how to use block variation WordPress at the CSS-Trick site, extending Gutenberg blocks with custom attributes and controls by Jeffrey Carandang. And then the reference guide and a crash course on WebPress filters. So that should get you all started and successful on block styles, variation, and block filters. And that concludes the level three.

The next level is… Okay. So we needed to add data to it, like in a ACF and advanced custom fields or other plugins. We also not only manage content, but also data. If you think you need custom blocks and you’re not comfortable with ReactJS and modern JavaScript. These three plugins help you out in building custom blocks.

Nowadays, there’s also the parts framework, which just came out with version 2.8 with a block integration. There’s also a tool set that helps you create blocks. But the Advanced Custom Fields Pro, Genesis Custom Blocks, prior to that, it was called Block Lab, and the Lazy Blocks. I wrote an intro kind of comparison article for the WPTavern quite a while ago by might still get you started, or at least thinking of how to select which plugin to select and to work with it. If you are already a customer of Advanced Custom Fields, get the pro version and so you get also the building of the custom blocks.

And then level five is creating custom blocks with ReactJS. There’s plenty of getting started information available. The official scaffolding script create block creates everything that you need for a plugin with a single block and Ali Alaa and has a course on Udemy on Gutenberg blocks for WordPress and react developers.

There is certainly also a build block series. Marcus Kazimierczak also has a short series. I think it’s seven steps or seven block posts. A White Pixel also has a tutorial series to create Gutenberg blocks to follow along. And then the Udemy block.

And we’re coming right about to the end of the talk. I just wanted to point out there is a Gutenberg Times live Q&A happening on October 28th at 1600 UTC. That’s noon Eastern US. We call it case study for converting classic widgets to blocks for BuddyPress. So we will have a discussion with the team members of BuddyPress Mathieu Viet, David Cavins, and Varun Dubey will tell us how they transformed in very fast succession dozens of classic widgets in two blocks for the WordPress 5.8 release. They also will be there to answer your questions. Link is in the slide of course.

So that’s all I have for you today. You can certainly stay in touch with me on the WordPress Slack or on Twitter with BPH. My DMs are open, or you can reach me via email at pauli@gutenbergtimes.com.

Check out our YouTube channel, youtube.com/gutenbergtimes where we posted all our previous live Q&A over the last two years. And then every Saturday I send out a weekend edition of hand curated links from the community and from the Gutenberg development team. So you can keep up with Gutenberg. The slides, as I said, are available under https:/bit.ly.ay/pagebuilder1028. And that’s it. Thank you very much. And I’ll see you around the internet and in the community. Bye-bye.

A friend and I were discussing the need for more one-off block plugins earlier today. He had mentioned that WordPress has this powerful block search feature that rarely turns up anything useful. Most are part of collections that do not appear in the results. This was part of a more wide-ranging conversation that I am sure I will tackle on another day.

However, it reminded me that I had a couple of ElmaStudio’s block plugins sitting in the backlog along with some notes on them. The team released Aino Accordion FAQ Block and Aino Notification Banner Block three weeks ago. The latter piqued my interest more so than the former.

Inserting an error notification.

The two-person team of Ellen Bauer and Manuel Esposito could have continued amassing a collection within their existing Aino Blocks plugin. Instead, they took a turn down the path few have traveled. They are now releasing single-purpose blocks.

“We plan to work on smaller add-on single blocks from now on as well,” said Bauer in the comments on my last review of their theme and block library. “Blocks that are needed for building more complex block page templates.”

Notification boxes are so commonplace that you almost wonder why they are not a part of core WordPress. Many block collection plugins bundle one or multiple, but it is hard to find a solid solution as a single block.

The block has six statuses that users can select from:

• Welcome
• Info
• Help
• Success
• Warning
• Error

Each status has its own icon and default colors. The colors are customizable, but the icon itself is not. I am a fan of the decision because it means one less choice I must make. There is also an option to hide the icon and switch between fill and outline versions.

Testing different notification statuses.

The block also displays a “dismiss” button for visitors to close the banner on the front end. The state is not saved, so if the visitor returns to the page, it will reappear. I would like to see an option to store the banner state in the browser in the future.

I like the plugin for its simplicity. The default output works well enough for most themes, but it has enough options for users to customize it.

The upcoming site editor is where the plugin could really shine. Of course, a user would need a block theme to use it there, such as ElmaStudio’s Aino. The block offers a quick and easy way of plopping something like a sales banner across the top of the site.

Adding a sales banner at the top of the site.

I do have a few nit-picks, of course. These are not OMGBBQ problems that make the plugin unusable. Instead, they are places where it could be improved.

Because many themes use a top margin approach to vertical rhythm, it can disrupt the alignment of the icon and paragraph. The plugin should zero this out.

If anyone else runs into this issue, the following CSS is a quick fix:

.wp-block-ainoblocks-notification-block .content-wrapper p:first-of-type {
    margin-top: 0;
}

One of the downsides to the plugin is its custom system for borders and padding. From a development perspective, I prefer the plugin’s system under the hood, which uses a curated set of values that keep a user from doing something really crazy. It offers a balance between flexibility and rational choices.

The plugin’s custom controls.

I have argued that most design controls should have such a system — the same one that is in place for font sizes and colors — ad nauseum. However, Gutenberg and core have moved in a different direction, preferring arbitrary user-defined values over a range of presets. Plugin authors should fall in line for the sake of users.

As a user, I prefer consistency. I want the interface to be the same, regardless of whether I am dealing with a core or third-party block. Having to learn multiple methods to add padding or change a border creates unnecessary friction.

The plugin’s custom system also conflicts with default block styles that theme authors can define in their theme.json files. The standards set by WordPress create a bridge between plugins and themes that the platform has never had before. The more block developers follow it, the easier it is for theme designers to work within the system.

There are other options. In the past week, the Alert Box Block plugin landed in the directory. It provides far more icon options and more design controls in general. However, its UI is so different from the WordPress standard that I cannot imagine using it.

When I talk about issues with Aino Notification Banner, it must be taken into context. I point out problems because I see its potential. I want the developers to continue iterating on it, improving what is already one of the best options out there. This is something that ElmaStudio has proven it can do with earlier projects, so I look forward to what the plugin looks like in the future. For now, it is a solid option for users who need to display notification boxes.

WordPress’ Reusable blocks may soon be getting re-named, as the feature’s distinct capabilities are less recognizable from its name following the introduction of patterns.

When the Gutenberg project first took off, nobody had any idea how important patterns would become in the page building experience, or that they would be getting their own directory on WordPress.org. During a demo at WordCamp Europe 2021, Gutenberg lead architect Matías Ventura commented on how transformative patterns have been for making page design approachable for users.

“Perhaps it was a smaller part of the roadmap initially but it’s becoming a centerpiece – especially because it allows…world class designers to provide a starting point for users and users get to learn design as they are interacting with themes,” Ventura said. 

A year later, patterns have made their way to the forefront of theme design and development with an excitement that rivals the introduction of widgets in WordPress’ earlier days. WordPress 5.9 will feature pattern insertion directly from the Pattern Directory so users will be able to change their patterns as often as they like, without having to switch themes. Coming in Gutenberg 11.8, the pattern inserter will highlight featured patterns from the directory in the initial view, instead of displaying the first alphabetical category. Contributors are also considering a path for allowing themes to surface specific patterns from the directory instead of bundling them.

In light of all this activity around Patterns, Reusable blocks are in need of a renaming that is more descriptive.

 “In the end, patterns are also reusable pieces of design,” Ventura said.

“Given the nature of these [Reusable] blocks is to have content in sync wherever it’s displayed — edit once; update everywhere — I propose we change the name in the UI to ‘Synced Blocks’ and adjust the block description a little bit to clarify that.”

The UI for Reusable Blocks is confusing because it is built on top of assumptions that users know the intricacies of how they work. WordPress developer Lee Hodson summarized the problem and how the current UI leads to reusable blocks being accidentally edited:

The save reusable blocks dialog is nice but how many creators actually understand what this save dialog means? On the surface it looks as though everyone should understand the save/not save option but it’s meaning is only obvious when you understand that reusable blocks are (currently) meant to either (a) not be edited or (b) edits to them are meant to affect all instances of the same block and (c) that reusable blocks can be converted to editable blocks (and not everyone immediately understands the difference) when edits to reusable blocks are meant to be independent of the block’s template.

I feel that a nice idea (reusable blocks) has been very badly implemented and many creators are blissfully unaware of its pitfalls until they realize their ‘template blocks’ have been overwritten.

Several contributors participating in the renaming discussion concurred that “Synced Blocks” would be a better name for the feature. This suggestion is the frontrunner so far. The conversation is still open and consideration of this proposal has been added to the Reusable Blocks Improvements tracking issue.

In episode 18 of WP Briefing, Josepha Haden Chomphosy reflects on a recent lecture that she gave to students at Hendrix College in which she explored the economics of WordPress and the principles that sustain the project’s ecosystem.

Have a question you’d like answered? You can submit them to wpbriefing@wordpress.org, either written or as a voice recording.

Credits

• Editor: Dustin Hartzler
• Logo: Beatriz Fialho
• Production: Chloé Bringmann
• Song: Fearless First by Kevin MacLeod

References

WordPress Showcase

The Value of WordPress: The World’s First Study of the WordPress Economy

Five for the Future

WordPress 5.9 Feature Go/No-Go

Digital Citizenship Resources

Becoming Better Digital Citizens Through Open Source

Empowering Generations of Digital Natives

Responsible Participation in Online Communities

Transcript

Josepha Haden Chomphosy  00:11

Hello, everyone, and welcome to the WordPress Briefing, the podcast where you can catch quick explanations of the ideas behind the WordPress open source project, some insight into the community that supports it, and get a small list of big things coming up in the next two weeks. I’m your host, Joseph Haden Chomphosy. Here we go!

Josepha Haden Chomphosy  00:40

So today marks the start of Digital Citizenship week. This year in 2021, it is the week of October 18th, and to kick it off, I want to share with you a bit of a lecture that I gave to a college class last week. 

Josepha Haden Chomphosy  00:55

An economics professor teaches this class. And so, a little bit, I went to talk about how WordPress is essentially a microcosm of global societies. That was mostly why I was invited to come and give the talk. But one of the students asked a really interesting question about economics, and especially the economics of WordPress. And so, I’m going to take some time to do my best to answer that question here as well. But first, we’re going to start with some big picture information about WordPress that I shared with the students, and then maybe you also don’t necessarily know. 

Josepha Haden Chomphosy  01:00

So the first place that we started was with the question of what WordPress is. Most of them had heard of it but didn’t necessarily have a good handle on what it is. And so this is the definition that I gave to them. This is a bit of each of the facets of WordPress that we kind of see right now. 

Josepha Haden Chomphosy  01:57

Firstly, WordPress is, of course, a content management system, which means it’s a piece of software that uses a copyleft license, which means that it’s open source, and no one individual necessarily owns the rights to the code. If you get very specific, WordPress is, of course, a FOSS project or a free and open source software project. I know that there are discussions around when a piece of software is free, then what are you using to pay for that piece of software or to pay for your access to that software? And often, the answer is that you’re using your personally identifying information to pay for something commonly referred to as the data economy. If you’re not familiar with that, it’s a little bit of a three-pronged effort there. So you submit your data to get access to the software, or you can join the platform, depending on what it is that you’re working with. That platform or that software collects your data so that they can build a profile about what sorts of content engages you and so that they can share, essentially, audience cohorts like groups of people that kind of are talking about what you’re talking about, agree with what you agree about, and find interesting, the same sorts of things that you find interesting. And then those companies sell access to your attention. This is something that I refer to as the attention economy. I think there are a lot of startups at the moment that refers to the attention economy. The most iconic recent example was when the folks over at Netflix said that they weren’t competing against other streaming services; they were competing against sleep.

Josepha Haden Chomphosy  03:54

And I think that might ring true for quite a few of us at the moment. But anyway, to scoot us back one level, I had, as I said, WordPress is free software. But the difference with WordPress is that to get a copy of WordPress, you are not necessarily required to hand over any data. You don’t need to give anyone data to get a copy. You don’t need to give anyone money or data to open up a copy that you own or to build a website in it if you’re just doing it locally, but especially around that data side because WordPress is not collecting any data, we’re also not brokering access to anyone’s attention.

Josepha Haden Chomphosy  04:37

Another answer to the question of “What is WordPress?” WordPress software and the project enable nearly half a trillion dollars of revenue in the global digital economy, as we learned from a recent study from one of the hosting companies inside the WordPress project  – oh, Inside the WordPress ecosystem anyway. And WordPress also runs 42% of the web, with some of the biggest sites we know using WordPress. Such sites like the New York Times, Rolling Stone, many, many others, which you can see in the WordPress showcase as well. I don’t necessarily want to just like call out all the big groups that use it. But it’s a lot.

Josepha Haden Chomphosy  05:22

 To recap what we just learned about WordPress and what WordPress is. It is software that one uses a copyleft license, meaning no single entity owns it. Two, it is available at no cost, meaning no money changes hands for you to own a copy. Three does not track you, which means that you don’t have to give WordPress any personally identifying information to get a copy. Four is an enabler of a massive digital economy massive portion of the digital economy even. That, you know, means their services, extensions, themes, plugins, all of that stuff. And five, it is software that supports 42% of the web. Practically every other site you visit uses the software. So that’s WordPress.

Josepha Haden Chomphosy  06:10

With this massive free software, you might be thinking to yourself a couple of things. The first thing you might be thinking is, “Well, that sounds impossible.” But if that’s not what you’re thinking, you may be thinking, “how is it possible that a software that is technically owned by no one and takes no money or data to obtain –  how is it that a software like that can power 42% of the web.” This brings me, of course, to a topic that I specialize in, which is how WordPress is made. 

Josepha Haden Chomphosy  06:45

WordPress is, by now you know, built by a global community of contributors. And it’s partially contributors that are self-sponsored or giving of their own time freely, and partly sponsored volunteers, people who are paid by Five for the Future initiatives inside various companies. I have said many times, most recently at WordCamp US, that I have an ideal ratio of about two to one in that kind of volunteer or self-sponsored versus corporately sponsored set of voices. And also, as I said, at WordCamp US, we’re not necessarily getting to that ideal ratio right now because of the nature of the way the world is at the moment. However, this community functions almost like a tiny little digital society. There are ways to get your voice heard ways to take on leadership roles; there is a little bit of light governmental structure. And as with any society, any community like this, there’s a relationship inherent there. There’s almost a transactional element that takes place when you’re participating fully. Although I know that for the WordPress project, especially for open source in general, there is a reminder that we should always be contributing without the expectation of reciprocity. But even if you are contributing without the expectation of reciprocity, you still are engaging in an existing community, which means that you are fostering a relationship with the community or with the people who are also participating in the community with you. It’s just inescapable if you have people around and working together. 

Josepha Haden Chomphosy  08:38

So two concepts really informed my work to future-proof the WordPress project. And the first one is digital citizenship, which is why this particular WordPress Briefing fits today. And the other is the Tragedy of the Commons, especially how we go about refreshing those commons. So digital citizenship, I talked about it a bit in the last WP Briefing. But it’s still true today that that’s important. And the thing that really matters to me as we are working through how to make sure that WordPress is moving forward together. But most discussions of citizenship are location-specific, which makes plenty of sense. However, with so many mobile devices and broader access to some level of internet, we have increasing opportunities to be connected because of interests or skill sets. And even the things that we aspire to or aspire to be with a community like WordPress, which has no home office or main location. Of course, it’s very important that all of the leaders in WordPress, all of the team reps in WordPress, are proactively engaging with the people in their teams and in their portions of the community instead of waiting for like happenstance running into people. We also use a bunch of social stuff to get people together: twitch screams, not twitch screams because it’s not that Halloweeny! Twitch streams, hallway hangouts, events that are both online and off. Everything that the Learn section of the community is doing with their discussion groups. There are so many ways that WordPress proactively engages with each other and engages with itself. And that work is all really important to keeping the community involved, which is key to any organization’s long-term success, and certainly is true for WordPress as long-term success. Because when your community or your organization or your society is engaged and invested in your collective success, then you are (get ready for a list) one, more likely to see obstacles early and be able to overcome them, two more likely to see upcoming trends and prepare for them, three more likely to see what is broken and be able to repair it before it is a major issue. And four, you are more likely to be a resilient and fruitful organization long after any single member has stopped participating. 

Josepha Haden Chomphosy  11:10

The more connected to the community you are and the more active, the greater your influence and the ability to affect changes also become. And so, not only is it important for us to remain connected as a community just to make sure that everything is going well. But also, it’s one of the primary ways that people who are giving back can sort of have more of an opportunity in this particular ecosystem. In open source, anyone can gain influence by helping others by helping the software and by keeping the trains on the tracks. And so, one of the only lasting limits to long-term potential in an open source project is how good you are at seeing beyond yourself and seeing what good action can make beyond just your own benefits. I understand that there are also specific hurdles to contribution in your free time that I have dedicated a couple of different podcasts to, so I don’t want to neglect that reality. 

Josepha Haden Chomphosy  12:19

I have found in my experience that one of the limiting factors that sometimes cannot be unlearned is not being able to see kind of a broader scope, a broader perspective than what you’re already bringing into it. 

Josepha Haden Chomphosy  12:34

So being a good digital citizen, that’s a really important part of keeping any society together any organization together and moving forward. But especially is in the context of digital citizenship, is true for WordPress. 

Josepha Haden Chomphosy  12:48

The second thing that is really important to me is this concept of the Tragedy of the Commons, which is, of course, an economics term, open source has borrowed. We have talked about it in this podcast in the past. And today, I specifically am talking about how WordPress works to consistently be refreshing the commons. So the theory of the Tragedy of the Commons says that all societies can withstand a certain volume of free-riders. A certain number of people who reap the benefits of that community’s society without necessarily putting anything back into it. And that is no different in open source than in any other place where you would apply this concept. The particular catch for WordPress is of course, that it is free, freely available and has no specific copyright holder. And so in those circumstances, it is incredibly easy for a small group of people to maintain the software while the whole world uses it for free. And not only is it possible for a small group of people to maintain it, but if you’re not careful, it’s also easy for a small group of unpaid people and unacknowledged people to maintain something forever. And at the volume that WordPress operates at, that’s a really risky choice. It doesn’t help to support those people; it puts the long-term stability of the software in jeopardy. And at the end of the day, it just does not help to replenish the commons to make sure that everybody keeps getting to have the benefits of this ecosystem in the long term. 

Josepha Haden Chomphosy  14:39

As many of you know, there is this program called Five for the Future. And that program is essentially modeled after a tithe. So the invitation to this program when it was first introduced in 2014 was that if you or your company or your community is made better or made possible by WordPress, you should give back to the WordPress project 5% of your resources. 

Josepha Haden Chomphosy  15:07

It is an aspirational 5%, of course, and some groups give back their time while others give back with their money. But almost anyone who wants to give back has some skill that WordPress needs. That particular program has really grown in leaps and bounds since it was introduced. I don’t know exactly how many team members were considered Five for the Future contributors when it was first introduced in 2014; it was a little before my time. But at the moment, it’s about 150 people that I am routinely aware of or in contact with, which is still a small number considering how many people use WordPress. 

Josepha Haden Chomphosy  15:52

However, many corporations who have seen the most benefit, including, you know, the company that I work for (Automattic), and a lot of other hosting companies in the ecosystem, all do a really good job of refreshing the commons so that WordPress is still usable for businesses of all levels. 

Josepha Haden Chomphosy  16:11

I want to leave us with one final big picture thought about open source. This is going to be a callback to one of my earliest episodes in this podcast. But I think that it’s always worth remembering. We’re going to talk about this really popular phrase in open source projects “free as in speech, not free as in beer.” And for WordPress, as you know, it’s a little bit of both. It’s literally free. But also, since it’s open source, it has a free as in speech component to it as well. 

Josepha Haden Chomphosy  16:46

The four freedoms of open source as laid out in the 90s. So 10 years into the open source movement, are basically that you have the freedom to run the program for any purpose, the freedom to study how the program works, and change it so that it can do your computing as you wish, the freedom to redistribute copies so that you can help your neighbor and the freedom to distribute copies of your modified versions, giving the community a chance to learn and benefit from the changes that you put into the software.

Josepha Haden Chomphosy  17:22

I don’t remember if I said this in my original podcast, but I’m going to say it today, free speech has a lot of responsibility, just like being a part of a community. Governments or communities, or in our case, this software is built by the people who show up. For WordPress at 42% of the web, every small choice we make can cause huge changes in how people experience the web today and tomorrow. And that, to my mind, is really no different than participating in any sort of civic infrastructure. The changes that are made today, or the errors that we prevent, set the tone and the circumstance and the potential to thrive for everyone who comes after us. 

Josepha Haden Chomphosy  18:17

That leads us into our smallest of big things. I just have a couple of things for you all today. Firstly, at the time of this recording, this is prior to the Go/No-Go demo meeting for WordPress 5.9. So I have no idea what’s happened. But by the time this podcast has been released, we will have had the Go/No-Go meeting and also have shipped the post that summarizes what happened, what we hope to change in the next essentially sprint so that we can confidently move forward with a clear set of features for the 5.9 release. I will include a link to the notes below in the show notes. Kudos to everyone, props to everyone who participated in that meeting. And also props to all the people who have been helping us as we head into this final release of the year and all of you who are going to help us make it successfully to the end. 

Josepha Haden Chomphosy  19:15

The second thing I already kind of alluded to at the top of the podcast, it is Digital Citizenship week; two or three years ago, the WordPress blog had a series about digital citizenship and what it means to be a good digital citizen, what it means to do that in the context of WordPress. I will drop a link to those posts in the show notes as well. They are very well written and very important, and fairly evergreen content. If I think that there is something worth updating, I will update it before putting it in the show notes. And that is your small list of big things. 

Josepha Haden Chomphosy  19:57

Thank you all for tuning in today for the WordPress sprint. I’m your host, Joseph Haden Chomphosy, and I’ll see you again in a couple of weeks.

In this episode, Birgit Pauli-Haack and Grzegorz Ziółkowski discuss WordPress 5.9 Go/No-Go Decision, Gutenberg Releases 11.6 and 11.7, and ongoing discussions about Themes and Styles for the Editor.

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Announcements

• Review by Jorge Calle, Ecuador
• Oct 28, 2021 – noon EDT / 16:00 UTC
  Live Q & A: Case Study: Converting Classic Widgets to Blocks for BuddyPress
• Video: How can we make building blocks easier? w/ Helen Hou-Sandí, Mark Jauquith and Riad Benguella
• Exploring custom blocks from a PHP-centric developer UX point of view
• Video: Going from Classic to block-based Themes w/ Ellen Bauer, Carolina Nymark and Anders Noren

WordPress 5.9 Updates

• WordPress 5.9 Go/No-Go Decision October 14, 2021 (Make Core)
• WordPress 5.9 Planning Roundup (Make Core)
• Preliminary Road to 5.9 (Make Core)
• Series of bugs and shortcomings faced during 5.9 go/no go prep (GitHub)
• WordPress 5.9 Must-Haves Project (GitHub)
• Summary: Navigation Editor and Block hallway hangout

WordCamp US

• Building Modern WordPress Sites: The Interplay of Blocks, Patterns & Theme.json – Rich Tabor from Extendify
• A Voice for the New White House Administration with the Block Editor – Helen Hou-Sandi from 10up
• Creative Use of Block Styles – Kjell Reigstad from Automattic
• Demystifying Gutenberg Blocks – Understanding First Steps to Becoming a Gutenberg Developer – Cory Webb, software engineer at Fast

Community Contributions

• WPBlockPatterns.com
• Persistent Block Editor Settings plugin

What’s Released

Gutenberg 11.6

• What’s new in Gutenberg 11.6 (29 September) (Make Core)
• Gutenberg 11.6 Improves the Global Styles UI, Adds Child Theme Support (WPTavern)
• Gutenberg 11.6 Introduces New API for Locking Blocks (WPTavern)

Gutenberg 11.7

• What’s new in Gutenberg 11.7 (October 13th)
• Gutenberg 11.7 Iterates on Global Styles, Improves Adding Navigation Links, and Adds Column Spacing

What’s in active development or discussed

Gallery Block Refactor Dev note by Glen Davies

FSE Q & A – Submit your questions!

• Submit Full Site Editing questions by Oct 27th
• FSE Program: Answers from Round Two of Questions
• FSE Program: Answers about general functionality

FSE Theme Switching

• FSE Program Block Theme Switching Summary
• Adventures in Block Theme Switching

Stay in Touch

Transcript

Birgit Pauii-Haack: Hello, and welcome to our 53rd episode of the Gutenberg Changelog podcast recorded on October 15th, 2021. In today’s episode we will talk about so much, WordPress 5.9 go/no go decision, Gutenberg releases 11.6 and 11.7 and ongoing discussions on themes and styles and editors and everything. 

I am Birgit Pauli-Haack, curator at the Gutenberg Times and WordPress developer advocate, sponsored by Automattic. I’m here with my co-host, Grzegorz Ziółkowski, code wrangler at Automattic and WordPress core contributor. How are you, Grzegorz? How are you doing?

Grzegorz Ziolkowski: I’m great. I had a blast during my vacation. I want to tell you more about it, but we have so much to cover today that there isn’t much time for chit-chat. How have you been lately, Birgit?

Birgit Pauii-Haack: Well, I had a blast running live Q&As this week and last week and the week after next and talking to developers and users. You’re right, let’s catch up after the show and let’s get this started.

Grzegorz Ziolkowski: Yay. Before we start we want to thank you, Jorge Calle user name, AtrumGeost from Ecuador for his five-star review.

Birgit Pauii-Haack: Yay.

Grzegorz Ziolkowski: Hooray. We are so thrilled to have you as our listener. Jorge wrote, “the best all-the-things Gutenberg podcast. This is my favorite Gutenberg and WP-related podcast. It helps me keep up-to-date with all the new and upcoming changes and to understand the reason behind those changes.”

Birgit Pauii-Haack: That’s so nice. That’s exactly what we’re trying to do. Thank you, Jorge. Greetings to Ecuador.

Grzegorz Ziolkowski: Yeah, we could put that as our mission. Yes, greetings.

Announcements

Birgit Pauii-Haack: Yes. All right, we have a few announcements because it’s been a while. The next live Q&A, put this on your calendar, is a discussion with the BuddyPress team on how they converted classic widgets into blocks. We learn what was hard and got easier over the first two times I did it. Join us on October 28th at noon Eastern, 1600 UTC with Mathieu Viet, David Cavins and Varun Dubey on the live Q&A show. It’s going to be really, really interesting, especially for developers who still are a little bit on the edge to jump into Gutenberg development, also theme developers who have widgets in their themes. It’s definitely going to be educational because we will have some demos.

Grzegorz Ziolkowski: Yeah, I guess it should be also useful for the developers who have plug-ins and they still waited to convert them to blocks because it’s all about that, right?

Birgit Pauii-Haack: Right, right. Everything needs to be a block now. It’s just so much better for the users to use them because everything’s just one concept, they don’t have to do the mystery meet with what are widgets, what are menus, what are sidebar and all this kind of thing. Yeah, speaking of live Q&As, yesterday I had the privilege to host a discussion among WordPress giants, Mark Jaquith, core committer for 17 years, Helen Hou-Sandi working on WordPress for 10 years and Riad Benguella who is the newbie in that regard.

Grzegorz Ziolkowski: A rookie.

Birgit Pauii-Haack: He’s already working on Gutenberg for even five or even seven years, so …

Grzegorz Ziolkowski: Five. Five.

Birgit Pauii-Haack: Five years. They discussed how can we make building blocks easier. It was a follow up on a Twitter thread Mark started with a question, what if building custom blocks for the block editor was as easy as supplying attributes and a block of HTML? What if this produced react editing code and PHP rendering code without a build stack? Coincidentally enough, he and Riad independently of each other were exploring some technical avenues for that and Helen was too. Grzegorz, you know more about the technical framework and underpinnings of Gutenberg, what was your take from the discussion yesterday?

Grzegorz Ziolkowski: I was really excited to see this discussion happening in the forum where people have more time to express their ideas, where they come from, what’s their use case and how they arrived at similar conclusions which is the best part of that. All three people, they were working on different aspects. Riad is working only on core, mostly on core and Helen is doing work for customers, same as Mark. Basically different venues came to the same conclusions. It’s really nice that we have good understanding where it should all go now. Those ideas that they both shared are pretty decent and I guess this is something that should be materialized in the future. That should greatly benefit all the developers that increase blocks on a daily basis. It was really cool and I encourage everyone who is doing block development to catch up with this discussion. 

Also check the references they mentioned. One is from Riad, it’s on his GitHub, it’s called Block, we will provide links. Mark, he also has the same idea, I believe it’s called Blocksta, the code name. Yeah, that’s really insightful from my perspective. I learned a lot, especially about the background, all the friction people have and the pain points. It’s something that, as a core team member, I heard a lot about that, but it was more on the side of showing what’s wrong and not necessarily what are the challenges people have on a daily basis that end up with all the frustration they share, which is very limited, especially on Twitter which is a few characters.

Birgit Pauii-Haack: Yeah, yeah. I also like that both Mark and Helen expressed and emphasized that the ideas that they had on how to do some templating and all that would not have been possible from the beginning because you need some underpinnings already working and some expansion of the API. Mark mentioned the block API version two where PHP and JavaScript have the same information about blocks, that was necessary to actually even think about any of the additional helper function, tool function for block editing and block writing or building. They also expressed that it shouldn’t, it’s not necessarily something that needs to be in core, but it could be one of the official tool building for plug-in developers. Yeah, it was a really good discussion. I will also share in the show notes Helen Hou-Sandi’s blog post called exploring custom blocks from a PHP-centric developer UX point of view where she even more elaborated on where she was coming from from the agency work there.

WordPress 5.9 Go/No Go Decision

Grzegorz Ziolkowski: Yeah, definitely. I could continue on this topic for long, but let’s go to the most important announcement of the day which is the go/no go decisions. The meeting happened yesterday. The official post isn’t ready yet. Yesterday will be October 14. We spoke with Matias and Hector Pietro who attended the meeting. It looks like all the features discussed during this session should be included in the WordPress 5.9 release which means that block themes will be supported as an option with how they call it, a remark that there will be something like early access or something along those lines just to build proper expectations for users. At the same time it’s worth to mention that the new Twenty Twenty-Two theme built out of the blocks will ship with WordPress. Therefore, the default experience with themes for all new websites will start with blocks. I think it’s huge and super exciting to see it happening finally. They took so much time, but there is more. Do you want to say something about that?

Birgit Pauii-Haack: Well, I just wanted to notice that the theme Twenty Twenty-Two was actually introduced last week by Kjell Reigstad and he’s working with Jeff Ong on it. We will share, of course, the link in the show notes, but if you want to check it out it’s on the design, actually on the core make blog, very buried but it’s beautiful. He also has some ways how he can change the theme.json and then make the theme a total different look than what he’s originally planned there. It’s really nice. You had more to say about the go/no go from Matías Ventura?

Grzegorz Ziolkowski: Yeah. No, you sidetracked my brain now for the Twenty Twenty-Two theme. It’s really beautiful. I really admire the work done with that, especially because it was very challenging on the technical level. We had to build all the blocks to make that happen but the outcome is really good. 

I also would like to bring to your attention the issue that was created today by Matías which contains a series of bugs and shortcomings that he faced during preparation for this 5.9 go/no go decisions meeting. We will share a link to the issue which has the number 35662. It only confirms that there aren’t any significant bugs that put too much risk on the roll-out plan, however it will be essential to sort out those minor issues because they might negatively impact the first user impression. One more thing to mention is that you all will be able to watch the progress of the release execution in the traditional way which is through the issue, through the project board which is Gutenberg and the name is WordPress 5.9 must-haves. The project number is 62.

Birgit Pauii-Haack: Yeah. Thank you for the summary there. There’s actually a video that you can, it was a one-hour meeting and they recorded it, it’s available on WordPress.TV. I wanted to go still for those who … the plan, the schedule of the release. Feature freeze will be November 9th, that’s 42 days after go/no go. From today on it’s 41 days.

Grzegorz Ziolkowski: Or even 40 because the meeting was postponed by one day.

Birgit Pauii-Haack: Oh right. Right, right. It’s actually 39. Beta one will be released or is scheduled to be released November 16th and then the release candidate one is scheduled to be released on November 30th. The final release is scheduled for December 14th, 2021 and will have, from the Gutenberg plug-in releases, the latest one will be 11.9, all the versions from 11, or 10.8, or 11.0 I think to 11.9, release candidate. 11.8 will still be a normal release on Gutenberg plug-in and then 11.9, the release candidate, the features that are in there will be then merged with core and then bug fixing starts. 

I just also want to mention that before the go/no go meeting the group working on the navigation block and editor screen, navigation editor screen held a hallway hangout so to speak. Among other things they concluded that the navigation editor screen itself is not ready for 5.9. Only the navigation block and the block for new navigation and I think it has some … I don’t think it has a feature for existing menus, so we need to see about that, the main reason why they won’t solve the underlying backwards compatibility issues successfully before the release. A menu is a major part of a website. There are a myriad of third-party products tapping into the current features and they all need to be accommodated in one way or another. 

There is a summary post about that on the core blog, we’ll share the links of course and there’s also a video where you can also follow along on the meeting. We will share all the relevant links for the 5.9 at the current stage in our show notes, that’s a summary post of the meeting, Matías’s roadmap, Josepha’s planning post and then the meeting recording as well as the summary post by Hector Pietro. That’s about that.

Grzegorz Ziolkowski: Yeah. Just to summarize, the navigation block is going to be included, right? It’s crucial to have it for the block themes.

Birgit Pauii-Haack: Yes. Yes, but they were still trying to figure out if they need a second block for the backwards compatibility or they want to put it all in one block. They concluded now that they don’t want to burden the new feature, the new navigation block with the legacy part from 18 years of WordPress development so they are working on a second block that is the compatibility, that handles the compatibility issues. Also, some of the plug-ins actually tap into the navigation editor screen as well and the customizer so there are so many different branches of what to think about that they said, okay, we need to take a step back and see that we’re not making the same mistake that happened with the widget editor where they weren’t having enough tests with the third-party plug-ins to get this out.

Yeah, that’s about the release. I’m totally excited about it, especially because of the block theme with the full site editing. We will have some new or old terms. I think we were always talking about the block-based theme, it’s now called block theme. We were talking about the site editor, or template editor, now it’s the editor. We were talking about the global styles, they’re just the styles because, yeah, that’s all there is. Yeah.

Grzegorz Ziolkowski: Everything gets simplified.

Birgit Pauii-Haack: Simplicity is to aim for, yes.

Grzegorz Ziolkowski: Even the user experience that the blocks provide.

Birgit Pauii-Haack: Yeah, and….

Grzegorz Ziolkowski: Okay. Let’s move to another point.

Birgit Pauii-Haack: Move on. Yeah.

WordCamp US 2021

Grzegorz Ziolkowski: Yeah. WordCamp US, I didn’t watch it live, I watched some talks afterwards. How about you, Birgit?

Birgit Pauii-Haack: I watched it live. I took the day off from other work so I could really concentrate on that. My favorite talks were, I couldn’t decide on the favorite so I have three favorite talks. One was from Rich Tabor from Extendify, his talk was building modern WordPress sites, the interplay of blocks, pattern and theme.json. That’s definitely a very good presentation to watch, not only because all his slides were so beautiful and his voice was so soothing, we were all very relaxed about all the new things that come to WordPress, but he also made very clear how all these things work together.

Grzegorz Ziolkowski: I saw also that some people were confused whether it’s an advertisement for WordPress or is it an actual talk.

Birgit Pauii-Haack: Then the other one was a voice for the new White House Administration with the block editor by Helen Hou-Sandi. It was an hour-long presentation but it had a few different parts in there. One was making clear the advantages between a form-based content collection screen to the what-you-see-is-what-you-get editor and how they accomplish that. They actually built custom blocks, they did that for the experience. Then Helen, in the second part of it she also went in and explained why native blocks, Gutenberg blocks are so important. Then went on to actually show how she coded one of them and made the difference between the different, showed the difference between the approaches that they were exploring and where they finally settled. She has actually some code examples in there and she walked us through her set-up. That was really good. There was a lot of things packed in there, but it was one whole presentation.

Then the last one was Kjell Reigstad who showed us creative uses of block styles. Block styles is something that you use the core block, but you add additional CSS to it. That’s pretty much what block styles are. He showed how to do this, he also shared his repository, but he did all kinds of different graphical and animation. It was just beautiful to see what is all possible with just using block styles. You don’t have to do a whole lot of programming from that, at least not in JavaScript or in PHP, you need to do a lot of CSS for that. A lot of designers know that part and I think it’s a good starting point to get your creative juices going. Yeah, how about you? What did you watch on the rerun?

Grzegorz Ziolkowski: I watched all the talks you mentioned so you took my picks. Anyway, I have one more to share, the one from Cory Webb, software engineer at Fast. He had a talk named the demystifying Gutenberg blocks, understanding first steps to becoming a Gutenberg developer. I really liked the talk because it was structured in a very nice way. It covered all the APIs, basic APIs you need to know to start with blocks, but he also added a section where it was nice to know and there’s some additional going further if you want to extend your knowledge base and there are some other topics. That’s a good way of approaching that and it will be super beneficial for anyone who either already started working with blocks or they want to start because it covers all the levels when you want to become a master going from the beginner and scaling your knowledge. I liked that about this talk.

Birgit Pauii-Haack: Yeah. If you watched that you have all the pieces that you need to go from beginner to experienced. That’s also a part of my talk that will be shown at the Page Builder Summit that starts on Monday from Nathan Wrigley and Ann le Roux. There are a lot of talks there on the professional use of page builders in all areas. Ann is doing her full site editing talk and I’m going to talk about how to customize blocks for client projects. If you missed it, last week was also a theme developer live Q&A. Ellen Bauer, Anders Norén and Carolina Nymark were on the show. Anders showed his block theme, Tove, and Ellen Bauer showed her studios theme, Aino, as a hybrid theme. I loved their excitement about the new possibilities of themes and blocks and full-site editing. They also shared how they made the journey from building classic themes to going block themes now. They also answered a ton of questions from the audience. The recording is available on YouTube and we will try and post a transcript and resources on the Gutenberg Times next week.

Grzegorz Ziolkowski: I started listening to this live Q&A as well, it was pretty good, but I was driving so I couldn’t show the demo so I stopped. I didn’t have to time to go back, but I definitely have to. One thing that caught my attention was that Anders mentioned that one of the users of his team, he applied a lot of modification using styles and similar things. He sent a link to show the end effect. Anders said that he didn’t recognize this theme, he couldn’t say it was his. That’s a great thing about the future of building themes, the user will be so much empowered to achieve their goals.

Community Contributions

Birgit Pauii-Haack: Right. Yes. Yeah. Speaking about themes, there is a new site out there called wpblockpatterns.com. It’s a place where you can find out how your block patterns or the block patterns in the directory look with any of the block themes that are in the repository. I did a few tests and I’m delighted to see that block patterns will persist even when you switch the theme on your site, so something that’s very hard to do with third party page builders but that’s also very hard to do with classic themes where you sometimes lose content just because you switch themes. Now with block patterns that’s a much better build and they all persist, including the design, when you switch the theme. It’s really interesting to see. Speaking of block pattern, there’s a small change in the pattern directory. The meta team has added now a featured category so the best patterns you can look up in the featured category. You can also select them from the inserter inside of the editor.

Another community contribution came from Marius Jensen. He updated his plug-in called persistent block editor settings. He added support for the following user settings, block breadcrumbs, that’s the breadcrumbs on the bottom of a screen, on and off, change the most used blocks to what the user actually is doing and the caret positioning. Then all the settings are stored in the individual user profile information on the site so that persists between computer or browser changes. I think it’s a great plug-in and many, many people have asked for that. It has quite a following on the WordPress repository. I also think that sooner or later, I know that the core team is working on something like that, but it’s still blocked by some of the not finished things I would say. Yeah.

Grzegorz Ziolkowski: Yes. It’s in progress for so long. There were several approaches that tried to address that. Maybe it’s good that it didn’t happen before because now we will have several screens for the editor and that brings another level of complexity. Still, the way it’s structured, even in the local storage of the browser, so it persists per browser at the moment, it’s still something that might change slightly at the time of the WordPress 5.9 release. Starting from that, I guess it’s a very good moment to finally bring the same functionality to core.

Birgit Pauii-Haack: Yeah. Yeah. You mentioned this, I was just … you were distracting me because I was counting the different editor screens that we have now and it’s quite a few. It’s a post editor, it’s a widget screen, it’s a template editor, it’s a template parts editor, it’s the reusable block editor. It’s really interesting.

Grzegorz Ziolkowski: Yeah, that’s a lot. I mean some of them are the same editors behind the scenes, but conceptually they are different. Now, as we will cover soon, we also have this zoom mode so you can switch in the editor as it will be called from now on from a full template view to the template part view, so that’s yet another way of looking at that.

What’s Released – Gutenberg 11.6

Birgit Pauii-Haack: Yeah. Well finally, half an hour into the show, we are at the releases. Gutenberg 11.6 was released on September 29th. The WP Tavern covered some of it and of course some of it is also in the … oh, the WP Tavern actually had two posts about it. One is about the release as a whole and the other one was introducing the new API for locking blocks. I think that was one of the major features there. Let’s go through that. 

Enhancements

We start with the query pagination now can use the flex layout which is really cool. The site logo now has the feature to crop the image. If your logo that you uploaded is not fitting in the spot you can crop it. Now it’s also possible to zoom and rotate the image, so that is really a step forward.

Grzegorz Ziolkowski: There is this item for gallery block which is at toolbar bottom to convert old galleries to new format. I’m not quite sure it’s something that will stay for longer, or is it something for the transition period, but it’s great that this is now possible because it will help with the ongoing efforts to bring inner blocks for the gallery.

Birgit Pauii-Haack: The gallery block has experienced a refactor, instead of just having the IDs of the images in there and then rendering them it actually comprises now of single image blocks that you can add all the different features that you have with the image block also to the single image in a gallery block. You have then the gallery outer and then the inner blocks are image blocks. The roll-out is, in that regard it will not automatically convert the old to the new galleries until it’s rolled out and until it’s coming to core because right now it’s still an experiment. You can switch that over to the new gallery. It’s called update, the button in your gallery toolbar and then you can convert it to the new format. I think in the final roll-out, when you open up the post it will automatically convert it, but not with all the previous. It will not touch that unless you really wanted or unless you edit that particular post. Yeah. 

Then the color picker got changed and is rolled out, it’s more accessible and it also has a copy function and all that. It also makes the rounds now, we saw it in 11.6 as well as in 11.7, that’s gradually exchanged on all the blocks. Do you know anything else about the color picker?

Grzegorz Ziolkowski: No, I know that there is a big redesign happening. I don’t know why, but there’s always a reason.

Birgit Pauii-Haack: Yeah. I think it was accessibility problems that the old color picker had.

Grzegorz Ziolkowski: Oh. Maybe, as far as I remember that was something that was worked on before, WordPress 5.0, which was a long time ago. I’m sure it was accessible enough to get through to the release then. Maybe there was some concerns that are addressed now.

Birgit Pauii-Haack: Now there is a simple styles preview in the sidebar of the template editor or site editor that you can modify some of the styles in your panel and it also now uses a navigation component. That’s just the underlying feature for the global styles preview.

Grzegorz Ziolkowski: Yeah. For the preview you see some characters and it shows the typography, how it looks in practice and also the colors that are applied to that. It just gives you a slight preview so you don’t have to navigate through the page and look for that. It’s pretty useful in my opinion.

Birgit Pauii-Haack: Yeah. You see the final version of it right now in the video from last night’s meeting of the go/no go when Matias Ventura was demoing it. It’s a nice … also with additional color palettes. It has received quite a few iterations since it got added to the plug-in. Full site editing, there is now basic support, the executive word is basic support for child themes when you have a block theme so you can have different features added or switched on and off in your child theme that maybe the parent theme doesn’t allow. You have different color settings and any settings that you want to you can do in your theme.json for the child theme and still get updates for your parent theme.

Grzegorz Ziolkowski: Yeah. The feature that I mentioned a few minutes before is a way to edit template parts in a special view. When you are editing your template you can use this dropdown menu which is an icon with three dots. There is this new option, edit template part. When you click that, everything disappears but the template part and you can focus on editing only that area, which is pretty handy. In the context when there is a lot of blocks sometimes it’s hard to see when the template part starts or ends. I like this addition.

APIs

Birgit Pauii-Haack: Yeah. Yeah. Then we come to the lock control for block type level. As we mentioned there’s an article that covers that as a whole at the WP Tavern. At the attribute level it supports locking the block from being moved or removed and it hides the block moving errors and the delete button if the block is locked. You can use that also with your … it’s just an attribute in the block.json if I see this correctly. You can also use that for your block patterns. That can have locked and unlocked blocks. That’s-

Grzegorz Ziolkowski: Oh yeah. That’s true. That would be a good use case, yes.

Birgit Pauii-Haack: Yeah. That’s also something that Matias demonstrated yesterday, last night in the video. What else do we want to point out from the 11.6? Bug fixes, well we’re going to jump over the bug fixes.

Grzegorz Ziolkowski: I think you had something highlighted for the site editor.

Birgit Pauii-Haack: Yeah, the experiments. The experiments, yeah.

Grzegorz Ziolkowski: Basic plug-in support.

Experiments

Birgit Pauii-Haack: Yeah. Sorry. The site editor now has basic also, our executive word is basic plug-in support. It adds the support for the plug-in sidebar. The site editor is now the editor and that’s where you do the full site editing pieces. The sidebar there can now be targeted by plug-ins for the sidebar, for the menu items in the menu as well as close and open general sidebar action. Plug-in developers, extenders will really be happy to hear about that. We were waiting for that too. 

Documentation

There was a big push for documentation updates, especially for the packages and the components. Developers can now look up some of the documentation and don’t have to figure out from code what does this do.

Grzegorz Ziolkowski: Yeah. I guess there were also some updates related to how to contribute to the WordPress components package. That’s the most important part that builds all the experience, all the UI elements and so on. There’s a lot of movement in that area which also shapes how global styles look. You can see a lot of changes in that area. That’s all because of these efforts.

Birgit Pauii-Haack: Yeah. All right. Code quality, I think that was all … was that all that we wanted to say about 11.6 in this episode?

Gutenberg 11.7 Release

Grzegorz Ziolkowski: I guess we have a lot of cover also from 11.7 that was released on October 13th. It would be fair to say that we are done with the 11.6 release and just move to the next one because it was a huge one and there was a lot of enhancements included in this one, way more than the one we already covered. 

Enhancements

Let me start with the changes to the block editor. With the work, ongoing work on the navigation block and all the child blocks there was a need to have a way to use also slash inserter in this content. So far you could do it only through the paragraph block, which was quite a big limitation. It is now fixed. 

It’s enabled to some of the links to the blocks that allow you to insert links and stuff like this. When you insert a link and it has some name, when you delete that name and write a slash then you will be able to insert a block, other types of blocks that fit in that context, which is pretty good. This is something that is still, the API behind that is still experimental. Every block author there can experiment with that by enabling the flag called underscore experimental slash inserter.

Birgit Pauii-Haack: Yeah. I think what that also does is give you a little input screen from the slash inserter, not that you have to … up until now the slash inserter only added, gives you fast access to adding a block, but now you can actually add also some parameters to that and enter it right there. That’s a real speeding up the workflow quite tremendously. As you said, any block can have that so it’s also the plug-in, the blocks that come with plug-ins can also use that. That’s really good, immediately extender friendly. 

It also has added or enabled the ability to create pages directly from the inline link UI on the navigation bar. The new empty page gets created, that’s a feature that comes over from the other editor screen but I think I really like how they implemented that, the new empty page gets created behind the scenes with a title set on the text typed in the search input field. That’s definitely also a fast way to create a menu when you know you have the outline of your website and you just create the menu headers and then it automatically creates all the pages for it as well. That’s really cool.

Grzegorz Ziolkowski: Yeah. At the end of the process of creating your navigation you just go to those pages and fill it with content, which is pretty nice. It should speed up the whole process really.

Birgit Pauii-Haack: Exactly. Yeah. In 11.6 came the site logo cropping and image manipulating features, now you also get, with 11.7 you also get duotone support which means that you can have a fixed color scheme around your website. Every image that you have might fit better into it. Really that’s a cool thing.

Grzegorz Ziolkowski: Yes. Exactly. There’s more for the columns block, they enabled the block gap feature which we covered in past episodes. When it’s combined with vertical margin support you can have a really nice effect, so finally you can add some spaces between columns and there is a control for that which allows that and some nice animations that support that. It’s a very nice way that was missing for so long. Now it’s finally implemented.

Birgit Pauii-Haack: Yeah. If you’re a theme developer who has actually taken out the gap between the columns, you can now, it can now be done through the interface. I saw some nice animations or demos where you have three columns that are a different color but they don’t have a boundary so they go from one color to the next without the background color of the site shining through which is quite a nice effect when you just want to liven up the text, the wall of text when you’re writing so much and just have some graphical play around with it interspersed there. 

The navigation, oh yeah, from the navigation block you can now transform your link into other allowed navigation blocks. You can transform it into a sub-menu, menu or a site logo or a home link or a social icon, which is cool if you change your mind on some of the links.

Grzegorz Ziolkowski: Yeah. I’m not quite sure what happened with the content. For instance, if you have a site logo and you want to transform it into something else, which probably will have a different URL, it might be it uses just the same URL and then you just need to edit that. Anyways, it’s a really interesting idea to speed up the process.

Birgit Pauii-Haack: Well this one is actually only going from a link to something else, not the other way around.

Grzegorz Ziolkowski: Oh, is it?

Birgit Pauii-Haack: Yeah.

Grzegorz Ziolkowski: The initial idea that I always, that stuck in my mind, all the transforms should be two ways. If you convert from something you are able to convert that back. Maybe it’s now relaxed, you can always use an undo button and that should be pretty much it. I guess it’s whatever makes it easier for the user is fine from my perspective.

Birgit Pauii-Haack: Yeah, I think I need to press that for this if there is a way going back, just from a social icon link to just a mere menu link. Maybe it’s a different context here. Yeah. Now you can actually … there was a problem when you have these.

Grzegorz Ziolkowski: Just to explain that, why the rule was like that, when you are transforming from the heading to the paragraph then you use the same content and it’s pretty straightforward. However, if you would like to go from the image to cover block then you have only the image, but as soon as you add some heading or something like that in the cover image, when you go back to the image block then it isn’t quite sure what should happen with this heading. You could lose some content.

Birgit Pauii-Haack: Yeah. Yeah. No, I get it. Yeah. I’ve only been situational, but I’ve never had a situation that I have already a cover block and only want to go back to an image. I think that’s just a lack of imagination I guess.

Grzegorz Ziolkowski: Also, when you’ve invested so much time to polish your cover block and make it pretty, it doesn’t make any sense to go back to the image.

Birgit Pauii-Haack: Yeah. That’s so true. Yes, yeah. The next item on our list is show none as an alignment option and use contextual text to clarify the settings. There are now hints included in the alignment options, spread text maximum wide, 720 pixels wide or something like that. It explains a little bit to the user what does it mean when you change something to align wide or to full width. Some users had trouble to see, I’m one of those, to see that you can uncheck those alignments and then remove it. Now there is and option that says no alignment, just do what you normally do as a block, don’t make it wider or go out of the content. I think that’s a good addition there because I got totally and utterly confused. Oh, I can switch it just off. It was not a good.

Grzegorz Ziolkowski: Yeah, you had to click on the same option again to disable it, which wasn’t so straightforward.

Birgit Pauii-Haack: It wasn’t clear. That’s a toggle switch, that wasn’t clear. Yeah.

Grzegorz Ziolkowski: I wanted to emphasize that the number you mentioned is not something that is hard colored, it depends on the theme. It is able to, the context there provides very useful information which can vary between themes, right?

Birgit Pauii-Haack: Is that coming from the theme.json file do you know?

Grzegorz Ziolkowski: They probably compute it on the fly using some JavaScript.

Birgit Pauii-Haack: Okay. Yeah. All right. That’s great, but we’re not done yet. What’s the next thing?

Grzegorz Ziolkowski: Format library.

Birgit Pauii-Haack: Yeah.

Grzegorz Ziolkowski: This is one of the options you have when you have text based blocks. Before it was only possible to change the foreground color of your text, so change it to something different. Now there is also an option to change the background color or the highlight how it’s called in other tools. The change was applied to the existing controls so now you have a pop up dialogue, I don’t know, which has tabs so you can switch between text and background and apply those different colors.

Birgit Pauii-Haack: I think that’s a feature that has been missing from the beginning for a very long time. There was something that you could do in the classic editor very easily with the little toolbars up there that you can just highlight a word in your text within the paragraph and then give it a different text color or give it a different background color. The text color was still there, is already there, but now you can change the background color of that. Yeah. You find it at the same place where you also find the text color change in your paragraph toolbar. You can now, as a theme developer you can now also set presets on the duotone for your theme. If you say every duotone, when it comes out of default, should be a blue filter or a pink filter or something like that, you can help your user to set the right duotone on certain images in the content.

Grzegorz Ziolkowski: Yeah. You can change it per block, so that’s pretty nice. You can say, oh, site logo, I want to have it in a red filter and that’s also possible now.

Birgit Pauii-Haack: Yeah. The possibilities become endless.

Grzegorz Ziolkowski: Yeah. In general all the management for colors becomes so complex that now it got extracted, the color palette is in its own global styles screen. Basically you need to, when you go to the editor for editing, for changing your site, when you go to the styles sidebar, now you need to first click on the color link and then it will show all the colors you have. You can also drill down to the palette or individual elements to change those settings.

Birgit Pauii-Haack: As the next iteration, probably not for 5.9 because it takes a little more, but one of the features that will come is that you can, in that you can also have multiple color palettes to choose from or have a color palette directory where you can grab a wonderful … yeah, Matt Mullenweg actually mentioned that in yesterday’s video that there is a colorpalette.com site where you can pick the color palette that you like and then you get all the hex decimal values for it for your site. That would be so cool to actually have a source like that that can pull in new color palettes for your theme there or for your site. Yeah, this has opened so many possibilities, it’s really mind-boggling. Right now we just have these three screens, all the styles, the color styles and then the color palette separate where you can add additional colors to it.

Grzegorz Ziolkowski: Yeah. It’s really hard to wrap your head around how colors work at the moment. If I am correct, now you have the default colors that come from the WordPress core, then you have theme styles that every theme can provide and it looks like you can also, the users can define their own colors right now.

Birgit Pauii-Haack: Yeah. The hierarchy is users first, then the theme, then the core, but it’s also that the theme can say please disable custom colors, my users don’t know how to use color. 

Grzegorz Ziolkowski: Yes.

Birgit Pauii-Haack: To offset or to avoid the GeoSitters interesting page designs.

Grzegorz Ziolkowski: To make it even more advanced, it’s also possible to say that, a theme author can say that for this particular block I want to have a different color palette.

Birgit Pauii-Haack: Yeah, yeah, yeah. There’s also something new and I didn’t realize that until now when I see the screenshot that I was looking at here from the post. In the styles there was, up until 11.6, with the new version now you can actually go directly to the blocks to change their settings. Before you had to close the sidebar from the style, from the global styles and go back to … when you do template editing you have to go back to the blocks sidebar. There wasn’t a clear path for that. Now you can, I see here blocks is another panel that you can open there. That’s really cool.

All right, next thing, the template editor got some new workflow things. There’s a back button now for the isolated template part editor. When you drill down you can go back up the rabbit hole again. Then also the template areas have added some template details like header and footer areas there. That’s really cool.

Grzegorz Ziolkowski: When you go to the header and you click on the name of the template you are currently editing, you not only see the details about the theme template but also some details about template areas used in that template which allows you to quickly navigate to them because there are dropdown menus with additional options.

Experiments

Birgit Pauii-Haack: Exactly. Yeah. Then the navigation screen still in experimental has a new feature that you can add tool tips to navigation items in their set-up states. That is interesting and helpful.

Grzegorz Ziolkowski: I guess it’s coming from the block editor. When there’s something wrong, the link is missing in your navigation where it should be, then it just underlines it with the squiggly line. When you hover over it it just shows you what the issue is.

Birgit Pauii-Haack: Yeah. You don’t want to have in the menu a link or a menu item that doesn’t go anywhere. That helps you too. Then the next one is insert the navigation link blocks by default in the navigation block.

Grzegorz Ziolkowski: Yeah. Basically, when you click on the plus sign to add another item, you can start writing and it will show you a list of matching links. You can just click on one of them and that will add it to the menu. You don’t have to choose the type or you don’t, give me category page, no, we just type the name of the link and it just does everything behind the scenes.

Birgit Pauii-Haack: Yeah. That’s a very nice feature because in the current menu screen you really have to know what kind of type you’re looking for. This goes away right away with that feature. I’ve got to test it, what happens with custom post types and post categories or are these pages also being surfaced. Yeah. Wow, that was a lot in this release. Do you have anything else? I think that was it, the major parts.

Grzegorz Ziolkowski: Yeah. We had to cover two Gutenberg plug-in releases pretty packed with features. I guess that’s a lot already to process for our listeners.

What’s in Active Development or Discussed

Birgit Pauii-Haack: Yeah. In one sitting, yes. Let’s go to the active development and what’s discussed. I wanted to highlight again the gallery block refactor will come out of the experimental stage with the next plug-in release, that’s 11.8, that’s in two weeks. It will be in 5.9, WordPress 5.9. At the moment we’re doing the extender outreach to plug-in and theme developers to alert them to the changes. If you are one of those and/or you work for agencies but you don’t have public plug-ins or themes in the repository, then I would suggest to go to the developer note that Clan has already published a month ago on the changes so you can see if that affects your gallery handling in your theme or your plug-in. We will have it in the show notes of course. 

Then on the FSE Outreach Program update Anne McCarthy has another call for questions where you click on a button and have your question and then it gets sent to her inbox and then she finds the answers for that and she will publish all the questions and answers in a post later on. The deadline for getting your question in is October 27th, that’s in two weeks. Then she will, within a week, publish that post. This is also for 5.9 when full-site editing comes in with early access there that you can get your questions answered, or also your fears, either way is fine.

Grzegorz Ziolkowski: I think we should also include a link to the previous installment and all the answers. I think there were about 50 questions answered. That was a lot. Maybe that would be also good to check. Maybe you already have answers for your questions and you don’t have to reach out again.

Birgit Pauii-Haack: Right. Yeah. I think the reason that Anne does it now at this stage is because the last one was at the beginning of the year. With the, I don’t know, six or seven plug-in releases that happened since then, quite a few things have changed, some irritations that were … because it was annoying or it was an interface that didn’t make sense, you had questions there, but that has been already fixed so the new questions certainly also in regards to the go/no go decision, I would wait until the post is out, to read through it and get … some of the answers might be in that summary post from the go/no go meeting that Hector will publish.

Then also from the FSE Outreach Program was the summary of the theme switching experience. It was a great read. There were quite a few theme developers who had some expectations there that also went through, some site owners went through the testing and had some surprises there. Channing Ritter on the design team did some nice mock-ups on how to make it a better experience. It might not be part of 5.9, but it’s definitely something that you who sent in or did the test have influenced how the next steps are going to work.

With that, get your questions in, think about the gallery block refactor and then live Q&A October 28th with the BuddyPress team members on converting classic widgets to blocks. This is the end of our show.

Grzegorz Ziolkowski: Yeah. I wanted to remind everyone that we are waiting for more reviews and that’s always great to hear from you what do you think about the show. You can also ping us on Twitter or send DMs with questions, with the feedback, whatever you’d like to talk about with us. My handle is GZIOLO and Birgit is BPH.

Birgit Pauii-Haack: Yes. As always, the show notes will be published on GutenbergTimes.com/podcast. If you have questions and suggestions you can also send them via email to changelog@gutenbergtimes.com. That’s changelong@gutenbergtimes.com. Well, it was good to see you. I’m glad you’re back from vacation and rested and ready to go. Thank you so much for being here and a big thank you for our listeners to stay with us so truthfully into another long episode. That’s it for me. Goodbye.

Grzegorz Ziolkowski: Thank you, Birgit. Thank you everyone for waiting four weeks for the next episode. See you in two weeks. We won’t do so long breaks for quite a while I hope. Goodbye.

Birgit Pauii-Haack: Goodbye.

In this episode, Birgit Pauli-Haack and Grzegorz (Greg) Ziolkowski discuss Planning, Scope and Team for WordPress 5.9, Roadmap for WooCommerce Blocks, Gutenberg 11.5 Release and more 

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Announcements

• WordPress 5.9 Planning Roundup by Josepha Haden Chomphosy
• Preliminary Road to 5.9 by Matias Ventura
• Peek into the WooCommerce Blocks Roadmap by Darren Either
• Live Q & A: Theme developer discussion going from classic to block-based Themes on October 7th, 16:00 UTC / 11 am Eastern

Gutenberg 11.5

• Make.Core: What’s new in Gutenberg 11.5? (16 September)
• WPTavern: Gutenberg 11.5 Adds Widget Grouping, Iterates on the Block Gap Feature, and Updates Nav Menus

What’s discussed and worked on

• The developer experience of WordPress presets by Andre Maniro
• Gallery Block Refactor: Features and functionality to test during CFT by Glen Davies
• Update on Navigation Block and Screen by Daniel Richards
• Discussion: How to provide backwards compatibility for custom fields on the existing Menus screen.

To get weekly updates via email, subscribe to our Weekend Edition.

Transcript

Birgit Pauli-Haack: Hello and welcome to our 52nd episode of the Gutenberg Changelog podcast. We’re recording this on September 16th, 2021. In today’s episode we will talk about the planning scope and team for WordPress 5.9, the roadmap for WooCommerce blocks and of course this week’s Gutenberg 11.5 release. 

I am Birgit Pauli-Haack, WordPress developer advocate and curator for Gutenberg Times. Again, I’m delighted to have with me on the show co-host Grzegorz, or Greg, Ziółkowski, JavaScript developer at Automattic and WordPress core contributor. Hi, Grzegorz, how are you doing today?

Grzegorz Ziolkowski: Hello, Birgit. I’m fine. I’m looking forward to my vacation that starts this weekend. I’m going to Greece. It’s first time since two years going abroad, so I am really excited but also not so happy about all the paperwork that is necessary to travel these days.

Birgit Pauli-Haack: Yeah, with all the COVID and vaccines and all that kind of thing, is that what you’re referring to with paperwork?

Grzegorz Ziolkowski: Yes. I have five forms to fill in for myself and my family. It’s strange. I guess you know that because you traveled from the States to Germany a few weeks back.

Birgit Pauli-Haack: Yeah. Yeah, we did. I scheduled my test that I have to do because the United States changed how they let people in. Now I have to have a test that’s not older than three days to get in although I’m vaccinated. It’s strange. It’s all strange.

Grzegorz Ziolkowski: Yeah, yeah. At least I don’t have to do any tests because I’m also vaccinated. That’s on the good side here.

Birgit Pauli-Haack: Yeah, on the way in we only needed to show our vaccination records and be done with it. On the way back it’s going to be both. 

Announcements

Anyway, we start our episode today with an announcement, with an announcement that Josepha Haden Chomphosy published the preliminary planning for WordPress 5.9. That’s supposed to be released December 14, 2021. Yes. It’s again just before the holidays and many sites will wait until January to update, but most sites it turns out update right away. We did this, had this exercise now for the last four years I think as far as I can remember.

Grzegorz Ziolkowski: Yes, even WordPress 5.0 was released on December 8th, 9th, I don’t remember exactly.

Birgit Pauli-Haack: 6th?

Grzegorz Ziolkowski: Maybe 3rd. It was in December and we had the same discussion, why it’s happening just before Christmas.

Birgit Pauli-Haack: Right. Yeah.

Grzegorz Ziolkowski: We are a worldwide project, it is not only Christmas for people, some people don’t even know what that is and they just have their own holidays.

Birgit Pauli-Haack: Yeah. The world does not stop when WordPress releases. We found that out with 5.0. The internet did not break and everything was going smoothly. I know there are a few US agencies that want to close down over Christmas and they just … yeah, I don’t think it’s a hard sell for them to say we do all the upgrades in January when we come back.

Grzegorz Ziolkowski: It’s perfectly fine.

Birgit Pauli-Haack: Yeah. I think so too, yeah. 

Again, as they did for 5.8, there will be a go/no-go decision for what will be in the release. That is scheduled to happen on October 12th. That’s about four weeks ago, in four weeks, sorry. That’s in four weeks. The feature freeze will be November 9th and then beta one is supposed to be ready for November 16th. People get cracking.

Grzegorz Ziolkowski: I think this series is a bit smaller in the scope, so I think that those dates make a lot of sense. I think the schedule for the 5.8 was a bit longer, especially between the feature freeze there was two weeks, but at the end of the day I don’t think that matters that much.

Birgit Pauli-Haack: Mostly not for Gutenberg because you patch back to the WordPress right away when you have bug fixes, yeah. 

The scope follows pretty much what Matías Ventura published earlier this month as the preliminary scope, so we will have blocks with intrinsic web design, then the navigation menus, interface, the user interface for the theme JSON. Theme JSON was introduced for theme developers for 5.8 and 5.9 will have the first version of the interface so users can also configure their themes and their block editor through that. There’s also refining of editing flows for block themes, a new default theme and additional design tools from the block editor. 

Then there are a few, Josepha called them hopefuls that might get in but they might not get in. Part of it is the pattern insertion and creation features so that you can submit patterns to the directory and then also insert them directly from the inserter. Right now you have to click the copy button and then copy/paste them. For 5.9 the meta team is aiming for insertion into the block editor. Then also unzip/rollback fail-safe, there’s a whole team working on that, more PHP unit tests and then improved compatibility with PHP 8.0 and 8.1.

Grzegorz Ziolkowski: The last three items aren’t related to the Gutenberg at all, but in some ways they improve the overall quality on WordPress core, so it’s maybe somehow related.

Birgit Pauli-Haack: Right. Right. Yeah. That’s that. The team is, release lead is again Matt Mullenweg with Josepha being the coordinator I think.

Grzegorz Ziolkowski: And the marketing team lead.

Birgit Pauli-Haack: And the marketing team lead, yeah, with that. Who else is there already in the posting?

Grzegorz Ziolkowski: I’ve seen that a few days before and the list was still missing a few names. I don’t know if it was updated since then.

Birgit Pauli-Haack: That was quite a while ago. Here we go. September third was it published. The team, to go back to that, release lead is Matt Mullenweg, marketing and comms is Josepha Haden, technical writer is Jonathan Bossenger and those are the leads that are filled in. I think the rest is going to come together when the meeting is, the board chair meeting later on. All right.

Grzegorz Ziolkowski: Yes. There’s still time to volunteer if some of our listeners want to jump in and help with the release, even as people who just watch the process and be ready for the next major release to take this leadership role.

Birgit Pauli-Haack: Yeah. Josepha asked for volunteers for triage lead and the release coordinators. If you don’t triage the bugs or the tickets that are supposed to go into 5.9 and see how they’re going you’re not going to get a release together. The coordinators are really important to get all the teams ready and working on this. I think there are a few volunteers already on the post in the comments section, but you can still throw your hat in the ring. That is about 5.9. I think the next date for that to watch is October 12th with the go/no-go because that will determine what exactly will come into the release from the navigation screen, new navigation blocks, see how far the gallery block, the new gallery block, refacted, is going. That’s still in the experiment. There are a few other things that might or might not come.

Grzegorz Ziolkowski: Yeah. I think the most important one would be the navigation block and the navigation screen. That’s quite a huge project that has evolved for quite a while.

Birgit Pauli-Haack: Yeah. I think over almost two years. It’s also, I just saw and we’ll see it in the updates later there are some discussions going on that our listeners might want to chime in in terms of backwards compatibility. 

We promised also a Woocommerce roadmap regarding blocks. Darren Either from the team put a nice blog post together with a lot of information about that, what is happening and what is in the near future or what is soon happening. The high priority is to build robust blocks for checkout and cart, the shopping cart, that not only gives the store and their customers a much better user experience but also allows for extensibility for third-party tools. The blocks will become the default way to handle checkout and carts soon. They were a little bit cagey with dates and something, but it’s definitely something to watch out for. They will also have, for the transition, fallbacks to shortcuts and the shortcuts for cards and checkout and then if the extension isn’t optimized for blocks.

Grzegorz Ziolkowski: Yeah. We will include also a link to the GitHub repository that contains all the blocks. There are a few of them. They are very advanced I must say. In the WordPress core we have a lot of blocks, however they are more on the side of editing content so the complexity comes only in the block editor, whereas Woo, they do something really impressive on the front-end so those blocks are interactive, they are optimized in terms of performance. There’s some really impressive work on their side. I’ve been watching that for quite a while, this is in the works for over two years now, and they are improving. Their initial implementation, it was mostly bringing back compatibility from shortcuts, that was transitioned from shortcuts to blocks. I remember the first prototype, it was creating the safe implementation, the short code and that was just not working. Their block editor experience was the change but the rest has stayed the same. They have evolved in so many ways.

They also shared some ways for the users and shop owners, the checkout flows are now much more smoother and that leads to better conversion rates, which is the whole goal of this concept. It’s also, now you have the ability to preview how cart and checkout looks from the editor. It sounds, in our context when we talk all the time about the block editor the preview is something you just take for granted, but here we are, it’s improvement in their workflows. They were also talking about the iterations they are doing and how they are trying to use InnerBlocks to structure or architect their blocks. That’s also a great way when they are presenting in the post how it empowers users to add their own integration pretty easily. You have now a checkout form and you can inject any type of blocks, you can add a heading in any place you want, you can add, I don’t know, an image. Whatever you like you can add there and also reorder items like change headings. It’s something that wasn’t possible before and this just opens new possibilities.

I’m also happy to see that this flow is now becoming the default one, because it was present but it was only for some extensions that were in Woocommerce store by default. Now it’s open also to plug-in others. That’s the biggest change.

Birgit Pauli-Haack: Yeah. I really like how Darren put the post together. He has many, many screenshots in there so you get really a good picture of what’s going to happen. Check it out. There’s also some work being done to prepare Woocommerce for the site editing feature that’s coming to 5.9 somehow, or 6.0. I think it was good for the Woocommerce team to wait until the block editor was a little bit more stable and had more features for extensibility. I’m glad that they found it now worthwhile to put it together and that the user experience is up to the quality that they wanted to. That will open up the signal also for other plug-in developers and also gives quite a nice set of example code that you can study if you are into reading code. As Greg said, we’re going to share not only post the show notes, but also the GitHub repository so you can check it out.

Now I have the last announcement, then we get to the release, our next live Q&A on the Gutenberg Times YouTube channel will be October 7 at 16:00 UTC, 11AM Eastern and 18:00 Central Europe Time. Sorry. Got all the times mixed up again. That is pretty much the story of this week for me. I go either way and I always go wrong, so I need to read it and pronounce it right. October 7, 16:00 UTC. We will discuss with experienced WordPress theme developers how they transition from building a classic theme to a block based theme and using theme JSON and also full site editing and the global styles as far as it’s already available. 

We will have as a guest Ellen Bauer. They published just recently their Aino theme. That is their block based theme and they have additional features in there that will cover that. Carolina Nymark, who’s on the themes team and also worked on the 2021 blocks, TT1 Blocks theme, that’s the block based 2021 product. She also has a site called full-site editing where she teaches full-site editing to theme developers. It’s great to have her on the show. Then the last one is Andres Norén who designed the 2020 default theme last year. He’s working on a new theme as we speak. Oh yeah, by the way, his theme Eksell is actually powering the Gutenberg Times site for, I don’t know, half a year now. I’m glad to have those two, Ellen and Carolina and Andres, on the show on October 7th.

Grzegorz Ziolkowski: Yeah, I think the line-up is just so great. I’m looking forward to this Q&A session. I think you did a great job convincing all the people who have so much experience building full site editing themes to be on the show.

Birgit Pauli-Haack: Yeah. I’m really happy that they all make the time to educate our community on this. Also not only to be on the show, to take the time, but also take the time and work through this because we all know that, if you are an early adopter, you basically do all the bug testing and quality assurance for the team, but you also have to invest a lot more time because of course documentation is not yet complete or changes. It’s a major undertaking and I’m glad that these three are coming to the show and telling us what they have found.

Grzegorz Ziolkowski: Yeah. There is also this bright side that you are on the bleeding edge of innovation and you are part of the process and you influence how this all shapes up.

Birgit Pauli-Haack: Absolutely.

Grzegorz Ziolkowski: I think it has more pros than cons.

Birgit Pauli-Haack: Oh, absolutely. Looking back, the three years, block editor, most of the early adopters have had, really a jump on the new technology and, yeah, were supported by big acquisitions or hired just right away because of their expertise that they have shown. It will be similar to theme developers that are early adopting these new features, even if it’s a little bit of a heartache or a headache, more a headache. It’s the cutting edge, indeed. Sometimes it’s the bleeding edge, you’re right.

Grzegorz Ziolkowski: Yeah. In this context, which makes me very happy, is that all three invited guests, they are in the community for quite a while and they seem to be aligned with the vision and they are adjusting their themes to be up-to-date, which is really impressive.

Birgit Pauli-Haack: Yeah, they totally get the vision. All three of them have published quite a bit of their learnings. Yes, I will share a few links in the show notes so you can check them out, but definitely sign up for, register for the live Q&A so you get also your questions answered.

What’s Released – Gutenberg 11.5

That brings us to the Gutenberg 11.5 release. We are, as of today there is not a final release yet because there’s some problems with the build sequence.

Grzegorz Ziolkowski: Yeah, it’s some turbulence like during the flight. I mean everything is ready, it’s just the process didn’t end up successfully and it’s more of the technical challenge of the release process itself than something is wrong. Yeah, I hope at the time when this podcast will be produced and ready then the release will be out, hopefully today. We said the date for recording before assuming that everything goes out on Wednesday as usual.

Birgit Pauli-Haack: Yeah, yeah. Well there was, the 11.5 release candidate is out or has been out for a week, so that’s what we are basing things on. There weren’t any changes on it from the features or the PRs, it’s just the build process.

Grzegorz Ziolkowski: Yes.

Features

Birgit Pauli-Haack: All right. We have a few new features. Do you want to talk us through it?

Grzegorz Ziolkowski: Yeah. Let’s start with the block support changes. In the previous episode we mentioned that gap block support feature. That was still an experiment. It was implemented on the team JSON side, but it was disabled by default. Now we have this support, there’s a UI for that. It’s pretty simple. In the dimensions panel, if I recall correctly, we have this control that allows you to change the gap between blocks. The name is still to be settled as far as I know because it has some, in the world of design there is something similar that might be confusing, but it was, you just change the numbers and it just increases the spacing between blocks. 

Related to that there is also a change in the group block. At the moment the group block has this layout option, layout control that allows you to change how it is presented. By default it just uses, every block in the group is in its own row, however this new feature is just integrated with the inserter that inserts a group block with every block in the same row. They are aligned, next to each other in one line, which is pretty nice for some complex designs. This is just, it was there in the group black, it’s just the new way of discovering this feature in the inserter, in the slash inserter when you are typing in the prompt in the editor.

Birgit Pauli-Haack: Yeah. It’s the first implementation of the Flex layout that I think Riad actually put the basis in for with 11.4. Now this is the first iteration where one block is actually using that. Of course there will be more. In the PR, if you want to follow up on that, there are some links back to the Flex layout.

Grzegorz Ziolkowski: Yeah, but I think the Flex layout we talked about one or two episodes before.

Enhancements

Birgit Pauli-Haack: Right. Yeah, but there was not a block that came with it out of the gate. It’s also part of what’s in 5.9 being the intrinsic design of pages. There will also be, another change is actually that the bug report form, which is one of the most important forms on the GitHub repo, has received some changes. The ones that are here in that release are more cosmetic but I wanted to point it out, the new template feature of GitHub is now used and they created a new bug report form to remind people of all the information that would be helpful if someone would take on an issue to fix it. I encountered quite a few issues where we needed to find out what actually the user used, what versions they are or what are the steps to reproduce it. Those are very important information. If we have to read minds what’s actually happening, we might not get to reproduce the error or the quirkiness that is and we have to go back and ask for further information. That is just delaying the time of the fixing. 

Following the form is now much easier and you don’t forget anything. I also wanted to point that out for those who are in the GitHub repo. Let us know, or let the team know when there is something to be fixed or not working right.

Grzegorz Ziolkowski: Yeah, that’s a nice change. Usually it sends up someone needs to ask for more details. After a few weeks, if there is no answer, the issue is closed, which isn’t something we really want. It is just the reality because we cannot reproduce the issue.

Birgit Pauli-Haack: Yeah. There’s no questioning the experience of the person who posts it, it’s just we need to see it, we need to be able to reproduce it to locate where the code change needs to happen to actually fix it. It’s just saving a lot of time and being very specific in what’s not working. Yeah. Yeah. Next the block library has got some new enhancements. One of them is using the block gap between column blocks, so that is another iteration of a new feature. Now you can….

Grzegorz Ziolkowski: Yeah, but this has only changed on the CSS level for now. As the rich table in the PR set, it’s a stop gap for block gap.

Birgit Pauli-Haack: Nice, yeah.

Grzegorz Ziolkowski: Fun with words. Yeah, but that’s the direction, I guess. Most of those layout related blocks should start using those design controls, elements, to make the experience more cohesive. That in general is the direction where it’s heading.

Birgit Pauli-Haack: Yeah. There was an article in the WP Tavern about what controls somebody could use, should use or should be having out of default and not changeable, who’s having control over themes? I think there were some misunderstandings. Matías went into the comments section and clarified a few things regarding that. If you come across an article go into the comments and see what Matías has to say as well. Matías Ventura, the spark of Gutenberg, just to reiterate that. 

The video block got an enhancement to use the existing video poster image on insert. The video block has become quite powerful and quite flexible. There are six or seven different settings that you can have in the sidebar that you can switch on and off. This issue or feature is now that, once you assign a poster image to the video the first time, it remembers it. When you embed it into a page or post again, because it’s in a different context or it’s in a series of videos or something like that, you don’t have to assign the poster image again, it will remember it. It’s all about the effort to streamline the content creator’s workflow.

Grzegorz Ziolkowski: There is also a change in the query pagination next and previous blocks. They are very low level blocks that construct the query pagination, which is part of Query Loop Block, but it shows how flexible the InnerBlocks paradigm is. There is now an arrow attribute that syncs next/previous block arrows.

Birgit Pauli-Haack: Yeah. It was there before, but it wasn’t really good, visible in the sidebar or for people to check on. Now they are real settings that are big buttons that you can click so it changes. You were always able to change the text of your pagination from next to previous page or something else. You say low level, but it’s also quite an important block because, when you get to full-site editing and you write your own templates and you have a list of block posts from a category or from a tag and you have multiple pages of those, you want that query pagination to be available and also be usable. It’s quite interesting, especially for publishers that have online magazines or so.

Grzegorz Ziolkowski: There’s also a change in the post outer block. You’ve got duotone support. At first I was surprised seeing that, but there is an avatar or the image of the user which got this feature, which is, again, a good to have way to apply similar effects to all images on your page.

Birgit Pauli-Haack: Yeah, or just make it blend in more into the overall design because it’s a small avatar. To normalize it amongst all the others that you have on your site. There’s also, the wide alignment control now is only available if the theme provides the layout wide size setting. I think that’s a change to, so you can adjust that setting through the theme JSON again and not have to … yeah, you don’t have to do it through the functions PHP now.

Grzegorz Ziolkowski: Yeah. I think in the past you would enable full and wide at once, so it just gives you more grand control over those features.

Birgit Pauli-Haack: Yeah, you can now decide, okay, I only want the wide but not the full, or you only want the full but not the wide kind of thing. Yeah. That’s a good point. Yeah. Thank you.

Grzegorz Ziolkowski: There is also a quite important change for the navigation screen that’s being in the works and preparing for the final release. They are the undo and redo buttons in the editors, it’s the same feature that you have for the post content editor in the headers, it was just missing there. Definitely an important change.

Birgit Pauli-Haack: Oh yeah, yeah. All in the streaming of the content creator’s workflow. Streamlining, yeah.

Grzegorz Ziolkowski: Yeah. It’s also related to the keyboard shortcuts. Some of you probably use command Z and command X. No.

Birgit Pauli-Haack: The redo? I don’t know. I never redo, I only do undo.

Grzegorz Ziolkowski: Yeah, command Z is the most popular one because you want to go back.

Birgit Pauli-Haack: Yeah, I need to find out what the keyboard….

Grzegorz Ziolkowski: Yeah, check this out in the Gutenberg editor when you go to the header and there is three dots, menu, then you have keyboard shortcuts as one of the options. That’s the simplest way to check all the shortcuts and learn new if you don’t know them yet.

Birgit Pauli-Haack: Yeah. Yeah. There were other changes to the navigation screen. I just wanted to remind our listeners that it’s not yet in the plug-in per se, it’s still in experimentation so you need to go to the Gutenberg menu and the WP admin experiments section and then check the navigation screen so you can test it for yourself and try and help us get it tested and do a lot of bug fixes, bug reports there. There is also a change, the REST API team is working on creating the end points for the navigation editor for the menu. At the moment I think it’s all through the admin Ajax. The final version will use the REST API like any other places in the block editor.

Yeah, speaking of screens there’s a widget editor. It now received a widget group block for the widget screen which is quite nice now to follow the idea of classic widgets where you have a heading and then a widget. You can change the title of it and now you can add the heading and the widget into a group and then get it a little bit more contained and keep it together, style them and have a background of it and all that. It’s more what the user was accustomed to when dealing with widgets, the widget group helps with that.

Grzegorz Ziolkowski: Yeah. I would say it’s more to bridge the experience for everyone familiar with the widgets old screen. It seems like a good change in that regard.

Birgit Pauli-Haack: I like it, yes.

Grzegorz Ziolkowski: I don’t know how it works technically. When you insert a widget does it wrap it with the group out of the box now?

Birgit Pauli-Haack: Yeah. I think you can highlight, like you do in the post editor, you highlight the things that you want to group and then you transform it into a widget group.

Grzegorz Ziolkowski: Okay.

Birgit Pauli-Haack: Yeah. The widget group has all the group block settings as well in the sidebar. All right. 

There are some enhancements for the global styles or fixes. Now you are able to disable text and background colors via the theme JSON. I thought you were doing that before, but maybe it didn’t work.

Grzegorz Ziolkowski: Yeah. As far as I know it’s related to some mock-ups that were presented. The idea is that you would be able to disable almost all the color customizations one by one. Maybe that worked only for the link before. There’s a few.

Birgit Pauli-Haack: Yeah, yeah. I think they changed a little bit the logic on how sub-components are shown in the color panel. Link color is enabled when the block supports it, the theme supports it, it’s launched by default. Yeah, it needs to be switched on or even the presets contain some solid value or the custom colors are used. Presets have some color. You need some color presets and the same is true for the text color, the background color and the gradients, although the gradients, you need to have either the custom colors in there or it’s empty, it’s disabled. For both the link color, text color and background color the block needs to support it, the theme needs to be supported and the defaults are different for each of them. Then the presets need to contain values for it. That’s quite a good set of logic there. 

Yeah, they streamlined all that logic and then now they are making the global styles available for all themes. That’s in PR 34334. I like that number, 34334. The preset classes for colors and font sizes were in the block library and they are now part of the global styles sheet that’s loaded later. That’s a change in the style sheets that are included by default. Then the preset classes look like the preset dev class. There are some changes. If you need to target those classes you might want to look at this again here. There is a post.

Grzegorz Ziolkowski: I just shared a link with you from André is who one of the lead developers on the global styles project. He explains how the experience of using WordPress presets looked before team JSON and how it’s changed, how it got simplified. That would be a good read in this context. Also in the same PR that we are talking about, this 34, 334, there is a dev note sketched already that will be published later in the release process of WordPress 5.9. It also just covers what you, Birgit, just said. It’s pretty complex, so I guess that’s something that you should process at the time of learning how to use those presets.

Birgit Pauli-Haack: Yeah. Then the media placeholder experienced another change. For now you can create a URL, if you wanted to add an image through the URL of the image you only could use absolute links. It needed to start with HTTP because it was a URL input type on the placeholder and that has changed to a text input type in some verification. Also now you can actually use local URLs. If you know the URL of your image that you want to add to a gallery or to a post, you can now use local URLs and don’t have to put in the domains, which is actually good when you move the site or move the site to a different domain, or you have just an image that’s somewhere in a different place than on the WP content uploads directory. That’s definitely a good thing that’s ….

Grzegorz Ziolkowski: Yeah, I personally was surprised that when you are using an input HTML tag, when you set the tag to URL it expects the full URL. That was the original issue that caused….

Birgit Pauli-Haack: Right. Caused this change, yeah.

Grzegorz Ziolkowski: … this change. Yes.

Birgit Pauli-Haack: Yeah. I think it was only Firefox, but the browser developers are really tightening up the browsing experience. That was a part of their verification so you wouldn’t be able to add it to that.

Grzegorz Ziolkowski: There is also a quite important change for team developers. Now there are default editor styles that are applied to teams without team JSON and without editor styles. Sounds complex, but it’s just something that is even considered for the minor WordPress edits like 5.8 to now. It just adds some basic styles to all sides just to ensure that the experience is better for the block editor in particular.

Birgit Pauli-Haack: Yeah. This plays well out of the box even if the theme editor, the theme developer has not updated a style sheet for the theme. I think that’s a good place for the adoption of the block editor that we are all working towards, that more and more people adopt that, especially in the themes. If it’s nice looking out of the box and they don’t have to go back to the theme developer to style a column or to style images or the widened and full width or the media and text, that there are quirks, I think that’s a good decision now that theme developers can control it through theme JSON and their own editor styles. They can just the default styles. Yeah, that’s good work there.

New APIs

Ah, here it is. Of course, every time, and you hear me say this on this podcast quite a bit, every time you have a new feature you also need to provide the opt out of the feature. Here it is, allow themes with theme JSON to opt out of the block gap styles. There is a mechanism there how you do this.

Grzegorz Ziolkowski: Yeah, I think it’s also related to the fact that it was opt in add styles, so now that’s probably, it has become a default so now you need to have a way to disable that if you don’t like that.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: Now we moved also to the new API sections with this item on the list.

Birgit Pauli-Haack: Oh, yeah. Yeah. We have so many sections in this release note.

Grzegorz Ziolkowski: Yes, it’s very long this time.

Birgit Pauli-Haack: It’s very nice, yeah, but it’s also … it’s pretty much in the settings of your theme JSON. It’s settings, spacing, block gap, null. That’s how you opt out of that.

Grzegorz Ziolkowski: Quite a common way for all those global style related features. That’s the only item in the new API. Now it’s time for bug fixes. As usual, the list is very long.

Bug Fixes

Birgit Pauli-Haack: There seem to be not really big boo-boos that we have fixed. You find in the list under the block library fixes for the gallery block. I wanted to point out that those are referring to the gallery Refactor. This is the newly created gallery block. It’s still an experiment in the Gutenberg plug-in. If you want to do the navigation screen and test the new gallery block, you have to enable them also on the experiments screen of your Gutenberg plug-in.

Grzegorz Ziolkowski: You can always test the new gallery block on the new navigation screen and that’s two things at once tested properly.

Birgit Pauli-Haack: But don’t do this in production. It’s called experiment for a reason. Yeah.

Grzegorz Ziolkowski: I mean for new websites I wouldn’t worry at all about enabling the new gallery factor block. I think the fact that it’s in experiment still is only because of backward compatibility. 

Birgit Pauli-Haack: Yeah. I would not say only. It’s a big part. It’s a big part and it’s also part of the headaches that they have, but it’s also … if you want to switch it on and you need a list of test instructions, I’ll link in the show notes to the GitHub issue 29882, 29882, because there’s a list of 40 tests that you can do, everything that you can do with a gallery block, you should do. We are preparing, on the developer relations team we are preparing an official call for testing that would hopefully get more people involved. We will also reach out to the plug-in developers to make sure they know about the new plug-in, new gallery block and update their features. 

I know that the developer team has already tested the full plug-ins like CoBlocks and Jetpack blocks gallery blocks, but there are many, many more that need to be tested. If you have questions about that, feel free to DM me. Send me a direct message on WordPress Slack at BPH. Again, the test instructions that are right now out, that also the developers use, is the issue 29882, 29882. Of course we’ll link in the show notes. I just want to make sure that everybody knows this is coming and it’s cool. 

What’s the Refactor? We talked about it before, but we always have new listeners. The gallery block as it is now is just a feature parity with the old classic editor gallery block where you have a list of images and then they’re all pulled in, but you’re not able to do much with those images except for moving them. You’re not able to adopt styles that are only for one image. The new gallery block is now a collection of single image blocks with which come all the features that you can do from an image block like obviously duotone, be it applying styles, applying backgrounds, adding a different link to each image and all these nice features. It’s a much richer experience for editors and you have much more freedom for it. It needs quite a few testings. Because of that switch of the InnerBlocks the extensions will change as well. I tested it about two months ago and I found that the gallery plug-ins that I used were working fine, but I’m not using all of the gallery blocks. It might have changed because there was some development on that. Yes.

Grzegorz Ziolkowski: Yeah, definitely the best part here is that now it doesn’t matter whether you are changing a dual image not a standalone block or it’s part of the gallery block, you have everything unified, the same controls, the same capabilities. It’s pretty cool to see that working this way.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: Also all the extensions that you have for the image block are now also in the gallery block which is cool.

Birgit Pauli-Haack: Yeah. Cool is the right word.

Grzegorz Ziolkowski: Yeah. We are still on bug fixes. One of the changes that landed is for the writing flow, it’s in the block editor now. When you merge two blocks together the current position of the cursor is put in a better place than before. I don’t know what exactly was the issue, but it’s very annoying when you need to use arrows to move the cursor to the proper position when you change this type of modification, like when you have two paragraphs or similar text-related box.

Experiments

Birgit Pauli-Haack: Yeah. Then we get to the experiments but we have been talking about experiments before. Now you are able to put in the navigation block the site title as well as the logo and that makes it much nicer to assemble a header for a site when you use full site editing with that. It’s now really easy to have a logo and the site title and then the menu all in one line. Try it out and see if that works for you.

Grzegorz Ziolkowski: Yeah. I’m looking forward to see how the gallery block will evolve because the same feature that you have now in the navigation block could work there as well. I can imagine that you could inject a site logo also inside the gallery because why not, that would be also in some ways … you could have some designs where that would work. In general, the idea of InnerBlocks, this is what we really want because it just opens so many possibilities for designs that weren’t possible before. You had to hard code that in HTML in your PHP files and now it’s at your site, you just need to move some blocks around, insert something and then it just aligns nicely.

Birgit Pauli-Haack: It’s a good point, because now you could have, a three by three grid of images at the center could actually be a poem or something like that that is not an image but a text. The InnerBlocks really open up quite a few more possibilities, especially on the gallery block. That’s why the Refactor is so important and also that’s why it takes a little longer to merge into the plug-in because there are some things that need to be changed for backwards compatibility.

We also get, the social links now use the Flex layout. That means you can arrange the social links either vertically or horizontally I think and also have the block gap in between so you can have the distances also controlled. All kinds of different things are available now in the social links block.

Grzegorz Ziolkowski: Those design tools are really powerful. I’m looking forward to having them all stable and released as part of WordPress 5.9. I hope it happens.

Birgit Pauli-Haack: We need testers. We need people who test things. The more bugs you find, the better the release will be in 5.9.

Documentation

Grzegorz Ziolkowski: Now we are at the documentation. This section, do you see something that is a bigger one? There is a lot of typos that were fixed or some tooling that was improved like ESLint, something that is more in general for the Gutenberg project. Some improvements to bring the documentation up to date, like replacing, we select calls from WordPress data package to use, a react hook which is called useSelect.

Birgit Pauli-Haack: Yeah. Good point.

Grzegorz Ziolkowski: Yeah. I guess there isn’t anything very important that we have to mention today. Again, there’s a code quality. This section, it’s very long.

Code Quality

Birgit Pauli-Haack: But that’s your favorite section, right?

Grzegorz Ziolkowski: Yeah, I mean it depends what’s inside it. There are some changes to bring code up to date, similar to what I said about using most recent APIs that were developed and some errors which is … for those who don’t know there are some special validations for the code quality that helps us catch some bugs. Whenever they show up or the tools get updated and they are better at catching those bugs we try to fix this as soon as possible.

Birgit Pauli-Haack: Excellent. Yes.

Grzegorz Ziolkowski: There’s a lot of refactoring that doesn’t have any impact on the user interface but helps for the longer, in terms of long term support for the project.

Various

Birgit Pauli-Haack: No, I get it. That brings us also to my favorite section, the various section. There’s one item in there that I wanted to point out, that’s the vertical heading levels menu. When you insert a heading into the block editor, you get a list of levels, H2, H3, H4, H5, H6. Now you can have, the heading can now be vertical. I think it’s by default vertical now instead of horizontal as it was before so it only covers a certain different amount of content when you have the toolbar right next to the block. It’s quite nice to look at that. You just go with the mouse pointer up and down instead of left and right. That was a bit ….

Grzegorz Ziolkowski: Yeah. I think initially in the first release it was also vertical, but then, at that point, there were only H2, H3 and H4 options in the menu so it was short and it was quite easy to … on the visual level it would look better, but then you had six options like right now and there was also text for each of them. It just was too much to see H1 and heading one, this is why those iterations were applied now.

Birgit Pauli-Haack: Yeah. It also came from the query block, when you have other, not only the heading block but also the post title block or the archive title, then the context of that menu was a little bit different and you were covering up too much of that query block that you tried to template things.

Grzegorz Ziolkowski: Right, right.

Birgit Pauli-Haack: Yeah. That was the other part. The heading is now multi-usage so to speak and not just a mere heading block. Yeah.

Grzegorz Ziolkowski: Yeah. The last item is a very important one. I hope that’s not the case for our listeners, but if you are using WordPress 5.6 then the Gutenberg plug-in won’t be supported anymore in that version. You need to have at least WordPress 5.7 to be able to still use the Gutenberg plug-in.

Birgit Pauli-Haack: To use the newer version of the Gutenberg plug-in.

Grzegorz Ziolkowski: In general we recommend using the latest one because that makes everything so much easier, but we also know that, when there’s a new major version, some sites cannot be immediately updated. We wait for one more major release, but in the future we consider that this period of time would be shorter, maybe two months, three months, something like that. It also depends on the major release cycles. Now this year we have only three major releases. The plan initially was to have four. That wouldn’t be that much of an issue. With three releases it’s just too much time when we have to support code that is no longer necessary in the plug-in.

Birgit Pauli-Haack: Yeah. To make this specific, if you are on 5.6, only Gutenberg plug-in until 11.4 will work with your WordPress. You can use the plug-in but you won’t get the updates after, unless you upgrade to the next version, 5.7, in your WordPress. I don’t know if I made it clearer.

Grzegorz Ziolkowski: Yeah. I don’t know, I don’t want to test that, but ….

Birgit Pauli-Haack: Well if you have any questions, yeah.

Grzegorz Ziolkowski: Encourage everyone to stay on the latest major version which is 5.8.

Birgit Pauli-Haack: Yes, 5.8.1, yes. All right. 

This was the Gutenberg 11.5 Changelog. It’s quite an interesting mix on that, but most of them are design tools and theme related and some of them are related to some blocks and also for the content creator flows. It’s a nice release again with a lot of people bringing … we have quite a few new contributors now on the Gutenberg repository which is a nice change.

What’s in Active Development or Discussed

Now we are coming to the section of what’s in active development or discussed. Because it’s so … the next big thing that comes into WordPress is the navigation block and screen, or that’s what everybody’s hoping. Daniel Richards posted an update on what are they working on. Of course it’s slow progressing and they’re migrating the navigation editor, I mentioned it before, to the REST API. Those changes have been merged and it’s all updating now. Lots of UI changes that are working now, the top bar, the editor top bar being updated, the main block inserter added and then fixes for the block styles. 

Now I can put the important part, good discussion is on the way, he writes, on how to provide backwards compatibility for custom fields on existing menu screens. That covers the part where now the plug-in advance custom fields has a section where you can augment the menu, in the classic menu, with additional fields and additional information. The discussion on that issue is how far should that … the team works under the assumption that it needs to all be backwards compatible and it’s the issue … if you want to follow up and not go to the show notes, 31551 is the issue with the navigation screen menu items custom CF options. There’s a discussion, Elliot Condon, the lead developer on the plug-in, is in the discussion as well, so help make this, we need you to also chime in.

Then what they’re working on next is that they want to have … in the current editor, menu editor you can say, “Okay, give me all the posts or all the pages.” You’re bulk adding links to your menu, that’s still in the works for the navigation screen, the block-based navigation screen and also to have theme JSON controls to configure the navigation block further. That still is in the works.

Grzegorz Ziolkowski: It sounds like a lot of work to me.

Birgit Pauli-Haack: Yeah. Those all … yeah.

Grzegorz Ziolkowski: Yeah. I’m sure all of those tasks are in progress, however to take them to the finish line is going to be quite a huge challenge because we have four weeks between go/no-go dates, so it really depends. Also I could envision that the new navigation block would be included in core but maybe not the navigation screen. There is a lot of ways to proceed in this regard. Let’s see how it works. I hope that the screen will be enabled. Opt in is the only option they consider, similar to the widget screen, that you need to enable yourself.

Birgit Pauli-Haack: Yeah. Yeah. I think so, especially with the backwards compatibility. These menu plug-ins that are out there, it’s not only the advanced custom fields plug-in that modified the menu pieces or menu entity or the link entity in the menu screen or menus, there were other plug-ins, albeit the Mega Menus, albeit some others. They need to be backwards compatible. Oh, the other part was naming menus. When we build sites we sometimes have a footer menu, a header menu and a main menu and we need to name them and make them available to pull in into any other screens there and make them available for full-site editing as well. There are a few things that this powerful feature in classic WordPress, it’s hard to reproduce it and be as flexible as it is now.

Grzegorz Ziolkowski: Okay. That’s all about the announcement. I just wanted to remind that I’m taking time off. Unfortunately that coincides with the next Gutenberg release. Together with Birgit we decided to skip recording in two weeks. We cover two Gutenberg plug-in releases in one episode and that should be available for you in four weeks.

Birgit Pauli-Haack: That’s right. We will take a break from the podcast. I hope you are subscribed to the newsletter of the Gutenberg Times so you can still get some updates in between, or just visit the website in between. 

Before the end of the show I want to remind you that there is actually a live Q&A coming up on October 7 at 16 UTC, 11 Eastern, when we discuss the building, going from building classic themes to building block based themes with Ellen Bauer, Carolina Nymark and Andres Norén. We will entertain you there and answer all your questions. I’m thinking I will ask them to actually stay for, instead of 60 minutes to 90 minutes, because we will have some demos and we want to make sure that we answer all your questions.

There will be a link on the homepage of the Gutenberg Times and of course we will have it in the show notes. 

As always, the show notes will be published on GutenbergTimes.com/podcast. This is episode 52. If you have questions or suggestions or news you want us to include, send them to Changelog@GutenbergTimes.com. That’s Changelog@GutenbergTimes.com.

Grzegorz Ziolkowski: I just wanted to remind that you also can reach out to us on Twitter. My handle is G-Z-I-O-L-O. You, Brigit, is B-P-H, right?

Birgit Pauli-Haack: Right. Right. Well I say thank you, Greg, Grzegorz, it was again a great pleasure talking to you. I wish you a wonderful vacation in Greece. Until the next time.

Grzegorz Ziolkowski: Thank you, Birgit and our listeners for being with us. You, Birgit, I wish you a pleasant flight back home. See you all in four weeks.

Birgit Pauli-Haack: All right. That’s it. Thanks for listening. Goodbye. 

Birgit Pauli-Haack and Grzegorz (Greg) Ziolkowski discuss Automattic becoming a sponsor of Gutenberg Times and Gutenberg Changelog, Classic Editor, Frontity, Theme.json, the Gutenberg 11.4 Release and more.

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Announcements

• Birgit Pauli-Haack joins Automattic as Developer Advocate (Twitter)
• Frontity announced they joined Automattic
• Automattic Acquires Frontity, Founders to Work Full-Time on Gutenberg (WordPress Tavern)
• An Update on the Classic Editor Plugin
• WordPress Classic Editor Support Extended for at Least Another Year

Community Contributions

• Frost theme by Brian Gardner
• Aino theme by Ellen Bauer and Manual Esposito,
• Tell me about Blocks podcast episode 2 w/ Rich Tabor, hosted by Michael Schneider

What’s Released

WordPress 5.8.1 RC, final release September 8th, 2021

Gutenberg 11.4

• What’s new in Gutenberg 11.4? (1 September)
• Gutenberg 11.4 Overhauls Galleries, Adds Axial Padding for Buttons, and Lays Groundwork for Global Spacing
• Gallery Block Refactor Dev Note
• Core Handbook / Glossary

What’s in active development or discussed?

The theme.json horizon by Matias Ventura

Discussion on Twitter and beyond: Building Blocks with JavaScript and PHP

• Mark Jaquith (Twitter)
• Riad Benguella (Twitter)
• Lars Gersmann (Twitter)
• Pascal Bichler (on Twitter)

• POC: Blocky (GitHub)
• Exploring custom blocks from a PHP-centric developer UX point of view by Helen Hou-Sandi
• A World Where (Some) Block Development Is Merely a Templating System With No Build Process?

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 51st episode of the Gutenberg Changelog podcast. In today’s episode we’ll talk about Automattic becoming a sponsor of Gutenberg Times and the Changelog, theme.json, Gutenberg 11.4 release and a lot more. 

I am Birgit Pauli-Haack, curator of the Gutenberg Times, and I’m here with my co-host, Grzegorz Ziolkowski, JavaScript developer at Automattic and WordPress core contributor. Hi, Grzegorz, how are you today?

Grzegorz Ziolkowski: I still feel energized and extremely excited after all the big news shared this Monday in the context of the Gutenberg project. Maybe you should speak first. How have you been lately? Has anything interesting happened?

Birgit Pauli-Haack: Yeah. That’s funny. Yeah, it’s been a wonderful week, though. 

Announcements

I have fabulous news and some of our Gutenberg Times subscribers already know that. People who follow me on Twitter know this, but I’m thrilled to announce that on Monday, August 30th, I started as a developer advocate at Automattic. Grzegorz and I have been co-workers for five days now.

Grzegorz Ziolkowski: Yay! Congratulations. I can’t think of anyone else who fits better for this role. 

Birgit Pauli-Haack: Oh, thank you. You’re too kind. Like many people who responded and shared on Twitter, many are podcast listeners, as I said, and I was overwhelmed by all the kindness in the WordPress community. Thank you to everyone. Sometimes Twitter really shares its love and I took it all in. Well, it was overwhelming, and a lot of people have reached out. And so thank you. 

So, Automattic is now main sponsor of the Gutenberg Times, the Changelog podcast, and our live Q&As and my work working on it. 

Being part of the WordPress developer relations team feels like coming home to me. And I’m deeply grateful for Automattic for offering me that position. The best is yet to come for Gutenberg and publishing with blocks. I’m elated to be part of an astonishing team that takes the worldwide WordPress community to the next journey.

Grzegorz Ziolkowski: Yes, so I’m really glad that you will be able to dedicate 130% of your work time to help people to get to their next level when hacking with Gutenberg. And I’m highly impressed with what you were able to achieve as a volunteer, in addition to other duties that help you to pay the bills. So I can also imagine how much of an impact it will make on the community now. I said there is more news to share. What else has happened?

Birgit Pauli-Haack: Well, on Monday, Frontity announced they joined Automattic too. So Grzegorz, can you describe what Frontity framework is, and how this fits into the Gutenberg roadmap?

Grzegorz Ziolkowski: So for those who don’t know Frontity, it’s a … how they call it? Server-side dynamic framework for headless WordPress sites and blocks. So in some ways, it’s similar to Gatsby for those who know the space of headless or decoupled WordPress. The biggest difference is that Gatsby, it’s a static site generator, which means it generates HTML files, JavaScript files, and it just runs on your server, so you don’t need Node.js server, whereas Frontity uses Node.js. 

So it allows you to create a sort of front-end theme that is for WordPress, and that’s run in Node.js. And it uses the content you create including the content with blocks, and it adds some additional functionality to it like nice page transitions. It adds some dynamic features like for images and there are plugins that can apply some changes to that so it’s really interesting. And the best thing here is that Frontity as a framework, in their announcement post, they said that they are planning to pivot their efforts to WordPress core.

Birgit Pauli-Haack: Yes, but so Frontity runs in ReactJS too, right? Not only Node.js but ReactJS, okay.

Grzegorz Ziolkowski: Yes.

Birgit Pauli-Haack: Yeah, no, that’s awesome. So Matias Ventura, he’s a member the developer experience team at Automattic and lead architect at the WordPress Gutenberg project. He wrote that, “I’m really impressed with the effort and care the Frontity team has put into the work over the past few years. We are at a cusp of exciting new opportunities for Gutenberg and I cannot wait to start collaborating together on making the experience of developing with it a joy to behold.” So that sounds like a great pivot for Frontity to just be a framework to actually bring everything into Gutenberg, as you said, yeah.

Grzegorz Ziolkowski: Yeah. So I see it more like they bring their experience. And they will try to replicate some of great ideas they had in the Frontity framework, and find ways to achieve the same goals inside WordPress core, which would benefit so much bigger audience. I’m thinking about developers, but also for users on the WordPress. And I’m also beyond excited about the plan they outlined in the post.

So they said that, “Automattic offered to sponsor our team to work directly on the WordPress open-source project, and in particular, to contribute our expertise in developer experience, front-end tooling, performance and user experience to the WordPress core itself.” So this is exactly what I just said. And actually for me, who is focused around experience with building blocks, it’s really great how this expertise can bring the project to the next level, and our efforts to making full-site editing so performant and optimized for bringing only the assets you need, bringing what’s missing the most now is that the block editors is focused on the WP Admin but on the front-end side, we need more interactivity and more better experience of global sites, the first step but Frontity bringing their own experience can fill the gaps in other areas.

Birgit Pauli-Haack: Yeah, yeah. And I have seen that there are also developer relations people with Frontity, so I’m glad we will definitely be able to learn from them. What I missed early on was talking about the developer relations team. It’s actually now a band of five with Anne McCarthy and Daisy Olsen being there for almost over a year just wrangling the whole thing by themselves. And then Tara King was joined, and then Ryan Welcher and myself, so we are band of five. 

And I think there are two people coming away from Frontity, but I’m not quite sure yet. We haven’t even as a team yet have … because we’re all new. So we’re all in support rotation right now at Automattic and at the WordPress forums. So I think next week is going to be the bigger week where we’ll co-organize everything a bit better. Yeah, so but there’s exciting news for the future of Gutenberg and there’s also some good news for some other site owners, agencies and developers. The WordPress core committers officially extended the support for the Classic Editor plugin all through 2022. 

This gives everyone another year to migrate to blocks. Josepha Haden Chomphosy wrote, “Still, if you have been putting off using the Block Editor, this is an excellent time to give it another shot. Since it first appeared in 2018, hundreds of WordPress contributors have made a lot of updates based on user feedback. And you will be pleasantly surprised how far it’s come.” Of course, most of our listeners know that, about all the huge changes because we haven’t been shutting up about them. But it’s definitely an interesting year now for the Gutenberg project and migrating to Gutenberg because all of a sudden, it has a much better picture of the final version or the final vision. Not the version, it will never be done, but yeah, final vision. 

And also, now that quite a few APIs are settled, there is a great creativity amongst developers and we’re going to talk about it a little later in the show. But on the WordPress Tavern, Justin Tadlock also interviewed core committer, Jonathan Desrosiers. And he had some more details on their approach towards maintaining the plugin beyond 2022. So we will share that link in the show notes like we will all the other links in our Announcement section here, that’s now quite big. Yes. Anything to comment there, Grzegorz?

Grzegorz Ziolkowski: Yeah, I mean I wouldn’t be surprised if there were listeners of this podcast that still use the Classic Block plugin. And this is mostly because you might have a site that is no longer developed and it just doesn’t make too much sense take therefore to migrate that to blocks. So there are always use cases like that. So I’m really happy that the support is extended. But eventually, I think that it would be good to say that it’s only a plugin. And if you want to, just keep it installed, and the community should take over the effort, because it’s a lot of work to keep it up to date. And it’s not something that we want to have forever.

Birgit Pauli-Haack: Well, and funny, you mentioned that. I have quite a few sites, and it might surprise everybody to hear that, quite a few sites that are actually on Classic Editor. We have taken them over about two years ago or some of them three years ago. And the theme is that Franken theme, like where all the plugin functionalities within the theme. And then there are plugin that we could build and separate out. But the theme, it does the custom post types, and then relies heavily on advanced custom fields.

Even they have a blocks kind of building thing, there is no migration work done between former advanced custom field sites to migrating to blocks. That’s one thing. I own this one site where there are thousands and thousands of posts on them that there’s no bulk, reliable way to migrate those over. One site is so old, or that was designed in 2012. So it’s not even responsive now, or the responsiveness is kind of really clunky, but the content creator has used a lot of HTML tags within his postings. And it’s an elaborate layout. Making that into Gutenberg blocks is very, very, very hard. But those are the projects I will be handling sooner or later.

But yeah, there is a good reason to stay in Classic Editor for another year or two or three. But yeah, you’re right. Once in a while, it’s probably needs to be taken over by the community. And there are actually a few plugins already in the repository that go a little bit further than the Classic Editor. One of them is by John Starr, and it says Disable Gutenberg. And it also covers the classic widgets section from that. So yeah, just a little side note, yeah.

Grzegorz Ziolkowski: One question. 

Birgit Pauli-Haack: Mm-hmm.

Grzegorz Ziolkowski: So why don’t you stop upgrading WordPress, like keep it on 4.9 and just take the security updates? Isn’t that the best option to feel safe about the future of the site?

Birgit Pauli-Haack: Well, I think sooner or later that most people would actually appreciate Gutenberg as a user interface and getting block patterns rather than a section of, I don’t know, two pages of ACF Meta Boxes and they don’t have a clue how it looks, as long as they don’t hit preview and see how it looks on the front-end. And so, I think the advantages of using Gutenberg for even a big site that has a lot of layouts would be even better. So a migration sooner or later needs to happen. 

Also, not only for that, but also we have new editors come online, all the knowledge is kind of outdated, or they see it on other sites. And that’s a WordPress skill now, to work with Gutenberg. And now they come to a publication that doesn’t use them, it’s anachronistic. It takes the fun out of it, pretty much. It takes the fun out of me when I need to use the Classic Editor because, “Oh, it would be so much easier to do it in Gutenberg and we can do so many more things.” So sooner or later, we need to think about migrating these large sites.

Grzegorz Ziolkowski: Yeah. So I guess the reason is that you want to stay with the latest WordPress to get all the updates and make sure that the plugins are still compatible, and they also get updates, right?

Birgit Pauli-Haack: Right.

Grzegorz Ziolkowski: Yeah, I mean, it makes a lot of sense. I’m just mostly curious. 

Birgit Pauli-Haack: Yeah, no, I totally get it. Yeah. Especially that-

Grzegorz Ziolkowski: Yeah, I guess we can move on. 

Birgit Pauli-Haack: … I think we have to otherwise we’re getting a little long, yeah.

Community Contributions

Grzegorz Ziolkowski: We can move on to Community Contribution. So I only wanted to highlight two full-site editing themes that I found out about recently. One of them is called Frost and the other one is Aino, I don’t know if I pronounced that right. And they are very interesting. And we’ll leave the links in the show notes as usual. And one of those themes had a very interesting idea because it was like a master theme that had a collection of block patterns. 

So it’s like you have many different target groups in one theme, but you can select that through pattern, which is pretty interesting idea. It’s like a sort of block patterns directory inside the theme, which is something new. I like those explorations in the community that happen right now with all the new possibilities. So Aino is also targeting e-commerce websites. So that’s also quite fine. 

Birgit Pauli-Haack: Yeah. So Aino has been built by Ellen Bauer and Manuel Esposito, I think, the theme developer shop out of New Zealand. And Ellen Bauer was already part of our live Q&As talking about full-site editing early on. And Frost WP is the full name of the site, frostwp.com, started by Brian Gardner. And Brian Gardner has been around the WordPress community for ages. He was the original founder of the Genesis framework, which was then sold to WP Engine. 

And he has started now, with the full-site editing in mind, a new theme base called Frost WP. So both themes are not done by new people. They evolve their own coming from the Classic theme going into full-site editing theme and going in full speed. So it’s really exciting to see them grow and work.

Grzegorz Ziolkowski: Yeah, pretty inspiring to see those full-site editing themes growing. And I also wanted to report that I did my homework, and I caught up with the new Tell Me About Blocks podcast, which is hosted by Michael Schneider. I guess he’s from Germany, right?

Birgit Pauli-Haack: I think Australia, but I haven’t done my homework yet. I haven’t connected with him yet, which will happen. Michael, if you listen to this, expect a ping from me.

Grzegorz Ziolkowski: Yeah, so if you look for inspiration how to build blocks, or extend their capabilities inside the WordPress Block Editor, then I strongly recommend listening to both published episodes. I enjoyed the one with Rich Tabor a bit more because he has outstanding experience in the field and he profoundly understand the project’s visions. So I wouldn’t feel comfortable saying that he’s a representative of the Gutenberg core team and put him on the spot and talk about Gutenberg. He deeply understands how it all should work.

Birgit Pauli-Haack: Yeah, and I followed Rich Tabor from the beginning of his CoBlocks plugin that came out quite early. He built it with Jeffrey Carandang together. Listened to him at the Boston WordCamp in 2019. And he had some great philosophical ideas on how to build blocks in terms of what needs to be in the toolbar, what goes into the sidebar, and how to approach metadata and options data that need to be built into the Block Editor as well and how to handle those. 

So it was quite an interesting way. So he publishes also on richtabor.com, with blog starts about theme.json, about his experience, and what he thinks how everything should work and how it works. 

What’s Released – WordPress 5.8.1 RC

Yeah, this brings us to our What’s Released section, and we have a release candidate for WordPress 5.8.1. And it was released two days ago on September 1st, and it has 41 bug fixes to core and about 20 bug fixes to the Block Editor. Although there are 20 release pull requests as you mentioned before we started recording, Grzegorz, not all of them are part of the bug fix. Some of them are just PRs that need to be added so the other PRs would work.

Grzegorz Ziolkowski: Yeah, so Gutenberg developed so fast that we introduce some technical changes that just are related to, let’s say, code quality, and then it makes it difficult to backport the actual bug fixes. So that’s why it took 20 commits, instead of let’s say, 10 or 15.

Birgit Pauli-Haack: Yeah. So we will share the show notes to the release candidate post on the core Make blog with all the track tickets and PRs that went into it. The release date for it is September 8th, unless, of course, any additional fixes to be made. But that’s expected to be Wednesday, September 8. 

Gutenberg 11.4 Release

And then we had Gutenberg 11.4 release.

Grzegorz Ziolkowski: Finally. 

Birgit Pauli-Haack: Finally?

Grzegorz Ziolkowski: Finally, the Gutenberg plugin.

Birgit Pauli-Haack: Yeah, do you want to start out with what the most important things are?

Grzegorz Ziolkowski: It’s one thing that I marked like we said and big font is the change that converts the Gallery block to use Image block. So it’s a concept of having composed log of several blocks, I mean, two blocks at the moment. So this change is still behind an experimental flag. So you need to go in the WP Admin to the sidebar. And there is Gutenberg, and there is Experiments page, and you need to mark the checkbox and save the settings to enable this new version of the block. 

There are several reasons that were covered with the dev note that we talked about, I guess in the last episode. We will include the link to the dev note. This change is planned for inclusion in WordPress 5.9. So we encourage all the block authors and theme authors to check out this new version, because there will be some incompatibilities. It’s mostly because the markup has changed, and it might break some CSS styles. 

There are also some plugins that do transforms between Gallery blocks to something else or vice versa. So that needs a lot of testing, it was tested extensively already, because it’s a huge change, which brings a lot of opportunities. And the best way to check it out is look at the release post for the Gutenberg plugin, which shows that demo, and it’s really nice. 

It shows how you can move images, you can change every individual image the same way as you modify a single image. So, that’s a great way. You can use drag and drop now inside the Gallery block. It’s just an excellent change. And of course, the plugin authors can do any change they wanted. Usually they can allow you to use other blocks inside the Gallery block, it’s very exciting.

Birgit Pauli-Haack: Yeah, it’s totally … I love to see…. I have experimented with it a bit. And yeah, I like that you can have a different style for each image. So you can have rounded corners for one and circles for a speaker list or something like that. Or each image can have a separate URL now. So when you do a speaker section, that each speaker gets its own link to the profile or the session; just thinking about online conferencing right now, I guess. But it’s really exciting to see how that works. 

I actually tested this PR a couple of months ago. And I was really amazed how it worked quite well with some of the plugins that you mentioned, Grzegorz like CoBlocks Gallery, or others that had a gallery modification. The three ones that I worked with, were quite compatible with it. I know that Glen Davies, who spearheaded the refactor of the Gallery block also did additional testing with that. He tested them with the Jetpack blocks and Lightbox for the Default Gallery & Image Block.

So, I mean, he also made a point in testing the three default themes, as well as Astra and Arbutus. So it’s all in the developer note that he published and which you will find a link in the show notes as Grzegorz said. Yeah, but I’m really excited about this. I think this is such a great way to put a huge photo gallery together and make it work on a website, yeah.

Grzegorz Ziolkowski: Yeah, and just to add more, so now in the Gallery, you can apply image editing, so you can crop the individual image. You can add duotone effects. It’s so powerful because of this change.

Birgit Pauli-Haack: Yeah. And all you learn with the Image block, you can certainly apply to the Gallery block now. And you don’t have to use two different ways on image handling. So that’s definitely an advantage of reducing the cognitive load and expand the horizon a bit. Yeah. So what else is in there? Good. All the next things seem to be like an anticlimax to that. 

Enhancements

But the Cover block now; you can allow an alt text now for your Cover blocks, which is a great accessibility necessity. The Block Lists is now improved, the iframe block, patterns and template previews. So it’s easier to see what you’re getting when you go through the list. What else?

Grzegorz Ziolkowski: There are a couple of changes to Post Featured Image. So it was pretty basic before but now there is support for duotone. They added the scale property, so which allows you to change how this Post Featured Image is displayed inside the block. And as far as this Post Featured Image can fit to the space it has, it can be somehow like constraint and something like that. So there is some contextual help now added to make it clear what it does, really. And there is now, for other blocks, there is font weight support that was added to several blocks, like Post Date, Post Terms, Site Tagline, and the Button. And yeah, basically, it’s a constant effort to add those features to more blocks.

Birgit Pauli-Haack: Yeah, to add more controls to more blocks. Yeah. So I think what I learned with Gutenberg was that well, first, one block gets an extension like the font weight controls, and then once that is finalized, it will be replicated for the other blocks, or other blocks get the support for that, and then it’s tested, how that would work out.

So, I really like that to kind of have additional testing in there before it’s rolled out to all the blocks. Yeah, and that way, the Button block received the spacing support that uses axial padding. So you can have also horizontal and vertical padding for the buttons now within your Buttons block, which is a feature that was requested quite a bit for Gutenberg. And because many, many block suites actually had that built in almost from the beginning, but so now it’s in core. Yay!

Grzegorz Ziolkowski: So this is….

Birgit Pauli-Haack: … Yeah.

Grzegorz Ziolkowski: Yeah, mark, also some changes, because we have those editor feature preferences. And they were reimplemented now on the Widgets page, on the Site Editor page, on the Post Editor page and now they are extracted. And the idea is to have one common interface to use on all screens and share the logic. So that needs to be tested by all the users because there might be some bugs. I would expect that because there is some technical challenges in how to migrate that and store it in the browser. So when whenever you refresh the page, you have still the same settings, they are stored in the local storage.

Birgit Pauli-Haack: When you talk about feature preferences, do you have an example of that?

Grzegorz Ziolkowski: Yeah, sure. So when you open the more menu like the one on the top, on the right side, and then you have fix my toolbar to the top, disable the full screen mode, and things like that, so some of them are present on all screens, some of them are specific to the given screen, but the code that powers that is now in one place.

Birgit Pauli-Haack: Oh, okay. So for all the three editors, it’s all at one place. And if you change it for one, you know where to change things? Is that answer the past or it’s now getting closer to thinking about taking those preferences out of local storage and put it into user metadata or is that still a ways off?

Grzegorz Ziolkowski: Oh, this one is actually in progress for two years or something like that.

Birgit Pauli-Haack: Right, right. But I can understand.

Grzegorz Ziolkowski: So we are aware about this limitation. So the first exploration was to use cookies. And because there is some API already that uses cookies in WordPress. However, cookies have limitations in the browsers. In some of them it’s four kilobytes and in turns out that it’s not enough for the settings that we want to store. So yeah, there is a REST API-based approach that is close to land, but it never happened. And definitely….

Birgit Pauli-Haack: … No, I can see why. Yeah, I can see why it didn’t happen. Because the editors’ screens were not yet finalized. Because many people knew that there will be a Widget screen, there will be a Navigation screen and then there will be a said editor screen. And the other preference were not yet settled completely over all for different editors. So I can see why it didn’t happen. But it was also not kind of clear to me that that’s the reason. Yeah because-

Grzegorz Ziolkowski: … It’s also complex from the user perspective because now it’s the question. So now, you said that you don’t want to have full screen mode. The question is, “If you don’t want to have it only on one of the screens or it should be applied to all screens?” And now we have it in one place, we could consolidate that and give this option that this option should apply to all screens. But that would now like these user-experience questions. 

And there’s also other questions. So once you pick something; now I am on the mobile that have a small screen. Do I want to have fullscreen there, or it should apply only to the desktop? So there are so many combinations that make it really hard to build a good API.

Birgit Pauli-Haack: … Yeah. I imagine. And there’s also the question, “Okay, if we do it for our editor team, but when I’m an administrator, do I want to change that setting again?” Yeah, that’s another level there. So I can see why that hasn’t been finalized. But then if you really want to have your editor screen, I don’t know what Marias Jensen does, he has this plugin where he stores these kinds of preferences, actually, in the user database, how he manages that. So it’s interesting to see, yeah once that’s explored, where it goes. But for this release, all things are now in one interface package. So that’s a big start in that direction.

Grzegorz Ziolkowski: Yeah, but the changes are applied per screen. So when you change the… what is it, your toolbar displayed, it will only apply to the given screen for now. But in the future, it has to be decided and we are looking for feedback. So new listeners, if you want to chime in, just open an issue and propose how you would like to see.

Bug Fixes

Birgit Pauli-Haack: Yeah, I like that. This brings us to the Bug Fix section, and there were quite a few small bug fixes. We are pointing today to the design tools section, which fixes a bug that now allows zero values for those theme.json styles. So the theme.json style generation. So, a quick side note. I had a conversation with a Jason Crist, who is on the theme team at Automattic and he said we need to make a more a … he didn’t say we need but I learned that it might be helpful to say, JSON, when you mean the JSON file, and Jason when you mean the person named Jason. It’s really hard to do this, or you change your name to JSON, like Jason Bahl did, the WPGraphQL plugin developer. Anyway, so what’s up with zero values in the theme.json styles?

Grzegorz Ziolkowski: So global styles it’s like a new specification of CSS written in JSON. And you know that the issue was that it was possible to write the string 0px, like pixel, but when you were providing a number or the string with zero, it would filter it out because JavaScript or PHP would consider it empty. And so, they fixed that and those values are also allowed.

Birgit Pauli-Haack: So like I could open that I don’t want any gradients by adding the gradient but leave the array empty and it would actually disable gradient?

Grzegorz Ziolkowski: Maybe, I don’t know about that basically. But for the field or property, it was quite important. To have padding equal zero is quite common if you don’t want to provide the unit all the time.

Birgit Pauli-Haack: Mm-hmm. Excellent. 

Performance

And that brings us to the Performance section of the changelog, and there is one that now provides a batch function to the data module to batch actions. I recognize the words, but what does that mean?

Grzegorz Ziolkowski: It’s like there’s a new API in the WordPress data package that allows you to combine several actions, which means changes to the state of the application. So that prevents that on every change, you would have re-render of your UI. So it just waits until other actions get applied and then sends the signal, “Okay, components, you can check out for changes now.” So instead of having several renders that most of them would be wasteful, it just waits for the better time for do it. And it’s pretty common technique that I’m surprised we didn’t have it before. And all agreed about that. 

Birgit Pauli-Haack: Yeah, yeah. Okay, good. And does it add to performance gains?

Grzegorz Ziolkowski: Yeah, on the PR did. However, when I looked at that post and the metrics chart, at the bottom of it, I didn’t see any differences. So it’s really hard to see impact of one PR, because there are other that could downgrade the performance. 

Birgit Pauli-Haack: Good, excellent, thank you.

Grzegorz Ziolkowski: In theory, it should make a difference when applied on a larger scale.

Birgit Pauli-Haack: All right, now you’re going to take us into the Experiments?

Experiments

Grzegorz Ziolkowski: Yeah, I can talk about some of the experiments because I developed two of them, I guess. And so one change that we are looking into is when you have these blocks, like Gallery is now a good example. When you turn on the experiment, you have Gallery block and an Image blocks. Sometimes, you go to the Image block, and you just want to apply something to all blocks like let’s say, there’s some alignment option in the Gallery block you want to take the space of the full canvas, or the… how it’s called, a full and wide, or like regular. So it’s like going back and forth between parent and child block, it’s pretty annoying. 

The idea is that you could do two things. One is dock the toolbar that it always is anchored to the parent block. The toolbar is always displayed in the place when you have the Gallery block. When you enable this option, then the alignment would be also actually shared with the child block. From the child block, you could change the alignment or alter the Gallery block. And yeah, this is something for the toolbar control that is already in place. It’s still experimental. We are looking also and adding the same functionality to the inspector control, so all the controls that are in the sidebar. 

For now, there were also new refactoring to bring their groups. So that is also interesting from the plugin author’s perspective because if you have more structured way, then first you will be able to target those groups to insert your controls. At the moment, you can either add it to the general sections like next to all other controls or to the advanced one, which is pretty limiting. And in the future, we think that there will be a lot of groups that have more structured way of handling those controls. 

One exploration is to add dimensions control so I can see a follow-up with the typography or colors. It’s a better way to have these controls distributed and the user experience also would be better because you could easily remember where to find something. And that also brings another possibilities like very frequent requests from the site owners to disable some of the controls, and we don’t have controls over third-party changes. So you could at least disable the group now, and that would be a great way. And usually, that’s what you want instead of doing granularly, just tell that this group shouldn’t be there.

Birgit Pauli-Haack: No, it’s really helpful to have the single block also be part of the parent block toolbar to control those properties over all their child blocks, that’s really great. The next part was the blocks spacing. Now the global styles also have a block spacing gap configuration that you can control through the theme.json file. And it also adds support for the layout to control the gap between blocks. Tested out, global styles are still in the experiments as well. So you need to switch them on. But it’s getting really interesting now that global styles is prepared for 5.9. It’s not clear that it will be in 5.9. But we want to definitely test all those things for the user controls, and especially also to switch off user control.

Documentation

That brings us to the Documentation. There were mostly minor changes to the handbook, but one item got me excited that says, “Alphabetize the glossary entries.” Especially from a higher-level point well, there is a glossary. I looked at the PR and it’s actually the glossary on the core contributor’s handbook that has been alphabetized. So if you ever want to know what a committer is or what CRUD means or what a dev note is, the glossary, and I will put the link into the show notes, so you don’t have to dig it out. 

Well, you can look it up there. It’s quite extensive, and I really like it. Now it’s alphabetized, so you might as well find stuff. Of course, for the alphabetization to work, you actually need to know what the name of the thing is that you look up. So it might be worth reading through the glossary from A to Z is probably a good way to expand on that. Yeah, anything else in that part that you want to point out?

Code Quality

Grzegorz Ziolkowski: No, no, in fact, in the Code Quality section, that is next, there are eight items. But those are also some minor changes that I didn’t find anything to highlight.

Tools

Birgit Pauli-Haack: All right, that brings us to the Tools section. And there are quite a few PRs that have the same beginning, and that is, “Automated Changelog” and I’m really happy about that, because we go through the changelog, and if it’s well organized and structured, Grzegorz and I, we can really work through this quite easily. So you have been working with people there as well or was it somebody … Yeah.

Grzegorz Ziolkowski: Yeah, that was quite a nice team like Dave Smith, Hector Pietro, myself, and Dan Richards. So yeah, we teamed up and everyone contributing in some way. So now the changelog you see in the release post, and also in the show notes we share, it’s mostly automated. So that’s very exciting that you can see everything in this form now.

Birgit Pauli-Haack: Excellent. Yeah. And then there were some changes on the GitHub contributor template, that the form to fill out an issue has been simplified for the bug report with a form template, so you can lead along and don’t miss any information. So it short-circuits the communication line. Once you report it, developers don’t have to come back and ask you for additional information. So filling that out is really helpful and speeds up the process. And you don’t forget anything when you fill out the bug report. 

Grzegorz Ziolkowski: Yeah. It’s a nice change from GitHub, that they provided a way to make this process more like filling a form. So it’s much simpler from the user perspective because they know what they have to provide rather than skipping the previous version, and everyone just ignore most of the points.

Birgit Pauli-Haack: … Yeah, yeah. And it’s easier, you don’t have to remove stuff from the issue template to get it all fixed up. Yeah. No, really good work.

Grzegorz Ziolkowski: Yeah, there’s one more change that I personally find very interesting. So whenever you have a block is parsed, then if the contents saved in the database no longer matches how the block should be represented in the post, there are some deprecation logs in the browser’s console. Most of the users they don’t see, but it’s important for developers.

However, it was after we introduced block patterns that they don’t get updated after they’re created, usually. So those logs started to pollute those browser consoles. So now, they are grouped together. Especially, it’s important when everything went well, so you don’t really have to report that however we do that for the information of the developers, maybe they want to update that. That’s a good reminder, but….

Birgit Pauli-Haack: Yeah, yeah. I can see that the block patterns of course, changed all the time, even in the content and going back to the block patterns, not the same original. But I think that whole process is also a major pain point for developers to get into block development using JavaScript. The deprecation process per se, I don’t know if it’s unstable or it’s just very verbose and laborious. I know quite a few developers have decided to just use PHP for the rendering, and not go through JavaScript for the render, and create dynamic blocks, quasi-dynamic-static blocks, so to speak. And looking is going to be helpful, yeah.

Grzegorz Ziolkowski: In this context, when you are using Cover blocks, and they get new features, and because of that, it requires new HTML markup to represent that, because you have those deprecations encoded, whenever someone inserts the button that was created two years ago, when you insert that into your post, you would get the most up to date version of that block, which is what we want to achieve and that’s why it’s so important. Of course, when you are working on a site that you have different needs, then dynamic blocks is probably something that you want to have, however, in the context of using patterns, that has some downside when it’s dynamic because you just need to have something that you….

Birgit Pauli-Haack: Yeah, yeah. Totally. Yeah, definitely. So there’s also one, well, pain point with that to just kind of surface it a bit more is when you have a changed block, the deprecations does not kind of go back to the block that was used two months ago and had a different HTML, it just does not recognize as a mistake, but it does not update the block, or the render or the content that was built with the block. 

And I think that’s was also something that it’s hard for a developer to… or it was hard for me to figure out, “Okay, I built this block. And now I make an update and a new version of it. But all the previous usages of the blocks are not getting updated.” And that’s how you do when you have server-side rendering, it always uses the latest codebase for that. So, that was an interesting problem that surfaced with the JavaScript blocks.

Grzegorz Ziolkowski: Yeah, I know we deal with those issues all the time when we update the markup. It’s just the most painful… Also, for a core developer, believe me, it’s not simple, but the benefits which I covered are more important in this context. 

Birgit Pauli-Haack: All right. Okay, so what’s next on our changelog? That’s it?

Grzegorz Ziolkowski: It’s kind of related.

Birgit Pauli-Haack: Oh, no. Yeah. 

What’s in Active Development or Discussed

Grzegorz Ziolkowski: Yeah. So in this section, What’s in Active Development or Discussed, we have a very interesting debate on the internet. It’s still related to building blocks, but from the different angle than we covered in previous episodes. So it all started with the tweet from Mark Jaquith. And so, he poses the idea, as he explained, “What if building custom blocks for the Block Editor was as easy as supplying attributes and a block of HTML? What if this produced React-editing code and PHP-rendering code without a build step?”

Birgit Pauli-Haack: That’s just magic.

Grzegorz Ziolkowski: Magic. There was also a code snippet shared which was like a PHP class that had those attributes and a function that renders the aforementioned HTML. It’s a pretty nice idea. That’s funny because Riad was almost at the same time working on a prototype of something similar. And he shared his explorations on GitHub in the new repository he created there.

And the idea is almost the same. But instead of it using PHP, Riad asked, “Well, what if you use something that’s platform agnostic in a way that it doesn’t bound to a certain programming language, but something that we could use in PHP in JavaScript, but also in React Native or in any other languages you want?” So I really like how this discussion has developed. I also talked to Riad about his idea. 

He walked me through, and it’s really interesting what he does is he just implements what Mark said. So he uses a JSON file. And in this JSON file, he also represents HTML, something sort of like HTML code, that then gets converted with the tool that he created into PHP, JavaScript and CSS that’s just represent your block. Yeah, a bit mind-blowing.

Birgit Pauli-Haack: Yeah, he calls it Blocky, and we’ll share certainly the link in the show notes that’s on GitHub, for youknowriad’s user base kind of forward slash blocky. It’s not an automatic thing or something or a WordPress thing. But yeah. And then there was another discussion. I think there was this discussion was between Mark and Helen Hou-Sandi as well. Yeah. And what does she tried to do? She blogged about it.

Grzegorz Ziolkowski: Yeah, the idea was just to start discussion and set a good tone. I think that she shared also an example using Mustache-style tokens, which is something well known. It’s used in other projects like WP-CLI but also in Gutenberg in create-block tool. Yeah, but she does make the clear that it’s not about this particular templating system or the way it should be done. It’s more general. It’s like an example to better visualize the ideas. 

But yes, I like the discussion, where it’s going, and the ideas that pop up. And there was also a comment from Lars Gersmann. And he said, “What if you would use pure ES6 template strings for rendering the components?” So it’s like just another way of represent. And this one is pretty interesting because people don’t like JSX when building blocks, which is a sort of another templating system to represent a code. 

But in this context, there is something built by Jason Miller from Google. And it’s called HTM, and which basically, is something that some people use instead of JSX, which doesn’t require build step. So having this representation, of course, in PHP it doesn’t look so promising in that context. However, if you would have this templating system and a way to integrate that with PHP, you could do really interesting things. Like in JavaScript, you wouldn’t need a build step, you would just write this string as something that resembles HTML and it magically would convert to React components.

Birgit Pauli-Haack: Yeah, yeah. I’m glad that now those conversations happen. But I think it also needed to have much advanced … you couldn’t have that conversation three years ago because you wouldn’t have the APIs in place to even do a proof of concept or kind of push it a little bit further. And so, it’s clear that that needs to have mature APIs and additional experience to push this a little bit further and make it more open for different variations to build blocks. 

Pascal Bichler also chimed in. And he had this additional approach to saying, “Okay, using React components in the editor, but use web components that use the same API to render the front-end.” So it sounds like duplication, but on the other hand, web components are maintained by a large standard body and are not dependent on the implementation of the framework, like the React framework, or you can use web component with other frameworks as well. So if you would change the … God forbid, the editor to a different component system, you still could use the same front-end. That’s kind of interesting way to … that’s a larger look at things, way larger than I’m capable of, but yeah, it’s just another way to organize things there.

Grzegorz Ziolkowski: Yeah, it aligns with what Mark proposed, to have one our presentation don’t get like, it behaves differently in the editor, differently on the front-end. But maybe it could be different if you are in a native app, on your phone, it would could have a different representation. It’s very interesting times to be in and engaged in those type of conversations.

Birgit Pauli-Haack: Yeah, for some who do day-to-day development, it seems to be more an academic discussion. But I think it would be really helpful to read Helen Hou-Sandi’s blog post, and of course, we’re going to share it. And she made a big point of saying this discussion is not between two WordPress core committers, like Mark Jaquith is and she is. She has been a lead developer for quite a while on the open-source project. This is just a discussion on programmers who do agency work to organize how they do custom blocks within the team. 

And that certainly, should be interested to some of the agencies that also work with us and have been on the fence of using Gutenberg or have tried to solve some of the problems and to get additional input from those that Helen Hou-Sandi works for 10up and Mark Jaquith is, I think, a freelance developer. So from their point of view, it’s definitely worth a read. 

All right. If I look through our notes here, I have just one thing that I wanted to point out that is Matias Ventura, who is called the spark of Gutenberg in one of the publications, posted a short blog post, but it’s giving the theme.json file its horizon, pretty much. And he covers there when themes are going full-site editing, or using the theme.json file for controlling all the different places of the theme, it has some consequences on interactivity because you now can build an interface on top of it. 

On consolidation, you can remove the overhead of repetitive declarations about block features, and then compatibility, that language of blocks is by default compatible with third-party blocks, which I find is a quite compelling argument to switch over to theme.json because the plugins then also can connect with the theme and be more…. We talked about it, Grzegorz before here, that if you have an additional custom post type or a different content that you want to put on the front-end, you can tap into the theme.json to style i, or keep it in style with the local theme without having to do a lot of your own CSS put to it. 

It definitely has a performance gain on rendering those block themes and starting to roll out them. And it has a flexibility component to it, a visual parity. Talking about patterns, he talks about portability, accessibility, and also the admin section. So it’s quite an interesting post to look at from a bird’s eye view on the theme.json and what it will mean for WordPress and WordPress development. So that’s my before you go, end of the show thing. Do you have anything that you want to point out, Grzegorz? 

Grzegorz Ziolkowski: No, I just wanted to emphasize the portability that we also discussed in the context of blocks, it’s just the same. How much this would change the landscape that you could have this meta language that allows you to write blocks that can be run in so many different places, not only inside the WordPress web app, but also on mobile devices, and in so many other places like in Drupal or whatever the future will bring.

Birgit Pauli-Haack: Yeah, so I was wrong. I have two more things that are I wanted to just point out before we end the show. First… Oh, it’s actually three, no five… I never stop. Okay, so let’s wiggle that down. It’s Anne McCarthy has published the summary of the testing call for the header and the navigation block. It’s very interesting, the summary will be shared, but it also points out some of the pain points that still need to be resolved with navigation block and the screen. 

Then speaking of theme.json and portability, she is preparing with a team, also the next call for testing, which is not so much a testing of features, but a testing of a broader picture. And that is how themes switching will work or was supposed to work or what’s expectations about it? Because that’s certainly something would be relevant when we go into 5.9, or when it’s released, could be 6.0. But how does theme switching change now with theme.json and full-site editing? Meaning which of the templates that I as a user build, I want to keep when I switch the theme? Or is there a header that I want to keep when I switch the same kind of thing?

So how that’s supposed to work and that will be really great if you’ll have a lookout, we probably will talk about it at the next show. And then this third one, what I wanted to do is… And I totally forgot about it. So this is the end of the show. Yeah, no, it doesn’t come to me. 

So thank you so much, Grzegorz. It was a great show again, and we got some very interesting technical insights in how to approach some of the harder work at developing Gutenberg. So I think that was really helpful for me, especially, I learned a lot today. And then as always… Sorry, go ahead.

Grzegorz Ziolkowski: It’s always good to discuss those difficult topics, but it’s very inspiring, also to see how the community explores all those ideas, so I’m glad to follow all those discussions.

Birgit Pauli-Haack: Yeah. So as always, the show notes, and they will be quite long, will be published on the gutenbergtimes.com/podcast. This is episode 51 and if you have questions and suggestions on any of it, please send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. Well, thank you so much, Greg. It was good talking to you. And thank you to our listeners for being with us. If you like the show, please share a review on iTunes or on Stitcher or Google, so more people will get to be learning more about Gutenberg.

Grzegorz Ziolkowski: Yeah, thank you everyone for listening. And see you in two weeks.

Birgit Pauli-Haack: See you in two weeks. Bye.

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss the preliminary roadmap to WordPress 5.9, Gutenberg 11.3 and Navigation Screen and Block

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Preliminary Road to 5.9 by Matias Ventura

Designing Intrinsic Layouts by Jen Simmons—An Event Apart video

New Podcast: Tell me about Blocks with Michael Schneider

Proposal: Brand guidelines for Learn WordPress content Hugh Lashbrooke & Courtney Robinson

FSE Program Testing Call #9: Handling HigherEd Headers by Anne McCarthy

Gutenberg 11.3

• What’s new in Gutenberg 11.3? (18 August)
• Gutenberg 11.3 Introduces Dimensions Panel, Adds Button Padding Support, and Speeds Up the Inserter

The cost of WordPress plugins on the performance of the editor by Riad Benguella

Building an Editor by Sharing Code Between Android, iOS, and Web with React Native by Matt Chowning

A Discussion With Gutenberg Project Lead Matías Ventura on the Barrier to Entry by Justin Tadlock

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 50th episode of the Gutenberg Changelog podcast. Today, we will talk about the preliminary roadmap for WordPress 5.9, the Gutenberg 11.3 release, and the navigation screen and block, and so many more things.

I’m Birgit Pauli-Haack, curator at the Gutenberg Times, and I’m here with my co-host, Grzegorz Ziolkowski, code wrangler at Automatic and WordPress co-contributor. Good morning, Grzegorz. How are you? Thank you for agreeing to record this early and accommodate my in-laws’ schedule. It’s fabulous weather for a bicycle tour tomorrow. So we’re doing it today. How are you? 

Grzegorz Ziolkowski: Hello, Birgit. I’m great. It’s Wednesday, and we are before the official release of the Gutenberg plugin, but it looks like everything is ready. We are recording anyway. So the weather here is similar. It’s maybe not for bicycles for me, but there’s a lot of activities outside. I hope to play basketball in the evening with my friends. So that’s great, as always.

Birgit Pauli-Haack: Yes. Physical exhaustion in the heat. Yes.

Grzegorz Ziolkowski: In fact, the weather is great, because it’s hot during the day, but the mornings and evenings, they are quite chilly.

Birgit Pauli-Haack: Oh, that’s awesome. Yeah. Good. 

Announcements

So first, we have some, I mentioned it, Matias Ventura published a preliminary roadmap for WordPress 5.9. Now, that 5.8 is out with some of the full-site editing in there, some block designs, block patterns, he has some thoughts on what needs to happen for the next release. 

His post divides up the work in six sections. We’re just going touch briefly on it, but do chime in Grzegorz anytime. So the first thing he mentioned is blocks and intrinsic web design, that he feels that the responsive tool, and of course not only he feels that, every theme developer feels that, that the responsive tools are still missing for blocks. And that needs to be addressed in regards to intrinsic web design, which is an evolution from the responsive designs and is about page layouts.

And he considers, three context matters is really the point here, that if a block isn’t displayed on screen, or on the phone, it still needs styling to consider the context. So it would be displayed as an inner block in a column display. It definitely also needs a different styling than when it’s in a single row by itself. That needs to be addressed. 

I looked up the expression intrinsic web design, because I wasn’t all that familiar with it. It was quite….

Grzegorz Ziolkowski: I don’t know that one as well. So I’m curious to hear more about that.

Birgit Pauli-Haack: Yeah. And it was coined by Jen Simmons, she brought the grid layout to us as a responsive design plus, and it’s fixing some of the shortcomings and hacks of the responsive designs. Without going any deeper, and here a couple of years ago, she did a great talk at the Event Apart, and we will have the video link in our show notes about that, where she breaks down how we address a flow layout or flex layout, grid layout, and then so forth. 

But that’s definitely something that needs to get into the Gutenberg blocks, now that we are approaching page layouts with the site editor, there needs to be done some more work, as Matias says. 

Grzegorz Ziolkowski: In terms of technical aspect, is it less about using media queries to style your website and more about to make the design change according to the space it has? It’s more based on what’s the neighbors of your block, if it is something that is in the column, then classical media queries wouldn’t work because it’s still too narrow?

Birgit Pauli-Haack: Exactly.

Grzegorz Ziolkowski: That makes a lot of sense.

Birgit Pauli-Haack: And the viewpoints, of hard coded viewpoints that you see in a lot of designs, they not always apply, because the tablets get bigger, the phones get bigger, the phones get smaller, and then you watch it on a big screen, which is beyond the normal computer screen. The context changes so much on that.

I know that there are brilliant people in the Gutenberg team that can address it, but you needed to have the whole thing. I hear the rumblings that a developer needs to override the block, or a theme developer needs to override the block styling to get it into his own theme displayed nicely and all that. That is all part of that.

Because the whole context of a page layout wasn’t yet clear how the column block or how a cover block with multiple inner blocks would be handling that. That’s certainly a problem to have and to be solved. I think that’s what I learned from Matias’s post, it’s very, very high on the priority there.

It also comes in with the panel directory now, that it’s available now, it needs to have a better integration with the inserter. And also get some multi-block transformer improvement, that you can transform maybe a cover block into a block pattern or a paragraph block or a quote block into a block pattern. And that flow also needs to be integrated into template parts and page layouts to add block patterns into those. 

Grzegorz Ziolkowski: Yeah, I guess the most important part is that some of the block patterns that are in the directory aren’t so easy to use, because you need to copy them. I hope to see some improvements on that side. I guess that’s doable. It’s not that far away from that place. 

Birgit Pauli-Haack: And the meta team and the Gutenberg team worked on that already with the block directory, where you can search for a block in the inserter and then grab it and get it into your content. I think some basic architecture was already done there. 

Grzegorz Ziolkowski: But it was only for a subset of blocks that were marked as core specific. So that’s a different story to make it work for everything that is sent to the directory.

Birgit Pauli-Haack: Well, the directory itself, the pattern directory right now only allows for core, for patterns that are built with the core blocks. It’s a similar process, there is no danger that the block that’s in the pattern wouldn’t be on the site. Well, unless it’s switched off. Yeah, there’s a block manager that it switch off… That’s definitely some issues that will need to be solved one way or other, or it will bubble up as a bug later on. 

The third section that the Gutenberg, it is the navigation menus that will be the main focus for 5.9. It’s the new navigation screen as well as within navigation blocks. And there are definitely still some experience and display improvements necessary and reduced complexity was an expression that Matias uses in his post. And also that definitely needs to be tested, tested, tested, with as many themes as possible. 

Speaking of which, and you will hear me talk about it today multiple times, is that there is already a testing call. Anne McCarthy already posted the ninth call for testing for the full-site editing outreach program, and that is actually covering headers and navigation. We start with that already.

The fifth one, section four, Ventura’s roadmap or WordPress roadmap then is creating an interface for the theme JSON file. Right now, writing theme JSON manually in code is tedious. And the next step is to actually finalize the UI and the whole system is, we talked about it before, we covered it under global styles, where the user gets the chance to set those theme settings and configuration with the interface in a sidebar, in the site editor, that is also coming to 5.9. And the team has been working on that for quite a bit. 

The fifth one is header design tools, colors, typography, spacing and layout. And one of the main goals would be a consistent access to the similar tools across blocks, and including third-party ones. And that the parameters and the settings are normalized between block JSON files and theme JSON file, when there’s block support or theme support, that they use the same taxonomy there.

Grzegorz Ziolkowski: We had a lot of experimental features enabled in 5.8. I hope all of that is going to be stabilized, and we will have a consistent API. We are on a good path towards this goal. I’m positive about this one. 

Birgit Pauli-Haack: And there’s a lot of testing also done, actually, I think Anne McCarthy also published a survey, we will highlight in the show notes, the results of it, where they connected with some theme developers on how they are using the theme JSON and what they liked and what they don’t like. So that is also great input for that phase of preparing for 5.9. 

The sixth section in Ventura’s roadmap 5.9 post was to formalize the editing flows for block themes and having a clearer information architecture for all the features, like editing templates, styling pages, creating whole template parts and all that. There was some great input from the full-site editing outreach program. So that will be iterated a lot, and also finalize the theme level blocks that have been experimental or have not been published for the… They’re in the plugin, Gutenberg plugin, but they’re not in WordPress core yet. 

So that concludes the preliminary. That’s a very big word there, roadmap for WordPress 5.9. The schedule is not out yet.

Grzegorz Ziolkowski: Yeah, I guess the original plan was to have the release in December this year, but I don’t know, there isn’t a very detailed plan about that. So still probably involves and we will learn about that soon. 

Birgit Pauli-Haack: I’m thinking the core meeting later today would bring another preliminary schedule there.

Yeah, so if it stays with the schedule for December, then there will be future release in October, eight weeks before the release. That’s only two months away. So that’s a big roadmap for that. I’m sure there will be a cutoff date where we say, “Okay, this comes in or it doesn’t come in, or it’s ready or it’s not ready,” like we had it for 5.8. 

Community Contributions

We have a few community contributions today, we want to talk about. First, there is a new podcast. It’s called Tell Me About Blocks. And it’s an interview podcast about building extensions for Gutenberg, the WordPress block editor. And you can learn from guest experiences, creating block plugins, themes and block patterns. Michael Schneider is hosting that. It’s a monthly podcast. 

So July was the first episode and was with Keanan Koppenhaver. He’s a WordPress contributor and agency owner and plugin developer. He talks about his experience to do the Block-a-saurus plugin, which he just played around with the block editor to make it a little bit more fun. He’s also the maintainer of the Kanban for WordPress plugin that’s in the plugin repository. 

In the second episode, Michael Schneider interviews Rich Tabor, and talks with him about the making of the latest plugins, Markdown Comments, and the to-do list plugin for the block editor, which are more collaborative plugins for the admin section of the editor, rather than for front end. I haven’t listened to the second one yet. Have you heard about it Grzegorz?

Grzegorz Ziolkowski: I only learned about this podcast yesterday. I subscribed. So I’m planning to listen to both episodes, because this is the area I’m the most interested about, in the development of the block editor and WordPress in general. I’m looking forward to it.

We talked about the contributions from Rich, in particular about the markdown comments block, and the path, the journey that he had to send all his work to the block directory. So I’m just keen to learn more about the process and the experience in the form of the podcast that we all love, right?

Birgit Pauli-Haack: Yeah, and so we wish good luck to our fellow partner, Michael Schneider, in Tell Me About Blocks. And you can read up about it, tellmeaboutblocks.com. It’s all one word, no dashes, no underscores, anything, tellmeaboutblocks.com. So you can subscribe to yourself, because you are listening to our podcast, so you are interested in podcasts.

There’s a second announcement in the community contribution, which is from a team, of the WordPress team from the learn.wordpress.org team. And Hugh Lashbroke and Courtney Robertson have a proposal for brand guidelines for the Learn WordPress content. They asked plugin and theme creators if they want to contribute a course to the site. And the proposal handles the brand guidelines. 

So if there is, how they will handle shoutouts to other products that are outside of wordpress.org, but in the space. I think that should have your attention, and read through it and see what you think about it. Because definitely, the training team could use some help from more practitioners. It should be worthwhile for the brands as well.

Grzegorz Ziolkowski: And we need more tutorials how to build for the block editor, how to use the block editor. It’s all there, but it’s rapidly changing. We need to record new content. It’s only in your hands, and we are waiting for that. 

Birgit Pauli-Haack: Yeah. You make some great impact if you contribute that way to the WordPress project, and it’s what you already know. So you don’t have to learn a whole new thing. But you can influence millions of WordPress developers who wait for your wisdom. 

What’s Released – Gutenberg 11.3

So that brings us to Gutenberg 11.3 release. 

Grzegorz Ziolkowski: It’s still not out at the time of the recording. But we hope that it happens in any hour today. And anyway, we can cover what’s already in their release. This time, there isn’t anything in the changelog that would be marked as a new feature, although some of the enhancements listed are in the space of something that could be considered as a new feature.

Enhancements

There is now a new color picker, an experimental component. We talked before about this project, that has this code, G2, like next generation of components. And the work is towards building a better UI for all those controls that you use with blocks, with global styles and such. And it’s still experimental. But the plan is to have different color pickers. 

So you can check out this work to see the difference that is there and if you like it or not, give some feedback. It’s still in the works, in development. So you have impact on that and can drive the future work on that one.

Birgit Pauli-Haack: The G2 initiative is to make components much more accessible out of the box, so to speak, that a developer who uses those components, not only the Gutenberg developers, but also plugin developers and external developers can use those components and have an accessible experience, a more accessible experience out of the box. At least that was the new initial focus from Q and Sarah. 

Grzegorz Ziolkowski: And in general, there’s more to it. This concept of intrinsic web design, this is all about making this new set of components that they follow those principles. They adjust according to the context. 

And the other part is the team that is behind that. They are trying to unify the public API. At the moment, we must admit that some of the components were created a long time ago, and they were more like a realization of the current needs than the vision for the future. But this project helps us to bridge that gap, and make it much easier to use for all developers.

Birgit Pauli-Haack: Well, thank you. So one of the enhancements is also the post featured image block received basic dimension controls for the image, which was something that was requested quite a bit. And that is when you use the query loop block or the post template, where you display the series of blocks and the featured image with it. You can also use it in the single post template, if you have a block-based theme. 

Grzegorz Ziolkowski: Yeah, so just to remove some confusion that we discussed before the recording, is that this feature doesn’t quite work with classic themes. So it doesn’t have any impact on post featured images, unless you start using block-based themes, and all those designs.

Birgit Pauli-Haack: I think we need to, some of the enhancements that you said, we need to point out that this is not for classic themes. 

Grzegorz Ziolkowski: And there’s also a small change, a visual change, there are new icons for usable blocks and template part blocks. This is a special type of box that store the content in the database, and in the past, we had this logo looking like a Lego block. And now it looks like a stacked diamond. And the difference is only that one of them has the filled in background color, or something like this. 

So a subtle difference, it shows that those two blocks are similar, but a bit different, the usage is different. It’s more for design and usable block is more for sharing the same content. 

Birgit Pauli-Haack: Yeah. And the stacked diamonds represent that it’s more a block collection than just one block. So the reusable block are the ones with just the outline of the stack diamonds, and the template parts display is the filled in stack diamonds. And you can distinguish them in the list view of the site editor or your post editor to identify them better. 

Grzegorz Ziolkowski: I think that was the main motivation, because the list view is now persistent. When you have it opened, those visual cues are really important. 

Birgit Pauli-Haack: The next item is for the block editor. Now, for the internal links, there’s also the rich previews enabled. So when you link to a post that’s on your own site, once you did the linking, and you come back to that post and hover over it, it gives you a nice little window with the title, the featured image and an excerpt. And it also gives you a little link where you can unlink that post again.

This is similar to a Google Doc linking mechanism. It really speeds up the quality control of your content when you go back and double-check on some of the links, is it really the right post and all that. And it takes care of, it uses the meta description and the Open Graph meta tags for that rich preview. So if your site doesn’t use those, you won’t get the rich previews, and it wouldn’t show. But most WordPress sites use them out of the box anyway. 

Grzegorz Ziolkowski: I think it’s a game changer for content creators. I use this command plus trackpad click feature to check if the link that I used is correct one. You no longer have to do it, you just hover over the link and you have the hint for visible at your….

The other thing is that the button block, it has now padding block support. This one is quite different in how it has changed, because it’s not only a new feature that was added to the sidebar, but I think this is also the one that introduces a bit different UI experience. Is it this one or did I miss that?

Birgit Pauli-Haack: No, it’s the next one. But this one is the padding. Now, padding has been around for quite a bit, padding and margin for cover block. And now it also comes to the button block. So it’s the sub block of the buttons block, where you can set the padding for all buttons or for the whole dimensions of the button, like the padding 20 and it adds them to the top, to the right, to the left and to the bottom. 

Or you can unlink those sections, and then individually change the top left, right and bottom padding, as well as the padding for the button. You were talking about the next piece, there was the dimensions panel.

Grzegorz Ziolkowski: Dimension panel.

It’s interrelated, because the new dimensions panel, it’s using two features, it’s controlling two features, which one of them is the padding and the other one is margin. The idea is that, with so many new controls showing up, for some blocks, it’s too much to process when you look at the sidebar. So there is this exploration that is already in the Gutenberg plugin, that allows you to use the drop down menu to pick what’s displayed inside the panel. 

So you can decide whether you want to display both the paddings and the margin or only one of them. And there is also this reset all feature, that just goes to the default state. So according to the discussions that are in this PR, you can find out that this type of interaction is considered for all other panels like typographic and color. 

I’m looking forward to how it changes, because it’s something that site owners requested for so long, to have better control over those features. Once we have that, apply to all features, it will be much easier to give also some coding APIs that will allow to control that from the code, so you could easily turn off all the features you don’t want to have on the side. 

Birgit Pauli-Haack: Yeah. And it’s also part of what Matias mentioned before in his roadmap post, that the consistency of having the controls all look alike. So once a user learns them, he can apply his knowledge to all kind of different places where that control can be used. And also how to handle a margin that is now different from a cover block to the theme parts sidebar. So that’s part of this normalizing and being more consistent in all the tools. 

So those are the enhancements.

Bug Fixes

Then we have a few bug fixes. There are quite a few bug fixes in this release. I just wanted to highlight one of them, that is that the custom gradient picker for left to right languages is now fixed. So now gradients work well, better again, from left to right languages. I’m a fan of gradients and everybody should have access to it.

Grzegorz Ziolkowski: It’s definitely a very nice feature. And there’s other bugs I want to mention in the template editor. And now, we show only post template actions for user with correct capabilities. So sometimes those features are very powerful. So you want to have better control who can access them. It’s something that is constantly looked at and improved. There’s so many new features added, it’s very easy to miss that part, that there should be permissions.

Birgit Pauli-Haack: Yeah, this alleviates some of the anxiety that theme developers have, that any user can mess up their beautiful theme with changing some of the templates. But it’s now only restricted to the admin. That angst can be alleviated.

Performance

There were also quite a few performance improvements that come with this Gutenberg release 11.3, and one of them is the lazy render block types in the inserter. It only shows block types that are necessary now. Have we talked about it before? I think that is an additional iteration of that.

Grzegorz Ziolkowski: It might be something different. As far as I remember, this one is the same solution that was used for block patterns. So block pattern does the previews and so on. It’s a lot of data to process. There is a special handler that just splits the list of all block patterns into chunks, and this solution was implemented also to the block inserter and improved the performance, like perceived performance of the inserter immensely. 

So the difference you can see is that you will see small parts of the block types in the inserter at first, and the rest will just be iteratively added as the browser has free cycles to process that. So that makes the experience … because you can already start processing the block items in the inserter as they are rendered. In the past, you would have to wait until everything is ready. That’s a big improvement. 

Birgit Pauli-Haack: So what I see in that PR is that Riad created a little page or website that measures the block editor performance and it’s titled, Is Gutenberg Fast Yet? I think we talked about it before. 

Grzegorz Ziolkowski: Yes. 

Birgit Pauli-Haack: And where he sees the different items, how much time they use. And so he does some incremental improvements there and highlights all the different things that are keeping Gutenberg from being fast. It’s quite interesting for those who are interested in that kind of analysis, look at the PR in the site, and maybe you can help him figure out some of the performance hogs to make it even faster. 

Grzegorz Ziolkowski: Yeah, also, speaking of Riad and all his efforts to improve the performance of the editor, he also posted on his blog, about the cost of WordPress lag is on the performance of the editor. So it’s a really good read, especially if you are one of the authors of blogs, and he just shows the results of measuring the impact of the most popular plugins.

Also, he covers the plugins that add the functionality to the blocks, like additional features and how it impacts the performance. He covers also some recipes, how you can measure it on your own, when you are developing. The state of major plugins is really good, it has improved. As he was preparing this post, he reached out to some of those plugins, and they improved the performance, based on his findings. So it shows how the community is really into these performance improvements. That’s really great to see how it evolves. 

I recommend checking out this post. He shares his approach how to process all that. There is also, it’s a follow-up post, because in the past, he had another post when he explained all the impacts of different approaches that you take when building blocks, using data stores, using rendering, and it’s very complex. 

If you are really into block development, those two posts is definitely a must-have, if you want to provide the great experience for users, because performance is one of the most important aspects of that. 

Birgit Pauli-Haack: I’m just scrolling through that, thank you very much for pointing out this post. I haven’t seen that yet. So definitely, we will share the link in the show notes. And it’s definitely an eye-opener in how plugins change performance. And he has some nice spreadsheets there, where you can look things up, and also how you can, as you said, how you can measure your own as well, if you develop a plugin for that. 

Yeah, thank you. It’s also improved performance through the parser of removing the automatic custom classnames handling. What does that mean? I’m not so quite sure I understand it.

Grzegorz Ziolkowski: It’s quite complex. But the difference here is that this was the responsibility of the block editor before, and Riad moved this logic to the block parser. It’s happening earlier in the process. And because of that, it allows to skip some of the….

In some cases, when you have the classic block or you have the HTML, I don’t remember, other blocks, you know that for some blocks, you don’t have to do this processing, because they are not using this automatic classname handling. So you can skip that, that’s one improvement from start.

But also this ensures that the logic is executed only when really necessary. So when the block is valid, you don’t have to run that at all. But with the previous solution, it also was always applied. It had a really big impact when the post was really big.

So, it’s very technical, and it’s something that a small group of people can really help with. But Riad, he’s just the king of performance. He knows who to do all this.

Birgit Pauli-Haack: He loves to hear that, the king of performance. No, but it also shows that it only can be an iterative part that you can get it perfect, and you can get it to be more performant after the fact.

Experiments

That brings us to the experiment section of these release notes. It will highlight the template part placeholder now when you create a new template part with the site editor. So experiments has the full-site editing in there, and the navigation screen are the only experiments right now in the Gutenberg plugin that you have to switch on. 

The site editor itself is actually already switched on. I don’t know why it’s still in the experiments there. But when you create a new template part, say a header or maybe a sidebar item, it now asks you for a title as well in the create flow. So you don’t get as many untitled template parts as you got before. You can think about the title right when you create it. That’s definitely a improvement of the flow.

Grzegorz Ziolkowski: Yeah, I also hear that the template part is going to be promoted to the stable feature. So it means that will be included in WordPress 5.9, for sure. And maybe that even will happen in the next plugin release. So, 11.4. And that’s great, because this is a very exciting feature. It will open a lot of possibilities, even for classic themes. 

Birgit Pauli-Haack: Yeah, and now that it’s coming out of experimental means there are more eyeballs on it, to test it and to figure out what needs to be changed, or if it needs to be changed and what bug fixes are there. 

So the navigation link block, that’s a child block of the navigation block, now actually also has the ability to remove a link, which is certainly in the process of creating a navigation, a useful tool. Now, it’s there. 

Documentation

Grzegorz Ziolkowski: I think that brings us to the documentation section. And there is one item I wanted to highlight. Because we have those block patterns that you can search from the block patterns directory. And of course, some site owners don’t want to have them. So now there is a document explaining how you can disable that.

That part was missing, but it was possible from the release, WordPress 5.8. So it’s now covered. If you don’t like that, you can check out how to disable that. 

Birgit Pauli-Haack: Yeah, as any WordPress feature that is new, not only needs a way to enable it, it also needs a way to disable it, to make it as flexible as possible for all the WordPress instances that are out there. 

Which brings us, so there are quite a few other smaller changes to the documentation that you can check out for yourself, because they are just changes to existing documentation pages. 

Code Quality

Code quality, there is one highlighted that is the remove of the experimental prefix, and rename the theme JSON files.

If you’re theme developers, you now can remove the underscore, underscore experimental prefix on your theme JSON files as well. It will not read anymore from the experimental theme JSON file either. 

Grzegorz Ziolkowski: Yes. And there is a small change in the API. So in the core data, there was a method to get authors, and it wasn’t very flexible. But it’s now deprecated in favor of get users, that allows you to pass the flag to return only authors. But also, it has a lot of other features that makes it better use. So it’s only changed to consolidate the API and make it easier to discover. 

Birgit Pauli-Haack: Excellent. Thank you. Do you want to go through the tools section? 

Tools

Grzegorz Ziolkowski: There is one big change in that regard. So there is a lot of complaints about build tooling. And you related to that, because I was one of a few folks that were involved in updating Webpack to version five, and it was a pain. We started the first try in January, I guess, but it failed because of several issues. 

And now we finally made it, and it’s going to be…. So the change is in the Gutenberg plugin already, and it has a good impact on the bundle size. It has decreased. It was 30 kilobytes or less that’s going to be sent to the user, which is a big win. So yay for Webpack 5.

Birgit Pauli-Haack: Yay.

Grzegorz Ziolkowski: But there’s more to it. This change will also be applied in the WordPress scripts. We should expect NPM publishing for this package later this week. And so basically, if you are using default config files, everything should be good. If you are using your own custom config, then if you want to upgrade to the latest version, be prepared for some troubles, because it isn’t easy. Webpack isn’t backward compatible, to the degree that the WordPress is. It’s just what it is.

Birgit Pauli-Haack: Yeah, as we say, there will be dragons. 

Grzegorz Ziolkowski: For sure, if you have a custom config, it’s not easy. I’ve been there already. And the next step, of course, will be to do the same update in WordPress core. There’s three places to update. I understand the frustration from people who try to use those tools by themselves. You have a lot of courage. 

Testing

Birgit Pauli-Haack: And then there’s one other features that we will highlight from the testing section. And that is that the mobile team added a guide for integration testing, if I say this right, and it turns out to be quite complex. 

Grzegorz Ziolkowski: Yeah, in general, we talked a lot last time about the barrier of entry for developing for WordPress. The way to start, even writing tests for the mobile apps is just on completely different level. It’s like a skier wrapper or something like that. It’s just so complex. 

I guess this shows how the, not new web, but how the world evolves. You no longer only care about the browser, but there is also the phone, the tablet, and building apps for that. So if you are curious to learn how you could contribute to the native apps, if you are interested in this type of development, that’s definitely a good way to check and play with all those tools and see how complex the setup can be, if you are going outside of the web bubble. 

Birgit Pauli-Haack: I’ve never really ventured into the native apps development. But I had hoped that React Native would be a path to go. And then I read, oh, by the way, this brings us to the end of the changelog. And we are now more in the section of active development, what’s discussed. 

What in Active Development or Discussed

And we will share a post to Matt Chowning that he wrote about building an editor by sharing code between Android, iOS and web with React Native. It only brings you so far to reuse code base. And it seems that the mobile team recreated some of the Gutenberg experience, recreated them from scratch, reusing components, but not reusing some of the code base.

It’s quite an interesting read, finding out how complex that whole thing is when you do it through a phone screen and operating system. 

Grzegorz Ziolkowski: Yeah, but the good point that the team, the WordPress mobile team is very happy about choosing React Native, and they emphasize that the speed of development is really good, because they can share the logic part of the editor that is developed for the web version. All the JavaScript code, they can reuse, and they don’t have to write it from scratch. 

And what’s even more important, whenever there is a performance improvement, they get the same improvement on their side. And also, from my perspective, whenever they find something that is not working properly, they contribute back, so all parties win here. That’s the beauty of that setup. 

Birgit Pauli-Haack: And everybody benefits from that. The mobile version is also part of the overall Gutenberg GitHub repository. So there is some synergy there as well. 

All right. So two weeks ago, there was this big discussion about barriers to entry. And in our weekend edition, 180 and 181, on the Gutenberg Times, I shared quite a few blog posts and discussions on podcasts about that topic. So if you want to dive into it some more.

But Justin Tadlock from the WordPress Tavern, interviewed Matias Ventura, the Gutenberg Project lead on that. And it’s an interesting read, in that regard, that it really depends on the knowledge of who is developing for the web. And it’s a different perspective from someone like me who started with HTML, where only HTML was around. And it took about a couple of years before CSS came in. And then it took another couple of years before I needed to write some early JavaScript. 

I only had to add one little thing to my whole toolset. But it was also the speed of things. But latest in 2004, ’05 or ’07, I was left behind on all the cool development. And now caught up with it through WordPress, because that’s when we started, in 2010, we started with WordPress. And it took me about five years before I even had to touch code on a WordPress install to make a feature work. 

So it really depends on where you come from. I jump from a ColdFusion development base to a very rudimentary PHP, to good JavaScript knowledge. The barrier is different for me, from someone to build a plugin, from someone who has 10 years of PHP experience and knows all the intricacies of WordPress, because for 10 years, she has been developing in that space. So that’s one thing. 

And Matias also points out that the theme creation, and the new on ramps for theme developers is so much lower than it was the last 10 years for theme development in WordPress. Because now you can start with the block-based templates, you can do block patterns, you have the theme JSON to control some of the features.

And you could basically write a new theme without touching code, because the site editor gives you all the tools with it, or at least that’s the vision in 5.8. The 5.9 will come close to it. And then with patterns, you can account any theme in any case very easily with just assembling a few blocks. 

He also mentioned … go ahead.

Grzegorz Ziolkowski: I think it’s very interesting to hear the vision from Matias, because he also shared this preliminary scope for WordPress 5.9. He knows what’s the end goal. And that’s much easier to see the landscape, how it will look in a few months when you will be able to fully benefit from all the latest development in the space of block themes. And that’s one way of looking at that. 

Also, I think that in general, if you look at the development for the web 10, 15 years ago, you didn’t compete with mobile apps, and they didn’t exist at all. Everyone was using Nokia or other phones that only allowed you to play Snake or something similar, that was it.

And so the mobile apps, tablets, they change the perception what you can do, how you interact with those devices, and all the gestures and stuff like this, and animations and the performance. That was so much better because it uses some native technologies. So if you combine all those aspects together, it’s really hard to tell that the development should be still simple and the barrier of entry should be simple.

It cannot be, because we have so much bigger expectation as users these days. So of course, there are some libraries that help with that, but exploring the libraries, finding the right one and integrating that, it’s another level of complexity here. 

Birgit Pauli-Haack: I also think there’s a level of decision paralysis, because if you have too many choices on the libraries, the chance that you pick the wrong one is really high. And then for some people, that is an existential decision. And if your business depends on it, it makes it an existential decision that a lot of other people depend on that. 

I can see that, but it’s not only WordPress. All we know is WordPress, but it’s in all the areas that are out there that develop for the web. 

Grzegorz Ziolkowski: Go on. 

Birgit Pauli-Haack: Well, all I wanted to say was, when I look at what all needs to happen at the same time and play together, all the little pieces, it’s actually a miracle it works at all.

Grzegorz Ziolkowski: That’s true.

Birgit Pauli-Haack: Because so many things could work. We should all be blessed that we actually can get something together that works well for millions of people. 

Grzegorz Ziolkowski: Yeah, I think we all were happy about the limitation of the web 15 years ago. You had the basic HTML, CSS was very basic. Now, there is CSS4. So the number of features that were added in the meantime is, scope is so gigantic, and you have to learn fifth method of positioning elements on the page. And also, you have JavaScript that has evolved, there are new features in the language.

Even PHP, if you look back, PHP 4 or 5, it’s a completely different language than PHP 8 that you have now with types and some strict checks and so on. And the tools that are around, that we didn’t have the interest back in the day, now it’s wildly popular. And end-to-end testing was very hard in the past. Now, you have so many tools to pick from. 

So it’s up to you what you pick, because you could still use only PHP, HTML and CSS and some basic JavaScript and that should be fine. But the question is, if users will like it, or in terms of on the front end experience. But also, if the customers for all the businesses that WordPress supports, will be still happy to continue using very simplified interface, that is very technical. 

Birgit Pauli-Haack: Yeah. I think there’s so many things for many people. I think we will have a link to the WordPress Tavern article with the interview with Matias in our show notes. It’s definitely worth a read. And that brings us I think to the end of the show.

Grzegorz Ziolkowski: One more thing, definitely look out for the Gutenberg Times newsletter, because it has a lot of links to those discussions. This week, you should expect more because those discussions still happen on the web, on Twitter, so be aware and look forward to it. 

Birgit Pauli-Haack: I’ll have those in the show notes as well. This week’s weekend edition is not going to happen until next week, because I’m still….

Grzegorz Ziolkowski: A suspense, nice.

Birgit Pauli-Haack: A suspense on that, because I’m still on vacation and I’m visiting family in Europe. But before we end, again, please heed the call. If you have some time, heed the call to the FSE testing call for number nine, working with the headers and navigation coming to the site editor to Gutenberg. We will need your input, we need to learn from your experiences and also from your expectations. What you tried to do, what you were able to do, and what didn’t work and what you expected how it would work. I think that would be really, really helpful for the team to come out of experimental stage and get into the main plugin with the navigation screen and block.

As always, the show notes will be published on the Gutenberg Times podcast at gutenbergtimes.com/podcast. This is number 50. We’re halfway to number 100. And if you have any questions and suggestions or news you want to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. 

Thank you so much, Greg, for spending this morning with me. I hope you have a wonderful afternoon. Thank you all for listening. I’ll say goodbye.

Grzegorz Ziolkowski: Thank you, Birgit. Thank you, all our listeners and see you next time. 

Birgit Pauli-Haack: All right. Bye-bye.

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Gutenberg plugin release 11.2, drag and drop, flex layout, core data shortcuts and modern WordPress development.

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

• Chris Wiegman’s The Changing WordPress Ecosystem,
• Marcus Kazmierczak’s Modern WordPress Development
• WordPress Philosophy, Design for the Majority
• Using WordPress Without Writing Any Code by Chris Lema

Gutenberg 11.2

• What’s new in Gutenberg 11.2.0? (4 August)
• Gutenberg 11.2 Expands Color Support for Search and Pullquote Blocks, Introduces Experimental Flex Layout for Group Block

What’s in active development and discussed?

• Is Gutenberg Fast Yet?
• Flex Layout Iterations 
• Layout Grid Block by Automattic

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 49th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about the Gutenberg plugin release 11.2, and drag and drop, flex layout, core data shortcuts, and modern WordPress Development. 

I’m Birgit Pauli-Haack, curator at the Gutenberg Times. I’m here with my co-host, Grzegorz Ziolkowski, code wrangler at Automattic, and WordPress core contributor. Good morning, Grzegorz, how are you doing? I am so glad that we have the same time zone together for the next two or three episodes. And good morning to our listeners, we are glad you join us again for this episode. How are you this morning, Grzegorz?

Grzegorz Ziolkowski: Good morning, Birgit. I’m so happy to be recording this one in the morning for the first time, it’s such a refreshing experience and something new. Everything is great here, and I guess the weather is similar at your place now, like in Poland, it’s changing rapidly everyday. Yesterday it was sunny, then raining, today it’s cloudy. So, you have everything. How about your place? How do you enjoy it?

Birgit Pauli-Haack: Yeah. We are on the same weather, it changes through the hour, we have one hour, we have sunshine, then we have thunderstorms and then it comes back. It’s almost like Florida. But I’m here in the makeshift office at my parents’ house, it’s kind of working from home home. It’s a little bit different, because it’s a big household, of course. And it took us an evening to distribute the fast internet that comes in on the second floor to the basement. But there is something like, it’s wired through the power grids, it is actually spectacular. It hard lined in through the network, it’s very interesting what they put together.

Grzegorz Ziolkowski: No, that’s really interesting. I’m keen to learn more after the show about that because I don’t have the cable to my office and sometimes the wifi isn’t great enough. And I miss that when I was preparing everything, I’m glad that there are some other ways to do it.

Birgit Pauli-Haack: I’ll be happy to get deeper into that. 

Communication Contributions

So, for our show today, the first section today is a community contribution, and I appreciate Chris Wiegman and Marcus Kazmierczak blogging about WordPress development in 2021. And they’re trying to define the barriers to entry for WordPress users, are they low, or they are high. I think we all are getting a few blurry lines, depending on what kind of stakeholders, or what kind of users you’re talking about. I haven’t read all of the blog posts, and I definitely need to read them again. But Chris Wiegman started the discussion on Twitter and I quote him, “The deeper I get with modern WordPress development, the more I understand why newer devs don’t like to work on it. This is not the same project that I was in, in the past. The learning curve is now extremely high, regardless of past experience.” Chris Wiegman on the Twitter verse, and we’ll link to that tweet in our show notes.

And there are quite a few that chimed in on it. There was Alain Schlesser, Rich Tabor, and others.

Grzegorz Ziolkowski: Matias Ventura.

Birgit Pauli-Haack: Matias Ventura….Yes, Jessica Lyschik as well from Germany, and Marcus Kazmierczak, I might have put just his name, last name, but I need to ask him how to pronounce his name. He wrote a blog post about modern WordPress development and, pretty much as an answer to Chris Wiegman, and Chris Wiegman actually put some more thoughts into it on his blog, with changing WordPress ecosystems. What do you think about, you came from a different content management system to WordPress, how many years ago?

Grzegorz Ziolkowski: I started like with development with Drupal and it was like, maybe 10 years ago. And the entry level for Drupal is so high that going back to WordPress seems like you are in a familiar place and everything is so simple. So it really depends on your background, if you have a strong PHP background, then it might be easier to start with Drupal then maybe WordPress. If you don’t have any experience, it’s going to be hard no matter what you would like to do. So, it’s definitely a very complex topic. One thing that I would like to emphasize that WordPress has this badge with the fields of each of ours. So one of the sections is designed for the majority, it says that the way that WordPress is structured should be optimized for the end users rather for the developers.

And this is happening with full-site editing. And that’s why there is no, this impression that writing for the, like extending the block editor is hard and it’s something that definitely needs more attention, but it’s also a very complex thing to operate in this area of a very rich user experience and having so many features that so tightly related to the DOM, to the browser. So, it’s not an easy place to be when you are a developer. So I suspect that if you would like to achieve even like half of the goals that the Gutenberg gives you in the classic editor, I don’t think that it would be doable at all.

Birgit Pauli-Haack: And I like how Marcus iterated that the competition between WordPress, is for WordPress and it has had a remarkable growth rate, even in the last four years, going up to 42% and the competition is not Drupal, or Wix, or Squarespace. The competition lies through the social networks who made it so easy to create a post like on Instagram connect with Venmo, and then have a shop up there. So, following that path, there is an expectation from the users to also make it as easy as possible, and intuitive as possible. And of course the block editor is for quite a few developers, a moving target, the goalpost kind of still moves, because the team hasn’t finished developing it. It’s still on its way. And listening to Matt Mullenweg, he says, it’s going to be a 10 years, two years or four years, into a 10-year project.

So it would be that way and probably settle down quite a bit, but there is always keep moving, but I’m also wanted to outline, I found a tweet by Matt Edgar, who’s an editor and writer, and he says I fear that WordPress goes the Microsoft Ballmer way, where it’s all about developers, developers, developers, and not about users, users, users. So, that’s the whole other extreme there. And right now it seems to be on a middle path. I’m not sure it’s the right path, but it’s at least kind of, if you offset both sides a bit. There’s something new coming by. 

But Chris Lema actually posted a, his latest blog post was about using WordPress without writing any code. And so that’s the goal pretty much, but he is actually preparing for a presentation on a non-WordPress conference. And, that don’t use WordPress all that much, but wants to make a case for WordPress.

So that blog post was very interesting to me as well, figuring out how to do this without, yeah. There’s a few plugins that he uses, but most of it is based on the native blog editor. So I think there is a great discussion going on and we all need to be a little bit more taking, and someone who has been successful with WordPress for 10 years and doing what they’re doing, bringing them all along, but bringing them piece by piece and also teach a lot about the new tools there, like react, yeah. MPM and all these new cool features that are hard to learn, sometimes when you haven’t been in this space for a long time. Yeah. I see it for myself, I came to WordPress from a total different programming language. And I programmed my own content management system until I saw WordPress offering so many features out of the box on their free plugins.

I wasn’t able to charge my clients that much for custom developers when there is a different system out there that you can use that they can use. And I started WordPress 10 years ago and it took only four, five years until we actually had to write code, PHP code. But I was a PHP novice, I didn’t get into it, until writing code, about six years ago or something like that in PHP. And it was so easy for an implementer to do that. And it will still be that, but I will never say, but for our clients, it was never easy to use WordPress when we say that it’s easy to use WordPress 10 years ago, it wasn’t really. There were multiple, was it a Tammie Lister who did a run down from how to change a theme at the beginning of Gutenberg, I thinks she had 62 steps to change the theme.

Grzegorz Ziolkowski: I can imagine that.

Birgit Pauli-Haack: Yeah, so, it’s getting really easier and easier, but of course there is a disruption there and we’ll use different tools there. So, I guess we have a lot of ready material for our listeners and we certainly wish that you communicate with us your ideas of what you think. And maybe also be a little bit more specific on, when you find it hard to work with WordPress. What exactly is it that trips you up, or that sometimes it’s small thing, sometimes it’s a big thing. And we all learn with that going forward, so we will have the blog, Chris Wiegman’s blog, his tweet and the thread around it, and Marcus Kazmierczak’s Modern WordPress Development, link to the WordPress Philosophy, and we also have Chris Lema’s Using WordPress Without Writing Any Code in the show notes for you to read.

Which brings us to What’s released? The Gutenberg 11.2, do you want to get us into it?

What’s Released – Gutenberg 11.2

Grzegorz Ziolkowski: Oh, sure. Let’s start with features. 

Features

So this plugin release, it doesn’t bring so many new features. It’s obvious the reason why it happens is because there is a summer on the Northern hemisphere and a lot of contributors that I engaged with on a daily basis we’re not present. So, there’s definitely some slow down. This is also a great time to do some improvements for the developers, so they don’t feel left out. And there are also some efforts to improve performance, on the features level. So most of the work is around blocks and adding support, functionality, which supports something like colors, or border, and similar features. And the biggest change is this for the search block. It’s a bit strange when I learn about that, that you can add color support, but for the button that is in the search form. So, you can modify something similar to other blocks, like the background color or the text color, but it’s only for the button, and there is also a border color support, are they there? I’m not quite sure it’s the border is only for the button as well.

Birgit Pauli-Haack: I tested it yesterday. I got a little bit sidetracked because I found a bug there, but not a bug, it’s the display thing, but the border color, as well as the support full border is actually for both the field, the input field, as well as the button. And you also can have different alignments for that. So it’s quite nice. You can actually, the example in the release notes or the make posts towards actually in a group block with, with image, background or color dual tone background, and then, search block on top of, it’s quite nice. Yeah.

Grzegorz Ziolkowski: Yeah. And we use the border edges functionality, they have very nice effects, that you don’t have to use rectangles anymore.

Birgit Pauli-Haack: Yeah. Found the borders in fashion again, so every 25 years we have rounded corners.

Grzegorz Ziolkowski: The good thing is that you need to use background images that swap with JavaScript on the fly like 20 years ago. But it’s back and the pullquote block, it also got board and color support. And the examples that were shared in the posts that described all the changes there is, includes very interesting effects, like you can use some sort of dotted border that use like very large dots and it creates a very nice FX for the pullquote. So I encourage everyone to give it a try and check some crazy values there and see how it looks like, because it might turn out that looks so nice that you would want to have it. And that’s basically all about features. 

Enhancements

And we also have several enhancements, which one of them I would consider or other as a feature, this is a button that was added in the publishing flow.

So when you schedule or publish the post, there is the sidebar, that shows up on the, like, it goes from the right side. If you are in maybe a regular, no like, you’re using in English. And if you’re using Arabic, you will be go from the other side. That’s why it’s confusing to explain. But anyway, the feature is that at the end, there is like summary, what has happened to which side you, you are using. And you can go and view the post there, but next to it, there is now a button that allows you to create another post. I don’t know if it’s very useful because at least for me, I don’t really write another post just after I finished the one, I rather celebrate.

Birgit Pauli-Haack: Yeah. I think it’s more for the micro bloggers that kind of want to upload an image and then do the next image like an Instagram post. But I like that it’s now trying to keep a user in the block editor for some publishing flows. I need to check, so it’s in the second step. Oh, it’s in the last step of the publishing flow. So you get the view post and as you explained it, there’s the add a new post button there. I need to test this out, how that behaves in the two-step process for the publishing process. So one of my pet peeves is that I started with the block editor. Can I log into my website and then already have add new post, at the first screen that I get to.

So I don’t have to look for all posts and add new and all that. Because all I do on a website once it’s set up is publishing posts. So, I might just want to start there, but this is the end of it. So after I do one, I can stay in the block editor with it and update.

 If you do photos, if you say, I want to just highlight certain links and then link out. I like it. So there is also some enhancements for the widget editor, and then for some of the components, but there seems to be a quite finite, not finite minuscule a little bit, not so obvious for people, but it makes the experience a little smoother. One of it is the core data, you can pass a query argument to a data selector shortcut. Could you explain that a little bit for me?

Grzegorz Ziolkowski: So, the change for the core data is about passing. Mostly the context that is going to be used with the REST API. That was actually one of the missing features. So if you know how our REST API works, it allows you to fetch the data with different contexts. So let’s say to view, you get a different set of fields, then when you want to edit something and every REST API endpoint defines it differently. So thanks to this change, you can have full control over that when using core data.

Birgit Pauli-Haack: Excellent. Excellent. 

Bug Fixes

Then we had some bug fixes. One is for the Featured Image, now authors can select images that were uploaded by other users. So, if an editor uploads an image, now authors can also use them for the featured image and their blog post. And that’s certainly helpful, and reduces the duplication of images, probably quite a bit, in the media library.

Grzegorz Ziolkowski: Yeah, definitely. One thing that I marked is that there was a change in the description of the embed block that was referencing Instagram. And I was surprised seeing that and turns out that Instagram is no longer supported as an embed in the block editor. So, that might be confusing. That was a fix, but it’s also good to know that Instagram embeds are no longer present in WordPress.

Birgit Pauli-Haack: Yeah. I think that was taken out last October when Facebook changed, how they, that you now needed a developer account with Facebook to use some of the, while the embeds, they no longer an embed publisher. So, now they changed it. There are quite a few fixes and, we had quite a few recommendations for plugins, and I certainly can reference that in the show notes again, but I think there was just an oversight to use Instagram as an example on how to use the embed with the Instagram, not doing it anymore. But the bigger problem was that it was showing up in the inserter when you started typing in Instagram. And so that would come up. So, that was leading the user a little bit astray on their publishing process. So, the one bug fix, also was the most used terms, we were running into a 403 error for non administrators, that has been fixed. And then we kind of tripped up a few users, I would imagine.

Grzegorz Ziolkowski: So, most of the bug fixes where a smaller changes closer to the code quality improvements, like for the FocalPointPicker component, there is now additional check that verifies the type is correct. Like NAN which stands for, Not-A-Number in JavaScript. So, nothing really interesting, like this is just everything to ensure that there are no unexpected behaviors in some edge cases.

Birgit Pauli-Haack: Yeah. But I’m glad that the team takes the time to go through that and fix those little things as well. 

Performance

So then we had some performance updates and one of them pretty much only one that’s a drag and drop and it’s now, drag and drop is such a wanted feature. And it needs to work really well to be useful, and Kerry Lui did some changes there and fixes there. So I don’t understand exactly what the changes were there.

Grzegorz Ziolkowski: I don’t know. I know, it’s very complex related to how the browsers work. So, if you are keen and learn how you can profile the performance of layouts and, CSS, how it works, the drag and drop, it’s very well explained in the PR that’s linked and Kerry, she’s doing fantastic job on that field. She has a lot of expertise. So you can follow along if you want to learn more. 

So one thing that I checked, one when playing quiz is that in the last episode, I was wondering if it is possible to drag and drop a block from the list view to the editor canvas or the other way around.

And it turns out that you can, and I was surprised. Yes, I don’t know how it works because I don’t think it contributed anything to that functionality at all. But it’s very well designed. If you can do so, so interesting interactions. One thing I noticed that there’s a bit of delay when you drag from the list view to the canvas, then it updates in the canvas and then the animation starts in the list view. So, it’s not the perfect experience, but you know, it was right.

Birgit Pauli-Haack: Right. But it seems that that’s something that Kerry was working on to avoid layout and repaints, but you definitely need to have it. So it’s all in the right order when you drag it from one canvas to the list view and back. So I can see that that’s a great challenge for programmers to get right, yes. 

Experiments

So, and that brings us to the experimentation or the experiment section. And right now, Riad started to put in a prototype and this plugin for a flex layout supported by the block editor. You made some notes on that.

Grzegorz Ziolkowski: Yeah. Because I first wanted to try how it works, but it turns out that it’s not that simple to, that on your website. So first of all, it’s an API change and that API is hidden behind a special flags. So if you add the examples for the group block and to enable that you need to change the block JSON file, for the block, and there is experiment layout already present, but it’s set to true. If you want to use this new feature, you need to choose an object, and there is all over switching flags, but this API is still in progress in, we will change for sure, because Riad left a ton of notes, how it can evolve. So he said that we could introduce more layouts, such as grid or absolute position in container. So it’s really nice when you play with that, but there’s one more thing, it only works with full-site editing themes, that content theme JSON file.

Birgit Pauli-Haack: It needs to be set in the block JSON, black JSON, as well as on theme JSON?

Grzegorz Ziolkowski: No, we don’t need to do anything in the theme JSON but you need to have a theme that have this file, because this experimental layout, it only works for you if it’s full-site editing. I know it’s quite confusing, but I learned the hard way trying to play with that. But once it’s there, it’s really nice. So when you change to the flex, then if you had rows, then you suddenly have items next in one row next to each other. And even if you go and try to move the one of the inner blocks, then the arrows, will be to left and right. So they adapt to the layout, which is pretty nice.

Birgit Pauli-Haack: Yeah. I think there was, years ago, there was an issue that one that, that I also, and I put an actually in the actively discussed. So let’s talk about it again there. So for the Changelog, there’s a lot of testing updates and a lot of build tooling updates. Is there anything that stand out that you wanted to talk about today?

Grzegorz Ziolkowski: There isn’t anything that would count my attention. So I don’t have anything to share. I mean I could but-

Birgit Pauli-Haack: Well, you could probably another hour or so about it.

Grzegorz Ziolkowski: I’m thinking mostly about our listeners and what could be interesting for them? So I didn’t identify anything this time, but there’s a lot of them and mostly this is related to the constant improvements to-end-end testing. And the fact that it’s almost stable these days, which is a great improvement for all the contributors.

Birgit Pauli-Haack: Yeah, absolutely. And there is actually a new testing team, not a new team, but the test team has more new reps. And Tonya Mark has written about that on the test blog. And so they all, some contributors that wanted to get deeper into testing of new versions of the WordPress core, as well as on Gutenberg and have more look at the tickets for needs tuner tests or needs E2E tests to, and add those flags to the tickets. So it can be quite a bit more stable, when it comes out in beta. So I think that’s a good development here too. And if you’re interested in that, I think that the test team can use your assistance there and your help and your expertise. Of course.

Tools

Grzegorz Ziolkowski: So I think I have one thing, Riad Benguella, he’s exploring a special website that would track performance metrics over time for the Gutenberg editor. So, It’s the same thing that you see every time when a new Gutenberg release post is published the bottom of every post, and that would be something that like a chart that would show you how it changes with every Gutenberg release. So, to save some historical data, if that’s working, that would be really nice to observe how it all changes.

Birgit Pauli-Haack: Oh, nice. I just clicked on the link that was in the PR. So I’d like it. It’s a website that’s on Versal, and talks about the different, the type speed, the inserting, the opening, insert opening, insert of hover items, the load of the whole editor, selecting block, selecting and insert a search. So it’s quite nice. Yes. I linked through the additional site as well in the show notes. 

Documentation

And then there were some documentation changes. Some of them were as minuscule as adding a missing space or changing an intake, but one of them is the missing IATN, the internationalization filters for the documentation that was caught by one of the developers on Twitter and turned out it didn’t come over from when the documentation is automated or is imported into the WordPress developer handbook. So that has been fixed now. So you get all the filters that deal with internationalization of your block editor assets.

Grzegorz Ziolkowski: Yeah, that’s really nice for plugin or if they want to modify translations. And it existed there since WordPress 5.7. So, quite a while.

Birgit Pauli-Haack: Yeah. Sorry, it wasn’t in the documentation. And there was one block API change where you, I think it was one of your PRs, how to improve block assets or versioned. And what’s the background of this and why was that important?

Grzegorz Ziolkowski: Oh, it was purely technical on the WordPress core side. So there were some concerns that we were using the file time function, which is based on the five system to generate version for style sheets, which when you have more complex setup, like several servers, then the value might differ when load balancer kicks in. So, it’s fine for a single website, but for more complex, it’s not so reliable. So, the idea is that, we now have in block JSON version field, so you can provide the version of your block, and that is used for style sheets to define whether browsers should load a newer version of the same style sheet.

Birgit Pauli-Haack: Yeah. It’s kind of to bust out of the cache, for the style sheets. that’s very interesting. Cool.

Grzegorz Ziolkowski: Yeah. Even if it’s not provided, then the WordPress version will be used. So, it’s still not a big deal if someone forgets to do it, but in some cases, if you resolve, and then you probably should add that to our blocks.

Birgit Pauli-Haack: Yeah. It makes it definitely explicit, it’s probably better than just assumed.

Code Quality

And then there were some code quality issues that were resolved or checked. One of them is a performance issue, that’s the refactor of the post author component. But George Mamadashvili, short MamaDuka, he refracted it, so it only requests fields that are needed for the rendering, like the ID and the name, and that reduced the trend data transfer considerably by roughly 50%. So, these kinds of changes or behind the scenes, they’re very technical, but it’s really important to know that they are happening. Good. So this brings to the end of the changelog. Yeah. It’s a good release and try out all the new features. And there is one discussion that we mentioned earlier was about the flex layouts. 

What’s in Active Development or Discussed

Now that the prototype is in the plugin, Riad Benguella who published that also opened another issue to discuss further iterations.

And we’ll have it in the show notes for you. It’s 3-3-6-8-7, the issue. And he describes the current state of the floor layout and the flex layout. And then the, an experimental way to switch between the two, as Grzegorz mentioned earlier, and then also outlines concepts that were resolved in a refactoring of some of the blocks to a declarative behavior on context, but Matias Ventura also chimed in and mentioned the grid layouts to be worth exploring as well.

So if you dear listeners want to get in an early discussion of a new feature, this is the time for this feature, subscribe to the issue, chime in in the discussion, and lend your expertise and your ideas to the developer team. I know that way back in 2019, for instance, I think in November ’19, Automattic published a grid layout block. And I wonder how many of the learned lessons can be applied to the core editor. So I’m also linked to that particular plugin and had his last updates were three weeks ago. So it’s still on, and it has about a hundred thousand active installs. So it’s definitely something people are looking for, and your discussion, you can definitely contribute to that.

Grzegorz Ziolkowski: From my perspective, I think that the biggest advantage of the current exploration is that it or uses it an existing block and only add it as a feature.

Birgit Pauli-Haack: Well, this is our bell, it’s the end of the changelog. 

So, we are at the end of the show, and I want to remind everyone too, if you have something that we should talk about, what questions or news that you want us to include, send them to email, changelog@gutenbergtimes.com. That’s changelog@Gutenbergtimes.com. If you want to write a review, if you like it, write a review for us, please in either the iTunes or Stitcher, or any other of the podcast directories, it would really help us to spread this wide and far. 

All right. Well, thank you, Greg. This was a great time to spend with you again.

Grzegorz Ziolkowski: Thank you Birgit, and thank you for all our listeners, we are really glad to have your support. And so, see you all in two weeks.

Birgit Pauli-Haack: Yes, two weeks, and thank you for listening. Bye-bye.

Howdy,

It was a very busy week of meetings, news and live streams. The buzz around the next major WordPress version keeps everyone excited and alert. There is also hard to deal with FOMO*, as we can’t be at two or three places at the same time. And who has time to watch all the recordings?

Well, next week won’t be any different: Monday, the Page Builder Summit will start with 35+ talks around freelance and agency business their tools. Below is a list of all Gutenberg related talks.

The WordPress teams published quite a few posts around the WordPress 5.9 release. It’s not yet Field Guide time, though.

Hope, y’all have a great weekend with reduced screen time.

Yours, 💕
Birgit

PS: The recordings of the last two Live Q & As are available on YouTube. The posts with resources and transcript are in the works.

• From Classic Themes to block-based Themes
• How can we make building custom blocks easier?

PPS: In a very short video, Jamie Marsland shows us Why WordPress Gutenberg is a threat to Elementor and Divi. #shorts

*Fear of Missing Out

Gutenberg and WordPress Development

In his post, WordPress 5.9 Feature Go/No-Go, Hector Prieto published the summary of the meeting, the list of features, the recording, and a transcript. The recording is particularly interesting for Matias Ventura’s demo of the current state of the major features:

• List View – Expand-collapse, Drag & Drop
• Auto-Anchors on Headings
• Border support for blocks
• Layout – Gap spacing, Flex & Row,
• Typography Tools across Blocks and styles
• Full-site Editing as opt-in, beta preview.

Throughout the meeting, I heard the language shifting, in an attempt to simplify talking about the various features.

• Now: Block Themes (instead of Block-based Themes)
• Now: Editor (instead of Site Editor or Template Editor)
• Now: Styles (instead of Global Styles)

Sarah Gooding wrote about it in the WPTavern: WordPress 5.9 Go/No-Go Update: All Proposed Features Are Moving Forward

---

The work on WordPress 5.9 is on track with The Preliminary Road 5.9, Matias Ventura posted a couple month ago, except for the Navigation Screen, that did not get past the backwards compatibility issues. The Navigation Block as a major feature for site-building will be available for Block Themes in the new WordPress version.

If you want to learn more about the status on the Navigation Screen and Block project, the team came together in a Hallway Hangout to discuss the priorities for the WordPress 5.9 release. Daniel Richards posted the Summary: Navigation Editor and Block hallway hangout, including the recording of the meeting. One meeting topic was Backwards compatibility with the current system for the Navigation screen.

---

The Gutenberg developers also release a new version of the Gutenberg plugin. Gutenberg 11.7

Adam Zielinski, release coordinator for this version, published the release notes: What’s new in Gutenberg 11.7 (October 13th)

Justin Tadlock took it for a spin and reviewed it for the WPTavern: Gutenberg 11.7 Iterates on Global Styles, Improves Adding Navigation Links, and Adds Column Spacing

Only two more Gutenberg releases (11.8 + 11.9) until Feature Freeze on November 9th, 2021.

---

Kelly Hoffman and James Koster from the WordPress design team shared their ideas for Site editing IA concepts: How to surface and access new features. (IA = Information Architecture)
They wrote: “Do we want to begin down this path towards a single page app-like experience, or would it be better to keep things separate for now? It’s time to explore and design the IA (information architecture) so that we can begin to paint a picture of how we might merge this exciting functionality in to core.”

You can follow along the explorations via the prototype links on Figma. You are offered two ideas: All in one means one editor screen, reached via the “Appearance” Menu, and you edit templates, post, and pages, template parts or change the styles all on this screen that adjust for the various context. The other idea is to keep post and page editing and site editing features separate, but surface some template parts to be reachable via the post/page editor.

Example screen: Site editing IA concepts: How to surface and access new features.

I can see the all-in-one idea working, as it would hide the rest of the WPAdmin for the common content creation tasks, as that’s where many end users get lost or bombarded with plugins or theme upsell and update notices. I also enjoy the alternative design to the “Welcome Guide.”

This is not a quick decision to make. As the second one feels familiar, and the first one very new, I suspect my decision might be skewed by the “known” versus the “new”, instead which of the avenues makes the best sense for the End-User.

If you have an opinion formed, leave a comment on the post!

---

With WordPress 5.9 only two months away and Go-NoGo decisions made, Anne McCarthy started a second round of collecting questions you might have about Full-site editing. Submit Full Site Editing questions by Oct 27th. McCarthy asked “As it’s possible, please focus questions specifically around WordPress 5.9 as those will be the highest impact to address and not on larger strategic decisions.” 

 “Keeping up with Gutenberg – Index 2021” 
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.

---

Creating and using Block Themes

Marcy Diaz recounted in “Custom WordPress Full Site Editing Theme Now Live” who she converted her site from a classic theme to a Block Theme. Along the way, Diaz shared her experiences interacting with tools and interfaces of theme.json or the Styles sidebar in the editor for templates.

It started as an experiment, but it came together easier than I expected, and so it’s live on this site now.

Marcy Diaz

---

In Proposal for Themes To Highlight Block Patterns From the Directory, Justin Tadlock explores Kjell Reigstad’s idea: Designers could not only provide patterns with their themes, but also highlight block patterns from the WordPress.org Pattern Directory to their users. It would reduce the bundle size of the themes, and exposes site builders to the broader range of Patterns in the directory. What do you think about this?

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

---

Speaking of WordPress Block Patterns, Tammie Lister added 14 more inspiring block patterns to her Patternspiration site. I love the alignment of text and photos in 006 and the Chapter list of 002.

Tammie Lister, Patternspiration 002

---

Many theme developers are taking their first steps on creating a block theme. Carolina Nymark has a few tips on Troubleshooting block themes. Nymark has been working on block themes for little over a year and has tackle pretty much all problems, you could encounter at the beginning: From syntax errors in theme.json to Template issues.

Building Blocks for WordPress

On his Thursday’s on Twitch live coding session, Ryan Welcher showed us how to create an accordion block that uses the InnerBlock component.

---

Herb Miller, developer and early adopter of block development, did a deep dive into Internationalizing and localizing block-based plugins. Miller first explains the difference between internationalization, translation and localizing, lists the tools, you’d be using and explains with code examples how to make your JavaScript and PHP code ‘translatable’. An excellent tutorial, that helps you offer your products to a broader audience and empowers translation teams to make your plugin available in many other languages.

---

Join us on October 28th at 12 pm EDT / 16:00 UTC
Gutenberg Times Live Q & A: Converting classic widgets to blocks
Learn from the BuddyPress team members, Mathieu Viet, David Cavins, Varun Dubey.

---

David Gwyer published another tutorial on his new site InnerBlocks: How to Use a Popover Component. He starts off with using the official WordPress scaffolding tool for blocks create-block and then walks the process to add the Popover Component to our new block and includes handling of state to manage visibility of the popover. It’s a great real life example of block development.

---

WordPress Events

October 18 – 22, 2021
Page Builder Summit Take a look at the schedule!

Here is the list of Gutenberg / Block-editor presentations

• Forging the Future with Full Site Editing with Anne McCarthy (10/18 – 9am EDT)
• The Future of Building WordPress Websites with Brian Gardner (10/18 – 12pm EDT)
• What does Full Site Editing Mean for Page Builders? with Joe Casabona (10/19/ 9am EDT)
• Customizing WordPress Block Editor for Client Projects with Birgit Pauli-Haack (10/19/ – 10 am EDT)
• Mastering modern WordPress with Full-site Editing & Custom Blocks with Rob Stinson (10/20/ – 5am EDT)
• How to Build Any Page Layout Using Kadence Blocks with Jake Pfohl (10/20/ – 12pm EDT)
• Building a Custom Blog Archive with Blocks with Mike Oliver (10/21/ 11am EDT)
• RIP Page Builders with Chris Lubkert (10/19 – 1pm EDT)

---

October 28, 2021 – 1 pm EDT / 17:00 UTC
Post Status: Headless WordPress Webinar

With Experts from WebDevStudios

• Brad Williams, CEO and Co-Founder
• Lisa Sabin-Wilson, COO and Co-Founder
• Greg Rickaby, Director of Engineering
• Amor Kumar, Frontend Engineer

---

November 4th, 2021,
WPEngine Summit 2021 (EMEA)
starts at 10 am UTC / 6am EDT

With many fantastic speakers, among them CEO Heather Brunner, Chris Weigman, Rob Stinson, Hashim Warren, Grace Erixon, and Brian Gardner

• Schedule
• Tickets

---

On the Calendar for WordPress Online Events site, you can browse a list of the upcoming WordPress Events, around the world, including WordCamps, WooCommerce, Elementor, Divi Builder and Beaver Builder meetups.

---

Don’t want to miss the next Weekend Edition?

Type in your Email address to subscribe.

Subscribe

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

Thanks for subscribing.

---

“Building blocks” by jgbarah is licensed under CC BY-SA 2.0

Something on my radar right now is third-party plugins that have settings in the Customizer. What I gather of friends who are the devs working on Customizer and front-end stuff within a few plugin companies, global styles and block styles are not yet on their radar. So what happens if someone installs Twenty Twenty-Two or another block-based theme? The left admin menu for Customizer isn’t there. The janky way to get there is via Appearance > Themes > Customizer. But the expectation is that third-party plugins and themes need to move settings over. In fact, this seems more like they need to duplicate settings in both places for a while.

Anonymous

For those out of the loop, let me provide a quick refresher on this topic. When WordPress 5.9 lands, we expect it to ship with the new site editor and global styles interface. However, most users will not see this screen unless they are running a block theme.

Given that the upcoming Twenty Twenty-Two is also shipping with WordPress 5.9 and judging the popularity of past default themes, we can expect many thousands of users will be transported into this whole new world. For some, this might be as shocking as the launch of the block editor in 5.0.

When a block theme is active, links to access the old and familiar customizer will disappear from the user interface. The widgets and nav menu screens won’t be around either. However, they will still be accessible if you know the URL for the screens.

We first learned this would be the case last year as part of the Gutenberg 9.3 release. There is also an open issue to ensure that the site editor has feature parity with some core WordPress settings.

It is OK that these features are being phased out for block theme users. They were all early, disparate attempts at creating individual pieces of what the site editor will allow. WordPress is bringing all of these concepts together into a more cohesive user experience. It is a standard that contributors can continually iterate on. It will not be perfect out of the gate, but this first version in the core platform should fuel the feedback needed to improve it as more users start installing block themes.

The problem presented here has more to do with the plugin market. The customizer was initially built as a theme-settings tool and has primarily been used for that purpose. But, many plugins have tied various settings to it over its nine-year history. A search for wp_customize in the plugin directory pulls up over 1,400 results. The customize_register hook shows over 1,900. These are not necessarily exact matches for how many plugins actually add panels, sections, settings, or controls. However, it is an indicator that many are relying on it to present options to end-users.

So, we are back to the question at hand. What happens when a user installs a block theme, such as the upcoming Twenty Twenty-Two, while using a plugin that relies on the customizer?

It depends.

Some plugins like WooCommerce have already conveniently placed a direct link to their customizer panel/section in the admin menu. This will be a non-issue for their users. However, for everyone else, the customizer will seem to disappear entirely.

WooCommerce customizer options accessible with block theme.

In a matter of weeks after 5.9, depending on how quick the adoption of Twenty Twenty-Two occurs in particular, we could be looking at thousands of confused users. Of course, all of this could change in the time leading up to the release. However, this is a conversation that needs to happen now.

“The concern here is for end-users,” said the anonymous questioner. “They will be looking at knowledgebase articles, directions in plugin settings, and more indicating where to look for the settings.”

At least at the moment, the onus is on plugin authors to address this for their own users. However, there are multiple pathways they may want to go down.

The most straightforward method is to follow the lead of WooCommerce. The plugin checks the gutenberg_is_fse_theme() conditional (note that this function name may change). If it returns true, the plugin adds a link directly to its customizer panel.

Linking to a customizer panel, section, or control is simple. Plugin authors can find the URLs in the developer handbook. They can also just copy the technique the WooCommerce team employed.

This is a quick method to ensure users do not lose access to their options if plugin authors cannot make changes before WordPress 5.9 lands.

In the long term, it is not the ideal solution. The customizer will be around for a long while, but plugin authors will need to deal with two sets of users: those running both block and classic themes.

Because each plugin is different, solutions will need to be different. Many can simply use the Settings API to build a custom options screen. If that is a workable solution, it will not matter what theme the user is running.

However, the reality might be maintaining two systems for both sets of users. One that integrates with the customizer and another that pulls options into the site editor. If the plugin has design-related features, block theme users will expect to see settings in the new interface.

On the theming side of things, there should be fewer problems. A block theme does nothing with the customizer anyway. One outstanding issue would be converting starter content over, and there is an open ticket to bring that to Full Site Editing.

More than anything, keeping open lines of communication with users will help ease the transition. Some of that should come from core WordPress. However, many users will need to hear it from their plugin and theme developers. This might be blog posts, knowledgebase or tutorial updates, and keeping up with support.

Then, there is the final solution, one that WordPress itself could implement. It is also the path of least resistance.

WordPress should automatically detect filters or actions on customizer-related hooks. This should trigger a “customize supports” flag and maintain the admin menu and toolbar links to the customizer screen. This would give developers some time to catch up without confusing users in the process. There might be a few false flags or missed integrations, but it should be able to effectively catch the majority of use cases.

The go/no-go deadline for deciding on features for WordPress 5.9 was set for October 12 but the conversation was pushed back two days. Today, the core leadership for this release announced that everything in the previously-proposed scope for 5.9 will be moving forward.

Users can expect block themes, template and template part editing flows, the new default Twenty-Twenty Two block theme, the Styles interface, design tools, the Navigation Block, all manner of UI improvements, and pattern insertion directly from the Pattern Directory. Héctor Prieto, who is assisting with technical project management on the release, emphasized that many of these features are still in progress:

To note, not all of the above are currently ready, but there is some level of confidence that they can be by the time of 5.9.

A new WordPress 5.9 Must-Haves project board on GitHub shows a broad overview of the issues contributors are focusing on to get the release ready.

Prieto also published an exhaustive transcript of the meeting. There were no strong objections on specific features moving forward but there seemed to be a general acknowledgment that some features are still in a beta state. Those present at the meeting agreed that some kind of beta label might be advantageous where users could be directed to the Gutenberg plugin for faster updates to features that are still not fully polished.

One particularly challenging feature has been navigation. “I think from my perspective, the thing I was a bit worried about was the navigation menu flows, which I think we did a lot of progress over the last few weeks,” Gutenberg lead engineer Matías Ventura said. “And I think we need to set some good boundaries there.

“There has been a lot of work in also supporting sort of mega menus where you have in your sub-menus, you have images and paragraph any sort of block, which is cool. But there’s also like the 80% of cases where you just have a few links, and we need to ensure that that experience is as best as we can make it. I think we’re in a better place. And I think we’ll get there.”

Beta 1 is expected November 16, and the official release is scheduled for December 14. If you want to see an early demo of WordPress 5.9, check out the recording of the meeting below:

“If plugin authors were better educated maybe they would make some different choices.”

In this episode of Post Status Excerpt, Cory and David talk about WordPress's reputation relative to its performance. This discussion unfolds in light of a new proposal for a Performance Team for WordPress core. What should happen to improve the WordPress experience (for both the user and for search engines) on the front-end and the admin experience as well? Education? Notifications to the user?

Also covered in this episode: We are formally announcing the existence of the new Post Status homepage, which is still a work in progress. We're also encouraging listeners to check out the “Week at WordPress.org” (get the feed here), and submit your Black Friday / Cyber Monday deals to us at Post Status.

Every week Post Status Excerpt will brief you on important WordPress news — in about 15 minutes or less! Learn what's new in WordPress in a flash.

You can listen to past episodes of The Excerpt, browse all our podcasts, and don’t forget to subscribe on Spotify, Amazon Music, Google Podcasts, iTunes, Castro, YouTube, Stitcher, Player.fm, Pocket Casts, Simplecast, or by RSS.

Mentioned in the show:

• Proposal for a Performance team
• The Legend of the Headless Website — Post Status Live with Brad Williams, Lisa Sabin-Wilson, Greg Rickaby, and Amor Kumar
• This Week at WordPress.org (October 11, 2021)
• Share Black Friday / Cyber Monday Deals With Post Status
• David Bisset (Twitter)
• Cory Miller (Twitter)
• Post Status (Twitter)

Sponsor: Wordfence

Who can afford downtime, a black mark on their brand’s reputation, or the SEO impact of getting hacked? That’s why so many WordPress sites rely on the real-time protection provided by Wordfence Premium. Now, Wordfence Central offers Premium subscribers a powerful and efficient dashboard to manage security for all their sites from one central location. Try Wordfence today.

The Jetpack Scan team has published a summary of two issues recently discovered in the WP Fastest Cache plugin – an Authenticated SQL Injection vulnerability and a Stored XSS Via CSRF vulnerability.

“If exploited, the SQL Injection bug could grant attackers access to privileged information from the affected site’s database (e.g., usernames and hashed passwords),” Automattic security research engineer Marc Montpas said. This particular vulnerability can only be exploited on sites where the Classic Editor plugin is both installed and activated.

“Successfully exploiting the CSRF and Stored XSS vulnerability could enable bad actors to perform any action the logged-in administrator they targeted is allowed to do on the targeted site,” Montpas said. He also found that attackers could “abuse some of these options to store rogue Javascript on the affected website.”

WP Fastest Cache is active on more than 1 million WordPress sites, and the plugin also reports 58,322 paid users. Emre Vona, the plugin’s author, patched the vulnerabilities in version 0.9.5, released this week. Jetpack recommends users update as soon as possible, as both vulnerabilities have a high technical impact if exploited.

Released yesterday, Gutenberg 11.7 is one of the more exciting releases we have had in a while. The Global Styles system iterations continue to impress. The lighter nav experience makes adding links easier, and a spacing control for the Columns block delivered one of my oldest wish list items.

The Site Logo block supports duotone filters, bringing it up to par with other image-related blocks. Plus, theme authors can set the default filter via their theme.json files.

There are several other changes to love, such as the refreshed gradient picker design and typography controls for post navigation blocks. The block alignment control in the toolbar now also displays a “None” option. This should make it easier for users to revert from a previous choice.

Lighter Navigation Experience

“Add nav item” feature brings up search.

Building nav menus has consistently been one of the frustrating experiences within the block system. Iterative improvements have made it better, but the actual process of adding links has been a painful one, at least until Gutenberg 11.7 rolled out yesterday.

In previous iterations of the block, users had to go through a two-step process for adding any menu item. This was an issue I called out in Round #9 of the FSE Outreach Program:

This stage of testing calls for adding multiple page links as both top-level and sub-menu items. When clicking the + button to add a link, my first instinct is to search for the page itself. However, the available field is a block search rather than a page search.

In the latest version of the plugin, clicking the + icon allows users to directly search for or type a URL. There is no need to figure out which block (e.g., Page, Post, Custom, etc.) to insert first. This change is part of an ongoing effort to create a lighter navigation experience.

While the link-adding experience was much better, I could not initially figure out how to add a simple homepage link without typing the full URL. Typing “home,” “index,” or a simple “/” character all failed.

After realizing that the previous search did not work, I tried other known site pages. Posts, pages, categories, and tags all worked without issue. However, I could not pull up author/user archive URLs through the search field.

There is one place to add a homepage link, and that is via transforming the menu item to a Home Link block by clicking on its icon in the toolbar. Other blocks are also available for this transformation process, such as Social Icons, Site Logo, and more.

Transforming a link to a “Home Link” block.

On the whole, this is a much-needed improvement to the Navigation block’s user experience. It likely comes closer to hitting the 80/20 rule when deciding how a feature should be implemented.

Create New Pages From the Link Inserter

Creating a new page from the link popover.

The user experience for adding links has been one of the highlights of the block editor this year. In June, Gutenberg 10.9 introduced rich URL previews, which landed in WordPress 5.8. In the latest release of the plugin, developers have kicked it up a notch.

Users can now directly create new pages when adding links. Previously, users could only achieve this feat while adding items inside of the Navigation block. Now, it is available for links added anywhere.

Mind the Gap

Custom spacing between columns.

Users can now entirely control the gap between columns via the new Block Spacing option. I knew it was coming — eventually. That it took three years since the release of the block editor for it to actually happen has been painful. I was still a full-time theme and plugin developer when I added this to my wish list. Granted, CSS flexbox support for gap was not widespread then, but we could have still managed with old-fashioned margins in the meantime.

I am just happy that the long-awaited feature has finally landed. Now, I can begin phasing out the custom block styles I was using to replicate it.

The feature works on top of the block gap feature that was first shipped with Gutenberg 11.4. Theme authors may need to make adjustments if they have written custom code for controlling the spacing between columns.

Global Styles and Color Palettes

There is a push to improve the upcoming Global Styles feature, which could land in WordPress 5.9 later this year. Gutenberg contributors have made massive strides in improving the experience, building off its overhauled navigation in version 11.6 of the plugin.

The most notable interface change in this release is the new Color Palette section.

Colors panel with the Palette section at the top.

Instead of dropping the palette below the color options, it is now front and center. This is a feature that will ultimately empower users to customize their sites. The decision to focus on this part of the UI is welcome.

After opening the palette section, users can edit the theme-defined colors or click the + icon to create new ones. These colors will all show up as options in the block and site editors.

Color palette editor in the site editor.

Users should also see the Layout section at the root level of the Global Styles sidebar. They can now adjust the padding for the overall site.

I am still running into an error when trying to adjust the typography at the root level. This was an issue I first noticed with Gutenberg 11.6.

I would like the Blocks section of the Global Styles panel to show the icons for individual blocks. With dozens of blocks, it is hard to scan through the list.

Individual block styles list.

Another improvement, particularly if we forego icons, would be to alphabetize the list.

Yoast and Google-sponsored WordPress core contributors are proposing the project add a Performance team to improve core performance as measured by Google’s Web Vitals metrics.

“Users expect and prefer fast experiences (consciously or otherwise),” Yoast-sponsored full-time core contributor Ari Stathopoulos said. “Research shows that fast websites can provide a better user experience, increase engagement, benefit SEO, increase conversion, and be more economically and ecologically friendly.”

There is no doubt that users expect and can benefit from improved performance, but there are a number of variables at play in any given WordPress site. Looking purely at core performance, Stathopoulos said WordPress is not holding up to the competition.

“Compared to other platforms (e.g., Wix, Shopify, Squarespace), WordPress is falling behind,” he said. “Other platforms are on average faster – and becoming increasingly faster – than WordPress websites (see The HTTP Archive’s Core Web Vitals report), and are actively investing in (and marketing) core performance-as-a-feature [1, 2].”

The HTTP Archive, which provides a common data set for those conducting web performance research, found that only 21.5% of sites assessed have good Core Web Vitals scores as of September 2021. While that percentage has been increasing over time, competitors that are already outperforming WordPress sites are also rapidly improving their scores. Stathopoulos described it as a “widening gap” between WordPress and other platforms.

One of the main challenges is that WordPress site owners have a lot of freedom to use whatever themes and plugins they want on their sites, which makes performance tougher to tackle than the hosted platforms cited for comparison. The proposal states that “achieving reasonable performance levels shouldn’t be plugin territory, but part of core” and that end-users should not be expected to become performance experts.

“Achieving high levels of performance requires technical considerations to be ‘built-in’ across the whole stack; and as this is often not the case with themes/plugins, performance solutions are limited to ‘brute-forcing’ performance solutions over non-performant behavior (e.g., output buffering),” Stathopoulos said.

The proposal drew a strong response from contributors, SEO consultants, and representatives from hosting companies, offering help and suggestions.

WordPress lead developer Mark Jaquith, who has a particular interest in this topic, said the biggest issues he sees today are related to frontend performance and the asset pipeline:

WordPress has no (direct) support for deferring style loading. It has no system for critical theme styles. For JavaScript, it has no support for defer, async, type="module", or nomodule. The default is to load all scripts in the header. WordPress itself shoves its extra code for emoji and the block library into the header. WordPress injects JS code and styles that eschew the asset pipeline altogether and directly attach to wp_head and wp_footer. Plugins just directly barf out bespoke script tags that are difficult to alter. By the time that you’ve added 10 plugins to your site, your odds of having jQuery loaded (in the header) on every single page load are extremely high. No one is incentivized to be a good citizen (including WordPress itself) because there’s always someone else who is polluting worse than you. “If jQuery is already enqueued by something else, I guess I better use it.”

Jaquith’s summary describes a wider ecosystem problem and concluded with a sobering warning.

“It’s a huge problem, and fixing it is going to take a lot of effort, willpower and time,” he said. “It’s worth doing. If WordPress frontend performance continues to decline, the project is going to cease to be a viable option for any site that cares about its SERPS.”

One WordPress performance consultant, Eroan Boyer, suggested adding a dedicated tool in the Site Health screen that would show how much JS and CSS is loaded on each page type (front page, post, page, CPT), and where they originated.

“Attributing where a given script or stylesheet comes from is something I’ve been working a lot on in the context of the AMP plugin,” Google Engineer Weston Ruter said. “I don’t know if the implementation in the AMP plugin would be suitable for core, but I’m interested in this space.

“If we can correlate where given markup comes from to the (negative) impact on page performance, then we can begin to highlight offending themes and plugins to begin to provide some accountability for what is being added to the frontend.”

Gutenberg engineer Riad Benguella published some research in August on the impact of plugins’ performance on the editor. Chief offenders among popular plugins included WooCommerce, Yoast SEO, and Jetpack. This is another aspect of performance that affects WordPress users more than site visitors. Web developer Takis Bouyouris suggested the creation of a performance framework that plugin developers could follow to avoid making products that negatively impact core performance, both on the frontend and in the admin.

So far the proposal has not received any major objections and contributors seem eager to help in any way they can. Stathopoulos said the next steps will be to set up a Slack channel, a meeting schedule, and a space on make.wordpress.org. Once the infrastructure is in place, contributors can begin benchmarking performance, defining success criteria, and identifying priority projects for Core Web Vitals improvements.

As usual, I am always on the lookout for plugins that allow users to have fun with their websites. I like to mix it up from time to time here on the Tavern and not be all-business-all-the-time. And, that is where the new Adrian plugin comes in. Its goal is to take all of the hard work out of selecting a font pairing for end-users.

The plugin derives its name from Swiss typeface designer Adrian Johann Frutiger. The plugin author, who wishes to remain anonymous, said the typographer was one of their favorites.

“All plugins have such serious names stuffed with SEO keywords, and I just wanted something fun,” they added.

Instead of the typical route of submitting it to the WordPress.org directory, the author decided to launch a one-off site to showcase the plugin. The cost runs the price of simply subscribing to an email list to access the download.

Adrian is essentially a font selector. However, instead of picking each font for various theme elements, users can select from curated pairings. And, taking it one step more, it provides unique names for all of them.

For example, the Breakfast Cereal (yes, that is the actual name) option uses the big and bold Luckiest Guy font for headings alongside News Cycle for body copy.

Breakfast Cereal font option.

If nothing else, the plugin is simply a treat to test because of its fun names. With options like Cherry Soda, Cowboy, and Hollywood Lights, it adds a little flavor to the entire process.

“I think there are lots of people who would rather you hand them an option rather the ability to make the decisions themselves,” said the plugin author. “No one in their right mind looks at the 1.2K fonts in Google Fonts and says, ‘I can’t wait to pick a font pairing.’ It’s overwhelming and out of most people’s depth.”

Even as a former full-time theme designer, this could be a tedious job. I would often spend hours tinkering with pairings, attempting to find the right personality for a design.

The plugin takes most of that work and boils it down to a little more than three dozen options.

There is a little something for everyone. For example, if you want a retro gaming feel, the Insert Coin pairing of the pixelated Press Start 2P font for headings and Roboto Mono for text can bring a little nostalgia to your site.

Insert Coin retro-gaming font pairing.

The plugin is built on top of the WordPress customizer. It adds a single section and control for selecting the font pairing.

A downside to this might be for users currently running a block theme alongside the Gutenberg plugin. Menu links to access the customizer screen are hidden. However, there is still a button on the Themes admin screen, at least for now.

Customize button for the active theme.

One of the things I like about the plugin is that it does not ruin body copy. Far too often, such systems try to get too fancy with text for longer-form content, and they utterly fail. Instead, Adrian keeps this in check. The fonts that veer into the wilder territory are limited to headings.

The plugin is not all fun and games. It has its serious side too. The World Literature option that pairs Vollkorn and PT Serif is elegant, creating an enjoyable reading experience.

World Literature font pairing.

The Novella option is similar, replacing Vollkorn with EB Garamond.

The most irritating thing about the plugin is that it requires a full refresh of the customizer preview panel each time the user selects a new font. This is par for the course, though. Most themes and plugins I have tested for WordPress have never utilized the customizer to its fullest potential.

With minimal JavaScript and the Web Font Loader script, the plugin could load the chosen font on the fly. It would make the experience much smoother. However, because the customizer is going the way of the dinosaur, I would use my time and effort to focus on a solution geared toward Full Site Editing.

Success may vary from theme to theme. Typically, I use a three-font system with most of my theme design work. One font family for headings, one for body copy, and another for secondary text. While the plugin worked well enough to overrule the first two, it failed to alter the third. This is not necessarily Adrian’s fault because it does not know the class name it must target in this instance.

This is also the reason I favor design-related features falling squarely on the shoulders of theme authors. I like the forward-thinking of the plugin author — tackling font decisions in a way that does not overload end-users with seemingly infinite choices. However, I would rather see the system coming from the theme.

With that said, I could be singing a different tune as the global styles system matures. It has not yet shipped with WordPress, but it could land in version 5.9 later this year for block theme users. As the community builds more standards around the feature, there may be more opportunities for plugins like Adrian to add features.

The plugin author is not quite ready to go that route yet. “I imagine that this can be ported pretty easily to the new FSE interface if I happen to get enough users to keep it going,” they said. “Finding someone who knows the new system and is a freelancer is next to impossible, so I thought why not test the idea the old way.”

For now, the plugin does its job pretty well, and most users still rely on the customizer. There is still plenty of time to figure out the rest.

The proposal for the 2022 Global Community Sponsorship program will not include funding for WordCamps again this year, due to the unpredictability of hosting in-person events. The pandemic continues to make conditions unfavorable in many areas of the world where WordCamp and meetup organizers have opted to continue with virtual events.

In the past, the Global Community Sponsorship program has offered multiple tiers of funding in support of official, volunteer-organized WordPress community events. In 2020, before the program was suspended, global sponsorship tiers ranged from $40,000 – $160,000.

The updated proposal knocks sponsorships back to a single annual package, billed at $10,000 USD per quarter. Sponsor benefits are similar to those offered in 2021. While the base package does not include WordCamp sponsorship, program participants can offer it by electing to pay an add-on, which is also billed quarterly.

“The proposed change for 2022 is that Global Sponsors who add on sponsorship for WordCamps will support all WordCamps (as opposed to choosing which WordCamps to sponsor a la carte), at the camp’s top published level,” WordPress.org community organizer Courtney Patubo Kranzke said.

“In short, there would not be a community grant as we’ve had in the past, but WordCamps will get credited global sponsorship funds at the top local level.”

Patubo Kranzke said that volunteer engagement is currently low and the single package ensures sponsors have a centralized point of contact, as opposed to trying to coordinate with multiple teams of volunteer event organizers.

Despite the potential availability of add-on funds, the updated guidelines for in-person WordCamps state that organizers must be prepared to raise 100% of the expenses for their events. They are encouraged to keep their camps’ budgets lean with free or low cost venues that are fully refundable just in case.

“The expectation is in-person camps have to be able to cover all costs,” Community team contributor Kevin Cristiano said. “The global program will bring some relief to local organizers, but more so create a safety net for the entire program. What do I mean a safety net? We are navigating a world with risks on events like never before and we simply cannot afford another round of cancellations and lost deposits. It is our hope that once finalized the Global program can help bring stability and mitigate risks so we can have WordCamps begin in person again while being financially responsible.”

WordPress community events have been cut back significantly over the past two years. In 2019, local communities hosted 140 WordCamps and 805 WordPress meetup groups met more than 5,900 times. After the pandemic hit in 2020, the community hosted 31 WordCamps, most of which were held online. Meetup groups fell to 745 and met over 4,900 times. At the time of publishing in 2021, there have been just 14 WordCamps (all online) and 755 meetup groups met 2,400+ times.

Despite the community team re-opening applications for in-person WordCamps, all the remaining WordCamps on the books for 2021 have been scheduled as online events.

In anticipation of returning to in-person events, WordPress Community Support has added a “communicable disease liability coverage” policy to its event insurance. Any in-person WordCamp that proceeds to the ticketing stage will have a disclaimer on the purchase page, aimed at protecting organizers against claims related to COVID-19.

The proposal for the 2022 Global Community Sponsorship program is still under discussion until October 15, and will be finalized by October 28, so WordPress can recruit sponsors by the end of the year.

Things move fast on social media. You get mere seconds to impress those who happen upon your posts promoting your latest project. You must also pack a lot of information into a small window that would potentially draw in an array of different users.

WordPress has not been doing any favors for plugin and theme authors who share links to their directory-hosted extensions. Social cards for them include a simple image, title, and description. Instead, WordPress.org could dynamically generate the social images by populating them with other data, such as ratings, active installs, and more.

That is just what GiveWP co-founder Matt Cromwell proposed today in a new ticket. “When plugin/theme/block/pattern authors want to share their work on social platforms, they want to link directly to their product on .org and have it look nice,” he said.

He shared an image of an earlier tweet from the GiveWP Twitter account today:

The goal is to piggyback off the concept that GitHub put in motion over the summer. In June, the platform launched a new framework for building Open Graph images. The system generates an on-the-fly image with data specific to a repository, issue, pull request, and more.

In the context of WordPress plugins, themes, and patterns, there are bits of information that could help highlight the projects:

• Contributors (plugins only)
• Locales/Translations
• Rating
• Installs

This data is readily available on WordPress.org. All that would really be required is the code for generating the social images with it.

Cromwell shared a mockup of what this might look like for a plugin, which is also available through the Figma project he created:

Mockup for a plugin’s generated social image.

He also has an annotated version:

Annotated version of social image mockup.

Thus far, the feedback has been positive in the ticket. This is probably one of those easy wins that most people in the community could get behind.

“I’d only add that I’d love this to be automatically translated,” said Jean-Baptiste Audras in the ticket. “Which seems doable given the language/locale is provided by the URL.”

The idea is to use the translated text for the generated image if the shared link is from one of the many locale-specific subdomains on WordPress.org. So, a Spanish URL would use the existing Spanish translation.

We could even apply this concept to other pages on WordPress.org, particularly those that might not have an image associated with them. This is a treatment that Courtney Engle Robertson, Web Design and Developer Advocate at GoDaddy, requested on Cromwell’s Facebook post about the idea. Workshops on the Learn section of the site, for example, could display the number of languages or length, so potential visitors have more information before clicking a link.

The best thing about this idea is that the WordPress community likely already has the foundational code to make this happen. Automattic purchased Daniel Post’s Social Image Generator plugin last month. The plan is to bundle the feature in Jetpack as part of its social media tools.

Generated image using dynamic data.

With a bit of custom code, it is not a stretch to think we could have better social images in short order. The plugin was already built with customization in mind when I reviewed it in June.

WordPress.org profiles got an update over the weekend that will make them a better reflection of contributors’ efforts on GitHub. Users can now authorize GitHub to detect their activity on the WordPress GitHub organization and display it on their profiles.

“Currently we’re tracking New Issues submitted (by you), Closed Issues (by you), Pull requests submitted (by you), Pull requests merged (by you, and additionally the PR submitter gets a ‘PR Merged’ event), and finally Pushes to default branches,” WordPress lead developer Dion Hulse said.

There are a few reasons why one’s contributions might not be visible after linking accounts. The meta team has not built an importer for all previous issues and pull requests, so WordPress.org only has data from last Friday and onwards. Early adopters who linked their accounts when the feature was first being tested may need to re-authenticate since the earlier version had expired connections.

Linking accounts will help make it easier for the WordPress project to track contributions across multiple locations.

“In recent releases, the process of collecting props for non-WordPress.org contributions (namely Gutenberg) has been highly manual and error prone, occasionally resulting in contributors not receiving proper credit,” Jonathan Desrosiers said when rolling out the first version of the app in March 2020. “Connecting your WordPress.org and GitHub accounts will allow automatic tooling to be built which reduces the burden on release teams to maintain a credit list.”

Users who want to have their profiles include GitHub activity can navigate to the Edit Profile page on WordPress.org, launch the app, and authorize their accounts with one click.

Hulse is collecting feedback regarding adding more events (i.e. commenting on issues/PRs), combining events (i.e. Submitted & Merged), and anything else that might improve the quality of activity tracked. Riad Benguella suggested adding a selector to filter the timeline by activity type. Hulse responded that the way profiles are currently set up, querying specific activities cannot currently be done in a performant way but that there are meta trac tickets (#479 and #518) where they are discussing a broader overhaul for profiles.

With a great deal more activity coming in from GitHub, the ability to filter these activities might make WordPress.org a more comprehensive tool for assessing job candidates or verifying Five for the Future contributions. If you have more ideas for the feature, you can leave feedback on the announcement.