Dimension Controls Support Page

[annezazu]

Pulled from this slack convo, I plan to approach this by adding an overall dimension controls page that then has link on each respective block page to that page. Pulled from this overview issue WordPress/gutenberg#28356 here are the blocks to update:

• Buttons block: [Buttons block]: Add gap and vertical margin support gutenberg#34546
• Spacing block: Spacing Support: Add margin block support with configurable sides gutenberg#30608
• Site title block: Add margin block support to Site Title gutenberg#31728
• Media & text block: Media & Text: Add media width control gutenberg#31002
• Group block: https://wordpress.org/support/article/group-block/
• Cover block: Cover: Move cover min-height into dimensions panel via SlotFill gutenberg#34065
• Columns block: Columns block: Enable blockGap and vertical margin support gutenberg#34630

Need to include padding, margin, min-height, block gap, etc.

[annezazu]

Whew have a draft: https://wordpress.org/support/?p=15242206&post_type=helphub_article&preview=1&_ppp=8374967e92

@carolinan or @mkaz would either of you bhance be able to review?

[carolinan]

Hi!
The text flows well and is easy to read.

The two first blocks in the image below "How to find dimension controls" have the dimension panel closed, which I found confusing. It felt like the main focus of those images where the typography- and color controls instead.

Types of controls, padding;

This setting impacts the space behind a block’s content and its border.

I believe this should be space between, not space behind?

Types of controls, margin;

You can find this in option in blocks like Columns block.

I think the first in needs to be removed.

Block spacing
This setting can easily be misunderstood.
It controls the spacing between blocks that are inside the block that displays the setting (button block inside buttons block).
-I am not sure how to explain that in an easy way.

[annezazu]

Thanks so much for reviewing per usual <3.

The two first blocks in the image below "How to find dimension controls" have the dimension panel closed, which I found confusing. It felt like the main focus of those images where the typography- and color controls instead.

Great point. For whatever reason, I didn't think to close those tabs out as a way to get a condensed shot. Updated!

I believe this should be space between, not space behind?

Updated 🤦🏼

I think the first in needs to be removed.

Updated 💥

Block spacing. This setting can easily be misunderstood. It controls the spacing between blocks that are inside the block that displays the setting (button block inside buttons block). I am not sure how to explain that in an easy way.

I struggled with this too. Thank you for flagging that issue too. Great context on where folks are likely to get confused. To help resolve this, I added in slightly more context to that section and added an additional demo showing the block spacing controls for the parent buttons block and padding controls for the nested blocks.

At this point, shipping: https://wordpress.org/support/article/dimension-controls-overview/ We can iterate from there.

[annezazu]

Added in a link to dimension controls docs to the following docs:

• Buttons block: https://wordpress.org/support/article/buttons-block/
• Group block: https://wordpress.org/support/article/group-block/
• Cover block: https://wordpress.org/support/article/cover-block/

For columns and spacer, these were removed and will be added back in the future.