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

package/src/form-input/deprecated.js

@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -26,6 +27,118 @@ const getNameFromLabelV1 = ( content ) => {
 	);
 };
 
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'text',
+		},
+		name: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+			default: 'Label',
+			selector: '.wp-block-form-input__label-content',
+			source: 'html',
+			__experimentalRole: 'content',
+		},
+		inlineLabel: {
+			type: 'boolean',
+			default: false,
+		},
+		required: {
+			type: 'boolean',
+			default: false,
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'required',
+		},
+		placeholder: {
+			type: 'string',
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'placeholder',
+			__experimentalRole: 'content',
+		},
+		value: {
+			type: 'string',
+			default: '',
+			selector: 'input',
+			source: 'attribute',
+			attribute: 'value',
+		},
+		visibilityPermissions: {
+			type: 'string',
+			default: 'all',
+		},
+	},
+	supports: {
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		const blockProps = useBlockProps.save();
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		return (
+			<div { ...blockProps }>
+				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+				<label
+					className={ clsx( 'wp-block-form-input__label', {
+						'is-label-inline': inlineLabel,
+					} ) }
+				>
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+					<TagName
+						className={ inputClasses }
+						type={ 'textarea' === type ? undefined : type }
+						name={ name || getNameFromLabelV1( label ) }
+						required={ required }
+						aria-required={ required }
+						placeholder={ placeholder || undefined }
+						style={ inputStyle }
+					/>
+				</label>
+				{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+			</div>
+		);
+	},
+};
+
 // Version without wrapper div in saved markup
 // See: https://github.com/WordPress/gutenberg/pull/56507
 const v1 = {
@@ -137,6 +250,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v1 ];
+const deprecated = [ v2, v1 ];
 
 export default deprecated;

package/src/form-input/edit.js

