diff --git a/src/wp-includes/blocks/image.php b/src/wp-includes/blocks/image.php index acefd5714bbd4..7df0949c8dfa0 100644 --- a/src/wp-includes/blocks/image.php +++ b/src/wp-includes/blocks/image.php @@ -229,26 +229,32 @@ function block_core_image_render_lightbox( $block_content, $block ) { $body_content = $w->get_updated_html(); // Add a button alongside image in the body content. - $img = null; - preg_match( '/]+>/', $body_content, $img ); - - $button = - $img[0] - . ''; - - $body_content = preg_replace( '/]+>/', $button, $body_content ); + $body_content = preg_replace_callback( + '/]+>/', + static function ( $img_match ) use ( $aria_label ) { + $button_html = WP_HTML::render( + <<<'HTML' + +HTML, + array( + 'label' => $aria_label, + 'interactivity' => array( + 'data-wp-on--click' => 'actions.core.image.showLightbox', + 'data-wp-style--right' => 'context.core.image.imageButtonRight', + 'data-wp-style--top' => 'context.core.image.imageButtonTop', + ), + ) + ); + + return $img_match[0] . $button_html; + }, + $body_content, + 1 + ); // We need both a responsive image and an enlarged image to animate // the zoom seamlessly on slow internet connections; the responsive @@ -295,40 +301,46 @@ class="lightbox-trigger" if ( wp_theme_has_theme_json() ) { $global_styles_color = wp_get_global_styles( array( 'color' ) ); if ( ! empty( $global_styles_color['background'] ) ) { - $background_color = esc_attr( $global_styles_color['background'] ); + $background_color = $global_styles_color['background']; } if ( ! empty( $global_styles_color['text'] ) ) { - $close_button_color = esc_attr( $global_styles_color['text'] ); + $close_button_color = $global_styles_color['text']; } } - $close_button_icon = ''; - $close_button_label = esc_attr__( 'Close' ); - - $lightbox_html = << - -
$initial_image_content
-
$enlarged_image_content
- - -HTML; + $lightbox_html = WP_HTML::render( + << + +
$initial_image_content
+
$enlarged_image_content
+ + +HTML, + array( + 'background_color' => $background_color, + 'close_button_color' => $close_button_color, + 'close_label' => __( 'Close' ), + 'lightbox_animation_class' => $lightbox_animation, + 'interactivity' => array( + 'data-wp-bind--role' => 'selectors.core.image.roleAttribute', + 'data-wp-bind--aria-label' => 'selectors.core.image.dialogLabel', + 'data-wp-body' => '', + 'data-wp-class--initialized' => 'context.core.image.initialized', + 'data-wp-class--active' => 'context.core.image.lightboxEnabled', + 'data-wp-class--hideAnimationEnabled' => 'context.core.image.hideAnimationEnabled', + 'data-wp-bind--aria-modal' => 'selectors.core.image.ariaModal', + 'data-wp-effect' => 'effects.core.image.initLightbox', + 'data-wp-on--keydown' => 'actions.core.image.handleKeydown', + 'data-wp-on--touchstart' => 'actions.core.image.handleTouchStart', + 'data-wp-on--touchmove' => 'actions.core.image.handleTouchMove', + 'data-wp-on--touchend' => 'actions.core.image.handleTouchEnd', + 'data-wp-on--click' => 'actions.core.image.hideLightbox', + ), + ) + ); return str_replace( '', $lightbox_html . '', $body_content ); } diff --git a/src/wp-includes/html-api/class-wp-html.php b/src/wp-includes/html-api/class-wp-html.php index 1f917d081c832..6443acac91508 100644 --- a/src/wp-includes/html-api/class-wp-html.php +++ b/src/wp-includes/html-api/class-wp-html.php @@ -73,7 +73,7 @@ class WP_HTML { * @access private * * @param string $template The HTML template. - * @param string $args Array of key/value pairs providing substitue values for the placeholders. + * @param array $args Array of key/value pairs providing substitue values for the placeholders. * @return string The rendered HTML. */ public static function render( $template, $args ) {