Add support for templates save for FSE Editor.

[preda-bogdan]

What problem does this address?

Currently, there is no support to save FSE templates from within the site-editor as the save feature relies on the postType being defined. Hence the template save is disabled as a result of #246

What is your proposed solution?

We would need to improve support for the FSE editor and save FSE template data under a global option instead of the post meta, just for the FSE templates.
Also, we would need to check the import workflow and use another type site-editor instead of gutenberg to differentiate FSE templates from regular templates.

---

Figma

[HardeepAsrani]

Not a priority but will appreciate how you see this working whenever you have time to think about it @Codeinwp/design-team

[mghenciu]

This is a good idea. Not sure if Core plans to add a flow for this directly in FSE.
I know they are working on Exporting/Importing Global Styles from other themes without changing it.

[mghenciu]

From a Design Perspective, what would be the requirements?

I guess one thing would be an additional Tab under My Library, for FSE Templates:

[JohnPixle]

@mghenciu not so sure about the hierarchy here. I think these FSE templates should be available only under the Gutenberg tab, and not at the top level tabs 🤔

I am not sure if what bogdan said "...save FSE template data under a global option instead of the post meta, just for the FSE templates..." is related to the actual UI or it's a technical/code thing.

Will take a look as well and let you know, it's a bit tricky.

[HardeepAsrani]

@JohnPixle @mghenciu At this point, we can maybe consider renaming Gutenberg to Block Editor to avoid this confusion and the FSE theme being part of "FSE Theme" based on if the user is currently using an FSE theme.

[JohnPixle]

@HardeepAsrani @mghenciu

I am not sure about renaming the Gutenberg tab to Block Editor or something FSE related. 🤔

My suggestion is to simply include the FSE templates in the patterns under the GB tab, and perhaps:

• Add a toggle in the filters list that shows/hides the FSE templates (I am not sure how useful this will be though) and
• Add a small "FSE" tag (or "template") inside the thumbnail area, so users can identify those patterns.

Also, what happens in the case when a user is not using an FSE theme? Do we still show the FSE templates?
Let me know your thoughts!

[preda-bogdan]

@JohnPixle I would hide the FSE templates if the theme being used is not FSE. I like the idea of a toggle and using tags to differentiate them, and I agree that just having them under the Gutenberg tab should be enough as to not create more confusion. They are basically using the same editor but within a different context.

For users that don't have FSE it will look the same, for the ones that have an FSE theme they will get some additional templates displayed.

[mghenciu]

sorry for the late replay.
As Bogdan mentioned, FSE and Gutenberg templates are the same thing 99%. Maybe just the new elements like template parts are different but we don't use those.

And I wanted to mention that this issue refers to the save for FSE Editor in Templates Cloud. An action that it's usually taken by the user, so assume if they are using this feature of Save/Import -> then it's a FSE site.
So I think having the toggle should be enough, and just making sure we don't crash the site if they are not using FSE but import a FSE template (even if they do this un purpose).

@JohnPixle, what do you think if we reuse the same design from demosites.io, bu instead of PRO we write FSE with #325ce8?

Based on how My Library pages look now (attached below), I think it will fit well:

Later we can see how and when we'll add FSE templates as Page Templates.

[JohnPixle]

@mghenciu

what do you think if we reuse the same design from demosites.io, bu instead of PRO we write FSE with #325ce8?

If we take this approach, then I think we should differentiate the FSE tag at least with the color. It's too similar with the PREMIUM tag right now imo.
And also, what will happen if a template is both FSE and PREMIUM? Is this a scenario?

[JohnPixle]

@preda-bogdan proposed to hide the FSE templates, if the user is not Using an FSE theme.
@mghenciu from what I understand you suggest to have them visible? I do not think that they can be visible, because they will be saved as an un-supported page type. (not as patterns or page ayouts)

Just wanted to confirm we are all on the same page here 🤔

[mghenciu]

And also, what will happen if a template is both FSE and PREMIUM? Is this a scenario?

Your are right John, we should think about this also.

Essentially there would be 2 places where we show Templates:

