Extending Query Blocks, 160 Block Themes, new tickets for WordCamp Asia, WordPress 6.1 RC 1 and so much more – Weekend Edition 233

Howdy,

You probably heard that WordPress 6.1 Release candidate was released. I am so excited about this ginormous release. Take a look at the WordPress 6.1 Fieldguide! There are a ton of posts for developers to check out, be it about performance, accessibility, REST API, database or the block editor. Now it is definitely the time to start testing your sites, plugins, and themes for issues. If you find some report them on the Alpha/Beta/RC forum.

If you are not a developer, use links in the table of contents to jump past the long list of Dev Notes.

That was however not all, that happened this week. Gutenberg plugin was released, and I also was happy to find a series of great blog posts about the development experience, extending the block editor.

Enjoy the news below of plugins, themes, and courses.

Have a pleasant weekend!

Yours, đź’•
Birgit

Developing Gutenberg and WordPress

WordPress 6.1

The Field Guide routinely bundles all the dev notes published around a major release of WordPress. It also lists smaller changes in a “But wait there is more” section. For WordPress 6.1 the documentation release team decided on two more guides:


Leonardus Nugraha provided insight into WordPress 6.1 Beta: First Look Into the Next Major Release with code samples to create a pattern, add fluid typography to a theme’s theme.json file, and how to add block-template parts to a classic theme. It’s a great summary of many features coming to WordPress 6.1


In his post for Kinsta What’s New in WordPress 6.1: Fluid Typography, Improved Template System, New Site Health Checks, and Much More!, Carlo Daniele, also describes the major features coming to WordPress 6.1, highlighting the Fluid Typography with example code, list the improvements to existing blocks, and explains how the new Border controls for Columns work. There is a lot more in that post to catch-up on what will be in the upcoming major WordPress release on November 1st, 2022.


WordPress VIP published WordPress 6.1: Hot Takes for Enterprise Content Creators. They highlighted the better design consistency, creating richer, more engaging experiences with an improved block editor.

Below I shared the links to this week’s Dev Notes related to Gutenberg. Last week’s edition listed four more.

In Updated editor layout support in 6.1 after refactor Isabel Brison wrote all about a new layout type in addition to Flow and Flex: Constrained. It helps designers and site builders to tame the Innerblocks of the layout blocks. In her dev note, Brison also listed additional layout updates.


In this post, Changes to block editor preferences in WordPress 6.1, Daniel Richards describes the in and outs of the new Preference storage mechanism. Many content creators have waited for this for years: Now the block editor will actually remember your setting to switch on the Top Toolbar, and switch off the Full-screen view, and switch off the Welcome screen. Now it’s all stored in the database of your sites. It does not save it across multiple sites, though. WordPress is powerful but not that powerful.


Developer are now empowered extending the Query Loop block. This post Nik Tsekouras, explains how you can add your custom query arguments via a block variation of the Query Loop block.


The block editor now also has Filters for theme.json data, with it plugin and theme developer can query the styling and layout data for all three levels: Blocks, Themes and User. André Maneiro has the details for you.


Components are the building blocks of core blocks and can also be used for custom blocks. Marco Ciampini explained the Editor Components updates in WordPress 6.1.


Until now, styling via theme.json only worked for blocks and for Global styling. Now theme developers can start styling elements in block themes, that means all headers, regardless of where they are added can be consistently styled, same for buttons or input fields. This reduces considerably the lines in a theme’s custom style.css. This Dev note was authored by Ben Dwyer.


Ramon Dodd explained in his post the details of Block styles generation (Style Engine), how the styles found in themes, blocks, Styles UI and core blocks all come together in a black box before they reach the frontend of the site. Or something to that effect.


Adam Zielinski and Grzegorz Ziolkowski summarized the Block API changes in WordPress 6.1. They explain several new Block API features available via the block.json file, specifically the new render attribute for dynamic block PHP templates, how multiple scripts can now registered for blocks, and developers can import single core blocks into their apps, rather than all core/blocks/


One of the missing pieces for curating the editing experience were Content locking features and updates. In his dev note, Jorge Costa explains how content-only editing for blocks, patterns, and templates, will work and how a template lock inheritance for the Column block functions.


Simplified data access with new React hooks in WordPress 6.1 ensure a better WordPress developer experience, we learn from Adam Zielinski’s dev note. The amount of code necessary to access WordPress data like post, pages, users, or custom post types have been considerably reduced.


In his post Reference Styles values in theme.json, Ben Dwyer outlines how you can ensure consistency and avoid duplication of code across entities. If you have a color palette defined, blocks and template parts can reference the particular variable across all other styles so they adhere to the color palette of the theme.


