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

package/src/gallery/edit.js

@@ -74,6 +74,8 @@ const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }
 	: {};
 
+const EMPTY_ARRAY = [];
+
 function GalleryEdit( props ) {
 	const {
 		setAttributes,
@@ -86,7 +88,8 @@ function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
+	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
+		attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -97,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 ]
 	);
@@ -375,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 } );
@@ -463,7 +481,7 @@ function GalleryEdit( props ) {
 				( hasImages && ! isSelected ) || imagesUploading,
 			value: hasImageIds ? images : {},
 			autoOpenMediaUpload:
-				! hasImages && isSelected && wasBlockJustInserted,
+				! hasImages && isSelected && blockWasJustInserted,
 			onFocus,
 		},
 	} );
@@ -539,6 +557,12 @@ function GalleryEdit( props ) {
 						onChange={ toggleImageCrop }
 						help={ getImageCropHelp }
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Random order' ) }
+						checked={ !! randomOrder }
+						onChange={ toggleRandomOrder }
+					/>
 					<SelectControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
@@ -585,20 +609,22 @@ function GalleryEdit( props ) {
 			</InspectorControls>
 			{ Platform.isWeb && (
 				<>
-					<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>
+					{ ! 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>
+					) }
 					<GapStyles
 						blockGap={ attributes.style?.spacing?.blockGap }
 						clientId={ clientId }
@@ -616,6 +642,7 @@ function GalleryEdit( props ) {
 				}
 				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
+				multiGallerySelection={ multiGallerySelection }
 			/>
 		</>
 	);

package/src/gallery/gallery.js

@@ -24,6 +24,7 @@ export default function Gallery( props ) {
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
 		isContentLocked,
+		multiGallerySelection,
 	} = props;
 
 	const { align, columns, imageCrop } = attributes;
@@ -54,7 +55,9 @@ export default function Gallery( props ) {
 				setAttributes={ setAttributes }
 				isSelected={ isSelected }
 				insertBlocksAfter={ insertBlocksAfter }
-				showToolbarButton={ ! isContentLocked }
+				showToolbarButton={
+					! multiGallerySelection && ! isContentLocked
+				}
 				className="blocks-gallery-caption"
 				label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Add gallery caption' ) }

package/src/gallery/index.php

@@ -32,6 +32,21 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+/**
+ * Filter to randomize the order of image blocks.
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return array The block object with randomized order of image blocks.
+ */
+function block_core_gallery_random_order( $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] && ! empty( $parsed_block['attrs']['randomOrder'] ) ) {
+		shuffle( $parsed_block['innerBlocks'] );
+	}
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_gallery_random_order' );
+
 /**
  * Adds a style tag for the --wp--style--unstable-gallery-gap var.
  *

package/src/gallery/transforms.js

@@ -13,10 +13,6 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA,
 } from './constants';
-import {
-	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
-} from './v1/constants';
 import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
@@ -177,57 +173,7 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-
-			attributes: {
-				images: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: id.toString(),
-							} ) );
-						}
-					},
-				},
-				ids: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids );
-						}
-					},
-				},
-				columns: {
-					type: 'number',
-					shortcode: ( { named: { columns = '3' } } ) => {
-						return parseInt( columns, 10 );
-					},
-				},
-				linkTo: {
-					type: 'string',
-					shortcode: ( { named: { link } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							switch ( link ) {
-								case 'post':
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-								case 'file':
-									return DEPRECATED_LINK_DESTINATION_MEDIA;
-								default:
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-							}
-						}
-						switch ( link ) {
-							case 'post':
-								return LINK_DESTINATION_ATTACHMENT;
-							case 'file':
-								return LINK_DESTINATION_MEDIA;
-							default:
-								return LINK_DESTINATION_NONE;
-						}
-					},
-				},
-			},
-			transform( { named: { ids, columns = 3, link } } ) {
+			transform( { named: { ids, columns = 3, link, orderby } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )
 				);
@@ -244,6 +190,7 @@ const transforms = {
 					{
 						columns: parseInt( columns, 10 ),
 						linkTo,
+						randomOrder: orderby === 'rand',
 					},
 					imageIds.map( ( imageId ) =>
 						createBlock( 'core/image', { id: imageId } )

package/src/group/block.json

@@ -29,7 +29,11 @@
 		"ariaLabel": true,
 		"html": false,
 		"background": {
-			"backgroundImage": true
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
 		},
 		"color": {
 			"gradients": true,

package/src/image/deprecated.js

@@ -651,6 +651,14 @@ const v6 = {
 			},
 		},
 	},
+	migrate( attributes ) {
+		const { height, width } = attributes;
+		return {
+			...attributes,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
+		};
+	},
 	save( { attributes } ) {
 		const {
 			url,

package/src/image/edit.native.js

@@ -812,6 +812,7 @@ export class ImageEdit extends Component {
 						{ ! this.state.isCaptionSelected &&
 							getToolbarEditButton( openMediaOptions ) }
 						<MediaUploadProgress
+							enablePausedUploads
 							coverUrl={ url }
 							mediaId={ id }
 							onUpdateMediaProgress={ this.updateMediaProgress }
@@ -825,6 +826,7 @@ export class ImageEdit extends Component {
 								this.mediaUploadStateReset
 							}
 							renderContent={ ( {
+								isUploadPaused,
 								isUploadInProgress,
 								isUploadFailed,
 								retryMessage,
@@ -843,6 +845,7 @@ export class ImageEdit extends Component {
 												! isCaptionSelected
 											}
 											isUploadFailed={ isUploadFailed }
+											isUploadPaused={ isUploadPaused }
 											isUploadInProgress={
 												isUploadInProgress
 											}

package/src/image/image.js

@@ -48,6 +48,7 @@ import { Caption } from '../utils/caption';
 /**
  * Module constants
  */
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
 
@@ -133,17 +134,49 @@ export default function Image( {
 	const { allowResize = true } = context;
 	const { getBlock } = useSelect( blockEditorStore );
 
-	const { image, multiImageSelection } = useSelect(
+	const { image } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
-			const { getMultiSelectedBlockClientIds, getBlockName } =
-				select( blockEditorStore );
-			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
 				image:
 					id && isSelected
 						? getMedia( id, { context: 'view' } )
 						: null,
+			};
+		},
+		[ id, isSelected ]
+	);
+
+	const {
+		canInsertCover,
+		imageEditing,
+		imageSizes,
+		maxWidth,
+		mediaUpload,
+		multiImageSelection,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getMultiSelectedBlockClientIds,
+				getBlockName,
+				getSettings,
+				canInsertBlockType,
+			} = select( blockEditorStore );
+
+			const rootClientId = getBlockRootClientId( clientId );
+			const settings = getSettings();
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+			return {
+				imageEditing: settings.imageEditing,
+				imageSizes: settings.imageSizes,
+				maxWidth: settings.maxWidth,
+				mediaUpload: settings.mediaUpload,
+				canInsertCover: canInsertBlockType(
+					'core/cover',
+					rootClientId
+				),
 				multiImageSelection:
 					multiSelectedClientIds.length &&
 					multiSelectedClientIds.every(
@@ -152,33 +185,8 @@ export default function Image( {
 					),
 			};
 		},
-		[ id, isSelected ]
+		[ clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockRootClientId,
-					getSettings,
-					canInsertBlockType,
-				} = select( blockEditorStore );
-
-				const rootClientId = getBlockRootClientId( clientId );
-				const settings = getSettings();
-
-				return {
-					imageEditing: settings.imageEditing,
-					imageSizes: settings.imageSizes,
-					maxWidth: settings.maxWidth,
-					mediaUpload: settings.mediaUpload,
-					canInsertCover: canInsertBlockType(
-						'core/cover',
-						rootClientId
-					),
-				};
-			},
-			[ clientId ]
-		);
 
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
@@ -196,7 +204,8 @@ export default function Image( {
 	const isResizable =
 		allowResize &&
 		hasNonContentControls &&
-		! ( isWideAligned && isLargeViewport );
+		! isWideAligned &&
+		isLargeViewport;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -391,7 +400,11 @@ export default function Image( {
 
 	const sizeControls = (
 		<InspectorControls>
-			<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ resetAll }
+				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			>
 				{ isResizable && dimensionsControl }
 			</ToolsPanel>
 		</InspectorControls>
@@ -446,13 +459,17 @@ export default function Image( {
 						<ToolbarButton
 							onClick={ uploadExternal }
 							icon={ upload }
-							label={ __( 'Upload external image' ) }
+							label={ __( 'Upload image to media library' ) }
 						/>
 					</ToolbarGroup>
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ resetAll }
+					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				>
 					{ ! multiImageSelection && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }
@@ -745,7 +762,9 @@ export default function Image( {
 				isSelected={ isSelected }
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
-				showToolbarButton={ hasNonContentControls }
+				showToolbarButton={
+					! multiImageSelection && hasNonContentControls
+				}
 			/>
 		</>
 	);

package/src/image/index.php

@@ -97,12 +97,6 @@ function block_core_image_get_lightbox_settings( $block ) {
 	// Get the lightbox setting from the block attributes.
 	if ( isset( $block['attrs']['lightbox'] ) ) {
 		$lightbox_settings = $block['attrs']['lightbox'];
-		// If the lightbox setting is not set in the block attributes,
-		// check the legacy lightbox settings that are set using the
-		// `gutenberg_should_render_lightbox` filter.
-		// We can remove this elseif statement when the legacy lightbox settings are removed.
-	} elseif ( isset( $block['legacyLightboxSettings'] ) ) {
-		$lightbox_settings = $block['legacyLightboxSettings'];
 	}
 
 	if ( ! isset( $lightbox_settings ) ) {
@@ -239,6 +233,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			type="button"
 			aria-haspopup="dialog"
 			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-init="callbacks.initTriggerButton"
 			data-wp-on--click="actions.showLightbox"
 			data-wp-style--right="context.imageButtonRight"
 			data-wp-style--top="context.imageButtonTop"

package/src/image/view.js

@@ -230,13 +230,16 @@ const { state, actions, callbacks } = store( 'core/image', {
 			const ctx = getContext();
 			const { ref } = getElement();
 			ctx.imageRef = ref;
-			ctx.lightboxTriggerRef =
-				ref.parentElement.querySelector( '.lightbox-trigger' );
 			if ( ref.complete ) {
 				ctx.imageLoaded = true;
 				ctx.imageCurrentSrc = ref.currentSrc;
 			}
 		},
+		initTriggerButton() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			ctx.lightboxTriggerRef = ref;
+		},
 		initLightbox() {
 			const ctx = getContext();
 			const { ref } = getElement();

package/src/list/edit.js

@@ -68,48 +68,40 @@ function useMigrateOnLoad( attributes, clientId ) {
 }
 
 function useOutdentList( clientId ) {
-	const { canOutdent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockRootClientId, getBlock } =
-				innerSelect( blockEditorStore );
-			const parentId = getBlockRootClientId( clientId );
-			return {
-				canOutdent:
-					!! parentId &&
-					getBlock( parentId ).name === 'core/list-item',
-			};
-		},
-		[ clientId ]
-	);
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
 	const { getBlockRootClientId, getBlockAttributes, getBlock } =
 		useSelect( blockEditorStore );
 
-	return [
-		canOutdent,
-		useCallback( () => {
-			const parentBlockId = getBlockRootClientId( clientId );
-			const parentBlockAttributes = getBlockAttributes( parentBlockId );
-			// Create a new parent block without the inner blocks.
-			const newParentBlock = createBlock(
-				'core/list-item',
-				parentBlockAttributes
-			);
-			const { innerBlocks } = getBlock( clientId );
-			// Replace the parent block with a new parent block without inner blocks,
-			// and make the inner blocks siblings of the parent.
-			replaceBlocks(
-				[ parentBlockId ],
-				[ newParentBlock, ...innerBlocks ]
-			);
-			// Select the last child of the list being outdent.
-			selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId );
-		}, [ clientId ] ),
-	];
+	return useCallback( () => {
+		const parentBlockId = getBlockRootClientId( clientId );
+		const parentBlockAttributes = getBlockAttributes( parentBlockId );
+		// Create a new parent block without the inner blocks.
+		const newParentBlock = createBlock(
+			'core/list-item',
+			parentBlockAttributes
+		);
+		const { innerBlocks } = getBlock( clientId );
+		// Replace the parent block with a new parent block without inner blocks,
+		// and make the inner blocks siblings of the parent.
+		replaceBlocks( [ parentBlockId ], [ newParentBlock, ...innerBlocks ] );
+		// Select the last child of the list being outdent.
+		selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId );
+	}, [ clientId ] );
 }
 
 function IndentUI( { clientId } ) {
-	const [ canOutdent, outdentList ] = useOutdentList( clientId );
+	const outdentList = useOutdentList( clientId );
+	const canOutdent = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
+			return (
+				getBlockName( getBlockRootClientId( clientId ) ) ===
+				'core/list-item'
+			);
+		},
+		[ clientId ]
+	);
 	return (
 		<>
 			<ToolbarButton

package/src/list-item/edit.js

@@ -6,6 +6,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	BlockControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { isRTL, __ } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
@@ -16,6 +17,7 @@ import {
 	formatIndent,
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -32,8 +34,22 @@ import {
 import { convertToListItems } from './utils';
 
 export function IndentUI( { clientId } ) {
-	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
-	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
+	const indentListItem = useIndentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
+	const { canIndent, canOutdent } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
+			return {
+				canIndent: getBlockIndex( clientId ) > 0,
+				canOutdent:
+					getBlockName(
+						getBlockRootClientId( getBlockRootClientId( clientId ) )
+					) === 'core/list-item',
+			};
+		},
+		[ clientId ]
+	);
 
 	return (
 		<>