@wordpress/block-editor 12.13.0 → 12.15.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

@@ -20,36 +20,9 @@ _Optional._ The component forwards the `ref` property to the `TextareaAutosize`
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			type: 'string',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.editor.PlainText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			},
-		} );
-	},
-} );
-```
-
-{% ESNext %}
-
 ```js
-const { registerBlockType } = wp.blocks;
-const { PlainText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...
@@ -72,4 +45,3 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}

package/src/components/preview-options/index.js

@@ -19,6 +19,7 @@ export default function PreviewOptions( {
 	deviceType,
 	setDeviceType,
 	label,
+	showIconLabels,
 } ) {
 	const isMobile = useViewportMatch( 'small', '<' );
 	if ( isMobile ) return null;
@@ -35,6 +36,7 @@ export default function PreviewOptions( {
 		disabled: ! isEnabled,
 		__experimentalIsFocusable: ! isEnabled,
 		children: viewLabel,
+		showTooltip: ! showIconLabels,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

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
 
@@ -79,44 +80,9 @@ _Optional._ Whether or not to preserve white space characters in the `value`. No
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
 ```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'h2',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.editor.RichText, {
-			tagName: 'h2',
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.editor.RichText.Content, {
-			tagName: 'h2', value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
-```js
-const { registerBlockType } = wp.blocks;
-const { RichText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { RichText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...
@@ -145,7 +111,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 ## RichTextToolbarButton
 
@@ -153,30 +118,10 @@ Slot to extend the format toolbar. Use it in the edit function of a `registerFor
 
 ### Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.richText.registerFormatType( /* ... */, {
-	/* ... */
-	edit: function( props ) {
-		return React.createElement(
-			wp.editor.RichTextToolbarButton, {
-				icon: 'editor-code',
-				title: 'My formatting button',
-				onClick: function() { /* ... */ }
-				isActive: props.isActive,
-			} );
-	},
-	/* ... */
-} );
-```
-
-{% 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( /* ... */, {
 	/* ... */
@@ -193,5 +138,3 @@ registerFormatType( /* ... */, {
 	/* ... */
 } );
 ```
-
-{% end %}

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';
 
@@ -223,7 +223,7 @@ function RichTextWrapper(
 			// an intentional user interaction distinguishing between Backspace and
 			// Delete to remove the empty field, but also to avoid merge & remove
 			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
 				onRemove( ! isReverse );
 			}
 		},
@@ -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 () => {};