Gutenberg 14.6, Divi builder’s future,Block and Theme development courses and more – Weekend Edition 237

Howdy,

It has been a whirlwind year for me, and now 2022 is coming to an end. Two more Weekend Editions, one more Gutenberg Changelog episode and our vacation around the Holidays and New Year’s will start. I can hardly wait, to be honest. I have a few personal projects, I finally need to get going on them.

In this week’s The Repository newsletter (150) I read the community profile of Ryan Sullivan who identified Entropy as the one concept that is worth understanding. He shared a link to a blog post by James Clear (Atomic Habits) “Entropy: Why Life Always Seems to Get More Complicated“. I found some solace in the fact that chaos seems to be our natural state of things.

In a GitHub discussion about Custom-CSS coming to the Block editor, I also learned about Cumming’s Law: “Law that affirms that the best way to get the right answer on the Internet is not to ask a question, but to post the wrong answer” Wisdom of the crowd.

Well, WordPress problem-solving is a holistic experience. It takes the whole person. It’s not all about bits, bytes, servers, PHP and JavaScript. It’s about people, too. 🤦‍♀️ 😜

For a more down to Earth developers, you’ll find below two posts linked that tell use of the journey of backend or PHP developer to learn working with blocks.

If you haven’t yet, browse through the schedule of WordFest Live – a 24-hour virtual conference and celebration of WordPress around Transformation. It will take place on December 16, 2022, I was sorry to learn, that WordFest Live was cancelled. (12/4 – Thank you, DJ for letting me know)

The day before, December 15, 2022 Matt Mullenweg will will give his annual keynote address called State of the Word, when he shares reflections on the project’s progress and the future of open source.

Yours, 💕
Birgit

Developing Gutenberg and WordPress

Gutenberg 14.6 was release on November 23rd, 2022. Fabian Kägy highlighted in his release post What’s new in Gutenberg 14.6? (23 November) the following features:


Sarah Gooding reported on the release as well: Gutenberg 14.6 Adds List View for Editing Navigation Block, Introduces New Automatic Color Palette Generator. She wrote: “One of the most creative features introduced in this release is the new “Randomize colors” feature that will automatically generate color palettes on the fly. It utilizes hue rotations based on the Cubehelix color scheme.”


If you are a subscriber to the Gutenberg Changelog podcast, your favorite podcast app probably made the latest episode available to you. To my absolute delight, Ryan Welcher, Twitch streamer and developer advocate joined me again for this show. It was great fun!

Welcher was quoted in the the Repository Newsletter #150 “In the latest episode of the Gutenberg Changelog podcast, Ryan Welcher, a Developer Relations Advocate at Automattic, some “quality of life” updates in Gutenberg 14.6 that make using it a more pleasant experience: “It’s nice there’s this level of refinement happening to these existing tools,” he says.” TY to Rae Morey, editor of the newsletter.

🎙️ New episode: Gutenberg Changelog #78 -State of the Word, WordPress 6.2, Gutenberg 14.8 and 14.9 with Birgit Pauli-Haack and special guest Hector Prieto


If you’re all about the words, be it blogging for yourself or as a content author for your clients, WordPress 6.1 has a number of writing and editing improvements you’ll want to take advantage of. Anne McCarthy published another post in the series of Core editor improvements. In Advancing the writing experience they wrote: “The experience of writing your latest post, whether as part of your weekly routine or out of excitement from a recent adventure, just got easier in many different ways. From a new mode that helps you focus on just writing to more keyboard shortcuts for quickly navigating content, there’s something for everyone, no matter how you approach writing your posts.”

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

In the last edition, I shared with you the story that GiveWP is revamping their plugin to use Gutenberg as a framework for their Donations plugin and use the interface components, and scripts already built into WordPress to modernize and standardize the plugin page and settings.

Last month, Nick Roach CEO Elegant Themes, the company that built the Divi Builder, announced the start of the Divi 5.0 release process in the post Let’s Talk About Divi 5.0 And The Future Of Divi. “In fact, developers familiar with creating blocks for WordPress will find a lot of similarities in the Divi 5.0 module API. WordPress blocks will be more easily adapted to Divi and WordPress developers will be able to jump head first into building things for our community. We are building this new version of Divi to work in harmony with WordPress.” he wrote. As time of the writing the post has around 190 comments. I haven’t started to read yet.

