Howdy,
It’s really fascinating that Germany has four bank holidays in the month of May, all close to the weekends. So we got to make some nice weekend trips. The latest to Venice, Italy visiting the exhibition space of Biennale Arte 20224, with the “Foreigners Everywhere”. We saw incredible creative work from many countries around the world.
It was good to get away from the computer for a few days and walk through one of the most beautiful cities in Europe and eat great Italian food.
And now back to the exciting update on WordPress, Gutenberg, and Playground. Many great videos to watch and tutorials to read!
Have a wonderful weekend.
Yours, 💕
Birgit
Developing Gutenberg and WordPress
Over on the Developer Blog, Justin Tadlock published the monthly round up of What’s new for developers? (May 2024). Highlights are Community Blueprint Gallery, WordPress 6.6 Roadmap and separate style variations for color and typography. The article also includes a ton of information on user-facing updates theme builders would need to know about. Plugin and tools developers find updates to WordPress components library as well as HTML and Interactivity API.
First-time release lead, Jason Crist, published What’s new in Gutenberg 18.3? (8 May) and highlighted:
- Full page client-side navigation experiment
- Allow negative values for margin controls
- Add defaultFontSizes option to theme.json (incrementing theme.json to v3)
- Add publish flow in site editor
🎙️ The latest episode is Gutenberg Changelog #128 – Gutenberg 22.7 Version and Dev Notes for 7.0 with special guest Maggie Cabrera
In their post, Core Editor Improvement: Upgrade your designs, Anne McCarthy provides insights into the design tools updates coming to WordPress, already available via the Gutenberg plugin. She shares a short overview of the feature and a demo video:
Enjoy the great videos! And all feedback is welcome on the post or on GitHub. You can also join the WP Slack #outreach channel to get your questions answered and to discuss things with others.
Once armed with your knowledge, you could also use the Early opportunities to Test WordPress 6.6 with detail test instructions for about nine different features:
- Data Views
- Overrides in synced patterns
- Zoom out view
- Unified and refreshed publish flow
- Mix and match typography and color palettes from all styles variations
- Grid layout
- New patterns experience for Classic themes
- Negative margins
- Rollback autoupdates
Plugins, Themes, and Tools for #nocode site builders and owners
Rich Tabor built a new block: Dark Mode Toggle that adds a toggle between light and dark modes on your website. He shows off this block on his blog. You can also check it out on GitHub
The recording of the Website Speed Build Challenge – Nick Diego and Brian Gardner is now available. Jamie Marsland invited two theme builders to rebuild the site of Pixel Goat with WordPress. Both using Gutenberg only.
In the article “I Built a Knowledge Base Using the Block Editor and Whoa,” Alex Standiford shared his experience of creating a knowledge base solely using the WordPress Block Editor. Standiford started on this journey as he found existing solutions either lacking essential features or too complex. In this article, you learn about the process of developing the knowledge base, highlighting how Standiford utilized various block patterns and custom blocks to design an efficient and user-friendly interface. “Building the actual theme required that basically unlearn everything I know about theme development. After some annoyingly difficult adjustments in my mentality, I was able to get a decent WordPress theme together. ” he also wrote.
In the latest video from the Learn.WordPress team, Wes Theron shows how to build Advanced WordPress Block Layouts.
Theme Development for Full Site Editing and Blocks
Daisy Olsen just published here course Introduction to WordPress Block Themes on LinkedIn. It gets you from zero to hero in 17 Lessons and quizzes. It covers using the Create Block Theme plugin and how to make the design choices via the site editor and stylebook. Olsen also covers the adjustments you need to make the navigation block transferable, so your theme can be used on other people’s site
Jessica Lyschik recorded her process for Turning a Adobe XD Design into a WordPress Block Theme using a design provided by Lesley Sim of Mailerglue.com. Sim shared some frustrations on X (former Twitter) trying to replicate her site with the site editor. Lyschik was the co-lead developer for the Twenty-Twenty-Four default theme, she used to build the site and share tips and tricks, including how to make it accessibility-friendly.
Building Blocks and Tools for the Block editor
During the latest edition of the WordPress Developer Hours: Alternatives to Custom Meta Boxes in the WordPress Block Editor, Nick Diego and Ryan Welcher discussed ways on how to create a block editor experience for data that has conventionally handled by meta boxes.
A new tutorial arrived at the WordPress Developer Blog! Justin Tadlock walks you through the steps to Build a book review site with Block Bindings, part 1: Custom fields and block variations. In this first part, you learn how to register custom fields, connect them to blocks, create block variations for paragraph block and create a nice data input UI in the block editor. And stay tuned for Part 2.
Don’t ever miss a developer blog post again. Subscribe!
Greg Ogarrio writes about the 4 Reasons to Love the WordPress Gutenberg Block Editor on the WordPress VIP blog. He emphasizes Gutenberg’s user-friendly interface, its flexibility with blocks, and the improved control it offers users over their content layout. Additionally, Ogarrio mentions the wide range of customization options available which are accessible even to those without advanced technical skills. He also highlights the active development and community support surrounding Gutenberg, ensuring it constantly evolves to meet user needs.
Did you check out the WordPress Block Development Examples Repo lately? You’ll find 25 examples of how to build different blocks for different use cases, among them a Recipe Card, an interactive count-down, block with post metadata and so on. The latest addition is a plugin on how to add a modal to update post metadata, as an alternative to conventional WordPress meta boxes.
David F Carr, developer of the RSVP Maker plugin and online publishing expert, shared his approach of Transforming a Single WordPress Block into a Block Variation with InnerBlocks. “The virtue of block variations is they allow you to inherit all the best qualities of an existing block while adding a few tweaks, such as an InnerBlocks template or additional controls.” he wrote. The real-world examples and the shared code will “shortcut the process for someone else who might face a similar scenario.” Carr hopes.
Aurooba Ahmed and Brian Coords shared their journey Exploring the Interactivity API in WordPress in Part 1 and Part 2. You’ll learn what the new API entails, how to use it and the challenges they encountered. They also cover the HTML directives, how to use them with custom blocks and how to hydrate date.
On his Live stream, Ryan Welcher built a to-do app with the Interactivity API. You can follow along in two videos:
Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Now also available via WordPress Playground. There is no need for a test site locally or on a server. Have you been using it? Email me with your experience
WordPress Playground + Blueprints
Not entirely related to the block editor or Gutenberg, though increasingly popular, is the WordPress Playground tool for testing, development and demos. Plugin developers use it for the Live Preview on the WordPress plugin repository, I use it for the Gutenberg Nightly. Playground gives you WordPress in the browser. No need for PHP, Apache, or Nginx or Database. Just click on the link and work with WordPress.
On the Developer Blog, Ronny Shani published two articles about WordPress Playground:
- Introduction to Playground: running WordPress in the browser and
- How to use WordPress Playground for interactive demos.
This week, the Meta team announced a new community project: The Blueprint Gallery: Share your WordPress creations with Playground – a space to find and share examples on how to configure WordPress Playground for various scenarios, depending on the use case.
On May 28, 2024, I will also part of the Developer Hours: Creating WordPress Playground Blueprints for Testing and Demos together with Nick Diego. It’ll take place at 15:00 UTC (9 am EDT) and will be recorded. We will talk through some examples in the Blueprint Gallery.
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