@wordpress/block-editor 12.5.0 → 12.7.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,
@@ -207,7 +245,6 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
-		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -292,7 +329,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 +338,7 @@ function LinkControl( {
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
 	return (
 		<div
@@ -374,7 +411,10 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					onRemove={ onRemove }
+					onRemove={ () => {
+						onRemove();
+						setIsEditingLink( true );
+					} }
 				/>
 			) }
 
@@ -382,8 +422,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

@@ -42,11 +42,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 ) {
@@ -87,10 +89,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>

package/src/components/link-control/search-item.js

@@ -54,7 +54,7 @@ export const LinkControlSearchItem = ( {
 } ) => {
 	const info = isURL
 		? __( 'Press ENTER to add this link' )
-		: filterURLForDisplay( safeDecodeURI( suggestion?.url ) );
+		: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );
 
 	return (
 		<MenuItem

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;
 }
 
@@ -139,6 +139,13 @@ $preview-image-height: 140px;
 		// Inline block required to preserve white space
 		// between `<mark>` elements and text nodes.
 		display: inline-block;
+		width: 100%;
+
+		mark {
+			font-weight: 600;
+			color: inherit;
+			background-color: transparent;
+		}
 	}
 
 	.components-menu-item__shortcut {
@@ -208,12 +215,12 @@ $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: 700;
+			font-weight: 600;
 			color: inherit;
 			background-color: transparent;
 		}
@@ -284,6 +291,7 @@ $preview-image-height: 140px;
 	display: flex;
 	flex-direction: row;
 	width: 100%; // clip.
+	align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

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

@@ -405,6 +405,32 @@ describe( 'Basic rendering', () => {
 
 			expect( mockOnRemove ).toHaveBeenCalled();
 		} );
+
+		it( 'should revert to "editing" mode when onRemove is triggered', async () => {
+			const user = userEvent.setup();
+			const mockOnRemove = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: 'https://example.com' } }
+					onRemove={ mockOnRemove }
+				/>
+			);
+
+			const unLinkButton = screen.queryByRole( 'button', {
+				name: 'Unlink',
+			} );
+			expect( unLinkButton ).toBeVisible();
+
+			await user.click( unLinkButton );
+
+			expect( mockOnRemove ).toHaveBeenCalled();
+
+			// Should revert back to editing mode.
+			expect(
+				screen.getByRole( 'combobox', { name: 'Link' } )
+			).toBeVisible();
+		} );
 	} );
 } );
 
@@ -1708,7 +1734,7 @@ 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 hide advanced link settings when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1723,6 +1749,7 @@ describe( 'Addition Settings UI', () => {
 
 		expect( settingsToggle ).not.toBeInTheDocument();
 	} );
