WordPress 5.8 brings the power of Gutenberg blocks to widget areas — which means the highly customizable layout and styling options bring you closer to a WYSIWYG editing experience. I made a test site based on the oldie-but-goodie Twenty Sixteen theme, with three separate widget areas. In this post, I’ll highlight a few cool things that are now possible to do with your widgets and where things may be heading next.
Create Interesting Visual Effects With Overlapping Layouts and Duotone Images
Appearance-wise, users have a lot more control over widget areas than ever before — especially through the use of blocks with customization options like the Cover and Image block. Here’s what I can create in the classic widgets editor (above) versus what I can create in the new block-based widget editor (below).
Intersperse Widgets and Custom Code Throughout Your Visual Designs
Container blocks like Cover and Columns make it easy to weave dynamic or interactive elements into your designs. While this is a given for many widgets, the block versions of widgets can be easily wrapped and layered within container blocks to integrate them into your layout more fully.
In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also inserted Custom HTML blocks within a Columns block to display different messaging depending on the time of day. (jQuery script)
Use Traditional Widget Layouts (Or Not) With Lots of Flexibility Over Title and Structure
Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.
Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.
Copy & Paste Existing Layouts From the WordPress Pattern Directory
While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:
FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior — consider this feature to be a preview of what’s coming next for widget editing!
WordPress is global in reach and open source in nature. And you would assume that what allows the software to be used by anyone would also enable it to be built by anyone. After all, your location doesn’t matter, and who employs you also doesn’t matter. And your relative social standing certainly shouldn’t matter. As long as you can communicate with the others contributing to the project, there should be no obstacle to your participation.
That was Josepha Haden on the “Cherishing WordPress Diversity” episode of the WP Briefing Podcast, speaking about the importance of diversity, equity, and inclusion within the fabric of the WordPress project. Her statement captures the spirit of the WordPress open source project, and we hope it resonates with you. Now, let’s dive in!
Say hello to WordPress 5.8
WordPress version 5.8, “Tatum,” came out on July 20. Version 5.8 is a major release that offers features like block-based widgets, a host of new blocks and patterns, a template editor, a duotone feature to stylize images, theme.json, and support for webP images, to name a few. Read more in the release post, the field guide, and the talking points post for meetup groups.
Contributor teams released the 11th version of Gutenberg on July 9. Version 11.0, which focuses heavily on backports and bug fixes, showcases some cool features such as an editing overlay for template parts and reusable blocks, and support for CSS shorthand properties in theme.json and block attributes. Version 11.1 was also shipped this month, on July 21. The release adds custom block borders as block supports and adds “drag and drop” to the list view.
The Community Team kicked off work to bring back in-person WordPress events. The team recently announced that in-person WordPress meetups can be organized in a region if the local public health authority allows in-person events and if the region passes the in-person safety checklist. If the region does not meet guidelines on page one of the safety checklist, organizers can plan events for fully vaccinated, recently tested (negative), or recently recovered community members. Subsequently, the team also shared a proposal for the return to in-person WordCamps in places that meet the safety guidelines and the vaccination/testing requirements. Please share your feedback on the post if you have any thoughts. For more context, check out the “In Person!” episode of the WP Briefing Podcast.
Want to contribute to the Community Team? Follow the Community Team blog, or join them in the #community channel in the Make WordPress Slack.
The Polyglots Team announced that “Polyglots Training” (a course to help WordPress translators and communities) is now available for testing. Sign up now!
The Marketing Team is doing research on building engagement around WordPress releases. Please help the team by filling out this quick, two-question survey on how you search for release information. If you have any favorite features from the latest release (WordPress 5.8) let the team know by completing this short form.
In this episode, Josepha Haden Chomphosy discusses the nuances of building accessible software, the differences between access, usability, and accessibility, and how this all applies to the WordPress project.
Have a question you’d like answered? You can submit them to [email protected], either written or as a voice recording.
Starting in WordPress 5.8, a new tool — “theme.json” — is available to use in your theme. Maybe you’re hearing about it for the first time, or maybe you’re testing and developing themes with it already. Either way, I’m glad you’re here because it’s an exciting time for WordPress themes.
This post provides a quick introduction to this new framework, and describes what’s possible by sharing a few practical tips and examples.
What’s theme.json?
Technically, theme.json is just a file that lives at the top-level of a theme’s directory.
Conceptually, it’s a major shift in how themes can be developed. Theme authors now have a centralized mechanism to tailor the WordPress experience for site authors and visitors. Theme.json provides theme authors fine-grained control over global styles, block styles, and the block editor settings.
By providing these settings and controls in a single file, theme.json provides a powerful framework that brings together many aspects of theme design and development. And as the block editor matures and adds more features, theme.json will shine as the backbone for themes and the editor to work together 💪.
Why Use it?
It’s the future! But if you’re like me, you might need something more tangible to be convinced. Here are a few reasons why you might use theme.json today:
Control editor settings like color, typography, spacing, and layout, and consolidate where these settings are managed.
Guarantee that styles apply correctly to blocks and elements across your site.
Reduce the amount of boilerplate CSS a theme used to provide. Theme.json won’t replace your stylesheet completely — there will be instances where CSS is needed to give your theme that extra flare (transitions, animations, etc.). But it can greatly reduce the base CSS needed from the theme.
I hope this gives you a sense of what’s possible and where themes are going. The above examples just scratch the surface of what kinds of theme design configurations are possible, and I’m very excited to see what theme authors create.
Introducing 5.8 “Tatum”, our latest and greatest release now available for download or update in your dashboard. Named in honor of Art Tatum, the legendary Jazz pianist. His formidable technique and willingness to push boundaries inspired musicians and changed what people thought could be done.
So fire up your music service of choice and enjoy Tatum’s famous recordings of ‘Tea for Two’, ‘Tiger Rag’, ‘Begin the Beguine’, and ‘Night and Day’ as you read about what the latest WordPress version brings to you.
Three Essential Powerhouses
Manage Widgets with Blocks
After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks. For our developers, you can find more details in the Widgets dev note.
Display Posts with New Blocks and Patterns
The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like create a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.
Edit the Templates Around Posts
You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.
Three Workflow Helpers
Overview of the Page Structure
Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.
Suggested Patterns for Blocks
Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!
Style and Colorize Images
Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.
For Developers to Explore
Theme.json
Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature. For more about what is currently available and how it works, check out this dev note.
Dropping support for IE11
Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you switch to a more modern browser.
Adding support for WebP
WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.
Adding Additional Block Supports
Expanding on previously implemented block supports in WordPress 5.6 and 5.7, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks. More information is available in the block supports dev note.
Check the Field Guide for more!
Check out the latest version of the WordPress Field Guide. It highlights developer notes for each change you may want to be aware of: WordPress 5.8 Field Guide.
The Squad
The WordPress 5.8 release was led by Matt Mullenweg, and supported by this highly enthusiastic release squad:
In addition to these contributors, many thanks to all of the community volunteers who contribute in the support forums. They answer questions from people across the world, whether they are using WordPress for the first time, or they’ve been around since the first release all the way back in 2003. These releases are as successful as they are because of their efforts!
Finally, thanks to all the community translators who help make WordPress available in over 200 languages for every release. 80 languages have translated 80% or more WordPress 5.8 and our community translators are hard at work ensuring more languages are on their way. If contributing to WordPress appeals to you, it’s easy to learn more. Check out Make WordPress or the core development blog.
In this episode, Josepha Haden Chomphosy discusses the importance of Diversity, Equity, and Inclusion to the fabric of the WordPress project and how we can move from a place of welcoming it to cherishing it.
Have a question you’d like answered? You can submit them to [email protected], either written or as a voice recording.
The third release candidate for WordPress 5.8 is now available!
WordPress 5.8 is slated for release on July 20, 2021, and we need your help to get there—if you have not tried 5.8 yet, now is the time!
You can test the WordPress 5.8 release candidate 3 in any of these three ways:
Install and activate the WordPress Beta Tester plugin (select the Bleeding edge channel and then Beta/RC Only stream)
Directly download the release candidate version (zip)
Use WP-CLI to test: wp core update --version=5.8-RC3
Thank you to all of the contributors who tested the Beta/RC releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.
Plugin and Theme Developers
Please test your plugins and themes against WordPress 5.8 and update the Tested up to version in the readme file to 5.8. If you find compatibility problems, please be sure to post to the support forums so we can work to solve them in time for the final release.
For a more detailed breakdown of the changes included in WordPress 5.8, check out the WordPress 5.8 beta 1 post. The WordPress 5.8 Field Guide, which is particularly useful for developers, has all the info and further links to help you get comfortable with the major changes.
If you think you have found a bug, you can post to the Alpha/Beta area in the support forums. We would love to hear from you! If you are comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.
The second release candidate for WordPress 5.8 is now available! 🎉
WordPress 5.8 is slated for release on July 20, 2021, and we need your help to get there—if you have not tried 5.8 yet, now is the time!
You can test the WordPress 5.8 release candidate 2 in any of these three ways:
Install and activate the WordPress Beta Tester plugin (select the Bleeding edge channel and then Beta/RC Only stream)
Directly download the release candidate version (zip)
Use WP-CLI to test: wp core update --version=5.8-RC2
Thank you to all of the contributors who tested the Beta/RC releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.
Plugin and Theme Developers
Please test your plugins and themes against WordPress 5.8 and update the Tested up to version in the readme file to 5.8. If you find compatibility problems, please be sure to post to the support forums, so they can get ready for the final release.
For a more detailed breakdown of the changes included in WordPress 5.8, check out the WordPress 5.8 beta 1 post. The WordPress 5.8 Field Guide, which is particularly useful for developers, has all the info and further links to help you get comfortable with the major changes.
If you think you have found a bug, you can post to the Alpha/Beta area in the support forums. We would love to hear from you! If you are comfortable writing a reproducible bug report, file one on WordPress Trac, where you can also find a list of known bugs.
In this episode, Josepha Haden Chomphosy talks about WordPress – In Person! The WordPress events that provide the dark matter of connection that helps sustain the open source project.
Have a question you’d like answered? You can submit them to [email protected], either written or as a voice recording.
Once you step into contribution time, your main concern is the users of WordPress, or new contributors, or the health of the WordPress ecosystem as a whole or the WordPress project. So you get all this subject matter expertise from competitive forces, collaborating in a very “us versus the problem” way. And when you do that, you’re always going to find a great solution.
In the “WordCamp Europe 2021 in Review” episode of the WP Briefing podcast, Josepha Haden talks about the importance of collaboration, which is vital in building WordPress. This edition of The Month in WordPress covers exciting updates that exemplify this philosophy.
We said hello to Gutenberg version 10.8 and version 10.9 this month. Version 10.8 adds rich URL previews, enhancements to the list view, and an updated block manager. Version 10.9 offers several performance enhancements, along with more block design tools and template editor enhancements.
The first major BuddyPress release of 2021, version 8.0 “Alfano,” came out on June 6. The short-cycle release offers features such as the ability to recruit new members, an improved registration experience, and profile field types. Download it from the WordPress.org plugin directory or check it out from its Subversion repository.
Further reading
WordCamp Japan 2021 was held from June 20- 26. The weeklong event, which had two session days followed by five contributor days, sold 1300+ tickets, with 45 speakers and 23 sponsors. Catch the event recording on YouTube!
The Core Team added block patterns and improvements to all legacy default themes. The team also shared a feature request that will allow developers to modify and extend the Site Health feature in Core.
The Design Team shared an update on the block pattern directory; the team is continuing to review suggestions and has offered some guidelines in this post.
Ujwal Thapa – co-founder of the Nepal WordPress community passed away due to COVID-19. Our community deeply mourns his loss and is thankful for his contributions.
Recent Comments