Global padding not applied in nested constrained group block with alignfull

[huubl]

Description

I am currently working on a template where I have content inside a constrained group block with alignfull. This block is nested within another constrained group block. The global padding is not being applied as expected.

Step-by-step reproduction instructions

1. Open this Playground link
2. Paste and run:

{
  "$schema": "https://playground.wordpress.net/blueprint-schema.json",
  "landingPage": "/wp-admin/site-editor.php?postType=wp_template&postId=twentytwentyfour//page",
  "phpExtensionBundles": [
    "kitchen-sink"
  ],
  "preferredVersions": {
    "php": "8.1",
    "wp": "latest"
  },
  "features": {
    "networking": true
  },
  "steps": [
    {
      "step": "login",
      "username": "admin",
      "password": "password"
    },
    {
      "step": "installPlugin",
      "pluginZipFile": {
        "resource": "wordpress.org/plugins",
        "slug": "gutenberg"
      }
    },
    {
      "step": "writeFile",
      "path": "/wordpress/wp-content/themes/twentytwentyfour/templates/page.html",
      "data": "<!-- wp:group {\"tagName\":\"main\",\"layout\":{\"type\":\"constrained\"}} -->\r\n<main class=\"wp-block-group\"><!-- wp:post-title /-->\r\n<!-- wp:paragraph -->\r\n<p>Constrained group block: global padding works here.</p>\r\n<!-- /wp:paragraph -->\r\n<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"accent-3\",\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group alignfull has-accent-3-background-color has-background\"><!-- wp:paragraph -->\r\n<p>Constrained group block with alignfull, that's a innerblock of the group above: The global padding doesn’t work in both the site editor and the frontend.</p>\r\n<!-- /wp:paragraph -->\r\n<!-- wp:heading -->\r\n<h2 class=\"wp-block-heading\">Editor:</h2>\r\n<!-- /wp:heading -->\r\n<!-- wp:paragraph -->\r\n<p>If you switch the device view to mobile, you’ll notice the absence of padding.</p>\r\n<!-- /wp:paragraph -->\r\n<!-- wp:heading -->\r\n<h2 class=\"wp-block-heading\">Frontend:</h2>\r\n<!-- /wp:heading -->\r\n<!-- wp:paragraph -->\r\n<p>To observe this on the frontend, navigate to the “Sample page” and use the inspector to resize the screen to a mobile view.</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></main>\r\n<!-- /wp:group -->"
    }
  ]
}

Screenshots, screen recording, code snippet

Environment info

• Wordpress: 6.4.3
• Gutenberg: 17.9.0
• Twenty Twenty-Four: 1.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[andrewserong]

From a bit of reading, I believe the use root padding aware alignments feature is only meant to apply to container blocks at the root of the template. Nested blocks don't receive the padding rules, and stretch to the edges of template, and it seems to be by design. It's mentioned in some of the code comments, e.g.:

gutenberg/lib/class-wp-theme-json-gutenberg.php

Line 2716 in bdeeda2

// Nested containers with `.has-global-padding` class do not get padding.

And at the end of the theme documentation on "Use Root Padding Aware Alignments": https://developer.wordpress.org/themes/global-settings-and-styles/settings/use-root-padding-aware-alignments/

[huubl]

I overlooked the documentation about this, thanks for pointing me to it.

However, it does feel counterintuitive that nested container blocks, like the group and cover block, with 'alignfull' do not inherit the root padding.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[kimmenbert]

Looks to me that this: #60715 is made to tackle this

[huubl]

Looks to me that this: #60715 is made to tackle this

Yes, it seems #60715 fixed this issue!