Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block style for specific block variation #40621

Open
Humanify-nl opened this issue Apr 26, 2022 · 5 comments · May be fixed by #49728
Open

Block style for specific block variation #40621

Humanify-nl opened this issue Apr 26, 2022 · 5 comments · May be fixed by #49728
Assignees
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Block Variations Block variations, including introducing new variations and variations as a feature [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@Humanify-nl
Copy link

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 
     ]
  );
@carolinan carolinan added the [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. label Apr 26, 2022
@Andrew-Starr
Copy link

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

@gziolo gziolo added the [Feature] Block Variations Block variations, including introducing new variations and variations as a feature label Apr 27, 2022
@gziolo gziolo mentioned this issue May 23, 2022
69 tasks
@richtabor
Copy link
Member

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
Copy link
Author

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)

@munirkamal
Copy link
Contributor

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 gziolo added the [Feature] Block API API that allows to express the block paradigm. label Feb 13, 2023
@ntsekouras ntsekouras linked a pull request Apr 11, 2023 that will close this issue
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Apr 11, 2023
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 14, 2023
@gziolo
Copy link
Member

gziolo commented Nov 23, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Block Variations Block variations, including introducing new variations and variations as a feature [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants