@wordpress/block-library 8.24.1 → 8.25.1-next.79a6196f.0

package/src/file/edit.js

@@ -63,7 +63,6 @@ function ClipboardToolbarButton( { text, disabled } ) {
 function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		id,
-		fileId,
 		fileName,
 		href,
 		textLinkHref,
@@ -73,27 +72,26 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const { media, mediaUpload } = useSelect(
+	const { getSettings } = useSelect( blockEditorStore );
+	const { media } = useSelect(
 		( select ) => ( {
 			media:
 				id === undefined
 					? undefined
 					: select( coreStore ).getMedia( id ),
-			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[ id ]
 	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { toggleSelection } = useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
 		if ( isBlobURL( href ) ) {
 			const file = getBlobByURL( href );
 
-			mediaUpload( {
+			getSettings().mediaUpload( {
 				filesList: [ file ],
 				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
 				onError: onUploadError,
@@ -102,33 +100,28 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			revokeBlobURL( href );
 		}
 
-		if ( downloadButtonText === undefined ) {
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );
 		}
 	}, [] );
 
-	useEffect( () => {
-		if ( ! fileId && href ) {
-			// Add a unique fileId to each file block.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
-		}
-	}, [ href, fileId, clientId ] );
-
 	function onSelectFile( newMedia ) {
-		if ( newMedia && newMedia.url ) {
-			const isPdf = newMedia.url.endsWith( '.pdf' );
-			setAttributes( {
-				href: newMedia.url,
-				fileName: newMedia.title,
-				textLinkHref: newMedia.url,
-				id: newMedia.id,
-				displayPreview: isPdf ? true : undefined,
-				previewHeight: isPdf ? 600 : undefined,
-			} );
+		if ( ! newMedia || ! newMedia.url ) {
+			return;
 		}
+
+		const isPdf = newMedia.url.endsWith( '.pdf' );
+		setAttributes( {
+			href: newMedia.url,
+			fileName: newMedia.title,
+			textLinkHref: newMedia.url,
+			id: newMedia.id,
+			displayPreview: isPdf ? true : undefined,
+			previewHeight: isPdf ? 600 : undefined,
+			fileId: `wp-block-file--media-${ clientId }`,
+		} );
 	}
 
 	function onUploadError( message ) {

package/src/file/edit.native.js

@@ -97,7 +97,7 @@ export class FileEdit extends Component {
 		const { attributes, setAttributes } = this.props;
 		const { downloadButtonText } = attributes;
 
-		if ( downloadButtonText === undefined || downloadButtonText === '' ) {
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );

package/src/file/save.js

@@ -25,7 +25,11 @@ export default function save( { attributes } ) {
 		previewHeight,
 	} = attributes;
 
-	const pdfEmbedLabel = RichText.isEmpty( fileName ) ? 'PDF embed' : fileName;
+	const pdfEmbedLabel = RichText.isEmpty( fileName )
+		? 'PDF embed'
+		: // To do: use toPlainText, but we need ensure it's RichTextData. See
+		  // https://github.com/WordPress/gutenberg/pull/56710.
+		  fileName.toString();
 
 	const hasFilename = ! RichText.isEmpty( fileName );
 

package/src/form-input/block.json

@@ -19,10 +19,10 @@
 			"type": "string"
 		},
 		"label": {
-			"type": "string",
+			"type": "rich-text",
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
-			"source": "html",
+			"source": "rich-text",
 			"__experimentalRole": "content"
 		},
 		"inlineLabel": {

package/src/form-input/deprecated.js

@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+const getNameFromLabelV1 = ( content ) => {
+	return (
+		removeAccents( stripHTML( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+// Version without wrapper div in saved markup
+// See: https://github.com/WordPress/gutenberg/pull/56507
+const v1 = {
+	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: {
+		className: false,
+		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 = classNames(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		/* eslint-disable jsx-a11y/label-has-associated-control */
+		return (
+			<label
+				className={ classNames( '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 */
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

package/src/form-input/edit.js

@@ -59,7 +59,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					autoComplete="off"
 					label={ __( 'Name' ) }

package/src/form-input/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -12,6 +13,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
+	deprecated,
 	edit,
 	save,
 	variations,

package/src/form-input/save.js

@@ -9,9 +9,11 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Get the name attribute from a content string.
@@ -21,11 +23,8 @@ import {
  * @return {string} Returns the slug.
  */
 const getNameFromLabel = ( content ) => {
-	const dummyElement = document.createElement( 'div' );
-	dummyElement.innerHTML = content;
-	// Get the slug.
 	return (
-		removeAccents( dummyElement.innerText )
+		removeAccents( stripHTML( content ) )
 			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
 			// Convert to lowercase
@@ -54,30 +53,34 @@ export default function save( { attributes } ) {
 	);
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
+	const blockProps = useBlockProps.save();
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
 
-	/* eslint-disable jsx-a11y/label-has-associated-control */
 	return (
-		<label
-			className={ classNames( '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 || getNameFromLabel( label ) }
-				required={ required }
-				aria-required={ required }
-				placeholder={ placeholder || undefined }
-				style={ inputStyle }
-			/>
-		</label>
+		<div { ...blockProps }>
+			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+			<label
+				className={ classNames( '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 || getNameFromLabel( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+			</label>
+			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+		</div>
 	);
-	/* eslint-enable jsx-a11y/label-has-associated-control */
 }

package/src/gallery/block.json

@@ -46,8 +46,8 @@
 					"attribute": "data-id"
 				},
 				"caption": {
-					"type": "string",
-					"source": "html",
+					"type": "rich-text",
+					"source": "rich-text",
 					"selector": ".blocks-gallery-item__caption"
 				}
 			}
@@ -72,14 +72,18 @@
 			"maximum": 8
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": ".blocks-gallery-caption"
 		},
 		"imageCrop": {
 			"type": "boolean",
 			"default": true
 		},
+		"randomOrder": {
+			"type": "boolean",
+			"default": false
+		},
 		"fixedHeight": {
 			"type": "boolean",
 			"default": true

package/src/gallery/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { compose, usePrevious } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -14,7 +14,6 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -25,13 +24,7 @@ import {
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
-import {
-	Platform,
-	useCallback,
-	useEffect,
-	useState,
-	useMemo,
-} from '@wordpress/element';
+import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -39,7 +32,6 @@ import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-import { caption as captionIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -82,6 +74,8 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }
 	: {};
 
+const EMPTY_ARRAY = [];
+
 function GalleryEdit( props ) {
 	const {
 		setAttributes,
@@ -94,34 +88,8 @@ function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug, caption } =
+	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
 		attributes;
-	const [ showCaption, setShowCaption ] = useState( !! caption );
-	const prevCaption = usePrevious( caption );
-
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	useEffect( () => {
-		if ( ! isSelected && ! caption ) {
-			setShowCaption( false );
-		}
-	}, [ isSelected, caption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -132,33 +100,44 @@ function GalleryEdit( props ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		const preferredStyleVariations =
-			settings.__experimentalPreferredStyleVariations;
-		return {
-			getBlock: select( blockEditorStore ).getBlock,
-			getSettings: select( blockEditorStore ).getSettings,
-			preferredStyle: preferredStyleVariations?.value?.[ 'core/image' ],
-		};
-	}, [] );
-
-	const innerBlockImages = useSelect(
-		( select ) => {
-			const innerBlocks =
-				select( blockEditorStore ).getBlock( clientId )?.innerBlocks ??
-				[];
-			return innerBlocks;
-		},
-		[ clientId ]
-	);
-
-	const wasBlockJustInserted = useSelect(
+	const {
+		getBlock,
+		getSettings,
+		preferredStyle,
+		innerBlockImages,
+		blockWasJustInserted,
+		multiGallerySelection,
+	} = useSelect(
 		( select ) => {
-			return select( blockEditorStore ).wasBlockJustInserted(
-				clientId,
-				'inserter_menu'
-			);
+			const {
+				getBlockName,
+				getMultiSelectedBlockClientIds,
+				getSettings: _getSettings,
+				getBlock: _getBlock,
+				wasBlockJustInserted,
+			} = select( blockEditorStore );
+			const preferredStyleVariations =
+				_getSettings().__experimentalPreferredStyleVariations;
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+			return {
+				getBlock: _getBlock,
+				getSettings: _getSettings,
+				preferredStyle:
+					preferredStyleVariations?.value?.[ 'core/image' ],
+				innerBlockImages:
+					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
+				blockWasJustInserted: wasBlockJustInserted(
+					clientId,
+					'inserter_menu'
+				),
+				multiGallerySelection:
+					multiSelectedClientIds.length &&
+					multiSelectedClientIds.every(
+						( _clientId ) =>
+							getBlockName( _clientId ) === 'core/gallery'
+					),
+			};
 		},
 		[ clientId ]
 	);
@@ -410,6 +389,10 @@ function GalleryEdit( props ) {
 			: __( 'Thumbnails are not cropped.' );
 	}
 
+	function toggleRandomOrder() {
+		setAttributes( { randomOrder: ! randomOrder } );
+	}
+
 	function toggleOpenInNewTab( openInNewTab ) {
 		const newLinkTarget = openInNewTab ? '_blank' : undefined;
 		setAttributes( { linkTarget: newLinkTarget } );
@@ -498,7 +481,7 @@ function GalleryEdit( props ) {
 				( hasImages && ! isSelected ) || imagesUploading,
 			value: hasImageIds ? images : {},
 			autoOpenMediaUpload:
-				! hasImages && isSelected && wasBlockJustInserted,
+				! hasImages && isSelected && blockWasJustInserted,
 			onFocus,
 		},
 	} );
@@ -574,6 +557,12 @@ function GalleryEdit( props ) {
 						onChange={ toggleImageCrop }
 						help={ getImageCropHelp }
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Random order' ) }
+						checked={ !! randomOrder }
+						onChange={ toggleRandomOrder }
+					/>
 					<SelectControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
@@ -620,39 +609,22 @@ function GalleryEdit( props ) {
 			</InspectorControls>
 			{ Platform.isWeb && (
 				<>
-					<BlockControls group="block">
-						{ ! isContentLocked && (
-							<ToolbarButton
-								onClick={ () => {
-									setShowCaption( ! showCaption );
-									if ( showCaption && caption ) {
-										setAttributes( { caption: undefined } );
-									}
-								} }
-								icon={ captionIcon }
-								isPressed={ showCaption }
-								label={
-									showCaption
-										? __( 'Remove caption' )
-										: __( 'Add caption' )
-								}
+					{ ! multiGallerySelection && (
+						<BlockControls group="other">
+							<MediaReplaceFlow
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								accept="image/*"
+								handleUpload={ false }
+								onSelect={ updateImages }
+								name={ __( 'Add' ) }
+								multiple={ true }
+								mediaIds={ images
+									.filter( ( image ) => image.id )
+									.map( ( image ) => image.id ) }
+								addToGallery={ hasImageIds }
 							/>
-						) }
-					</BlockControls>
-					<BlockControls group="other">
-						<MediaReplaceFlow
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							accept="image/*"
-							handleUpload={ false }
-							onSelect={ updateImages }
-							name={ __( 'Add' ) }
-							multiple={ true }
-							mediaIds={ images
-								.filter( ( image ) => image.id )
-								.map( ( image ) => image.id ) }
-							addToGallery={ hasImageIds }
-						/>
-					</BlockControls>
+						</BlockControls>
+					) }
 					<GapStyles
 						blockGap={ attributes.style?.spacing?.blockGap }
 						clientId={ clientId }
@@ -661,8 +633,7 @@ function GalleryEdit( props ) {
 			) }
 			<Gallery
 				{ ...props }
-				showCaption={ showCaption }
-				ref={ Platform.isWeb ? captionRef : undefined }
+				isContentLocked={ isContentLocked }
 				images={ images }
 				mediaPlaceholder={
 					! hasImages || Platform.isNative
@@ -671,6 +642,7 @@ function GalleryEdit( props ) {
 				}
 				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
+				multiGallerySelection={ multiGallerySelection }
 			/>
 		</>
 	);