Feat: Migrating Neve customizer options on install

[preda-bogdan]

We need to assess what Customizer options are critical and we want to migrate to the new theme.

@Codeinwp/design-team Here we will require your input on what options are the most important to have.

From previous comments we have:

• Inherit Font Family and colors
• Some "mapping" between Neve (classic) layouts (for example Single Post) with templates from the FSE theme. So, for example, in Neve Classic I am using a Cover layout with a single post, when I switch to the FSE I get a similar "cover" template too (assuming that we will provide variations for each template.

[JohnPixle]

@preda-bogdan

... in Neve Classic I am using a Cover layout with a single post, when I switch to the FSE I get a similar "cover" template too (assuming that we will provide variations for each template.

That's right. When we create the Templates in the FSE theme we can create those mappings. In the FSE templates, we can also include variants for the sidebar, so we can get even more detailed with the mappings.

For example:

Sing Post templates (FSE)

• Cover Header / sidebar
• Cover Header / no sidebar
• Normal Header / sidebar
• Cover Header / no sidebar

Same for Archives, pages etc.

[JohnPixle]

Regarding the Fonts, I am not sure how we can make it work 🤔

Because in FSE we have Style Variations and all the font families are wrapped in the theme (no option to select from any google font). So what happens if a user in Classic Neve is using a Google Font and then migrates to the FSE?

We will need to serve one of the fonts that are built-into the FSE theme.

One thing that might make sense would be to include all the fonts pairings we have in Neve, in the Style Variations of the FSE.

For example we can release the Neve FSE with 10-12 style variations which include the current font pairings. (And a different color palette for each variation ofc) Let me know your thoughts.

cc @mghenciu

[mghenciu]

Good ideas, John.

One thing we need to clarify I think, is if this flow is actually what we want: as a existing Neve user, I want to install Neve FSE and all my settings/styles will be converted. Hope others will clarify.

My assumption is that we don't want this, at this point at least. Maybe letter. I think right now we just want the new users, or the ones who already use Neve and want to create something new using FSE - would trust Neve FSE. But this won't be a direct conversion between Neve Clasic and Neve FSE.

---

How we can approach this, is by going step by step in converting Neve Layouts in FSE, but stick to what's possible now, and don't force things. For example Neve has Header presets; we can easily create some of those Footer variations in FSE and users can use them:

Color Palettes can be converted to variations, and so on.

---

Another idea for the fonts, could be to implement it directly in the theme, or via a plugin .

But I would recommend going simple overall, as things are still developing in FSE and probably they will add things that we are trying to fix now. For example we had an issue with Font Size on different screens, and as expected they added Fluid Typography which fixes this.

LATER EDIT: I think there are already some talks how to add google fonts.

[mghenciu]

In the meantime, I did an initial review on the Neve Customizer settings that are visible theme wise - and we can look into a replacements for them in FSE:

Note: I think in the initial phase, we'll focus only on translating Free features in FSE.

Sidebar, Blog and Page

• Sidebar ON/OFF/Position. From a quick look, at this stage it's not possible to do this in FSE, as they approach changed form using Widgets to blocks. What we can have here, is some alternative layout with Sidebars.
• Blog Archive. We can have in FSE, 3 variants for Blog similar to it looks in Neve now: List, Covers, Grid (Card and Simple). Maybe look into Masonry and alternating layout.
• Blog Archive Featured Post: see if this is achievable with FSE
• Single Post templates, also mentioned by John: Normal and Cover style made with FSE
• Page header settings -> look into creating a Normal and Cover style header template, that can be used in other pages besides the Single Post.

---

Headers

• Create some variations templates for the header, based on this:
• Sticky Header -> this is already possible, so we can have an alternative Header that is sticky. But I think users can enable this from the Group Block options.
• test and have in mind what Components that we have available in Neve, can be used in Neve FSE. For example dividers, Social icons, Button, HTML, Search

---

Footer

• same as for Header, create some templates in FSE
• (Pro) look into having payment/custom icons in the footer
• have in the footer variants, multiple columns. For example we can have a simple 1 col, 3 col and a more complex 4-5 col

---

Colors and Background

• have at least 4 color variants, including 1 Dark
• FSE already has a feature for custom colors , so we don't need to worry about this
• look into Site background image

---

Typography

• we can have here some variety in the fonts, between Theme Styles
• at this stage, it's not possible to have in FSE - different font sizes for Woo, Blog

---

Form fields

• such an option is not present in FSE, even is they add by default some styles for Input Fields
• we can do a quick research if we can add this, or at least make sure those look good by default - without providing customization settings

---

Buttons

• we are good here, as in FSE padding, border radius and margin can be defined globally in styles

[JohnPixle]

@mghenciu thanks a lot for sharing your thoughts on this.

First, I agree with everything about the breakdown of the features you did above. Style variations / template variations / patterns are the way to go.

Regarding:

One thing we need to clarify I think, is if this flow is actually what we want: as a existing Neve user, I want to install Neve FSE and all my settings/styles will be converted.

I'd say that an approximate translation of the very basics will be enough, we cannot achieve 1:1, and we should not force ourselves to do so. I was thinking about migrating colors, fonts and conditionally serve a very basic layout that is similar to some of the existing customiser settings.

For example,

• if you use sidebar in customiser, when you switch to the FSE, we serve you a layout without sidebar.
• Colors can be translated, so when you switch, you see the new colors.
• If you use one of the existing font pairings, you get the corresponding style variation in FSE with the same pairings.

We don't want to go crazy with details, we just want something that works in most of the cases.

I believe that realistically, a big chunk of the users with heavily customised websites and plugins will try out Neve FSE on a new project, instead of switching themes on their existing active sites. But if we manage to provide a good UX for the users with simple Neve sites, then we an increase the number of active installs from the beginning.

Let me know your thoughts.

[mghenciu]

The user acquisition strategy makes sense, @JohnPixle, especially thinking of how many users use Neve. So as Marius mentioned, the migration won’t be part of the very early release, which should give us more time to experiment and think about the migration more.

Another thing we'll need to think of in this time, is what benefits will Neve Pro retain. For example FSE has sticky header, which is part of Neve Pro now - meaning that we'll need to evaluate how to add more value in FSE, with Neve Pro.

[JohnPixle]

@mghenciu I was thinking that perhaps for the Header and Footer Builder we create at some point a custom block, where the user will build the element inside the FSE editor. This will require sidebar design for styling and settings etc, and apart from that, I have no idea if it's technically possible in the FSE Site Editor.

We can also add a lot of premium patterns in Neve Pro, and these patterns can be useful to both Classic and Neve users. Thinking 🤔

[preda-bogdan]

@mghenciu and @JohnPixle For this issue, we should now have the global colors ported from Neve and the Font Styles. The Font family will also be used if it is one of the already available fonts inside the theme. The spacing can be set inside the theme JSON.

I don't think we can add any form-related styles as @mghenciu mentioned.

I think for the patterns and presets we already discussed this and the user can replace the template parts if defined as discussed here: https://github.com/Codeinwp/neve-fse/issues/3#issuecomment-1494305128 or use the defined patterns.

Is there any other option that would require actions on my part on top of what we have now?

You can use this PR https://github.com/Codeinwp/neve-fse/pull/10 to check it contains all the mentioned changes. The only thing that is not present here is the new design.

Let me know, thank you!