@wordpress/block-editor 11.4.0 → 11.6.0

package/src/components/inserter/media-tab/hooks.js

@@ -98,13 +98,6 @@ function useInserterMediaCategories() {
 			) {
 				return false;
 			}
-			// When a category has set `isExternalResource` to `true`, we
-			// don't need to check for allowed mime types, as they are used
-			// for restricting uploads for this media type and not for
-			// inserting media from external sources.
-			if ( category.isExternalResource ) {
-				return true;
-			}
 			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
 				mimeType.startsWith( `${ category.mediaType }/` )
 			);
@@ -156,7 +149,15 @@ export function useMediaCategories( rootClientId ) {
 						if ( category.isExternalResource ) {
 							return [ category.name, true ];
 						}
-						const results = await category.fetch( { per_page: 1 } );
+						let results = [];
+						try {
+							results = await category.fetch( {
+								per_page: 1,
+							} );
+						} catch ( e ) {
+							// If the request fails, we shallow the error and just don't show
+							// the category, in order to not break the media tab.
+						}
 						return [ category.name, !! results.length ];
 					} )
 				)

package/src/components/inserter/media-tab/media-list.js

@@ -1,129 +1,16 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
-	Tooltip,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
-import { moreVertical, external } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import InserterDraggableBlocks from '../../inserter-draggable-blocks';
-import { getBlockAndPreviewFromMedia } from './utils';
-
-const MAXIMUM_TITLE_LENGTH = 25;
-const MEDIA_OPTIONS_POPOVER_PROPS = {
-	position: 'bottom left',
-	className:
-		'block-editor-inserter__media-list__item-preview-options__popover',
-};
-
-function MediaPreviewOptions( { category, media } ) {
-	if ( ! category.getReportUrl ) {
-		return null;
-	}
-	const reportUrl = category.getReportUrl( media );
-	return (
-		<DropdownMenu
-			className="block-editor-inserter__media-list__item-preview-options"
-			label={ __( 'Options' ) }
-			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
-			icon={ moreVertical }
-		>
-			{ () => (
-				<MenuGroup>
-					<MenuItem
-						onClick={ () =>
-							window.open( reportUrl, '_blank' ).focus()
-						}
-						icon={ external }
-					>
-						{ sprintf(
-							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
-							__( 'Report %s' ),
-							category.mediaType
-						) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
-
-function MediaPreview( { media, onClick, composite, category } ) {
-	const [ isHovered, setIsHovered ] = useState( false );
-	const [ block, preview ] = useMemo(
-		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
-		[ media, category.mediaType ]
-	);
-	const title = media.title?.rendered || media.title;
-	let truncatedTitle;
-	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
-		const omission = '...';
-		truncatedTitle =
-			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
-	}
-	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
-	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
-	return (
-		<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
-			{ ( { draggable, onDragStart, onDragEnd } ) => (
-				<div
-					className={ classnames(
-						'block-editor-inserter__media-list__list-item',
-						{
-							'is-hovered': isHovered,
-						}
-					) }
-					draggable={ draggable }
-					onDragStart={ onDragStart }
-					onDragEnd={ onDragEnd }
-				>
-					<Tooltip text={ truncatedTitle || title }>
-						{ /* Adding `is-hovered` class to the wrapper element is needed
-							because the options Popover is rendered outside of this node. */ }
-						<div
-							onMouseEnter={ onMouseEnter }
-							onMouseLeave={ onMouseLeave }
-						>
-							<CompositeItem
-								role="option"
-								as="div"
-								{ ...composite }
-								className="block-editor-inserter__media-list__item"
-								onClick={ () => onClick( block ) }
-								aria-label={ title }
-							>
-								<div className="block-editor-inserter__media-list__item-preview">
-									{ preview }
-								</div>
-							</CompositeItem>
-							<MediaPreviewOptions
-								category={ category }
-								media={ media }
-							/>
-						</div>
-					</Tooltip>
-				</div>
-			) }
-		</InserterDraggableBlocks>
-	);
-}
+import { MediaPreview } from './media-preview';
 
 function MediaList( {
 	mediaList,
@@ -132,12 +19,6 @@ function MediaList( {
 	label = __( 'Media List' ),
 } ) {
 	const composite = useCompositeState();
-	const onPreviewClick = useCallback(
-		( block ) => {
-			onClick( cloneBlock( block ) );
-		},
-		[ onClick ]
-	);
 	return (
 		<Composite
 			{ ...composite }
@@ -150,7 +31,7 @@ function MediaList( {
 					key={ media.id || media.sourceId || index }
 					media={ media }
 					category={ category }
-					onClick={ onPreviewClick }
+					onClick={ onClick }
 					composite={ composite }
 				/>
 			) ) }

package/src/components/inserter/media-tab/media-preview.js

@@ -0,0 +1,268 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Spinner,
+	Modal,
+	Flex,
+	FlexItem,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useCallback, useState } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { moreVertical, external } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import InserterDraggableBlocks from '../../inserter-draggable-blocks';
+import { getBlockAndPreviewFromMedia } from './utils';
+import { store as blockEditorStore } from '../../../store';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const MAXIMUM_TITLE_LENGTH = 25;
+const MEDIA_OPTIONS_POPOVER_PROPS = {
+	position: 'bottom left',
+	className:
+		'block-editor-inserter__media-list__item-preview-options__popover',
+};
+
+function MediaPreviewOptions( { category, media } ) {
+	if ( ! category.getReportUrl ) {
+		return null;
+	}
+	const reportUrl = category.getReportUrl( media );
+	return (
+		<DropdownMenu
+			className="block-editor-inserter__media-list__item-preview-options"
+			label={ __( 'Options' ) }
+			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
+			icon={ moreVertical }
+		>
+			{ () => (
+				<MenuGroup>
+					<MenuItem
+						onClick={ () =>
+							window.open( reportUrl, '_blank' ).focus()
+						}
+						icon={ external }
+					>
+						{ sprintf(
+							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
+							__( 'Report %s' ),
+							category.mediaType
+						) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function InsertExternalImageModal( { onClose, onSubmit } ) {
+	return (
+		<Modal
+			title={ __( 'Insert external image' ) }
+			onRequestClose={ onClose }
+			className="block-editor-inserter-media-tab-media-preview-inserter-external-image-modal"
+		>
+			<VStack spacing={ 3 }>
+				<p>
+					{ __(
+						'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'
+					) }
+				</p>
+				<p>
+					{ __(
+						'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'
+					) }
+				</p>
+			</VStack>
+			<Flex
+				className="block-editor-block-lock-modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Cancel' ) }
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button variant="primary" onClick={ onSubmit }>
+						{ __( 'Insert' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export function MediaPreview( { media, onClick, composite, category } ) {
+	const [ showExternalUploadModal, setShowExternalUploadModal ] =
+		useState( false );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ isInserting, setIsInserting ] = useState( false );
+	const [ block, preview ] = useMemo(
+		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
+		[ media, category.mediaType ]
+	);
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+	const mediaUpload = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
+		[]
+	);
+	const onMediaInsert = useCallback(
+		( previewBlock ) => {
+			// Prevent multiple uploads when we're in the process of inserting.
+			if ( isInserting ) {
+				return;
+			}
+			const clonedBlock = cloneBlock( previewBlock );
+			const { id, url, caption } = clonedBlock.attributes;
+			// Media item already exists in library, so just insert it.
+			if ( !! id ) {
+				onClick( clonedBlock );
+				return;
+			}
+			setIsInserting( true );
+			// Media item does not exist in library, so try to upload it.
+			// Fist fetch the image data. This may fail if the image host
+			// doesn't allow CORS with the domain.
+			// If this happens, we insert the image block using the external
+			// URL and let the user know about the possible implications.
+			window
+				.fetch( url )
+				.then( ( response ) => response.blob() )
+				.then( ( blob ) => {
+					mediaUpload( {
+						filesList: [ blob ],
+						additionalData: { caption },
+						onFileChange( [ img ] ) {
+							if ( isBlobURL( img.url ) ) {
+								return;
+							}
+							onClick( {
+								...clonedBlock,
+								attributes: {
+									...clonedBlock.attributes,
+									id: img.id,
+									url: img.url,
+								},
+							} );
+							createSuccessNotice(
+								__( 'Image uploaded and inserted.' ),
+								{ type: 'snackbar' }
+							);
+							setIsInserting( false );
+						},
+						allowedTypes: ALLOWED_MEDIA_TYPES,
+						onError( message ) {
+							createErrorNotice( message, { type: 'snackbar' } );
+							setIsInserting( false );
+						},
+					} );
+				} )
+				.catch( () => {
+					setShowExternalUploadModal( true );
+					setIsInserting( false );
+				} );
+		},
+		[
+			isInserting,
+			onClick,
+			mediaUpload,
+			createErrorNotice,
+			createSuccessNotice,
+		]
+	);
+	const title = media.title?.rendered || media.title;
+	let truncatedTitle;
+	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
+		const omission = '...';
+		truncatedTitle =
+			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
+	}
+	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
+	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
+	return (
+		<>
+			<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<div
+						className={ classnames(
+							'block-editor-inserter__media-list__list-item',
+							{
+								'is-hovered': isHovered,
+							}
+						) }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+					>
+						<Tooltip text={ truncatedTitle || title }>
+							{ /* Adding `is-hovered` class to the wrapper element is needed
+							because the options Popover is rendered outside of this node. */ }
+							<div
+								onMouseEnter={ onMouseEnter }
+								onMouseLeave={ onMouseLeave }
+							>
+								<CompositeItem
+									role="option"
+									as="div"
+									{ ...composite }
+									className="block-editor-inserter__media-list__item"
+									onClick={ () => onMediaInsert( block ) }
+									aria-label={ title }
+								>
+									<div className="block-editor-inserter__media-list__item-preview">
+										{ preview }
+										{ isInserting && (
+											<div className="block-editor-inserter__media-list__item-preview-spinner">
+												<Spinner />
+											</div>
+										) }
+									</div>
+								</CompositeItem>
+								{ ! isInserting && (
+									<MediaPreviewOptions
+										category={ category }
+										media={ media }
+									/>
+								) }
+							</div>
+						</Tooltip>
+					</div>
+				) }
+			</InserterDraggableBlocks>
+			{ showExternalUploadModal && (
+				<InsertExternalImageModal
+					onClose={ () => setShowExternalUploadModal( false ) }
+					onSubmit={ () => {
+						onClick( cloneBlock( block ) );
+						createSuccessNotice( __( 'Image inserted.' ), {
+							type: 'snackbar',
+						} );
+						setShowExternalUploadModal( false );
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/inserter/menu.js

@@ -152,7 +152,6 @@ function InserterMenu(
 			destinationRootClientId,
 			onInsert,
 			onHover,
-			delayedFilterValue,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
 		]

package/src/components/inserter/quick-inserter.js

@@ -32,6 +32,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -124,6 +125,7 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			</div>
 

package/src/components/inserter/search-results.js

@@ -46,6 +46,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -88,8 +89,12 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
+		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
+		if ( ! filterValue && orderInitialBlockItems ) {
+			orderedItems = orderInitialBlockItems( orderedItems );
+		}
 		const results = searchBlockItems(
-			orderBy( blockTypes, 'frecency', 'desc' ),
+			orderedItems,
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue
@@ -104,6 +109,7 @@ function InserterSearchResults( {
 		blockTypeCategories,
 		blockTypeCollections,
 		maxBlockTypes,
+		orderInitialBlockItems,
 	] );
 
 	// Announce search results on change.

package/src/components/inserter/style.scss

@@ -35,6 +35,7 @@ $block-inserter-tabs-height: 44px;
 	.components-popover__content {
 		border: none;
 		outline: none;
+		box-shadow: $shadow-popover;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -42,10 +43,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
+				border-radius: $radius-block-ui $radius-block-ui 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
+				border-radius: 0 0 $radius-block-ui $radius-block-ui;
 			}
 
 			&.components-button {
@@ -660,6 +663,17 @@ $block-inserter-tabs-height: 44px;
 				margin: 0 auto;
 				max-width: 100%;
 			}
+
+			.block-editor-inserter__media-list__item-preview-spinner {
+				display: flex;
+				height: 100%;
+				width: 100%;
+				position: absolute;
+				justify-content: center;
+				background: rgba($white, 0.7);
+				align-items: center;
+				pointer-events: none;
+			}
 		}
 
 		&:focus .block-editor-inserter__media-list__item-preview {
@@ -686,3 +700,14 @@ $block-inserter-tabs-height: 44px;
 		height: 100%;
 	}
 }
+
+
+.block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
+	@include break-small() {
+		max-width: $break-mobile;
+	}
+
+	p {
+		margin: 0;
+	}
+}

package/src/components/inserter/tabs.js

@@ -52,15 +52,7 @@ function InserterTabs( {
 			tempTabs.push( reusableBlocksTab );
 		}
 		return tempTabs;
-	}, [
-		prioritizePatterns,
-		blocksTab,
-		showPatterns,
-		patternsTab,
-		showReusableBlocks,
-		showMedia,
-		reusableBlocksTab,
-	] );
+	}, [ prioritizePatterns, showPatterns, showReusableBlocks, showMedia ] );
 
 	return (
 		<TabPanel

package/src/components/inserter/test/__snapshots__/index.native.js.snap

@@ -2,21 +2,21 @@
 
 exports[`Inserter can add blocks adds new block at the end of post 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks after another block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -30,7 +30,7 @@ exports[`Inserter can add blocks after another block 1`] = `
 
 exports[`Inserter can add blocks before another block 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,11 +40,11 @@ exports[`Inserter can add blocks before another block 1`] = `
 
 exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -54,7 +54,7 @@ exports[`Inserter can add blocks creates a new Paragraph block tapping on the em
 
 exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:more -->
@@ -62,17 +62,17 @@ exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -86,11 +86,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -100,11 +100,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 
 exports[`Inserter can add blocks to the end 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -52,7 +52,6 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			updateBlockAttributes( clientIds, newAttributes, true );
 		},
 		[
-			cleanEmptyObject,
 			getBlockAttributes,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,