Template Areas, Font Management Design, Drupal Gutenberg and Developer Hours on Extensibility—Weekend Edition 257

Howdy,

After a week home from WordCamp Europe, I am still on a high from meeting all my WordPress friends and making new ones! I also learned about new products, and new APIs. A huge thank you to the sponsors, organizers, speakers, volunteers, contributors, and attendees. It was a fabulous WordCamp, the biggest in the World.

Athens is a great big noisy and beautiful capital of Europe and the birthplace of philosophy and democracy. I thoroughly enjoyed having a couple of days beyond the WordCamp to visit some sites and experience the antique and the contemporary of Greek art.

Speaking of art. My heart made a little jump when I saw the big boxes with Postcards from the Museum of Block Art, at the Community Booth. They were part of the swap exchange game with WordPress trivia. WCEU Attendees received four cards of the same design in their swag bags, and could get the other designs by swapping them with other attendees. To get all eight designs, MCs would pose WordPress Trivia questions from the stage and attendees needed to come with the right answers to the community booth to get an additional post card design. I don’t know who many people actually appreciated the work of the artists or the work it took to get all the 2500 swag bags filled or how many people actually still write postcards. I found it a wonderful idea and took quite a few left over postcards with me.

What else happened in the Gutenberg space?

Yours, 💕
Birgit

Developing Gutenberg and WordPress

Did y’all see what the WordPress design team has been working on? It’s fantastic! Joen Asmussen lists great things in his Design Share: May 22–Jun 2

  • Font-Management
  • wp.org Account security (2FA) –
  • Content/Template editing improvements
  • Improved template table view
  • Page details and a few more.

Gutenberg 16.0 is now available for download. Release lead, Nick Diego highlighted in his release post What’s new in Gutenberg 16.0? (14 June):


Sarah Gooding reported on the release as well. You can read her article on the WPTavern. Gutenberg 16.0 Introduces Page Management in the Site Editor


This week, I had the pleasure of having Isabel Brison, Editor Tech co-lead for WordPress 6.3 release, as a special guest on the Gutenberg Changelog #84. We discussed the releases Gutenberg 15.9 and 16.0 we caught up on the Layouts and what happens at during a major release cycle before Beta 1. The episode will arrive at your favorite podcast app over the weekend.

🎙️ 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

Justin Tadlock published the What’s new for developers (June 2023) with briefly updates on synced patterns, the Interactivity API, the public API of the Wayfinder (Command Center) and more.


Kelly Choyce-Dwan announced the new curation filter in Pattern Directory – a way to narrow down the choices and to look at hand-curated patterns. Check it out on the WordPress Pattern directory


The Training Team released more tutorials:

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

In 2018, Drupal Gutenberg, the Norway-based agency Frontkom created the Gutenberg module for Drupal. Now it received funding from Automattic. Sarah Gooding has the skinny: Automattic Donates €20,000 to Fund Next Phase of Drupal Gutenberg Development.

The Drupal Gutenberg module is used on more than 3,000 Drupal websites. Frontkom, a 120-person agency, uses it exclusively when building Drupal sites for clients. In the article ,we also learn that Matt Mullenweg will send “some Gutenberg experts to join the sprint without any cost to the Drupal community”.


Doc Pop‘s latest Press This episode is titled: The Frost Theme is Here. He talked to Brian Gardner, the creator of Frost after he submitted WP Engine’s Frost Theme to the WordPress Theme Repository. Brian Gardner’s other block themes in the repo are: Powder, Design Mode, Bright Mode and Avant-Garde. “When I realized sort of what blocks were, how patterns worked and the trajectory of where this was all going, I got really excited. So two years ago I started creating this theme called Frost.” Gardner says on the show.


In his WP Build podcast episode number 330, Get lots for free with Maxi Block Nathan Wrigley interviewed Christiaan Pieterse. “Maxi Blocks has all the blocks that your typical website needs. I could list them all here, but just click the link above and you’ll find them. There are containers, headings, images, maps, groups, icons, sliders, all-the-things so to speak. ” Wrigley wrote.