Sarah Gooding reported on it on the WPTavern: Divi 5.0 Aims to Bring Greater Compatibility with Gutenberg. She talked to developer, Josh Ronk and quoted him: “On the block theme front, as a part of Divi 5.0, we are also transitioning into a Block-Based theme, and since Divi 5.0 is actually internally built using the same ‘packages’ that Gutenberg itself is composed of, Divi 5.0 has a lot of compatibility built in from the core,”.

In his video, Jamie Marsland, PootlePress, posed the question: Is The Divi WordPress Theme Dying?

Are you a Divi user? How do you feel about this announcement? Share in the comments, or email me to pauli@gutenbergtimes.com


Jean-Baptist Audras, Whodunit Agency and outgoing team rep of the WordPress Core team tweeted that his agency released two new plugins that help with creating accessible content.

“Lang Attribute for the Block Editor” provides a way to ensure language changes in the content of a page are properly indicated to assistive technologies, using the lang attribute. See WCAG Success Criterion 3.1.2 “Language of Parts”

“Abbreviation Button for the Block Editor” helps you to provide definitions for abbreviations, using the <abbr> HTML element. See WCAG success criterion 3.1.4 “Abbreviations”

Audras also wrote: “Worth noting that indicating language changes in content is mandatory for WCAG compliance, and there is currently no way to do that in the Block Editor (except by editing the code manually). I think this feature should be implemented natively into Gutenberg”


Marko Segota at Anariel Design wrote about How to Create Columns in WordPress Block Editor (Gutenberg)? He covers the topic from adding columns to the editor canvas, and adding blocks to each column. Then Segota goes over all the various design options and how to add borders. Equipped with the full knowledge of available features, you now can channel your creativity to build enticing layouts and page sections.

Share your creation, if you’d like and send me your screenshots or links. Please don’t hesitate to also send your questions, and your bug reports, to my email address pauli@gutenbergtimes.com


On WPEngine’s Builders Resouces site, Nick Diego wrote a tutorial on Designing with Column Blocks in WordPress and explored two block layouts that rely on the Columns block. “While both are relatively simple, they demonstrate how powerful and versatile this block can be. ” He also included ways to add additional functionality using custom CSS classes.

Theme Development for Full Site Editing and Blocks

Justin Tadlock and Damon Cook facilitated a conversation in a recent Hallway Hangout about the future of CSS in block themes. In the more casual chat the group discussed some Block Theme development-related features that are under active development. I was sorry, that I missed it and I have this on my watch list once this newsletter is done 🙂


Speaking of WordPressTV: the recording of a recent Learn WordPress Builder Basics event was uploaded, too. Builder basics: building with columns, groups, rows and stacks with Nick Diego, where he “explored how to design sophisticated layouts using Columns, Group, Row, and Stack blocks. These blocks represent the fundamental building blocks of every WordPress website. You’ll learn the nuances of each block type and how to configure them correctly, with a special focus on new features in WordPress 6.1.”


In his post How to add typographic fonts to WordPress block themes, Matias Benedetto explains how to use the Create Block Theme plugins to bundle fonts to your theme with just a few clicks.


Ganesh Dahal published a tutorial on how to use the new constrained layout In WordPress block themes. “Now that we have JSON-ified styles for the margins and padding of layout containers, that opens us up to more flexible and robust ways to define spacing in our theme layouts.” Dahal wrote.

A Walk-Through of Layout Classes in WordPress 6.1
WordPress 6.1 introduced several necessary changes to its layout framework. Namely, core has now centralized its layout definitions, created semantic class names, and reduced code duplication on container blocks. Originally,… Read more.
A Walk-Through of Layout Classes in WordPress 6.1
WordPress 6.1 introduced several necessary changes to its layout framework. Namely, core has now centralized its layout definitions, created semantic class names, and reduced code duplication on container blocks. Originally,… Read more.

Isabel Brison published the Dev Note for the WordPress 6.1 release: Updated editor layout support in 6.1 after refactor. “A new layout type, “constrained”, was added to the already available Flow and Flex layouts types. In addition, layout refactor efforts bring new layout styles, new block level spacing, more semantic class name for layouts, root padding and a method to disable all layout styles altogether for themes.” Brison wrote.

 “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

