Dimensions Design Tools Consistency Follow-up: Review box-sizing settings across blocks

[andrewserong]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Dimensions Design Tools Consistency #43243

This is a stub issue to flag a follow-up task for the Tracking: Dimensions Design Tools Consistency issue (#43243).

For padding (and border) support to work consistently across blocks, blocks need to have their own box-sizing: border-box rule. This can be applied to the .wp-block-${name} classname (e.g. .wp-block-cover). An example of the rule, and comment explaining its existence, can be found here:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/style.scss#L10-L11

	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

The task for this issue, once padding support has largely been opted-in, is to create a similar table as in #43243 to review which blocks do and do not have this rule, so that we can add it in where required to ensure consistency. Note that Paragraph and Heading blocks (which do not have wp-block- based classnames) are likely exceptions for this rule.

To-do

• Add a list of the current state of box-sizing rules across blocks, similar to the table in Tracking: Dimensions Design Tools Consistency #43243

[digamber89]

+1 - there needs to be a level of consistency for the design of blocks

[ndiego]

I am going to start auditing blocks for this. It's a shame we don't have a good solution for Paragraph and Heading blocks since users will likely run into this issue most commonly with these blocks. I just would be hesitant to have a p { box-sizing: border-box } in the block stylesheet. I do know that in my custom block themes, I am globally setting box-sizing. 🤔

[digamber89]

@ndiego - on your comment about the global box-sizing, i think theme authors and at least the default twenty* themes should also do it - as it would be best practice. Why allow 3rd party plugins to create a bad design when it's almost ubiquitous.

Don't know how i could convey this but not having box-sizing set globally could potentially break design in a variety of scenarios.