Brian Alexander wrote about the Improved PHP performance for core blocks registration which is achieved through making sure that only the files required for the blocks on the canvas are loaded in memory. Until now, all 70+ core blocks were loaded all the time. That’s a huge performance gain for WordPress sites.


Enhanced TypeScript support in WordPress 6.1 improves the developer experience for WordPress developers, as most programming tools tap into the Typescript signatures and notify the developer, when there is the wrong type or required arguments are missing. In the video embedded into the post, Adam Zielinski shows the interaction of an IDE for auto-completion and static checks.


Ramon Dodd also write about the implementation of Fluid font sizes in WordPress 6.1. You learn how they work and how you can control them via the theme.json file. This is another feature improving the overall responsiveness of the block editor.


In the post, Miscellaneous editor changes for WordPress 6.1, you learn about the small changes and sometime also make a big difference, for instance, content patterns for custom post types, improvements to the Cover block, or a new filter for he Navigation block.


Creating a consistent UI for blocks, was one of the focuses for this WordPress release. The team is about 50% there. In this Roster of design tools per block, you can look up which blocks have which set of design tools in the categories: Typography, Color, Dimension, Border, and Layout controls.

Gutenberg 14.3 released

Aaron Robertshaw was the release lead for version 14.3 of the Gutenberg plugin. In his release post What’s new in Gutenberg 14.3? (12 October) he highlighted:


Sarah Gooding at WPTavern, took it for a spin and found Gutenberg 14.3 Improves Image Drag and Drop


Dave Smith joined me for the Gutenberg Changelog episode 74 recording on Friday. We discussed WordPress 6.1, Gutenberg releases 14.2 and 14.3 community projects and what comes next. The episode is now available online.

Dave Smith and Birgit Pauli-Haack recording episode 74 of the Gutenberg Changelog

🎙️ Latest episode: Gutenberg Changelog #90 – New Testing Call for the FSE Program, Gutenberg 16.7 and WordPress 6.4 with Tammie Lister as special guest, hosted by Birgit Pauli-Haack

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

Jamie Marsland make you a master in building layouts with his newest video Create Pro WordPress Page Layouts in Just 10 Minutes. He explains the CSS box model hierarchy, starting with the content, and the adding padding, border and margin with the new controls in the block editor. He then goes on and explains the spacing between columns, he called Gutter. Being able to change the gutter has considerable implications for creating great layouts, Marsland found. Go on, check it out and learn all about columns-based layouts in this video.


At this week’s Torque Social Hour: An AI-Generative Art Block for WordPress, DocPop talked to Aaron Edwards, the co-founder of Infinite Uploads and CTO of WPMU DEV. They discussed my new favorite plugin Imajinn, a new WordPress block that brings the power of AI-generative art to your WordPress dashboard.

Jeff Chandler posted not long ago a review of Aaron Edward’s plugin: Imajinn Brings Royalty Free AI Photo Generation to the Post Editor.He describes his experience with it of creating a prompt, receiving images back, going through the free credits fast and also what he finds missing. Chandler wrote “Being able to create royalty-free images from the backend of WordPress using Artificial Intelligence is one of the coolest features I’ve seen added to WordPress in a long time.” I entirely agree with him there. 🙌

The featured image on this blog post and two other blog post on this site were also created through the Imajinn AI block. When you scroll through the home page you will notice them right away, I think.


160 Block Themes

160 is this week’s count of Block Themes in the WordPress repository.

Powder is the latest theme by Brian Gardner in the WordPress repository. According to Gardner’s tweet, it is simple by design, a stripped down version of WP Engine’s Frost Theme. It’s still experimental and requires the Gutenberg plugin.


Paul Truong published his first theme ever, called Molten, a theme for passionate chefs and restaurateurs. You can find 20 well-designed patterns listed and when you add the string ?beta=style_variations to the theme’s URL you can also browse through an additional three Style Variations.


Another first block theme contribution in the repository is Raft by Themeisle, with seven Style Variations, and nine patterns. Sarah Gooding has a review for you. Raft: A New Multipurpose Block Theme for WordPress

Theme Development for Full Site Editing and Blocks

Will Morris published his tutorial on How to Create a WordPress Block Theme (In 3 Steps) on the Torque Magazine site. The steps he explains are: Install a WordPress block theme, customize your theme with the Site Editor, export your modifications as a new block theme. Morris works through all that using the Create Block Theme plugin by the WordPress team in the plugins repository.


Brian Gardner shared in his post Create a Box-shadow Style for Various Blocks the necessary code snippets to add box shadow to Images, Buttons, and Quote Blocks.


