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 7 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
84 changes: 66 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,76 @@ 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 );
$image_tag_processor->next_tag(
carolinan marked this conversation as resolved.
Show resolved Hide resolved
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;
}
Expand Down
Loading