@wordpress/block-editor 9.2.0 → 9.3.0

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

@@ -56,29 +56,28 @@ function countBlocks(
 	}
 	return 1;
 }
-const countReducer = (
-	expandedState,
-	draggedClientIds,
-	isExpandedByDefault
-) => ( count, block ) => {
-	const isDragged = draggedClientIds?.includes( block.clientId );
-	if ( isDragged ) {
-		return count;
-	}
-	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
-	if ( isExpanded && block.innerBlocks.length > 0 ) {
-		return (
-			count +
-			countBlocks(
-				block,
-				expandedState,
-				draggedClientIds,
-				isExpandedByDefault
-			)
-		);
-	}
-	return count + 1;
-};
+const countReducer =
+	( expandedState, draggedClientIds, isExpandedByDefault ) =>
+	( count, block ) => {
+		const isDragged = draggedClientIds?.includes( block.clientId );
+		if ( isDragged ) {
+			return count;
+		}
+		const isExpanded =
+			expandedState[ block.clientId ] ?? isExpandedByDefault;
+		if ( isExpanded && block.innerBlocks.length > 0 ) {
+			return (
+				count +
+				countBlocks(
+					block,
+					expandedState,
+					draggedClientIds,
+					isExpandedByDefault
+				)
+			);
+		}
+		return count + 1;
+	};
 
 function ListViewBranch( props ) {
 	const {

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

@@ -61,17 +61,13 @@ function ListView(
 	{ id, blocks, showBlockMovers = false, isExpanded = false },
 	ref
 ) {
-	const {
-		clientIdsTree,
-		draggedClientIds,
-		selectedClientIds,
-	} = useListViewClientIds( blocks );
+	const { clientIdsTree, draggedClientIds, selectedClientIds } =
+		useListViewClientIds( blocks );
 
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
-			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
-				blockEditorStore
-			);
+			const { getGlobalBlockCount, getClientIdsOfDescendants } =
+				select( blockEditorStore );
 			const draggedBlockCount =
 				draggedClientIds?.length > 0
 					? getClientIdsOfDescendants( draggedClientIds ).length + 1

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

@@ -20,9 +20,8 @@ import { store as blockEditorStore } from '../../store';
 import { getCommonDepthClientIds } from './utils';
 
 export default function useBlockSelection() {
-	const { clearSelectedBlock, multiSelect, selectBlock } = useDispatch(
-		blockEditorStore
-	);
+	const { clearSelectedBlock, multiSelect, selectBlock } =
+		useDispatch( blockEditorStore );
 	const {
 		getBlockName,
 		getBlockParents,
@@ -134,8 +133,9 @@ export default function useBlockSelection() {
 
 			let label;
 			if ( selectionDiff.length === 1 ) {
-				const title = getBlockType( getBlockName( selectionDiff[ 0 ] ) )
-					?.title;
+				const title = getBlockType(
+					getBlockName( selectionDiff[ 0 ] )
+				)?.title;
 				if ( title ) {
 					label = sprintf(
 						/* translators: %s: block name */

package/src/components/list-view/use-list-view-drop-zone.js

@@ -132,7 +132,8 @@ function getListViewDropTarget( blocksData, position ) {
 			) {
 				candidateBlockData = previousBlockData;
 				candidateEdge = 'bottom';
-				candidateRect = previousBlockData.element.getBoundingClientRect();
+				candidateRect =
+					previousBlockData.element.getBoundingClientRect();
 			} else {
 				candidateBlockData = blockData;
 				candidateEdge = edge;

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -27,7 +22,7 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
  * @return {boolean} Whether the block is in multi-selection set.
  */
 export const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>
-	isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
+	Array.isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
 		? selectedBlockClientIds.indexOf( clientId ) !== -1
 		: selectedBlockClientIds === clientId;
 

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -27,6 +26,8 @@ import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
 	<URLPopover onClose={ onClose }>
 		<form

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, uniqueId } from 'lodash';
+import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,10 +16,15 @@ import {
 	ToolbarButton,
 	Dropdown,
 	withFilters,
+	Tooltip,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
-import { upload, media as mediaIcon } from '@wordpress/icons';
+import {
+	postFeaturedImage,
+	upload,
+	media as mediaIcon,
+} from '@wordpress/icons';
 import { compose } from '@wordpress/compose';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { store as noticesStore } from '@wordpress/notices';
@@ -32,6 +37,8 @@ import MediaUploadCheck from '../media-upload/check';
 import LinkControl from '../link-control';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
@@ -41,6 +48,8 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onToggleFeaturedImage,
+	useFeaturedImage,
 	onFilesUpload = noop,
 	name = __( 'Replace' ),
 	createNotice,
@@ -81,6 +90,9 @@ const MediaReplaceFlow = ( {
 	};
 
 	const selectMedia = ( media, closeMenu ) => {
+		if ( useFeaturedImage && onToggleFeaturedImage ) {
+			onToggleFeaturedImage();
+		}
 		closeMenu();
 		setMediaURLValue( media?.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
@@ -148,42 +160,56 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<MediaUpload
-							gallery={ gallery }
-							addToGallery={ addToGallery }
-							multiple={ multiple }
-							value={ multiple ? mediaIds : mediaId }
-							onSelect={ ( media ) =>
-								selectMedia( media, onClose )
-							}
-							allowedTypes={ allowedTypes }
-							render={ ( { open } ) => (
-								<MenuItem icon={ mediaIcon } onClick={ open }>
-									{ __( 'Open Media Library' ) }
-								</MenuItem>
-							) }
-						/>
-						<MediaUploadCheck>
-							<FormFileUpload
-								onChange={ ( event ) => {
-									uploadFiles( event, onClose );
-								} }
-								accept={ accept }
+						<>
+							<MediaUpload
+								gallery={ gallery }
+								addToGallery={ addToGallery }
 								multiple={ multiple }
-								render={ ( { openFileDialog } ) => {
-									return (
-										<MenuItem
-											icon={ upload }
-											onClick={ () => {
-												openFileDialog();
-											} }
-										>
-											{ __( 'Upload' ) }
-										</MenuItem>
-									);
-								} }
+								value={ multiple ? mediaIds : mediaId }
+								onSelect={ ( media ) =>
+									selectMedia( media, onClose )
+								}
+								allowedTypes={ allowedTypes }
+								render={ ( { open } ) => (
+									<MenuItem
+										icon={ mediaIcon }
+										onClick={ open }
+									>
+										{ __( 'Open Media Library' ) }
+									</MenuItem>
+								) }
 							/>
-						</MediaUploadCheck>
+							<MediaUploadCheck>
+								<FormFileUpload
+									onChange={ ( event ) => {
+										uploadFiles( event, onClose );
+									} }
+									accept={ accept }
+									multiple={ multiple }
+									render={ ( { openFileDialog } ) => {
+										return (
+											<MenuItem
+												icon={ upload }
+												onClick={ () => {
+													openFileDialog();
+												} }
+											>
+												{ __( 'Upload' ) }
+											</MenuItem>
+										);
+									} }
+								/>
+							</MediaUploadCheck>
+						</>
+						{ onToggleFeaturedImage && (
+							<MenuItem
+								icon={ postFeaturedImage }
+								onClick={ onToggleFeaturedImage }
+								isPressed={ useFeaturedImage }
+							>
+								{ __( 'Use featured image' ) }
+							</MenuItem>
+						) }
 						{ children }
 					</NavigableMenu>
 					{ onSelectURL && (
@@ -192,16 +218,21 @@ const MediaReplaceFlow = ( {
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>
-							<LinkControl
-								value={ { url: mediaURLValue } }
-								settings={ [] }
-								showSuggestions={ false }
-								onChange={ ( { url } ) => {
-									setMediaURLValue( url );
-									onSelectURL( url );
-									editMediaButtonRef.current.focus();
-								} }
-							/>
+
+							<Tooltip text={ mediaURLValue } position="bottom">
+								<div>
+									<LinkControl
+										value={ { url: mediaURLValue } }
+										settings={ [] }
+										showSuggestions={ false }
+										onChange={ ( { url } ) => {
+											setMediaURLValue( url );
+											onSelectURL( url );
+											editMediaButtonRef.current.focus();
+										} }
+									/>
+								</div>
+							</Tooltip>
 						</form>
 					) }
 				</>

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

@@ -127,7 +127,7 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
 

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

@@ -69,8 +69,7 @@ function useIsAccessibleToolbar( ref ) {
 				since: '5.6',
 				alternative:
 					'ToolbarItem, ToolbarButton or ToolbarDropdownMenu components',
-				link:
-					'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols',
+				link: 'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols',
 			} );
 		}
 		setIsAccessibleToolbar( onlyToolbarItem );

package/src/components/panel-color-settings/test/index.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import PanelColorSettings from '../';
 
+const noop = () => {};
+
 describe( 'PanelColorSettings', () => {
 	it( 'should not render anything if there are no colors to choose', async () => {
 		const { container } = render(

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

@@ -99,12 +99,8 @@ export default class PlainText extends Component {
 	}
 
 	render() {
-		const {
-			style,
-			__experimentalVersion,
-			onFocus,
-			...otherProps
-		} = this.props;
+		const { style, __experimentalVersion, onFocus, ...otherProps } =
+			this.props;
 		const textStyles = [
 			style || styles[ 'block-editor-plain-text' ],
 			this.getFontSize(),

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

@@ -35,11 +35,15 @@ export default function PreviewOptions( {
 		/* translators: button label text should, if possible, be under 16 characters. */
 		children: __( 'Preview' ),
 	};
+	const menuProps = {
+		'aria-label': __( 'Preview options' ),
+	};
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
+			menuProps={ menuProps }
 			icon={ null }
 		>
 			{ () => (

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, noop } from 'lodash';
+import { last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,8 @@ import { cloneBlock } from '@wordpress/blocks';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 /**
  * A function to call when the block value has been updated in the block-editor
  * store.
@@ -258,7 +260,8 @@ export default function useBlockSync( {
 					selection: {
 						selectionStart: getSelectionStart(),
 						selectionEnd: getSelectionEnd(),
-						initialPosition: getSelectedBlocksInitialCaretPosition(),
+						initialPosition:
+							getSelectedBlocksInitialCaretPosition(),
 					},
 				} );
 			}

package/src/components/publish-date-time-picker/README.md

@@ -49,4 +49,4 @@ const MyDateTimePicker = () => {
 Called when the user presses the close button.
 
 - Type: `Function`
-- Required: Yes
+- Required: No

package/src/components/publish-date-time-picker/index.js

@@ -1,42 +1,31 @@
 /**
  * WordPress dependencies
  */
-import {
-	DateTimePicker,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	Button,
-} from '@wordpress/components';
-import { closeSmall } from '@wordpress/icons';
+import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import InspectorPopoverHeader from '../inspector-popover-header';
+
 function PublishDateTimePicker(
 	{ onClose, onChange, ...additionalProps },
 	ref
 ) {
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
-			{ /* TODO: This header is essentially the same as the one in <PostVisiblity />. DRY it up. */ }
-			<HStack className="block-editor-publish-date-time-picker__header">
-				<h2 className="block-editor-publish-date-time-picker__heading">
-					{ __( 'Publish' ) }
-				</h2>
-				<Spacer />
-				<Button
-					className="block-editor-publish-date-time-picker__reset"
-					variant="tertiary"
-					onClick={ () => onChange?.( null ) }
-				>
-					{ __( 'Now' ) }
-				</Button>
-				<Button
-					className="block-editor-publish-date-time-picker__close"
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ onClose }
-				/>
-			</HStack>
+			<InspectorPopoverHeader
+				title={ __( 'Publish' ) }
+				actions={ [
+					{
+						label: __( 'Now' ),
+						onClick: () => onChange?.( null ),
+					},
+				] }
+				onClose={ onClose }
+			/>
 			<DateTimePicker
 				__nextRemoveHelpButton
 				__nextRemoveResetButton

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

@@ -97,8 +97,9 @@ describe( 'Basic rendering', () => {
 			)
 		);
 
-		const toggleState = container.querySelector( 'input[type="checkbox"]' )
-			.checked;
+		const toggleState = container.querySelector(
+			'input[type="checkbox"]'
+		).checked;
 
 		const defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'

package/src/components/rich-text/embed-handler-picker.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,6 +11,8 @@ import {
 import { Picker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const noop = () => {};
+
 const DEFAULT_PICKER_OPTIONS = [
 	{
 		id: 'createEmbed',

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

@@ -122,9 +122,8 @@ function RichTextWrapper(
 	const anchorRef = useRef();
 	const { clientId } = useBlockEditContext();
 	const selector = ( select ) => {
-		const { getSelectionStart, getSelectionEnd } = select(
-			blockEditorStore
-		);
+		const { getSelectionStart, getSelectionEnd } =
+			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -241,7 +240,11 @@ function RichTextWrapper(
 		);
 	}
 
-	const { value, onChange, ref: richTextRef } = useRichText( {
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
 			adjustedOnChange( html );

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

@@ -69,15 +69,14 @@ export function useFormatTypes( {
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
 				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[
-						type.name
-					] = type.__experimentalGetPropsForEditableTreePreparation(
-						select,
-						{
-							richTextIdentifier: identifier,
-							blockClientId: clientId,
-						}
-					);
+					accumulator[ type.name ] =
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
+						);
 				}
 
 				return accumulator;
@@ -116,13 +115,14 @@ export function useFormatTypes( {
 			let dispatchers = {};
 
 			if ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {
-				dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(
-					dispatch,
-					{
-						richTextIdentifier: identifier,
-						blockClientId: clientId,
-					}
-				);
+				dispatchers =
+					type.__experimentalGetPropsForEditableTreeChangeHandler(
+						dispatch,
+						{
+							richTextIdentifier: identifier,
+							blockClientId: clientId,
+						}
+					);
 			}
 
 			changeHandlers.push(

package/src/components/rich-text/use-mark-persistent.js

@@ -13,9 +13,8 @@ export function useMarkPersistent( { html, value } ) {
 	const previousText = useRef();
 	const hasActiveFormats =
 		value.activeFormats && !! value.activeFormats.length;
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {

package/src/components/skip-to-selected-block/index.js

@@ -33,8 +33,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
  */
 export default withSelect( ( select ) => {
 	return {
-		selectedBlockClientId: select(
-			blockEditorStore
-		).getBlockSelectionStart(),
+		selectedBlockClientId:
+			select( blockEditorStore ).getBlockSelectionStart(),
 	};
 } )( SkipToSelectedBlock );

package/src/components/ungroup-button/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,8 @@ import { compose } from '@wordpress/compose';
 import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
 		return null;
@@ -35,9 +32,8 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const { getGroupingBlockName } = select( blocksStore );