Gutenberg $content wrapper

From old feedback: Gutenberg $content wrapper | Cwicly

Not a feature request in first instance, rather a general question.

There are cases where it is necessary and important (e.g. custom code) to have 1st level access inside the body.
Unfortunately, Gutenberg wraps everything inside a separate div (“wp-site-blocks”).
For me, this is contrary to the FSE concept that Gutenberg offers and I am sure this won’t change anymore.

Is this something Cwicly will address at some point or are there no plans for that?
Other advanced WP page builder do follow exactly this approach.
As far as I understand, it is generally possible to achieve it.
Of course, it also might be the case already, that is impossible to implement.

Appreciate some feedback, since this is a thing I was torn from the beginning when I discovered Cwicly.

1 Like

Hi there @Marius,

This is something which we won’t be able to tackle if we stay with Gutenberg’s rendering system since they don’t allow us to hook into anything as you can see here:

// Wrap block template in .wp-site-blocks to allow for specific descendant styles
// (e.g. `.wp-site-blocks > *`).
	return '<div class="wp-site-blocks">' . $content . '</div>';

We are looking into this to see what are the pros and cons of us taking over the page generation, but I totally understand your point of view.
I’m not sure why the WordPress team decided to go with this wrapper as WordPress already has quite a good targeting system from the <body> tag…

Rest assured this is something we’re working on!

1 Like

Hey @Louis .

Thanks a lot for picking this up here.
I appreciate you understand my position regarding the main html structure when using GB.
To be honest, referring to your answer, this is exactly what I expected - not blaming you at all.
I am ready for making compromises when using Cwicly, since I am aware in advance.
Let’s wait and see what happens. Surprises always taste better than announcements :star_struck:

I am also interested in this, specifically in being able to change the 1st level content wrapper div to ‘main’

Id like to give my two cents too (although this won’t make any difference since this is a WP issue, not CC’s issue…).

Ideally there should be no wrapper at all, and the html should be rendered like:

<body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>

… but I would settle if instead of wrapping everything, the wrapper was included only inside template parts built with FSE like so:

<body>
    <header class="non-fse-theme-header-example">...</header>
    <main class="fse-post-content-block">
        <div class="wp-site-blocks">...</div>
    </main>
    <footer class="fse-footer-wrapper-block-example">
        <div class="wp-site-blocks">...</div>
    </footer>
</body>

… or even a smarter, cleaner version:

<body>
    <header class="fse-header-wrapper-block-example wp-site-blocks">...</header>
    <main id="wp--skip-link--target" class="fse-post-content-block wp-site-blocks">...</main>
    <footer class="non-fse-theme-footer-example">...</footer>
</body>

@Louis If you see this as an uncompromising option/possibility in the future, please consider making this change. :pray:

7 Likes