Support » Alpha/Beta/RC » WP 5.7-RC2: Broken display of block pattern with full-aligned Cover with backgro

  • Hi guys,

    With recent WP5.7 pre-releases I’ve noticed an issue with full aligned Cover block with background image when this is used in a block pattern.

    When a theme registers such block pattern with old pre-5.7 Cover block code, it does not display correctly in WP5.7 editor. Surely, this depends on a theme you are using (I’m testing with https://themes.trac.wporg.ibadboy.net/ticket/95723 which is still waiting for a review but the issue is really obvious there), but you can see the difference in display even with Twenty Twenty-One theme when adding this PHP to functions.php to test:

    add_action( 'after_setup_theme', function() {
    
    	// Create a "WP test" block pattern category:
    	register_block_pattern_category( 'wp-test', [ 'label' => 'WP test' ] );
    
    	// Register test block patterns:
    	register_block_pattern(
    		'wp-text-cover-old',
    		array(
    			'title'         => 'Cover: Old code',
    			'content'       => '<!-- wp:cover {"url":"https://www.fillmurray.com/2000/1000","id":999999,"dimRatio":80,"align":"full"} --><div class="wp-block-cover alignfull has-background-dim-80 has-background-dim" style="background-image:url(https://www.fillmurray.com/2000/1000);"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {} --><p>Old Cover block code does not work in WP5.7</p><!-- /wp:paragraph --></div></div><!-- /wp:cover -->',
    			'categories'    => [ 'wp-test' ],
    			'viewportWidth' => 1600,
    		)
    	);
    	register_block_pattern(
    		'wp-text-cover-new',
    		array(
    			'title'         => 'Cover: New code',
    			'content'       => '<!-- wp:cover {"url":"https://www.fillmurray.com/2000/1000","id":999999,"dimRatio":80,"align":"full"} --><div class="wp-block-cover alignfull has-background-dim-80 has-background-dim"><img class="wp-block-cover__image-background wp-image-999999" alt="" src="https://www.fillmurray.com/2000/1000" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {} --><p>New Cover block code</p><!-- /wp:paragraph --></div></div><!-- /wp:cover -->',
    			'categories'    => [ 'wp-test' ],
    			'viewportWidth' => 1600,
    		)
    	);
    
    } );
    

    To preview the issue then:

    1. Create a new page.
    2. Add both block patterns from “WP test” category to the page content.
    3. As you can see the, old Cover block code has a bit of spacing on sides with Twenty Twenty-One theme (and is really narrow on Michelle theme).

    I’ve noticed the block pattern is not wrapped with usual <div class="wp-block" data-align="full">...</div> when added to content or previewed in block patterns list (the mini preview of the pattern).

    Could this be fixed?
    Why the div.wp-block[data-align="full"] is not being applied for the old Cover block code?
    If I update the Cover block code in theme’s block patterns to WP5.7, will it be compatible with WP5.6?

    Thanks for any info and resolution. Hope this could be fixed before WP5.7 official release…

    Best regards,

    Oliver

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Here are some screenshots of the issue:

    In both cases both Cover block patterns should be displayed fullwidth.

    Moderator Marius L. J.

    (@clorith)

    Hiya @webmandesign

    I tried your code on 5.7-RC just now, with Twenty Twenty-One, and I am not observing the same issues as you are, the cover blocks stretch the full width of the page as expected in both the old and new code.

    It is possible you have other plugins, or styles, that are affecting things with the new format (cover blocks now properly use proper image tags, instead of adding background images to the cover block it self, which may trip up if your styles are very specific).

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Hi,

    Please note that the issue is not actually related to how Cover block displays its background image. The issue is about div.wp-block[data-align="full"] not being applied on full aligned Cover block pattern with new code.

    The issue still happens on Twenty Twenty-One theme as can be seen in my screenshots above, but the gap is not so obvious (as with Michelle theme, for example).

    Here I’ve made a video of the issue for better preview: https://www.dropbox.com/s/fn41nb0rre29dog/WP5.7%20alignfull%20cover%20block%20pattern%20issue.mp4
    Can you confirm this is happening for you too when testing?

    BTW, I’m on Windows 10 using Chrome 88.

    The issue from what I understand from my testing is happening on new Cover block code only (I haven’t tested all blocks, though…). It is not wrapped in div[data-align="full"] when block pattern is inserted into the page content and that’s causing the issue. (Actually, the issue is present also in block pattern preview in the list of block patterns, but this is much more obvious on Michelle theme).

    So, I’m not saying the new code of Cover block (with actual image tag) displays weirdly, but it certainly causes editor to not to wrap it with div.wp-block[data-align="full"], which I consider an error as all other full aligned blocks are wrapped in that div, even the old Cover block pattern code.

    Hope this info helps a bit.

    Thanks and best regards,

    Oliver

    Moderator Marius L. J.

    (@clorith)

    Hmm, strange, I’m getting the wrapping div.wp-block[data-align="full"] in both cases.
    I did at first think it might be patched in a new Twenty Twenty-One release, but I tried with the other theme you mentioned and am still not able to replicate this.

    I don’t agree that it looks strange in your instance though, I’ve dropped in a quick screen capture of it in my test setup as well for comparison, just in case.

    As I am writing the above, I realized what the difference is though, you are using RC2, there is an RC3 which properly upgrades the old formatted cover block and should fix this for you if you update to it, would you be able to do so and let us know if that is in fact correct?

    Cover block wrap

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Sure, I can test with RC3. But I can not find any RC3 release https://wporg.ibadboy.net/news/category/releases/ Could you please point me to download page? Thanks.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    I also went ahead and applied window.localStorage.clear(); in console of the browser to make sure I get uncached editor scripts (also flushed the browser cache). The issue still persist for me on RC2.

    Some further info: this only happens when you add the old code block pattern to the page content. Once it is added and you change its alignment in the content and change it back to full width, the div.wp-block[data-align="full"] wrapper is properly applied.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    BTW, if you are testing with Michelle theme, please test with most recent version https://themes.trac.wporg.ibadboy.net/ticket/95723#comment:8 (Although the issue should still appear in older theme versions too, but just to make sure we are testing with the same versions.)

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    OK, I went ahead and downloaded RC3 form https://wporg.ibadboy.net/wordpress-5.7-RC3.zip and can confirm the issue is fixed there! 🙂

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WP 5.7-RC2: Broken display of block pattern with full-aligned Cover with backgro’ is closed to new replies.