[wp-trac] [WordPress Trac] #54901: WP 5.9 RC3: Block patterns library issues

[WordPress Trac]

#54901: WP 5.9 RC3: Block patterns library issues
--------------------------+-----------------------------
 Reporter:  webmandesign  |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 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.

 **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
 [https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
 `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
 [https://www.dropbox.com/s/9w7q51vehps55vq/wp5.9-patterns-issues.mp4?dl=0
 video preview of the issues in WP 5.9-RC3] (links to Dropbox MP4 file).
 For comparison, [https://www.dropbox.com/s/yfsnm3pyhjdxc0n/wp5.8.3
 -patterns-ok.mp4?dl=0 no issue occurs in WP 5.8.3] (links to Dropbox MP4
 file).

 **Testing environment:**
 WordPress: 5.9-RC3
 Theme: Michelle 1.3.0, https://wordpress.org/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 -->
 }}}

 PS: Not sure whether to report this issue here or in Gutenberg plugin, so
 I tried both. https://github.com/WordPress/gutenberg/issues/38214

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54901>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform