@wordpress/block-editor 12.4.0 → 12.6.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/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/test/index.js

@@ -128,7 +128,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'URL',
+			name: 'Link',
 			expanded: false,
 		} );
 

package/src/components/panel-color-settings/README.md

@@ -0,0 +1,98 @@
+# PanelColorSettings
+
+`PanelColorSettings` is a React component that renders a UI for managing various color settings.
+It is essentially a wrapper around the `PanelColorGradientSettings` component, but specifically disables the gradient features.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { PanelColorSettings } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyPanelColorSettings = () => {
+	const [ textColor, setTextColor ] = useState( { color: '#000' } );
+	const [ backgroundColor, setBackgroundColor ] = useState( {
+		color: '#fff',
+	} );
+	const [ overlayTextColor, setOverlayTextColor ] = useState( {
+		color: '#000',
+	} );
+	const [ overlayBackgroundColor, setOverlayBackgroundColor ] = useState( {
+		color: '#eee',
+	} );
+
+	return (
+		<PanelColorSettings
+			__experimentalIsRenderedInSidebar
+			title={ __( 'Color' ) }
+			colorSettings={ [
+				{
+					value: textColor.color,
+					onChange: setTextColor,
+					label: __( 'Text' ),
+				},
+				{
+					value: backgroundColor.color,
+					onChange: setBackgroundColor,
+					label: __( 'Background' ),
+				},
+				{
+					value: overlayTextColor.color,
+					onChange: setOverlayTextColor,
+					label: __( 'Submenu & overlay text' ),
+				},
+				{
+					value: overlayBackgroundColor.color,
+					onChange: setOverlayBackgroundColor,
+					label: __( 'Submenu & overlay background' ),
+				},
+			] }
+		/>
+	);
+};
+
+/// ...
+
+<MyPanelColorSettings />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### colorSettings
+
+A user-provided set of color settings.
+
+- Type: `Array`
+- Required: No
+
+Colors settings are provided as an array of objects with the following schema:
+
+| Property | Description                       | Type     |
+| -------- | --------------------------------- | -------- |
+| value    | The current color of the setting  | string   |
+| onChange | Callback on change of the setting | Function |
+| label    | Label of the setting              | string   |
+
+Additionally, the following `PanelColorGradientSettings` props are supported and directly passed down to the underlying `PanelColorGradientSettings` instance:
+
+- `className` - added to the underlying `ToolsPanel` instance.
+- `colors` - array of colors to be used.
+- `gradients` - not recommended to be used since `PanelColorSettings` resets it.
+- `disableCustomColors` - whether addition of custom colors is enabled
+- `disableCustomGradients` - not recommended to be used since `PanelColorSettings` sets it.
+- `children` - displayed below the underlying `PanelColorGradientSettings` instance.
+- `settings` - not recommended to be used, since `PanelColorSettings` builds it from the `colorSettings` prop.
+- `title` - title of the underlying `ToolsPanel`.
+- `showTitle` - whether to show the title of the `ToolsPanel`.
+- `__experimentalIsRenderedInSidebar`
+- `enableAlpha` - whether to enable setting opacity when specifying a color.
+
+Please refer to the `PanelColorGradientSettings` component for more information.

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

@@ -28,9 +28,16 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 					...settings,
 					__internalIsInitialized: true,
 				},
-				stripExperimentalSettings
+				{
+					stripExperimentalSettings,
+					reset: true,
+				}
 			);
-		}, [ settings ] );
+		}, [
+			settings,
+			stripExperimentalSettings,
+			__experimentalUpdateSettings,
+		] );
 
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );

package/src/components/provider/test/use-block-sync.js

@@ -48,7 +48,7 @@ describe( 'useBlockSync hook', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'resets the block-editor blocks when the controll value changes', async () => {
+	it( 'resets the block-editor blocks when the controlled value changes', async () => {
 		const fakeBlocks = [];
 		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
 		const replaceInnerBlocks = jest.spyOn(
@@ -58,7 +58,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				value={ fakeBlocks }
 				onChange={ onChange }
@@ -88,9 +88,16 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( testBlocks );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
+		expect( resetBlocks ).toHaveBeenCalledWith( [] );
 	} );
 
-	it( 'replaces the inner blocks of a block when the control value changes if a clientId is passed', async () => {
+	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
 		const fakeBlocks = [];
 		const replaceInnerBlocks = jest.spyOn(
 			blockEditorActions,
@@ -100,7 +107,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				clientId="test"
 				value={ fakeBlocks }
@@ -138,8 +145,16 @@ describe( 'useBlockSync hook', () => {
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( resetBlocks ).not.toHaveBeenCalled();
-		// We can't check the args because the blocks are cloned.
-		expect( replaceInnerBlocks ).toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [
+			expect.objectContaining( { name: 'test/test-block' } ),
+		] );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( resetBlocks ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {

package/src/components/provider/use-block-sync.js

@@ -134,6 +134,19 @@ export default function useBlockSync( {
 		}
 	};
 
+	// Clean up the changes made by setControlledBlocks() when the component
+	// containing useBlockSync() unmounts.
+	const unsetControlledBlocks = () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		if ( clientId ) {
+			setHasControlledInnerBlocks( clientId, false );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [] );
+		} else {
+			resetBlocks( [] );
+		}
+	};
+
 	// Add a subscription to the block-editor registry to detect when changes
 	// have been made. This lets us inform the data source of changes. This
 	// is an effect so that the subscriber can run synchronously without
@@ -287,4 +300,10 @@ export default function useBlockSync( {
 			unsubscribe();
 		};
 	}, [ registry, clientId ] );
+
+	useEffect( () => {
+		return () => {
+			unsetControlledBlocks();
+		};
+	}, [] );
 }