Root padding is not getting applied correctly in the Editor

[ndiego]

Description

In testing the Twenty Twenty-Three theme, I noticed some issues with root padding in the Editor.

First, there is no root padding applied to the Editor itself. Secondly, root padding is applied incorrectly via the .has-global-padding class. On the Frontend, everything appears to be working correctly. See the video for complete information.

I believe that simply adding .has-global-padding to the .is-root-container div if root padding is applied in theme.json will solve this issue. See the video attached for more info.

Step-by-step reproduction instructions

1. In Twenty Twenty-Three, or another theme that uses root padding, add a new page
2. Add a paragraph of text to the page.
3. Next add a Group block, and inside, add a Paragraph block.
4. Ensure the "Inner blocks use content width" setting is applied to the Group block
5. Notice that there is left/right padding applied in the Group block
6. Preview the page on mobile using the Editor view setting
7. See that the first paragraph goes to the edge of the page
8. The paragraph in the Group block has the "correct" padding, but it's not applied correctly.
9. View on the Frontend and everything appears as it should.

Screenshots, screen recording, code snippet

root-padding-editor-compressed.mp4

Environment info

• WordPress 6.1 Beta
• Gutenberg 14.1.1
• Twenty Twenty-Three

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

[ndiego]

@tellthemachines, @richtabor, @bgardner given that you all worked on #43095, I wanted to ping you on this one as well. If anyone can confirm these findings, it would be most appreciated 🙏

[t-hamano]

I think #44209 would solve this problem.
However, we may want to consider adding a backport label to this PR.

[tellthemachines]

Closing this issue as the fix from #44209 has been backported to Core.