Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#54901 closed defect (bug) (reported-upstream)

WP 5.9 RC3: Block patterns library issues

Reported by: webmandesign's profile webmandesign Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.9
Component: General Keywords:
Focuses: ui Cc:

Description

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 `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 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

Change History (3)

#1 @hellofromTonya
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Hello @webmandesign,

Welcome back to WordPress Core's Trac! Thank you for reporting :)

Also see your original report in the support forums here https://wordpress.org/support/topic/wp-5-9-rc3-block-patterns-library-issues/. @mamaduka replied in that thread a few minutes ago.

Here's @mamaduka:

Hello, Oliver

  1. You’re correct. The editor styles loaded via enqueue_block_editor_assets won’t work in future WP version. It’s recommended to use add_editor_style for block editor styles as well.

2-3. Using full viewport height (100vh) in patterns was causing some unexpected behavior. WP 5.9-rc4 fixed these issues.

Yes, you are correct that reporting would be upstream in the Gutenberg project.

I'll close this ticket as reported upstream and then comment in that issue. Cheers!

#2 @audrasjb
3 years ago

Hello @webmandesign and thank for reporting this issue,

It looks like an issue with the CSS used by your theme. The Pattern library explorer changed between 5.8 and 5.9. You're right, this should be reported on Gutenberg repository but I'd suggest you to get in touch with the theme author as well :)

#3 @webmandesign
3 years ago

Thank you guys.

@audrasjb I'm the theme author :) I've reported the issue in https://github.com/WordPress/gutenberg/issues/38214

Note: See TracTickets for help on using tickets.