@wordpress/block-library 9.7.0 → 9.7.1-next.1f6eadc42.0

package/src/image/edit.js

@@ -6,14 +6,14 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { isBlobURL } from '@wordpress/blob';
-import { store as blocksStore } from '@wordpress/blocks';
+import { isBlobURL, createBlobURL } from '@wordpress/blob';
+import { store as blocksStore, createBlock } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockIcon,
-	MediaPlaceholder,
 	useBlockProps,
+	MediaPlaceholder,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
@@ -31,6 +31,8 @@ import { useResizeObserver } from '@wordpress/compose';
 import { unlock } from '../lock-unlock';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
+import { isValidFileType } from './utils';
+import { useMaxWidthObserver } from './use-max-width-observer';
 
 /**
  * Module constants
@@ -108,11 +110,23 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
-	const [ contentResizeListener, { width: containerWidth } ] =
+	const containerRef = useRef();
+	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
+	// This won't work for them because the container width changes with the image.
+	// TODO: Find a way to observe the container width for flex and grid layouts.
+	const isMaxWidthContainerWidth =
+		! parentLayout ||
+		( parentLayout.type !== 'flex' && parentLayout.type !== 'grid' );
+	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver();
+
+	const [ placeholderResizeListener, { width: placeholderWidth } ] =
 		useResizeObserver();
 
+	const isSmallContainer = placeholderWidth && placeholderWidth < 160;
+
 	const altRef = useRef();
 	useEffect( () => {
 		altRef.current = alt;
@@ -123,7 +137,7 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
@@ -138,7 +152,12 @@ export function ImageEdit( {
 		}
 	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
 
-	const { getSettings } = useSelect( blockEditorStore );
+	const {
+		getSettings,
+		getBlockRootClientId,
+		getBlockName,
+		canInsertBlockType,
+	} = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -152,7 +171,52 @@ export function ImageEdit( {
 		} );
 	}
 
+	function onSelectImagesList( images ) {
+		const win = containerRef.current?.ownerDocument.defaultView;
+
+		if ( images.every( ( file ) => file instanceof win.File ) ) {
+			/** @type {File[]} */
+			const files = images;
+			const rootClientId = getBlockRootClientId( clientId );
+
+			if ( files.some( ( file ) => ! isValidFileType( file ) ) ) {
+				// Copied from the same notice in the gallery block.
+				createErrorNotice(
+					__(
+						'If uploading to a gallery all files need to be image formats'
+					),
+					{ id: 'gallery-upload-invalid-file', type: 'snackbar' }
+				);
+			}
+
+			const imageBlocks = files
+				.filter( ( file ) => isValidFileType( file ) )
+				.map( ( file ) =>
+					createBlock( 'core/image', {
+						blob: createBlobURL( file ),
+					} )
+				);
+
+			if ( getBlockName( rootClientId ) === 'core/gallery' ) {
+				replaceBlock( clientId, imageBlocks );
+			} else if ( canInsertBlockType( 'core/gallery', rootClientId ) ) {
+				const galleryBlock = createBlock(
+					'core/gallery',
+					{},
+					imageBlocks
+				);
+
+				replaceBlock( clientId, galleryBlock );
+			}
+		}
+	}
+
 	function onSelectImage( media ) {
+		if ( Array.isArray( media ) ) {
+			onSelectImagesList( media );
+			return;
+		}
+
 		if ( ! media || ! media.url ) {
 			setAttributes( {
 				url: undefined,
@@ -296,7 +360,10 @@ export function ImageEdit( {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const blockProps = useBlockProps( { className: classes } );
+	const blockProps = useBlockProps( {
+		ref: containerRef,
+		className: classes,
+	} );
 
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
@@ -335,13 +402,17 @@ export function ImageEdit( {
 					[ borderProps.className ]:
 						!! borderProps.className && ! isSingleSelected,
 				} ) }
-				withIllustration
-				icon={ lockUrlControls ? pluginsIcon : icon }
-				label={ __( 'Image' ) }
+				icon={
+					! isSmallContainer &&
+					( lockUrlControls ? pluginsIcon : icon )
+				}
+				withIllustration={ ! isSingleSelected || isSmallContainer }
+				label={ ! isSmallContainer && __( 'Image' ) }
 				instructions={
 					! lockUrlControls &&
+					! isSmallContainer &&
 					__(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
+						'Upload or drag an image file here, or pick one from your library.'
 					)
 				}
 				style={ {
@@ -356,13 +427,12 @@ export function ImageEdit( {
 					...shadowProps.style,
 				} }
 			>
-				{ lockUrlControls ? (
-					<span className="block-bindings-media-placeholder-message">
-						{ lockUrlControlsMessage }
-					</span>
-				) : (
-					content
-				) }
+				{ lockUrlControls &&
+					! isSmallContainer &&
+					lockUrlControlsMessage }
+
+				{ ! lockUrlControls && ! isSmallContainer && content }
+				{ placeholderResizeListener }
 			</Placeholder>
 		);
 	};
@@ -384,7 +454,7 @@ export function ImageEdit( {
 					clientId={ clientId }
 					blockEditingMode={ blockEditingMode }
 					parentLayoutType={ parentLayout?.type }
-					containerWidth={ containerWidth }
+					maxContentWidth={ maxContentWidth }
 				/>
 				<MediaPlaceholder
 					icon={ <BlockIcon icon={ icon } /> }
@@ -394,6 +464,7 @@ export function ImageEdit( {
 					placeholder={ placeholder }
 					accept="image/*"
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					handleUpload={ ( files ) => files.length === 1 }
 					value={ { id, src } }
 					mediaPreview={ mediaPreview }
 					disableMediaButtons={ temporaryURL || url }
@@ -402,7 +473,7 @@ export function ImageEdit( {
 			{
 				// The listener cannot be placed as the first element as it will break the in-between inserter.
 				// See https://github.com/WordPress/gutenberg/blob/71134165868298fc15e22896d0c28b41b3755ff7/packages/block-editor/src/components/block-list/use-in-between-inserter.js#L120
-				contentResizeListener
+				isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver
 			}
 		</>
 	);

package/src/image/editor.scss

@@ -1,44 +1,8 @@
 // Provide special styling for the placeholder.
 // @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
-
-	// Show Placeholder style on-select.
-	&.is-selected .block-editor-media-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// Disable any duotone filter applied in the selected state.
-		filter: none !important;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-	.block-bindings-media-placeholder-message {
-		opacity: 0;
-	}
-	&.is-selected .block-bindings-media-placeholder-message {
-		opacity: 1;
-	}
-
-	// Remove the transition while we still have a legacy placeholder style.
-	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
+	.block-editor-media-placeholder.is-small {
+		min-height: 60px;
 	}
 }
 
@@ -149,6 +113,11 @@ figure.wp-block-image:not(.wp-block) {
 	text-align: center;
 }
 
+// Relatively position the alignment container to support the content resizer.
+.wp-block[data-align]:has(> .wp-block-image) {
+	position: relative;
+}
+
 .wp-block-image__crop-area {
 	position: relative;
 	max-width: 100%;

package/src/image/image.js

@@ -108,7 +108,7 @@ export default function Image( {
 	clientId,
 	blockEditingMode,
 	parentLayoutType,
-	containerWidth,
+	maxContentWidth,
 } ) {
 	const {
 		url = '',
@@ -556,6 +556,24 @@ export default function Image( {
 
 	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 
+	const mediaReplaceFlow = isSingleSelected &&
+		! isEditingImage &&
+		! lockUrlControls && (
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*"
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
+					onReset={ () => onSelectImage( undefined ) }
+				/>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
 			{ showBlockControls && (
@@ -592,20 +610,6 @@ export default function Image( {
 					) }
 				</BlockControls>
 			) }
-			{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-				<BlockControls group="other">
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*"
-						onSelect={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onError={ onUploadError }
-						onReset={ () => onSelectImage( undefined ) }
-					/>
-				</BlockControls>
-			) }
 			{ isSingleSelected && externalBlob && (
 				<BlockControls>
 					<ToolbarGroup>
@@ -934,7 +938,7 @@ export default function Image( {
 		// @todo It would be good to revisit this once a content-width variable
 		// becomes available.
 		const maxWidthBuffer = maxWidth * 2.5;
-		const maxContentWidth = containerWidth || maxWidthBuffer;
+		const maxResizeWidth = maxContentWidth || maxWidthBuffer;
 
 		let showRightHandle = false;
 		let showLeftHandle = false;
@@ -980,9 +984,9 @@ export default function Image( {
 				} }
 				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
-				maxWidth={ maxContentWidth }
+				maxWidth={ maxResizeWidth }
 				minHeight={ minHeight }
-				maxHeight={ maxContentWidth / ratio }
+				maxHeight={ maxResizeWidth / ratio }
 				lockAspectRatio={ ratio }
 				enable={ {
 					top: false,
@@ -996,6 +1000,7 @@ export default function Image( {
 
 					// Clear hardcoded width if the resized width is close to the max-content width.
 					if (
+						maxContentWidth &&
 						// Only do this if the image is bigger than the container to prevent it from being squished.
 						// TODO: Remove this check if the image support setting 100% width.
 						naturalWidth >= maxContentWidth &&
@@ -1029,12 +1034,18 @@ export default function Image( {
 	}
 
 	if ( ! url && ! temporaryURL ) {
-		// Add all controls if the image attributes are connected.
-		return metadata?.bindings ? controls : sizeControls;
+		return (
+			<>
+				{ mediaReplaceFlow }
+				{ /* Add all controls if the image attributes are connected. */ }
+				{ metadata?.bindings ? controls : sizeControls }
+			</>
+		);
 	}
 
 	return (
 		<>
+			{ mediaReplaceFlow }
 			{ controls }
 			{ img }
 

package/src/image/index.php

@@ -72,7 +72,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 	) {
 		$suffix = wp_scripts_get_suffix();
 		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/image.min.js' );
+			$module_url = gutenberg_url( '/build-module/block-library/image/view.min.js' );
 		}
 
 		wp_register_script_module(

package/src/image/transforms.js

@@ -3,9 +3,6 @@
  */
 import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
-import { dispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
 
 export function stripFirstImage( attributes, { shortcode } ) {
 	const { body } = document.implementation.createHTMLDocument( '' );
@@ -138,26 +135,6 @@ const transforms = {
 			// creating a new gallery.
 			type: 'files',
 			isMatch( files ) {
-				// The following check is intended to catch non-image files when dropped together with images.
-				if (
-					files.some(
-						( file ) => file.type.indexOf( 'image/' ) === 0
-					) &&
-					files.some(
-						( file ) => file.type.indexOf( 'image/' ) !== 0
-					)
-				) {
-					const { createErrorNotice } = dispatch( noticesStore );
-					createErrorNotice(
-						__(
-							'If uploading to a gallery all files need to be image formats'
-						),
-						{
-							id: 'gallery-transform-invalid-file',
-							type: 'snackbar',
-						}
-					);
-				}
 				return files.every(
 					( file ) => file.type.indexOf( 'image/' ) === 0
 				);

package/src/image/use-max-width-observer.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
+
+function useMaxWidthObserver() {
+	const [ contentResizeListener, { width } ] = useResizeObserver();
+	const observerRef = useRef();
+
+	const maxWidthObserver = (
+		<div
+			// Some themes set max-width on blocks.
+			className="wp-block"
+			aria-hidden="true"
+			style={ {
+				position: 'absolute',
+				inset: 0,
+				width: '100%',
+				height: 0,
+				margin: 0,
+			} }
+			ref={ observerRef }
+		>
+			{ contentResizeListener }
+		</div>
+	);
+
+	return [ maxWidthObserver, width ];
+}
+
+export { useMaxWidthObserver };

package/src/image/utils.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { NEW_TAB_REL } from './constants';
+import { NEW_TAB_REL, ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
  * Evaluates a CSS aspect-ratio property value as a number.
@@ -81,3 +81,15 @@ export function getImageSizeAttributes( image, size ) {
 
 	return {};
 }
+
+/**
+ * Checks if the file has a valid file type.
+ *
+ * @param {File} file - The file to check.
+ * @return {boolean} - Returns true if the file has a valid file type, otherwise false.
+ */
+export function isValidFileType( file ) {
+	return ALLOWED_MEDIA_TYPES.some(
+		( mediaType ) => file.type.indexOf( mediaType ) === 0
+	);
+}

package/src/latest-posts/edit.js

@@ -243,7 +243,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent && (
 					<RadioControl
 						className="wp-block-latest-posts__post-content-radio"
-						label={ __( 'Show:' ) }
+						label={ __( 'Show' ) }
 						selected={ displayPostContentRadio }
 						options={ [
 							{ label: __( 'Excerpt' ), value: 'excerpt' },

package/src/missing/edit.js

@@ -50,8 +50,7 @@ export default function MissingEdit( { attributes, clientId } ) {
 
 	const convertToHtmlButton = (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			key="convert"
 			onClick={ convertToHTML }
 			variant="primary"

package/src/navigation/edit/deleted-navigation-warning.js

@@ -2,29 +2,32 @@
  * WordPress dependencies
  */
 import { Warning } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
+import { Button, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 
-function DeletedNavigationWarning( { onCreateNew } ) {
-	return (
-		<Warning>
-			{ createInterpolateElement(
-				__(
-					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
-				),
-				{
-					button: (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							onClick={ onCreateNew }
-							variant="link"
-						/>
-					),
-				}
-			) }
-		</Warning>
+function DeletedNavigationWarning( { onCreateNew, isNotice = false } ) {
+	const message = createInterpolateElement(
+		__(
+			'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
+		),
+		{
+			button: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ onCreateNew }
+					variant="link"
+				/>
+			),
+		}
+	);
+
+	return isNotice ? (
+		<Notice status="warning" isDismissible={ false }>
+			{ message }
+		</Notice>
+	) : (
+		<Warning>{ message }</Warning>
 	);
 }
 

package/src/navigation/edit/index.js

@@ -591,8 +591,7 @@ function Navigation( {
 						{ isResponsive && (
 							<>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
 									onClick={ () => {
 										setOverlayMenuPreview(

package/src/navigation/edit/menu-inspector-controls.js

@@ -94,7 +94,9 @@ const MainContent = ( {
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
-		return <DeletedNavigationWarning onCreateNew={ onCreateNew } />;
+		return (
+			<DeletedNavigationWarning onCreateNew={ onCreateNew } isNotice />
+		);
 	}
 
 	if ( isLoading ) {

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -19,8 +19,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="wp-block-navigation-delete-menu-button"
 				variant="secondary"
 				isDestructive

package/src/navigation/edit/placeholder/index.js

@@ -76,8 +76,7 @@ export default function NavigationPlaceholder( {
 
 						{ canUserCreateNavigationMenus && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="tertiary"
 								onClick={ onCreateEmpty }
 							>

package/src/navigation/edit/responsive-wrapper.js

@@ -79,8 +79,7 @@ export default function ResponsiveWrapper( {
 		<>
 			{ ! isOpen && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					aria-haspopup="true"
 					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
@@ -102,8 +101,7 @@ export default function ResponsiveWrapper( {
 				>
 					<div { ...dialogProps }>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }

package/src/navigation/editor.scss

@@ -563,7 +563,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	width: 100%;
 	background-color: $gray-100;
 	padding: 0 $grid-unit-30;
-	height: $grid-unit-40 * 2;
+
+	// Adding !important to override default 40px size.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
+	height: $grid-unit-40 * 2 !important;
+
 	margin-bottom: $grid-unit-15;
 
 	&.open {

package/src/navigation/index.php

@@ -624,7 +624,7 @@ class WP_Navigation_Block_Renderer {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
 			$suffix = wp_scripts_get_suffix();
 			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build/interactivity/navigation.min.js' );
+				$module_url = gutenberg_url( '/build-module/block-library/navigation/view.min.js' );
 			}
 
 			wp_register_script_module(

package/src/navigation-link/link-ui.js

@@ -310,8 +310,7 @@ const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
 	return (
 		<VStack className="link-ui-tools">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				ref={ addBlockButtonRef }
 				icon={ plus }
 				onClick={ ( e ) => {

package/src/page-list/convert-to-links-modal.js

@@ -32,16 +32,14 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="tertiary"
 					onClick={ onClose }
 				>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="primary"
 					accessibleWhenDisabled
 					disabled={ disabled }

package/src/page-list/edit.js

@@ -342,8 +342,7 @@ export default function PageListEdit( {
 					<PanelBody title={ __( 'Edit this menu' ) }>
 						<p>{ convertDescription }</p>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="primary"
 							accessibleWhenDisabled
 							disabled={ ! hasResolvedPages }