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

Show file tree
Hide file tree
Changes from 14 commits
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
86 changes: 68 additions & 18 deletions packages/block-library/src/media-text/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,28 +29,78 @@ function render_block_core_media_text( $attributes, $content ) {
return $content;
}

$image_tag = '<figure class="wp-block-media-text__media"><img>';
$content = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $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';
carolinan marked this conversation as resolved.
Show resolved Hide resolved
$unique_id = 'wp-block-media-text__media-' . wp_unique_id();
$image_tag = '<img class="wp-block-media-text__featured_image">';
carolinan marked this conversation as resolved.
Show resolved Hide resolved
carolinan marked this conversation as resolved.
Show resolved Hide resolved
$media_tag_processor = new WP_HTML_Tag_Processor( $content );
$wrapping_figure_query = array(
'tag_name' => 'figure',
'class_name' => 'wp-block-media-text__media',
);

$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 ( $has_media_on_right ) {
// 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 {
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( 'figure' );
$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
}
$processor->next_tag( 'img' );
$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(
'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
'$1' . $image_tag,
$content
);

$image_tag_processor = new WP_HTML_Tag_Processor( $content );
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' );
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 ) ) ) );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idea for possible follow up: When the image is a background image add accessible alt text via aria-label (or whatever's appropriate) on the figure element


$content = $image_tag_processor->get_updated_html();
}
}
}

return $content;
}
Expand Down
201 changes: 201 additions & 0 deletions phpunit/blocks/render-block-media-text-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<?php
/**
* Media & Text block rendering tests.
*
* @package WordPress
* @subpackage Blocks
*/

/**
* Tests for the Media & Text block.
*
* @group blocks
*
* @covers ::render_block_core_media_text
*/
class Render_Block_MediaText_Test extends WP_UnitTestCase {

/**
* Post object.
*
* @var object
carolinan marked this conversation as resolved.
Show resolved Hide resolved
*/
protected static $post;

/**
* Attachment id.
*
* @var int
*/
protected static $attachment_id;

/**
* Setup method.
*/
public static function wpSetUpBeforeClass() {
self::$post = self::factory()->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 on the left.
*/
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 = '<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( '<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 left,
* 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;
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 );
$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 );
$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 );
$this->assertStringContainsString( 'background-image:url(' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . ')', $rendered );
$this->assertStringNotContainsString( '<img', $rendered );
}
}
Loading