@wordpress/block-editor 12.22.0 → 12.24.0

package/src/components/rich-text/native/get-format-colors.native.js

@@ -27,7 +27,7 @@ export function getFormatColors( formats, colors ) {
 						);
 						const currentStyles = currentFormat?.attributes?.style;
 						if (
-							colorObject &&
+							colorObject?.color &&
 							( ! currentStyles ||
 								currentStyles?.indexOf( colorObject.color ) ===
 									-1 )

package/src/components/rich-text/native/index.native.js

@@ -1222,8 +1222,8 @@ export class RichText extends Component {
 					ref={ ( ref ) => {
 						this._editor = ref;
 
-						if ( this.props.setRef ) {
-							this.props.setRef( ref );
+						if ( this.props.nativeEditorRef ) {
+							this.props.nativeEditorRef( ref );
 						}
 					} }
 					style={ {

package/src/components/rich-text/use-undo-automatic-change.js

@@ -3,7 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-import { BACKSPACE, DELETE, ESCAPE } from '@wordpress/keycodes';
+import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -20,11 +20,7 @@ export function useUndoAutomaticChange() {
 				return;
 			}
 
-			if (
-				keyCode !== DELETE &&
-				keyCode !== BACKSPACE &&
-				keyCode !== ESCAPE
-			) {
+			if ( keyCode !== BACKSPACE && keyCode !== ESCAPE ) {
 				return;
 			}
 

package/src/components/rich-text/with-deprecations.js

@@ -3,7 +3,6 @@
  */
 import { forwardRef } from '@wordpress/element';
 import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
 import { __unstableCreateElement } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -36,12 +35,10 @@ export function withDeprecations( Component ) {
 		}
 
 		const NewComponent = props.multiline ? RichTextMultiline : Component;
-		const instanceId = useInstanceId( NewComponent );
 
 		return (
 			<NewComponent
 				{ ...props }
-				identifier={ props.identifier || instanceId }
 				value={ value }
 				onChange={ onChange }
 				ref={ ref }

package/src/components/url-popover/image-url-input-ui.js

@@ -46,6 +46,7 @@ const ImageURLInputUI = ( {
 	showLightboxSetting,
 	lightboxEnabled,
 	onSetLightbox,
+	resetLightbox,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	// Use internal state instead of a ref to make sure that the component
@@ -241,7 +242,9 @@ const ImageURLInputUI = ( {
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
-	const showLinkEditor = ( ! linkEditorValue && ! lightboxEnabled ) === true;
+	const hideLightboxPanel =
+		! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );
+	const showLinkEditor = ! linkEditorValue && hideLightboxPanel;
 
 	const urlLabel = (
 		getLinkDestinations().find(
@@ -249,6 +252,65 @@ const ImageURLInputUI = ( {
 		) || {}
 	).title;
 
+	const PopoverChildren = () => {
+		if (
+			lightboxEnabled &&
+			showLightboxSetting &&
+			! url &&
+			! isEditingLink
+		) {
+			return (
+				<div className="block-editor-url-popover__expand-on-click">
+					<Icon icon={ fullscreen } />
+					<div className="text">
+						<p>{ __( 'Expand on click' ) }</p>
+						<p className="description">
+							{ __( 'Scales the image with a lightbox effect' ) }
+						</p>
+					</div>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Disable expand on click' ) }
+						onClick={ () => {
+							onSetLightbox( false );
+						} }
+						size="compact"
+					/>
+				</div>
+			);
+		} else if ( ! url || isEditingLink ) {
+			return (
+				<URLPopover.LinkEditor
+					className="block-editor-format-toolbar__link-container-content"
+					value={ linkEditorValue }
+					onChangeInputValue={ setUrlInput }
+					onSubmit={ onSubmitLinkChange() }
+					autocompleteRef={ autocompleteRef }
+				/>
+			);
+		} else if ( url && ! isEditingLink ) {
+			return (
+				<>
+					<URLPopover.LinkViewer
+						className="block-editor-format-toolbar__link-container-content"
+						url={ url }
+						onEditLinkClick={ startEditLink }
+						urlLabel={ urlLabel }
+					/>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Remove link' ) }
+						onClick={ () => {
+							onLinkRemove();
+							resetLightbox();
+						} }
+						size="compact"
+					/>
+				</>
+			);
+		}
+	};
+
 	return (
 		<>
 			<ToolbarButton
@@ -258,7 +320,9 @@ const ImageURLInputUI = ( {
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
-				isActive={ !! url || lightboxEnabled }
+				isActive={
+					!! url || ( lightboxEnabled && showLightboxSetting )
+				}
 			/>
 			{ isOpen && (
 				<URLPopover
@@ -267,7 +331,7 @@ const ImageURLInputUI = ( {
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={
-						! lightboxEnabled ? () => advancedOptions : null
+						hideLightboxPanel ? () => advancedOptions : null
 					}
 					additionalControls={
 						showLinkEditor && (
@@ -314,54 +378,7 @@ const ImageURLInputUI = ( {
 					}
 					offset={ 13 }
 				>
-					{ ( ! url || isEditingLink ) && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkEditor
-								className="block-editor-format-toolbar__link-container-content"
-								value={ linkEditorValue }
-								onChangeInputValue={ setUrlInput }
-								onSubmit={ onSubmitLinkChange() }
-								autocompleteRef={ autocompleteRef }
-							/>
-						</>
-					) }
-					{ url && ! isEditingLink && ! lightboxEnabled && (
-						<>
-							<URLPopover.LinkViewer
-								className="block-editor-format-toolbar__link-container-content"
-								url={ url }
-								onEditLinkClick={ startEditLink }
-								urlLabel={ urlLabel }
-							/>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Remove link' ) }
-								onClick={ onLinkRemove }
-								size="compact"
-							/>
-						</>
-					) }
-					{ ! url && ! isEditingLink && lightboxEnabled && (
-						<div className="block-editor-url-popover__expand-on-click">
-							<Icon icon={ fullscreen } />
-							<div className="text">
-								<p>{ __( 'Expand on click' ) }</p>
-								<p className="description">
-									{ __(
-										'Scales the image with a lightbox effect'
-									) }
-								</p>
-							</div>
-							<Button
-								icon={ linkOff }
-								label={ __( 'Disable expand on click' ) }
-								onClick={ () => {
-									onSetLightbox( false );
-								} }
-								size="compact"
-							/>
-						</div>
-					) }
+					{ PopoverChildren() }
 				</URLPopover>
 			) }
 		</>

package/src/components/use-block-commands/index.js

@@ -27,37 +27,55 @@ import { store as blockEditorStore } from '../../store';
 
 export const useTransformCommands = () => {
 	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const { blocks, clientIds, canRemove, possibleBlockTransformations } =
-		useSelect( ( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockTransformItems,
-				getSelectedBlockClientIds,
-				getBlocksByClientId,
-				canRemoveBlocks,
-			} = select( blockEditorStore );
-
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlocks = getBlocksByClientId(
-				selectedBlockClientIds
-			);
-			const rootClientId = getBlockRootClientId(
-				selectedBlockClientIds[ 0 ]
-			);
+	const {
+		blocks,
+		clientIds,
+		canRemove,
+		possibleBlockTransformations,
+		invalidSelection,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockRootClientId,
+			getBlockTransformItems,
+			getSelectedBlockClientIds,
+			getBlocksByClientId,
+			canRemoveBlocks,
+		} = select( blockEditorStore );
+
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlocks = getBlocksByClientId( selectedBlockClientIds );
+
+		// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
+		// These nulls will cause fatal errors down the line.
+		// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
+		// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
+		if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
 			return {
-				blocks: selectedBlocks,
-				clientIds: selectedBlockClientIds,
-				possibleBlockTransformations: getBlockTransformItems(
-					selectedBlocks,
-					rootClientId
-				),
-				canRemove: canRemoveBlocks(
-					selectedBlockClientIds,
-					rootClientId
-				),
+				invalidSelection: true,
 			};
-		}, [] );
+		}
 
+		const rootClientId = getBlockRootClientId(
+			selectedBlockClientIds[ 0 ]
+		);
+		return {
+			blocks: selectedBlocks,
+			clientIds: selectedBlockClientIds,
+			possibleBlockTransformations: getBlockTransformItems(
+				selectedBlocks,
+				rootClientId
+			),
+			canRemove: canRemoveBlocks( selectedBlockClientIds, rootClientId ),
+			invalidSelection: false,
+		};
+	}, [] );
+
+	if ( invalidSelection ) {
+		return {
+			isLoading: false,
+			commands: [],
+		};
+	}
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
 	function selectForMultipleBlocks( insertedBlocks ) {

package/src/components/use-block-display-information/index.js

@@ -6,6 +6,7 @@ import {
 	store as blocksStore,
 	isReusableBlock,
 	isTemplatePart,
+	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -68,11 +69,8 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const {
-				getBlockName,
-				getBlockAttributes,
-				__experimentalGetReusableBlockTitle,
-			} = select( blockEditorStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -80,12 +78,12 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! blockType ) return null;
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
-			const isReusable = isReusableBlock( blockType );
-			const resusableTitle = isReusable
-				? __experimentalGetReusableBlockTitle( attributes.ref )
+			const isSynced =
+				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const syncedTitle = isSynced
+				? getBlockLabel( blockType, attributes )
 				: undefined;
-			const title = resusableTitle || blockType.title;
-			const isSynced = isReusable || isTemplatePart( blockType );
+			const title = syncedTitle || blockType.title;
 			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,

package/src/components/use-paste-styles/index.js

@@ -15,6 +15,7 @@ import {
 	hasAlignSupport,
 	hasBorderSupport,
 	hasBackgroundColorSupport,
+	hasTextAlignSupport,
 	hasTextColorSupport,
 	hasGradientSupport,
 	hasCustomClassNameSupport,
@@ -59,6 +60,7 @@ const STYLE_ATTRIBUTES = {
 	align: hasAlignSupport,
 	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
 	backgroundColor: hasBackgroundColorSupport,
+	textAlign: hasTextAlignSupport,
 	textColor: hasTextColorSupport,
 	gradient: hasGradientSupport,
 	className: hasCustomClassNameSupport,

package/src/hooks/anchor.js

@@ -70,17 +70,19 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 				help={
 					<>
 						{ __(
-							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
 						) }
-
 						{ isWeb && (
-							<ExternalLink
-								href={ __(
-									'https://wordpress.org/documentation/article/page-jumps/'
-								) }
-							>
-								{ __( 'Learn more about anchors' ) }
-							</ExternalLink>
+							<>
+								{ ' ' }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-jumps/'
+									) }
+								>
+									{ __( 'Learn more about anchors' ) }
+								</ExternalLink>
+							</>
 						) }
 					</>
 				}