@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/src/form-submit-button/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/form-submit-button/save.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+	return (
+		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+export default Save;

package/src/form-submit-button/style.scss

@@ -0,0 +1,3 @@
+.wp-block-form-submit-wrapper {
+	margin-bottom: 0.5em;
+}

package/src/freeform/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic block converts content into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>I'm classic!</p>
+<!-- /wp:paragraph -->"
+`;

package/src/freeform/test/index.native.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+const CLASSIC_BLOCK_HTML = `<p>I'm classic!</p>`;
+const DEFAULT_EDITOR_CAPABILITIES = {
+	unsupportedBlockEditor: true,
+	canEnableUnsupportedBlockEditor: true,
+};
+
+setupCoreBlocks();
+
+describe( 'Classic block', () => {
+	it( 'displays option to edit using web editor', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
+	} );
+
+	it( 'converts content into blocks', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Convert to blocks' );
+		expect( actionButton ).toBeVisible();
+
+		fireEvent.press( actionButton );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/group/block.json

@@ -24,7 +24,6 @@
 		"__experimentalOnEnter": true,
 		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
-		"__experimentalMetadata": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"ariaLabel": true,

package/src/group/edit.js

@@ -7,7 +7,6 @@ import {
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
@@ -98,11 +97,7 @@ function GroupEdit( {
 	} = attributes;
 
 	// Layout settings.
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
-	const { type = 'default' } = usedLayout;
+	const { type = 'default' } = layout;
 	const layoutSupportEnabled =
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
@@ -112,7 +107,7 @@ function GroupEdit( {
 	} );
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
-		usedLayoutType: usedLayout?.type,
+		usedLayoutType: type,
 		hasInnerBlocks,
 	} );
 

package/src/heading/index.js

@@ -29,10 +29,12 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const { content, level } = attributes;
 
+		const customName = attributes?.metadata?.name;
+
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && content ) {
-			return content;
+		if ( context === 'list-view' && ( customName || content ) ) {
+			return attributes?.metadata?.name || content;
 		}
 
 		if ( context === 'accessibility' ) {

package/src/html/preview.js

@@ -22,12 +22,17 @@ const DEFAULT_STYLES = `
 `;
 
 export default function HTMLEditPreview( { content, isSelected } ) {
-	const settingStyles = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()?.styles;
-	}, [] );
+	const settingStyles = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().styles
+	);
 
 	const styles = useMemo(
-		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		() => [
+			DEFAULT_STYLES,
+			...transformStyles(
+				settingStyles.filter( ( style ) => style.css )
+			),
+		],
 		[ settingStyles ]
 	);
 

package/src/image/image.js

@@ -24,7 +24,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
-	useSetting,
+	useSettings,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
@@ -83,6 +83,11 @@ const scaleOptions = [
 	},
 ];
 
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
 export default function Image( {
 	temporaryURL,
 	attributes,
@@ -369,7 +374,7 @@ export default function Image( {
 		availableUnits: [ 'px' ],
 	} );
 
-	const lightboxSetting = useSetting( 'lightbox' );
+	const [ lightboxSetting ] = useSettings( 'lightbox' );
 
 	const showLightboxToggle =
 		!! lightbox || lightboxSetting?.allowEditing === true;
@@ -377,6 +382,8 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
+	const lightboxToggleDisabled = linkDestination !== 'none';
+
 	const dimensionsControl = (
 		<DimensionsTool
 			value={ { width, height, scale, aspectRatio } }
@@ -541,20 +548,28 @@ export default function Image( {
 					{ showLightboxToggle && (
 						<ToolsPanelItem
 							hasValue={ () => !! lightbox }
-							label={ __( 'Expand on Click' ) }
+							label={ __( 'Expand on click' ) }
 							onDeselect={ () => {
 								setAttributes( { lightbox: undefined } );
 							} }
 							isShownByDefault={ true }
 						>
 							<ToggleControl
-								label={ __( 'Expand on Click' ) }
+								label={ __( 'Expand on click' ) }
 								checked={ lightboxChecked }
 								onChange={ ( newValue ) => {
 									setAttributes( {
 										lightbox: { enabled: newValue },
 									} );
 								} }
+								disabled={ lightboxToggleDisabled }
+								help={
+									lightboxToggleDisabled
+										? __(
+												'“Expand on click” scales the image up, and can’t be combined with a link.'
+										  )
+										: ''
+								}
 							/>
 						</ToolsPanelItem>
 					) }
@@ -715,7 +730,6 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-
 		img = (
 			<ResizableBox
 				style={ {
@@ -774,7 +788,14 @@ export default function Image( {
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
-			{ img }
+			{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
+			{ !! href ? (
+				<a href={ href } { ...disabledClickProps }>
+					{ img }
+				</a>
+			) : (
+				img
+			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText

package/src/image/index.php

@@ -9,17 +9,20 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array    $attributes The block attributes.
- * @param  string   $content    The block content.
- * @param  WP_Block $block      The block object.
- * @return string Returns the block content with the data-id attribute added.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content, $block ) {
+	if ( false === stripos( $content, '<img' ) ) {
+		return '';
+	}
 
 	$processor = new WP_HTML_Tag_Processor( $content );
-	$processor->next_tag( 'img' );
 
-	if ( $processor->get_attribute( 'src' ) === null ) {
+	if ( ! $processor->next_tag( 'img' ) || null === $processor->get_attribute( 'src' ) ) {
 		return '';
 	}
 
@@ -31,57 +34,60 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
-	$lightbox_enabled  = false;
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
-	// If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered.
-	if ( isset( $lightbox_settings ) && 'none' === $link_destination ) {
+	$view_js_file_handle = 'wp-block-image-view';
+	$script_handles      = $block->block_type->view_script_handles;
 
-		if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) {
-			$lightbox_enabled = true;
-		}
-	}
-
-	// If at least one block in the page has the lightbox, mark the block type as interactive.
-	if ( $lightbox_enabled ) {
+	/*
+	 * If the lightbox is enabled and the image is not linked, add the filter
+	 * and the JavaScript view file.
+	 */
+	if (
+		isset( $lightbox_settings ) &&
+		'none' === $link_destination &&
+		isset( $lightbox_settings['enabled'] ) &&
+		true === $lightbox_settings['enabled']
+	) {
 		$block->block_type->supports['interactivity'] = true;
-	}
 
-	// Determine whether the view script should be enqueued or not.
-	$view_js_file = 'wp-block-image-view';
-	if ( ! wp_script_is( $view_js_file ) ) {
-		$script_handles = $block->block_type->view_script_handles;
-
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( ! $lightbox_enabled && in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
 		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $lightbox_enabled && ! in_array( $view_js_file, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
-		}
-	}
 
-	if ( $lightbox_enabled ) {
-		// This render needs to happen in a filter with priority 15 to ensure that it
-		// runs after the duotone filter and that duotone styles are applied to the image
-		// in the lightbox. We also need to ensure that the lightbox works with any plugins
-		// that might use filters as well. We can consider removing this in the future if the
-		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		/*
+		 * This render needs to happen in a filter with priority 15 to ensure
+		 * that it runs after the duotone filter and that duotone styles are
+		 * applied to the image in the lightbox. We also need to ensure that the
+		 * lightbox works with any plugins that might use filters as well. We
+		 * can consider removing this in the future if the way the blocks are
+		 * rendered changes, or if a new kind of filter is introduced.
+		 */
 		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
+	} else {
+		/*
+		 * Remove the filter and the JavaScript view file if previously added by
+		 * other Image blocks.
+		 */
+		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
+		}
 	}
 
 	return $processor->get_updated_html();
 }
 
 /**
- * Add the lightboxEnabled flag to the block data.
+ * Adds the lightboxEnabled flag to the block data.
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
- * @param  array $block Block data.
- * @return array        Filtered block data.
+ * @param array $block Block data.
+ *
+ * @return array Filtered block data.
  */
 function block_core_image_get_lightbox_settings( $block ) {
 	// Get the lightbox setting from the block attributes.
@@ -113,43 +119,61 @@ function block_core_image_get_lightbox_settings( $block ) {
 }
 
 /**
- * Add the directives and layout needed for the lightbox behavior.
+ * Adds the directives and layout needed for the lightbox behavior.
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
  *
- * @param  string $block_content        Rendered block content.
- * @param  array  $block                Block object.
- * @return string                Filtered block content.
+ * @return string Filtered block content.
  */
 function block_core_image_render_lightbox( $block_content, $block ) {
+	/*
+	 * If it's not possible that an IMG element exists then return the given
+	 * block content as-is. It may be that there's no actual image in the block
+	 * or it could be that another plugin already modified this HTML.
+	 */
+	if ( false === stripos( $block_content, '<img' ) ) {
+		return $block_content;
+	}
+
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 
 	$aria_label = __( 'Enlarge image' );
 
+	/*
+	 * If there's definitely no IMG element in the block then return the given
+	 * block content as-is. There's nothing that this code can knowingly modify
+	 * to add the lightbox behavior.
+	 */
+	if ( ! $processor->next_tag( 'img' ) ) {
+		return $block_content;
+	}
+
 	$alt_attribute = $processor->get_attribute( 'alt' );
 
-	if ( null !== $alt_attribute ) {
+	// An empty alt attribute `alt=""` is valid for decorative images.
+	if ( is_string( $alt_attribute ) ) {
 		$alt_attribute = trim( $alt_attribute );
 	}
 
+	// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
 	if ( $alt_attribute ) {
 		/* translators: %s: Image alt text. */
 		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
 	}
-	$content = $processor->get_updated_html();
 
 	// Currently, we are only enabling the zoom animation.
 	$lightbox_animation = 'zoom';
 
-	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
-	$z = new WP_HTML_Tag_Processor( $content );
-	$z->next_tag( 'img' );
-
+	// Note: We want to store the `src` in the context so we
+	// can set it dynamically when the lightbox is opened.
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
-		$img_width        = $img_metadata['width'];
-		$img_height       = $img_metadata['height'];
+		$img_width        = $img_metadata['width'] ?? 'none';
+		$img_height       = $img_metadata['height'] ?? 'none';
 	} else {
-		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_uploaded_src = $processor->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -160,7 +184,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		$scale_attr = false;
 	}
 
-	$w = new WP_HTML_Tag_Processor( $content );
+	$w = new WP_HTML_Tag_Processor( $block_content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
 	$w->set_attribute( 'data-wp-interactive', true );
@@ -180,7 +204,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 						"imageCurrentSrc": "",
 						"targetWidth": "%s",
 						"targetHeight": "%s",
-						"scaleAttr": "%s"
+						"scaleAttr": "%s",
+						"dialogLabel": "%s"
 					}
 				}
 			}',
@@ -188,31 +213,42 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			$img_uploaded_src,
 			$img_width,
 			$img_height,
-			$scale_attr
+			$scale_attr,
+			__( 'Enlarged image' )
 		)
 	);
 	$w->next_tag( 'img' );
-	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
+	$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	// We need to set an event callback on the `img` specifically
+	// because the `figure` element can also contain a caption, and
+	// we don't want to trigger the lightbox when the caption is clicked.
+	$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
+	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
-	// Wrap the image in the body content with a button.
+	// Add a button alongside image in the body content.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
-	$button       =
-				'<button
-					type="button"
-					aria-haspopup="dialog"
-					aria-label="' . esc_attr( $aria_label ) . '"
-					data-wp-on--click="actions.core.image.showLightbox"
-					data-wp-style--width="context.core.image.imageButtonWidth"
-					data-wp-style--height="context.core.image.imageButtonHeight"
-					data-wp-style--left="context.core.image.imageButtonLeft"
-					data-wp-style--top="context.core.image.imageButtonTop"
-				>
-				</button>'
-				. $img[0];
+
+	$button =
+		$img[0]
+		. '<button
+			class="lightbox-trigger"
+			type="button"
+			aria-haspopup="dialog"
+			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-on--click="actions.core.image.showLightbox"
+			data-wp-style--right="context.core.image.imageButtonRight"
+			data-wp-style--top="context.core.image.imageButtonTop"
+			style="background: #000"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
+				<Path stroke="#FFFFFF" d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
+			</svg>
+		</button>';
+
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 	// We need both a responsive image and an enlarged image to animate
@@ -220,7 +256,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// image is a copy of the one in the body, which animates immediately
 	// as the lightbox is opened, while the enlarged one is a full-sized
 	// version that will likely still be loading as the animation begins.
-	$m = new WP_HTML_Tag_Processor( $content );
+	$m = new WP_HTML_Tag_Processor( $block_content );
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
@@ -236,7 +272,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
-	$q = new WP_HTML_Tag_Processor( $content );
+	$q = new WP_HTML_Tag_Processor( $block_content );
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
@@ -252,37 +288,46 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$enlarged_image_content = $q->get_updated_html();
 
-	$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
+	// If the current theme does NOT have a `theme.json`, or the colors are not defined,
+	// we need to set the background color & close button color to some default values
+	// because we 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'] );
+		}
+	}
 
 	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" 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>';
-	$close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
-	$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' );
 	$close_button_label = esc_attr__( 'Close' );
 
 	$lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
             data-wp-bind--role="selectors.core.image.roleAttribute"
-            aria-label="$dialog_label"
+            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
             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-hidden="!context.core.image.lightboxEnabled"
-            aria-hidden="true"
-            data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
-            aria-modal="false"
+            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"
+            tabindex="-1"
             >
                 <button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
                     $close_button_icon
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>
-				<div class="lightbox-image-container">$enlarged_image_content</div>
-                <div class="scrim" style="background-color: $background_color"></div>
+                <div class="lightbox-image-container">$enlarged_image_content</div>
+                <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
         </div>
 HTML;
 
@@ -290,7 +335,7 @@ HTML;
 }
 
 /**
- * Ensure that the view script has the `wp-interactivity` dependency.
+ * Ensures that the view script has the `wp-interactivity` dependency.
  *
  * @since 6.4.0
  *