WordPress Version: 6.5
function block_core_image_print_lightbox_overlay()
{
$close_button_label = esc_attr__('Close');
// If the current theme does NOT have a `theme.json`, or the colors are not
// defined, it needs to set the background color & close button color to some
// default values because it can't get them from the Global Styles.
$background_color = '#fff';
$close_button_color = '#000';
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']);
}
if (!empty($global_styles_color['text'])) {
$close_button_color = esc_attr($global_styles_color['text']);
}
}
echo <<<HTML
\t\t<div
\t\t\tclass="wp-lightbox-overlay zoom"
\t\t\tdata-wp-interactive="core/image"
\t\t\tdata-wp-context='{}'
\t\t\tdata-wp-bind--role="state.roleAttribute"
\t\t\tdata-wp-bind--aria-label="state.currentImage.ariaLabel"
\t\t\tdata-wp-bind--aria-modal="state.ariaModal"
\t\t\tdata-wp-class--active="state.overlayEnabled"
\t\t\tdata-wp-class--show-closing-animation="state.showClosingAnimation"
\t\t\tdata-wp-watch="callbacks.setOverlayFocus"
\t\t\tdata-wp-on--keydown="actions.handleKeydown"
\t\t\tdata-wp-on--touchstart="actions.handleTouchStart"
\t\t\tdata-wp-on--touchmove="actions.handleTouchMove"
\t\t\tdata-wp-on--touchend="actions.handleTouchEnd"
\t\t\tdata-wp-on--click="actions.hideLightbox"
\t\t\tdata-wp-on-window--resize="callbacks.setOverlayStyles"
\t\t\tdata-wp-on-window--scroll="actions.handleScroll"
\t\t\ttabindex="-1"
\t\t\t>
\t\t\t\t<button type="button" aria-label="{$close_button_label}" style="fill: {$close_button_color}" class="close-button">
\t\t\t\t\t<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>
\t\t\t\t</button>
\t\t\t\t<div class="lightbox-image-container">
\t\t\t\t\t<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
\t\t\t\t\t\t<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
\t\t\t\t\t</figure>
\t\t\t\t</div>
\t\t\t\t<div class="lightbox-image-container">
\t\t\t\t\t<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
\t\t\t\t\t\t<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
\t\t\t\t\t</figure>
\t\t\t\t</div>
\t\t\t\t<div class="scrim" style="background-color: {$background_color}" aria-hidden="true"></div>
\t\t\t\t<style data-wp-text="state.overlayStyles"></style>
\t\t</div>
HTML;
}