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

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

@@ -19,7 +19,7 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -30,6 +30,7 @@ import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
+import { reset as resetIcon } from '@wordpress/icons';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -208,6 +209,7 @@ function ColorPanelDropdown( {
 } ) {
 	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
 	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+	const colorGradientDropdownButtonRef = useRef( undefined );
 	return (
 		<ToolsPanelItem
 			className="block-editor-tools-panel-color-gradient-settings__item"
@@ -228,15 +230,32 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						ref: colorGradientDropdownButtonRef,
 					};
 
 					return (
-						<Button __next40pxDefaultSize { ...toggleProps }>
-							<LabeledColorIndicators
-								indicators={ indicators }
-								label={ label }
-							/>
-						</Button>
+						<>
+							<Button { ...toggleProps } __next40pxDefaultSize>
+								<LabeledColorIndicators
+									indicators={ indicators }
+									label={ label }
+								/>
+							</Button>
+							{ hasValue() && (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-panel-color-gradient-settings__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										resetValue();
+										// Return focus to parent button
+										colorGradientDropdownButtonRef.current?.focus();
+									} }
+								/>
+							) }
+						</>
 					);
 				} }
 				renderContent={ () => (

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/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/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/store/selectors.js

@@ -1586,14 +1586,14 @@ export function getTemplateLock( state, rootClientId ) {
  * @param {string|Object} blockNameOrType The block type object, e.g., the response
  *                                        from the block directory; or a string name of
  *                                        an installed block type, e.g.' core/paragraph'.
- * @param {Set}           checkedBlocks   Set of block names that have already been checked.
+ * @param {?string}       rootClientId    Optional root client ID of block list.
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
 const isBlockVisibleInTheInserter = (
 	state,
 	blockNameOrType,
-	checkedBlocks = new Set()
+	rootClientId = null
 ) => {
 	let blockType;
 	let blockName;
@@ -1621,26 +1621,19 @@ const isBlockVisibleInTheInserter = (
 		return false;
 	}
 
-	if ( checkedBlocks.has( blockName ) ) {
-		return false;
-	}
-
-	checkedBlocks.add( blockName );
-
 	// If parent blocks are not visible, child blocks should be hidden too.
-	if ( Array.isArray( blockType.parent ) ) {
-		return blockType.parent.some(
-			( name ) =>
-				( blockName !== name &&
-					isBlockVisibleInTheInserter(
-						state,
-						name,
-						checkedBlocks
-					) ) ||
-				// Exception for blocks with post-content parent,
-				// the root level is often consider as "core/post-content".
-				// This exception should only apply to the post editor ideally though.
-				name === 'core/post-content'
+	const parents = (
+		Array.isArray( blockType.parent ) ? blockType.parent : []
+	).concat( Array.isArray( blockType.ancestor ) ? blockType.ancestor : [] );
+	if ( parents.length > 0 ) {
+		const rootBlockName = getBlockName( state, rootClientId );
+		// This is an exception to the rule that says that all blocks are visible in the inserter.
+		// Blocks that require a given parent or ancestor are only visible if we're within that parent.
+		return (
+			parents.includes( 'core/post-content' ) ||
+			parents.includes( rootBlockName ) ||
+			getBlockParentsByBlockName( state, rootClientId, parents ).length >
+				0
 		);
 	}
 
@@ -1665,7 +1658,7 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
-	if ( ! isBlockVisibleInTheInserter( state, blockName ) ) {
+	if ( ! isBlockVisibleInTheInserter( state, blockName, rootClientId ) ) {
 		return false;
 	}
 
@@ -2072,6 +2065,7 @@ const buildBlockTypeItem =
 			category: blockType.category,
 			keywords: blockType.keywords,
 			parent: blockType.parent,
+			ancestor: blockType.ancestor,
 			variations: inserterVariations,
 			example: blockType.example,
 			utility: 1, // Deprecated.
@@ -2169,7 +2163,11 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 			} else {
 				blockTypeInserterItems = blockTypeInserterItems
 					.filter( ( blockType ) =>
-						isBlockVisibleInTheInserter( state, blockType )
+						isBlockVisibleInTheInserter(
+							state,
+							blockType,
+							rootClientId
+						)
 					)
 					.map( ( blockType ) => ( {
 						...blockType,
@@ -2501,7 +2499,11 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
 										name,
 										rootClientId
 								  )
-								: isBlockVisibleInTheInserter( state, name )
+								: isBlockVisibleInTheInserter(
+										state,
+										name,
+										rootClientId
+								  )
 						)
 				);
 

package/src/store/test/selectors.js

@@ -3324,7 +3324,7 @@ describe( 'selectors', () => {
 				settings: {},
 				blockEditingModes: new Map(),
 			};
-			expect( canInsertBlocks( state, [ '2', '3' ], '1' ) ).toBe( true );
+			expect( canInsertBlocks( state, [ '2' ], '1' ) ).toBe( true );
 		} );
 
 		it( 'should deny blocks', () => {