@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

package/src/components/link-control/use-search-handler.js

@@ -5,11 +5,6 @@ import { getProtocol, prependHTTP } from '@wordpress/url';
 import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -38,7 +33,7 @@ export const handleDirectEntry = ( val ) => {
 		type = TEL_TYPE;
 	}
 
-	if ( startsWith( val, '#' ) ) {
+	if ( val?.startsWith( '#' ) ) {
 		type = INTERNAL_TYPE;
 	}
 

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

@@ -90,8 +90,13 @@ function ListViewBlockSelectButton(
 						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
 					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor">
-							{ blockInformation.anchor }
+						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+							<Truncate
+								className="block-editor-list-view-block-select-button__anchor"
+								ellipsizeMode="auto"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
 						</span>
 					) }
 					{ isLocked && (

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -95,7 +90,7 @@ function ListViewBranch( props ) {
 
 	const { expandedState, draggedClientIds } = useListViewContext();
 
-	const filteredBlocks = compact( blocks );
+	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
 	let nextPosition = listPosition;
 

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

@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
+
 export default function ListViewExpander( { onClick } ) {
 	return (
 		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
@@ -18,7 +20,7 @@ export default function ListViewExpander( { onClick } ) {
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
 		>
-			<Icon icon={ chevronRightSmall } />
+			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>
 	);
 }

package/src/components/list-view/style.scss

@@ -312,14 +312,21 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__anchor-wrapper {
+		position: relative;
+		max-width: min(110px, 40%);
+		width: 100%;
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
+		position: absolute;
+		right: 0;
+		transform: translateY(-50%);
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
-		display: inline-block;
 		padding: 2px 6px;
-		max-width: min(100px, 40%);
-		overflow: hidden;
-		text-overflow: ellipsis;
+		max-width: 100%;
+		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { difference } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -126,9 +121,8 @@ export default function useBlockSelection() {
 				return;
 			}
 
-			const selectionDiff = difference(
-				selectedBlocks,
-				updatedSelectedBlocks
+			const selectionDiff = selectedBlocks.filter(
+				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
 			);
 
 			let label;

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

@@ -27,6 +27,7 @@
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
+			margin: 0; // Reset default LinkControl margins.
 		}
 
 		.components-base-control .components-base-control__field {

package/src/components/media-upload/index.native.js

@@ -3,8 +3,6 @@
  */
 import { Platform } from 'react-native';
 
-import { delay } from 'lodash';
-
 import prompt from 'react-native-prompt-android';
 
 /**
@@ -46,6 +44,8 @@ const URL_MEDIA_SOURCE = 'URL';
 const PICKER_OPENING_DELAY = 200;
 
 export class MediaUpload extends Component {
+	pickerTimeout;
+
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
@@ -78,6 +78,10 @@ export class MediaUpload extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.pickerTimeout );
+	}
+
 	getAllSources() {
 		const { onSelectURL } = this.props;
 
@@ -189,7 +193,7 @@ export class MediaUpload extends Component {
 			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
 			// so this delay allows the Inserter to be closed fully before presenting action sheet.
 			if ( autoOpen && isIOS ) {
-				delay(
+				this.pickerTimeout = setTimeout(
 					() => this.picker.presentPicker(),
 					PICKER_OPENING_DELAY
 				);

package/src/components/observe-typing/index.js

@@ -115,9 +115,13 @@ export function useMouseMoveTypingReset() {
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {
-	const isTyping = useSelect( ( select ) =>
-		select( blockEditorStore ).isTyping()
-	);
+	const { isTyping, hasInlineToolbar } = useSelect( ( select ) => {
+		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+		return {
+			isTyping: _isTyping(),
+			hasInlineToolbar: getSettings().hasInlineToolbar,
+		};
+	}, [] );
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
 
 	const ref1 = useMouseMoveTypingReset();
@@ -125,6 +129,7 @@ export function useTypingObserver() {
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
+			const selection = defaultView.getSelection();
 
 			// Listeners to stop typing should only be added when typing.
 			// Listeners to start typing should only be added when not typing.
@@ -170,22 +175,20 @@ export function useTypingObserver() {
 				 * uncollapsed (shift) selection.
 				 */
 				function stopTypingOnSelectionUncollapse() {
-					const selection = defaultView.getSelection();
-					const isCollapsed =
-						selection.rangeCount > 0 &&
-						selection.getRangeAt( 0 ).collapsed;
-
-					if ( ! isCollapsed ) {
+					if ( ! selection.isCollapsed ) {
 						stopTyping();
 					}
 				}
 
 				node.addEventListener( 'focus', stopTypingOnNonTextField );
 				node.addEventListener( 'keydown', stopTypingOnEscapeKey );
-				ownerDocument.addEventListener(
-					'selectionchange',
-					stopTypingOnSelectionUncollapse
-				);
+
+				if ( ! hasInlineToolbar ) {
+					ownerDocument.addEventListener(
+						'selectionchange',
+						stopTypingOnSelectionUncollapse
+					);
+				}
 
 				return () => {
 					defaultView.clearTimeout( timerId );
@@ -242,7 +245,7 @@ export function useTypingObserver() {
 				node.removeEventListener( 'keydown', startTypingInTextField );
 			};
 		},
-		[ isTyping, startTyping, stopTyping ]
+		[ isTyping, hasInlineToolbar, startTyping, stopTyping ]
 	);
 
 	return useMergeRefs( [ ref1, ref2 ] );

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

@@ -33,10 +33,10 @@ export default function PreviewOptions( {
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
 		/* translators: button label text should, if possible, be under 16 characters. */
-		children: __( 'Preview' ),
+		children: __( 'View' ),
 	};
 	const menuProps = {
-		'aria-label': __( 'Preview options' ),
+		'aria-label': __( 'View options' ),
 	};
 	return (
 		<DropdownMenu

package/src/components/{use-no-recursive-renders → recursion-provider}/index.js

@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useMemo,
-} from '@wordpress/element';
+import { createContext, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -37,37 +32,53 @@ function addToBlockType( renderedBlocks, blockName, uniqueId ) {
 }
 
 /**
- * A React hook for keeping track of blocks previously rendered up in the block
- * tree. Blocks susceptible to recursion can use this hook in their `Edit`
- * function to prevent said recursion.
+ * A React context provider for use with the `useHasRecursion` hook to prevent recursive
+ * renders.
  *
- * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
- * @param {string} blockName Optional block name.
+ * Wrap block content with this provider and provide the same `uniqueId` prop as used
+ * with `useHasRecursion`.
+ *
+ * @param {Object}      props
+ * @param {*}           props.uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string}      props.blockName Optional block name.
+ * @param {JSX.Element} props.children  React children.
  *
- * @return {[boolean, Function]} A tuple of:
- *                               - a boolean describing whether the provided id
- *                                 has already been rendered;
- *                               - a React context provider to be used to wrap
- *                                 other elements.
+ * @return {JSX.Element} A React element.
  */
-export default function useNoRecursiveRenders( uniqueId, blockName = '' ) {
+export function RecursionProvider( { children, uniqueId, blockName = '' } ) {
 	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
 	const { name } = useBlockEditContext();
+
 	blockName = blockName || name;
-	const hasAlreadyRendered = Boolean(
-		previouslyRenderedBlocks[ blockName ]?.has( uniqueId )
-	);
+
 	const newRenderedBlocks = useMemo(
 		() => addToBlockType( previouslyRenderedBlocks, blockName, uniqueId ),
 		[ previouslyRenderedBlocks, blockName, uniqueId ]
 	);
-	const Provider = useCallback(
-		( { children } ) => (
-			<RenderedRefsContext.Provider value={ newRenderedBlocks }>
-				{ children }
-			</RenderedRefsContext.Provider>
-		),
-		[ newRenderedBlocks ]
+
+	return (
+		<RenderedRefsContext.Provider value={ newRenderedBlocks }>
+			{ children }
+		</RenderedRefsContext.Provider>
 	);
-	return [ hasAlreadyRendered, Provider ];
+}
+
+/**
+ * A React hook for keeping track of blocks previously rendered up in the block
+ * tree. Blocks susceptible to recursion can use this hook in their `Edit`
+ * function to prevent said recursion.
+ *
+ * Use this with the `RecursionProvider` component, using the same `uniqueId` value
+ * for both the hook and the provider.
+ *
+ * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string} blockName Optional block name.
+ *
+ * @return {boolean} A boolean describing whether the provided id has already been rendered.
+ */
+export function useHasRecursion( uniqueId, blockName = '' ) {
+	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
+	const { name } = useBlockEditContext();
+	blockName = blockName || name;
+	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }

package/src/components/{use-no-recursive-renders/test/use-no-recursive-renders.js → recursion-provider/test/index.js}

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import useNoRecursiveRenders from '../';
+import { useHasRecursion, RecursionProvider } from '..';
 import {
 	BlockEditContextProvider,
 	useBlockEditContext,
@@ -16,15 +16,14 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( uniqueId );
+	const hasRecursion = useHasRecursion( uniqueId );
 
-	if ( hasAlreadyRendered ) {
+	if ( hasRecursion ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ uniqueId }>
 			<div className={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
@@ -48,7 +47,7 @@ function Edit( { attributes: { uniqueId } } ) {
 	);
 }
 
-describe( 'useNoRecursiveRenders', () => {
+describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {

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

@@ -43,7 +43,19 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ### `allowedFormats: Array`
 
-_Optional._ By default, all registered formats are allowed. This setting can be used to fine-tune the allowed formats. Example: `[ 'core/bold', 'core/link' ]`.
+_Optional._ By default, all registered formats are allowed. This setting can be used to fine-tune the allowed formats. If you want to limit the formats allowed, you can specify using allowedFormats property in your code. If you want to allow only bold and italic settings, then you need to pass it in array. Example: `[ 'core/bold', 'core/link' ]`.
+
+{% ESNext %}
+
+```js
+<RichText
+	tagName="h2"
+	value={ attributes.content }
+	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
+	onChange={ ( content ) => setAttributes( { content } ) }
+	placeholder={ __( 'Heading...' ) }
+/>
+```
 
 ### `withoutInteractiveFormatting: Boolean`
 

package/src/components/rich-text/format-toolbar-container.js

@@ -2,32 +2,81 @@
  * WordPress dependencies
  */
 import { Popover, ToolbarGroup } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	isCollapsed,
+	getActiveFormats,
+	useAnchorRef,
+	store as richTextStore,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
+import { store as blockEditorStore } from '../../store';
+
+function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+	const lastFormat = activeFormats[ activeFormats.length - 1 ];
+	const lastFormatType = lastFormat?.type;
+	const settings = useSelect(
+		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
+		[ lastFormatType ]
+	);
+	const selectionRef = useAnchorRef( {
+		ref: anchorRef,
+		value,
+		settings,
+	} );
+
+	return <InlineToolbar anchorRef={ selectionRef } />;
+}
+
+function InlineToolbar( { anchorRef } ) {
+	return (
+		<Popover
+			position="top center"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			className="block-editor-rich-text__inline-format-toolbar"
+			__unstableSlotName="block-toolbar"
+		>
+			<div className="block-editor-rich-text__inline-format-toolbar-group">
+				<ToolbarGroup>
+					<FormatToolbar />
+				</ToolbarGroup>
+			</div>
+		</Popover>
+	);
+}
+
+const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+	const hasInlineToolbar = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
+		[]
+	);
 
-const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 	if ( inline ) {
-		// Render in popover.
+		return <InlineToolbar anchorRef={ anchorRef } />;
+	}
+
+	if ( hasInlineToolbar ) {
+		const activeFormats = getActiveFormats( value );
+
+		if ( isCollapsed( value ) && ! activeFormats.length ) {
+			return null;
+		}
+
 		return (
-			<Popover
-				position="top center"
-				focusOnMount={ false }
+			<InlineSelectionToolbar
 				anchorRef={ anchorRef }
-				className="block-editor-rich-text__inline-format-toolbar"
-				__unstableSlotName="block-toolbar"
-			>
-				<div className="block-editor-rich-text__inline-format-toolbar-group">
-					<ToolbarGroup>
-						<FormatToolbar />
-					</ToolbarGroup>
-				</div>
-			</Popover>
+				value={ value }
+				activeFormats={ activeFormats }
+			/>
 		);
 	}
+
 	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">

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

@@ -38,6 +38,7 @@ import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
 import { usePasteHandler } from './use-paste-handler';
+import { useBeforeInputRules } from './use-before-input-rules';
 import { useInputRules } from './use-input-rules';
 import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
@@ -344,6 +345,7 @@ function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					anchorRef={ anchorRef }
+					value={ value }
 				/>
 			) }
 			<TagName
@@ -358,6 +360,7 @@ function RichTextWrapper(
 					autocompleteProps.ref,
 					props.ref,
 					richTextRef,
+					useBeforeInputRules( { value, onChange } ),
 					useInputRules( {
 						value,
 						onChange,

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

@@ -113,6 +113,7 @@ function RichTextWrapper(
 		setRef,
 		disableSuggestions,
 		disableAutocorrection,
+		containerWidth,
 		...props
 	},
 	forwardedRef
@@ -639,6 +640,7 @@ function RichTextWrapper(
 			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
+			containerWidth={ containerWidth }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

package/src/components/rich-text/use-before-input-rules.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { useDispatch } from '@wordpress/data';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export function useBeforeInputRules( props ) {
+	const {
+		__unstableMarkLastChangeAsPersistent,
+		__unstableMarkAutomaticChange,
+	} = useDispatch( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onInput( event ) {
+			const { inputType, data } = event;
+			const { value, onChange } = propsRef.current;
+
+			// Only run the rules when inserting text.
+			if ( inputType !== 'insertText' ) {
+				return;
+			}
+
+			if ( isCollapsed( value ) ) {
+				return;
+			}
+
+			const pair = applyFilters(
+				'blockEditor.wrapSelectionSettings',
+				wrapSelectionSettings
+			).find(
+				( [ startChar, endChar ] ) =>
+					startChar === data || endChar === data
+			);
+
+			if ( ! pair ) {
+				return;
+			}
+
+			const [ startChar, endChar = startChar ] = pair;
+			const start = value.start;
+			const end = value.end + startChar.length;
+
+			let newValue = insert( value, startChar, start, start );
+			newValue = insert( newValue, endChar, end, end );
+
+			__unstableMarkLastChangeAsPersistent();
+			onChange( newValue );
+			__unstableMarkAutomaticChange();
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.data = endChar;
+
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			const newEvent = new defaultView.InputEvent( 'input', init );
+
+			// Dispatch an input event with the new data. This will trigger the
+			// input rules.
+			event.target.dispatchEvent( newEvent );
+			event.preventDefault();
+		}
+
+		element.addEventListener( 'beforeinput', onInput );
+		return () => {
+			element.removeEventListener( 'beforeinput', onInput );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-enter.js

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 /**
  * WordPress dependencies
  */