Redundant duplicate CSS for outline buttons inside a pattern

[asafm7]

Description

When a button is given the Outline style, it gets a CSS code in the page's header. When the button is placed inside a pattern, and the pattern is being used multiple times on the page, the CSS is being added as many times. See screenshot

Step-by-step reproduction instructions

1. Crate a pattern with nested buttons
2. Give a button the Outline style
3. Place the pattern multiple times on the page
4. Check dev tools to find duplicated CSS

Screenshots, screen recording, code snippet

https://1drv.ms/i/s!AhEX_VIY1-zfhdIJg--yzum4z_QBbQ?e=0YhAbd

Environment info

No response

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,
This is unrelated to patterns, it is duplicated regardless of if the blocks are inside patterns or not.

[asafm7]

Hi, @carolinan.

According to the screenshot, I assume a unique identifier is being given.

If multiple elements outside a pattern are given the Outline style, I assume they each get a different identifier.

While the declaration is being duplicated in both cases, in the first case the selector is identical.

Maybe I'm getting it wrong.

Anyway, I first thought it was the case with all custom styling, but later I realized it wasn't the case, so maybe it's negligible.

Thanks.

[aaronrobertshaw]

I can replicate this issue on the frontend. The editor however appears fine.

In the editor, the individual styles for applications of block style variations (to support nested block styles) use the block's clientId which is unique per block.

On the frontend though, there isn't a unique client ID available so the block style variation filter uses the same approach as element styles and generates a hash from the block's attributes. As the outline button block in the repeated pattern is exactly the same this creates a non-unique ID.

Before the extended block style variations feature landed there was a bit of a refactor so that the unique (well, supposedly unique 😅) class name was generated and added to the block attributes in one place. I believe it could be possible to tweak the classname there to ensure uniqueness.

My bandwidth is looking rather limited in the near future so if someone else would like to take a run at a fix, I'd be happy to review. Otherwise, I'll see if I can't slot this one into a gap sometime.

[aaronrobertshaw]

I found a gap 🙂

There's a tentative fix up in #64511. I'll give it more of a test tomorrow but feel free to take if for a spin @asafm7 and see if that resolves the issue for you.

[asafm7]

Thanks, @aaronrobertshaw! 🙏 I will check it out.