WordPress/gutenberg

Block style for specific block variation

Humanify-nl opened this issue · 5 comments

Humanify-nl commented

What problem does this address?

After using (custom) block variations in a larger scale project, block styles seem to miss fine-grained control over when they appear in relation to variations.

Use case:

  • I have added a new group variation called 'section'.
  • I want to add a block style for the section but not for the other variations of the group block.

This is possible with a few lines of CSS, but the block editor UI has no way to know and shows all block styles for each group variation.

By giving theme developers more fine-grained control over which block styles appear to the end-user, based on the type of block variation(s), we can extend possibilities in styling, and clean-up valuable UI space.

What is your proposed solution?

I propose some more options when registering block styles (in php).

  register_block_style(
    'core/group',
    [
      'name' => 'custom',
      'label' => 'custom',
      'variations' => [ 'section', 'stack', 'row' ],    // if empty, style will apply to all 
     ]
  );
Andrew-Starr commented

Thank you for addressing this @Humanify-nl, variation conditional styles would be super useful.

richtabor commented

One thought. What happens if I apply a style that’s limited to a variation, then switch variations? Does the style class get removed?

Humanify-nl commented

One thought. What happens if I apply a style that’s limited to a variation, then switch variations? Does the style class get removed?

Good one. From a UX perspective I’d say yes. Otherwise end-users will learn that styles can linger. Instead we want to learn them that certain styles only become available when a variation is on or off.

This would make it so that variations live in a ‘higher hierarchy’ than styles, which makes sense because these are often structural changes (see: row, stack, group) and styles are how these ‘look’.

Since there are no css classes placed to identify variations in the front-end, this is the only way to make this work (that I can think of)

  • 👍3
munirkamal commented

Agreed! I've encountered this need several times and had to resort to using different workaround, such as creating separate block variations. It would be incredibly helpful if we could register block styles for specific block variations. +1 for this.

gziolo commented

It's potentially related to this issue reported on the WordPress forum: https://wordpress.org/support/topic/wp-social-link-mail-colour/.