@@ -31,6 +31,9 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		ref.current.focus();
 	}
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	const controls = (
 		<>
 			{ 'hidden' !== type && (
@@ -81,6 +84,18 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		</>
 	);
 
+	const content = (
+		<RichText
+			tagName="span"
+			className="wp-block-form-input__label-content"
+			value={ label }
+			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+			aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+			data-empty={ ! label }
+			placeholder={ __( 'Type the label for this input' ) }
+		/>
+	);
+
 	if ( 'hidden' === type ) {
 		return (
 			<>
@@ -111,17 +126,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
-				<RichText
-					tagName="span"
-					className="wp-block-form-input__label-content"
-					value={ label }
-					onChange={ ( newLabel ) =>
-						setAttributes( { label: newLabel } )
-					}
-					aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
-					data-empty={ label ? false : true }
-					placeholder={ __( 'Type the label for this input' ) }
-				/>
+				{ ! isCheckboxOrRadio && content }
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
 					className={ clsx(
@@ -147,6 +152,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						...colorProps.style,
 					} }
 				/>
+				{ isCheckboxOrRadio && content }
 			</span>
 		</div>
 	);

package/src/form-input/save.js

@@ -55,6 +55,9 @@ export default function save( { attributes } ) {
 
 	const blockProps = useBlockProps.save();
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
-				<span className="wp-block-form-input__label-content">
-					<RichText.Content value={ label } />
-				</span>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 				<TagName
 					className={ inputClasses }
 					type={ 'textarea' === type ? undefined : type }
@@ -79,6 +84,11 @@ export default function save( { attributes } ) {
 					placeholder={ placeholder || undefined }
 					style={ inputStyle }
 				/>
+				{ isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 			</label>
 			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
 		</div>

package/src/form-input/style.scss

@@ -15,16 +15,17 @@
 		}
 	}
 
-	/*
-	Small tweak to left-align the checkbox.
-	Even though `:has` is not currently supported in Firefox, this is a small tweak
-	and does not affect the functionality of the block or the user's experience.
-	There will be a minor inconsistency between browsers. However, it's more important to provide
-	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
-	*/
 	&:has(input[type="checkbox"]) {
+		flex-direction: row;
 		width: fit-content;
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+
+		.wp-block-form-input__label-content {
+			margin: 0;
+		}
+	}
+
+	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
 		flex-direction: row-reverse;
 	}
 }

package/src/freeform/edit.js

@@ -75,10 +75,10 @@ function ClassicEdit( {
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const didMount = useRef( false );
+	const didMountRef = useRef( false );
 
 	useEffect( () => {
-		if ( ! didMount.current ) {
+		if ( ! didMountRef.current ) {
 			return;
 		}
 
@@ -96,7 +96,7 @@ function ClassicEdit( {
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
 
-		didMount.current = true;
+		didMountRef.current = true;
 
 		window.tinymce.EditorManager.overrideDefaults( {
 			base_url: baseURL,
@@ -230,7 +230,7 @@ function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
-			didMount.current = false;
+			didMountRef.current = false;
 		};
 	}, [] );
 

package/src/freeform/editor.scss

@@ -299,7 +299,7 @@ div[data-type="core/freeform"] {
 	top: 0;
 	border: $border-width solid $gray-300;
 	border-bottom: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-bottom: $grid-unit-10;
 
 	// On mobile, toolbars go edge to edge.

package/src/freeform/modal.js

@@ -25,6 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
+			size="small"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }
@@ -120,12 +121,17 @@ export default function ModalEdit( props ) {
 						expanded={ false }
 					>
 						<FlexItem>
-							<Button variant="tertiary" onClick={ onClose }>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ onClose }
+							>
 								{ __( 'Cancel' ) }
 							</Button>
 						</FlexItem>
 						<FlexItem>
 							<Button
+								__next40pxDefaultSize
 								variant="primary"
 								onClick={ () => {
 									setAttributes( {

package/src/gallery/editor.scss

@@ -139,7 +139,7 @@
 	z-index: z-index(".block-library-gallery-item__inline-menu");
 	transition: box-shadow 0.2s ease-out;
 	@include reduce-motion("transition");
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background: $white;
 	border: $border-width solid $gray-900;
 

package/src/group/editor.scss

@@ -43,7 +43,6 @@
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
 		border: $border-width dashed currentColor;
-		border-radius: $radius-block-ui;
 	}
 
 	// Let the parent be selectable in the placeholder area.

package/src/home-link/edit.js

@@ -19,13 +19,10 @@ import { useEffect } from '@wordpress/element';
 const preventDefault = ( event ) => event.preventDefault();
 
 export default function HomeEdit( { attributes, setAttributes, context } ) {
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-		return {
-			homeUrl: getUnstableBase()?.home,
-		};
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
 	}, [] );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );

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,
@@ -23,6 +23,7 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +31,8 @@ import { store as noticesStore } from '@wordpress/notices';
 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
@@ -107,8 +110,23 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
+
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
+	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;
@@ -119,7 +137,7 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
 		useDispatch( blockEditorStore );
 
 	useEffect( () => {
@@ -134,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 );
@@ -148,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,
@@ -292,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(
@@ -322,7 +393,7 @@ export function ImageEdit( {
 					: __( 'Connected to dynamic data' ),
 			};
 		},
-		[ isSingleSelected, metadata?.bindings?.url ]
+		[ context, isSingleSelected, metadata?.bindings?.url ]
 	);
 	const placeholder = ( content ) => {
 		return (
@@ -331,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={ {
@@ -352,47 +427,55 @@ export function ImageEdit( {
 					...shadowProps.style,
 				} }
 			>
-				{ lockUrlControls ? (
-					<span className="block-bindings-media-placeholder-message">
-						{ lockUrlControlsMessage }
-					</span>
-				) : (
-					content
-				) }
+				{ lockUrlControls &&
+					! isSmallContainer &&
+					lockUrlControlsMessage }
+
+				{ ! lockUrlControls && ! isSmallContainer && content }
+				{ placeholderResizeListener }
 			</Placeholder>
 		);
 	};
 
 	return (
-		<figure { ...blockProps }>
-			<Image
-				temporaryURL={ temporaryURL }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSingleSelected={ isSingleSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				onReplace={ onReplace }
-				onSelectImage={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onUploadError={ onUploadError }
-				context={ context }
-				clientId={ clientId }
-				blockEditingMode={ blockEditingMode }
-				parentLayoutType={ parentLayout?.type }
-			/>
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				onSelect={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onError={ onUploadError }
-				placeholder={ placeholder }
-				accept="image/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				value={ { id, src } }
-				mediaPreview={ mediaPreview }
-				disableMediaButtons={ temporaryURL || url }
-			/>
-		</figure>
+		<>
+			<figure { ...blockProps }>
+				<Image
+					temporaryURL={ temporaryURL }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSingleSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					onReplace={ onReplace }
+					onSelectImage={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onUploadError={ onUploadError }
+					context={ context }
+					clientId={ clientId }
+					blockEditingMode={ blockEditingMode }
+					parentLayoutType={ parentLayout?.type }
+					maxContentWidth={ maxContentWidth }
+				/>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					placeholder={ placeholder }
+					accept="image/*"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					handleUpload={ ( files ) => files.length === 1 }
+					value={ { id, src } }
+					mediaPreview={ mediaPreview }
+					disableMediaButtons={ temporaryURL || url }
+				/>
+			</figure>
+			{
+				// 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
+				isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver
+			}
+		</>
 	);
 }
 

package/src/image/editor.scss

@@ -1,47 +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;
-
-		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> 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;
 	}
 }
 
@@ -152,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%;