@wordpress/block-editor 11.3.5 → 11.3.7

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

@@ -67,25 +67,19 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, inserterItems, enableOpenverseMediaCategory } =
-		useSelect(
-			( select ) => {
-				const {
-					__experimentalGetAllowedPatterns,
-					getInserterItems,
-					getSettings,
-				} = select( blockEditorStore );
-				return {
-					showPatterns: !! __experimentalGetAllowedPatterns(
-						destinationRootClientId
-					).length,
-					inserterItems: getInserterItems( destinationRootClientId ),
-					enableOpenverseMediaCategory:
-						getSettings().enableOpenverseMediaCategory,
-				};
-			},
-			[ destinationRootClientId ]
-		);
+	const { showPatterns, inserterItems } = useSelect(
+		( select ) => {
+			const { __experimentalGetAllowedPatterns, getInserterItems } =
+				select( blockEditorStore );
+			return {
+				showPatterns: !! __experimentalGetAllowedPatterns(
+					destinationRootClientId
+				).length,
+				inserterItems: getInserterItems( destinationRootClientId ),
+			};
+		},
+		[ destinationRootClientId ]
+	);
 	const hasReusableBlocks = useMemo( () => {
 		return inserterItems.some(
 			( { category } ) => category === 'reusable'
@@ -93,7 +87,7 @@ function InserterMenu(
 	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = !! mediaCategories.length || enableOpenverseMediaCategory;
+	const showMedia = !! mediaCategories.length;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {

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/link-control/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import { keyboardReturn } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -112,7 +113,6 @@ function LinkControl( {
 	settings = DEFAULT_LINK_SETTINGS,
 	onChange = noop,
 	onRemove,
-	onCancel,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -190,8 +190,6 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
-	const hasLinkValue = value?.url?.trim()?.length > 0;
-
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
@@ -237,29 +235,6 @@ function LinkControl( {
 		}
 	};
 
-	const resetInternalValues = () => {
-		setInternalUrlInputValue( value?.url );
-		setInternalTextInputValue( value?.title );
-	};
-
-	const handleCancel = ( event ) => {
-		event.preventDefault();
-		event.stopPropagation();
-
-		// Ensure that any unsubmitted input changes are reset.
-		resetInternalValues();
-
-		if ( hasLinkValue ) {
-			// If there is a link then exist editing mode and show preview.
-			stopEditing();
-		} else {
-			// If there is no link value, then remove the link entirely.
-			onRemove?.();
-		}
-
-		onCancel?.();
-	};
-
 	const currentUrlInputValue = propInputValue || internalUrlInputValue;
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
@@ -272,9 +247,8 @@ function LinkControl( {
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
-	const showTextControl = hasLinkValue && hasTextControl;
+	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
 
-	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	return (
 		<div
 			tabIndex={ -1 }
@@ -287,7 +261,7 @@ function LinkControl( {
 				</div>
 			) }
 
-			{ isEditing && (
+			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
 				<>
 					<div
 						className={ classnames( {
@@ -325,7 +299,17 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							useLabel={ showTextControl }
-						/>
+						>
+							<div className="block-editor-link-control__search-actions">
+								<Button
+									onClick={ handleSubmit }
+									label={ __( 'Submit' ) }
+									icon={ keyboardReturn }
+									className="block-editor-link-control__search-submit"
+									disabled={ currentInputIsEmpty } // Disallow submitting empty values.
+								/>
+							</div>
+						</LinkControlSearchInput>
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -350,34 +334,15 @@ function LinkControl( {
 				/>
 			) }
 
-			<div className="block-editor-link-control__drawer">
-				{ showSettingsDrawer && (
-					<div className="block-editor-link-control__tools">
-						<LinkControlSettingsDrawer
-							value={ value }
-							settings={ settings }
-							onChange={ onChange }
-						/>
-					</div>
-				) }
-
-				{ isEditing && (
-					<div className="block-editor-link-control__search-actions">
-						<Button
-							variant="primary"
-							onClick={ handleSubmit }
-							className="xblock-editor-link-control__search-submit"
-							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
-						>
-							{ __( 'Apply' ) }
-						</Button>
-						<Button variant="tertiary" onClick={ handleCancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</div>
-				) }
-			</div>
-
+			{ showSettingsDrawer && (
+				<div className="block-editor-link-control__tools">
+					<LinkControlSettingsDrawer
+						value={ value }
+						settings={ settings }
+						onChange={ onChange }
+					/>
+				</div>
+			) }
 			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);

package/src/components/link-control/style.scss

@@ -64,6 +64,7 @@ $preview-image-height: 140px;
 		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
 		padding: 11px $grid-unit-20;
+		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
 		margin: 0;
 		position: relative;
 		border: 1px solid $gray-300;
@@ -76,10 +77,20 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-actions {
-	display: flex;
-	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
-	justify-content: flex-start;
-	gap: $grid-unit-10;
+	position: absolute;
+	/*
+	 * Actions must be positioned on top of URLInput, since the input will grow
+	 * when suggestions are rendered.
+	 *
+	 * Compensate for:
+	 *  - Border (1px)
+	 *  - Vertically, for the difference in height between the input (40px) and
+	 *    the icon buttons.
+	 *  - Horizontally, pad to the minimum of: default input padding, or the
+	 *    equivalent of the vertical padding.
+	 */
+	top: 1px + ( ( 40px - $button-size ) * 0.5 );
+	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -426,10 +437,9 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
-.block-editor-link-control__drawer {
+.block-editor-link-control__tools {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
 	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20;
@@ -469,8 +479,14 @@ $preview-image-height: 140px;
 		position: absolute;
 		left: auto;
 		bottom: auto;
+		/*
+		 * Position spinner to the left of the actions.
+		 *
+		 * Compensate for:
+		 *  - Input padding right ($button-size)
+		 */
 		top: calc(50% - #{$spinner-size} / 2);
-		right: $grid-unit-20;
+		right: $button-size;
 	}
 }