@wordpress/block-editor 14.9.0 → 14.10.0

package/src/components/date-format-picker/stories/index.story.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateFormatPicker from '../';
+
+export default {
+	title: 'BlockEditor/DateFormatPicker',
+	component: DateFormatPicker,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'The `DateFormatPicker` component enables users to configure their preferred *date format*. This determines how dates are displayed.',
+			},
+		},
+	},
+	argTypes: {
+		defaultFormat: {
+			control: 'text',
+			description:
+				'The date format that will be used if the user selects "Default".',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		format: {
+			control: { type: null },
+			description:
+				'The selected date format. If `null`, _Default_ is selected.',
+			table: {
+				type: { summary: 'string | null' },
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description:
+				'Called when a selection is made. If `null`, _Default_ is selected.',
+			table: {
+				type: { summary: 'function' },
+			},
+		},
+	},
+};
+
+export const Default = {
+	args: {
+		defaultFormat: 'M j, Y',
+	},
+	render: function Template( { onChange, ...args } ) {
+		const [ format, setFormat ] = useState();
+		return (
+			<DateFormatPicker
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setFormat( ...changeArgs );
+				} }
+				format={ format }
+			/>
+		);
+	},
+};

package/src/components/date-format-picker/style.scss

@@ -1,5 +1,7 @@
 .block-editor-date-format-picker {
-	margin-bottom: $grid-unit-20;
+	margin: 0 0 $grid-unit-20;
+	padding: 0;
+	border: none;
 }
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {

package/src/components/default-block-appender/content.scss

@@ -42,6 +42,7 @@
 		color: $white;
 		padding: 0;
 
+		// TODO: Consider passing size="small" to the Inserter toggle instead.
 		// Special dimensions for this button.
 		min-width: $button-size-small;
 		height: $button-size-small;

package/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js

@@ -13,8 +13,9 @@ import {
 import AspectRatioTool from '../aspect-ratio-tool';
 
 export default {
-	title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool',
+	title: 'BlockEditor/DimensionsTool/AspectRatioTool',
 	component: AspectRatioTool,
+	tags: [ 'status-private' ],
 	argTypes: {
 		panelId: { control: false },
 		onChange: { action: 'changed' },

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

@@ -13,8 +13,9 @@ import {
 import DimensionsTool from '..';
 
 export default {
-	title: 'BlockEditor (Private APIs)/DimensionsTool',
+	title: 'BlockEditor/DimensionsTool/DimensionsTool',
 	component: DimensionsTool,
+	tags: [ 'status-private' ],
 	argTypes: {
 		panelId: { control: false },
 		onChange: { action: 'changed' },

package/src/components/dimensions-tool/stories/scale-tool.story.js

@@ -13,8 +13,9 @@ import {
 import ScaleTool from '../scale-tool';
 
 export default {
-	title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool',
+	title: 'BlockEditor/DimensionsTool/ScaleTool',
 	component: ScaleTool,
+	tags: [ 'status-private' ],
 	argTypes: {
 		panelId: { control: false },
 		onChange: { action: 'changed' },

package/src/components/dimensions-tool/stories/width-height-tool.story.js

@@ -13,8 +13,9 @@ import {
 import WidthHeightTool from '../width-height-tool';
 
 export default {
-	title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool',
+	title: 'BlockEditor/DimensionsTool/WidthHeightTool',
 	component: WidthHeightTool,
+	tags: [ 'status-private' ],
 	argTypes: {
 		panelId: { control: false },
 		onChange: { action: 'changed' },

package/src/components/font-appearance-control/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -147,6 +148,20 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl

package/src/components/font-family/README.md

@@ -29,6 +29,7 @@ const MyFontFamilyControl = () => {
 				setFontFamily( newFontFamily );
 			} }
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		/>
 	);
 };

package/src/components/font-family/index.js

@@ -58,12 +58,28 @@ export default function FontFamilyControl( {
 		);
 	}
 
+	if (
+		! __next40pxDefaultSize &&
+		( props.size === undefined || props.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
+	const selectedValue =
+		options.find( ( option ) => option.key === value ) ?? '';
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
-			value={ value }
+			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
 			options={ options }
 			className={ clsx( 'block-editor-font-family-control', className, {

package/src/components/font-family/stories/index.story.js

@@ -50,5 +50,6 @@ export const Default = {
 			},
 		],
 		__nextHasNoMarginBottom: true,
+		__next40pxDefaultSize: true,
 	},
 };

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

@@ -250,6 +250,9 @@ function ColorPanelDropdown( {
 									icon={ resetIcon }
 									onClick={ () => {
 										resetValue();
+										if ( isOpen ) {
+											onToggle();
+										}
 										// Return focus to parent button
 										colorGradientDropdownButtonRef.current?.focus();
 									} }

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

@@ -855,7 +855,7 @@ describe( 'global styles renderer', () => {
 
 		it( 'should return block selectors data with old experimental selectors', () => {
 			const imageSupports = {
-				border: {
+				__experimentalBorder: {
 					radius: true,
 					__experimentalSelector: 'img, .crop-area',
 				},

package/src/components/global-styles/typography-utils.js

@@ -45,7 +45,7 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
  * @param {Preset}                     preset
  * @param {Object}                     settings
  * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.
- * @param {Object?}                    settings.typography.layout Layout options.
+ * @param {?Object}                    settings.typography.layout Layout options.
  *
  * @return {string|*} A font-size value or the value of preset.size.
  */

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

@@ -47,7 +47,7 @@ const ELEMENT_CLASS_NAMES = {
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
-	border: 'border',
+	__experimentalBorder: 'border',
 	color: 'color',
 	spacing: 'spacing',
 	typography: 'typography',
@@ -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,
-		structuredClone( style ),
+		JSON.parse( JSON.stringify( style ) ),
 	] );
 	return Object.fromEntries( clonedEntries );
 }

package/src/components/grid/grid-visualizer.js

@@ -62,6 +62,17 @@ const GridVisualizerGrid = forwardRef(
 				observer.observe( element );
 				observers.push( observer );
 			}
+
+			const mutationObserver = new window.MutationObserver( () => {
+				setGridInfo( getGridInfo( gridElement ) );
+			} );
+			mutationObserver.observe( gridElement, {
+				attributeFilter: [ 'style', 'class' ],
+				childList: true,
+				subtree: true,
+			} );
+			observers.push( mutationObserver );
+
 			return () => {
 				for ( const observer of observers ) {
 					observer.disconnect();

package/src/components/grid/utils.js

@@ -160,6 +160,21 @@ export function getGridInfo( gridElement ) {
 		gridElement,
 		'grid-template-rows'
 	);
+	const borderTopWidth = getComputedCSS( gridElement, 'border-top-width' );
+	const borderRightWidth = getComputedCSS(
+		gridElement,
+		'border-right-width'
+	);
+	const borderBottomWidth = getComputedCSS(
+		gridElement,
+		'border-bottom-width'
+	);
+	const borderLeftWidth = getComputedCSS( gridElement, 'border-left-width' );
+	const paddingTop = getComputedCSS( gridElement, 'padding-top' );
+	const paddingRight = getComputedCSS( gridElement, 'padding-right' );
+	const paddingBottom = getComputedCSS( gridElement, 'padding-bottom' );
+	const paddingLeft = getComputedCSS( gridElement, 'padding-left' );
+
 	const numColumns = gridTemplateColumns.split( ' ' ).length;
 	const numRows = gridTemplateRows.split( ' ' ).length;
 	const numItems = numColumns * numRows;
@@ -172,7 +187,10 @@ export function getGridInfo( gridElement ) {
 			gridTemplateColumns,
 			gridTemplateRows,
 			gap: getComputedCSS( gridElement, 'gap' ),
-			padding: getComputedCSS( gridElement, 'padding' ),
+			paddingTop: `calc(${ paddingTop } + ${ borderTopWidth })`,
+			paddingRight: `calc(${ paddingRight } + ${ borderRightWidth })`,
+			paddingBottom: `calc(${ paddingBottom } + ${ borderBottomWidth })`,
+			paddingLeft: `calc(${ paddingLeft } + ${ borderLeftWidth })`,
 		},
 	};
 }

package/src/components/iframe/index.js

@@ -192,7 +192,7 @@ function Iframe( {
 					// Appending a hash to the current URL will not reload the
 					// page. This is useful for e.g. footnotes.
 					const href = event.target.getAttribute( 'href' );
-					if ( href.startsWith( '#' ) ) {
+					if ( href?.startsWith( '#' ) ) {
 						iFrameDocument.defaultView.location.hash =
 							href.slice( 1 );
 					}

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -7,7 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useRef, useLayoutEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate } from '@wordpress/blocks';
 
 /**
@@ -42,14 +42,7 @@ export default function useInnerBlockTemplateSync(
 ) {
 	// Instead of adding a useSelect mapping here, please add to the useSelect
 	// mapping in InnerBlocks! Every subscription impacts performance.
-
-	const {
-		getBlocks,
-		getSelectedBlocksInitialCaretPosition,
-		isBlockSelected,
-	} = useSelect( blockEditorStore );
-	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplateRef = useRef( null );
@@ -57,6 +50,14 @@ export default function useInnerBlockTemplateSync(
 	useLayoutEffect( () => {
 		let isCancelled = false;
 
+		const {
+			getBlocks,
+			getSelectedBlocksInitialCaretPosition,
+			isBlockSelected,
+		} = registry.select( blockEditorStore );
+		const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+			registry.dispatch( blockEditorStore );
+
 		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
 		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
 		// we need to schedule this one in a microtask as well.
@@ -110,5 +111,11 @@ export default function useInnerBlockTemplateSync(
 		return () => {
 			isCancelled = true;
 		};
-	}, [ template, templateLock, clientId ] );
+	}, [
+		template,
+		templateLock,
+		clientId,
+		registry,
+		templateInsertUpdatesSelection,
+	] );
 }

package/src/components/inserter/block-patterns-explorer/index.js

@@ -14,9 +14,8 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ selectedCategory, setSelectedCategory ] = useState(
-		initialCategory?.name
-	);
+	const [ selectedCategory, setSelectedCategory ] =
+		useState( initialCategory );
 
 	const patternCategories = usePatternCategories( rootClientId );
 

package/src/components/inserter/block-patterns-tab/index.js

@@ -70,7 +70,9 @@ function BlockPatternsTab( {
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ selectedCategory || categories[ 0 ] }
+					initialCategory={
+						selectedCategory?.name || categories[ 0 ]?.name
+					}
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -69,19 +69,19 @@ export function PatternCategoryPreviews( {
 					return false;
 				}
 
-				if ( category.name === allPatternsCategory.name ) {
+				if ( category.name === allPatternsCategory?.name ) {
 					return true;
 				}
 
 				if (
-					category.name === myPatternsCategory.name &&
+					category.name === myPatternsCategory?.name &&
 					pattern.type === INSERTER_PATTERN_TYPES.user
 				) {
 					return true;
 				}
 
 				if (
-					category.name === starterPatternsCategory.name &&
+					category.name === starterPatternsCategory?.name &&
 					pattern.blockTypes?.includes( 'core/post-content' )
 				) {
 					return true;
@@ -149,7 +149,7 @@ export function PatternCategoryPreviews( {
 							level={ 4 }
 							as="div"
 						>
-							{ category.label }
+							{ category?.label }
 						</Heading>
 					</FlexBlock>
 					<PatternsFilter

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -25,7 +25,7 @@ import {
 const getShouldDisableSyncFilter = ( sourceFilter ) =>
 	sourceFilter !== 'all' && sourceFilter !== 'user';
 const getShouldHideSourcesFilter = ( category ) => {
-	return category.name === myPatternsCategory.name;
+	return category?.name === myPatternsCategory.name;
 };
 
 const PATTERN_SOURCE_MENU_OPTIONS = [
@@ -60,7 +60,7 @@ export function PatternsFilter( {
 	// the user may be confused when switching to another category if the haven't explicity set
 	// this filter themselves.
 	const currentPatternSourceFilter =
-		category.name === myPatternsCategory.name
+		category?.name === myPatternsCategory.name
 			? INSERTER_PATTERN_TYPES.user
 			: patternSourceFilter;
 

package/src/components/inserter/category-tabs/index.js

@@ -64,9 +64,10 @@ function CategoryTabs( {
 					<Tabs.Tab
 						key={ category.name }
 						tabId={ category.name }
-						aria-label={ category.label }
 						aria-current={
-							category === selectedCategory ? 'true' : undefined
+							category.name === selectedCategory?.name
+								? 'true'
+								: undefined
 						}
 					>
 						{ category.label }

package/src/components/inserter/index.js

@@ -29,7 +29,6 @@ const defaultRenderToggle = ( {
 	blockTitle,
 	hasSingleBlockType,
 	toggleProps = {},
-	prioritizePatterns,
 } ) => {
 	const {
 		as: Wrapper = Button,
@@ -45,8 +44,6 @@ const defaultRenderToggle = ( {
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( ! label && prioritizePatterns ) {
-		label = __( 'Add pattern' );
 	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
@@ -63,6 +60,7 @@ const defaultRenderToggle = ( {
 
 	return (
 		<Wrapper
+			__next40pxDefaultSize={ toggleProps.as ? undefined : true }
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
@@ -113,7 +111,6 @@ class Inserter extends Component {
 			toggleProps,
 			hasItems,
 			renderToggle = defaultRenderToggle,
-			prioritizePatterns,
 		} = this.props;
 
 		return renderToggle( {
@@ -124,7 +121,6 @@ class Inserter extends Component {
 			hasSingleBlockType,
 			directInsertBlock,
 			toggleProps,
-			prioritizePatterns,
 		} );
 	}
 
@@ -147,7 +143,6 @@ class Inserter extends Component {
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
-			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
 		} = this.props;
@@ -171,7 +166,6 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
 				/>
 			);
@@ -230,7 +224,6 @@ export default compose( [
 				hasInserterItems,
 				getAllowedBlocks,
 				getDirectInsertBlock,
-				getSettings,
 			} = select( blockEditorStore );
 
 			const { getBlockVariations } = select( blocksStore );
@@ -243,8 +236,6 @@ export default compose( [
 			const directInsertBlock =
 				shouldDirectInsert && getDirectInsertBlock( rootClientId );
 
-			const settings = getSettings();
-
 			const hasSingleBlockType =
 				allowedBlocks?.length === 1 &&
 				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
@@ -262,9 +253,6 @@ export default compose( [
 				allowedBlockType,
 				directInsertBlock,
 				rootClientId,
-				prioritizePatterns:
-					settings.__experimentalPreferPatternsOnRoot &&
-					! rootClientId,
 			};
 		}
 	),

package/src/components/inserter/quick-inserter.js

@@ -16,21 +16,17 @@ import { useSelect } from '@wordpress/data';
  */
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
-import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { store as blockEditorStore } from '../../store';
 
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
-const SHOWN_BLOCK_PATTERNS = 2;
-const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4;
 
 export default function QuickInserter( {
 	onSelect,
 	rootClientId,
 	clientId,
 	isAppender,
-	prioritizePatterns,
 	selectBlockOnInsert,
 	hasSearch = true,
 } ) {
@@ -47,12 +43,6 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		true
 	);
-	const [ patterns ] = usePatternsState(
-		onInsertBlocks,
-		destinationRootClientId,
-		undefined,
-		true
-	);
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
 		( select ) => {
@@ -70,12 +60,7 @@ export default function QuickInserter( {
 		[ clientId ]
 	);
 
-	const showPatterns =
-		patterns.length && ( !! filterValue || prioritizePatterns );
-	const showSearch =
-		hasSearch &&
-		( ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-			blockTypes.length > SEARCH_THRESHOLD );
+	const showSearch = hasSearch && blockTypes.length > SEARCH_THRESHOLD;
 
 	useEffect( () => {
 		if ( setInserterIsOpened ) {
@@ -94,13 +79,6 @@ export default function QuickInserter( {
 		} );
 	};
 
-	let maxBlockPatterns = 0;
-	if ( showPatterns ) {
-		maxBlockPatterns = prioritizePatterns
-			? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION
-			: SHOWN_BLOCK_PATTERNS;
-	}
-
 	return (
 		<div
 			className={ clsx( 'block-editor-inserter__quick-inserter', {
@@ -128,10 +106,9 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ maxBlockPatterns }
+					maxBlockPatterns={ 0 }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
-					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
 					isQuick
 				/>

package/src/components/keyboard-shortcuts/index.js

@@ -29,8 +29,8 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'access',
-				character: 'z',
+				modifier: 'shift',
+				character: 'backspace',
 			},
 		} );
 

package/src/components/line-height-control/README.md

@@ -18,6 +18,7 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
+		__next40pxDefaultSize
 	/>
 );
 ```

package/src/components/line-height-control/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -89,6 +90,17 @@ const LineHeightControl = ( {
 		onChange( `${ nextValue }` );
 	};
 
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated( `36px default size for wp.blockEditor.LineHeightControl`, {
+			since: '6.8',
+			version: '7.1',
+			hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+		} );
+	}
+
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl