Feat: Design and Styles for new Neve FSE

[preda-bogdan]

@Codeinwp/design-team
You can use this issue to add your designs and ideas and keep everything related to the design and styles here for easy reference, prior to implementing this.

[JohnPixle]

@preda-bogdan Just a heads-up that I have started writing things down in a Notion page for now, where I am adding the values for the Style Variations.

Once you add the theme files from fork, I will need you help with adding the fonts and a couple of other things, but after some point I will be able to add the values and everything for each Style Variation on my own.

Thanks!

[mghenciu]

@JohnPixle , I started building some variations for the Footer and Single Post pages. One thing I noticed while doing this, is that there may some challenges for the Archive and Single pages. Basically that for the Footers and Headers, those templates can be easily added on a page via the Block inserter. But let's say we build 3 Single Post variations, how would a user switch between them in an easy way? for example if he wants now all his Single posts to look like variation 3.

Right now, the way to do this is by copying content of a variation in the Main Template, but this doesn't sounds like a good approach.

I am asking this now, so we don't invest too much in variations that may be hard to configure and use.

---

After more digging, I see that it's possible to Create Custom Templates, and using Edit on Posts and Pages -> assign a Template:

---

For me it looks more like a hacky way of doing things, as it's not even in the FSE menu. But if that's all we have, we'll have to take it.
I was imagining that it would work something dropdown, so in case an user has more Single Post templates, he can easily choose what template to use as main Single Post.

[JohnPixle]

@mghenciu Thanks for the input here.

I remember Andrei had mentioned something about being able to use multiple variations for page templates, and headers / footer. But I don't think we managed to implement it, and I am not sure how it goes.

Currently reviewing a bit the latest wp version. A bit weird at some parts...

Our concern must be the ease of use though, I agree. I also see that many of the themes in the repo are providing headers and footers as patterns. Perhaps we can initially provide them as patterns as well. If in the future Core decides for an easier way to swap the template parts from within the Editor UI, we can see then.

For other templates (variations of singles, archives etc), I am not sure how to proceed. Perhaps we can add them as patterns as well, as the "quick edit" method is not viable I think. There must be a core-friendly way to do this.

@preda-bogdan Do you have any ideas if there is a possible way to create multiple templates for Archives and Singles and being able to use them per different posts and categories? Our other option would be to offer these layouts as patterns for now instead as templates inside the editor?

[JohnPixle]

@preda-bogdan

@preda-bogdan For these stepper here, can we provide the default values of each step?

[mghenciu]

If changing templates globally is too complicated from a user perspective now, what we can do John, is to have only 1 variation for Single Post and 1 for Archive. So a total of 4 templates (2 default + 2 variations).

Later, when Core will have a more intuitive way of switching Variations -> we can add more templates.

[JohnPixle]

@mghenciu Well, the thing is that somehow we want to include some built-in variation in these layouts, since in Neve Classic there are so many ways to display your posts grid for example.

So it would be great to have layouts for

• Default Grid
• Cover
• Rows

etc.

We can just create these as loop patterns at the least, and include them in pattern inserter.

[preda-bogdan]

@preda-bogdan

@preda-bogdan For these stepper here, can we provide the default values of each step?

@JohnPixle Can you provide more context about where that section is located?

[mghenciu]

@JohnPixle Can you provide more context about where that section is located?

That's a universal control, and I think it was introduced with 6.2 or/and new versions of Gutenberg.
It can be enabled for most of the blocks, under Style Tab > Dimensions (add an option if not present):

[preda-bogdan]

@mghenciu Thank you!
cc: @JohnPixle

To answer the question we can have specific styles defined inside the theme.json for specific blocks E.g.

"styles": {
        "core/post-title": {
            "spacing": {
                "padding": {
                    "top": "30px"
                }
            }
        }
    }

And or use a general value that applies to all blocks:

"spacing": {
    "margin": "30px"
}

For the parts variations, we can register multiple parts for specific sections e.g.

"templateParts": [
    {
      "name": "header",
      "title": "Header",
      "area": "header"
    },
    {
      "name": "header_s1",
      "title": "Header Variation 2",
      "area": "header"
    },
    {
      "name": "footer",
      "title": "Footer",
      "area": "footer"
    }
  ]

These will be available inside the editor and when using the replace functionality:

Later edit: Also these can be further overridden by each variation.

Let me know what you guys think. Thank you!

[JohnPixle]

@preda-bogdan These sound great., thanks so much for clarification.
Can the same logic of Template Parts be applied to Single + Archive Templates ?
I mean, register many single post layouts, and then user can choose which one they want inside Site Editor.

@mghenciu This Template Parts thing seems to be solving for the Headers and Footers discussion we had.

[preda-bogdan]

@JohnPixle Yes, we can also define general sections that can be inside the parts folder.

[JohnPixle]

@preda-bogdan The plan is to offer some Headers and Footers for now as template parts, everything else can be done with patterns. Mihai added some headers and footers today already.

Regarding Template variations (archives, singles etc) yes, we have built some already, you can see them at the demo.. We want to include them as well, but I am not sure how the user will be able to choose between e.g, Archive templates.

We have a call tomorrow (Friday) with @mghenciu to finalise some things and will let you know which patterns are ready to go.

Thanks!

[JohnPixle]

@preda-bogdan
@preda-bogdan For these stepper here, can we provide the default values of each step?

@JohnPixle Can you provide more context about where that section is located?

About those steppers, you think we can add our own values and replace the default ones?

[JohnPixle]

Hey @HardeepAsrani this issue was from the planning stage prior to the initial release, I think all things here have been taken care of. Feel free to close the issue if you see fit. Thanks!