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

package/src/image/image.js

@@ -15,41 +15,24 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useViewportMatch, usePrevious } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
-	RichText,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSettings,
 	__experimentalImageEditor as ImageEditor,
-	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-	useCallback,
-} from '@wordpress/element';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
-import {
-	createBlock,
-	getDefaultBlockName,
-	switchToBlockType,
-} from '@wordpress/blocks';
-import {
-	crop,
-	overlayText,
-	upload,
-	caption as captionIcon,
-} from '@wordpress/icons';
+import { switchToBlockType } from '@wordpress/blocks';
+import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -60,10 +43,12 @@ import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
 import { isExternalImage } from './edit';
+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';
 
@@ -125,7 +110,6 @@ export default function Image( {
 	const {
 		url = '',
 		alt,
-		caption,
 		align,
 		id,
 		href,
@@ -147,22 +131,52 @@ export default function Image( {
 	const numericHeight = height ? parseInt( height, 10 ) : undefined;
 
 	const imageRef = useRef();
-	const prevCaption = usePrevious( caption );
-	const [ showCaption, setShowCaption ] = useState( !! caption );
 	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(
@@ -171,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 } =
@@ -215,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
@@ -247,24 +237,6 @@ export default function Image( {
 			.catch( () => {} );
 	}, [ id, url, isSelected, externalBlob, canUploadMedia ] );
 
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
-
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
 	// width and height is otherwise lost when switching between alignments.
@@ -355,11 +327,8 @@ export default function Image( {
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
-			if ( ! caption ) {
-				setShowCaption( false );
-			}
 		}
-	}, [ isSelected, caption ] );
+	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
@@ -420,6 +389,7 @@ export default function Image( {
 
 	const resetAll = () => {
 		setAttributes( {
+			alt: undefined,
 			width: undefined,
 			height: undefined,
 			scale: undefined,
@@ -430,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>
@@ -439,23 +413,6 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ hasNonContentControls && (
-					<ToolbarButton
-						onClick={ () => {
-							setShowCaption( ! showCaption );
-							if ( showCaption && caption ) {
-								setAttributes( { caption: undefined } );
-							}
-						} }
-						icon={ captionIcon }
-						isPressed={ showCaption }
-						label={
-							showCaption
-								? __( 'Remove caption' )
-								: __( 'Add caption' )
-						}
-					/>
-				) }
 				{ ! multiImageSelection && ! isEditingImage && (
 					<ImageURLInputUI
 						url={ href || '' }
@@ -502,25 +459,29 @@ 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' ) }
 							isShownByDefault={ true }
-							hasValue={ () => alt !== '' }
+							hasValue={ () => !! alt }
 							onDeselect={ () =>
 								setAttributes( { alt: undefined } )
 							}
 						>
 							<TextareaControl
 								label={ __( 'Alternative text' ) }
-								value={ alt }
+								value={ alt || '' }
 								onChange={ updateAlt }
 								help={
 									<>
@@ -538,11 +499,13 @@ export default function Image( {
 						</ToolsPanelItem>
 					) }
 					{ isResizable && dimensionsControl }
-					<ResolutionTool
-						value={ sizeSlug }
-						onChange={ updateImage }
-						options={ imageSizeOptions }
-					/>
+					{ !! imageSizeOptions.length && (
+						<ResolutionTool
+							value={ sizeSlug }
+							onChange={ updateImage }
+							options={ imageSizeOptions }
+						/>
+					) }
 					{ showLightboxToggle && (
 						<ToolsPanelItem
 							hasValue={ () => !! lightbox }
@@ -793,29 +756,16 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
-			{ showCaption &&
-				( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						identifier="caption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						ref={ captionRef }
-						tagName="figcaption"
-						aria-label={ __( 'Image caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				label={ __( 'Image caption text' ) }
+				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/save.js

@@ -36,7 +36,9 @@ export default function save( { attributes } ) {
 	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const classes = classnames( {
-		[ `align${ align }` ]: align,
+		// All other align classes are handled by block supports.
+		// `{ align: 'none' }` is unique to transforms for the image block.
+		alignnone: 'none' === align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
 		'has-custom-border':

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/block.json

@@ -12,16 +12,23 @@
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "li",
-			"default": "",
 			"__experimentalRole": "content"
 		}
 	},
 	"supports": {
 		"className": false,
 		"__experimentalSelector": "li",
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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 );
+		};
+	}, [] );
 }