@wordpress/block-editor 12.6.0 → 12.8.0

package/src/components/link-control/index.js

@@ -12,6 +12,8 @@ import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -101,6 +103,9 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
 
 const noop = () => {};
 
+const PREFERENCE_SCOPE = 'core/block-editor';
+const PREFERENCE_KEY = 'linkControlSettingsDrawer';
+
 /**
  * Renders a link control. A link control is a controlled input which maintains
  * a value associated with a link (HTML anchor element) and relevant settings
@@ -133,6 +138,41 @@ function LinkControl( {
 		withCreateSuggestion = true;
 	}
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
+	const { advancedSettingsPreference } = useSelect( ( select ) => {
+		const prefsStore = select( preferencesStore );
+
+		return {
+			advancedSettingsPreference:
+				prefsStore.get( PREFERENCE_SCOPE, PREFERENCE_KEY ) ?? false,
+		};
+	}, [] );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	/**
+	 * Sets the open/closed state of the Advanced Settings Drawer,
+	 * optionlly persisting the state to the user's preferences.
+	 *
+	 * Note that Block Editor components can be consumed by non-WordPress
+	 * environments which may not have preferences setup.
+	 * Therefore a local state is also  used as a fallback.
+	 *
+	 * @param {boolean} prefVal the open/closed state of the Advanced Settings Drawer.
+	 */
+	const setSettingsOpenWithPreference = ( prefVal ) => {
+		if ( setPreference ) {
+			setPreference( PREFERENCE_SCOPE, PREFERENCE_KEY, prefVal );
+		}
+		setSettingsOpen( prefVal );
+	};
+
+	// Block Editor components can be consumed by non-WordPress environments
+	// which may not have these preferences setup.
+	// Therefore a local state is used as a fallback.
+	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
+
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
@@ -140,8 +180,6 @@ function LinkControl( {
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
-	const [ settingsOpen, setSettingsOpen ] = useState( false );
-
 	const [
 		internalControlValue,
 		setInternalControlValue,
@@ -163,14 +201,11 @@ function LinkControl( {
 		useCreatePage( createSuggestion );
 
 	useEffect( () => {
-		if (
-			forceIsEditingLink !== undefined &&
-			forceIsEditingLink !== isEditingLink
-		) {
-			setIsEditingLink( forceIsEditingLink );
+		if ( forceIsEditingLink === undefined ) {
+			return;
 		}
-		// Todo: bug if the missing dep is introduced. Will need a fix.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+
+		setIsEditingLink( forceIsEditingLink );
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
@@ -207,7 +242,6 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
-		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -292,7 +326,6 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
@@ -302,6 +335,7 @@ function LinkControl( {
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
 	return (
 		<div
@@ -374,6 +408,29 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
+					additionalControls={ () => {
+						// Expose the "Opens in new tab" settings in the preview
+						// as it is the most common setting to change.
+						if (
+							settings?.find(
+								( setting ) => setting.id === 'opensInNewTab'
+							)
+						) {
+							return (
+								<LinkSettings
+									value={ internalControlValue }
+									settings={ settings?.filter(
+										( { id } ) => id === 'opensInNewTab'
+									) }
+									onChange={ ( { opensInNewTab } ) => {
+										onChange( {
+											opensInNewTab,
+										} );
+									} }
+								/>
+							);
+						}
+					} }
 					onRemove={ () => {
 						onRemove();
 						setIsEditingLink( true );
@@ -385,8 +442,8 @@ function LinkControl( {
 				<div className="block-editor-link-control__tools">
 					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
-							settingsOpen={ settingsOpen }
-							setSettingsOpen={ setSettingsOpen }
+							settingsOpen={ isSettingsOpen }
+							setSettingsOpen={ setSettingsOpenWithPreference }
 						>
 							<LinkSettings
 								value={ internalControlValue }

package/src/components/link-control/link-preview.js

@@ -29,6 +29,7 @@ export default function LinkPreview( {
 	hasRichPreviews = false,
 	hasUnlinkControl = false,
 	onRemove,
+	additionalControls,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -42,11 +43,13 @@ export default function LinkPreview( {
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
 		'';
 
-	const displayTitle = richData?.title || value?.title || displayURL;
-
 	// url can be undefined if the href attribute is unset
 	const isEmptyURL = ! value?.url?.length;
 
+	const displayTitle =
+		! isEmptyURL &&
+		stripHTML( richData?.title || value?.title || displayURL );
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -66,6 +69,7 @@ export default function LinkPreview( {
 				'is-fetching': !! isFetching,
 				'is-preview': true,
 				'is-error': isEmptyURL,
+				'is-url-title': displayTitle === displayURL,
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
@@ -87,10 +91,10 @@ export default function LinkPreview( {
 									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
-									{ stripHTML( displayTitle ) }
+									{ displayTitle }
 								</ExternalLink>
 
-								{ value?.url && (
+								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
 										{ displayURL }
 									</span>
@@ -164,6 +168,8 @@ export default function LinkPreview( {
 					) }
 				</div>
 			) }
+
+			{ additionalControls && additionalControls() }
 		</div>
 	);
 }

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

@@ -84,7 +84,7 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
-	padding: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 	order: 20;
 }
 
@@ -193,6 +193,11 @@ $preview-image-height: 140px;
 		align-items: center;
 	}
 
+	&.is-url-title .block-editor-link-control__search-item-title {
+		// To prevent overflow when the title is a URL
+		word-break: break-all;
+	}
+
 	.block-editor-link-control__search-item-icon {
 		position: relative;
 		margin-right: $grid-unit-10;
@@ -215,9 +220,9 @@ $preview-image-height: 140px;
 
 	.block-editor-link-control__search-item-title {
 		display: block;
-		margin-bottom: 0.2em;
 		font-weight: 500;
 		position: relative;
+		line-height: $grid-unit-30;
 
 		mark {
 			font-weight: 600;
@@ -291,6 +296,7 @@ $preview-image-height: 140px;
 	display: flex;
 	flex-direction: row;
 	width: 100%; // clip.
+	align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {
@@ -407,6 +413,10 @@ $preview-image-height: 140px;
 	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}
+
+	.is-preview & {
+		padding: 20px $grid-unit-10 $grid-unit-10 0;
+	}
 }
 
 .block-editor-link-control__tools {

package/src/components/link-control/test/index.js

@@ -1734,7 +1734,66 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should not show a means to toggle the link settings when not editing a link', async () => {
+	it( 'should allow toggling the "Opens in new tab" setting control (only) on the link preview', async () => {
+		const user = userEvent.setup();
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+		const mockOnChange = jest.fn();
+
+		const customSettings = [
+			{
+				id: 'opensInNewTab',
+				title: 'Open in new tab',
+			},
+			{
+				id: 'noFollow',
+				title: 'No follow',
+			},
+		];
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( selectedLink );
+
+			return (
+				<LinkControl
+					value={ link }
+					settings={ customSettings }
+					onChange={ ( newVal ) => {
+						mockOnChange( newVal );
+						setLink( newVal );
+					} }
+				/>
+			);
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const opensInNewTabField = screen.queryByRole( 'checkbox', {
+			name: 'Open in new tab',
+			checked: false,
+		} );
+
+		expect( opensInNewTabField ).toBeInTheDocument();
+
+		// No matter which settings are passed in only the `Opens in new tab`
+		// setting should be shown on the link preview (non-editing) state.
+		const noFollowField = screen.queryByRole( 'checkbox', {
+			name: 'No follow',
+		} );
+		expect( noFollowField ).not.toBeInTheDocument();
+
+		// Check that the link value is updated immediately upon checking
+		// the checkbox.
+		await user.click( opensInNewTabField );
+
+		expect( opensInNewTabField ).toBeChecked();
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenCalledWith( {
+			opensInNewTab: true,
+		} );
+	} );
+
+	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1749,7 +1808,8 @@ describe( 'Addition Settings UI', () => {
 
 		expect( settingsToggle ).not.toBeInTheDocument();
 	} );
-	it( 'should provides a means to toggle the link settings', async () => {
+
+	it( 'should provides a means to toggle the advanced link settings when editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1784,7 +1844,7 @@ describe( 'Addition Settings UI', () => {
 		expect( newTabSettingInput ).not.toBeVisible();
 	} );
 
-	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
+	it( 'should display "New Tab" setting (in "off" mode) by default when a link is edited', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
 
@@ -1816,7 +1876,7 @@ describe( 'Addition Settings UI', () => {
 
 		const customSettings = [
 			{
-				id: 'newTab',
+				id: 'opensInNewTab',
 				title: 'Open in new tab',
 			},
 			{

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

@@ -28,6 +28,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
+import useListViewImages from './use-list-view-images';
 
 function ListViewBlockSelectButton(
 	{
@@ -63,6 +64,7 @@ function ListViewBlockSelectButton(
 	const { removeBlocks } = useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
+	const images = useListViewImages( { clientId, isExpanded } );
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -184,6 +186,23 @@ function ListViewBlockSelectButton(
 							</span>
 						</Tooltip>
 					) }
+					{ images.length ? (
+						<span
+							className="block-editor-list-view-block-select-button__images"
+							aria-hidden
+						>
+							{ images.map( ( image, index ) => (
+								<span
+									className="block-editor-list-view-block-select-button__image"
+									key={ `img-${ image.url }` }
+									style={ {
+										backgroundImage: `url(${ image.url })`,
+										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+									} }
+								/>
+							) ) }
+						</span>
+					) : null }
 					{ isLocked && (
 						<span className="block-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />

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

@@ -39,7 +39,6 @@ import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
-import { unlock } from '../../lock-unlock';
 import AriaReferencedText from './aria-referenced-text';
 
 function ListViewBlock( {
@@ -84,9 +83,7 @@ function ListViewBlock( {
 	);
 	const blockEditingMode = useSelect(
 		( select ) =>
-			unlock( select( blockEditorStore ) ).getBlockEditingMode(
-				clientId
-			),
+			select( blockEditorStore ).getBlockEditingMode( clientId ),
 		[ clientId ]
 	);
 

package/src/components/list-view/style.scss

@@ -339,6 +339,31 @@
 	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
+
+	.block-editor-list-view-block-select-button__images {
+		display: flex;
+	}
+
+	.block-editor-list-view-block-select-button__image {
+		background-size: cover;
+		width: 18px;
+		height: 18px;
+		border-radius: $radius-block-ui;
+
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-block-ui $white;
+		}
+
+		&:not(:first-child) {
+			margin-left: #{$grid-unit-15 * -0.5};
+		}
+	}
+
+	&.is-selected .block-editor-list-view-block-select-button__image {
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-block-ui var(--wp-admin-theme-color);
+		}
+	}
 }
 
 .block-editor-list-view-block__contents-cell,

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

@@ -489,7 +489,11 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const ref = useDropZone( {
 		dropZoneElement,
-		onDrop: onBlockDrop,
+		onDrop( event ) {
+			if ( target ) {
+				onBlockDrop( event );
+			}
+		},
 		onDragLeave() {
 			throttled.cancel();
 			setTarget( null );

package/src/components/list-view/use-list-view-images.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Maximum number of images to display in a list view row.
+const MAX_IMAGES = 3;
+
+function getImageUrl( block ) {
+	if ( block.name !== 'core/image' ) {
+		return;
+	}
+
+	if ( block.attributes?.url ) {
+		return { url: block.attributes.url, alt: block.attributes.alt };
+	}
+}
+
+function getImagesFromGallery( block ) {
+	if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
+		return [];
+	}
+
+	const images = [];
+
+	for ( const innerBlock of block.innerBlocks ) {
+		const img = getImageUrl( innerBlock );
+		if ( img ) {
+			images.push( img );
+		}
+		if ( images.length >= MAX_IMAGES ) {
+			return images;
+		}
+	}
+
+	return images;
+}
+
+function getImagesFromBlock( block, isExpanded ) {
+	const img = getImageUrl( block );
+	if ( img ) {
+		return [ img ];
+	}
+	return isExpanded ? [] : getImagesFromGallery( block );
+}
+
+/**
+ * Get a block's preview images for display within a list view row.
+ *
+ * TODO: Currently only supports images from the core/image and core/gallery
+ * blocks. This should be expanded to support other blocks that have images,
+ * potentially via an API that blocks can opt into / provide their own logic.
+ *
+ * @param {Object}  props            Hook properties.
+ * @param {string}  props.clientId   The block's clientId.
+ * @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
+ * @return {Array} Images.
+ */
+export default function useListViewImages( { clientId, isExpanded } ) {
+	const { block } = useSelect(
+		( select ) => {
+			const _block = select( blockEditorStore ).getBlock( clientId );
+			return { block: _block };
+		},
+		[ clientId ]
+	);
+
+	const images = useMemo( () => {
+		return getImagesFromBlock( block, isExpanded );
+	}, [ block, isExpanded ] );
+
+	return images;
+}

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

@@ -1,3 +1,12 @@
-// MediaReplaceFlow component is not yet implemented in the native version,
-// so we return an empty component instead.
-export default () => null;
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+// MediaReplaceFlow component is not yet implemented in the native version.
+// For testing purposes, we are using an empty View component with a testID prop.
+const MediaReplaceFlow = () => {
+	return <View testID="media-replace-flow" />;
+};
+
+export default MediaReplaceFlow;

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

@@ -44,6 +44,7 @@ describe( 'MediaUpload component', () => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
+					onSelectURL={ jest.fn() }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
 							<>

package/src/components/rich-text/format-edit.js

@@ -2,43 +2,67 @@
  * WordPress dependencies
  */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
-
-		if ( ! Edit ) {
-			return null;
-		}
-
-		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
-
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
+
+export const usesContextKey = Symbol( 'usesContext' );
+
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
+
+	const blockContext = useContext( BlockContext );
+
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
+
+	if ( ! EditFunction ) {
+		return null;
+	}
+
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
+
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
+			}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
+
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }