@wordpress/block-library 8.18.0 → 8.19.0

package/src/image/block.json

@@ -33,6 +33,12 @@
 			"selector": "figcaption",
 			"__experimentalRole": "content"
 		},
+		"lightbox": {
+			"type": "object",
+			"enabled": {
+				"type": "boolean"
+			}
+		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
@@ -90,9 +96,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"behaviors": {
-			"lightbox": true
-		},
 		"color": {
 			"text": false,
 			"background": false
@@ -128,5 +131,5 @@
 	],
 	"editorStyle": "wp-block-image-editor",
 	"style": "wp-block-image",
-	"viewScript": "file:./view-interactivity.min.js"
+	"viewScript": "file:./view.min.js"
 }

package/src/image/deprecated.js

@@ -632,9 +632,6 @@ const v6 = {
 	},
 	supports: {
 		anchor: true,
-		behaviors: {
-			lightbox: true,
-		},
 		color: {
 			text: false,
 			background: false,
@@ -830,9 +827,6 @@ const v7 = {
 	},
 	supports: {
 		anchor: true,
-		behaviors: {
-			lightbox: true,
-		},
 		color: {
 			text: false,
 			background: false,
@@ -947,4 +941,213 @@ const v7 = {
 	},
 };
 
-export default [ v7, v6, v5, v4, v3, v2, v1 ];
+const v8 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		behaviors: {
+			type: 'object',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			__experimentalRole: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			__experimentalRole: 'content',
+		},
+		width: {
+			type: 'string',
+		},
+		height: {
+			type: 'string',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+	},
+	migrate( { width, height, ...attributes } ) {
+		const {
+			behaviors: {
+				lightbox: { enabled },
+			},
+		} = attributes;
+		const newAttributes = {
+			...attributes,
+			lightbox: {
+				enabled,
+			},
+		};
+		delete newAttributes.behaviors;
+		return newAttributes;
+	},
+	isEligible( attributes ) {
+		return !! attributes.behaviors;
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
+
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
+
+		const classes = classnames( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
+
+		const imageClasses = classnames( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					aspectRatio,
+					objectFit: scale,
+					width,
+					height,
+				} }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/image/edit.js

@@ -77,18 +77,18 @@ const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
 export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
 
 /**
- * Checks if WP generated default image size. Size generation is skipped
+ * Checks if WP generated the specified image size. Size generation is skipped
  * when the image is smaller than the said size.
  *
  * @param {Object} image
- * @param {string} defaultSize
+ * @param {string} size
  *
  * @return {boolean} Whether or not it has default image size.
  */
-function hasDefaultSize( image, defaultSize ) {
+function hasSize( image, size ) {
 	return (
-		'url' in ( image?.sizes?.[ defaultSize ] ?? {} ) ||
-		'source_url' in ( image?.media_details?.sizes?.[ defaultSize ] ?? {} )
+		'url' in ( image?.sizes?.[ size ] ?? {} ) ||
+		'source_url' in ( image?.media_details?.sizes?.[ size ] ?? {} )
 	);
 }
 
@@ -111,6 +111,8 @@ export function ImageEdit( {
 		width,
 		height,
 		sizeSlug,
+		aspectRatio,
+		scale,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -166,7 +168,16 @@ export function ImageEdit( {
 
 		setTemporaryURL();
 
-		let mediaAttributes = pickRelevantMediaFiles( media, imageDefaultSize );
+		// Try to use the previous selected image size if its available
+		// otherwise try the default image size or fallback to "full"
+		let newSize = 'full';
+		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
+			newSize = sizeSlug;
+		} else if ( hasSize( media, imageDefaultSize ) ) {
+			newSize = imageDefaultSize;
+		}
+
+		let mediaAttributes = pickRelevantMediaFiles( media, newSize );
 
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
@@ -180,11 +191,7 @@ export function ImageEdit( {
 		// Reset the dimension attributes if changing to a different image.
 		if ( ! media.id || media.id !== id ) {
 			additionalAttributes = {
-				// Fallback to size "full" if there's no default image size.
-				// It means the image is smaller, and the block will use a full-size URL.
-				sizeSlug: hasDefaultSize( media, imageDefaultSize )
-					? imageDefaultSize
-					: 'full',
+				sizeSlug: newSize,
 			};
 		} else {
 			// Keep the same url when selecting the same file, so "Resolution"
@@ -335,7 +342,16 @@ export function ImageEdit( {
 				instructions={ __(
 					'Upload an image file, pick one from your media library, or add one with a URL.'
 				) }
-				style={ isSelected ? undefined : borderProps.style }
+				style={ {
+					aspectRatio:
+						! ( width && height ) && aspectRatio
+							? aspectRatio
+							: undefined,
+					width: height && aspectRatio ? '100%' : width,
+					height: width && aspectRatio ? '100%' : height,
+					objectFit: scale,
+					...borderProps.style,
+				} }
 			>
 				{ content }
 			</Placeholder>
@@ -344,23 +360,21 @@ export function ImageEdit( {
 
 	return (
 		<figure { ...blockProps }>
-			{ ( temporaryURL || url ) && (
-				<Image
-					temporaryURL={ temporaryURL }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					isSelected={ isSelected }
-					insertBlocksAfter={ insertBlocksAfter }
-					onReplace={ onReplace }
-					onSelectImage={ onSelectImage }
-					onSelectURL={ onSelectURL }
-					onUploadError={ onUploadError }
-					containerRef={ ref }
-					context={ context }
-					clientId={ clientId }
-					blockEditingMode={ blockEditingMode }
-				/>
-			) }
+			<Image
+				temporaryURL={ temporaryURL }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				onReplace={ onReplace }
+				onSelectImage={ onSelectImage }
+				onSelectURL={ onSelectURL }
+				onUploadError={ onUploadError }
+				containerRef={ ref }
+				context={ context }
+				clientId={ clientId }
+				blockEditingMode={ blockEditingMode }
+			/>
 			{ ! url && blockEditingMode === 'default' && (
 				<BlockControls group="block">
 					<BlockAlignmentControl

package/src/image/image.js

@@ -7,6 +7,7 @@ import {
 	ResizableBox,
 	Spinner,
 	TextareaControl,
+	ToggleControl,
 	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
@@ -23,6 +24,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
+	useSetting,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
@@ -113,6 +115,7 @@ export default function Image( {
 		scale,
 		linkTarget,
 		sizeSlug,
+		lightbox,
 	} = attributes;
 
 	// The only supported unit is px, so we can parseInt to strip the px here.
@@ -171,6 +174,7 @@ export default function Image( {
 			},
 			[ clientId ]
 		);
+
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -365,6 +369,62 @@ export default function Image( {
 		availableUnits: [ 'px' ],
 	} );
 
+	const lightboxSetting = useSetting( 'lightbox' );
+
+	const showLightboxToggle =
+		lightboxSetting === true || lightboxSetting?.allowEditing === true;
+
+	const lightboxChecked =
+		lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled );
+
+	const dimensionsControl = (
+		<DimensionsTool
+			value={ { width, height, scale, aspectRatio } }
+			onChange={ ( {
+				width: newWidth,
+				height: newHeight,
+				scale: newScale,
+				aspectRatio: newAspectRatio,
+			} ) => {
+				// Rebuilding the object forces setting `undefined`
+				// for values that are removed since setAttributes
+				// doesn't do anything with keys that aren't set.
+				setAttributes( {
+					// CSS includes `height: auto`, but we need
+					// `width: auto` to fix the aspect ratio when
+					// only height is set due to the width and
+					// height attributes set via the server.
+					width: ! newWidth && newHeight ? 'auto' : newWidth,
+					height: newHeight,
+					scale: newScale,
+					aspectRatio: newAspectRatio,
+				} );
+			} }
+			defaultScale="cover"
+			defaultAspectRatio="auto"
+			scaleOptions={ scaleOptions }
+			unitsOptions={ dimensionsUnitsOptions }
+		/>
+	);
+
+	const resetAll = () => {
+		setAttributes( {
+			width: undefined,
+			height: undefined,
+			scale: undefined,
+			aspectRatio: undefined,
+			lightbox: undefined,
+		} );
+	};
+
+	const sizeControls = (
+		<InspectorControls>
+			<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
+				{ isResizable && dimensionsControl }
+			</ToolsPanel>
+		</InspectorControls>
+	);
+
 	const controls = (
 		<>
 			<BlockControls group="block">
@@ -443,17 +503,7 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () =>
-						setAttributes( {
-							width: undefined,
-							height: undefined,
-							scale: undefined,
-							aspectRatio: undefined,
-						} )
-					}
-				>
+				<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
 					{ ! multiImageSelection && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
@@ -482,43 +532,32 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable && (
-						<DimensionsTool
-							value={ { width, height, scale, aspectRatio } }
-							onChange={ ( {
-								width: newWidth,
-								height: newHeight,
-								scale: newScale,
-								aspectRatio: newAspectRatio,
-							} ) => {
-								// Rebuilding the object forces setting `undefined`
-								// for values that are removed since setAttributes
-								// doesn't do anything with keys that aren't set.
-								setAttributes( {
-									// CSS includes `height: auto`, but we need
-									// `width: auto` to fix the aspect ratio when
-									// only height is set due to the width and
-									// height attributes set via the server.
-									width:
-										! newWidth && newHeight
-											? 'auto'
-											: newWidth,
-									height: newHeight,
-									scale: newScale,
-									aspectRatio: newAspectRatio,
-								} );
-							} }
-							defaultScale="cover"
-							defaultAspectRatio="auto"
-							scaleOptions={ scaleOptions }
-							unitsOptions={ dimensionsUnitsOptions }
-						/>
-					) }
+					{ isResizable && dimensionsControl }
 					<ResolutionTool
 						value={ sizeSlug }
 						onChange={ updateImage }
 						options={ imageSizeOptions }
 					/>
+					{ showLightboxToggle && (
+						<ToolsPanelItem
+							hasValue={ () => !! lightbox }
+							label={ __( 'Expand on Click' ) }
+							onDeselect={ () => {
+								setAttributes( { lightbox: undefined } );
+							} }
+							isShownByDefault={ true }
+						>
+							<ToggleControl
+								label={ __( 'Expand on Click' ) }
+								checked={ lightboxChecked }
+								onChange={ ( newValue ) => {
+									setAttributes( {
+										lightbox: { enabled: newValue },
+									} );
+								} }
+							/>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
@@ -726,6 +765,10 @@ export default function Image( {
 		);
 	}
 
+	if ( ! url && ! temporaryURL ) {
+		return sizeControls;
+	}
+
 	return (
 		<>
 			{ /* Hide controls during upload to avoid component remount,