Hi there,
Summer! We are now for the second year in Europe, and we are starting to appreciate the four seasons again. Florida only has two seasons, dry and wet. We are also getting ready for our Summer vacation. For most of the time we will be unplugged from the Internet and the computers.
The Weekend Edition resumes at the end of August! This edition should provide you with plenty of updates to until then. And for developers, be on the look-out for the monthly round up post on the WordPress Developer Blog: What’s new for Developers (August 2024) to come out August 10, 2024.
Be well, maybe you can take a vacation, too.
Yours, đź’•
Birgit
Developing Gutenberg and WordPress
Reminder: Hallway Hangout: Let’s chat about what’s next in Gutenberg (August 2024) on August 15, 2024, at 15:00 UTC. Anne McCarthy wrote: “This hallway hangout seeks to be another snapshot of what’s being worked on in the Gutenberg plugin to provide broader awareness to more WordPress contributors and get feedback. The hope is to come together early to talk about different features, flush out concerns sooner, help more folks get involved, and find ways to work better together. “
At the WordPress Meetup in London, JuanMa Garrido gave a lightning talk Exploring WordPress 6.6: Key Developer Features Unveiled and covered style variations, color, and typography presets, block pattern overrides, updated Theme.json, and unified SlotFill components. Dan Maby summarized it and wrote: “JuanMa’s session covers essential updates that make design implementation easier and more flexible. Let’s explore these exciting new features!”
Rich Tabor also published a WordPress 6.6 post with short videos about each major features. It is so much easier to grasp the nature and the usefulness of an update or a new feature when you can see it in action.
Learn.WordPress redesign now live!
And if you find yourself wondering what you do without a weekend edition for the three weeks, go, and browse the freshly released Learn.WordPress website. It has some great courses for end users, on block development and theme building. The latest course is the Intermediate Theme Developer course, with 32 lessons.
In her blog post Meet the new Learn WordPress, Kathrin Presner shared the details of the why and how of the efforts to get this redesign over the finish line. It’s also a great historical record of the before and after state of the site’s designs.
In the the WordPress News article A Brand-New Way to Learn WordPress, Lauren Stein included a short video and put the renewed training site into the overall context of the ongoing efforts for a finished redesign of the WordPress.org website. You’ll find links to all learning pathways courses, and the announcements of Walking Tours on August 6th at 14:00 UTC and August 8th, 2024 at 21:00 UTC with the educators Wes Theron and Jonathan Bossenger.
Wes Theron, interactive designer at Automattic, published his tutorial Exploring WordPress 6.6, walking the viewers to a “range of new features and enhancements designed to improve your website management experience. Discover the latest updates and see how they can benefit your site.”
Jonathan Bossenger, developer educator on the WordPress training team, published a Call for contributors: Intermediate Plugin Developer learning pathway. Can you help with scriptwriting, voice recording, video editing, content creation and reviewing? There is lots to be done, and you can have a major impact on the project with your contribution.
Gutenberg 18.9
Hector Prieto released Gutenberg 18.9 and highlighted in the release post What’s new in Gutenberg 18.9? (31 July)
- Data Views get more flexible
- Consolidating design tools across blocks
- Improved usability in editing and applying font size presets
🎙️ The latest episode is Gutenberg Changelog #124 – Gutenberg 22.0 and WordPress 6.9 with Ellen Bauer, project lead at Automattic.
For the latest Gutenberg Changelog episode (105), I caught up with my friend, Ellen Bauer, now WooCommerce, former Elma Studio. We had a great chat about block themes, Gutenberg 18.9 and block design tools . The episode will drop into your favorite podcast app over the weekend.
Apropos Podcast: The photo of the week for me was Laura Adamonis tweet “@gutenbergtimes with @bph and @inyongski and meal prep go together on a rainy day. Great show. Pulled pork, yogurt, and carrots. “ Huge thank you to Laura Adamonis for sharing her enthusiasm.
Upcoming Developer Hours
August 13 at 15:00 UTC Developer Hours: Hello, Blocks! – An Introduction to Block Development with JuanMa Garrido and Ryan Welcher
August 27 at 15:00 UTC Developer Hours: Building WordPress themes with the Create Block Theme plugin with Tammie Lister and yours truly
Plugins, Themes, and Tools for #nocode site builders and owners
This week, I rediscovered the plugin Enhanced Embed Block for YouTube developed by Mark Root-Wiley and Cory Birdsong. It lets you add more limits to the embed block, for instance rel=0 to just allow only videos from your channel in the suggestions. Another feature is that it can be set to load videos from nocookie.YouTube.com for enhanced privacy. They also emphasized that there is no plugin lock-in. Should you remove the plugin, it uses the core/embed block as a fallback.
With his post, Mastering WordPress full site editing: a step-by-step tutorial, Jeremy Holcombe walks you through the various aspects of the site editor and aims to show you how FSE works and let you develop your own site designs, just like the pros.
This week, Jamie Marsland unlocked the power of Ollie Pro with Mike McAlister on his Livestream on YouTube. In this interactive session, you “discover why I love the Ollie Theme and learn all about Ollie Pro” Marsland wrote.
As part of the new learning pathways, Cynthia Norman, WordPress theme developer from Ontario and member of the WordPress training team, published the video: Converting a classic theme to a block theme on WordPressTV. “With this lesson, you will: describe the various requirements of converting a classic theme, differentiate between a hybrid theme and a block theme and list the steps to take to convert a classic theme into a block theme.” She wrote.
The video is also part of the Intermediate Theme Developer course.
Mahdi Ali Khanusiya, Ilmosys, shared on X (former Twitter) about the “refreshed design of the PatternsWP website! Built entirely with the WordPress block editor.” PatternWP is a WordPress plugin with a huge library of patterns and full-page layouts. It helps designers and content creators to streamline their page building processes.
Anja Merret reported that MaxiBlocks introduced a free theme to work with the block editor or page builder. Together with the free block editor plugin and the new free theme (in Beta), Maxi Blocks aims to offer an entire web design tool kit. It offers many patterns and icons to use on your site. Join the Beta team here or wait for the theme to be available in the WordPress repository.
Theme Development for Full Site Editing and Blocks
This week, I teamed up with Vikas Singhal, InstaWP to hold a webinar: WordPress Block Editor for Theme Developers and Designers. The recording is available on YouTube. The shared list of resources is available on Google Doc.
Justin Tadlock also posted on the Developer Blog: Mixing and matching styles, colors, and typography in WordPress 6.6 – and teaches us how to create custom color and typography-only global style variations in WordPress 6.6.
Bernhard Kau continued his series on building block theme for his website with Goal missed: I had to add some CSS to the theme. Although determined to only use the Site editor to create his theme, the difficulties to designing the header for his site, made Kau reach into his rich CSS tool box. He continues explaining how he added CSS files to his themes.
Starter Themes
Brian Gardner just uploaded Powder Zero to the WordPress repository. It’s a A starter block theme for designers and developers. It offers plain designs and patterns for all the important templates with header and footer template parts. It also offers code examples to create block styles via the functions.php. It’s give you a solid head start into block theme building.
A few months back, Brian Coords and Aurooba Ahmad published a “Block Theme is a block-based starter theme built for modern WordPress developers. Now it has reached 73 stars on GitHub. It corporates a build process, works with SASS, and also includes a few custom blocks. It also includes Linting, Prettier, and WordPress Coding Standards.
About a year ago, Bill Erickson published A starter theme for building Hybrid WordPress Themes. “A hybrid WordPress theme uses theme.json to define styles and customize the block editor while also using traditional PHP template files.” he explained.
With Carolina Nymark‘s Theme Builder Tool, you can assemble a new starter theme yourself on four levels:
- No Code -For building your theme in the Site Editor.
- Basic -More opinionated than Underscores (_s).
- Advanced with WooCommerce support and basic build tools.
- Advanced with WooCommerce support and without build tools.
When talking to site builders and developers, it turns out, many use the default theme Twenty-Twenty-Four as a versatile starter theme to start new projects, either with a child theme or as a clone.
And finally, the Create block Theme plugin allows you to create a child theme, or a clone of the current block theme active on your site. It also provides you with a skeleton block theme to start with a blank slate
Building Blocks and Tools for the Block editor
Beau Lebens, Head of Engineering for WooCommerce published WooCommerce in 2024 and beyond: Roadmap update and laid out the plan for the next few months for WooCommerce development and focus as well as an outlook beyond. Besides new and revamp initiatives around the Developer Experience for partners and extenders, like a newsletter, enhancing the REST-API, the message seems clear: “Our future is block-based “. He continues: “If your solutions are still relying on shortcodes or other legacy APIs, it’s time to embrace blocks and modernize your approach.”
In WooCommerce 9.2: Pre-release updates, Jacklyn Biggin, developer advocate at WooCommerce gave a preview of the upcoming release. Among other updates, it will bring a “Customize your Store” feature, enhances filtering for store searches and accessibility improvements.
Damon Cook published on the Developer Blog: Building a card layout with a “hover reveal” effect. It’s a short tutorial on how to add block style to a core block and add CSS for animation. It’s even interesting for content creators as they learn how to create a Grid Block with card style cover block.
Using Generate Blocks Pro, the Create Block Theme plugin and a child theme of Twenty-Twenty-Four, Silvan Hagen, a developer from Switzerland, shared how to build a WordPress Mega Menu with Blocks recreating a project for the Kofi Annan Foundation.
You can read-up on another approach to building Mega Menus on the WordPress Developer blog, where Nick Diego posted An introduction to block-based mega menus, applying the newly released WordPress APIs from version 6.5
In this week’s Livestream, Ryan Welcher was seen building a Schema.org block integration in context of a Job board site. In this longer than usual stream he covers a myriad of block development topics including debugging via the consol e.log and exploring functions, attributes and InnerBlocks.
JuanMa Garrido and Nick Diego explored in the latest Developer Hours alternatives to creating a custom block. They walk through several scenarios often addressed with custom blocks and discussed alternative approaches, especially those that leverage block patterns and Editor extensions.
Key highlights included: –
- How to add new functionality to core blocks
- How to use content-only editing and the allowedBlocks attribute in patterns
- How to integrate block bindings and block variations
- How to effectively use block locking and naming – How to create overrides in synced patterns
They shared their notes and resources in this Google Doc
The Interactivity API seems interesting to you, but you’re not sure that you have time to figure everything out? In his blog post, Interactivity API Explained, Misha Rudrastyh provides step-by-step instructions and explains the various pieces on the way.
Antonio Sejas, Developer at WordPress.com share how their team uses WordPress Components and Tailwind CSS in their Local Development App. It’s the first post in the new Building Studio in Public series. In this article, “we explore how we decided to use Tailwind CSS and the WordPress components that make up Studio and why that decision gave us extra flexibility for the future of Studio.” Sejas wrote
Nick Diego posted Useful resources for curating the WordPress editing experience after fielding a few questions from developers at WordCamp Canada. You’ll find links to repos with code examples, to documentation pages, and articles published on the WordPress Developer blog. He covers server-side, client site and theme.json methods and approaches.
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
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