@wordpress/block-editor 12.5.0 → 12.6.0

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

@@ -374,7 +374,10 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					onRemove={ onRemove }
+					onRemove={ () => {
+						onRemove();
+						setIsEditingLink( true );
+					} }
 				/>
 			) }
 

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

@@ -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 {
@@ -213,7 +220,7 @@ $preview-image-height: 140px;
 		position: relative;
 
 		mark {
-			font-weight: 700;
+			font-weight: 600;
 			color: inherit;
 			background-color: transparent;
 		}

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();
+		} );
 	} );
 } );
 

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/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/preview-options/README.md

@@ -28,23 +28,24 @@ const MyPreviewOptions = () => (
 		className="edit-post-post-preview-dropdown"
 		deviceType={ deviceType }
 		setDeviceType={ setPreviewDeviceType }
-	>
-		<MenuGroup>
-			<div className="edit-post-header-preview__grouping-external">
-				<PostPreviewButton
-					className={ 'edit-post-header-preview__button-external' }
-					role="menuitem"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-					textContent={
-						<>
-							{ __( 'Preview in new tab' ) }
-							<Icon icon={ external } />
-						</>
-					}
-				/>
-			</div>
-		</MenuGroup>
+	> { ( { onClose } ) => (
+			<MenuGroup>
+				<div className="edit-post-header-preview__grouping-external">
+					<PostPreviewButton
+						className="edit-post-header-preview__button-external"
+						role="menuitem"
+						forceIsAutosaveable={ hasActiveMetaboxes }
+						textContent={
+							<>
+								{ __( 'Preview in new tab' ) }
+								<Icon icon={ external } />
+							</>
+						}
+						onPreview={ onClose }
+					/>
+				</div>
+			</MenuGroup>
+		) }
 	</PreviewOptions>
 );
 ```

package/src/components/preview-options/index.js

@@ -54,7 +54,7 @@ export default function PreviewOptions( {
 			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 			label={ label || __( 'Preview' ) }
 		>
-			{ () => (
+			{ ( renderProps ) => (
 				<>
 					<MenuGroup>
 						<MenuItem
@@ -79,7 +79,7 @@ export default function PreviewOptions( {
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
-					{ children }
+					{ children( renderProps ) }
 				</>
 			) }
 		</DropdownMenu>

package/src/components/rich-text/content.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { RawHTML } from '@wordpress/element';
-import {
-	children as childrenSource,
-	getSaveElement,
-	__unstableGetBlockProps as getBlockProps,
-} from '@wordpress/blocks';
+import { children as childrenSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -42,44 +38,3 @@ export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 
 	return content;
 };
-
-Content.__unstableIsRichTextContent = {};
-
-function findContent( blocks, richTextValues = [] ) {
-	if ( ! Array.isArray( blocks ) ) {
-		blocks = [ blocks ];
-	}
-
-	for ( const block of blocks ) {
-		if (
-			block?.type?.__unstableIsRichTextContent ===
-			Content.__unstableIsRichTextContent
-		) {
-			richTextValues.push( block.props.value );
-			continue;
-		}
-
-		if ( block?.props?.children ) {
-			findContent( block.props.children, richTextValues );
-		}
-	}
-
-	return richTextValues;
-}
-
-function _getSaveElement( { name, attributes, innerBlocks } ) {
-	return getSaveElement(
-		name,
-		attributes,
-		innerBlocks.map( _getSaveElement )
-	);
-}
-
-export function getRichTextValues( blocks = [] ) {
-	getBlockProps.skipFilters = true;
-	const values = findContent(
-		( Array.isArray( blocks ) ? blocks : [ blocks ] ).map( _getSaveElement )
-	);
-	getBlockProps.skipFilters = false;
-	return values;
-}

package/src/components/rich-text/get-rich-text-values.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML, StrictMode, Fragment } from '@wordpress/element';
+import {
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from '../inner-blocks';
+import { Content } from './content';
+
+/*
+ * This function is similar to `@wordpress/element`'s `renderToString` function,
+ * except that it does not render the elements to a string, but instead collects
+ * the values of all rich text `Content` elements.
+ */
+function addValuesForElement( element, ...args ) {
+	if ( null === element || undefined === element || false === element ) {
+		return;
+	}
+
+	if ( Array.isArray( element ) ) {
+		return addValuesForElements( element, ...args );
+	}
+
+	switch ( typeof element ) {
+		case 'string':
+		case 'number':
+			return;
+	}
+
+	const { type, props } = element;
+
+	switch ( type ) {
+		case StrictMode:
+		case Fragment:
+			return addValuesForElements( props.children, ...args );
+		case RawHTML:
+			return;
+		case InnerBlocks.Content:
+			return addValuesForBlocks( ...args );
+		case Content:
+			const [ values ] = args;
+			values.push( props.value );
+			return;
+	}
+
+	switch ( typeof type ) {
+		case 'string':
+			if ( typeof props.children !== 'undefined' ) {
+				return addValuesForElements( props.children, ...args );
+			}
+			return;
+		case 'function':
+			if (
+				type.prototype &&
+				typeof type.prototype.render === 'function'
+			) {
+				return addValuesForElement(
+					new type( props ).render(),
+					...args
+				);
+			}
+
+			return addValuesForElement( type( props ), ...args );
+	}
+}
+
+function addValuesForElements( children, ...args ) {
+	children = Array.isArray( children ) ? children : [ children ];
+
+	for ( let i = 0; i < children.length; i++ ) {
+		addValuesForElement( children[ i ], ...args );
+	}
+}
+
+function _getSaveElement( name, attributes, innerBlocks ) {
+	return getSaveElement(
+		name,
+		attributes,
+		innerBlocks.map( ( block ) =>
+			_getSaveElement( block.name, block.attributes, block.innerBlocks )
+		)
+	);
+}
+
+function addValuesForBlocks( values, blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const { name, attributes, innerBlocks } = blocks[ i ];
+		const saveElement = _getSaveElement( name, attributes, innerBlocks );
+		addValuesForElement( saveElement, values, innerBlocks );
+	}
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = [];
+	addValuesForBlocks( values, blocks );
+	getBlockProps.skipFilters = false;
+	return values;
+}

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -10,7 +10,7 @@ import useSetting from '../../use-setting';
 
 export default function useSpacingSizes() {
 	const spacingSizes = [
-		{ name: 0, slug: '0', side: 0 },
+		{ name: 0, slug: '0', size: 0 },
 		...( useSetting( 'spacing.spacingSizes' ) || [] ),
 	];