1. In My Library TPC, where users have the option to save their templates. Right now this covers Gutenberg, Elementor, Beaver and we want to add FSE now. This templates are bound to a license key, and can only be used under that license.
   As a user, I would expect to see all my templates, even the ones that are not supported.

In this case, even now we show Beaver Builder & Elementor Tabs and templates - even if the users didn't installed the plugins/builders. But on import we notify the user that the builder will be installed and activated, in case it's not found (attached example from Beaver).

For FSE I don't think we can do something, if the user has a no FSE theme.

---

2. On Page Templates section in TPC, available for all users.
   Here, we may add FSE templates later, but same UI should be respected - meaning that templates can be made in 3 different builders (excluding FSE) and at some point we may have Pro templates.

Based on this 2 contexts, I think what we can do for FSE (sincer there's no way to activate it), if a site has no FSE theme -> we can show the templates - with a FSE label, but with a disabled state.

Another idea could be to show a notice like the one from above, but recommend one of our FSE themes.

Let me know if this makes sense.

[JohnPixle]

Thanks for the input here @mghenciu

I think what we can do for FSE (sincer there's no way to activate it), if a site has no FSE theme -> we can show the templates - with a FSE label, but with a disabled state.

@preda-bogdan Can we do that technically?

Another idea could be to show a notice like the one from above, but recommend one of our FSE themes.
Yeah, this is going to be useful, because it will also inform the users about the FSE templates in the first time.

We can communicate something like:
" If you work with the New Gutenberg Site Editor, TC now allows you to save FSE Templates. Try one of our FSE themes today."

Or something like that. Which can appear once.

[preda-bogdan]

@JohnPixle yes, it can be done, if you decide we want to show them with a disabled state for when an FSE theme is not active it should be possible.

[JohnPixle]

Ok, Let's move on with having them displayed but disabled.

If you need any further help on this @preda-bogdan, don't hesitate to ping me.

[JohnPixle]

@preda-bogdan Do you need any further design work in order to proceed with integrating this?

I understand that if we want to have a message in a popup, we will need the proper copy. I will work on that.
Apart from that, I can also work on a final mockup for your reference, unless you find it un-needed.

Let me know!

[JohnPixle]

@preda-bogdan I am back with a follow-up on this.

Popup to let users know about the FSE addition

The first time users open the library after the update, we should give them a heads-up that they can now save FSE templates. The learn-more link takes them to the related doc (in case we have one).

Library UI changes

I am suggesting three changes here:

1. Keep the Show FSE Templates toggle (only if there is NOT an active FSE Theme)
2. Disabled FSE templates would have a 50% opacity to imply their disabled state.
3. For disabled FSE templates, let's show them a custom Overlay that says "You need an FSE-compatible theme in order to use this template."

FIGMA

---

@mghenciu Feel free to share you input here if you have some. Regarding the positioning of the tags, eventually I discovered that there are no cases for a "Premium" tag in parallel. This tag only happens on Starter sites, not templates.

[mghenciu]

Make sense, @JohnPixle . We can review the tag position later if there would be any Pro Templates.
I only tried an alternative in Figma with a less punchy background (inspired from Dribbble UI). In case we want attention, we can go for the one you done initially.

And regarding the badge position, what do you think if we add it on the right side? this way it will be in the same place all the time, even with a longer name:

Also note that this should work in the List view, which is available in the settings page.

---

I wanted to ask also if we have now (if not - I think we should) the Top TPC icon that allows saving pages. Right now it's not visible on the Neve FSE demo:

[JohnPixle]

@mghenciu great ideas, thanks so much!

I left your version on the board, let's go with how you suggest.

I wanted to ask also if we have now (if not - I think we should) the Top TPC icon that allows saving pages. Right now it's not visible on the Neve FSE demo:

I think Bogdan may help with this, I think it should be possible (hopefully)

[JohnPixle]

@HardeepAsrani @preda-bogdan 👋🏻

We have set the design status as "Ready for Dev" for this one, you may proceed with it and let us know if you have any Qs or need clarifications! Thanks!