Cover block: Update the box-sizing attribute

[scruffian]

Description

I think we should add box-sizing: border-box; to the cover block. In themes with a fixed post width, the combination of a cover block with 100% width and 16px padding means that the cover block extends outside the bounds of the post content:

Adding box-sizing: border-box; tells that block to count the padding as part of the 100% width, and prevents it bleeding out:

In the other themes I tested this doesn't change anything.

How has this been tested?

Tested with TwentyTwenty and Seedlet thems

Screenshots

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: +21 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
build/block-library/style-rtl.css	7.61 kB	+9 B (0%)
build/block-library/style.css	7.6 kB	+12 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.52 kB	0 B
build/api-fetch/index.js	3.35 kB	0 B
build/autop/index.js	2.72 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	8.53 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	128 kB	0 B
build/block-editor/style-rtl.css	11.1 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/editor-rtl.css	8.6 kB	0 B
build/block-library/editor.css	8.6 kB	0 B
build/block-library/index.js	135 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.5 kB	0 B
build/components/index.js	167 kB	0 B
build/components/style-rtl.css	15.5 kB	0 B
build/components/style.css	15.5 kB	0 B
build/compose/index.js	9.42 kB	0 B
build/core-data/index.js	12 kB	0 B
build/data-controls/index.js	1.27 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	31.9 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.4 kB	0 B
build/edit-navigation/style-rtl.css	868 B	0 B
build/edit-navigation/style.css	871 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.24 kB	0 B
build/edit-post/style.css	6.23 kB	0 B
build/edit-site/index.js	20.3 kB	0 B
build/edit-site/style-rtl.css	3.51 kB	0 B
build/edit-site/style.css	3.51 kB	0 B
build/edit-widgets/index.js	17.5 kB	0 B
build/edit-widgets/style-rtl.css	2.8 kB	0 B
build/edit-widgets/style.css	2.8 kB	0 B
build/editor/editor-styles-rtl.css	492 B	0 B
build/editor/editor-styles.css	493 B	0 B
build/editor/index.js	45.5 kB	0 B
build/editor/style-rtl.css	3.8 kB	0 B
build/editor/style.css	3.8 kB	0 B
build/element/index.js	4.45 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.49 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.55 kB	0 B
build/is-shallow-equal/index.js	709 B	0 B
build/keyboard-shortcuts/index.js	2.39 kB	0 B
build/keycodes/index.js	1.85 kB	0 B
build/list-reusable-blocks/index.js	3.02 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.12 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.27 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.34 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.7 kB	0 B
build/server-side-render/index.js	2.61 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.13 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[jasmussen]

I'm a box-sizing: border-box; fan. To the point that I think it should be the default behavior on the web.

However given that this block has shipped for a while without it, and is relatively well used, what kind of testing can we do to ensure this doesn't regress? And, perhaps a larger question, if the motivation for adding this is the padding behavior which was recently added to Cover, but is on its way to Group, should we add this property to more blocks? Which ones?

[scruffian]

I tested this on Twenty Twenty, Twenty Nineteen, Seedlet and Twenty Ten. These lines of CSS didn't make any difference to any of the newer themes, but on Twenty Ten, these lines fixed the display of the block which otherwise was bleeding into the sidebar.

[jasmussen]

Yep, pairing the box model with the padding feature makes for a good predictable heuristic. This needs a good testing in a few themes, but it should work great. Thanks!

[aristath]

LGTM 👍
Tested with a few themes, didn't see any issues

[scruffian]

Any idea why the tests are failing?

[jasmussen]

That specific test keeps failing occasionally. I restarted it.