Add block patterns to the Widgets editors

[bph]

It seems with the omission of the widget title property of widgets, and the replacement of the current core widgets with blocks, that don't have titles, end users will need to use multiple steps to recreate their sidebar units, combining core/block like latest posts or calendar with a heading block (=title) to display in the sidebar.

Now that every block has its widget wrapper this seems to only work well with a group block containing heading block + paragraph block.

With block patterns available via the Inserter, themes and plugins would be able to provide the widgets as a block patterns and help their users with this.

[annezazu]

@mapk wanted to flag this for you for a design perspective as this seems like a major UX flow to get right.

[mapk]

Thanks for the ping, @annezazu! Overall moving to blocks and helping users become accustomed with blocks is our goal here.

Block patterns can help as @bph points out when trying to combine blocks, or even just trying to establish a nice layout. I'm all for this. I remember @justintadlock pointing this out too.

Currently, we've just merged in Reusable blocks. Let's get a Patterns tab in there now too.

[noisysocks]

If this is easy to implement then let's do it. If not, we could consider leaving it out of v1 of the widgets editor.

[critterverse]

Hi all! I just wanted to add to this discussion that I think introducing patterns would be a great addition to the widget editors now that we’re looking ahead towards further enhancements for the block-based editing experience.

It would be really helpful for themes to be able to supply their own widgets patterns, which would help resolve some of the hiccups we’ve seen with the way certain themes like Twenty Twenty-One handle the flow of content within a widget area. Design contributors could also potentially submit universal widget patterns to the new Pattern Directory. Ideally, the directory could showcase patterns that mirror “traditional” widget layouts (a grouped lockup with a widget and title above) as well as other interesting layouts that are newly possible with blocks.

Maybe there could even be a new category introduced in the Pattern Directory for widgets, but I would defer to others who have been more closely involved with the development of the directory on how we could best incorporate widget patterns into the existing structure there.

An early sketch of how the inserter might look to help get the discussion going:

Note that the "tip" section typically appears at the bottom of the inserter but could potentially be made more prominent somehow in order to help direct users towards the Pattern tab. Also note that Reusable blocks may be introduced into the widgets editors as well (#32952), which would introduce a third tab alongside "Blocks" and "Patterns."

[kjellr]

Maybe there could even be a new category introduced in the Pattern Directory for widgets, but I would defer to others who have been more closely involved with the development of the directory on how we could best incorporate widget patterns into the existing structure there.

Interesting suggestion. If we did this, I do think a separate category would make sense  — many (the majority?) of patterns in the directory will likely look weird in a sidebar for example, so I like the idea of having a dedicated category for sidebar-optimized widgets.

[shaunandrews]

Having patterns available from the new widget screen seems like a big bonus for using blocks; I'd love to see it happen.

I'm not entirely sure about adding a "Widgets" category to the directory, though. Instead I think it might make more sense to add multiple categories like "Sidebar" and "Footer." Then, we can use a "Widget" tag (and Block Scope) to help provide context to the patterns in those categories.

[critterverse]

Instead I think it might make more sense to add multiple categories like "Sidebar" and "Footer." Then, we can use a "Widget" tag (and Block Scope) to help provide context to the patterns in those categories.

This makes much more sense. Thanks for weighing in @shaunandrews and @kjellr!

[draganescu]

So effectively "enabling" patterns is just adding the

array( 
			'__experimentalBlockPatterns'          => WP_Block_Patterns_Registry::get_instance()->get_all_registered(),
			'__experimentalBlockPatternCategories' => WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
		)

configuration to the initialization of the widgets editor.

However we don't support entity based blocks, so patterns such as the ones in the "Query" category won't work. So the main task here is to see whats up with the reusable and FSE blocks keeping them from working, see #32952.

[ndiego]

Is there any active work being done on this? Patterns really need to be available from the block based widgets screen.

[noisysocks]

@draganescu is correct. It's easy to fix this but we're blocked by #32952 which is more involved.

Just noting that we also will need to implement this for the inserter in the widgets customizer section.

[JTorresConsulta]

What's going on 6.1 ?
Why can't I add reusable patterns to widgets blocks !?

[JTorresConsulta]

At this moment Wordpress has become a frustration factory

You cannot use widgets in the block editor
You also can't use blocks in the widget editor

LOL

[Julianoe]

This is getting ridiculous. Blocks are everywhere in the WordPress admin now. Latest update even introduced a "Patterns" link (at last!) in the admin menu to make it a more obvious tool to use for end-users... but widgets still can't use patterns..

On a UX perspective this is misleading. People (clients, users) who learned to use the block editor are now wondering why they can't use this patterns tool which in the Widgets UI which looks exactly the same as the Posts/Pages editor UI...

[annezazu]

Following up here after getting this recent notification. Thanks all for continuing to chime in. I wanted to recap where things stands as of today:

• This remains blocked due to Enable Site, Post, Query, Navigation, and Reusable Blocks in the Widgets Editor #32952 which has certain blocks disabled.
• For classic theme authors, the recommendation is to use template parts rather than widget areas.
• A shorter term solution would be to allow patterns to be used but only patterns without the blocks that are disabled. This isn't ideal but it would allow access to some pattern usage.
• A longer term solution might be one of moving the widgets areas to a Data Views experience in the Site Editor and treat them like template parts or patterns there. This path is very unclear and very much a longer term idea.

I've opened a developer blog topic to help get the word out to classic theme authors for now WordPress/developer-blog-content#254

If anyone following this work wants to try out a PR to allow patterns without certain blocks to be used in the widgets area, please jump in!

[lordmatt]

Wouldn't having a core/widget/empty block type and 'blockTypes' => array( 'core/widget/empty' ), in register_block_pattern() be a possible solution? It wouldn't be terribly elegant but in the short term...

[t-hamano]

In the latest Gutenberg, things get even more confusing as the Patterns tab is visible in the inserter even though patterns are not available in the widget editor (See #65855).

As I understand it, the reason patterns are disabled in the widget editor is that it doesn't allow us to save edited entities, as reported in #32756.

However, the current synced patterns do not allow use to edit the pattern content directly on the editor canvas. We need to click the "Edit original" button on the block toolbar.

I also tried changing this variable to true to see if we could use the pattern on the widget editor:

As you can see, there is no "Edit original" button on the block toolbar for synced patterns. This means that we can no longer edit entities on the widget editor.

Considering these, can we consider re-enabling patterns in the widget editor? However, we need the ability to check whether a pattern contains blocks that should not be used in the widget editor.

[waqastariqkhan]

Those who are looking for a quick work around to add the pattern to their widgets ( Sidebars, or Footers )

You can just copy the block and add this using Custom HTML Block to the widget. Works fine.