Nested blocks should always honor the parent content and wide widths when set

[afercia]

Description

Noticed while working on #64906

Some blocks may contain nested blocks and provide the ability to set a custom 'content width' and a custom 'wide width' for the nested blocks. For example, the Group, Cover, Columns block support this feature.

This is different from the 'content width' and 'wide width' set by the theme or in the Global styles. Instead, these custom widths are block attributes and are meant to be applied only to the nested blocks of a specific parent block.

So far so good. However, it appears not all nested blocks are fully compatible with this feature. Also, setting a background on the nested paragraph make things even more unclear. As a user, I'm very confused by how this feature works and by how it's presented in the UI.

Step-by-step reproduction instructions

• Add a Cover block (or a Group block). The Cover block is better to illustrate the issue because it comes with a nested Paragraph by default.
• Set the cover image and add some text within the paragraph.
• Select the Paragraph and add a 1 pixel border and a background color.
• Notice the PAragraph suddenly gets some more padding.
• Select the cover block and in the settings panel:
  • Enable 'Inner blocks use content width'
  • Set the Content width to 200 pixels
  • Set the Wide width to 400 pixels.

At this point, the editor should be in the state illustrated in the screenshot below:

• Observe the actual width of the Paragraph is not 200 and neither 400 pixels. It's around 300 pixels. This because Paragraph blocks with a background get some padding from the block stylesheet. The block uses box-sizing: content-box; so the padding increases the width. As such, the Paragraph doesn't honor the custom width set on the parent for its nested blocks.
• As a user, I'd be very confused. I would expect the Paragraph to get a 200 or 400 pixels width.
• Observe the Paragraph toolbar doesn't offer any control to set the width to 'Content' or 'Wide'.
• Select the Cover block and in the settings panel change the 'Content width' value.
• Observe that's the width value actually set on the Paragraph.
• Anyways, the Paragraph can't be switched to 'Wide width' even though the UI is providing two widths for the nested blocks.
• Add two nested Group blocks that contain two Paragraphs.
• Apply a background color to the nested Group blocks to better illustrate.
• Observe both the nested Group blocks do provide the control to set their width to the parent's 'Content' or 'Wide' widths.

Screenshot:

• FInally, remove the background color from the Paragraph block.
• Observe the Paragraph width now almost honors the value set in the parent for the 'Content width' except for the border.

Screenshot:

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[afercia]

Overall, as a user I would expect the following:

• The UI is telling me that I can set custom 'Content' and 'Wide' values for the nested blocks width.
• As such, I'd expect the custom values to work for all nested blocks.
• Intead, they work for some nested blocks and don't for other blocks.
• Also, some blocks like the nested Paragraph don't provide any control to set their width to 'Content' or 'Wide'.