Julio Marchi explored Why Classic WordPress Themes Aren’t Going Away on the blog The Digital Insider. One of the reasons is that classic themes provide a higher flexibility to build advanced bespoke themes. Marchi also points out that new features comeing to WordPress include ways for classic themes to make use of the theme.json file as well as the feature to allow block-theme template parts to be added to classic themes and offer patterns for those templates parts.


New on WordPress TV: Let’s code: creating custom templates and template parts with Jonathan Bossenger. WordPress 6.1 will include ways to create custom templates and template parts for your block theme from the Site Editor. Bossenger shows in this video how you can register and create custom templates and template parts from the editor, as well as how to register them in your theme.json file when distributing your new block theme.


On CSS Tricks, Ganesh Dahal published a tutorial on how to add Fluid Typography Support to WordPress Block Themes. Dahal has a list of all the blocks supporting Fluid typography, provides instructions on how to configure font-sizes to play well with the feature and explains what happens under the hood.

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

Building Blocks and Tools for the Block editor.

Fabian Kägy announced this week that 10up publicly releases its Gutenberg Best Practices documentation. Kägy is an Associate Director of Editorial Engineering at 10up, an agency with plenty of contributions to the WordPress open-source project. They built highly visible websites, like The White House, Five Thirty Eight, or the World Economic Forum.

Kägy wrote in his post: “Our Gutenberg Best Practices are meant to work in tandem with the WordPress Core documentation and expand upon its foundation to provide a more client-services-centric approach tailored to engineering enterprise-level editorial experiences.” The microsite is divided up on Training, Reference, and Guides. Check it out.


Nathan Wrigley had Nick Diego as guest on the 46th episode of the WPTavern Jukebox podcast and discussed Why You Should Be Excited About the Possibilities of WordPress Blocks. Wrigley wrote: “It’s becoming easier to create the blocks, as the tools take away much of the technical burden of getting you up and running without advanced knowledge of JavaScript and React. Coupled with core components, native block supports, and a bit of guidance, Nick thinks that every WordPress developer can add custom blocks to their repertoire.”


Brian Coords discovered the WordPress’ Secret World of JavaScript, when taking the new Course on Learn.WordPress Using the WordPress Data Layer. Coords also marveled on the fact that all the great tools available to allow developers to build on basis of WordPress outside the block editor for instance on settings pages of a plugin or on supplement admin pages and not many are using them (yet).


Cameron Jones also shared his experience developing around the block editor and found: Adding A Custom Icon To The Social Links Block Should Not Be This Hard. His task was to add another service and icon to the core’s Social Block. Jones takes us along his journey of figuring out how to accomplish this task. There were a few U-turns and cul-de-sac moments on the way. I found it quite an interesting read, as it elaborated on the gaps that need to be closed for the Gutenberg project to be more attractive to extenders in the future.

If you want to believe Jones, it was not missing documentation. “And to my pleasant surprise, the official documentation was quite good in this regard.” he wrote. And after going through all the up and downs of learning new things, Jones concluded: “The provision of the @wordpress/scripts package and much improved documentation makes me feel far more confident in starting to approach development for the block editor again.”

Nevertheless, I have to agree with Jones: it shouldn’t be so hard to add another block variations to a block that mostly sports block variations out of the box.


In his tutorial Rendering External API Data in WordPress Blocks on the Front End, Manoj Kumar shows you how to build a dynamic block that fetches data from an external API and renders it on the frontend when a particular block is dropped into the Block Editor of a post. He uses the create-block scaffolding tool to get started, fetches data with useEffect() and store the data in the database and retrieves for the block rendering on the front end.

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

GitHub all releases

Upcoming WordPress events

November 18, 2022
WordFest Live Returns – the 24-hour Festival of WordPress

February 17 – 19, 2023
WordCamp Asia 2023

đź“Ł The next tickets will become available on October 19, 2022

Have a look at the schedule of upcoming WordCamps.

Learn WordPress Online Meetups

October 17, 2022 – 4 pm EDT / 12:00 UTC
Part 1: Re-Creating Block Designs with Wes Theron

October 25, 2022 – 3am EDT / 7am UTC
Uncovering the Cover Block

October 31, 2022 – 4 pm EDT / 12:00 UTC
Part 2: Re-Creating Block Designs


Featured Image: Imajinn AI


Don’t want to miss the next Weekend Edition?

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

Thanks for subscribing.

1 Comment

Hello,

I was looking into the welcome improvements coming to WP 6.1 and was going to share with our meetup group. But then I realized that certain improvements are very dependent on the theme being used, especially (apparently) with its reliance on theme.json. It is a challenge to talk about improvements with the challenge of the ever-looming “it depends” hanging over us. Folks go looking for those improvements only to find that they are not implemented on their sites – even with modern and well-supported themes.