WordPress 5.8 (released last week 🎉) brings the power of Gutenberg blocks to widget areas — which means highly customizable layout and styling options, and a more WYSIWYG editing experience. I made a test site based on oldie-but-goodie Twenty Sixteen theme, which has 3 separate widget areas to work with. In this post, I’ll highlight a few cool things that are now possible to do with your widgets, and a take a look at 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 widgets areas than ever before — especially through the use of blocks with tons of customization options like the Cover and Image block. Here’s what I’m able to create in the classic widgets editor (above) versus what I’m able to 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 really easy to weave dynamic or interactive elements into your designs. While dynamic/interactive elements are sort of a given for many types of widgets, the block versions of widgets can be easily wrapped and layered within container blocks to more fully integrate them into your layout.
In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also tried inserting Custom HTML blocks within a Columns block to display different messaging depending on the time of day. (jQuery script here)
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.
Ungrouped layouts (left) versus grouped layouts (right)
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!
Inserting widget patterns
There is some early discussions about how patterns can begin to be integrated into the widget editors in GitHub issue #26170. Some of the conversation has been around introducing a Patterns tab into the inserter, which would allow users to browse patterns the same way as in the post editor.
A couple of goals for introducing pattern insertion UI into the widget editors are:
Display patterns that make sense to use in a constrained sidebar or footer area, depending on the type of widget area being edited.
Surface patterns in a extra discoverable way for users (including classic widget users who want to quickly recreate a traditional layout).
Based on this, I’ve been exploring ways that patterns could be surfaced in the quick inserter as a default/resting state as soon as the popover is opened:
Currently, patterns are surfaced below quick inserter options after the user begins typing in the search box. Perhaps a couple of patterns could be visible by default.The quick insterter could display a list of patterns that show a fly-out preview when hovered. A similar style has previously been explored for the block switcher menu.The quick inserter could contain a single large preview with carousel navigation to browse through patterns. This mimics the pattern placeholder setup UI.
Thoughts?
How would you like to see patterns incorporated into the new block-based widget editors? Join the discussion by opening a new issue on GitHub or commenting below!
Thank you @critterverse for this P2 focusing on the widgets in WordPress 5.8 release. The team would love your input during the Show and Tell Meeting happening later tonight. Cheers!
What was the transitional plan for switching to this new system of widgets from the people who are using regular/old way of using widgets on their website? I have seen several reports on WP.org forums where their widget page simply stopped working (blank page) and that makes me wonder, what could have been done to not break the backend widget page for so many people and allow them to onboard themselves to the newer system at their will.
Hi @critterverse I haven’t been actively involved with these developments, so I probably lack a lot of context. But I think, a lot of these issues would have been avoided if we didn’t enable it by default & let the user opt-in. But I am sure that was considered & its probably an edge case where a bunch of folks are reporting their widget page in admin is broken. But still I don’t see anything about on the planning front on how enabling it by default wouldn’t or shouldn’t break anything for people.
We could probably be waiting on people to actually visit their widgets page to realize, they have a broken widget page too.
>But still I don’t see anything about on the planning front on how enabling it by default wouldn’t or shouldn’t break anything for people.
Some of the considerations that went into this were around ensuring that legacy widgets work well in block areas and/or can be converted to blocks, for example. For more context, you can look at the “[Block] Legacy Widget” label in the Gutenberg repository on GitHub (both for upcoming improvements and closed/completed projects). There are also fixes in progress for some of the issues that have come up since the release that have been milestoned for 5.8.1.
You’re right that lots of different options were weighed and considered. Going with the opted-in-by-default path, the goal was for the transition to be as painless as possible but I totally understand the frustration from users who have run into issues. Thanks for sharing your perspective here, the feedback is helpful for future releases!
Im a bit confused about what the actual future of theme building with all these recent updates will look like…
Whats a good place to read about the future of theming? I’ve tried looking around but only find pretty general info like this, which is super nice ty btw but..
Should we move to building block based themes based on this new updates now?
Should we be extending the built in blocks with our theme’s custom needs or make new blocks to avoid possible breaking changes on future updates?
Should we now build page layouts following this new widgetized pattern flow and drop the old fashioned page-templates?
All this looks like we’re moving into a built-in page builder functionality, sort of…
If anyone cares to enlighten me a bit or share thoughts PLEASE do, asking for a friend lol
😍
Thank you @critterverse for this P2 focusing on the widgets in WordPress 5.8 release. The team would love your input during the Show and Tell Meeting happening later tonight. Cheers!
What was the transitional plan for switching to this new system of widgets from the people who are using regular/old way of using widgets on their website? I have seen several reports on WP.org forums where their widget page simply stopped working (blank page) and that makes me wonder, what could have been done to not break the backend widget page for so many people and allow them to onboard themselves to the newer system at their will.
Hey Ashfame! I’m sorry to hear that some reporters in the WP.org forums have run into issues with this update. I’m not sure what could be causing the blank screen issue you’ve described but that was not the intended behavior from a UX perspective. Some of the planning that went into this transition (including providing ways to opt-out and restore the classic interface) can be found here: http://wayback.fauppsala.se:80/wayback/20211106152649/https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/
Hi @critterverse I haven’t been actively involved with these developments, so I probably lack a lot of context. But I think, a lot of these issues would have been avoided if we didn’t enable it by default & let the user opt-in. But I am sure that was considered & its probably an edge case where a bunch of folks are reporting their widget page in admin is broken. But still I don’t see anything about on the planning front on how enabling it by default wouldn’t or shouldn’t break anything for people.
We could probably be waiting on people to actually visit their widgets page to realize, they have a broken widget page too.
>But still I don’t see anything about on the planning front on how enabling it by default wouldn’t or shouldn’t break anything for people.
Some of the considerations that went into this were around ensuring that legacy widgets work well in block areas and/or can be converted to blocks, for example. For more context, you can look at the “[Block] Legacy Widget” label in the Gutenberg repository on GitHub (both for upcoming improvements and closed/completed projects). There are also fixes in progress for some of the issues that have come up since the release that have been milestoned for 5.8.1.
You’re right that lots of different options were weighed and considered. Going with the opted-in-by-default path, the goal was for the transition to be as painless as possible but I totally understand the frustration from users who have run into issues. Thanks for sharing your perspective here, the feedback is helpful for future releases!
Im a bit confused about what the actual future of theme building with all these recent updates will look like…
Whats a good place to read about the future of theming? I’ve tried looking around but only find pretty general info like this, which is super nice ty btw but..
If anyone cares to enlighten me a bit or share thoughts PLEASE do, asking for a friend lol