@wordpress/block-editor 12.13.0 → 12.14.0

package/src/components/list-view/block-select-button.js

@@ -19,6 +19,7 @@ import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { __, sprintf } from '@wordpress/i18n';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
+import { useListViewContext } from './context';
 
 function ListViewBlockSelectButton(
 	{
@@ -64,10 +66,12 @@ function ListViewBlockSelectButton(
 		getBlocksByClientId,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { duplicateBlocks, removeBlocks } = useDispatch( blockEditorStore );
+	const { duplicateBlocks, multiSelect, removeBlocks } =
+		useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
+	const { rootClientId } = useListViewContext();
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -183,6 +187,45 @@ function ListViewBlockSelectButton(
 					updateFocusAndSelection( updatedBlocks[ 0 ], false );
 				}
 			}
+		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+
+			const { firstBlockRootClientId, selectedBlockClientIds } =
+				getBlocksToUpdate();
+			const blockClientIds = getBlockOrder( firstBlockRootClientId );
+			if ( ! blockClientIds.length ) {
+				return;
+			}
+
+			// If we have selected all sibling nested blocks, try selecting up a level.
+			// This is a similar implementation to that used by `useSelectAll`.
+			// `isShallowEqual` is used for the list view instead of a length check,
+			// as the array of siblings of the currently focused block may be a different
+			// set of blocks from the current block selection if the user is focused
+			// on a different part of the list view from the block selection.
+			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
+				// Only select up a level if the first block is not the root block.
+				// This ensures that the block selection can't break out of the root block
+				// used by the list view, if the list view is only showing a partial hierarchy.
+				if (
+					firstBlockRootClientId &&
+					firstBlockRootClientId !== rootClientId
+				) {
+					updateFocusAndSelection( firstBlockRootClientId, true );
+					return;
+				}
+			}
+
+			// Select all while passing `null` to skip focusing to the editor canvas,
+			// and retain focus within the list view.
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ],
+				null
+			);
 		}
 	}
 

package/src/components/list-view/block.js

@@ -69,17 +69,17 @@ function ListViewBlock( {
 	const blockTitle =
 		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
-		[ clientId ]
-	);
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
-		[ clientId ]
-	);
-	const blockEditingMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockEditingMode( clientId ),
+	const { block, blockName, blockEditingMode } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getBlockEditingMode } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				blockEditingMode: getBlockEditingMode( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 

package/src/components/list-view/index.js

@@ -222,6 +222,7 @@ function ListViewComponent(
 			insertedBlock,
 			setInsertedBlock,
 			treeGridElementRef: elementRef,
+			rootClientId,
 		} ),
 		[
 			draggedClientIds,
@@ -233,6 +234,7 @@ function ListViewComponent(
 			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
+			rootClientId,
 		]
 	);
 

package/src/components/media-replace-flow/style.scss

@@ -17,6 +17,7 @@
 	&.has-siblings {
 		border-top: $border-width solid $gray-900;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-10;
 	}
 
 	.block-editor-media-replace-flow__image-url-label {
@@ -55,8 +56,7 @@
 		}
 
 		.block-editor-link-control__search-actions {
-			top: 0; // cancel default top positioning
-			right: 4px;
+			padding: $grid-unit-10 0 0;
 		}
 	}
 }

package/src/components/navigable-toolbar/index.js