+
 	it( 'should provides a means to toggle the link settings', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 

package/src/components/list-view/use-list-view-client-ids.js

@@ -16,14 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				getListViewClientIdsTree,
+				getEnabledClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
 				clientIdsTree:
-					blocks ?? getListViewClientIdsTree( rootClientId ),
+					blocks ?? getEnabledClientIdsTree( rootClientId ),
 			};
 		},
 		[ blocks, rootClientId ]

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/media-placeholder/index.native.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { sentenceCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -13,14 +14,15 @@ import {
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 } from '@wordpress/block-editor';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { cloneElement, useCallback, useRef } from '@wordpress/element';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { useBlockEditContext } from '../block-edit/context';
 
 const isMediaEqual = ( media1, media2 ) =>
 	media1.id === media2.id || media1.url === media2.url;
@@ -35,10 +37,13 @@ const dedupMedia = ( media ) =>
 		[]
 	);
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 function MediaPlaceholder( props ) {
 	const {
 		addToGallery,
 		allowedTypes = [],
+		className = '',
 		labels = {},
 		icon,
 		onSelect,
@@ -46,7 +51,6 @@ function MediaPlaceholder( props ) {
 		__experimentalOnlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
-		getStylesFromColorScheme,
 		multiple,
 		value = [],
 		children,
@@ -61,6 +65,16 @@ function MediaPlaceholder( props ) {
 	const mediaRef = useRef( value );
 	mediaRef.current = value;
 
+	const blockEditContext = useBlockEditContext();
+
+	const onButtonPress = useCallback(
+		( open ) => ( event ) => {
+			onFocus?.( event );
+			open();
+		},
+		[ onFocus ]
+	);
+
 	// Append and deduplicate media array for gallery use case.
 	const setMedia =
 		multiple && addToGallery
@@ -109,55 +123,104 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select an audio file' );
 	}
 
-	const emptyStateTitleStyle = getStylesFromColorScheme(
-		styles.emptyStateTitle,
-		styles.emptyStateTitleDark
+	const titleStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__header-title' ],
+		styles[ 'media-placeholder__header-title--dark' ]
 	);
-	const addMediaButtonStyle = getStylesFromColorScheme(
+	const addMediaButtonStyle = usePreferredColorSchemeStyle(
 		styles.addMediaButton,
 		styles.addMediaButtonDark
 	);
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__button' ],
+		styles[ 'media-placeholder__button--dark' ]
+	);
+	const emptyStateDescriptionStyles = usePreferredColorSchemeStyle(
+		styles.emptyStateDescription,
+		styles.emptyStateDescriptionDark
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__header-icon' ],
+		styles[ 'media-placeholder__header-icon--dark' ]
+	);
+	const placeholderIcon = cloneElement( icon, {
+		fill: iconStyles.fill,
+	} );
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for the media block empty state. %s: media type */
+		__( '%s block. Empty' ),
+		placeholderTitle
+	);
 
-	const renderContent = () => {
+	const renderContent = ( open ) => {
 		if ( isAppender === undefined || ! isAppender ) {
 			return (
 				<>
-					<View style={ styles.modalIcon }>{ icon }</View>
-					<Text style={ emptyStateTitleStyle }>
-						{ placeholderTitle }
-					</Text>
+					<View style={ styles[ 'media-placeholder__header' ] }>
+						<View style={ iconStyles }>{ placeholderIcon }</View>
+						<Text style={ titleStyles }>{ placeholderTitle }</Text>
+					</View>
 					{ children }
-					<Text style={ styles.emptyStateDescription }>
-						{ instructions }
-					</Text>
+					<TouchableOpacity
+						activeOpacity={ 0.5 }
+						accessibilityLabel={ accessibilityLabel }
+						style={ buttonStyles }
+						accessibilityRole={ 'button' }
+						accessibilityHint={ accessibilityHint }
+						hitSlop={ hitSlop }
+						onPress={ onButtonPress( open ) }
+					>
+						<Text style={ emptyStateDescriptionStyles }>
+							{ sentenceCase( instructions ) }
+						</Text>
+					</TouchableOpacity>
 				</>
 			);
 		} else if ( isAppender && ! disableMediaButtons ) {
 			return (
-				<View testID="media-placeholder-appender-icon">
-					<Icon
-						icon={ plusCircleFilled }
-						style={ addMediaButtonStyle }
-						color={ addMediaButtonStyle.color }
-						size={ addMediaButtonStyle.size }
-					/>
-				</View>
+				<TouchableOpacity
+					activeOpacity={ 0.5 }
+					accessibilityLabel={ accessibilityLabel }
+					style={ styles[ 'media-placeholder__appender' ] }
+					accessibilityRole={ 'button' }
+					accessibilityHint={ accessibilityHint }
+					hitSlop={ hitSlop }
+					onPress={ onButtonPress( open ) }
+				>
+					<View testID="media-placeholder-appender-icon">
+						<Icon
+							icon={ plusCircleFilled }
+							style={ addMediaButtonStyle }
+							color={ addMediaButtonStyle.color }
+							size={ addMediaButtonStyle.size }
+						/>
+					</View>
+				</TouchableOpacity>
 			);
 		}
 	};
 
-	if ( isAppender && disableMediaButtons ) {
-		return null;
-	}
-
-	const appenderStyle = getStylesFromColorScheme(
+	const appenderStyle = usePreferredColorSchemeStyle(
 		styles.appender,
 		styles.appenderDark
 	);
-	const emptyStateContainerStyle = getStylesFromColorScheme(
-		styles.emptyStateContainer,
-		styles.emptyStateContainerDark
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__container-selected' ],
+		styles[ 'media-placeholder__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'media-placeholder__container' ],
+			styles[ 'media-placeholder__container--dark' ]
+		),
+		blockEditContext?.isSelected &&
+			! className.includes( 'no-block-outline' ) &&
+			containerSelectedStyle,
+	];
+
+	if ( isAppender && disableMediaButtons ) {
+		return null;
+	}
 
 	return (
 		<View style={ { flex: 1 } }>
@@ -173,33 +236,19 @@ function MediaPlaceholder( props ) {
 				autoOpen={ autoOpenMediaUpload }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
-						<TouchableWithoutFeedback
-							accessibilityLabel={ sprintf(
-								/* translators: accessibility text for the media block empty state. %s: media type */
-								__( '%s block. Empty' ),
-								placeholderTitle
-							) }
-							accessibilityRole={ 'button' }
-							accessibilityHint={ accessibilityHint }
-							onPress={ ( event ) => {
-								onFocus?.( event );
-								open();
-							} }
+						<View
+							style={ [
+								[
+									containerStyle,
+									height && { height },
+									backgroundColor && { backgroundColor },
+								],
+								isAppender && appenderStyle,
+							] }
 						>
-							<View
-								style={ [
-									[
-										emptyStateContainerStyle,
-										height && { height },
-										backgroundColor && { backgroundColor },
-									],
-									isAppender && appenderStyle,
-								] }
-							>
-								{ getMediaOptions() }
-								{ ! hideContent && renderContent() }
-							</View>
-						</TouchableWithoutFeedback>
+							{ getMediaOptions() }
+							{ ! hideContent && renderContent( open ) }
+						</View>
 					);
 				} }
 			/>
@@ -207,4 +256,4 @@ function MediaPlaceholder( props ) {
 	);
 }
 
-export default withPreferredColorScheme( MediaPlaceholder );
+export default MediaPlaceholder;

package/src/components/media-placeholder/styles.native.scss

@@ -1,50 +1,63 @@
-.emptyStateContainer {
+.media-placeholder__container {
 	flex: 1;
 	height: 142;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
-.emptyStateContainerDark {
-	background-color: $background-dark-secondary;
+.media-placeholder__container--dark {
+	background-color: #1f1f1f; // $dark-dim
 }
 
-.emptyStateTitle {
-	text-align: center;
-	margin-top: 4;
-	margin-bottom: 16;
-	font-size: 14;
-	color: #2e4453;
+.media-placeholder__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
 }
 
-.emptyStateTitleDark {
-	color: $white;
+.media-placeholder__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .emptyStateDescription {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.emptyStateDescriptionDark {
+	color: $black;
 }
 
-.modalIcon {
+.media-placeholder__header-icon {
 	width: 24px;
 	height: 24px;
-	justify-content: center;
-	align-items: center;
-	fill: $gray-dark;
+	margin-right: $grid-unit;
+	fill: $light-secondary;
+}
+
+.media-placeholder__header-icon--dark {
+	fill: $dark-tertiary;
+}
+
+.media-placeholder__header-title {
+	text-align: center;
+	font-size: 16;
+	color: $light-secondary;
+}
+
+.media-placeholder__header-title--dark {
+	color: $dark-tertiary;
 }
 
 .appender {
@@ -71,3 +84,25 @@
 	color: $background-dark-secondary;
 	background-color: $gray-20;
 }
+
+.media-placeholder__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.media-placeholder__button--dark {
+	background-color: $dark-primary;
+}
+
+.media-placeholder__header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.media-placeholder__appender {
+	width: 100%;
+	align-items: center;
+}

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 (
 							<>