From 40df1cebcd80e14584b5a676faaa3016c665436f Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 7 Oct 2024 14:51:54 -0500 Subject: [PATCH 1/8] Fix parallax/repeated featured image covers with duotone --- packages/block-library/src/cover/index.php | 56 ++++++++++++++-------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 2fca0b0374dd29..30119b7c8f5ee5 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -20,29 +20,22 @@ function render_block_core_cover( $attributes, $content ) { return $content; } + if ( isset( $attributes['focalPoint'] ) ) { + $object_position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; + } + if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) { $attr = array( 'class' => 'wp-block-cover__image-background', 'data-object-fit' => 'cover', ); - if ( isset( $attributes['focalPoint'] ) ) { - $object_position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; + if ( isset( $object_position ) ) { $attr['data-object-position'] = $object_position; - $attr['style'] = 'object-position: ' . $object_position; + $attr['style'] = 'object-position: ' . $object_position . ';'; } $image = get_the_post_thumbnail( null, 'post-thumbnail', $attr ); - - /* - * 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 = '/]+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 ); - } } else { if ( in_the_loop() ) { update_post_thumbnail_cache(); @@ -52,15 +45,40 @@ function render_block_core_cover( $attributes, $content ) { return $content; } - $processor = new WP_HTML_Tag_Processor( $content ); + $processor = new WP_HTML_Tag_Processor( '
' ); $processor->next_tag(); - $styles = $processor->get_attribute( 'style' ); - $merged_styles = ! empty( $styles ) ? $styles . ';' : ''; - $merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; + $processor->add_class( 'wp-block-cover__image-background' ); + if ( $attributes['hasParallax'] ) { + $processor->add_class( 'has-parallax' ); + } + if ( $attributes['isRepeated'] ) { + $processor->add_class( 'is-repeated' ); + } + + $current_caption = get_the_post_thumbnail_caption(); + if ( $current_caption ) { + $processor->set_attribute( 'role', 'img' ); + $processor->set_attribute( 'aria-label', $current_caption ); + } + + $styles = 'background-image: url(' . esc_url( $current_featured_image ) . ');'; + if ( isset( $object_position ) ) { + $styles .= 'background-position: ' . $object_position . ';'; + } + $processor->set_attribute( 'style', $styles ); + + $image = $processor->get_updated_html(); + } - $processor->set_attribute( 'style', $merged_styles ); - $content = $processor->get_updated_html(); + /* + * 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 = '/]+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 ); } return $content; From 06f9438376bad94bf77402ba214cc01acd1ba5db Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 7 Oct 2024 15:47:16 -0500 Subject: [PATCH 2/8] Fix default background position --- packages/block-library/src/cover/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 30119b7c8f5ee5..54eb085a70e092 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -62,9 +62,9 @@ function render_block_core_cover( $attributes, $content ) { $processor->set_attribute( 'aria-label', $current_caption ); } - $styles = 'background-image: url(' . esc_url( $current_featured_image ) . ');'; - if ( isset( $object_position ) ) { - $styles .= 'background-position: ' . $object_position . ';'; + $styles = 'background-position:' . isset( $object_position ) ? $object_position : '50% 50%' . ';'; + if ( $current_featured_image ) { + $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; } $processor->set_attribute( 'style', $styles ); From 7ead02b80083f4917813b6865ed9ac3d118474a5 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 7 Oct 2024 15:58:59 -0500 Subject: [PATCH 3/8] Match JS attribute order --- packages/block-library/src/cover/index.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 54eb085a70e092..1f8401cef85b7e 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -48,6 +48,12 @@ function render_block_core_cover( $attributes, $content ) { $processor = new WP_HTML_Tag_Processor( '
' ); $processor->next_tag(); + $current_caption = get_the_post_thumbnail_caption(); + if ( $current_caption ) { + $processor->set_attribute( 'role', 'img' ); + $processor->set_attribute( 'aria-label', $current_caption ); + } + $processor->add_class( 'wp-block-cover__image-background' ); if ( $attributes['hasParallax'] ) { $processor->add_class( 'has-parallax' ); @@ -56,12 +62,6 @@ function render_block_core_cover( $attributes, $content ) { $processor->add_class( 'is-repeated' ); } - $current_caption = get_the_post_thumbnail_caption(); - if ( $current_caption ) { - $processor->set_attribute( 'role', 'img' ); - $processor->set_attribute( 'aria-label', $current_caption ); - } - $styles = 'background-position:' . isset( $object_position ) ? $object_position : '50% 50%' . ';'; if ( $current_featured_image ) { $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; From e1452802cfcdf1560afdb56b7a8cdcd702a8e973 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 7 Oct 2024 16:04:51 -0500 Subject: [PATCH 4/8] Fix ternary --- packages/block-library/src/cover/index.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 1f8401cef85b7e..d57080c553094a 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -62,7 +62,11 @@ function render_block_core_cover( $attributes, $content ) { $processor->add_class( 'is-repeated' ); } - $styles = 'background-position:' . isset( $object_position ) ? $object_position : '50% 50%' . ';'; + $background_position = '50% 50%'; + if ( isset( $object_position ) ) { + $background_position = $object_position; + } + $styles = 'background-position:' . $background_position . ';'; if ( $current_featured_image ) { $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; } From 83281a98fac76a53d5d9068407ec02d1fda373b8 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 7 Oct 2024 16:36:10 -0500 Subject: [PATCH 5/8] Simplify object_position --- packages/block-library/src/cover/index.php | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index d57080c553094a..ffae8bbd7683f7 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -20,9 +20,9 @@ function render_block_core_cover( $attributes, $content ) { return $content; } - if ( isset( $attributes['focalPoint'] ) ) { - $object_position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; - } + $object_position = isset( $attributes['focalPoint'] ) + ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' + : null; if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) { $attr = array( @@ -30,9 +30,9 @@ function render_block_core_cover( $attributes, $content ) { 'data-object-fit' => 'cover', ); - if ( isset( $object_position ) ) { + if ( $object_position ) { $attr['data-object-position'] = $object_position; - $attr['style'] = 'object-position: ' . $object_position . ';'; + $attr['style'] = 'object-position:' . $object_position . ';'; } $image = get_the_post_thumbnail( null, 'post-thumbnail', $attr ); @@ -62,11 +62,7 @@ function render_block_core_cover( $attributes, $content ) { $processor->add_class( 'is-repeated' ); } - $background_position = '50% 50%'; - if ( isset( $object_position ) ) { - $background_position = $object_position; - } - $styles = 'background-position:' . $background_position . ';'; + $styles = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';'; if ( $current_featured_image ) { $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; } From 3aa004315959da877255522931eda07abac35499 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 14 Oct 2024 15:32:33 -0500 Subject: [PATCH 6/8] Remove redundant conditional --- packages/block-library/src/cover/index.php | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index ffae8bbd7683f7..9bd6d4dcfaef64 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -62,10 +62,8 @@ function render_block_core_cover( $attributes, $content ) { $processor->add_class( 'is-repeated' ); } - $styles = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';'; - if ( $current_featured_image ) { - $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; - } + $styles = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';'; + $styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');'; $processor->set_attribute( 'style', $styles ); $image = $processor->get_updated_html(); From 4f9cb28e58998aa980cfc4565299693a86588c04 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 14 Oct 2024 15:33:21 -0500 Subject: [PATCH 7/8] Fix alt text source --- packages/block-library/src/cover/index.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 9bd6d4dcfaef64..851db1d16a35ca 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -45,13 +45,15 @@ function render_block_core_cover( $attributes, $content ) { return $content; } + $current_thumbnail_id = get_post_thumbnail_id(); + $processor = new WP_HTML_Tag_Processor( '
' ); $processor->next_tag(); - $current_caption = get_the_post_thumbnail_caption(); - if ( $current_caption ) { + $current_alt = trim( strip_tags( get_post_meta( $current_thumbnail_id, '_wp_attachment_image_alt', true ) ) ); + if ( $current_alt ) { $processor->set_attribute( 'role', 'img' ); - $processor->set_attribute( 'aria-label', $current_caption ); + $processor->set_attribute( 'aria-label', $current_alt ); } $processor->add_class( 'wp-block-cover__image-background' ); From affae2f9eac1c675e7b0cb672c288e24a15b8e2f Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 14 Oct 2024 15:33:35 -0500 Subject: [PATCH 8/8] Add wp-image class --- packages/block-library/src/cover/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php index 851db1d16a35ca..1ffe7ab3f4dbc6 100644 --- a/packages/block-library/src/cover/index.php +++ b/packages/block-library/src/cover/index.php @@ -57,6 +57,7 @@ function render_block_core_cover( $attributes, $content ) { } $processor->add_class( 'wp-block-cover__image-background' ); + $processor->add_class( 'wp-image-' . $current_thumbnail_id ); if ( $attributes['hasParallax'] ) { $processor->add_class( 'has-parallax' ); }