WP 5.9 RC3: Block patterns library issues

Hi guys,

I’ve noticed multiple issues with block patterns library in editor. This is related to WordPress 5.9-RC3 and does not happen on WordPress 5.8.3.

Here is the list of the issues:

1. Patterns in the library does not pick up theme styles. I suspect this may be due to the theme adding editor styles via enqueue_block_editor_assets action hook. This worked on WP5.8.3 without issues though.
2. When there is a full screen Cover block in the pattern the preview container gets constantly higher and higher.
3. The height of the pattern preview is wrong, unlike in WP5.8.3 as can be seen in the videos below. This is most likely related to previous issue too.

Video previews of the issues:
For better illustration, I’ve created a video preview of the issues in WP 5.9-RC3 (links to Dropbox MP4 file).
For comparison, no issues occur in WP 5.8.3 (links to Dropbox MP4 file).

Testing environment:
WordPress: 5.9-RC3
Theme: Michelle 1.3.0, https://ww.wp.xz.cn/themes/michelle/ (publicly available is only version 1.2.0, but the issues should occur there too)

Block pattern code that causes continual preview container height change:

<!-- wp:cover {"url":"https://pic.webmandesign.eu/WMDEMO/texture--pexels-adrien-olichon-2387532.jpg","id":999999,"dimRatio":80,"customOverlayColor":"#010101","minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom center","align":"full","style":{"spacing":{"padding":{"bottom":"120px","right":"0px","left":"0px"}}}} -->
<div class="wp-block-cover alignfull has-background-dim-80 has-background-dim has-custom-content-position is-position-bottom-center" style="padding-right:0px;padding-bottom:120px;padding-left:0px;background-color:#010101;min-height:100vh"><img class="wp-block-cover__image-background wp-image-999999" alt="" src="https://pic.webmandesign.eu/WMDEMO/texture--pexels-adrien-olichon-2387532.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:spacer {"className":"has-20vmax-min-height"} -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer has-20vmax-min-height"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide","className":"is-style-stacked-on-tablet"} -->
<div class="wp-block-columns alignwide is-style-stacked-on-tablet"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"fontSize":"huge"} -->
<h2 class="has-huge-font-size">Write some title text here</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"20%","className":"is-style-hidden-on-tablet"} -->
<div class="wp-block-column is-style-hidden-on-tablet" style="flex-basis:20%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%"><!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Just a short sentence. This is just a demo text you should overwrite. Write your own copy text here. This is just a demo text you should overwrite. Write your own copy text here. Just a short sentence.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="#0">Click here →</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="#0">Click here →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

• This topic was modified 2 years, 2 months ago by WebMan Design | Oliver Juhas. Reason: Improving code formatting