@@ -9,9 +9,16 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
 
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
@@ -28,6 +35,7 @@ function hasFocusWithin( container ) {
 
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
+
 	if ( firstTabbable ) {
 		firstTabbable.focus( {
 			// When focusing newly mounted toolbars,
@@ -38,7 +46,7 @@ function focusFirstTabbableIn( container ) {
 	}
 }
 
-function useIsAccessibleToolbar( ref ) {
+function useIsAccessibleToolbar( toolbarRef ) {
 	/*
 	 * By default, we'll assume the starting accessible state of the Toolbar
 	 * is true, as it seems to be the most common case.
@@ -62,7 +70,7 @@ function useIsAccessibleToolbar( ref ) {
 	);
 
 	const determineIsAccessibleToolbar = useCallback( () => {
-		const tabbables = focus.tabbable.find( ref.current );
+		const tabbables = focus.tabbable.find( toolbarRef.current );
 		const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
 		if ( ! onlyToolbarItem ) {
 			deprecated( 'Using custom components as toolbar controls', {
@@ -73,7 +81,7 @@ function useIsAccessibleToolbar( ref ) {
 			} );
 		}
 		setIsAccessibleToolbar( onlyToolbarItem );
-	}, [] );
+	}, [ toolbarRef ] );
 
 	useLayoutEffect( () => {
 		// Toolbar buttons may be rendered asynchronously, so we use
@@ -81,28 +89,32 @@ function useIsAccessibleToolbar( ref ) {
 		const observer = new window.MutationObserver(
 			determineIsAccessibleToolbar
 		);
-		observer.observe( ref.current, { childList: true, subtree: true } );
+		observer.observe( toolbarRef.current, {
+			childList: true,
+			subtree: true,
+		} );
 		return () => observer.disconnect();
-	}, [ isAccessibleToolbar ] );
+	}, [ determineIsAccessibleToolbar, isAccessibleToolbar, toolbarRef ] );
 
 	return isAccessibleToolbar;
 }
 
-function useToolbarFocus(
-	ref,
+function useToolbarFocus( {
+	toolbarRef,
 	focusOnMount,
 	isAccessibleToolbar,
 	defaultIndex,
 	onIndexChange,
-	shouldUseKeyboardFocusShortcut
-) {
+	shouldUseKeyboardFocusShortcut,
+	focusEditorOnEscape,
+} ) {
 	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
 	const [ initialIndex ] = useState( defaultIndex );
 
 	const focusToolbar = useCallback( () => {
-		focusFirstTabbableIn( ref.current );
-	}, [] );
+		focusFirstTabbableIn( toolbarRef.current );
+	}, [ toolbarRef ] );
 
 	const focusToolbarViaShortcut = () => {
 		if ( shouldUseKeyboardFocusShortcut ) {
@@ -121,7 +133,7 @@ function useToolbarFocus(
 
 	useEffect( () => {
 		// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
-		const navigableToolbarRef = ref.current;
+		const navigableToolbarRef = toolbarRef.current;
 		// If initialIndex is passed, we focus on that toolbar item when the
 		// toolbar gets mounted and initial focus is not forced.
 		// We have to wait for the next browser paint because block controls aren't
@@ -150,32 +162,68 @@ function useToolbarFocus(
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
-	}, [ initialIndex, initialFocusOnMount ] );
+	}, [ initialIndex, initialFocusOnMount, toolbarRef ] );
+
+	const { lastFocus } = useSelect( ( select ) => {
+		const { getLastFocus } = select( blockEditorStore );
+		return {
+			lastFocus: getLastFocus(),
+		};
+	}, [] );
+	/**
+	 * Handles returning focus to the block editor canvas when pressing escape.
+	 */
+	useEffect( () => {
+		const navigableToolbarRef = toolbarRef.current;
+
+		if ( focusEditorOnEscape ) {
+			const handleKeyDown = ( event ) => {
+				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
+					// Focus the last focused element when pressing escape.
+					event.preventDefault();
+					lastFocus.current.focus();
+				}
+			};
+			navigableToolbarRef.addEventListener( 'keydown', handleKeyDown );
+			return () => {
+				navigableToolbarRef.removeEventListener(
+					'keydown',
+					handleKeyDown
+				);
+			};
+		}
+	}, [ focusEditorOnEscape, lastFocus, toolbarRef ] );
 }
 
-function NavigableToolbar( {
+export default function NavigableToolbar( {
 	children,
 	focusOnMount,
+	focusEditorOnEscape = false,
 	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
 	...props
 } ) {
-	const ref = useRef();
-	const isAccessibleToolbar = useIsAccessibleToolbar( ref );
+	const toolbarRef = useRef();
+	const isAccessibleToolbar = useIsAccessibleToolbar( toolbarRef );
 
-	useToolbarFocus(
-		ref,
+	useToolbarFocus( {
+		toolbarRef,
 		focusOnMount,
 		isAccessibleToolbar,
-		initialIndex,
+		defaultIndex: initialIndex,
 		onIndexChange,
-		shouldUseKeyboardFocusShortcut
-	);
+		shouldUseKeyboardFocusShortcut,
+		focusEditorOnEscape,
+	} );
 
 	if ( isAccessibleToolbar ) {
 		return (
-			<Toolbar label={ props[ 'aria-label' ] } ref={ ref } { ...props }>
+			<Toolbar
+				label={ props[ 'aria-label' ] }
+				ref={ toolbarRef }
+				{ ...props }
+			>
 				{ children }
 			</Toolbar>
 		);
@@ -185,12 +233,10 @@ function NavigableToolbar( {
 		<NavigableMenu
 			orientation="horizontal"
 			role="toolbar"
-			ref={ ref }
+			ref={ toolbarRef }
 			{ ...props }
 		>
 			{ children }
 		</NavigableMenu>
 	);
 }
-
-export default NavigableToolbar;

package/src/components/plain-text/README.md

@@ -34,7 +34,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return React.createElement( wp.editor.PlainText, {
+		return React.createElement( wp.blockEditor.PlainText, {
 			className: props.className,
 			value: props.attributes.content,
 			onChange: function( content ) {
@@ -48,8 +48,8 @@ wp.blocks.registerBlockType( /* ... */, {
 {% ESNext %}
 
 ```js
-const { registerBlockType } = wp.blocks;
-const { PlainText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...

package/src/components/provider/use-block-sync.js

@@ -76,18 +76,11 @@ export default function useBlockSync( {
 		resetBlocks,
 		resetSelection,
 		replaceInnerBlocks,
-		selectBlock,
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
-	const {
-		hasSelectedBlock,
-		getBlockName,
-		getBlocks,
-		getSelectionStart,
-		getSelectionEnd,
-		getBlock,
-	} = registry.select( blockEditorStore );
+	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
+		registry.select( blockEditorStore );
 	const isControlled = useSelect(
 		( select ) => {
 			return (
@@ -180,9 +173,6 @@ export default function useBlockSync( {
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
 			pendingChanges.current.outgoing = [];
-			const hadSelection = hasSelectedBlock();
-			const selectionAnchor = getSelectionStart();
-			const selectionFocus = getSelectionEnd();
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -191,15 +181,6 @@ export default function useBlockSync( {
 					controlledSelection.selectionEnd,
 					controlledSelection.initialPosition
 				);
-			} else {
-				const selectionStillExists = getBlock(
-					selectionAnchor.clientId
-				);
-				if ( hadSelection && ! selectionStillExists ) {
-					selectBlock( clientId );
-				} else {
-					resetSelection( selectionAnchor, selectionFocus );
-				}
 			}
 		}
 	}, [ controlledBlocks, clientId ] );

package/src/components/rich-text/README.md

@@ -71,7 +71,8 @@ _Optional._ A list of autocompleters to use instead of the default.
 
 ### `preserveWhiteSpace: Boolean`
 
-_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space. If turned on, soft line breaks will be saved as newline characters, not as line break elements.
+_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space or
+trimmed.
 
 ## RichText.Content
 
@@ -94,7 +95,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	edit: function( props ) {
-		return React.createElement( wp.editor.RichText, {
+		return React.createElement( wp.blockEditor.RichText, {
 			tagName: 'h2',
 			className: props.className,
 			value: props.attributes.content,
@@ -105,7 +106,7 @@ wp.blocks.registerBlockType( /* ... */, {
 	},
 
 	save: function( props ) {
-		return React.createElement( wp.editor.RichText.Content, {
+		return React.createElement( wp.blockEditor.RichText.Content, {
 			tagName: 'h2', value: props.attributes.content
 		} );
 	}
@@ -115,8 +116,8 @@ wp.blocks.registerBlockType( /* ... */, {
 {% ESNext %}
 
 ```js
-const { registerBlockType } = wp.blocks;
-const { RichText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { RichText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...
@@ -161,7 +162,7 @@ wp.richText.registerFormatType( /* ... */, {
 	/* ... */
 	edit: function( props ) {
 		return React.createElement(
-			wp.editor.RichTextToolbarButton, {
+			wp.blockEditor.RichTextToolbarButton, {
 				icon: 'editor-code',
 				title: 'My formatting button',
 				onClick: function() { /* ... */ }
@@ -175,8 +176,8 @@ wp.richText.registerFormatType( /* ... */, {
 {% ESNext %}
 
 ```js
-import { registerFormatType } from 'wp-rich-text';
-import { richTextToolbarButton } from 'wp-editor';
+import { registerFormatType } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
 
 registerFormatType( /* ... */, {
 	/* ... */

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

@@ -348,7 +348,6 @@ export function RichTextWrapper(
 						onReplace,
 						onSplit,
 						__unstableEmbedURLOnPaste,
-						preserveWhiteSpace,
 						pastePlainText,
 					} ),
 					useDelete( {

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

@@ -17,7 +17,6 @@ import {
 } from '@wordpress/blocks';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import {
-	__experimentalRichText as RichText,
 	__unstableCreateElement,
 	isEmpty,
 	insert,
@@ -46,6 +45,7 @@ import {
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
+import RichText from './native';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -688,6 +688,8 @@ ForwardedRichTextContainer.Content.defaultProps = {
 	value: '',
 };
 
+ForwardedRichTextContainer.Raw = RichText;
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */

package/src/components/rich-text/native/format-edit.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+
+export default function FormatEdit( {
+	formatTypes,
+	onChange,
+	onFocus,
+	value,
+	forwardedRef,
+} ) {
+	return formatTypes.map( ( settings ) => {
+		const { name, edit: Edit } = settings;
+
+		if ( ! Edit ) {
+			return null;
+		}
+
+		const activeFormat = getActiveFormat( value, name );
+		const isActive = activeFormat !== undefined;
+		const activeObject = getActiveObject( value );
+		const isObjectActive =
+			activeObject !== undefined && activeObject.type === name;
+
+		return (
+			<Edit
+				key={ name }
+				isActive={ isActive }
+				activeAttributes={
+					isActive ? activeFormat.attributes || {} : {}
+				}
+				isObjectActive={ isObjectActive }
+				activeObjectAttributes={
+					isObjectActive ? activeObject.attributes || {} : {}
+				}
+				value={ value }
+				onChange={ onChange }
+				onFocus={ onFocus }
+				contentRef={ forwardedRef }
+			/>
+		);
+	} );
+}

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

@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { getColorObjectByAttributeValues } from '../../../components/colors';
+
+const FORMAT_TYPE = 'core/text-color';
+const REGEX_TO_MATCH = /^has-(.*)-color$/;
+const TAGS_TO_SEARCH = /\<mark/;
+
+export function getFormatColors( value, formats, colors ) {
+	if ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {
+		const newFormats = formats.slice();
+
+		newFormats.forEach( ( format ) => {
+			format.forEach( ( currentFormat ) => {
+				if ( currentFormat?.type === FORMAT_TYPE ) {
+					const className = currentFormat?.attributes?.class;
+					currentFormat.attributes.style =
+						currentFormat.attributes.style.replace( / /g, '' );
+
+					className?.split( ' ' ).forEach( ( currentClass ) => {
+						const match = currentClass.match( REGEX_TO_MATCH );
+						if ( match ) {
+							const [ , colorSlug ] =
+								currentClass.match( REGEX_TO_MATCH );
+							const colorObject = getColorObjectByAttributeValues(
+								colors,
+								colorSlug
+							);
+							const currentStyles =
+								currentFormat?.attributes?.style;
+							if (
+								colorObject &&
+								( ! currentStyles ||
+									currentStyles?.indexOf(
+										colorObject.color
+									) === -1 )
+							) {
+								currentFormat.attributes.style = [
+									`color: ${ colorObject.color }`,
+									currentStyles,
+								].join( ';' );
+							}
+						}
+					} );
+				}
+			} );
+		} );
+
+		return newFormats;
+	}
+
+	return formats;
+}

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

@@ -0,0 +1 @@
+export default () => {};