Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Media & text: Update the image replacement logic #62030

Merged
merged 21 commits into from
Jun 19, 2024
Merged

Media & text: Update the image replacement logic #62030

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f84d248
Media & text: Update the image replacement logic when the media is on…
carolinan May 27, 2024
0f4a432
Try to fix PHP coding standard issues.
carolinan May 28, 2024
0865ac3
Look for the figure with the correct class name instead of any figure…
carolinan May 28, 2024
0e67eaa
Merge branch 'trunk' into try/media-text--media-on-right
carolinan May 28, 2024
884f732
Update the logic for inserting the featured image
carolinan May 28, 2024
c326e19
Try to fix PHP CS issues with spacing and the arrays.
carolinan May 28, 2024
45b2fb3
Try to fix PHP CS issues with spacing inside the arrays.
carolinan May 28, 2024
ee92f20
Add a test class for the Media & Text block
carolinan May 30, 2024
e60ac3d
Merge branch 'trunk' into try/media-text--media-on-right
carolinan May 31, 2024
c62c46c
Replace the $image_tag variable and remove the CSS class on the img tag
carolinan May 31, 2024
912ae47
Revert "Replace the $image_tag variable and remove the CSS class on t…
carolinan May 31, 2024
287b230
Add an if statement around the figure tag and the image tag
carolinan May 31, 2024
ff42bab
Try to fix PHP CS issues
carolinan May 31, 2024
117267c
Split test_render_block_core_media_text_featured_image into four tests
carolinan May 31, 2024
5efa53b
Update phpunit/blocks/render-block-media-text-test.php
carolinan Jun 4, 2024
e0402d5
Merge branch 'trunk' into try/media-text--media-on-right
carolinan Jun 4, 2024
2bb1e79
Move the PHP variables for media size slug and image tag
carolinan Jun 4, 2024
2d44777
Try to fix PHPCS spacing issues
carolinan Jun 5, 2024
a0b030d
Merge branch 'trunk' into try/media-text--media-on-right
carolinan Jun 10, 2024
dbe8aeb
Add a helper method for wp_query (post data) to reduce code duplication
carolinan Jun 18, 2024
0b03266
PHP coding standards: adjust spacing around equal signs.
carolinan Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 91 additions & 18 deletions phpunit/blocks/render-block-media-text-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

/**
Expand Down Expand Up @@ -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() {

Expand All @@ -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 = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div>';
$content_media_on_right = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div>';
$content_nested = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div></div></div>';
$content_nested_media_on_right = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div></div><figure class="wp-block-media-text__media"></figure></div>';
$content = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div>';

// 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( '<img alt="" src="' . 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.
Expand All @@ -94,21 +87,66 @@ public function test_render_block_core_media_text_featured_image() {
$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( '<img', $rendered );
}

/**
* Test gutenberg_render_block_core_media_text with the featured image on the left,
* and a second media & text block nested inside the content area.
*/
public function test_render_block_core_media_text_featured_image_nested() {

$rendered = gutenberg_render_block_core_media_text( $attributes, $content_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;
ramonjd marked this conversation as resolved.
Show resolved Hide resolved

$content = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div></div></div>';

// Assert that the rendered block contains the featured image.
$attributes = array(
'useFeaturedImage' => true,
);
$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
$this->assertStringContainsString( '<img alt="" src="' . 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( '<img', $rendered );
}

/**
* 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;

$content = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div>';

// 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( '<img alt="" src="' . 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.
Expand All @@ -117,11 +155,46 @@ public function test_render_block_core_media_text_featured_image() {
'mediaPosition' => '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( '<img', $rendered );
}

/**
* Test gutenberg_render_block_core_media_text with the featured image on the 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;

$content = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div></div><figure class="wp-block-media-text__media"></figure></div>';

// 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( '<img alt="" src="' . 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_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( '<img', $rendered );
}
Expand Down
Loading