Tracking: Dimensions Design Tools Consistency

[aaronrobertshaw]

Overview

This issue details the current state of dimensions and spacing block support or design tool adoption across all blocks and tasks required to fill any gaps. Overall design tool consistency efforts are being tracked via the parent issue: #43241.

Guidelines for Adopting Spacing Supports

• We're generally happy to have padding & margin support for all blocks. (Exceptions possible)
• We're leaning towards simple opt-in for margin support i.e. true rather than ["top", "bottom"]
• Neither padding nor margin should be shown by default i.e. they're accessed via the ellipsis menu. (Exceptions possible)
• All blocks (except special cases like Heading & Paragraph) should have box-sizing: border-box. This will be reviewed on a case-by-case basis. (Exceptions likely).

Legend

Value	Description
✅	Feature has been adopted and is displayed as a default control
✅ (Optional)	Feature has been adopted but is an optional control
⚠	There is a bug or issue with this block support feature's adoption
❌	Feature has been explicitly opted out of
<PR#>	Links to PR adopting the feature for this block
-	Feature has not explicitly been adopted/omitted
🛠	Implemented via an ad hoc / bespoke control
🚧	Work is in progress towards adopting this feature (no PR yet)

Block Support Adoption

Note: Deprecated blocks have been omitted from this table. e.g. Comment Author Avatar, Post Comment & Text Columns.

Block	Padding	Margin	Block Gap	Height	Width	Min Height	Aspect Ratio
Archives	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Audio	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Avatar	✅ (Optional)	✅ (Optional)	-	🛠	🛠	-	-
Button	✅ (Horizontal, Vertical)	-	-	-	🛠	-	-
Buttons	✅	✅ (Top, Bottom)	✅	-	-	-	-
Calendar	⚠ #43654 (Optional)	⚠ #43654 (Optional)	-	-	-	-	-
Categories	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Code	✅ (Optional)	✅ (Optional / Top, Bottom)	-	-	-	-	-
Column	✅	-	✅	-	🛠	-	-
Columns	✅	✅ (Top, Bottom)	✅ (Horizontal, Vertical)	-	-	-	-
Comment Author Name	✅	✅	-	-	-	-	-
Comment Content	✅ (Horizontal, Vertical)	-	-	-	-	-	-
Comment Date	✅	✅	-	-	-	-
Comment Edit Link	✅	✅	-	-	-	-	-
Comment Reply Link	✅	✅	-	-	-	-	-
Comment Template	✅	✅	#69292	-	-	-	-
Comments	✅	✅	-	-	-	-	-
Comments Pagination	#43905 #66470	#43905 #66470	-	-	-	-	-
Comments Pagination Next	#43905	#43905	-	-	-	-	-
Comments Pagination Numbers	#43905 #66471	#43905 #66471	-	-	-	-	-
Comments Pagination Previous	#43905	#43905	-	-	-	-	-
Comments Title	✅	✅	-	-	-	-	-
Cover	✅	✅ (Top, Bottom)	✅	-	-	🛠	✅
Details	✅ (Optional)	✅ (Optional)	✅	-	-	-	-
Embed	-	✅	-	-	-	-	-
File	✅	✅	-	-	-	-	-
Footnotes	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Gallery	✅ (Optional)	✅ (Optional)	✅(Horizontal, Vertical)	🛠	🛠	-	-
Group	✅	✅ (Top, Bottom)	✅	-	-	✅	-
Heading	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Home Link - Navigation	#66902	#66902	-	-	-	-	-
HTML	-	-	-	-	-	-	-
Image	-	✅	-	🛠	🛠	-	🛠
Latest Comments	✅	✅	-	-	-	-	-
Latest Posts	✅	✅	-	-	-	-	-
List	✅ (Optional)	✅ (Optional)	-	-	-	-	-
List Item	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Login/logout	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Media & Text	✅	✅	-	-	-	-	-
More (Read More)	-	-	-	-	-	-	-
Navigation	#66392	#66392	✅	-	-	-	-
Navigation Link	#66483	#66483	-	-	-	-	-
Navigation Submenu	#68455	#68455	-	-	-	-	-
Next Page (Page Break)	-	-	-	-	-	-	-
Page List	✅ (Optional)	✅ (Optional)		-	-	-	-
Paragraph	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Post Author	✅	✅	-	🛠	🛠	-	-
Post Author Biography	✅	✅	-	-	-	-	-
Post Author Name	✅	✅	-	-	-	-	-
Post Comments Count	✅	✅	-	-	-	-	-
Post Comments Form	✅	✅	-	-	-	-	-
Post Comments Link	✅	✅	-	-	-	-	-
Post Content	✅ (Optional)	✅ (Optional)	✅	-	-	✅	-
Post Date	✅	✅	-	-	-	-	-
Post Excerpt	✅	✅	-	-	-	-	-
Post Featured Image	✅	✅	-	🛠	🛠	-	🛠
Post Navigation Link	#64258	#64258	-	-	-	-	-
Post Template	✅ (Optional)	✅ (Optional)	✅	-	-	-	-
Post Terms	✅	✅	-	-	-	-	-
Post Title	✅	✅	-	-	-	-	-
Preformatted	✅	✅	-	-	-	-	-
Pullquote	✅	✅	-	-	-	✅ (Optional)	-
Query	🚫	🚫	🚫	🚫	🚫	🚫	-
Query No Results	#64601	#64601	-	-	-	-	-
Query Pagination	#66398	#66398	-	-	-	-	-
Query Pagination Next	#66394	#66394	-	-	-	-	-
Query Pagination Numbers	#66401	#66401	-	-	-	-	-
Query Pagination Previous	#66393	#66393	-	-	-	-	-
Query Title	✅	✅	-	-	-	-	-
Query Total	-	-	-	-	-	-	-
Quote	✅	✅	✅	-	-	✅ (Optional)	-
Read More	✅	✅ (Top, Bottom)	-	-	-	-	-
RSS	✅	✅	-	-	-	-	-
Search	-	✅	-	-	🛠	-	-
Separator	-	✅ (Top, Bottom)	-	-	-	-	-
Shortcode	🚫	🚫	🚫	🚫	🚫	🚫	🚫
Site Logo	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Site Tagline	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Site Title	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Social Link	#63782	#63782	-	-	-	-	-
Social Links	✅ (Optional)	✅	✅ (Horizontal, Vertical)	-	-	-	-
Spacer	✅	✅ (Top, Bottom)	-	🛠	🛠	-	-
Table	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Table of Contents	✅	✅	-	-	-	-	-
Tag Cloud	✅	✅	-	-	-	-	-
Term Description	✅	✅	-	-	-	-	-
Time To Read	✅ (Optional)	✅ (Optional)	-	-	-	-	-
Verse	✅ (Optional)	✅ (Optional)	-	-	-	✅ (Optional)	-
Video	✅ (Optional)	✅ (Optional)	-	-	-	-	-

