@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.9.0

package/src/components/global-styles/filters-panel.js

@@ -10,10 +10,10 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	Button,
 	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
@@ -189,15 +189,12 @@ export default function FiltersPanel( {
 
 							return (
 								<ItemGroup isBordered isSeparated>
-									<Button
-										__next40pxDefaultSize
-										{ ...toggleProps }
-									>
+									<Item as="button" { ...toggleProps }>
 										<LabeledColorIndicator
 											indicator={ duotone }
 											label={ __( 'Duotone' ) }
 										/>
-									</Button>
+									</Item>
 								</ItemGroup>
 							);
 						} }

package/src/components/global-styles/use-global-styles-output.js

@@ -624,7 +624,7 @@ function pickStyleKeys( treeToPickFrom ) {
 	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
 	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
 		key,
-		JSON.parse( JSON.stringify( style ) ),
+		structuredClone( style ),
 	] );
 	return Object.fromEntries( clonedEntries );
 }

package/src/components/index.js

@@ -67,10 +67,13 @@ export {
 	JustifyToolbar,
 	JustifyContentControl,
 } from './justify-content-control';
-export { default as __experimentalLinkControl } from './link-control';
-export { default as __experimentalLinkControlSearchInput } from './link-control/search-input';
-export { default as __experimentalLinkControlSearchResults } from './link-control/search-results';
-export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
+export {
+	default as LinkControl,
+	DeprecatedExperimentalLinkControl as __experimentalLinkControl,
+} from './link-control';
+export { __experimentalLinkControlSearchInput } from './link-control/search-input';
+export { __experimentalLinkControlSearchResults } from './link-control/search-results';
+export { __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
 export { default as MediaReplaceFlow } from './media-replace-flow';

package/src/components/inserter/block-types-tab.js

@@ -186,7 +186,7 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		if ( rootClientId && item.isAllowedInCurrentRoot ) {
+		if ( item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {
 			itemsRemaining.push( item );

package/src/components/inserter/menu.js

@@ -82,6 +82,8 @@ function InserterMenu(
 		if ( isZoomOutMode ) {
 			return 'patterns';
 		}
+
+		return 'blocks';
 	}
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 

package/src/components/inspector-controls/slot.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseSlotFills as useSlotFills,
-	__unstableMotionContext as MotionContext,
-} from '@wordpress/components';
-import { useContext, useMemo } from '@wordpress/element';
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -37,19 +33,6 @@ export default function InspectorControlsSlot( {
 	const slotFill = groups[ group ];
 	const fills = useSlotFills( slotFill?.name );
 
-	const motionContextValue = useContext( MotionContext );
-
-	const computedFillProps = useMemo(
-		() => ( {
-			...fillProps,
-			forwardedContext: [
-				...( fillProps?.forwardedContext ?? [] ),
-				[ MotionContext.Provider, { value: motionContextValue } ],
-			],
-		} ),
-		[ motionContextValue, fillProps ]
-	);
-
 	if ( ! slotFill ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
@@ -66,14 +49,12 @@ export default function InspectorControlsSlot( {
 			<BlockSupportToolsPanel group={ group } label={ label }>
 				<BlockSupportSlotContainer
 					{ ...props }
-					fillProps={ computedFillProps }
+					fillProps={ fillProps }
 					Slot={ Slot }
 				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return (
-		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
-	);
+	return <Slot { ...props } fillProps={ fillProps } bubblesVirtually />;
 }

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

@@ -34,6 +34,7 @@ import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Default properties associated with a link control value.
@@ -500,4 +501,13 @@ function LinkControl( {
 LinkControl.ViewerFill = ViewerFill;
 LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
+export const DeprecatedExperimentalLinkControl = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControl', {
+		since: '6.8',
+		alternative: 'wp.blockEditor.LinkControl',
+	} );
+
+	return <LinkControl { ...props } />;
+};
+
 export default LinkControl;

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

@@ -11,6 +11,7 @@ import { URLInput } from '../';
 import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
+import deprecated from '@wordpress/deprecated';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings
@@ -156,3 +157,11 @@ const LinkControlSearchInput = forwardRef(
 );
 
 export default LinkControlSearchInput;
+
+export const __experimentalLinkControlSearchInput = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchInput', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchInput { ...props } />;
+};

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

@@ -17,6 +17,7 @@ import {
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
 import { pipe } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 const ICONS_MAP = {
 	post: postList,
@@ -160,3 +161,11 @@ function getVisualTypeName( suggestion ) {
 }
 
 export default LinkControlSearchItem;
+
+export const __experimentalLinkControlSearchItem = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchItem', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchItem { ...props } />;
+};

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

@@ -15,8 +15,9 @@ import clsx from 'clsx';
 import LinkControlSearchCreate from './search-create-button';
 import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
+import deprecated from '@wordpress/deprecated';
 
-export default function LinkControlSearchResults( {
+function LinkControlSearchResults( {
 	withCreateSuggestion,
 	currentInputValue,
 	handleSuggestionClick,
@@ -121,3 +122,13 @@ export default function LinkControlSearchResults( {
 		</div>
 	);
 }
+
+export default LinkControlSearchResults;
+
+export const __experimentalLinkControlSearchResults = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalLinkControlSearchResults', {
+		since: '6.8',
+	} );
+
+	return <LinkControlSearchResults { ...props } />;
+};

package/src/components/multi-selection-inspector/index.js

@@ -3,9 +3,8 @@
  */
 import { sprintf, _n } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-import { count as wordCount } from '@wordpress/wordcount';
 import { copy } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,33 +13,24 @@ import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 export default function MultiSelectionInspector() {
-	const { blocks } = useSelect( ( select ) => {
-		const { getMultiSelectedBlocks } = select( blockEditorStore );
-		return {
-			blocks: getMultiSelectedBlocks(),
-		};
-	}, [] );
-	const words = wordCount( serialize( blocks ), 'words' );
-
+	const selectedBlockCount = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
+		[]
+	);
 	return (
-		<div className="block-editor-multi-selection-inspector__card">
+		<HStack
+			justify="flex-start"
+			spacing={ 2 }
+			className="block-editor-multi-selection-inspector__card"
+		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-content">
-				<div className="block-editor-multi-selection-inspector__card-title">
-					{ sprintf(
-						/* translators: %d: number of blocks */
-						_n( '%d Block', '%d Blocks', blocks.length ),
-						blocks.length
-					) }
-				</div>
-				<div className="block-editor-multi-selection-inspector__card-description">
-					{ sprintf(
-						/* translators: %d: number of words */
-						_n( '%d word selected.', '%d words selected.', words ),
-						words
-					) }
-				</div>
+			<div className="block-editor-multi-selection-inspector__card-title">
+				{ sprintf(
+					/* translators: %d: number of blocks */
+					_n( '%d Block', '%d Blocks', selectedBlockCount ),
+					selectedBlockCount
+				) }
 			</div>
-		</div>
+		</HStack>
 	);
 }

package/src/components/multi-selection-inspector/style.scss

@@ -1,25 +1,13 @@
 .block-editor-multi-selection-inspector__card {
-	display: flex;
-	align-items: flex-start;
 	padding: $grid-unit-20;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-	flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-	font-size: $default-font-size;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
-	margin-right: 10px;
 	padding: 0 3px;
 	width: $button-size;
 	height: $button-size-small;

package/src/components/resolution-tool/stories/index.story.js

@@ -16,7 +16,7 @@ export default {
 	title: 'BlockEditor (Private APIs)/ResolutionControl',
 	component: ResolutionTool,
 	argTypes: {
-		panelId: { control: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

package/src/components/spacing-sizes-control/style.scss

@@ -4,40 +4,11 @@
 		margin-bottom: 0;
 	}
 
-	.is-marked {
-		.components-range-control__track {
-			transition: width ease 0.1s;
-			@include reduce-motion("transition");
-		}
-
-		.components-range-control__thumb-wrapper {
-			transition: left ease 0.1s;
-			@include reduce-motion("transition");
-		}
-	}
-
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
 		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
-
-	.components-range-control__mark {
-		transform: translateX(-50%);
-		height: $grid-unit-05;
-		width: math.div($grid-unit-05, 2);
-		background-color: $white;
-		z-index: 1;
-		top: -#{$grid-unit-05};
-	}
-
-	.components-range-control__marks {
-		margin-top: 17px;
-	}
-
-	.components-range-control__thumb-wrapper {
-		z-index: 3;
-	}
 }
 
 .spacing-sizes-control__header {

package/src/components/text-alignment-control/stories/index.story.js

@@ -18,7 +18,7 @@ export default {
 			control: 'check',
 			options: [ 'left', 'center', 'right', 'justify' ],
 		},
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 };
 

package/src/components/warning/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -20,10 +19,10 @@ function Warning( { className, actions, children, secondaryActions } ) {
 						{ children }
 					</p>
 
-					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+					{ ( actions?.length > 0 || secondaryActions ) && (
 						<div className="block-editor-warning__actions">
-							{ Children.count( actions ) > 0 &&
-								Children.map( actions, ( action, i ) => (
+							{ actions?.length > 0 &&
+								actions.map( ( action, i ) => (
 									<span
 										key={ i }
 										className="block-editor-warning__action"

package/src/components/warning/test/index.js

@@ -18,7 +18,9 @@ describe( 'Warning', () => {
 
 	it( 'should show primary actions', () => {
 		render(
-			<Warning actions={ <button>Click me</button> }>Message</Warning>
+			<Warning actions={ [ <button key="test">Click me</button> ] }>
+				Message
+			</Warning>
 		);
 
 		expect(

package/src/components/writing-mode-control/stories/index.story.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import WritingModeControl from '../';
+
+const meta = {
+	title: 'BlockEditor/WritingModeControl',
+	component: WritingModeControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to facilitate writing mode selections.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: null },
+			description: 'Currently selected writing mode.',
+		},
+		className: {
+			control: 'text',
+			description: 'Class name to add to the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in the writing mode selection.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+
+		return (
+			<WritingModeControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/hooks/style.js

@@ -245,7 +245,7 @@ export function omitStyle( style, paths, preserveReference = false ) {
 
 	let newStyle = style;
 	if ( ! preserveReference ) {
-		newStyle = JSON.parse( JSON.stringify( style ) );
+		newStyle = structuredClone( style );
 	}
 
 	if ( ! Array.isArray( paths ) ) {

package/src/hooks/test/font-size.js

@@ -19,6 +19,15 @@ import {
 import _fontSize from '../font-size';
 
 const noop = () => {};
+const EMPTY_ARRAY = [];
+const EMPTY_OBJECT = {};
+const fontSizes = [
+	{
+		name: 'A larger font',
+		size: '32px',
+		slug: 'larger',
+	},
+];
 
 function addUseSettingFilter( callback ) {
 	addFilter(
@@ -55,13 +64,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [
-					{
-						name: 'A larger font',
-						size: '32px',
-						slug: 'larger',
-					},
-				];
+				return fontSizes;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -69,7 +72,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;
@@ -95,7 +98,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [];
+				return EMPTY_ARRAY;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -103,7 +106,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;
@@ -132,7 +135,7 @@ describe( 'useBlockProps', () => {
 		registerBlockType( blockSettings.name, blockSettings );
 		addUseSettingFilter( ( result, path ) => {
 			if ( 'typography.fontSizes' === path ) {
-				return [];
+				return EMPTY_ARRAY;
 			}
 
 			if ( 'typography.fluid' === path ) {
@@ -140,7 +143,7 @@ describe( 'useBlockProps', () => {
 			}
 
 			if ( 'layout' === path ) {
-				return {};
+				return EMPTY_OBJECT;
 			}
 
 			return result;

package/src/hooks/use-zoom-out.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,32 +12,64 @@ import { unlock } from '../lock-unlock';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * Concepts:
+ * - If we most recently changed the zoom level for them (in or out), we always resetZoomLevel() level when unmounting.
+ * - If the user most recently changed the zoom level (manually toggling), we do nothing when unmounting.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
-export function useZoomOut( zoomOut = true ) {
+export function useZoomOut( enabled = true ) {
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
+	/**
+	 * We need access to both the value and the function. The value is to trigger a useEffect hook
+	 * and the function is to check zoom out within another hook without triggering a re-render.
+	 */
+	const { isZoomedOut, isZoomOut } = useSelect( ( select ) => {
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
+		return {
+			isZoomedOut: _isZoomOut(),
+			isZoomOut: _isZoomOut,
+		};
+	}, [] );
+
+	const controlZoomLevelRef = useRef( false );
+	const isEnabledRef = useRef( enabled );
+
+	/**
+	 * This hook tracks if the zoom state was changed manually by the user via clicking
+	 * the zoom out button. We only want this to run when isZoomedOut changes, so we use
+	 * a ref to track the enabled state.
+	 */
 	useEffect( () => {
-		const isZoomOutOnMount = isZoomOut();
+		// If the zoom state changed (isZoomOut) and it does not match the requested zoom
+		// state (zoomOut), then it means the user manually changed the zoom state while
+		// this hook was mounted, and we should no longer control the zoom state.
+		if ( isZoomedOut !== isEnabledRef.current ) {
+			controlZoomLevelRef.current = false;
+		}
+	}, [ isZoomedOut ] );
 
-		return () => {
-			if ( isZoomOutOnMount ) {
+	useEffect( () => {
+		isEnabledRef.current = enabled;
+
+		if ( enabled !== isZoomOut() ) {
+			controlZoomLevelRef.current = true;
+
+			if ( enabled ) {
 				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
 			}
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( zoomOut ) {
-			setZoomLevel( 'auto-scaled' );
-		} else {
-			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+
+		return () => {
+			// If we are controlling zoom level and are zoomed out, reset the zoom level.
+			if ( controlZoomLevelRef.current && isZoomOut() ) {
+				resetZoomLevel();
+			}
+		};
+	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
 }