[wp-trac] [WordPress Trac] #54901: WP 5.9 RC3: Block patterns library issues
WordPress Trac
noreply at wordpress.org
Tue Jan 25 16:20:55 UTC 2022
#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
More information about the wp-trac
mailing list