From f84d248032390a73578c95fec061804ae396f775 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 27 May 2024 16:47:50 +0200 Subject: [PATCH 01/17] Media & text: Update the image replacement logic when the media is on the right --- .../block-library/src/media-text/index.php | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index f828aed645fb1..559e7db9e7b67 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -29,8 +29,23 @@ function render_block_core_media_text( $attributes, $content ) { return $content; } - $image_tag = '
'; - $content = preg_replace( '//', $image_tag, $content ); + $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; + $image_tag = '
'; + + // When the media is on the right, the img tag is inserted inside the last figure tag. + if ( $has_media_on_right ) { + // Check if there is a media figure tag in the content: There should be at least one figure tag unless something broke the block. + if ( preg_match( '//', $content ) ) { + // Find the last figure tag and replace it with the combined figure and img tag. + $last_figure = strripos( $content, '
' ); + if ( $last_figure !== false ) { + $content = substr_replace( $content, $image_tag, $last_figure, strlen('
') ); + } + } + } else { + // When the media is on the left, the img tag is inserted inside the first figure tag. + $content = preg_replace( '//', $image_tag, $content ); + } $processor = new WP_HTML_Tag_Processor( $content ); if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) { @@ -41,7 +56,8 @@ function render_block_core_media_text( $attributes, $content ) { $processor->next_tag( 'figure' ); $processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' ); } - $processor->next_tag( 'img' ); + // Locate the img tag with the class wp-block-media-text__featured_image and update its attributes. + $processor->next_tag( array( 'class_name' => 'wp-block-media-text__featured_image' ) ); $media_size_slug = 'full'; if ( isset( $attributes['mediaSizeSlug'] ) ) { $media_size_slug = $attributes['mediaSizeSlug']; From 0f4a4321458b52276dc34e598f1502e0d30592f8 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 May 2024 06:21:11 +0200 Subject: [PATCH 02/17] Try to fix PHP coding standard issues. --- packages/block-library/src/media-text/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 559e7db9e7b67..17cb7f12121c5 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -30,7 +30,7 @@ function render_block_core_media_text( $attributes, $content ) { } $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; - $image_tag = '
'; + $image_tag = '
'; // When the media is on the right, the img tag is inserted inside the last figure tag. if ( $has_media_on_right ) { @@ -38,8 +38,8 @@ function render_block_core_media_text( $attributes, $content ) { if ( preg_match( '//', $content ) ) { // Find the last figure tag and replace it with the combined figure and img tag. $last_figure = strripos( $content, '
' ); - if ( $last_figure !== false ) { - $content = substr_replace( $content, $image_tag, $last_figure, strlen('
') ); + if ( false !== $last_figure ) { + $content = substr_replace( $content, $image_tag, $last_figure, strlen( '
' ) ); } } } else { From 0865ac39ea92c33e6668d0f3e27bf13d0e975e72 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 May 2024 08:17:55 +0200 Subject: [PATCH 03/17] Look for the figure with the correct class name instead of any figure tag. --- packages/block-library/src/media-text/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 17cb7f12121c5..a86f60a7e875a 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -53,7 +53,7 @@ function render_block_core_media_text( $attributes, $content ) { if ( isset( $attributes['focalPoint'] ) ) { $position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; } - $processor->next_tag( 'figure' ); + $processor->next_tag( array( 'class_name' => 'wp-block-media-text__media' ) ); $processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' ); } // Locate the img tag with the class wp-block-media-text__featured_image and update its attributes. From 884f732443bc3a3b0040dc1dc251f7cbe9c4266d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 May 2024 14:44:08 +0200 Subject: [PATCH 04/17] Update the logic for inserting the featured image MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use ´while´ to locate the correct ´figure´ tag depending on the block settings. Add support for the image fill setting. --- .../block-library/src/media-text/index.php | 79 ++++++++++++------- 1 file changed, 49 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index a86f60a7e875a..389ebed05640c 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -29,44 +29,63 @@ function render_block_core_media_text( $attributes, $content ) { return $content; } - $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; - $image_tag = '
'; + $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; + $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill']; + $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; + $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; + $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); + $image_tag = ''; + $media_tag_processor = new WP_HTML_Tag_Processor( $content ); + $wrapping_figure_query = array( 'tag_name' => 'figure', 'class_name' => 'wp-block-media-text__media' ); - // When the media is on the right, the img tag is inserted inside the last figure tag. if ( $has_media_on_right ) { - // Check if there is a media figure tag in the content: There should be at least one figure tag unless something broke the block. - if ( preg_match( '//', $content ) ) { - // Find the last figure tag and replace it with the combined figure and img tag. - $last_figure = strripos( $content, '
' ); - if ( false !== $last_figure ) { - $content = substr_replace( $content, $image_tag, $last_figure, strlen( '
' ) ); + // Loop through all the figure tags and set a bookmark on the last figure tag. + while ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) { + $media_tag_processor->set_bookmark( 'last_figure' ); + } + if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) { + $media_tag_processor->seek( 'last_figure' ); + if ( $image_fill ) { + $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' ); + } else { + // Insert a unique ID to identify the figure tag. + $media_tag_processor->set_attribute( 'id', $unique_id); } } } else { - // When the media is on the left, the img tag is inserted inside the first figure tag. - $content = preg_replace( '//', $image_tag, $content ); - } - - $processor = new WP_HTML_Tag_Processor( $content ); - if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) { - $position = '50% 50%'; - if ( isset( $attributes['focalPoint'] ) ) { - $position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'; + if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) { + if ( $image_fill ) { + $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' ); + } else { + // Insert a unique ID to identify the figure tag. + $media_tag_processor->set_attribute( 'id', $unique_id); + } } - $processor->next_tag( array( 'class_name' => 'wp-block-media-text__media' ) ); - $processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' ); - } - // Locate the img tag with the class wp-block-media-text__featured_image and update its attributes. - $processor->next_tag( array( 'class_name' => 'wp-block-media-text__featured_image' ) ); - $media_size_slug = 'full'; - if ( isset( $attributes['mediaSizeSlug'] ) ) { - $media_size_slug = $attributes['mediaSizeSlug']; } - $processor->set_attribute( 'src', esc_url( $current_featured_image ) ); - $processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); - $processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); - $content = $processor->get_updated_html(); + $content = $media_tag_processor->get_updated_html(); + + // If the image is not set to fill, add the image tag inside the figure tag, + // and update the image attributes in order to display the featured image. + if ( ! $image_fill ) { + $content = preg_replace( + '/()/', + '$1' . $image_tag, + $content + ); + + $image_tag_processor = new WP_HTML_Tag_Processor( $content ); + $image_tag_processor->next_tag( array( 'tag_name' => 'figure', 'id' => $unique_id ) ); + // The ID is only used to ensure that the correct figure tag is selected, + // and can now be removed. + $image_tag_processor->remove_attribute( 'id' ); + $image_tag_processor->next_tag( array( 'tag_name' => 'img', 'class_name' => 'wp-block-media-text__featured_image' ) ); + $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); + $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); + $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); + + $content = $image_tag_processor->get_updated_html(); + } return $content; } From c326e197aa705dec8c5894e4f3b4592ee9a092ce Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 May 2024 14:56:32 +0200 Subject: [PATCH 05/17] Try to fix PHP CS issues with spacing and the arrays. --- .../block-library/src/media-text/index.php | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 389ebed05640c..12315ef9e5b16 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -36,7 +36,10 @@ function render_block_core_media_text( $attributes, $content ) { $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); $image_tag = ''; $media_tag_processor = new WP_HTML_Tag_Processor( $content ); - $wrapping_figure_query = array( 'tag_name' => 'figure', 'class_name' => 'wp-block-media-text__media' ); + $wrapping_figure_query = array( + 'tag_name' => 'figure', + 'class_name' => 'wp-block-media-text__media', + ); if ( $has_media_on_right ) { // Loop through all the figure tags and set a bookmark on the last figure tag. @@ -49,7 +52,7 @@ function render_block_core_media_text( $attributes, $content ) { $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' ); } else { // Insert a unique ID to identify the figure tag. - $media_tag_processor->set_attribute( 'id', $unique_id); + $media_tag_processor->set_attribute( 'id', $unique_id ); } } } else { @@ -58,7 +61,7 @@ function render_block_core_media_text( $attributes, $content ) { $media_tag_processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $focal_point . ';' ); } else { // Insert a unique ID to identify the figure tag. - $media_tag_processor->set_attribute( 'id', $unique_id); + $media_tag_processor->set_attribute( 'id', $unique_id ); } } } @@ -75,11 +78,21 @@ function render_block_core_media_text( $attributes, $content ) { ); $image_tag_processor = new WP_HTML_Tag_Processor( $content ); - $image_tag_processor->next_tag( array( 'tag_name' => 'figure', 'id' => $unique_id ) ); + $image_tag_processor->next_tag( + array( + 'tag_name' => 'figure', + 'id' => $unique_id, + ) + ); // The ID is only used to ensure that the correct figure tag is selected, // and can now be removed. $image_tag_processor->remove_attribute( 'id' ); - $image_tag_processor->next_tag( array( 'tag_name' => 'img', 'class_name' => 'wp-block-media-text__featured_image' ) ); + $image_tag_processor->next_tag( + array( + 'tag_name' => 'img', + 'class_name' => 'wp-block-media-text__featured_image', + ) + ); $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); From 45b2fb3ce6a521136b2776471631e54896f72b16 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 28 May 2024 15:00:03 +0200 Subject: [PATCH 06/17] Try to fix PHP CS issues with spacing inside the arrays. --- packages/block-library/src/media-text/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 12315ef9e5b16..dfc3a89dcb266 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -37,7 +37,7 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag = ''; $media_tag_processor = new WP_HTML_Tag_Processor( $content ); $wrapping_figure_query = array( - 'tag_name' => 'figure', + 'tag_name' => 'figure', 'class_name' => 'wp-block-media-text__media', ); @@ -81,7 +81,7 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag_processor->next_tag( array( 'tag_name' => 'figure', - 'id' => $unique_id, + 'id' => $unique_id, ) ); // The ID is only used to ensure that the correct figure tag is selected, @@ -89,7 +89,7 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag_processor->remove_attribute( 'id' ); $image_tag_processor->next_tag( array( - 'tag_name' => 'img', + 'tag_name' => 'img', 'class_name' => 'wp-block-media-text__featured_image', ) ); From ee92f208805462a13229a4e4d5baee6898dec734 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 30 May 2024 10:28:16 +0200 Subject: [PATCH 07/17] Add a test class for the Media & Text block --- .../blocks/render-block-media-text-test.php | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 phpunit/blocks/render-block-media-text-test.php diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php new file mode 100644 index 0000000000000..ca992c014b357 --- /dev/null +++ b/phpunit/blocks/render-block-media-text-test.php @@ -0,0 +1,128 @@ +post->create_and_get(); + $file = DIR_TESTDATA . '/images/canola.jpg'; + + self::$attachment_id = self::factory()->attachment->create_upload_object( + $file, + self::$post->ID, + array( + 'post_mime_type' => 'image/jpeg', + ) + ); + + set_post_thumbnail( self::$post, self::$attachment_id ); + } + + /** + * Tear down method. + */ + public static function wpTearDownAfterClass() { + wp_delete_post( self::$post->ID, true ); + wp_delete_post( self::$attachment_id, true ); + } + + /** + * Test gutenberg_render_block_core_media_text with the featured image. + */ + public function test_render_block_core_media_text_featured_image() { + + global $wp_query; + + // Fake being in the loop. + $wp_query->in_the_loop = true; + $wp_query->post = self::$post; + + $wp_query->posts = array( self::$post ); + $GLOBALS['post'] = self::$post; + + $content = '

'; + $content_media_on_right = '

'; + $content_nested = '

'; + $content_nested_media_on_right = '

'; + + // Assert that the rendered block contains the featured image. + $attributes = array( + 'useFeaturedImage' => true, + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); + $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + + $rendered = gutenberg_render_block_core_media_text( $attributes, $content_nested ); + $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + + // Assert that the rendered block contains the featured image as the background-image url, + // and not the image element, when image fill is true. + $attributes = array( + 'useFeaturedImage' => true, + 'imageFill' => true, + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); + $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); + $this->assertStringNotContainsString( 'assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); + $this->assertStringNotContainsString( ' true, + 'mediaPosition' => 'right', + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content_media_on_right ); + $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + + $rendered = gutenberg_render_block_core_media_text( $attributes, $content_nested_media_on_right ); + $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + + // Assert that the rendered block contains the featured image as the background-image url, + // and not the image element, when image fill is true and the media is on the right. + $attributes = array( + 'useFeaturedImage' => true, + 'mediaPosition' => 'right', + 'imageFill' => true, + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content_media_on_right ); + $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); + $this->assertStringNotContainsString( 'assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); + $this->assertStringNotContainsString( ' Date: Fri, 31 May 2024 07:20:56 +0200 Subject: [PATCH 08/17] Replace the $image_tag variable and remove the CSS class on the img tag Neither the variable or the CSS class are needed, and they can be removed in favor of an empty `` tag. --- packages/block-library/src/media-text/index.php | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index dfc3a89dcb266..bd1af8d2e148b 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -34,7 +34,6 @@ function render_block_core_media_text( $attributes, $content ) { $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); - $image_tag = ''; $media_tag_processor = new WP_HTML_Tag_Processor( $content ); $wrapping_figure_query = array( 'tag_name' => 'figure', @@ -73,7 +72,7 @@ function render_block_core_media_text( $attributes, $content ) { if ( ! $image_fill ) { $content = preg_replace( '/()/', - '$1' . $image_tag, + '$1', $content ); @@ -90,7 +89,6 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag_processor->next_tag( array( 'tag_name' => 'img', - 'class_name' => 'wp-block-media-text__featured_image', ) ); $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); From 912ae47fdae2b3a967bbb425779e788409e587f6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 31 May 2024 08:12:25 +0200 Subject: [PATCH 09/17] Revert "Replace the $image_tag variable and remove the CSS class on the img tag" This reverts commit c62c46cc966bd59103463335a45330f9ebc335e9. --- packages/block-library/src/media-text/index.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index bd1af8d2e148b..dfc3a89dcb266 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -34,6 +34,7 @@ function render_block_core_media_text( $attributes, $content ) { $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); + $image_tag = ''; $media_tag_processor = new WP_HTML_Tag_Processor( $content ); $wrapping_figure_query = array( 'tag_name' => 'figure', @@ -72,7 +73,7 @@ function render_block_core_media_text( $attributes, $content ) { if ( ! $image_fill ) { $content = preg_replace( '/()/', - '$1', + '$1' . $image_tag, $content ); @@ -89,6 +90,7 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag_processor->next_tag( array( 'tag_name' => 'img', + 'class_name' => 'wp-block-media-text__featured_image', ) ); $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); From 287b23055318fa8ee01c7ac33aac7361322e1e53 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 31 May 2024 09:02:45 +0200 Subject: [PATCH 10/17] Add an if statement around the figure tag and the image tag Add an if statement around the figure tag and the image tag, to make sure that the id is removed and the attributes are updated on the correct tags. --- .../block-library/src/media-text/index.php | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index dfc3a89dcb266..c85e7db50a47d 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -78,26 +78,28 @@ function render_block_core_media_text( $attributes, $content ) { ); $image_tag_processor = new WP_HTML_Tag_Processor( $content ); - $image_tag_processor->next_tag( + if ( $image_tag_processor->next_tag( array( 'tag_name' => 'figure', 'id' => $unique_id, - ) - ); - // The ID is only used to ensure that the correct figure tag is selected, - // and can now be removed. - $image_tag_processor->remove_attribute( 'id' ); - $image_tag_processor->next_tag( - array( - 'tag_name' => 'img', - 'class_name' => 'wp-block-media-text__featured_image', - ) - ); - $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); - $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); - $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); - - $content = $image_tag_processor->get_updated_html(); + ) ) + ) { + // The ID is only used to ensure that the correct figure tag is selected, + // and can now be removed. + $image_tag_processor->remove_attribute( 'id' ); + if ( $image_tag_processor->next_tag( + array( + 'tag_name' => 'img', + 'class_name' => 'wp-block-media-text__featured_image', + ) + ) ) { + $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); + $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); + $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); + + $content = $image_tag_processor->get_updated_html(); + } + } } return $content; From ff42baba128775aa04b81be743073a6e3ef6d668 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 31 May 2024 09:10:04 +0200 Subject: [PATCH 11/17] Try to fix PHP CS issues Move the closing parenthesis on the array that includes the figure tag name and id. Remove whitespace. --- packages/block-library/src/media-text/index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index c85e7db50a47d..995797046cf63 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -82,8 +82,8 @@ function render_block_core_media_text( $attributes, $content ) { array( 'tag_name' => 'figure', 'id' => $unique_id, - ) ) - ) { + ) + ) ) { // The ID is only used to ensure that the correct figure tag is selected, // and can now be removed. $image_tag_processor->remove_attribute( 'id' ); @@ -96,7 +96,7 @@ function render_block_core_media_text( $attributes, $content ) { $image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) ); $image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug ); $image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) ); - + $content = $image_tag_processor->get_updated_html(); } } From 117267ca3f2ac6d6fd8ecf5fb94bac6b61d83d65 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 31 May 2024 10:13:26 +0200 Subject: [PATCH 12/17] Split test_render_block_core_media_text_featured_image into four tests --- .../blocks/render-block-media-text-test.php | 109 +++++++++++++++--- 1 file changed, 91 insertions(+), 18 deletions(-) diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index ca992c014b357..be3e8dd5f6b37 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -13,7 +13,6 @@ * * @covers ::render_block_core_media_text */ -//class Tests_Blocks_Render_MediaText extends WP_UnitTestCase { class Render_Block_MediaText_Test extends WP_UnitTestCase { /** @@ -57,7 +56,7 @@ public static function wpTearDownAfterClass() { } /** - * Test gutenberg_render_block_core_media_text with the featured image. + * Test gutenberg_render_block_core_media_text with the featured image on the left. */ public function test_render_block_core_media_text_featured_image() { @@ -70,20 +69,14 @@ public function test_render_block_core_media_text_featured_image() { $wp_query->posts = array( self::$post ); $GLOBALS['post'] = self::$post; - $content = '

'; - $content_media_on_right = '

'; - $content_nested = '

'; - $content_nested_media_on_right = '

'; + $content = '

'; // Assert that the rendered block contains the featured image. $attributes = array( 'useFeaturedImage' => true, ); $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); - $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); - - $rendered = gutenberg_render_block_core_media_text( $attributes, $content_nested ); - $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + $this->assertStringContainsString( 'assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); $this->assertStringNotContainsString( 'in_the_loop = true; + $wp_query->post = self::$post; + + $wp_query->posts = array( self::$post ); + $GLOBALS['post'] = self::$post; + + $content = '

'; + + // Assert that the rendered block contains the featured image. + $attributes = array( + 'useFeaturedImage' => true, + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); + $this->assertStringContainsString( ' true, + 'imageFill' => true, + ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); $this->assertStringNotContainsString( 'in_the_loop = true; + $wp_query->post = self::$post; + + $wp_query->posts = array( self::$post ); + $GLOBALS['post'] = self::$post; + + $content = '

'; // Assert that the rendered block contains the featured image when media is on the right. $attributes = array( 'useFeaturedImage' => true, 'mediaPosition' => 'right', ); - $rendered = gutenberg_render_block_core_media_text( $attributes, $content_media_on_right ); - $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); - - $rendered = gutenberg_render_block_core_media_text( $attributes, $content_nested_media_on_right ); - $this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); + $this->assertStringContainsString( ' 'right', 'imageFill' => true, ); - $rendered = gutenberg_render_block_core_media_text( $attributes, $content_media_on_right ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); $this->assertStringNotContainsString( 'in_the_loop = true; + $wp_query->post = self::$post; + + $wp_query->posts = array( self::$post ); + $GLOBALS['post'] = self::$post; + + $content = '

'; + + // Assert that the rendered block contains the featured image when media is on the right. + $attributes = array( + 'useFeaturedImage' => true, + 'mediaPosition' => 'right', + ); + + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); + $this->assertStringContainsString( ' true, + 'mediaPosition' => 'right', + 'imageFill' => true, + ); - $rendered = gutenberg_render_block_core_media_text( $attributes, $content_nested_media_on_right ); + $rendered = gutenberg_render_block_core_media_text( $attributes, $content ); $this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered ); $this->assertStringNotContainsString( ' Date: Tue, 4 Jun 2024 06:47:30 +0200 Subject: [PATCH 13/17] Update phpunit/blocks/render-block-media-text-test.php Co-authored-by: Ramon --- phpunit/blocks/render-block-media-text-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index be3e8dd5f6b37..aa730823890f9 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -18,7 +18,7 @@ class Render_Block_MediaText_Test extends WP_UnitTestCase { /** * Post object. * - * @var object + * @var WP_Post */ protected static $post; From 2bb1e79fe47d608c740cfb0b293d6060a620259b Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 4 Jun 2024 10:22:33 +0200 Subject: [PATCH 14/17] Move the PHP variables for media size slug and image tag --- packages/block-library/src/media-text/index.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 995797046cf63..24c6a048f26a0 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -29,17 +29,15 @@ function render_block_core_media_text( $attributes, $content ) { return $content; } - $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; - $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill']; - $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; - $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; - $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); - $image_tag = ''; $media_tag_processor = new WP_HTML_Tag_Processor( $content ); $wrapping_figure_query = array( 'tag_name' => 'figure', 'class_name' => 'wp-block-media-text__media', ); + $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; + $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill']; + $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; + $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); if ( $has_media_on_right ) { // Loop through all the figure tags and set a bookmark on the last figure tag. @@ -71,7 +69,9 @@ function render_block_core_media_text( $attributes, $content ) { // If the image is not set to fill, add the image tag inside the figure tag, // and update the image attributes in order to display the featured image. if ( ! $image_fill ) { - $content = preg_replace( + $media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full'; + $image_tag = ''; + $content = preg_replace( '/()/', '$1' . $image_tag, $content From 2d447777ff83220d0f19403fac073394f5b6ebff Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 5 Jun 2024 05:41:10 +0200 Subject: [PATCH 15/17] Try to fix PHPCS spacing issues --- packages/block-library/src/media-text/index.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 24c6a048f26a0..87be164a04bb9 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -34,10 +34,10 @@ function render_block_core_media_text( $attributes, $content ) { 'tag_name' => 'figure', 'class_name' => 'wp-block-media-text__media', ); - $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; - $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill']; - $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; - $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); + $has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition']; + $image_fill = isset( $attributes['imageFill'] ) && $attributes['imageFill']; + $focal_point = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%'; + $unique_id = 'wp-block-media-text__media-' . wp_unique_id(); if ( $has_media_on_right ) { // Loop through all the figure tags and set a bookmark on the last figure tag. From dbe8aebd50eea679983c5a1ed43597319715c05f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 18 Jun 2024 10:25:41 +0200 Subject: [PATCH 16/17] Add a helper method for wp_query (post data) to reduce code duplication --- .../blocks/render-block-media-text-test.php | 48 +++++-------------- 1 file changed, 13 insertions(+), 35 deletions(-) diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index aa730823890f9..1b3c5c2fd5703 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -56,18 +56,21 @@ public static function wpTearDownAfterClass() { } /** - * Test gutenberg_render_block_core_media_text with the featured image on the left. + * Helper method for $wp_query. */ - public function test_render_block_core_media_text_featured_image() { - + public static function setup_query() { global $wp_query; - - // Fake being in the loop. $wp_query->in_the_loop = true; - $wp_query->post = self::$post; - + $wp_query->post = self::$post; $wp_query->posts = array( self::$post ); $GLOBALS['post'] = self::$post; + } + + /** + * Test gutenberg_render_block_core_media_text with the featured image on the left. + */ + public function test_render_block_core_media_text_featured_image() { + $this->setup_query(); $content = '

