Image: Add lightbox using directives.

lib/experimental/interactivity-api/blocks.php

@@ -216,15 +216,15 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
 add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
 
 /**
- * Replaces view script for the File and Navigation blocks with version using Interactivity API.
+ * Replaces view script for the File, Navigation, and Image blocks with version using Interactivity API.
  *
  * @param array $metadata Block metadata as read in via block.json.
  *
  * @return array Filtered block type metadata.
  */
 function gutenberg_block_update_interactive_view_script( $metadata ) {
 	if (
-		in_array( $metadata['name'], array( 'core/file', 'core/navigation' ), true ) &&
+		in_array( $metadata['name'], array( 'core/file', 'core/navigation', 'core/image' ), true ) &&
 		str_contains( $metadata['file'], 'build/block-library/blocks' )
 	) {
 		$metadata['viewScript'] = array( 'file:./interactivity.min.js' );

packages/block-editor/src/hooks/behaviors.js

@@ -88,7 +88,7 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 							} );
 						} }
 						hideCancelButton={ true }
-						help={ __( 'Add behaviors' ) }
+						help={ __( 'Add behaviors.' ) }
 						size="__unstable-large"
 					/>
 				</InspectorControls>

packages/block-library/src/image/index.php

@@ -14,6 +14,7 @@
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
+
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$processor->next_tag( 'img' );
 
@@ -27,16 +28,88 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
+	}
+
+	$link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+
+	// Get the lightbox setting from the block attributes.
+	if ( isset( $attributes['behaviors']['lightbox'] ) ) {
+		$lightbox = $attributes['behaviors']['lightbox'];
+		// If the lightbox setting is not set in the block attributes, get it from the theme.json file.
+	} else {
+		$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();
+		if ( isset( $theme_data['behaviors']['blocks']['core/image']['lightbox'] ) ) {
+			$lightbox = $theme_data['behaviors']['blocks']['core/image']['lightbox'];
+		} else {
+			$lightbox = false;
+		}
+	}
+
+	$experiments = get_option( 'gutenberg-experiments' );
+
+	if ( ! empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) && 'none' === $link_destination && $lightbox ) {
+
+		$aria_label = 'Open image lightbox';
+		if ( $processor->get_attribute( 'alt' ) ) {
+			$aria_label .= ' : ' . $processor->get_attribute( 'alt' );
+		}
 		$content = $processor->get_updated_html();
+
+		// Wrap the image in the body content with a button.
+		$img = null;
+		preg_match( '/<img[^>]+>/', $content, $img );
+		$button       = '<div class="img-container">
+			 					<button aria-haspopup="dialog" aria-label="' . $aria_label . '" data-wp-on.click="actions.core.image.showLightbox"></button>'
+									. $img[0] .
+								'</div>';
+		$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
+
+		// For the modal, set an ID on the image to be used for an aria-labelledby attribute.
+		$modal_content = new WP_HTML_Tag_Processor( $content );
+		$modal_content->next_tag( 'img' );
+		$image_lightbox_id = $modal_content->get_attribute( 'class' ) . '-lightbox';
+		$modal_content->set_attribute( 'id', $image_lightbox_id );
+		$modal_content = $modal_content->get_updated_html();
+
+		$background_color  = wp_get_global_styles( array( 'color', 'background' ) );
+		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" 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>';
+
+		return
+			<<<HTML
+				<div class="wp-lightbox-container"
+					data-wp-island
+					data-wp-context='{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }'>
+						$body_content
+						<div data-wp-body="" class="wp-lightbox-overlay"
+							data-wp-bind.role="selectors.core.image.roleAttribute"
+							aria-labelledby="$image_lightbox_id"
+							data-wp-class.initialized="context.core.image.initialized"
+							data-wp-class.active="context.core.image.lightboxEnabled"
+							data-wp-bind.aria-hidden="!context.core.image.lightboxEnabled"
+							data-wp-bind.aria-modal="context.core.image.lightboxEnabled"
+							data-wp-effect="effects.core.image.initLightbox"
+							data-wp-on.keydown="actions.core.image.handleKeydown"
+							data-wp-on.mousewheel="actions.core.image.hideLightbox"
+							data-wp-on.click="actions.core.image.hideLightbox"
+							>
+								<button aria-label="Close lightbox" class="close-button" data-wp-on.click="actions.core.image.hideLightbox">
+									$close_button_icon
+								</button>
+								$modal_content
+								<div class="scrim" style="background-color: $background_color"></div>
+						</div>
+				</div>
+HTML;
 	}
-	return $content;
-}
 
