Copy and Design by @critterverse
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.
https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?resi... 168w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?resi... 573w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?resi... 768w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?resi... 859w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?resi... 1145w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?w=12... 1264w, https://i0.wp.com/wordpress.org/news/files/2021/08/site-long-1x.png?w=18... 1896w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
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.
https://i1.wp.com/wordpress.org/news/files/2021/08/grouped.jpg?resize=30... 300w, https://i1.wp.com/wordpress.org/news/files/2021/08/grouped.jpg?resize=10... 1024w, https://i1.wp.com/wordpress.org/news/files/2021/08/grouped.jpg?resize=76... 768w, https://i1.wp.com/wordpress.org/news/files/2021/08/grouped.jpg?resize=15... 1536w, https://i1.wp.com/wordpress.org/news/files/2021/08/grouped.jpg?w=1264&ssl=1 1264w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
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:
https://i1.wp.com/wordpress.org/news/files/2021/08/footer.jpg?resize=300... 300w, https://i1.wp.com/wordpress.org/news/files/2021/08/footer.jpg?resize=102... 1024w, https://i1.wp.com/wordpress.org/news/files/2021/08/footer.jpg?resize=768... 768w, https://i1.wp.com/wordpress.org/news/files/2021/08/footer.jpg?resize=153... 1536w, https://i1.wp.com/wordpress.org/news/files/2021/08/footer.jpg?w=1264&ssl=1 1264w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
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!