Widgets in WordPress 5.8 and Beyond

WordPress 5.8 (released last week šŸŽ‰) brings the power of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ā€˜blocksā€™ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ blocks to widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas ā€” which means highly customizable layout and styling options, and a moreĀ WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. 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.

Zoomed-out view of a single post with one sidebar widget area and two footer widget areas. The site content is about Marine Park Salt Marsh. There are is a ā€œList viewā€ of blocks floating next to each widget area showing how the design is constructed.

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. 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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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.

Side-by-side comparison of List view of a Sidebar widget area with and without grouped/nested lockups.
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:

Footer widget area with a black box that reads, ā€œBecome a monthly Patronā€ with paragraph text and a ā€œJoin nowā€ button in a separate column. A painted image of a waves hitting rocks is directly below with no space between.
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.

Three side-by-side views of the inserter: in the first, the Search bar is focused and ā€œtextā€ block icons displayed. In the second, the Patterns tab is selected and patterns are shown in a list. In the third, the drop down menu open with the ā€œSidebarā€ option hovered/active.

A couple of goals for introducing pattern insertion UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ā€˜how are they doing thatā€™ and less about what they are doing. into the widget editors are:

  • Display patterns that make sense to use in a constrained sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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:

Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black ā€œbrowse allā€ button that stretches across the bottom of the popover.
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.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black ā€œbrowse allā€ button that stretches across the bottom of the popover.
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.
Footer widget area with a search bar and block options in the top section and pattern options in a section below. There's a black ā€œbrowse allā€ button that stretches across the bottom of the popover.
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!

#blocks, #design, #gutenberg, #widgets