Known Issues

• Several blocks adopting padding support will also probably need box-sizing: border-box added to their styles. A sweep should be completed before closing this issue.

• Before the Post Template block can fully adopt spacing supports it may need a bit of a refactor: Post Template: Refactor ad hoc flex container to use layout block support flex type #44557

Merged PRs

The following list details all the PRs merged as part of this effort to increase spacing support.

• Add margin/padding support to Archives block #43350
• Add margin and padding supports to Audio block. #43351
• Tag cloud: add spacing block supports #43367
• Table of contents: add spacing supports #43368
• Table: add spacing block supports #43370
• Term description: add spacing block supports #43372
• Spacer: add spacing block supports  #43366
• Post Date: Add spacing support #43406
• Heading: Add padding support #43454
• Paragraph: Add spacing block supports #43455
• Query Title: Add padding support #43458
• Post Title: Add padding support #43457
• Video: add spacing block supports #43365
• List: add spacing block supports #43402
• Media & Text: Add spacing block supports #43456
• Verse: Add margin support #43461
• Categories List: Add spacing support #43647
• Comment Edit Link: Add spacing support #43657
• Comment Date: Add spacing support #43656
• Comment Reply Link: Add spacing support #43658
• Avatar: add padding support #43519
• Site Logo: add padding and margin support #43520
• Social Icons: Add missing padding support, update margin support #43885
• Add a minHeight block support under dimensions #45300
• Add spacing tools to time to read block #49392
• A margin option is added to the Embeded preview block #39384
• Preformatted: Add spacing support #45196
• Quote: Add spacing supports #63545
• Buttons: Add border, color, and padding block supports #63538
• Image: Adopt margin block support #63546
• Search: Add margin support #63547
• Post Template: Add Border and Spacing Support #64425
• Page List : Add border and spacing support #66385
• RSS: Border & Spacing support #66411
• Post Content: Add border and spacing support #66366

PRs with pending questions, discussions, or concerns

Possible Follow-Ups

• Dimensions Design Tools Consistency Follow-up: Review box-sizing settings across blocks #43465
• Layout: layout styles overriding block axial margin values in theme.json #43404

[t-hamano]

Update: I have added the Footnotes and Details blocks to the list.

[t-hamano]

Update: I have updated the table with the latest specs.

At the same time, I also added the minHeight and units support column. We need to also consider whether we can add this support, except for blocks that already have it and blocks that clearly do not need it.

Something I noticed while working on this is that even if I don't explicitly define support in __experimentalDefaultControls, the control will be displayed by default.

For example, the following definition shows the padding, margin, block gap and min-height controls by default:

{
	"supports": {
		"dimensions": {
			"minHeight": true
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": true
		}
	}
}

This behavior is different from the Typography support. I don't know if this is an original specification or some kind of bug 🤔

[aaronrobertshaw]

Thanks again @t-hamano for all the effort in keeping these issues up-to-date.

I don't think the units support is intended for wide-spread adoption, or at least might be best dealt with separately to these efforts. Maybe remove it? What do you think?

This behavior is different from the Typography support. I don't know if this is an original specification or some kind of bug

These block supports pre-existed the ability to define which controls display by default. I believe the current behaviour is for backwards compatibility. Perhaps creating an issue to address and discuss this further would be a good idea?

P.S. Can you update the merged PRs list with any links for the blocks you updated?

[t-hamano]

I don't think the units support is intended for wide-spread adoption, or at least might be best dealt with separately to these efforts. Maybe remove it? What do you think?

I also have no strong opinion on adding units support to this PR, so Il remove the units column.

These block supports pre-existed the ability to define which controls display by default. I believe the current behaviour is for backwards compatibility. Perhaps creating an issue to address and discuss this further would be a good idea?

Yes, maybe it can be addressed after this issue is completed.

[t-hamano]

Update: Added the Query Total block to the list.