Duplicating and deleting blocks is messing with Local Class system

Hi,

I found after a while what was causing some weird behavior with Greenshift Local Classes on pages I was editing.
In fact, at least 3 cases that can get users stuck with their styling on greenshift ui:

1: Duplicating a block with a Greenshift Local Class

It happens when you:

1. Create a Local Class on a block
2. Add some styles to this class
3. Duplicate this block

See this screencast demo

This is a common case, when you first create a block you want to style with a class, and then quickly add more of this block on the page and then just change maybe some content or something, like cards, testimonials, buttons/CTAs…
In fact, this creates 2 controller blocks for this class, each one having its own styling, and the last one overriding the others.
Imagine a big landing page, with many CTAs dispersed across the page, some of them duplicated, and others recreated manually:
It creates a very confusing and hard to recover situation

Reason: Duplicating a block copies “css” and “attributes” data of the block, which is what makes a block a Local Class controller, so now you have several Local Class controllers which is not expected by Greenshift

Workaround for now: Recreate a second block manually without duplicating the first, add class[es] manually (so the blue box “Looks like this class is controlled from another box” appears), and then you can duplicate this second element anytime

To fix a messed up page without redoing manually all your blocks, you can also try to reset thier “css” and “atrributes” on code editor, but this can become very tricky on a complex page or block

Screencast Demo

But if by accident you began, in your editing history, to style the class on a first block, then duplicate it, then by accident modify the styles on the second one and so on… Then, the style of your local class is now spread on different blocks…
At this stage, it may be better to review each block styles and merge all of them in the first one, delete the other “controllers”, and re-add them manually so you’ll be in peace for the future with only one main controller for this class.

2: Duplicating a block with a local class, having only subselectors styled and not the class itself

It happens when you:

1. Create a Local Class on a block
2. Add some (1 or more) subselectors, and style those subselectors
3. Duplicate this block

See the screencast

This is a common case when you want a parent block that will style its children, like a parent layout row/grid/section… you want to duplicate on the page

Same reason as #1, but this time, as the parent blocks have is no styling, Greenshift can’t recognize any of them as a controller, “Locate block controller” button appear on all of them, cycling through each one, and then you don’t know what to do anymore to change your styling

Workaround for now: should be like #1 (not tested), but even more tricky as now the blocks attributes become very complex with all the selectors

3: Deleting a block controlling a Local Class

Some times, you have a block that controls a Local Class, and some others blocks where you added this local class manually on your page (so everything is good for now, they refers to the first one).
Then, say you want to delete the first block as you don’t need it anymore: You lose the class styling as it was saved in the first block

See the screencast

As the Local Class concept applies to the whole page, it is expected that, as the class is present on other blocks, the styling would be transfered to the next one to keep the styling on deletion

Workaround for now: be careful when deleting a block with local class: if you know that another block is set to the same class (it can be hard to remember or find on complex pages though, this is why this should be automatic), then take your time and click on Copy Styles on the class controller, and then on the second block, click the class and paste styles And subselectors (if relevant).
Then check and delete the original block

It would be great to have all of this working in a more expected way, or even better, have some sort of tab in Gutenberg Editor to review and manage local classes

Maybe can we start by having a little confirmation alert box that appears when deleting a block controlling a local class, and may ask if we want to keep the class (and move its attributes to an other one), or delete it along?

Same for duplication, it may ask if we want to duplicate without becoming a duplicate local class controller (so referring to the first one for further edits), or duplicate verbatim like now (with a little text warning that this will create two controllers)

Thanks