Problems with Layout inherit in theme.json

Question

I have in the theme.json of my FSE theme the following lines in the code:

"version": 2,
   "settings": {
      "layout": {
         "contentSize": "840px",
         "wideSize": "1100px"
      }
   }
}

If I now insert the following block in my index.html, it will be collapsed to the ContentSize width:

<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group">

<!-- wp:query -->
<div class="wp-block-query">
    <!-- wp:post-template -->
    <!-- wp:post-title /-->
    <!-- wp:post-date /-->
    <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
 
    <!-- wp:query-pagination -->
    <div class="wp-block-query-pagination">
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
    </div>
    <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
   
</main>
<!-- /wp:group -->

Now when I want to do the same in the Footer, the content is not collapsed to the ContentSize:

<!-- wp:group {"layout":{"inherit":true}} -->
<div class=""> Made by Reto Ulrich Mediendesign AG, <a href="https://www.rumede.ch" class="link-primary" target="_blank">www.rumede.ch</a> </div>
<!-- /wp:group --> 

Can someone tell me when exactly the layout:inherit works, or what has to be considered for it? And is there a possibility to scale to the wideSize instead of the ContentSize?

Answer 1

To scale to wideSize you need to enable the wide alignment on the child block(s).

-The second code example is incomplete, perhaps that is why the width was not correct for the footer.

Answer 2

You can use the Site Editor to build your footer visually (set it to content or wide width etc).

Then switch to the code editor in Site Editor and copy the blocks' codes.

Finally, paste the copied code inside the footer.html template part.