Brian Coords, MasterWP, talked to Cory Hughart and Phil Hoyt on their podcast In The Loop about all things block editing, open-source theme frameworks, and creating media in the world of WordPress. To listen to the full podcast episode head on over to In The Loop: Mastering Theme Development with Brian Coords


The second part of the new Block Theme building course on Learn WordPress has gone live. You can now take both courses back to back.

Developers Guide to Block Themes (Part 1) covers the fundamental aspects of developing a block theme, like

  • The minimum requirements of a block theme
  • The primary elements of a block theme, and how that differs from a classic theme
  • Turning a design into a block theme
  • Different methods of creating block theme elements in the Site Editor, and then exporting them to theme files

Developers Guide to Block Themes (Part 2) dives into more advanced block theme development topics:

  • Adding custom fonts to your block theme
  • Adding custom functionality through block patterns
  • Creating Global Styles variations
  • Making your block theme translation ready
  • Locking down your theme settings and blocks

A less code-heavy course to building a WordPress Theme is also in the works, It’s called Develop Your First Low-Code Block Theme it’s in public preview, and not all advanced modules are done, but you get a fabulous introduction into WordPress block theme and how you can create them through the Site Editor.

Building Blocks and Tools for the Block editor.

Core contributor, Michael Burridge published a PHP developer’s guide to getting started with block development on the shiny new WordPress Developer Blog. “This post is intended to guide you through the murkiness and emerge blinking into the clear light of day. It has been written by someone who has followed the same path. Before learning about block development I was a PHP developer who started by creating custom themes and went on to develop plugins to implement custom functionality on WordPress/WooCommerce sites.” Burridge wrote from his experience.


Jonathan Bossenger held part 4 of his workshop series this week: Developing Blocks without React – Block Controls. This series of workshops looks at building a WordPress block, without using React JSX. In the previous part, Bossenger built a WordPress block using plain JavaScript which supports custom styles via a stylesheet, and which uses block attributes and the RichText component to allow the user to edit the block content. In this iteration, he added a block control and an additional attribute to allow the user to edit the block alignment.

Catch up on the earlier workshops of the series Developing Blocks without React

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

On his Twitch Stream, Ryan Welcher worked three weeks in a row on Query Block variations of all types. Here is the list of the shows on Twitch. A deep dive into the world of post lists.

And if you are a bit fuzzy on what the shows are about, Nik Tsekouras wrote the Dev Note on this topic for WordPress 6.1. Extending the Query Loop block. He starts out with “Extenders required a way to present bespoke versions of the Query Loop block, with their presets, additional settings and disabled customization options when irrelevant to their use-case. With WordPress 6.1, the Query Loop block offers mighty ways to create such versions, through Block Variations.”


Tom McFarlin published part 4 of his series A Backend Engineer Learns to Build Block Editor Blocks in which he walks you through how to handle the process to save content from a block and how to control how it is rendered on the front end. If you are keen on learning block development, McFarlin recommends to start reading part one through three first:

  1. Required Tools, Plugin Structure, Dependencies, Block Metadata
  2. The Backend, The Frontend, Functionality, Styles, a Working Demo
  3. Block Attributes, Editable Content, Components, Editor Styles

Upcoming WordPress events

December 15, 2022 – 1 pm ET / 18:00 UTC
State of the Word 2022 – Matt Mullenweg’s annual keynote.

New Date! December 16, 2022
WordFest Live Returns – the 24-hour Festival of WordPress

February 17 – 19, 2023
WordCamp Asia 2023 – the first round of speakers was announced

Have a look at the schedule of upcoming WordCamps to find one near you.

Learn WordPress Online Meetups

December 5, 2022 – 2 am ET / 7am UTC
Using the Navigation Block with Ben Evans

December 8, 2022 – 3 pm ET / 22:00 UTC
Builder Basics: Demystifying theme.json and Global Styles with Nick Diego

December 12, 2022 – 3 pm ET / 22:00 UTC
Creating a Call To Action with the Block Editor


Featured Image: Fantasy CityScape created with the Imajinn AI plugin


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.