@wordpress/block-library 9.3.0 → 9.5.0

package/src/group/index.js

@@ -22,56 +22,53 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		innerBlocks: [
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#cf2e2e',
-					fontSize: 'large',
-					content: __( 'One.' ),
-				},
+		attributes: {
+			layout: {
+				type: 'constrained',
+				justifyContent: 'center',
 			},
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#ff6900',
-					fontSize: 'large',
-					content: __( 'Two.' ),
+			style: {
+				spacing: {
+					padding: {
+						top: '4em',
+						right: '3em',
+						bottom: '4em',
+						left: '3em',
+					},
 				},
 			},
+		},
+		innerBlocks: [
 			{
-				name: 'core/paragraph',
+				name: 'core/heading',
 				attributes: {
-					customTextColor: '#fcb900',
-					fontSize: 'large',
-					content: __( 'Three.' ),
+					content: __( 'La Mancha' ),
+					textAlign: 'center',
 				},
 			},
 			{
 				name: 'core/paragraph',
 				attributes: {
-					customTextColor: '#00d084',
-					fontSize: 'large',
-					content: __( 'Four.' ),
+					align: 'center',
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/spacer',
 				attributes: {
-					customTextColor: '#0693e3',
-					fontSize: 'large',
-					content: __( 'Five.' ),
+					height: '10px',
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/button',
 				attributes: {
-					customTextColor: '#9b51e0',
-					fontSize: 'large',
-					content: __( 'Six.' ),
+					text: __( 'Read more' ),
 				},
 			},
 		],
+		viewportWidth: 600,
 	},
 	transforms,
 	edit,

package/src/group/variations.js

@@ -4,6 +4,59 @@
 import { __, _x } from '@wordpress/i18n';
 import { group, row, stack, grid } from '@wordpress/icons';
 
+const example = {
+	innerBlocks: [
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#cf2e2e',
+				fontSize: 'large',
+				content: __( 'One.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#ff6900',
+				fontSize: 'large',
+				content: __( 'Two.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#fcb900',
+				fontSize: 'large',
+				content: __( 'Three.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#00d084',
+				fontSize: 'large',
+				content: __( 'Four.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#0693e3',
+				fontSize: 'large',
+				content: __( 'Five.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#9b51e0',
+				fontSize: 'large',
+				content: __( 'Six.' ),
+			},
+		},
+	],
+};
+
 const variations = [
 	{
 		name: 'group',
@@ -30,6 +83,7 @@ const variations = [
 			( ! blockAttributes.layout?.orientation ||
 				blockAttributes.layout?.orientation === 'horizontal' ),
 		icon: row,
+		example,
 	},
 	{
 		name: 'group-stack',
@@ -41,6 +95,7 @@ const variations = [
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
+		example,
 	},
 	{
 		name: 'group-grid',
@@ -51,6 +106,7 @@ const variations = [
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'grid',
 		icon: grid,
+		example,
 	},
 ];
 

package/src/heading/block.json

@@ -21,6 +21,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"placeholder": {
 			"type": "string"
 		}
@@ -30,6 +33,18 @@
 		"anchor": true,
 		"className": true,
 		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/heading/edit.js

@@ -32,7 +32,8 @@ function HeadingEdit( {
 	style,
 	clientId,
 } ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const { textAlign, content, level, levelOptions, placeholder, anchor } =
+		attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
 		className: clsx( {
@@ -95,6 +96,7 @@ function HeadingEdit( {
 				<BlockControls group="block">
 					<HeadingLevelDropdown
 						value={ level }
+						options={ levelOptions }
 						onChange={ ( newLevel ) =>
 							setAttributes( { level: newLevel } )
 						}

package/src/heading/index.js

@@ -24,6 +24,7 @@ export const settings = {
 		attributes: {
 			content: __( 'Code is Poetry' ),
 			level: 2,
+			textAlign: 'center',
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {

package/src/image/block.json

@@ -106,6 +106,9 @@
 		"filter": {
 			"duotone": true
 		},
+		"spacing": {
+			"margin": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,

package/src/image/edit.js

@@ -308,7 +308,7 @@ export function ImageEdit( {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue( {
+					! blockBindingsSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: metadata?.bindings?.url?.args,

package/src/image/editor.scss

@@ -3,7 +3,7 @@
 .wp-block-image.wp-block-image {
 
 	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
+	&.is-selected .block-editor-media-placeholder {
 		// Block UI appearance.
 		color: $gray-900;
 		background-color: $white;
@@ -67,6 +67,23 @@ figure.wp-block-image:not(.wp-block) {
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		margin: 0;
+	}
+}
+
+// Shown while image is being uploded but cannot be previewed.
+.wp-block-image__placeholder {
+	aspect-ratio: 4 / 3;
+
+	// Make placeholder background white so that you can see the spinner on top of it.
+	&.has-illustration::before {
+		background: $white;
+		opacity: 0.8;
+	}
+
+	// Reduce opacity of diagonal stroke so that it doesn't obscure the spinner.
+	.components-placeholder__illustration {
+		opacity: 0.1;
 	}
 }
 

package/src/image/image.js

@@ -14,6 +14,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
+	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -176,6 +177,7 @@ export default function Image( {
 	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
+	const [ hasImageErrored, setHasImageErrored ] = useState( false );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
@@ -245,15 +247,24 @@ export default function Image( {
 	}
 
 	function onImageError() {
+		setHasImageErrored( true );
+
 		// Check if there's an embed block that handles this URL, e.g., instagram URL.
 		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-
 		if ( undefined !== embedBlock ) {
 			onReplace( embedBlock );
 		}
 	}
 
+	function onImageLoad( event ) {
+		setHasImageErrored( false );
+		setLoadedNaturalSize( {
+			loadedNaturalWidth: event.target?.naturalWidth,
+			loadedNaturalHeight: event.target?.naturalHeight,
+		} );
+	}
+
 	function onSetHref( props ) {
 		setAttributes( props );
 	}
@@ -479,7 +490,7 @@ export default function Image( {
 			return {
 				lockUrlControls:
 					!! urlBinding &&
-					! urlBindingSource?.canUserEditValue( {
+					! urlBindingSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: urlBinding?.args,
@@ -494,7 +505,7 @@ export default function Image( {
 					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
-					! altBindingSource?.canUserEditValue( {
+					! altBindingSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: altBinding?.args,
@@ -508,7 +519,7 @@ export default function Image( {
 					: __( 'Connected to dynamic data' ),
 				lockTitleControls:
 					!! titleBinding &&
-					! titleBindingSource?.canUserEditValue( {
+					! titleBindingSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: titleBinding?.args,
@@ -815,37 +826,46 @@ export default function Image( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
-	let img = (
-		// Disable reason: Image itself is not meant to be interactive, but
-		// should direct focus to block.
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-		<>
-			<img
-				src={ temporaryURL || url }
-				alt={ defaultedAlt }
-				onError={ () => onImageError() }
-				onLoad={ ( event ) => {
-					setLoadedNaturalSize( {
-						loadedNaturalWidth: event.target?.naturalWidth,
-						loadedNaturalHeight: event.target?.naturalHeight,
-					} );
-				} }
-				ref={ imageRef }
-				className={ borderProps.className }
-				style={ {
-					width:
-						( width && height ) || aspectRatio ? '100%' : undefined,
-					height:
-						( width && height ) || aspectRatio ? '100%' : undefined,
-					objectFit: scale,
-					...borderProps.style,
-					...shadowProps.style,
-				} }
-			/>
-			{ temporaryURL && <Spinner /> }
-		</>
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-	);
+	let img =
+		temporaryURL && hasImageErrored ? (
+			// Show a placeholder during upload when the blob URL can't be loaded. This can
+			// happen when the user uploads a HEIC image in a browser that doesn't support them.
+			<Placeholder
+				className="wp-block-image__placeholder"
+				withIllustration
+			>
+				<Spinner />
+			</Placeholder>
+		) : (
+			// Disable reason: Image itself is not meant to be interactive, but
+			// should direct focus to block.
+			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+			<>
+				<img
+					src={ temporaryURL || url }
+					alt={ defaultedAlt }
+					onError={ onImageError }
+					onLoad={ onImageLoad }
+					ref={ imageRef }
+					className={ borderProps.className }
+					style={ {
+						width:
+							( width && height ) || aspectRatio
+								? '100%'
+								: undefined,
+						height:
+							( width && height ) || aspectRatio
+								? '100%'
+								: undefined,
+						objectFit: scale,
+						...borderProps.style,
+						...shadowProps.style,
+					} }
+				/>
+				{ temporaryURL && <Spinner /> }
+			</>
+			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+		);
 
 	if ( canEditImage && isEditingImage ) {
 		img = (

package/src/image/index.php

@@ -185,22 +185,37 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$p->seek( 'figure' );
 	$figure_class_names = $p->get_attribute( 'class' );
 	$figure_styles      = $p->get_attribute( 'style' );
+
+	// Create unique id and set the image metadata in the state.
+	$unique_image_id = uniqid();
+
+	wp_interactivity_state(
+		'core/image',
+		array(
+			'metadata' => array(
+				$unique_image_id => array(
+					'uploadedSrc'      => $img_uploaded_src,
+					'figureClassNames' => $figure_class_names,
+					'figureStyles'     => $figure_styles,
+					'imgClassNames'    => $img_class_names,
+					'imgStyles'        => $img_styles,
+					'targetWidth'      => $img_width,
+					'targetHeight'     => $img_height,
+					'scaleAttr'        => $block['attrs']['scale'] ?? false,
+					'ariaLabel'        => $aria_label,
+					'alt'              => $alt,
+				),
+			),
+		)
+	);
+
 	$p->add_class( 'wp-lightbox-container' );
 	$p->set_attribute( 'data-wp-interactive', 'core/image' );
 	$p->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
 			array(
-				'uploadedSrc'      => $img_uploaded_src,
-				'figureClassNames' => $figure_class_names,
-				'figureStyles'     => $figure_styles,
-				'imgClassNames'    => $img_class_names,
-				'imgStyles'        => $img_styles,
-				'targetWidth'      => $img_width,
-				'targetHeight'     => $img_height,
-				'scaleAttr'        => $block['attrs']['scale'] ?? false,
-				'ariaLabel'        => $aria_label,
-				'alt'              => $alt,
+				'imageId' => $unique_image_id,
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
@@ -215,6 +230,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
 	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
+	$p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );
 
 	$body_content = $p->get_updated_html();
 
@@ -231,8 +248,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			aria-label="' . esc_attr( $aria_label ) . '"
 			data-wp-init="callbacks.initTriggerButton"
 			data-wp-on-async--click="actions.showLightbox"
-			data-wp-style--right="context.imageButtonRight"
-			data-wp-style--top="context.imageButtonTop"
+			data-wp-style--right="state.imageButtonRight"
+			data-wp-style--top="state.imageButtonTop"
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
 				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
@@ -288,15 +305,15 @@ function block_core_image_print_lightbox_overlay() {
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
-					<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>
+					<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.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>
 				</button>
 				<div class="lightbox-image-container">
-					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
+					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
 						<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">
 					</figure>
 				</div>
 				<div class="lightbox-image-container">
-					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
+					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
 						<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">
 					</figure>
 				</div>

package/src/image/style.scss

@@ -9,6 +9,16 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+
+		@media (prefers-reduced-motion: no-preference) {
+			&.hide {
+				visibility: hidden;
+			}
+
+			&.show {
+				animation: show-content-image 0.4s;
+			}
+		}
 	}
 
 	// The following style maintains border radius application for deprecated
@@ -319,6 +329,18 @@
 	}
 }
 
+@keyframes show-content-image {
+	0% {
+		visibility: hidden;
+	}
+	99% {
+		visibility: hidden;
+	}
+	100% {
+		visibility: visible;
+	}
+}
+
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;

package/src/image/test/edit.native.js

@@ -48,6 +48,7 @@ function mockGetMedia( media ) {
 const FETCH_MEDIA = {
 	request: {
 		path: `/wp/v2/media/1?context=edit`,
+		parse: false,
 	},
 	response: {
 		source_url: 'https://cldup.com/cXyG__fTLN.jpg',