Responsiveness, styling the details block, create block theme plugin and so much more – Weekend Edition 276

Howdy,

The Winter in Munich comes with big steps. If you are interested, I shared a photo from last night on X (former Twitter) . I am all excited as I haven’t seen that much snow since I visited a friend in Vancouver in 2021, but that was only for a couple of weeks. Now I have to live in this weather. 🥶 I might venture outside long enough to take some more pictures. Stay tuned.

In this edition, I share a ton of links to updates about tools, plugins and themes, tutorials and how-to articles. I have a feeling, I also missed a few, so please notify me, so I can add them next week.

Wishing you and your loved ones a Happy Holiday season 🎄 And if you don’t celebrate, have a wonderful weekend!

Yours, đź’•
Birgit


Monday, I was on the panel of the 277th episode of This week in WordPress, Mysterious cosmic rays -together with host Nathan Wrigley, Michelle Frechette, Wendie Huis in t Veld, and Jeroen Rotty. We covered, the new feature of Live preview for the plugin directory, with a shout-out to Alex Shiels and the meta team, and also, as a surprise to me about Keeping up with Gutenberg Index, the call for speakers and diversity efforts for WordCamp Europe was also a topic, as was the new Showcase on the .org site and the new line-up of shows on the Do the Woo network. Participating on the panel is a fun way to start a week in the WordPress world. Don’t be shy, 🙂 connect with Nathan Wrigley and see when there is a free slot on the show. You definitely should subscribe to the YouTube channel and the Podcast.


Developing Gutenberg and WordPress

Are you looking for a State of the Word watch party near you? A few are already planned. Take a look at the events landing page. The countdown will start soon: December 11, 2023, at 15:00 UTC Matt Mullenweg will give the State of the Word keynote talk directly from Madrid, Spain. It’s the first time it is broadcast from outside the US.

It will be livestreamed on YouTube on the WordPress channel. A Q & A section will follow, where Mullenweg will answer questions previously submitted to ask-matt@wordcamp.org. You will be able to submit questions during the event via the Slido App. The QR code will be available on the day of the event.

Gutenberg 17.2 RC1 is now available for testing. The stable release will come out on December 6th, 2023.


Save the date! Hallway Hangout: Let’s explore WordPress 6.5 on January 16 at 21:00 UTC. Anne McCarthy and Saxon Fletcher will talk through some of what’s to come in the next WordPress release, with a proposed schedule for March 26th. This is being shared early to help encourage more folks to tune in and to build some excitement for this next release.

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

On “The WordPress Way” show, Abha Thakor chatting with Anne McCarthy and Bud Kraus About all things WordPress 6.4 Great conversation that goes in a lot of fun and insightful directions with these three.


Aki Hamano created the Responsive Image plugin. It adds settings to the Image block to display different images depending on the width of the screen. He cautions you to use it on a production site, as it’s under active development and might change behavior with new versions.


In the latest video, How To Create a WordPress Image Gallery, Ellen Bauer of Elma Studio gives you a look behind the scenes on how she built the demo page for the style variation in their latest block theme, Moog.


If you want to test the Gutenberg Nightly plugin, but don’t want to set up a test site, you can now use it with a WordPress Playground instance. Head on over to the Gutenberg Nightly & Playground page on my personal tech blog and click on the Get Started button. It’s a proof of concept for now. I still need to add the daily automatic deployment of the build.zip file to the site. Please let me know what you think about it and how you use it.

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

GitHub all releases

Seth Rubinstein of Pew Research Institute announced on X (former Twitter) that he just released a small plugin to add responsiveness to the core group block. (GitHub)


Michelle Schlup-Hunt published her base Full Site Editing theme, that is meant to be used to build other projects on top of, but probably simple enough to use as-is too: Alicorn-Theme (GitHub)


The fine folks at 10up, just released the 1.1.3 version of their Block for Apple Maps, which integrates Apple Maps directly into your WordPress site. It’s a mighty block with a ton of features to create customized maps right on your WordPress site. You would need to have an Apple ID and sign up for their Developer program to get the right API keys, though. The code is available in the GitHub repo

Ben Ritner of Kadence announced the arrival of the Advanced Query Loop block to their pro-version of the plugin. It’s an enhanced version of the core query loop block, incorporating many user-requested features. It allows you to specify which post types and taxonomies to display, along with the number of posts per page. Not only that, but it also comes with options to custom transition animation which can be used when viewers click between pages, search, or apply filters on the front end.


If you are not a Kadence Blocks customer, or only use the free version, there is also the Advanced Query Loop available by Ryan Welcher. It might not be as polished and as frontend oriented as the Kadence version.

Theme Development for Full Site Editing and Blocks

In his post How to show the “Choose a Pattern” modal by default on new pages, Brian Coords walks you through the few steps to create a full-page layout patterns for your theme or site.

 “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

With his post, Jamie Marsland helps you Understanding the theme.json File in a WordPress Block Theme and he breaks down the various sections and how you can configure them. Marsland also added a section on how to lock certain areas down for end users, so they won’t change important design settings.


Mary Baum published the 3rd part of the Series, Make your site’s typography make a statement. A great read—four simple steps to your best body copy ever, and she provides code examples for theme.json on how to combine settings of measure, line height, spacing to make your text as readable as possible.

“For now, let’s leave it at this: if you set a gray wall of type, your reader has to want your information very urgently before they’ll slog through to the end. If you break up your copy into approachable chunks, every subhead has a chance to persuade your reader to go on and read further. “

Mary Baum, on the Developer Blog

Brian Gardner shared a designer’s insight into Gradients and how to use them in WordPress Blocks. Default Gradients in the WordPress Block Editor. Anyone who listened to the Gutenberg Changelog podcast knows, I am a big fan of gradients, and so I am delighted, they are now available for almost all Core blocks.


Justin Tadlock shared in on the fun of Styles, patterns, and more with the Details block. The Details block combines two HTML elements: <details> and <summary>. It is an HTML-native way to show and hide content: the summary part is a title that hides the details until your user clicks on it to trigger a reveal of the details. It can be used for various use cases, on your website. After covering the out-of-the-box styles of the block, Tadlock shows you how to adopt its look and feel for a Spoiler section, and a list of FAQs.


There have been a few quality-of-life improvements to the Create Block Theme plugin over the course of the WordPress 6.3 and 6.4 releases. In this tutorial, Jonathan Bossenger gave a brief introduction to these improvements.

Building Blocks and Tools for the Block editor.

On Thursday, December 7, 2023 – 14:00 UTC, Jonathan Bossenger will introduce attendees to the new WordPress Interactivity API. The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks. This standard would make it easier for developers to create rich, interactive user experiences, from simple cases like counters or popups to more complex features like instant search, or carts and checkouts. In this session, you will learn more about this new developer API, through a live coding example. Sounds like great fun!


In his article Block Notes: Generate a Reference to a Block, Tom McFarlin explains the benefits of generating block references and how they can be utilized in block development. He provides code examples and step-by-step instructions on how to create a reusable block reference using JavaScript and jQuery.


Block extension plugins in WordPress are quick and straightforward to build and are quite formulaic once you have built a few. During the latest Developer Hours: How to extend Core WordPress blocks, Ryan Welcher and Nick Diego walk through building an extension for the column block that allows users to reverse the display order on mobile devices. It uses JavaScript on the front end for accessibility. You’ll learn three ways on how to do this: a Block Style, a Block variation and a custom block. The example code is available on GitHub.


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: A Slice of Rainbow Cake by Ajith R Nair


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.