FSE: Sync theme design with instances of blocks

[Triloworld]

Description

We develop websites in the FSE manner. There are predefined blocks and template-parts
In next step client get theme and all block and edit websites
When we get to update we must manually repeat adding class to all instances of blocks

We use atom css approach like TailwindCSS to class and divs are mostly elements that will be changed.

Can I know how the contentLock mechanism plays a role in that scenario? I use it and it is not working. Plenty of agencies use ACF to do the same way design as we like too. Pattern blocks suggest that it is something to have a global theme and different content.

It's the main thing to do: develop themes, have plenty of instances of blocks and update themes so I don't consider that as a feature.

I read that this will be somehow connected but not know if that's for sure my issue too: #50159

Step-by-step reproduction instructions

1. Create a theme with blocks
2. Setup blocks with contentLock and a pattern
3. Add by hand or by using + sign
4. Change data that is provided
5. Save it and verify that is working
6. UPDATE theme with new css class
7. No class is added to existing instances

Screenshots, screen recording, code snippet

I like to see something like that: #48458 (comment)
Block in sync means I don't need to update instances but a theme that provides blocks.

Environment info

Gutenberg 6.2.2, latest and greatest all. Tested on different instances.

Please confirm that you have searched for existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jordesign]

Hi @Triloworld - it seems like there might be a few aspects to this.

Part of what you're describing sounds like it might be assisted by the addition/change to Synced and Unsynced patterns which are now part of Gutenberg, and coming in WordPress 6.3
https://wptavern.com/reusable-blocks-renamed-to-patterns-with-synced-and-non-synced-options

In terms of the CSS styling being applied to elements - can you tell me a little more about what you're hoping to do? Is the desire to have the correct css-class applied to the pattern - so styling can be used for all uses of the pattern/block?

It would also be helpful to know what kind of CSS styling you're doing - the end desire for Gutenberg is all styling like that could be handled in the editor, to reduce the need for CSS (as much as possible).

[Triloworld]

@jordesign Hi,
I hope that after develop theme and create page I have option to sync class from blocks to instances in all pages. This sync option is required AFTER providing theme to fix style issues or any bugs.
TailwindCSS is atomic approach where styles defined by class are managed by html and not separate file. This html get separate instance on every page. Second problem: class exist in database and I cannot re-generate styles based on what is used on backend.

What semi-solution for updating theme blocks - provide is tool to compile few dynamic class in one static one (React-ish way) so we can update style but don't change static class that is added to all instances where block exist.

[Triloworld]

Yeah, the issue is great described there: https://wptavern.com/reusable-blocks-renamed-to-patterns-with-synced-and-non-synced-options
One more problem is to get any class Additional Class from backend database to static file in theme for generating styles