Feat: Neve FSE parent theme V1

[preda-bogdan]

Setup

This theme will become a parent theme.
This will be our full Neve FSE integration.

What do we want to achieve?

• Have a full implementation of FSE with the Neve name
  • Have the designs/styles/ ready for how the theme should look and feel. Feat: Design and Styles for new Neve FSE #3
  • Create themeisle.com page, store product, set up the process release, etc. Neve FSE Landing Page Themeisle #24
  • Create the new theme under the development branch.
  • More controls for Typography variations More control for each variation #5
• Inherit styles from Customizer from existing non-FSE Neve theme.
  • Migrating Neve customizer options on install Feat: Migrating Neve customizer options on install #2
• Ensure compatibility with the Neve PRO plugin Codeinwp/neve-pro-addon#2420
• Release

We will link and track all other related issues to this one.
Once every checklist item is completed we should have a full FSE implementation for Neve.

[JohnPixle]

Thanks for wrapping these up @preda-bogdan.

Can you point me to the actual theme files for the Neve FSE theme? Are these ones: https://github.com/Codeinwp/neve-fse ? I checked the theme.json file and it is pretty limited.

Ideally we'd want to start with a copy of our existing FSE themes, since they already have a solid base most settings and style variations. Our Fork theme would be a good baseline to start from.

Let me know your thoughts, thanks!

[preda-bogdan]

@JohnPixle there are no files at the moment. We will copy the structure from one of our FSE themes.
The files from this repository are for the child Neve theme with hybrid support for FSE, this will be replaced by the full FSE theme.

The files will be under the development branch.

Do you require these files to get started on the design?

I have no preference for the base theme, so we can use Fork as a baseline.

[JohnPixle]

@preda-bogdan Ok, makes sense.

No, these files are not critical at the moment, but will be useful soon.
I am currently working on styles etc.

Thanks for the update!

[JohnPixle]

@preda-bogdan Whenever you have the time, you may consider adding those files. I have already worked on:

• Feat: Design and Styles for new Neve FSE #3

and I believe we can get started with some of the basic styles and layouts. Thanks!

[preda-bogdan]

@JohnPixle Thank you for the update, will try to have them ready by the end of the week and ping you back when I add them.

[preda-bogdan]

@JohnPixle I've added the files from Fork as a base that you can start working with here: https://github.com/Codeinwp/neve-fse/tree/development I've changed all the namespaces and names, but the base design, for now, is the same as from Fork repo. Let me know if you require anything else to go forward with your design. I am tackling and testing some inheritance values from Neve.

Thank you!

[mghenciu]

Thank you @preda-bogdan for the setup.

If I remember correctly, when we worked on the other FSE themes - Andrei did setup an action (not 100% that's the technical term) that builds the theme zip on push.
I think that would help for this case also, so we can add the changes and be able to test how those look on a live site.

[preda-bogdan]

@mghenciu The action is present when you open a PR it will create a build with the theme each time you push new changes to that PR. You can fork from development.

@JohnPixle I've updated the development branch and we now inherit the colors defined in Neve prior to switching the theme to Neve FSE. I would appreciate if you can let me know what do you think about the current mapping:

"color": {
      "palette": [
        {
          "slug": "ti-bg",
          "color": "var(--nv-site-bg, #FFFFFF)",
          "name": "Background"
        },
        {
          "slug": "ti-fg",
          "color": "var(--nv-text-color, #202020)",
          "name": "Foreground"
        },
        {
          "slug": "ti-bg-alt",
          "color": "var(--nv-light-bg, #EDEAE4)",
          "name": "Background Alt"
        },
        {
          "slug": "ti-bg-inv",
          "color": "var(--nv-dark-bg, #1A1919)",
          "name": "Background Dark"
        },
        {
          "slug": "ti-fg-alt",
          "color": "var(--nv-text-dark-bg, #FBFBFB)",
          "name": "Foreground Alt"
        },
        {
          "slug": "ti-accent",
          "color": "var(--nv-primary-accent, #435DEB)",
          "name": "Accent"
        }
      ],
      "link": true,
      "gradients": []
    },

You can test this using the development branch as these changes are already present there.

For the fonts I don't know that we can import any font, but we can decide on a few that if present we will use. Let me know your thoughts.

Thank you!

[JohnPixle]

Thanks, the mapping looks correct @preda-bogdan and I will test them as well.

Next step for me is to add some font families and variations as defined here.

@mghenciu In case it is helpful, after the last FSE themes I had created this wiki in Notion for the FSE process, kinda like documentation as a reminder for the workflow. We can enrich it with new info as we go on.

[preda-bogdan]

@JohnPixle Thank you for confirming the mapping. I've updated the branch with all 6 of your style variations and the respective fonts.

The workflow is the following:

1. The inherited color values will only apply to the default style which is a copy of the first style for all purposes with the addition of having values inherited from neve.
2. The other variations will not inherit any colors from Neve.

I propose that we will only inherit a font if it is one of the fonts that are already present on the theme, what do you think?

Next, I'll start adding the layout elements to look the same as the Web Agency SS from Neve.

Let me know if you guys have any thoughts or feedback, thank you!

[JohnPixle]

I've updated the branch with all 6 of your style variations and the respective fonts.

This literally saved me, I would still do it, but would be challenging for my code-amateur mind. Thanks a lot @preda-bogdan

The inherited color values will only apply to the default style which is a copy of the first style for all purposes with the addition of having values inherited from Neve.

This sounds good. Essentially we create a new custom style variation. I wanted to propose that as well, if it would make sense. I think it's a safe way, nice.

I propose that we will only inherit a font if it is one of the fonts that are already present on the theme, what do you think?

Yes, no problem. I don't see any other way for now. Should be fine!

Instance

I have created a non-expiring instawp site where we can all see the progress of the theme. We can update this site with the latest versions. We can also use it to build the patterns before we add them inside the theme. @mghenciu let's do the building work there if you agree. Then we transfer things to the theme code.

Fatal error with dev branch

I tried to upload the zip of the latest development branch however, and got a fatal error. 🙈 @preda-bogdan Can you help?

[preda-bogdan]

@JohnPixle Thank you for the response. I've updated your instance with the latest development build. You can see all the changes I mentioned there.

Let me know if you require anything else.

[JohnPixle]

Thanks for setting this up! Will start work and follow up!

[JohnPixle]

Hey @preda-bogdan I think this issue is not relevant anymore, shall we close it?