Skip to content

Commit 2a964f4

Browse files
dmsnelldmsnell
committed
Explore a refactor of image lightbox code
1 parent 4e912a9 commit 2a964f4

2 files changed

Lines changed: 62 additions & 50 deletions

File tree

‎src/wp-includes/blocks/image.php‎

Lines changed: 61 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -229,26 +229,32 @@ function block_core_image_render_lightbox( $block_content, $block ) {
229229
$body_content = $w->get_updated_html();
230230

231231
// Add a button alongside image in the body content.
232-
$img = null;
233-
preg_match( '/<img[^>]+>/', $body_content, $img );
234-
235-
$button =
236-
$img[0]
237-
. '<button
238-
class="lightbox-trigger"
239-
type="button"
240-
aria-haspopup="dialog"
241-
aria-label="' . esc_attr( $aria_label ) . '"
242-
data-wp-on--click="actions.core.image.showLightbox"
243-
data-wp-style--right="context.core.image.imageButtonRight"
244-
data-wp-style--top="context.core.image.imageButtonTop"
245-
>
246-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
247-
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
248-
</svg>
249-
</button>';
250-
251-
$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
232+
$body_content = preg_replace_callback(
233+
'/<img[^>]+>/',
234+
static function ( $img_match ) use ( $aria_label ) {
235+
$button_html = WP_HTML::render(
236+
<<<'HTML'
237+
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="</%label>" ...interactivity>
238+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
239+
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
240+
</svg>
241+
</button>
242+
HTML,
243+
array(
244+
'label' => $aria_label,
245+
'interactivity' => array(
246+
'data-wp-on--click' => 'actions.core.image.showLightbox',
247+
'data-wp-style--right' => 'context.core.image.imageButtonRight',
248+
'data-wp-style--top' => 'context.core.image.imageButtonTop',
249+
),
250+
)
251+
);
252+
253+
return $img_match[0] . $button_html;
254+
},
255+
$body_content,
256+
1
257+
);
252258

253259
// We need both a responsive image and an enlarged image to animate
254260
// the zoom seamlessly on slow internet connections; the responsive
@@ -295,40 +301,46 @@ class="lightbox-trigger"
295301
if ( wp_theme_has_theme_json() ) {
296302
$global_styles_color = wp_get_global_styles( array( 'color' ) );
297303
if ( ! empty( $global_styles_color['background'] ) ) {
298-
$background_color = esc_attr( $global_styles_color['background'] );
304+
$background_color = $global_styles_color['background'];
299305
}
300306
if ( ! empty( $global_styles_color['text'] ) ) {
301-
$close_button_color = esc_attr( $global_styles_color['text'] );
307+
$close_button_color = $global_styles_color['text'];
302308
}
303309
}
304310

305-
$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
306-
$close_button_label = esc_attr__( 'Close' );
307-
308-
$lightbox_html = <<<HTML
309-
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
310-
data-wp-bind--role="selectors.core.image.roleAttribute"
311-
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
312-
data-wp-class--initialized="context.core.image.initialized"
313-
data-wp-class--active="context.core.image.lightboxEnabled"
314-
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
315-
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
316-
data-wp-effect="effects.core.image.initLightbox"
317-
data-wp-on--keydown="actions.core.image.handleKeydown"
318-
data-wp-on--touchstart="actions.core.image.handleTouchStart"
319-
data-wp-on--touchmove="actions.core.image.handleTouchMove"
320-
data-wp-on--touchend="actions.core.image.handleTouchEnd"
321-
data-wp-on--click="actions.core.image.hideLightbox"
322-
tabindex="-1"
323-
>
324-
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
325-
$close_button_icon
326-
</button>
327-
<div class="lightbox-image-container">$initial_image_content</div>
328-
<div class="lightbox-image-container">$enlarged_image_content</div>
329-
<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
330-
</div>
331-
HTML;
311+
$lightbox_html = WP_HTML::render(
312+
<<<HTML
313+
<div class="wp-lightbox-overlay </%lightbox_animation_class>" tabindex="-1" ...interactivity>
314+
<button type="button" aria-label="</%close_label>" style="fill: </%close_button_color>" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
315+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
316+
</button>
317+
<div class="lightbox-image-container">$initial_image_content</div>
318+
<div class="lightbox-image-container">$enlarged_image_content</div>
319+
<div class="scrim" style="background-color: </%background_color>" aria-hidden="true"></div>
320+
</div>
321+
HTML,
322+
array(
323+
'background_color' => $background_color,
324+
'close_button_color' => $close_button_color,
325+
'close_label' => __( 'Close' ),
326+
'lightbox_animation_class' => $lightbox_animation,
327+
'interactivity' => array(
328+
'data-wp-bind--role' => 'selectors.core.image.roleAttribute',
329+
'data-wp-bind--aria-label' => 'selectors.core.image.dialogLabel',
330+
'data-wp-body' => '',
331+
'data-wp-class--initialized' => 'context.core.image.initialized',
332+
'data-wp-class--active' => 'context.core.image.lightboxEnabled',
333+
'data-wp-class--hideAnimationEnabled' => 'context.core.image.hideAnimationEnabled',
334+
'data-wp-bind--aria-modal' => 'selectors.core.image.ariaModal',
335+
'data-wp-effect' => 'effects.core.image.initLightbox',
336+
'data-wp-on--keydown' => 'actions.core.image.handleKeydown',
337+
'data-wp-on--touchstart' => 'actions.core.image.handleTouchStart',
338+
'data-wp-on--touchmove' => 'actions.core.image.handleTouchMove',
339+
'data-wp-on--touchend' => 'actions.core.image.handleTouchEnd',
340+
'data-wp-on--click' => 'actions.core.image.hideLightbox',
341+
),
342+
)
343+
);
332344

333345
return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
334346
}

‎src/wp-includes/html-api/class-wp-html.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class WP_HTML {
7373
* @access private
7474
*
7575
* @param string $template The HTML template.
76-
* @param string $args Array of key/value pairs providing substitue values for the placeholders.
76+
* @param array $args Array of key/value pairs providing substitue values for the placeholders.
7777
* @return string The rendered HTML.
7878
*/
7979
public static function render( $template, $args ) {

0 commit comments

Comments
 (0)