search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.34k stars 4.13k forks source link

No way to set custom style for rows #48109

Open bradhogan opened 1 year ago

bradhogan commented 1 year ago

What problem does this address?

Currently, you can only use register_block_style to register styles for the parent group block.

What is your proposed solution?

Add ability to target rows (and stacks for that matter). In my case, the use case is that I'm going to add a style to rows only that would wrap the row with a "three-col-max-per-row" class so I can have more control over the style of a column-like grid layout. Unfortunately the columns block is currently pretty limiting. Example: if I want three equal columns on large screen, condensed down to two columns on a laptop and one on mobile, I can't do that unless I write specific custom CSS into the theme.

Alt option would be to add a "max / min columns" to the columns block. Might also require a toggle of some sort to set columns as equal width.

tellthemachines commented 1 year ago

This is an interesting problem! Thinking out loud a bit here:

Row and Stack are variations of Group, and register_block_style is applied to the block, not taking variations into account. This could change, but we should bear in mind that block style variations are moving towards being editable in global styles since #46343, and the global styles interface also targets only blocks and not variations. If register_block_style's behaviour were to change, it would make sense to change global styles to accommodate block variations too.

The basic mechanism of adding a style variation classname to the block in order to apply that style variation won't change, which means that we can continue to add custom styles for them in the theme stylesheet as before.

It's always possible to target only Row or Stack blocks when adding styles for the variation, e.g. .is-style-my-custom-style.is-layout-flex.is-vertical (or wrap the extra classnames in :where to avoid bumping up specificity too much) but this leaves the problem of the button for that style variation displaying on Group blocks even if it has no effect.

Example: if I want three equal columns on large screen, condensed down to two columns on a laptop and one on mobile, I can't do that unless I write specific custom CSS into the theme.

There might be a better solution for this. I agree that current responsive behaviour is less than ideal, and alternatives are being discussed in a few places. A possibility I'm particularly hopeful for is the introduction of a Grid layout type; see #47809. A grid layout using auto-fill would provide better responsive behaviour out of the box than we can ever provide by setting a fixed column number at certain breakpoints.