Update/wp5.5

[dreamwhisper]

• Fixes width of standard and wide blocks in the admin.
• Matches p margin to admin
• Adds support for custom-units for the cover block and custom-line-height for headings and paragraphs.

How to test

Add this to the code editor:

<!-- wp:cover {"minHeight":95,"minHeightUnit":"vh","gradient":"luminous-dusk","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim has-background-gradient has-luminous-dusk-gradient-background" style="min-height:95vh"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":86,"lineHeight":"0.4"},"color":{"text":"#fefefe"}}} -->
<p class="has-text-align-center has-text-color" style="line-height:0.4;font-size:86px;color:#fefefe">COVER </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":86,"lineHeight":"0.3"},"color":{"text":"#d9cadf"}}} -->
<p class="has-text-align-center has-text-color" style="line-height:0.3;font-size:86px;color:#d9cadf">BLOCK</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Testing the custom units for the cover block. Adjust as desired.</p>
<p class="has-text-align-center">Note: Typing in all caps is bad, but I did it anyway.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:atomic-blocks/ab-spacer {"spacerHeight":69} -->
<div style="color:#ddd" class="wp-block-atomic-blocks-ab-spacer ab-block-spacer ab-divider-solid ab-divider-size-1"><hr style="height:69px"/></div>
<!-- /wp:atomic-blocks/ab-spacer -->

<!-- wp:heading -->
<h2>This is a really long heading to test the line height feature of WordPress 5.5. This is default of 1.2.</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"1.8"}}} -->
<h2 style="line-height:1.8">This is a really long heading to test the line height feature of WordPress 5.5. This is 1.8.</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"lineHeight":"0.9","fontSize":80}}} -->
<h2 style="line-height:0.9;font-size:80px">This is a really long heading to test the line height feature of WordPress 5.5. This is 0.8 with large text.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Note: It would be really easy to make text unreadable with this. Also, I don't think there should be a 1.5 default showing since that doesn't match the theme.</p>
<!-- /wp:paragraph -->

<!-- wp:atomic-blocks/ab-columns {"columns":1,"layout":"one-column"} -->
<div class="wp-block-atomic-blocks-ab-columns ab-layout-columns-1 one-column"><div class="ab-layout-column-wrap ab-block-layout-column-gap-2 ab-is-responsive-column"><!-- wp:atomic-blocks/ab-column -->
<div class="wp-block-atomic-blocks-ab-column ab-block-layout-column"><div class="ab-block-layout-column-inner"><!-- wp:paragraph {"style":{"color":{"background":"#dddddd"}}} -->
<p class="has-background" style="background-color:#dddddd">This is a paragraph with a background. It should be 702px wide on front end and editor, assuming your browser is wide enough.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#dddddd"},"typography":{"lineHeight":"2.7"}}} -->
<p class="has-background" style="line-height:2.7;background-color:#dddddd">This is a paragraph with a background. It should be 702px wide on front end and editor, assuming your browser is wide enough. This paragraph adjusts line height to 2.7.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"background":"#dddddd"},"typography":{"lineHeight":"0.8"}}} -->
<p class="has-background" style="line-height:0.8;background-color:#dddddd">This is a paragraph with a background. It should be 702px wide on front end and editor, assuming your browser is wide enough. This paragraph adjusts line height to 0.8.</p>
<!-- /wp:paragraph -->
</div></div>
<!-- /wp:atomic-blocks/ab-column --></div></div>
<!-- /wp:atomic-blocks/ab-columns -->

<!-- wp:atomic-blocks/ab-columns {"columns":1,"layout":"one-column","align":"wide"} -->
<div class="wp-block-atomic-blocks-ab-columns ab-layout-columns-1 one-column alignwide"><div class="ab-layout-column-wrap ab-block-layout-column-gap-2 ab-is-responsive-column"><!-- wp:atomic-blocks/ab-column {"columnVerticalAlignment":"center"} -->
<div class="wp-block-atomic-blocks-ab-column ab-block-layout-column ab-is-vertically-aligned-center"><div class="ab-block-layout-column-inner"><!-- wp:paragraph {"style":{"color":{"background":"#dddddd"}}} -->
<p class="has-background" style="background-color:#dddddd">This is a paragraph with a background. It should be 1062px wide on front end and editor, assuming your browser is wide enough.</p>
<!-- /wp:paragraph -->
</div></div>
<!-- /wp:atomic-blocks/ab-column --></div></div>
<!-- /wp:atomic-blocks/ab-columns -->

1. Set the page to use the full width layout in the Genesis sidebar.
2. Verify the front end matches the editor for custom line heights.
3. Verify block widths match.
4. Adjust custom units for height on the cover block.

Documentation

No documentation required.

Suggested changelog entry

Added:

• Theme support for custom-units and custom-line-height in the block editor.

Changed:

• Ensure block width in the editor matches the front end.
• Ensure paragraph margin matches the front end.

Notes

Adding custom-unit support will likely be added to more blocks in the future.

[johnstonphilip]

All looking good here!