Fix duotone on parallax/repeated featured image cover blocks by ajlende · Pull Request #65929 · WordPress/gutenberg

ajlende · 2024-10-07T21:15:44Z

What?

Updates the cover block to render a <div> background when using featured images.

The best way to review this is to compare with the cover block's save function as the newly added code should mirror that when a featured image is used.

Why?

Fixes #50828

Cover blocks using featured images didn't pick up duotone because they weren't using an element for the featured image.

How?

Generate a <div> instead of setting background-image for cover blocks using featured images.

Testing Instructions

<!-- wp:query {"queryId":9,"query":{"perPage":12,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:cover {"useFeaturedImage":true,"hasParallax":true,"dimRatio":0,"isUserOverlayColor":true,"isDark":false,"style":{"color":{"duotone":"var:preset|duotone|grayscale"}}} -->
<div class="wp-block-cover is-light has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- /wp:post-template --></div>
<!-- /wp:query -->

Create some posts that have featured images.
Insert above content or add the following structure.
- Query loop block
  - Cover block
    - Enable featured image
    - Enable parallax (also try repeat)
    - Enable duotone filter
Save and view the page to confirm that the featured images cover blocks show the duotone effect.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Before

After

github-actions · 2024-10-07T21:16:04Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ajlende <ajlende@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: iamtakashi <iamtakashi@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

packages/block-library/src/cover/index.php

ajlende · 2024-10-07T21:22:42Z

packages/block-library/src/cover/index.php

+	/*
+	 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+	 * and removes eventual whitespace characters between the two (typically introduced at template level)
+	 */
+	$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+	if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+		$offset  = $matches[0][1];
+		$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );


Moved from L37-L45 above as both branches of the conditional need to insert content in the same place.

jeryj

Reviewed on a pairing call. Tested with various combinations of the cover block and confirmed this fixes the issue and aligns editor and frontend HTML output.

Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org> Co-authored-by: jordesign <jordesign@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: iamtakashi <iamtakashi@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

github-actions · 2024-10-15T14:24:28Z

I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 1774792

…ss#65929) Co-authored-by: ajlende <ajlende@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org> Co-authored-by: jordesign <jordesign@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: iamtakashi <iamtakashi@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>

ajlende added 4 commits October 7, 2024 15:06

Fix parallax/repeated featured image covers with duotone

40df1ce

Fix default background position

06f9438

Match JS attribute order

7ead02b

Fix ternary

e145280

ajlende added [Type] Bug An existing feature does not function as intended [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Oct 7, 2024

ajlende self-assigned this Oct 7, 2024

ajlende requested a review from ajitbohra as a code owner October 7, 2024 21:15

ajlende commented Oct 7, 2024

View reviewed changes

ajlende added 4 commits October 7, 2024 16:36

Simplify object_position

83281a9

Remove redundant conditional

3aa0043

Fix alt text source

4f9cb28

Add wp-image class

affae2f

jeryj approved these changes Oct 14, 2024

View reviewed changes

ajlende merged commit 7590b3d into trunk Oct 15, 2024

ajlende deleted the fix/duotone-cover-featured-image branch October 15, 2024 14:23

ajlende added the Backport to WP 6.7 Beta/RC label Oct 15, 2024

github-actions bot added this to the Gutenberg 19.5 milestone Oct 15, 2024

github-actions bot removed the Backport to WP 6.7 Beta/RC label Oct 15, 2024

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Oct 15, 2024

getdave mentioned this pull request Oct 21, 2024

Packages update for WordPress 6.7 RC1 WordPress/wordpress-develop#7600

Closed

sirreal mentioned this pull request Oct 25, 2024

test/pr automation workflow #66457

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix duotone on parallax/repeated featured image cover blocks#65929

Fix duotone on parallax/repeated featured image cover blocks#65929
ajlende merged 8 commits intotrunkfrom
fix/duotone-cover-featured-image

ajlende commented Oct 7, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Oct 7, 2024 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

ajlende Oct 7, 2024 •

edited

Loading

Uh oh!

jeryj left a comment

Uh oh!

github-actions bot commented Oct 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ajlende commented Oct 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

Uh oh!

github-actions bot commented Oct 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ajlende Oct 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeryj left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ajlende commented Oct 7, 2024 •

edited

Loading

github-actions bot commented Oct 7, 2024 •

edited

Loading

ajlende Oct 7, 2024 •

edited

Loading