Experimental APIs, Testing Fluid Typography, Twenty-Twenty-Three Kick-off and more — Weekend Edition 226

Howdy,

Lots of things happening on the block editor side of WordPress. A new WordPress homepage is now available! Join a new call for testing by Anne McCarthy for Full-site Editing and another one by Justin Tadlock for the Fluid Typography in themes.

This is a round-up of many articles, blog posts and updates from various teams, and extenders. It might not have been the right time to take a two week break.

Yours, đź’•
Birgit

Developing Gutenberg and WordPress

WordPress meta , design and marketing teams collaborated to revamp the design on the WordPress.org homepage and download page. They built it in public, with all the scrutiny that comes with it. The first version went live this week. More of course is certainly to come.

Screenshot WordPress homepage August 2022

You can read more on the genesis of the homepage via the following posts:

This is an interative process, and more pages on .org are in the works. The next step is to get the Navigation right, as with 12 top-level menu items it’s confusion and can send people into decision paralysis as to where they might find the relevant information. The discussion was kicked-off by Matt Mullenweg, co-founder of WordPress in his latest post: Navigation. With so many different target audiences, content creators, plugin and themes developers, contributors, free-lance and agency developers, developers at companies, #nocoe site builders, there is probably not one pathway into the information about wordPress. What do you think? Chime in.

Jamie Marsland, poweruser of the block editor, video creator and educator on all thing block editor, asked in his video Can I re-create the new WordPress home page in 20 minutes?.

Sarah Gooding, WPTavern, has more details for you: Jamie Marsland Recreates WordPress.org Homepage in 20 Minutes Using the Block Editor


In here Design Share: Aug 1–12, Channing Ritter, gives a shout-out to the work in progress from the design team. Among other things, she highlights:

  • Visual template building
  • Pre-publish sidebar summary section
  • Editor welcome guide with setup
  • Global Styles previews
  • Stepped Slider

All could use your input while in the process of being designed. Chime in on the linked GitHub issues.


Andrew Ozz, Core Committer, explained in his latest post the WordPress Development Setup and answered questions, like: “Why is Gutenberg being developed on GitHub or why is Core not being developed there?” and “Is Gutenberg a WordPress feature plugin?” He started out stating: Core is Gutenberg and Gutenberg is Core.


After discussion over several months, Adam Zielinski published a Proposal to stop merging experimental APIs from Gutenberg to WordPress Core. The Gutenberg plugin is in active development and new features are created all the time. These new features come also with new APIs that are declared ‘experimental’ until the team is sure that it’s a prudent implementation for this part of block editor.

When a major WordPress release is worked on, Gutenberg plugin code is merged with WordPress Core, and when these experimental APIs make it into the stable version of WordPress, they also earn consideration for backwards compatibility and de-facto code that needs to be maintained for a few versions before they can be deprecated again.

Adam Zielinski suggests that before a feature makes it into Core that experiemental APis are audited and either are not merged into WordPress or worked on to migrate them as stable APIs. If a feature depending on an experiemental API is not yet stable enough, and other features also depend on the API, both should not be deemed mergable to the next major WordPress version.

Other developers caution, that it might slow down the pace when new block editor features come to WordPress. For the impatient that might be of concern, I also have the feeling that it’s not a bad thing, when Gutenberg latests features stay in the oven to bake a little longer before they are merged and used by millions of people.

Sarah Gooding also New Proposal Calls for Contributors to Stop Merging Experimental APIs from Gutenberg to WordPress Core.


🎙️ New episode: Gutenberg Changelog #73 – Gutenberg 14.1, next default theme, design Tools in WordPress 6.1 with special guest, Channing Ritter, and host Birgit Pauli-Haack

Gutenberg Plugin Releases

Sarah Gooding wrote about Gutenberg 13.8 on the WP Tavern. Gutenberg 13.8 Introduces Fluid Typography Support and Revamped Quote Block

With Gutenberg 13.8, the first implementation of fluid typography is available. Justin Tadlock posted a Call for Testing and Feedback for the Fluid Typography Feature asking theme developer to stress test the feature with classic, hybrid and block themes and various other scenarios.

In the meantime Gutenberg 13.9 was released. André Maneiro was the release lead and published the posted What’s new in Gutenberg 13.9? (17 August). It adds tooltips to Image block, and a long-awaited View Site link for the site editor. Now you have a one click method to see the actual design you are building with your templates.

Tooltips enhancements of the Image block

On the Gutenberg Changelog we will produces a double-feature episode at the beginning of September with the 13.9 and 14.0 releases and more.

Theme Development for Full Site Editing and Blocks

Justin Tadlock explains in his post Layouts and Wide Alignments in WordPress: Then, Now, and Upcoming Changes the progress with align wide and full width settings of blocks its behavior as inner blocks, or in template parts. Sometimes the settings causes ompatibility issues for classic theme adoption of theme.json. Tadlock has some clarifying code examples and use cases, and also mentioned what’s in the works to help any theme developer to control their layouts and at the same time allow for different width of blocks.


