Experiment: Add lightbox to Image block using directives

docs/reference-guides/core-blocks.md

@@ -339,7 +339,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 -	**Name:** core/image
 -	**Category:** media
 -	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone)
--	**Attributes:** align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
+-	**Attributes:** align, alt, caption, enableLightbox, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
 
 ## Latest Comments
 

lib/experimental/interactivity-api/script-loader.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers interactivity runtime and vendor scripts to use with interactive blocks.
+ *
+ * @param WP_Scripts $scripts WP_Scripts instance.
+ */
+function gutenberg_register_interactivity_scripts( $scripts ) {
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-runtime',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/interactivity.min.js'
+		),
+		array( 'wp-interactivity-vendors' )
+	);
+
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-vendors',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/vendors.min.js'
+		)
+	);
+}
+add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 );
+
+/**
+ * Adds the "defer" attribute to all the interactivity script tags.
+ *
+ * @param string $tag    The generated script tag.
+ * @param string $handle The script's registered handle.
+ *
+ * @return string The modified script tag.
+ */
+function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
+	if ( 0 === strpos( $handle, 'wp-interactivity-' ) ) {
+		$p = new WP_HTML_Tag_Processor( $tag );
+		$p->next_tag( array( 'tag' => 'script' ) );
+		$p->set_attribute( 'defer', true );
+		return $p->get_updated_html();
+	}
+	return $tag;
+}
+add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 );

lib/load.php

@@ -97,6 +97,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/block-editor-settings.php';
 require __DIR__ . '/experimental/blocks.php';
+require __DIR__ . '/experimental/interactivity-api/script-loader.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';

package.json

@@ -87,6 +87,8 @@
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
+		"deepsignal": "1.3.0",
+		"preact": "10.13.2",
 		"wicg-inert": "3.1.2"
 	},
 	"devDependencies": {

packages/block-library/package.json

@@ -27,10 +27,12 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js"
+		"{src,build,build-module}/*/init.js",
+		"{src,build,build-module}/utils/interactivity/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@preact/signals": "^1.1.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/autop": "file:../autop",
@@ -63,12 +65,14 @@
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepsignal": "^1.3.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
+		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {

packages/block-library/src/image/block.json

@@ -80,6 +80,9 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
+		},
+		"enableLightbox": {
+			"type": "boolean"
 		}
 	},
 	"supports": {

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

@@ -111,6 +111,7 @@ export function ImageEdit( {
 		width,
 		height,
 		sizeSlug,
+		enableLightbox = true,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -242,6 +243,7 @@ export function ImageEdit( {
 			...mediaAttributes,
 			...additionalAttributes,
 			linkDestination,
+			enableLightbox,
 		} );
 	}
 

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

@@ -15,6 +15,8 @@ import {
 	TextareaControl,
 	TextControl,
 	ToolbarButton,
+	ToggleControl,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch, usePrevious } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -96,6 +98,7 @@ export default function Image( {
 		height,
 		linkTarget,
 		sizeSlug,
+		enableLightbox,
 	} = attributes;
 	const imageRef = useRef();
 	const prevCaption = usePrevious( caption );
@@ -458,6 +461,24 @@ export default function Image( {
 						</>
 					}
 				/>
+				<Heading
+					style={ {
+						textTransform: 'uppercase',
+						fontWeight: '500',
+						fontSize: '11px',
+					} }
+				>
+					Behaviors
+				</Heading>
+				<ToggleControl
+					label="Lightbox"
+					checked={ enableLightbox }
+					onChange={ () => {
+						setAttributes( {
+							enableLightbox: ! enableLightbox,
+						} );
+					} }
+				/>
 			</InspectorControls>
 		</>
 	);