+	return $processor->get_updated_html();
+}
 
 /**
  * Registers the `core/image` block on server.
  */
 function register_block_core_image() {
+
 	register_block_type_from_metadata(
 		__DIR__ . '/image',
 		array(

packages/block-library/src/image/interactivity.js

@@ -0,0 +1,113 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	actions: {
+		core: {
+			image: {
+				showLightbox: ( { context } ) => {
+					context.core.image.initialized = true;
+					context.core.image.lightboxEnabled = true;
+					context.core.image.lastFocusedElement =
+						window.document.activeElement;
+					context.core.image.scrollPosition = window.scrollY;
+					document.documentElement.classList.add(
+						'has-lightbox-open'
+					);
+				},
+				hideLightbox: async ( { context, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						// If scrolling, wait a moment before closing the lightbox.
+						if (
+							event.type === 'mousewheel' &&
+							Math.abs(
+								window.scrollY -
+									context.core.image.scrollPosition
+							) < 5
+						) {
+							return;
+						}
+						document.documentElement.classList.remove(
+							'has-lightbox-open'
+						);
+
+						context.core.image.lightboxEnabled = false;
+						context.core.image.lastFocusedElement.focus();
+					}
+				},
+				handleKeydown: ( { context, actions, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						if ( event.key === 'Tab' || event.keyCode === 9 ) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.firstFocusableElement.focus();
+							}
+						}
+
+						if ( event.key === 'Escape' || event.keyCode === 27 ) {
+							actions.core.image.hideLightbox( {
+								context,
+								event,
+							} );
+						}
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			image: {
+				roleAttribute: ( { context } ) => {
+					return context.core.image.lightboxEnabled ? 'dialog' : '';
+				},
+			},
+		},
+	},
+	effects: {
+		core: {
+			image: {
+				initLightbox: async ( { context, ref } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.image.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.image.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+
+						ref.querySelector( '.close-button' ).focus();
+					}
+				},
+			},
+		},
+	},
+} );

packages/block-library/src/image/style.scss

@@ -151,3 +151,116 @@
 .wp-block-image figure {
 	margin: 0;
 }
+
+.wp-lightbox-container {
+
+	.img-container {
+		position: relative;
+	}
+
+	button {
+		border: none;
+		background: none;
+		cursor: zoom-in;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 100;
+
+		&:focus-visible {
+			outline: 5px auto #212121;
+			outline: 5px auto -webkit-focus-ring-color;
+			outline-offset: 5px;
+		}
+	}
+}
+
+.wp-lightbox-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100000;
+	overflow: hidden;
+	width: 100vw;
+	height: 100vh;
+	visibility: hidden;
+
+	.close-button {
+		font-size: 40px;
+		position: absolute;
+		top: 20px;
+		right: 20px;
+		cursor: pointer;
+		z-index: 5000000;
+	}
+
+	.wp-block-image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		z-index: 3000000;
+		position: absolute;
+		flex-direction: column;
+	}
+
+	button {
+		border: none;
+		background: none;
+	}
+
+	.scrim {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 2000000;
+		background-color: rgb(255, 255, 255);
+		opacity: 0.9;
+	}
+
+	&.initialized {
+		animation: both turn-off-visibility 300ms;
+
+		img {
+			animation: both turn-off-visibility 250ms;
+		}
+
+		&.active {
+			visibility: visible;
+			animation: both turn-on-visibility 250ms;
+
+			img {
+				animation: both turn-on-visibility 300ms;
+			}
+		}
+	}
+}
+
+@keyframes turn-on-visibility {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes turn-off-visibility {
+	0% {
+		opacity: 1;
+		visibility: visible;
+	}
+	99% {
+		opacity: 0;
+		visibility: visible;
+	}
+	100% {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+html.has-lightbox-open {
+	overflow: hidden;
+}

packages/block-library/src/utils/interactivity/directives.js

@@ -3,6 +3,10 @@
  */
 import { useContext, useMemo, useEffect } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
+/**
+ * Internal dependencies
+ */
+import { createPortal } from './portals.js';
 
 /**
  * Internal dependencies
@@ -53,6 +57,16 @@ export default () => {
 		{ priority: 5 }
 	);
 
+	// data-wp-body
+	directive( 'body', ( { props: { children }, context: inherited } ) => {
+		const { Provider } = inherited;
+		const inheritedValue = useContext( inherited );
+		return createPortal(
+			<Provider value={ inheritedValue }>{ children }</Provider>,
+			document.body
+		);
+	} );
+
 	// data-wp-effect.[name]
 	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
 		const contextValue = useContext( context );