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

Fix image captions hiding rounded borders in galleries #45563

Closed
wants to merge 1 commit into from
Closed

Fix image captions hiding rounded borders in galleries #45563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 23 additions & 0 deletions packages/block-library/src/gallery/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,29 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {

add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );


function block_core_gallery_caption_styles( $parsed_block ) {

$styles = WP_Theme_JSON_Resolver::get_theme_data()->get_data();
$borderRadius = '';

if(isset( $styles['styles']['blocks']['core/image']['border']['radius']) ) {
$borderRadius = $styles['styles']['blocks']['core/image']['border']['radius'];

if ( 'core/gallery' === $parsed_block['blockName'] ) {
foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
if ( 'core/image' === $inner_block['blockName'] ) {
$parsed_block['innerBlocks'][ $key ]['attrs']['border-radius'] = $borderRadius;
}
}
}
}
Copy link
Member

Choose a reason for hiding this comment

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

seems like it would make sense to check first if we're working with a gallery block before grabbing the theme json data as that might be the costlier step here.

function block_core_gallery_caption_styles( $block ) {
	if ( 'core/gallery' !== $block['blockName'] ) {
		return $block;
	}

	$styles = …

	if ( ! isset( $styles['styles']['blocks']['core/image']['border']['radius'] ) {
		return $block;
	}

	$border_radius = $styles['styles']['blocks']['core/image']['border']['radius'];
	foreach ( $block['innerBlocks'] as $key => $inner_block ) {
		if ( 'core/image' === $inner_block['block_name'] ) {
			$block['innerBlocks'][ $key ]['attrs']['border-radius'] = $border_radius;
		}
	}

	return $block;
}

Note here too a few styling issues. Some linter will probably also pick these up:

  • PHP code in WordPress follows snake_casing convention. it gets a bit confusing when working at the interface with the JavaScript code here, which follows camelCasing.
  • WordPress prefers spaces everywhere, inside parentheses, etc… You don't need or want any when referencing an array key by literal, but do when accessing by variable.
  • Generally speaking, we prefer early-abort flow to avoid nesting and two be able to mentally stop interpreting a function's flow as soon as we can.


return $parsed_block;
}

add_filter( 'render_block_data', 'block_core_gallery_caption_styles' );

/**
* Adds a style tag for the --wp--style--unstable-gallery-gap var.
*
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ function render_block_core_image( $attributes, $content ) {
$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
}
}

if ( isset( $attributes['border-radius'] ) ) {
$content = str_replace( '<figure', "<figure style='border-radius:" . $attributes['border-radius'] . ";overflow:hidden;'", $content);
Copy link
Member

Choose a reason for hiding this comment

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

despite the lines above using str_replace this might be a good place to use the new tag processor. might be worth modifying the whole function so that it's not split between two approaches.

of note: if the figure already had a style attribute in it then this change would wipe out that style attribute, making it a duplicate attribute that browsers ignore.

function render_block_core_image( $attributes, $content ) {
	if ( isset( $attributes[ 'data-id'] ) ) {
		$tags = new WP_HTML_Tag_Processor( $content );
		/*
		 * The data-id="$id" attribute on the img element provides
		 * backwards-compatibility for the gallery block, which now
		 * wraps image blocks within its inner blocks.
		 *
		 * @see the `render_block_data` hook in the core/gallery block
		 */
		if ( ! $tags->next_tag( 'img' ) ) {
			break;
		}

		$tags->set_attribute( 'data-id', $attributes['data-id'] );
		$content = (string) $tags;
	}

	if ( isset( $attributes['border-radius'] ) ) {
		$tags = new WP_HTML_Tag_Processor( $content );
		if ( ! $tags->next_tag( 'figure' ) ) {
			break;
		}

		$style  = $tags->get_attribute( 'style' );
		$border = "border-radius: {$attributes['border-radius']}; overflow: hidden;";
		$tags->set_attribute( 'style', "{$style}; {$border}" );
		$content = (string) $tags;
	}

	return $content;
}

}

return $content;
}

Expand Down