Gutenberg: Widget screen: Adding a consistent wrapper.

[paaljoachim]

I have seen a mention of adding a wrapper here:
https://wordpress.slack.com/archives/C02QB2JS7/p1599307299416100

lecap:
Why don’t widget blocks have a consistent wrapper? What’s the point of a sidebar if you can’t have consistent styling with the blocks inside it?

@bph reply:
"That's certainly a good question, @lecap. Justin Tadlock raised a similar question in his article. You should open a GitHub issue to get it on the radar of the developers as well as other Theme developers in the community, instead of letting it get buried in this channel over weekend when no one is looking."

---

Justin Tadlock also mentioned it here:
https://wptavern.com/gutenberg-8-9-brings-block-based-widgets-out-of-the-experimental-stage

One of the largest changes that theme authors need to be aware of is that blocks in sidebars do not have the typical widget HTML wrappers. This could present some issues with styling widgets in the traditional fashion.

I am adding the issue to bring awareness to it.

[bph]

Thank you @paaljoachim for creating this issue.

[bph]

The current widget implementation allows to handle beore widget, after widget, before title and after title. How will this be handle with new widgets? It still works with Legacy Widget, but alone the name of it sounds like this is going to go away. But it would be helpfule to make this available for theme developer some how so they can style blocks differently depending on the context of block areas vs. post/page content.
This is quoted from the documentation of the current model

$args = array(
    'before_widget' => '<div class="widget %s">', 
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widget-title">',
    'after_title' => '</h2>'
    );
$instance = array(
    'title' => 'Title',
    'text' => 'Text'
    );
the_widget( 'My_Custom_Widget', $instance, $args );

[bph]

In this week's meeting, I brought this issue/question to the open floor. The single widget's wrappers won't be necessary. You can target them via the style sheet like this example .my-widget-area .wp-block-latest-posts

[justintadlock]

My proposed solution: https://wptavern.com/addressing-the-theme-design-problem-with-gutenbergs-new-block-based-widgets-system

This would require that Gutenberg/core support block patterns for the widgets screen, but I think it's very doable.

Some related comments on https://github.com/WordPress/gutenberg/issues/22875

[stefanos82]

@justintadlock question related to your aforementioned article: are widgets becoming obsolete with the release of WP 5.6? If yes, how will this affect existing themes that use the traditional widget mechanism?

I have some customers that changed web agency and came to us with premium themes that their previous agency acquired, thus we have no access to keep their website [theme] updated unless we do so manually.

That would not be the case though as we all know, due to the nature of most premium theme coding style; there are exceptions as always, but most of the times, the code is extremely unreadable.

What is your feedback on that?

[justintadlock]

question related to your aforementioned article: are widgets becoming obsolete with the release of WP 5.6? If yes, how will this affect existing themes that use the traditional widget mechanism?

Widgets will still be around. Theme authors can currently opt out of the new block/widgets system and stick with traditional widgets. See: https://make.wordpress.org/core/2020/09/03/whats-new-in-gutenberg-2-september/

[stefanos82]

Widgets will still be around. Theme authors can currently opt out of the new block/widgets system and stick with traditional widgets. See: https://make.wordpress.org/core/2020/09/03/whats-new-in-gutenberg-2-september/

Good to know :+1:

[adamziel]

It seems like this should be fixed by https://github.com/WordPress/gutenberg/pull/25693 ?

[draganescu]

I think this is closed by #25693

[justintadlock]

As far as I can tell by looking at the code, #25693 did not address this specific ticket. I'm not completely up-to-date on how the system works, so forgive me if I am incorrect. The WP_Widget_Block class is sort of a wrapper, a _faux_ widget, that outputs blocks. However, it does not wrap individual blocks. It wraps all blocks placed in it. If that is the case, the $before_widget and $after_widget HTML would wrap all blocks instead of individual blocks.

[justintadlock]

Sorry, I uploaded the latest and tested. What actually happens is that each top-level block gets the widget wrapper. This "sort of" works. However, it does not address the traditional widgets output because it ignores the title part of the widget structure.

For example, what happens when a user adds a Heading and the Latest Posts block? With traditional widgets, the two "blocks" would be wrapped as a single widget -- heading and content. However, with the latest code, the two blocks are treated as separate widgets, which means that it is not a fix for the issue at all.

The workaround here is for end-users to wrap the two items in a Group block. There are some obvious issues with this, namely teaching every WordPress user this technique. But, the less obvious issue is proper heading structure (e.g., the Heading might properly be an <h3> for the theme). And, there is no way for the theme author to specifically target the heading via CSS, unless they target h1-h6.

I still see no real way to address this outside of allowing block patterns, which still require some training. But, at least it's a one-click solution.

Since this ticket is closed, I want to at least formally mention that #25693 did not fix the problem.

[draganescu]

I will close this issue again. It was discussed in Slack and beyond the case of heading followed by content, which as @justintadlock explained can be solved by grouping, all the other blocks do not have a concept of title, so it is OK to wrap them individually.

Classic widgets still render normally and their titles should be as expected.

[bph]

@justintadlock I added a feature request for block patterns to be added to the Widget Screen Inserter