How to create an editing experience like this?

[tresorama]

My goal is to create this sort of editing experience.

Context

To give context to this question this is the Figma component that need to be implemented, the CTA.

The CTA has 6 variant.
The CTA uses the Button, which is another Figma Componen, that has 2 variant.

Desired Editing Experience

The experience requires that:

1. the content editor (who will use the editor) has ability to insert the CTA in the canvas, edit content (title text, description text, image, button text and link), then swap variant without losing any previously edited content. Then save the post/page.
2. the content editor has ability to swap variant of the CTA after saving the post/page as well.
3. the content editor has the ability to change the varaint of the nested Button (inside the CTA), while first editing and also after saving the post/page.
4. the develoepr (me) has ability to update the visual (CSS) of both "CTA" and "Button" instantly acroos entire site, without need to reopen post/page and resaving.

How to do it ?

Gutenberg has multiple feature that are suitable to this "problem":

• Block Style
• Block Variation
• Block Pattern
• Block Template
• innerBlocks
• theme.json
• Custom Coded Block (as last resort)

How to combine these, doing minimum amount of code and get every "requirements" satisfied ?
Obviously i can create a Custom Block with a lot of attributes and do all that , but i want to avoid it if possible and use core blocks instead (Group, Image, Button, Heading, ...). So i'd go "Custom Block way" only if stricly necessary for the requirements.

How do you tackle this task ?
How do you did in the past and ecountered obstacles? which obstcles? How did you refactor ?

[Ren2049]

You can do this without writing a line of code by creating the components within the editor. The question is how much time you're willing to spend and learn this by doing. It's going to be hard if you're not used to the editor.

I'm quite experienced as a designer and It took me months to get all the block editor quirks, but now it's quite easy. You don't have the same design freedom like in Figma, so it's best if you go from a rough drawing straight to the editor and try to build things and lean into the limitations.

I use this plugin to manage and categorize patterns: https://wordpress.org/plugins/pattern-manager/

The only downside is that the plugin can yet create or manage synced patterns and template parts, so you'd have to create them outside of this plugin and categorize them manually.

For variations I copy the styles of a group block below the pattern block, create a new pattern under a slightly different name and paste the styles.

If you want to maximize user customization best treat template-parts as "empty containers" for patterns. This way users can click on a template part and replace the underlying pattern. Check out this video and other in that channel: https://www.youtube.com/watch?v=w8DehSH1_PA

Download and study the Ollie theme and try to learn from it.

[tresorama]

Thanks for your reply.

So if i undestood correclty you would create a single Block Pattern or each variant of the CTA, so 6 patterns.
Then insert them into pages while creating pages.

Then after a while, considering that you make a partial redesign in Figma, how do you proceed in wp?

[Ren2049]

So if i undestood correclty you would create a single Block Pattern or each variant of the CTA, so 6 patterns.
Then insert them into pages while creating pages.

It's the only way right now until they release partially synced patterns that can sync inner blocks between variants. I try not to create too many variants of the same component right now, only ones that are structurally different where it also reflects in the name.

Then after a while, considering that you make a partial redesign in Figma, how do you proceed in wp?

I don't use Figma to design patterns currently. Considering the limitations with the editor and core blocks it's best to design directly within WP imo, and that's what I'm doing.

Designing within a more capable framework than what you use for building only leads to frustration imo. Usually with code or very low level page builders (e.g Webflow) it's the other way round where you have more freedom when bulding, it's only more clunky.

Because core WP won't become like Webflow anytime soon it's imo the best option to merge both, design and build within the same tool if you want to stick to core.

Other tools like Figma are still useful to try out global styles and general composition, managing brand assets or to design site maps and guidelines.