Enable 'Inner blocks use content width' for the main Groups

[mghenciu]

Description

As discussed on Slack, the sections on each page are imported as a Main Group, but this makes it look like the whole page has a Padding.

In order to mitigate this, we need to enable the Inner blocks use content width for the main groups, which will make the Padding invisible in the Editor.

Step-by-step reproduction instructions

1. Create a fresh instance
2. Install Neve FSE 1.0.3
3. Open the Front Page in edit mode and notice the visible Padding in the Editor

Screenshots, screen recording, code snippet or Help Scout ticket

---

The setting that needs to be enabled:

Environment info

No response

Is the issue you are reporting a regression

No

[JohnPixle]

For the record, adding some more context... We discussed about this in Slack, and turns out that this solution with the Inner blocks use content width will not work for all templates.

However, adding a bg color to the main containers does. Essentially we need to apply a bg color to the main groups (a custom bg color with zero opacity appears to be a solution. This fixes the padding issue.

Thanks!

PS: @mghenciu I also added this in the design board, to have this under our radar. If you decide to tackle this yourself with a new PR, feel free to do so. Let me know if I can help in any way ✌🏻

[mghenciu]

@JohnPixle , I did the required changes in this PR.
Tested a few times and the padding issue looks to be fixed.

When you have some time, to review it @preda-bogdan 🚀

[mghenciu]

As an update here, the issue looks to be more dev oriented and complex than just enabling the Inner blocks toggle; that's why we put it On Hold in the Design Board.

As next steps, we need to review a bit the things in terms of default theme padding and spacing, plus make sure we are compliant with the main group required by wordpress; and of course that things work as expected in any FSE context.

We'll need some dev help here, @HardeepAsrani .
I've added more details about the challenges, in this PR.

---

Also we wanted to ask how would this changes affect the existing sites? for example let's say we update the color for a section, or we change some icons, etc. -> when released, would this changes also apply on the existing sites that use Neve FSE?

[mghenciu]

@HardeepAsrani , pleased don't forget about this one - when you get some time.
Should I add it in the Backlog or To Do?

[HardeepAsrani]

@preda-bogdan Can you look at if you have the time?

when released, would this changes also apply on the existing sites that use Neve FSE?

Looking at the changes, I think they won't affect existing sites as we only change template content. Correct me if I'm wrong, Bogdan?

[HardeepAsrani]

@cristian-ungureanu Can you look into this when you have some time? Mihai has already made a PR related to this.

[mghenciu]

Just fyi: it looks like the issue I was mentioning here, regarding previewing Styles - this doesn't happen on 6.3.

[cristian-ungureanu]

@mghenciu @HardeepAsrani the reason for that padding inside the editor is actually this code:

https://github.com/Codeinwp/neve-fse/blob/main/assets/css/src/common/_generic.scss#L45-L55

Bogdan started from Fork's style, we have the same issue there. After digging a while, here's what I've found:

The style was added because in ( not that ) older WP versions ( eg. WP 6.1 ) we had this issue: https://vertis.d.pr/v/VLFBl1. After digging some more, I found out that removing this line here https://github.com/Codeinwp/neve-fse/blob/main/theme.json#L14 fixes both the current issue that we have now, and the fix even works on WP 6.1, allowing us to also remove that padding style. There's no need to change the templates.

As I'm not quite an expert with FSE themes, please let me know if you can think of a downside to the solution I've mentioned.

PS: You can use the build from the PR if you want to test this.

[mghenciu]

Thank you for the in-depth research, Cristi.
Also, not an expert in FSE themes :)) but I would we can take inspiration from Core FSE themes: 2023 and 2022, and Frost (which are available on Github).

If this fix is working without doing any templates changes -> that's even better 🚀

[cristian-ungureanu]

Thanks, Mihai for the feedback! I actually did check WP FSE themes and none of them are using the outer property, nor the padding that we're adding.

[JohnPixle]

Thanks for the insights @cristian-ungureanu.
Sounds good. Would be great if we just adjust the code without messing with the templates. From me it's fine to proceed.

I just tested the build you suggested, and it works fine.

Thank you for looking into it. Just to be clear, this change will need to happen with other themes as well? (fork?)

[cristian-ungureanu]

Thanks for the feedback, John! Yes, we would need to make the same changes on all of our FSE themes. I personally checked Fork but I think they all share this part.

[JohnPixle]

okay, sounds good. Thanks Cristian!

[pirate-bot]

🎉 This issue has been resolved in version 1.0.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