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:
- Add a Variation Picker to the Group Block Placeholder
- Add List-Based Editing to Navigation Block
- Hide Block Toolbar when Spacing Visualizer is Shown
- Transform Paragraph into Heading via Keyboard Shortcut
- Update the Design of the Focal Point Handle
- Fluid typography: Adjust font size min and max rules
- Define a Minimum Height
- Generate New Color Pallets Automatically
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 #83 â WordPress 6.2.1, Gutenberg 15.7, 15.8 and experiments with special guest, Fabian Kägy and host Birgit Pauli-Haack
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.
 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.
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.
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.
- Working with Query Loop block variations
- MOAR Query Loop block variations!
- Building an Advanced Query Loop block variation plugin
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:
- Required Tools, Plugin Structure, Dependencies, Block Metadata
- The Backend, The Frontend, Functionality, Styles, a Working Demo
- 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