Channing Ritter, WordPress Design Team posted the Twenty Twenty-Three default theme — Project kickoff. First she introduces the the base theme, and then invites theme developer from the community to submit their Style variations via GitHub. Colin Chadwick submitted the first style variation called Maresa already. Ritter also has a few tips on how to create Style variations, amont them to use the Create Block Theme plugin.


Nick Diego recently published an article on Exploring Per-Block Stylesheets in Block Themes. You will learn how to conditionally register per-block stylesheets with wp_enqueue_block_style as well as a more advanced registration technique using this function. Diego also discussed the advantages and disadvantages of such an approach.


Caroline Nymark updated her Code Block markup Extension for VS Code. For the version 1.3 she added the markup for the new blocks and patterns: the Avatar Pattern, the No results block, the Read More block and the experimental Table of Contents block. She also added Block Pattern php file header and the Cmment template part section.

 “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

Site owners and nocode site builders using the Block editor

In his post Create a WordPress website with a Block (FSE) Theme ( Beginner Friendly) Marko Segato, Anariel Design walks you through the process of creating a website with an FSE theme from scratch and explore the latest WordPress features. It’s a primer that takes site owners from selecting hosting to add content, and additional functionality on a new WordPress site.


Munir Kamal, Gutenberg Hub, shows you in his video: How to Create Image Sliding Overlay Hover Effect in WordPress using CSS and how to create the creative content design in Gutenberg using default blocks without a 3rd party block plugin


In Three Ways to Enhance Custom Layouts with the WordPress Block Editor, Eric Karkovack shows you how to create layout by writing CSS, set default styles via theme.json and or customize your site via the Editor Plus plugin


Sarah Gooding reported that Automattic is now testing the Gutenberg editor on Tumblr and Day One web apps. She also went and tested the beta experience on her Tumblr account. This is her review.


In his opinion piece, Jamie Marsland wonders Are Gutenberg Third Party Plugins heading in the wrong direction? In a clever back and forth with scenes from the movie Jurrassic part, Marsland, also answers the question what Dinosaurs have to do with WordPress and Gutenberg editor. It’s an interesting perspective on a discussion on how plugin follow along core development or isolate their features from future core development and by that lock any plugin use in their specific functionality and architecture.

Building Blocks and Tools for the Block editor.

The workshop: Using the create-block Tool, with Jonathan Bossenger is not available on WordPressYC. “The WordPress create-block tool allows you to quickly scaffold a new block plugin. You will learn what you need to get started with create-block, how to use it, and review the code it generates.


Adam Zielinski posted a tutorial on how to create your First App with Gutenberg Data in the block editor handbook. This tutorial aims to get you comfortable with the Gutenberg data layer. It guides you through building a simple React application that enables the user to manage their WordPress pages. It had five chapters. You’ll learn the environment setup, build a basic set of pages, create an edit form, create a page form and how to add a delete button.


Ryan Welcher covered in his live stream on how to access and use attributes from other blocks in a custom block. He followed up on a suggestion by David Gwyer, who had a use case for consuming a block’s attributes from another block on the same page.


Another post by Adam Zielinski describes A new system for simply and reliably updating HTML attributes. In collaboration with Dennis Snell and Grzegorz Ziolkowski, the team introduce a dedicated tool for reliably updating the HTML markup. It’s called WP_HTML_Walker PHP class. The article provides code examples with preg_replace and explain why this is method is prone to errors and adjustments. The underlying code for the WP HTML Walker class takes advantage of the same official HTML specification major browser engines use as well. More details and explanations are in the post. To review the Pull Request join the conversation on GitHub.

Grzegorz Ziolkowski tweeted: “I’m glad to see this proposal that should make it more ergonomic to adjust the attributes in HTML rendered by blocks or in other areas of WordPress.”


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 2022

October 11-13, 2022
WooSesh 2022

WordCamps around the World

September 2 + 3, 2022
WordCamp Jinja 2022, about 2 hrs West of Kampala, Uganda. Calls for sponsors, speakers, and volunteers are open now.

September 3 + 4, 2022
WordCamp Kathmandu, Nepal

September 9 – 11, 2022
WordCamp US in San Diego

September 15 + 16, 2022
WordCamp Netherlands at the Royal Burger’s Zoo in Arnhem

September 24 + 25, 2022
WordCamp Pontevedra

February 17 – 19, 2023
WordCamp Asia, Bangkok, Thailand
Call for speaker was just published. Deadline: September 15th, 2022 (UTC +7)
Contributor Day is planned for February 17, 2023 (Day 1)

Learn WordPress Online Meetups

August 25, 2022 – 3 pm EDT / 19:00 UTC
Exploring the Power of Block Variations with Nick Diego

September 6, 2022 4 pm EDT / 20:00 UTC
The Creative Side of Blocks, Vol. 2 with Brian Gardner


Featured Image: Photo by Nick Nice on Unsplash


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.