'; @@ -94,16 +97,7 @@ public function test_render_block_core_media_text_featured_image() { * and a second media & text block nested inside the content area. */ public function test_render_block_core_media_text_featured_image_nested() { - - global $wp_query; - - // Fake being in the loop. - $wp_query->in_the_loop = true; - $wp_query->post = self::$post; - - $wp_query->posts = array( self::$post ); - $GLOBALS['post'] = self::$post; - + $this->setup_query(); $content = '

'; // Assert that the rendered block contains the featured image. @@ -128,15 +122,7 @@ public function test_render_block_core_media_text_featured_image_nested() { * Test gutenberg_render_block_core_media_text with the featured image on the right. */ public function test_render_block_core_media_text_featured_image_media_on_right() { - - global $wp_query; - - // Fake being in the loop. - $wp_query->in_the_loop = true; - $wp_query->post = self::$post; - - $wp_query->posts = array( self::$post ); - $GLOBALS['post'] = self::$post; + $this->setup_query(); $content = '

'; @@ -165,15 +151,7 @@ public function test_render_block_core_media_text_featured_image_media_on_right( * and a second media & text block nested inside the content area. */ public function test_render_block_core_media_text_featured_image_media_on_right_nested() { - - global $wp_query; - - // Fake being in the loop. - $wp_query->in_the_loop = true; - $wp_query->post = self::$post; - - $wp_query->posts = array( self::$post ); - $GLOBALS['post'] = self::$post; + $this->setup_query(); $content = '

'; From 0b03266cbece99b3b75643131c5b6f3390ef2952 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 18 Jun 2024 10:30:57 +0200 Subject: [PATCH 17/17] PHP coding standards: adjust spacing around equal signs. --- phpunit/blocks/render-block-media-text-test.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php index 1b3c5c2fd5703..94c184408c89f 100644 --- a/phpunit/blocks/render-block-media-text-test.php +++ b/phpunit/blocks/render-block-media-text-test.php @@ -61,9 +61,9 @@ public static function wpTearDownAfterClass() { public static function setup_query() { global $wp_query; $wp_query->in_the_loop = true; - $wp_query->post = self::$post; - $wp_query->posts = array( self::$post ); - $GLOBALS['post'] = self::$post; + $wp_query->post = self::$post; + $wp_query->posts = array( self::$post ); + $GLOBALS['post'] = self::$post; } /**