@wordpress/block-library 8.25.0 → 8.26.0

package/src/gallery/index.php

@@ -32,6 +32,24 @@ 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;
+
+	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 (
 		<>

package/src/list-item/hooks/use-enter.js

@@ -19,71 +19,72 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
+	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canOutdent, outdentListItem ] = useOutdentListItem(
-		propsRef.current.clientId
-	);
-	return useRefEffect(
-		( element ) => {
-			function onKeyDown( event ) {
-				if ( event.defaultPrevented || event.keyCode !== ENTER ) {
-					return;
-				}
-				const { content, clientId } = propsRef.current;
-				if ( content.length ) {
-					return;
-				}
-				event.preventDefault();
-				if ( canOutdent ) {
-					outdentListItem();
-					return;
-				}
-				// Here we are in top level list so we need to split.
-				const topParentListBlock = getBlock(
-					getBlockRootClientId( clientId )
-				);
-				const blockIndex = getBlockIndex( clientId );
-				const head = cloneBlock( {
-					...topParentListBlock,
-					innerBlocks: topParentListBlock.innerBlocks.slice(
-						0,
-						blockIndex
-					),
-				} );
-				const middle = createBlock( getDefaultBlockName() );
-				// Last list item might contain a `list` block innerBlock
-				// In that case append remaining innerBlocks blocks.
-				const after = [
-					...( topParentListBlock.innerBlocks[ blockIndex ]
-						.innerBlocks[ 0 ]?.innerBlocks || [] ),
-					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
-				];
-				const tail = after.length
-					? [
-							cloneBlock( {
-								...topParentListBlock,
-								innerBlocks: after,
-							} ),
-					  ]
-					: [];
-				replaceBlocks(
-					topParentListBlock.clientId,
-					[ head, middle, ...tail ],
-					1
-				);
-				// We manually change the selection here because we are replacing
-				// a different block than the selected one.
-				selectionChange( middle.clientId );
+	const outdentListItem = useOutdentListItem();
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+				return;
 			}
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			event.preventDefault();
+			const canOutdent =
+				getBlockName(
+					getBlockRootClientId(
+						getBlockRootClientId( propsRef.current.clientId )
+					)
+				) === 'core/list-item';
+			if ( canOutdent ) {
+				outdentListItem();
+				return;
+			}
+			// Here we are in top level list so we need to split.
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			// Last list item might contain a `list` block innerBlock
+			// In that case append remaining innerBlocks blocks.
+			const after = [
+				...( topParentListBlock.innerBlocks[ blockIndex ]
+					.innerBlocks[ 0 ]?.innerBlocks || [] ),
+				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+			];
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		}
 
-			element.addEventListener( 'keydown', onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', onKeyDown );
-			};
-		},
-		[ canOutdent ]
-	);
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
 }

package/src/list-item/hooks/use-enter.native.js

@@ -17,13 +17,11 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props, preventDefault ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
+	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canOutdent, outdentListItem ] = useOutdentListItem(
-		propsRef.current.clientId
-	);
+	const outdentListItem = useOutdentListItem();
 
 	return {
 		onEnter() {
@@ -32,7 +30,13 @@ export default function useEnter( props, preventDefault ) {
 				return;
 			}
 			preventDefault.current = true;
-			if ( canOutdent ) {
+			if (
+				getBlockName(
+					getBlockRootClientId(
+						getBlockRootClientId( propsRef.current.clientId )
+					)
+				) === 'core/list-item'
+			) {
 				outdentListItem();
 				return;
 			}