@wordpress/block-editor 9.3.0 → 9.6.0

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

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -16,7 +20,7 @@ import { SPACE, ENTER } from '@wordpress/keycodes';
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import BlockTitle from '../block-title';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 
@@ -35,6 +39,10 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -72,19 +80,26 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<span className="block-editor-list-view-block-select-button__title">
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
-				</span>
-				{ blockInformation?.anchor && (
-					<span className="block-editor-list-view-block-select-button__anchor">
-						{ blockInformation.anchor }
+				<HStack
+					alignment="center"
+					className="block-editor-list-view-block-select-button__label-wrapper"
+					justify="flex-start"
+					spacing={ 1 }
+				>
+					<span className="block-editor-list-view-block-select-button__title">
+						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
-				) }
-				{ isLocked && (
-					<span className="block-editor-list-view-block-select-button__lock">
-						<Icon icon={ lock } />
-					</span>
-				) }
+					{ blockInformation?.anchor && (
+						<span className="block-editor-list-view-block-select-button__anchor">
+							{ blockInformation.anchor }
+						</span>
+					) }
+					{ isLocked && (
+						<span className="block-editor-list-view-block-select-button__lock">
+							<Icon icon={ lock } />
+						</span>
+					) }
+				</HStack>
 			</Button>
 		</>
 	);

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/drop-indicator.js

