{"id":11115,"date":"2021-08-09T12:00:00","date_gmt":"2021-08-09T12:00:00","guid":{"rendered":"https:\/\/wordpress.org\/news\/?p=11115"},"modified":"2021-08-09T14:07:13","modified_gmt":"2021-08-09T14:07:13","slug":"widgets-in-wordpress-5-8-and-beyond","status":"publish","type":"post","link":"https:\/\/wordpress.org\/news\/2021\/08\/widgets-in-wordpress-5-8-and-beyond\/","title":{"rendered":"Widgets in WordPress 5.8 and Beyond"},"content":{"rendered":"\n

Copy and Design by @<\/span>critterverse<\/a> <\/em><\/strong><\/p>\n\n\n\n

WordPress 5.8 brings the power of Gutenberg blocks to widget areas \u2014 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<\/a>, with three separate widget areas. In this post, I\u2019ll highlight a few cool things that are now possible to do with your widgets and where things may be heading next.<\/p>\n\n\n\n

\"A<\/a>




<\/figcaption><\/figure><\/div>\n\n\n\n

Create Interesting Visual Effects With Overlapping Layouts and Duotone Images<\/h2>\n\n\n\n

Appearance-wise, users have a lot more control over widget areas than ever before \u2014 especially through the use of blocks with customization options like the Cover and Image block. Here\u2019s what I can create in the classic widgets editor (above) versus what I can create in the new block-based widget editor (below).<\/p>\n\n\n\n

Intersperse Widgets and Custom Code Throughout Your Visual Designs<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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<\/a>)<\/p>\n\n\n\n

Use Traditional Widget Layouts (Or Not) With Lots of Flexibility Over Title and Structure<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Note: Some themes, like Twenty Twenty-One<\/a>, are designed to flow content horizontally within widget areas. If you\u2019re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.<\/p>\n\n\n\n

\"Side-by-side<\/a><\/figure><\/div>\n\n\n\n

Copy & Paste Existing Layouts From the WordPress Pattern Directory<\/h2>\n\n\n\n

While patterns haven\u2019t been fully integrated into the widget editors yet, one thing you can<\/em> do is copy and paste patterns from the game-changing new WordPress Pattern Directory<\/a> into your site\u2019s widget areas. I used this horizontal call to action<\/a> pattern from the directory almost exactly as is, with minor color and copy adjustments:<\/p>\n\n\n\n

\"Footer<\/a>

<\/figcaption><\/figure><\/div>\n\n\n\n

FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior \u2014 consider this feature to be a preview of what\u2019s coming next for widget editing!<\/p>\n","protected":false},"excerpt":{"rendered":"

Copy and Design by @critterverse WordPress 5.8 brings the power of Gutenberg blocks to widget areas \u2014 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\u2019ll highlight […]<\/p>\n","protected":false},"author":17810800,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","date_recorded":"","explicit":"","block":"","filesize_raw":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[199],"class_list":["post-11115","post","type-post","status-publish","format-standard","hentry","category-features","tag-gutenberg","mentions-critterverse"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pZhYe-2Th","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/11115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/users\/17810800"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/comments?post=11115"}],"version-history":[{"count":7,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/11115\/revisions"}],"predecessor-version":[{"id":11130,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/posts\/11115\/revisions\/11130"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/media?parent=11115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/categories?post=11115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.org\/news\/wp-json\/wp\/v2\/tags?post=11115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}