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

andrewserong commented 2 years ago

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 #43243

digamber89 commented 2 years ago

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

ndiego commented 2 years ago

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 commented 2 years ago

@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.

WordPress / gutenberg

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

To-do