@@ -81,7 +81,7 @@ export default function ListViewDropIndicator( {
 			left: rect.left + indent,
 			right: rect.right,
 			width: 0,
-			height: rect.height,
+			height: 0,
 			ownerDocument,
 		};
 

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 (
@@ -328,6 +345,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
+				mode={ 'browse' }
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )
@@ -360,6 +378,7 @@ export function MediaPlaceholder( {
 									</Button>
 									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
+									{ renderFeaturedImageToggle() }
 									{ renderCancelLink() }
 								</>
 							);
@@ -388,6 +407,7 @@ export function MediaPlaceholder( {
 					</FormFileUpload>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
+					{ renderFeaturedImageToggle() }
 					{ renderCancelLink() }
 				</>
 			);

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
-import { uniqWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,12 +22,17 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
  */
 import styles from './styles.scss';
 
+const isMediaEqual = ( media1, media2 ) =>
+	media1.id === media2.id || media1.url === media2.url;
+
 // Remove duplicates after gallery append.
 const dedupMedia = ( media ) =>
-	uniqWith(
-		media,
-		( media1, media2 ) =>
-			media1.id === media2.id || media1.url === media2.url
+	media.reduce(
+		( dedupedMedia, mediaItem ) =>
+			dedupedMedia.some( ( item ) => isMediaEqual( item, mediaItem ) )
+				? dedupedMedia
+				: [ ...dedupedMedia, mediaItem ],
+		[]
 	);
 
 function MediaPlaceholder( props ) {

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

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -38,6 +33,7 @@ import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+let uniqueId = 0;
 
 const MediaReplaceFlow = ( {
 	mediaURL,
@@ -59,14 +55,11 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 } ) => {
-	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const editMediaButtonRef = useRef();
-	const errorNoticeID = uniqueId(
-		'block-editor/media-replace-flow/error-notice/'
-	);
+	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
 		const safeMessage = stripHTML( message );
@@ -94,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' ) );
@@ -219,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/README.md

@@ -64,6 +64,14 @@ If allowedTypes is unset all mime types should be allowed.
 -   Required: No
 -   Platform: Web | Mobile
 
+### mode
+
+Value of Frame content default mode like 'browse', 'upload' etc.
+
+-   Type: `String`
+-   Required: No
+-   Default: false
+-   Platform: Web
 ### multiple
 
 Whether to allow multiple selections or not.

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/publish-date-time-picker/index.js

@@ -4,6 +4,7 @@
 import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { __experimentalGetSettings as getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ function PublishDateTimePicker(
 				onClose={ onClose }
 			/>
 			<DateTimePicker
+				startOfWeek={ getSettings().l10n.startOfWeek }
 				__nextRemoveHelpButton
 				__nextRemoveResetButton
 				onChange={ onChange }

package/src/components/responsive-block-control/README.md

@@ -171,8 +171,10 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 An optional render function (prop) used to render the controls for the _responsive_ settings. If not provided, by default, responsive controls will be _automatically_ rendered using the component returned by the `renderDefaultControl` prop. For _complete_ control over the output of the responsive controls, you may return a component here and it will be rendered when the control group is in "responsive" mode.
 
 ```jsx
+let uniqueId = 0;
+
 const renderResponsiveControls = ( viewports ) => {
-	const inputId = uniqueId(); // lodash
+	const inputId = ++uniqueId;
 
 	return viewports.map( ( { id, label } ) => {
 		return (

package/src/components/responsive-block-control/test/index.js

@@ -3,7 +3,6 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ afterEach( () => {
 	container = null;
 } );
 
-const inputId = uniqueId();
+const inputId = 'input-12345678';
 
 const sizeOptions = [
 	{

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

@@ -344,6 +344,7 @@ function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					anchorRef={ anchorRef }
+					value={ value }
 				/>
 			) }
 			<TagName

package/src/components/rich-text/use-format-types.js

@@ -1,12 +1,13 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { mapKeys } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
@@ -32,6 +33,21 @@ const interactiveContentTags = new Set( [
 	'video',
 ] );
 
+function prefixSelectKeys( selected, prefix ) {
+	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	return mapKeys( selected, ( value, key ) => `${ prefix }.${ key }` );
+}
+
+function getPrefixedSelectKeys( selected, prefix ) {
+	if ( selected[ prefix ] ) return selected[ prefix ];
+	return Object.keys( selected )
+		.filter( ( key ) => key.startsWith( prefix + '.' ) )
+		.reduce( ( accumulator, key ) => {
+			accumulator[ key.slice( prefix.length + 1 ) ] = selected[ key ];
+			return accumulator;
+		}, {} );
+}
+
 /**
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
@@ -68,18 +84,23 @@ export function useFormatTypes( {
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
-				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[ type.name ] =
+				if ( ! type.__experimentalGetPropsForEditableTreePreparation ) {
+					return accumulator;
+				}
+
+				return {
+					...accumulator,
+					...prefixSelectKeys(
 						type.__experimentalGetPropsForEditableTreePreparation(
 							select,
 							{
 								richTextIdentifier: identifier,
 								blockClientId: clientId,
 							}
-						);
-				}
-
-				return accumulator;
+						),
+						type.name
+					),
+				};
 			}, {} ),
 		[ formatTypes, clientId, identifier ]
 	);
@@ -89,11 +110,14 @@ export function useFormatTypes( {
 	const changeHandlers = [];
 	const dependencies = [];
 
+	for ( const key in keyedSelected ) {
+		dependencies.push( keyedSelected[ key ] );
+	}
+
 	formatTypes.forEach( ( type ) => {
 		if ( type.__experimentalCreatePrepareEditableTree ) {
-			const selected = keyedSelected[ type.name ];
 			const handler = type.__experimentalCreatePrepareEditableTree(
-				selected,
+				getPrefixedSelectKeys( keyedSelected, type.name ),
 				{
 					richTextIdentifier: identifier,
 					blockClientId: clientId,
@@ -105,10 +129,6 @@ export function useFormatTypes( {
 			} else {
 				prepareHandlers.push( handler );
 			}
-
-			for ( const key in selected ) {
-				dependencies.push( selected[ key ] );
-			}
 		}
 
 		if ( type.__experimentalCreateOnChangeEditableValue ) {
@@ -125,10 +145,11 @@ export function useFormatTypes( {
 					);
 			}
 
+			const selected = getPrefixedSelectKeys( keyedSelected, type.name );
 			changeHandlers.push(
 				type.__experimentalCreateOnChangeEditableValue(
 					{
-						...( keyedSelected[ type.name ] || {} ),
+						...( typeof selected === 'object' ? selected : {} ),
 						...dispatchers,
 					},
 					{