Have you ever looked for a way to make a group block as a whole clickable? The plugin Hyperlink Group Block plugin might be the right solution. It allows you to combine blocks into a group wrapped with a hyperlink (<a>). After inserting a Hyperlink Group Block, a Block inserter icon will be displayed to allow you to add new blocks inside that Hyperlink Group Block. You can also transform an existing group block into a hyperlink block. Thank you to Jeremy Techtmann who tweeted about the plugin in reply to Keith Devon’s question: “How can I make a group of blocks into a link?”


Theme Development for Full Site Editing and Blocks

Kathryn Presner published her tutorial Custom CSS in the Site-Editing era on WordPressTV. WordPress 6.2 introduced two new ways to add custom CSS to your site: a global CSS editor, and a per-block CSS editor. Both methods let you add CSS overrides directly in the Site Editor, to tweak the way your site looks. In this session, Presner covered the differences between the two types of editors, and how to use them effectively and appropriately. As a rare occurrence on WordPress TV, Presner also provided the code snippets and a fabulous list of resources in the comments as well.


Nick Diego hosted Hallway Hangout: Let’s chat about WordPress 6.3 and block theming and posted the summary on Make Theme Blog. “The session began with a brief demonstration of the changes coming to the Site Editor in 6.3, notably page management and new editing flows. If you have begun building block themes for clients or are interested in block theming, this session is especially for you.” Diego wrote.


James Koussertari wants you to have an understanding blockGap in WordPress Block Themes. He looks at what it is, how to enable it, how to use it globally or for specific blocks, plus how it affects spacing presets & scale.

 “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

Carlo Daniele wrote a tutorial on how to build WordPress Block Patterns, puts them into context with Template parts and Reusable blocks, and then shows you methods how to create them and add them to your theme.


Have you ever wondered what exactly that “area” property is for when registering template parts in a block theme? Did you know you can register custom areas? Justin Tadlock explored in this post how to upgrade the site-editing experience with custom template part areas. You learn how to register them, add them to your them and provide the right places for your users to work with template areas.


Brian Gardner takes you on a journey Exploring Color in WordPress Block Themes. The article is an introduction to the color related sections of the Site editor and theme.json: You learn how to handle color settings, palette, gradients, duotone filters, style variations and color contrast. “Colors are the magic ingredients to bring your website to life, setting the mood and defining the user experience. ”


C.S. Rhymes built a VS Code Extension Gutenberg Comment Highlight. Because Gutenberg uses HTML comments to store attributes and styling, usually the IDE styles it with light gray color, which makes it very hard to read, when you spend time in block themes, patterns, or blocks. This VS Code extension color codes them like other code snippets. Thank you to Justin Tadlock for the find.

Building Blocks and Tools for the Block editor.

Upcoming event: Developer Hours: Exploring Editor Extensibility.

Join Nick Diego, Michael Burridge and Ryan Welcher for the next Developer Hours on June 30th, at 15:00 UTC (9 am EDT, 17:00 CEST) They will showcase extensibility methods that empower builders to extend and customize the WordPress editing experience. This event will begin with a few demos that explore client-side filters, slot fills, and custom block development. Then the three will be available for AMA-style discussion. Whether you’re a developer, designer, or WordPress implementer, this event promises to provide valuable insights into Editor extensibility and foster an open exchange of ideas.

Nick Diego wrote about his experience exploring How to modify block supports using client-side filters, when the feature is not yet available for the core blocks. He writes about the powerful client-side filter blocks.registerBlockType that allows you to modify block supports, such as border, color, dimensions, and typography of core/blocks.


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

Questions? Suggestions? Ideas? Don’t hesitate to send them via email or send me a message on WordPress Slack or Twitter @bph.

For questions to be answered on the Gutenberg Changelog, send them to changelog@gutenbergtimes.com


Featured Image:


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.