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://www.ads-software.com/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 -->
Viewing 6 replies - 1 through 6 (of 6 total)

  • 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.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Thanks for the info.

    1. That’s unfortunate. I know I had some issues with add_editor_style for my particular use, but I will have to try it again then. From top of my head, how can I enqueue CSS custom properties (CSS variables) to editor then? My themes use customizer to customize colors and other options which are ported to CSS via CSS variables. Is there a way to port these with add_editor_style somehow?

    2. + 3. Is there a way I can download WP 5.9-rc4 to test then?

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    I’m closing this as the discussion have moved to https://github.com/WordPress/gutenberg/issues/38214

    Hello,

    I got the exact same issue. The update to wordpress 5.9 just broke the patterns preview feature. First I figured out that my styling added by enqueue_block_editor_assets was creating empty previews because of that rule:

    iframe {
  max-width: 100%
}

    But now it looks like raw HTML rendering without any styling. It was working fine on WordPress 5.8 but for some reasons the styling is not applying inside the preview anymore.

    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.

    When I read the documentation of add_editor_style, it says that it is adding styles to TinyMCE. It doesn’t make any sense, the styles of the blocks should not be loaded into TinyMCE. Am I missing something?

    So add_editor_style seems to work indeed using this:

    function mytheme_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style(get_template_directory_uri() . '/css/theme.css');
}
add_action( 'after_setup_theme', 'mytheme_editor_styles' );

    But how do you add Javascript to the iframe now? It doesn’t seem that there is a add_editor_script and when I read WordPress code/documentation, it says to use enqueue_block_editor_assets… So this is very confusing that this hook is not working anymore.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Hi @stargayte,

    Please check the link in my last reply here. You can get more info and resolution at https://github.com/WordPress/gutenberg/issues/38214#issuecomment-1022172779

    Unfortunately, there seems to be no way now for loading Google Fonts in block patterns preview as browsers don’t allow cross origin content (meaning from a different domain) in iframes. You can check that bug report at https://github.com/WordPress/gutenberg/issues/38240

    Best regards,

    Oliver

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WP 5.9 RC3: Block patterns library issues’ is closed to new replies.