@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -14,26 +14,32 @@ import { startsWith } from 'lodash';
  * Internal dependencies
  */
 import isURLLike from './is-url-like';
-import { CREATE_TYPE } from './constants';
+import {
+	CREATE_TYPE,
+	TEL_TYPE,
+	MAILTO_TYPE,
+	INTERNAL_TYPE,
+	URL_TYPE,
+} from './constants';
 import { store as blockEditorStore } from '../../store';
 
 export const handleNoop = () => Promise.resolve( [] );
 
 export const handleDirectEntry = ( val ) => {
-	let type = 'URL';
+	let type = URL_TYPE;
 
 	const protocol = getProtocol( val ) || '';
 
 	if ( protocol.includes( 'mailto' ) ) {
-		type = 'mailto';
+		type = MAILTO_TYPE;
 	}
 
 	if ( protocol.includes( 'tel' ) ) {
-		type = 'tel';
+		type = TEL_TYPE;
 	}
 
 	if ( startsWith( val, '#' ) ) {
-		type = 'internal';
+		type = INTERNAL_TYPE;
 	}
 
 	return Promise.resolve( [
@@ -132,8 +138,8 @@ export default function useSearchHandler(
 
 		return {
 			pageOnFront: getSettings().pageOnFront,
-			fetchSearchSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			fetchSearchSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	}, [] );
 

package/src/components/list-view/block-contents.js

@@ -36,10 +36,8 @@ const ListViewBlockContents = forwardRef(
 
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
 			( select ) => {
-				const {
-					hasBlockMovingClientId,
-					getSelectedBlockClientId,
-				} = select( blockEditorStore );
+				const { hasBlockMovingClientId, getSelectedBlockClientId } =
+					select( blockEditorStore );
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),

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

@@ -110,7 +110,6 @@ export default function ListViewDropIndicator( {
 
 	return (
 		<Popover
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }

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/style.scss

@@ -396,10 +396,11 @@ $block-navigation-max-indent: 8;
 }
 
 // Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
 	margin-left: 0;
 	border: none;
 	box-shadow: none;
+	outline: none;
 }
 
 .block-editor-list-view-placeholder {

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
@@ -73,7 +74,6 @@ export function MediaPlaceholder( {
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
-	onClose = noop,
 	children,
 	mediaLibraryButton,
 	placeholder,
@@ -327,7 +327,6 @@ export function MediaPlaceholder( {
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
 				onSelect={ onSelect }
-				onClose={ onClose }
 				allowedTypes={ allowedTypes }
 				value={
 					Array.isArray( value )

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,8 +48,9 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onToggleFeaturedImage,
+	useFeaturedImage,
 	onFilesUpload = noop,
-	onCloseModal = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -82,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.
@@ -149,43 +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 }
-							onClose={ onCloseModal }
-							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 && (
@@ -194,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

@@ -39,6 +39,7 @@ export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
 export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
 export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
 export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -78,6 +79,8 @@ export class MediaUpload extends Component {
 	}
 
 	getAllSources() {
+		const { onSelectURL } = this.props;
+
 		const cameraImageSource = {
 			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
@@ -124,16 +127,17 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
 
+		// Only include `urlSource` option if `onSelectURL` prop is present, in order to match the web behavior.
 		const internalSources = [
 			deviceLibrarySource,
 			cameraImageSource,
 			cameraVideoSource,
 			siteLibrarySource,
-			urlSource,
+			...( onSelectURL ? [ urlSource ] : [] ),
 		];
 
 		return internalSources.concat( this.state.otherMediaOptions );

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

@@ -20,6 +20,7 @@ import {
 	OPTION_TAKE_VIDEO,
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
+	OPTION_WORDPRESS_MEDIA_LIBRARY,
 } from '../index';
 
 const MEDIA_URL = 'http://host.media.type';
@@ -33,8 +34,11 @@ describe( 'MediaUpload component', () => {
 		expect( wrapper ).toBeTruthy();
 	} );
 
-	it( 'shows right media capture option for media type', () => {
-		const expectOptionForMediaType = ( mediaType, expectedOption ) => {
+	describe( 'Media capture options for different media block types', () => {
+		const expectOptionForMediaType = async (
+			mediaType,
+			expectedOptions
+		) => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
@@ -52,11 +56,32 @@ describe( 'MediaUpload component', () => {
 			);
 			fireEvent.press( wrapper.getByText( 'Open Picker' ) );
 
-			wrapper.getByText( expectedOption );
+			expectedOptions.forEach( ( item ) => {
+				const option = wrapper.getByText( item );
+				expect( option ).toBeVisible();
+			} );
 		};
-		expectOptionForMediaType( MEDIA_TYPE_IMAGE, OPTION_TAKE_PHOTO );
-		expectOptionForMediaType( MEDIA_TYPE_VIDEO, OPTION_TAKE_VIDEO );
-		expectOptionForMediaType( MEDIA_TYPE_AUDIO, OPTION_INSERT_FROM_URL );
+
+		it( 'shows the correct media capture options for the Image block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_IMAGE, [
+				OPTION_TAKE_PHOTO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Video block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_VIDEO, [
+				OPTION_TAKE_VIDEO,
+				OPTION_WORDPRESS_MEDIA_LIBRARY,
+			] );
+		} );
+
+		it( 'shows the correct media capture options for the Audio block', () => {
+			expectOptionForMediaType( MEDIA_TYPE_AUDIO, [
+				OPTION_INSERT_FROM_URL,
+			] );
+		} );
 	} );
 
 	const expectMediaPickerForOption = (

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

@@ -29,7 +29,12 @@ function hasFocusWithin( container ) {
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
 	if ( firstTabbable ) {
-		firstTabbable.focus();
+		firstTabbable.focus( {
+			// When focusing newly mounted toolbars,
+			// the position of the popover is often not right on the first render
+			// This prevents the layout shifts when focusing the dialogs.
+			preventScroll: true,
+		} );
 	}
 }
 
@@ -64,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 );
@@ -119,7 +123,12 @@ function useToolbarFocus(
 				const items = getAllToolbarItemsIn( ref.current );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
-					items[ index ].focus();
+					items[ index ].focus( {
+						// When focusing newly mounted toolbars,
+						// the position of the popover is often not right on the first render
+						// This prevents the layout shifts when focusing the dialogs.
+						preventScroll: true,
+					} );
 				}
 			} );
 		}

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(