Converting Reusable or Component to blocks should randomize all blocks classes/ids to prevent CSS conflicts

Bugs
,
1

Cwicly Plugin version: 1.3.1

Hi,

When converting a reusable or a component to blocks, all blocks (container and all descendants) classes stay the same, i.e. they are not regenerated.

This is an issue because when using the component/reusable and the blocks-only version on the same post, there are conflicts between CSS rules: the winning rules are the ones from the latest element in the page.

WORKAROUND: Convert to blocks, duplicate with Cwicly, remove converted blocks and keep only duplicated blocks.

image

2

Definitely a valid issue.

This is one reason why we avoid using the dynamically generated class names and use semantic naming for them instead and prefer the use of reusable global classes as well, where appropriate.

3

Hi,

Thanks so much for the report!
Cwicly does not randomize block IDs/classes if there are no other blocks with the same IDs/classes.

I have been able to reproduce the issue when detaching patterns or components that are already on the page.

I have added it to the bug tracker.

Best regards,
Johnny

1 Like
4

Hi @yankiara,

Thank you for reporting this!

This should now be fixed for Components with 1.4.0.3:

Kindly let me know if this is the case on your end.
Thank you in advance.

As for Reusable blocks, there is currently no way for us to hook into the Reusable block detaching function.
I’ll leave this in confirmed gutenberg Bugs for now, until this is made possible by the Gutenberg team.

Thank you for your understanding

1 Like
5

Hi @Araminta,
Working perfectly now, thanks a lot!

3 Likes