Use blocks instead of widgets in new WordPress installations

[noisysocks]

Modifies wp_install_defaults() so that when you install a new WordPress site you have block in your widget areas, not widgets.

Trac ticket: https://core.trac.wordpress.org/ticket/53324

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[noisysocks]

The Twenty Twenty-one theme will need some styling adjustments to accomodate for the different markup.

Here's how it looks with widgets:

Here's how it looks with blocks:

The headings are larger because of a missing widget-heading class. We could add this class to the Heading block but I'm not sure that's a good idea because users might miss it when adding their own headings.

The recent post titles are larger because that's how the Latest Posts block styles the list items. I'm not sure if it makes sense to override this in the theme.

I could use some guidance from someone who knows all about the default themes. @jasmussen, maybe? 🙂

[jasmussen]

I could use some guidance from someone who knows all about the default themes. @jasmussen, maybe? 🙂

I always appreciate a ping, thank you. In this case, I can only offer limited guidance:

• A widget-heading class would probably be useful, but I imagine it might be onerous to add to the heading block just in this context, and if it's not easy, might not be worth it.
• I think it's okay for themes to have to do a few updates here and there, and in this case I imagine there's a widget container they can target, i.e. .widgets h3 instead of h3.widget-heading, it shouldn't be a lot of work, and might be worth it for all the other changes blocks bring to widgets anyway.
• Finally, the heading block comes with options which classic widget headings didn't. Specifically, you can choose your own heading level, which is an important accessibility consideration for some themes that might be using Widgets in a more primary fashion than others.
• In addition to being able to set the correct heading level depending on your theme, the heading block comes with the ability to set the font size. That could potentially be a solution here, embracing one of the default smaller presets. I imagine that's why a widget-heading class existed in the first place — H2 might be the correct heading level semantically, but might have been visually too big for the design.

For some actual theme experts, you might want to ping @melchoyce and perhaps @MaggieCabrera.

[tellthemachines]

Code looks good ✅ Tested with both the new and the old screens and it's working well.

[tellthemachines]

Shouldn't we still have a meta widget in here?

[noisysocks]

I can't decide... would it be weird to have a Legacy Widget block in amongst the default blocks that you see in a new WordPress site? Is it a useful widget to have by default in 2021?

[tellthemachines]

Yeah good point about the Legacy Widget. We can leave it out for now and see if anyone notices 😄

[hellofromtonya]

I think it makes sense to not have this legacy widget on a new install. Why? The default experience of a new install does not include the Meta widget in an active sidebar.

That said, for those who want to use its features, might be good to have a new block version of it.

[noisysocks]

That makes sense to me. I've kept it removed.

[draganescu]

My worry here is that we assume it's not useful. Isn't the meta widget the default front end UX path to wp-admin?

[critterverse]

I would vote for leaving the Meta widget out but would it be possible for it to be available in the inserter and in the Legacy Widget block dropdown list until a new block version is created? (Similar to what we’re looking at doing for the Navigation Menu widget in #32431?)

[noisysocks]

My worry here is that we assume it's not useful. Isn't the meta widget the default front end UX path to wp-admin?

It already does not show on a new WordPress website because Twenty Twenty-one only has one widget area.

I would vote for leaving the Meta widget out but would it be possible for it to be available in the inserter and in the Legacy Widget block dropdown list until a new block version is created? (Similar to what we’re looking at doing for the Navigation Menu widget in #32431?)

Yes absolutely. Would you mind creating an issue in the Gutenberg repo about adding a block equivalent of Meta? I looked but couldn't find one.

[critterverse]

No prob, made an issue for the block version here: WordPress/gutenberg#32551

[noisysocks]

Thanks for your useful comment, @jasmussen!

A widget-heading class would probably be useful, but I imagine it might be onerous to add to the heading block just in this context, and if it's not easy, might not be worth it.

Yeah. I think adding the widget-heading class is not the way to go. It will be confusing to users who insert a new Heading block in their widget area as the new Heading block that they add won't have the class and so will appear bigger.

Finally, the heading block comes with options which classic widget headings didn't. Specifically, you can choose your own heading level, which is an important accessibility consideration for some themes that might be using Widgets in a more primary fashion than others.

Great point! 🌈

In addition to being able to set the correct heading level depending on your theme, the heading block comes with the ability to set the font size. That could potentially be a solution here, embracing one of the default smaller presets. I imagine that's why a widget-heading class existed in the first place — H2 might be the correct heading level semantically, but might have been visually too big for the design.

This is a really good idea and not one I'd thought of. I tried it, but it doesn't work fully because we also want the heading to appear bold. We could do this by adding <strong> to the Heading block but I fear that at this point we're having the default blocks assume too much about what everything should look like when really this is the theme's job.

I think it's okay for themes to have to do a few updates here and there, and in this case I imagine there's a widget container they can target, i.e. .widgets h3 instead of h3.widget-heading, it shouldn't be a lot of work, and might be worth it for all the other changes blocks bring to widgets anyway.

I think this is what we have to do! I've adjust the Twenty Twenty-one styles in 249e2d6. Happy to hear thoughts from everyone.

[noisysocks]

Unfortunately this breaks just about every unit test we have 😛. I'll start fixing them on Monday.