Big styling / specifity problems with WP 6.0

[langhenet]

Description

Hi, I'm a developer, and I've been very happy to ditch pagebuilders to use gutenberg and build custom blocks for my themes.

I just dequeue all gutenberg frontend css, and style everything according the project design in the theme css (sometime using a theme.json).

With the the latest WP release there's a lot of inline and so not easilly overridden CSS which gets injected into the head.

For example all the columns are now styled like this:

.wp-container-5 {
    display: flex;
    gap: 2em;
    flex-wrap: nowrap;
    align-items: center;
}

So all the columns by default do not stack on mobile anymore , and this inline style is so specific that it overrides my old styles, and to override it I need to

.wp-block-columns {
  display: block !important;
}

@media  only screen and (max-width: 968) {
    display: flex !important;
    flex-wrap: nowrap;
    gap:  2.5rem !important;
}

and use 3 !important, which is quite ugly.

I know that I can stop outputting the inline styles completely

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );

But then at this point, since wp-block-buttons do not output alignment classes anymore, I can't align buttons😕

Is there a solution to this, so that I can simply style a website without having to override this very opinionated inline styles?

Step-by-step reproduction instructions

1. insert columns
2. try to style them without !important

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.0 / Custom theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Hi!
How about

function prefix_remove_core_block_styles() {
	wp_dequeue_style( 'wp-block-columns' );
	wp_dequeue_style( 'wp-block-column' );
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );

Would that be enough? You would need to replace all the column styles for the front, not only the breakpoint.

I'd like to know more about "columns by default do not stack on mobile anymore" because I am not able to reproduce it.
Using WordPress 6.0, with and without Gutenberg active, and with a classic theme, the toggle for "Stack on mobile" is enabled by default, and the columns do stack on smaller screens.

[aristath]

Those inline styles get added because of options and selections you have made in the editor.
Did you try going in the editor itself and simply change the options for that container? 🤔

[langhenet]

Hi @carolinan , thank you for your reply.

As I stated in the first comment, I already dequeue all gutenberg/block editor stylesheets :-)

I'd like to know more about "columns by default do not stack on mobile anymore" because I am not able to reproduce it. Using WordPress 6.0, with and without Gutenberg active, and with a classic theme, the toggle for "Stack on mobile" is enabled by default, and the columns do stack on smaller screens.

For me it's not. When I have the "Stack on mobile" switch active, the inline css for the specific element (.wp-container-x) is

.wp-container-9 {
    display: flex;
    gap: 2em;
    flex-wrap: nowrap;
    align-items: center;
}

without media queries. So columns are always in a row (see the flex-wrap: nowrap)

Anyway, even if this is going to be fixed, in general, I think it would be a good practice to let developers easilly override / opt out from inline styling, without at the same time letting them be able to correctly style the blocks (see the problem with the button block when using remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );) :-)

EDIT: I've seen that if I DO NOT deregister gutenberg style sheet, there's a rule which lets the columns wrap.

@media (min-width: 782px)
.wp-block-columns {
    flex-wrap: nowrap!important;
}

And

.wp-block-columns {
    display: flex;
    margin-bottom: 1.75em;
    box-sizing: border-box;
    flex-wrap: wrap!important;
    align-items: normal!important;
}

But still is made with 2 (!!) important rules, where non actually should be there...

[langhenet]

Hi @aristath , thank you for your reply :-)

Those inline styles get added because of options and selections you have made in the editor. Did you try going in the editor itself and simply change the options for that container? 🤔

I just would like to override the styles of gutenberg wihtout having to use too many !important directives, and still have the ability to style all the blocks (see the problem with the button block when using remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );) :-)

[carolinan]

You are right, I apologize, then I don't think I can be of much help. ☺️

[glendaviesnz]

The classnames were added back to the likes of buttons with this PR, which will hopefully make it into the next minor WP release. In the mean time this filter should achieve the same thing:

[langhenet]

Hi @glendaviesnz, thank you for your reply

The classnames were added back to the likes of buttons with this PR, which will hopefully make it into the next minor WP release. In the mean time this filter should achieve the same thing:

I'll try it out!

[langhenet]

@glendaviesnz I've tried the solution and it worked :-)

thank you very much