@wordpress/block-editor 9.4.0 → 9.7.0

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

@@ -97,7 +97,7 @@
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
 		border-radius: $radius-block-ui;
@@ -207,7 +207,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: 5px;
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -297,13 +297,27 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__label-wrapper {
+		min-width: 120px;
+	}
+
+	.block-editor-list-view-block-select-button__title {
+		flex: 1;
+		position: relative;
+
+		.components-truncate {
+			position: absolute;
+			width: 100%;
+			transform: translateY(-50%);
+		}
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		margin: 0 $grid-unit-10;
-		max-width: 120px;
+		max-width: min(100px, 40%);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

package/src/components/media-placeholder/index.js

@@ -71,6 +71,7 @@ export function MediaPlaceholder( {
 	onSelect,
 	onCancel,
 	onSelectURL,
+	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
@@ -307,6 +308,22 @@ export function MediaPlaceholder( {
 		);
 	};
 
+	const renderFeaturedImageToggle = () => {
+		return (
+			onToggleFeaturedImage && (
+				<div className="block-editor-media-placeholder__url-input-container">
+					<Button
+						className="block-editor-media-placeholder__button"
+						onClick={ onToggleFeaturedImage }
+						variant="tertiary"
+					>
+						{ __( 'Use featured image' ) }
+					</Button>
+				</div>
+			)
+		);
+	};
+
 	const renderMediaUploadChecked = () => {
 		const defaultButton = ( { open } ) => {
 			return (
@@ -361,6 +378,7 @@ export function MediaPlaceholder( {
 									</Button>
 									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
+									{ renderFeaturedImageToggle() }
 									{ renderCancelLink() }
 								</>
 							);
@@ -389,6 +407,7 @@ export function MediaPlaceholder( {
 					</FormFileUpload>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
+					{ renderFeaturedImageToggle() }
 					{ renderCancelLink() }
 				</>
 			);

package/src/components/media-replace-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -55,7 +55,6 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 } ) => {
-	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
@@ -88,7 +87,6 @@ const MediaReplaceFlow = ( {
 			onToggleFeaturedImage();
 		}
 		closeMenu();
-		setMediaURLValue( media?.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
 		speak( __( 'The media file has been replaced' ) );
@@ -213,14 +211,13 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURLValue } position="bottom">
+							<Tooltip text={ mediaURL } position="bottom">
 								<div>
 									<LinkControl
-										value={ { url: mediaURLValue } }
+										value={ { url: mediaURL } }
 										settings={ [] }
 										showSuggestions={ false }
 										onChange={ ( { url } ) => {
-											setMediaURLValue( url );
 											onSelectURL( url );
 											editMediaButtonRef.current.focus();
 										} }

package/src/components/media-replace-flow/test/index.js

@@ -3,6 +3,11 @@
  */
 import { render, fireEvent } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -10,19 +15,24 @@ import MediaReplaceFlow from '../';
 
 const noop = () => {};
 
-function setUpMediaReplaceFlow() {
-	const { container } = render(
+function TestWrapper() {
+	const [ mediaURL, setMediaURL ] = useState( 'https://example.media' );
+	return (
 		<MediaReplaceFlow
 			mediaId={ 1 }
-			mediaURL={ 'https://example.media' }
+			mediaURL={ mediaURL }
 			allowedTypes={ [ 'png' ] }
 			accept="image/*"
 			onSelect={ noop }
-			onSelectURL={ noop }
+			onSelectURL={ setMediaURL }
 			onError={ noop }
 			onCloseModal={ noop }
 		/>
 	);
+}
+
+function setUpMediaReplaceFlow() {
+	const { container } = render( <TestWrapper /> );
 	return container;
 }
 

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.