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

package/src/components/button-block-appender/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,15 +16,11 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Inserter from '../inserter';
-import { useMergeRefs } from '@wordpress/compose';
 
 function ButtonBlockAppender(
 	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
-	const inserterButtonRef = useRef();
-
-	const mergedInserterButtonRef = useMergeRefs( [ inserterButtonRef, ref ] );
 	return (
 		<Inserter
 			position="bottom center"
@@ -34,7 +30,6 @@ function ButtonBlockAppender(
 				if ( onSelect && typeof onSelect === 'function' ) {
 					onSelect( ...args );
 				}
-				inserterButtonRef.current?.focus();
 			} }
 			renderToggle={ ( {
 				onToggle,
@@ -61,7 +56,7 @@ function ButtonBlockAppender(
 				return (
 					<Button
 						__next40pxDefaultSize
-						ref={ mergedInserterButtonRef }
+						ref={ ref }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
 						className={ clsx(

package/src/components/child-layout-control/index.js

@@ -9,6 +9,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUseCustomUnits as useCustomUnits,
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
@@ -21,6 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';
 import { store as blockEditorStore } from '../../store';
+import { useSettings } from '../use-settings';
 
 function helpText( selfStretch, parentLayout ) {
 	const { orientation = 'horizontal' } = parentLayout;
@@ -98,6 +100,17 @@ function FlexControls( {
 	const hasFlexValue = () => !! selfStretch;
 	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
 	const resetFlex = () => {
 		onChange( {
 			selfStretch: undefined,
@@ -167,6 +180,7 @@ function FlexControls( {
 			{ selfStretch === 'fixed' && (
 				<UnitControl
 					size="__unstable-large"
+					units={ units }
 					onChange={ ( value ) => {
 						onChange( {
 							selfStretch,

package/src/components/colors-gradients/dropdown.js

@@ -15,6 +15,13 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -76,7 +83,15 @@ const LabeledColorIndicator = ( { colorValue, label } ) => (
 const renderToggle =
 	( settings ) =>
 	( { onToggle, isOpen } ) => {
-		const { colorValue, label } = settings;
+		const {
+			clearable,
+			colorValue,
+			gradientValue,
+			onColorChange,
+			onGradientChange,
+			label,
+		} = settings;
+		const colorButtonRef = useRef( undefined );
 
 		const toggleProps = {
 			onClick: onToggle,
@@ -85,15 +100,45 @@ const renderToggle =
 				{ 'is-open': isOpen }
 			),
 			'aria-expanded': isOpen,
+			ref: colorButtonRef,
+		};
+
+		const clearValue = () => {
+			if ( colorValue ) {
+				onColorChange();
+			} else if ( gradientValue ) {
+				onGradientChange();
+			}
 		};
 
+		const value = colorValue ?? gradientValue;
+
 		return (
-			<Button __next40pxDefaultSize { ...toggleProps }>
-				<LabeledColorIndicator
-					colorValue={ colorValue }
-					label={ label }
-				/>
-			</Button>
+			<>
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<LabeledColorIndicator
+						colorValue={ value }
+						label={ label }
+					/>
+				</Button>
+				{ clearable && value && (
+					<Button
+						__next40pxDefaultSize
+						label={ __( 'Reset' ) }
+						className="block-editor-panel-color-gradient-settings__reset"
+						size="small"
+						icon={ resetIcon }
+						onClick={ () => {
+							clearValue();
+							if ( isOpen ) {
+								onToggle();
+							}
+							// Return focus to parent button
+							colorButtonRef.current?.focus();
+						} }
+					/>
+				) }
+			</>
 		);
 	};
 
@@ -143,8 +188,12 @@ export default function ColorGradientSettingsDropdown( {
 					...setting,
 				};
 				const toggleSettings = {
-					colorValue: setting.gradientValue ?? setting.colorValue,
+					clearable: setting.clearable,
 					label: setting.label,
+					colorValue: setting.colorValue,
+					gradientValue: setting.gradientValue,
+					onColorChange: setting.onColorChange,
+					onGradientChange: setting.onGradientChange,
 				};
 
 				return (

package/src/components/colors-gradients/style.scss

@@ -64,6 +64,7 @@ $swatch-gap: 12px;
 .block-editor-tools-panel-color-gradient-settings__item {
 	padding: 0;
 	max-width: 100%;
+	position: relative;
 
 	// Border styles.
 	border-left: 1px solid $gray-300;
@@ -120,3 +121,28 @@ $swatch-gap: 12px;
 		flex-shrink: 0;
 	}
 }
+
+.block-editor-panel-color-gradient-settings__reset {
+	position: absolute;
+	right: 0;
+	top: $grid-unit;
+	margin: auto $grid-unit auto;
+	opacity: 0;
+	transition: opacity 0.1s ease-in-out;
+	@include reduce-motion("transition");
+
+	&.block-editor-panel-color-gradient-settings__reset {
+		border-radius: $radius-small;
+	}
+
+	.block-editor-panel-color-gradient-settings__dropdown:hover + &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
+	}
+}

package/src/components/contrast-checker/index.native.js

@@ -13,7 +13,7 @@ import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, warning } from '@wordpress/icons';
+import { Icon, cautionFilled } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -52,7 +52,7 @@ function ContrastCheckerMessage( {
 
 	return (
 		<View style={ styles[ 'block-editor-contrast-checker' ] }>
-			<Icon style={ iconStyle } icon={ warning } />
+			<Icon style={ iconStyle } icon={ cautionFilled } />
 			<Text style={ msgStyle }>{ msg }</Text>
 		</View>
 	);

package/src/components/contrast-checker/stories/index.story.js

@@ -0,0 +1,117 @@
+/**
+ * Internal dependencies
+ */
+import ContrastChecker from '../';
+
+const meta = {
+	title: 'BlockEditor/ContrastChecker',
+	component: ContrastChecker,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Determines if contrast for text styles is sufficient (WCAG 2.0 AA) when used with a given background color.',
+			},
+		},
+	},
+	argTypes: {
+		backgroundColor: {
+			control: 'color',
+			description:
+				'The background color to check the contrast of text against.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		fallbackBackgroundColor: {
+			control: 'color',
+			description:
+				'A fallback background color value, in case `backgroundColor` is not available.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		textColor: {
+			control: 'color',
+			description:
+				'The text color to check the contrast of the background against.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		fallbackTextColor: {
+			control: 'color',
+			description:
+				'A fallback text color value, in case `textColor` is not available.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		fontSize: {
+			control: 'number',
+			description:
+				'The font-size (as a `px` value) of the text to check the contrast against.',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		isLargeText: {
+			control: 'boolean',
+			description:
+				'Whether the text is large (approximately `24px` or higher).',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		linkColor: {
+			control: 'color',
+			description: 'The link color to check the contrast against.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		fallbackLinkColor: {
+			control: 'color',
+			description: 'Fallback link color if linkColor is not available.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		enableAlphaChecker: {
+			control: 'boolean',
+			description: 'Whether to enable checking for transparent colors.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: { summary: false },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		backgroundColor: '#ffffff',
+		textColor: '#ffffff',
+	},
+};

package/src/components/date-format-picker/README.md

@@ -1,17 +1,12 @@
 # DateFormatPicker
 
-The `DateFormatPicker` component renders controls that let the user choose a
-_date format_. That is, how they want their dates to be formatted.
+The `DateFormatPicker` component renders controls that let the user choose a _date format_. That is, how they want their dates to be formatted.
 
-A user can pick _Default_ to use the default date format (usually set at the
-site level).
+A user can pick _Default_ to use the default date format (usually set at the site level).
 
-Otherwise, a user may choose a suggested date format or type in their own date
-format by selecting _Custom_.
+Otherwise, a user may choose a suggested date format or type in their own date format by selecting _Custom_.
 
-All date format strings should be in the format accepted by by the [`dateI18n`
-function in
-`@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n).
+All date format strings should be in the format accepted by by the [`dateI18n` function in `@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n).
 
 ## Usage
 
@@ -43,16 +38,14 @@ The current date format selected by the user. If `null`, _Default_ is selected.
 
 ### `defaultFormat`
 
-The default format string. Used to show to the user what the date will look like
-if _Default_ is selected.
+The default format string. Used to show to the user what the date will look like if _Default_ is selected.
 
 -   Type: `string`
 -   Required: Yes
 
 ### `onChange`
 
-Called when the user makes a selection, or when the user types in a date format.
-`null` indicates that _Default_ is selected.
+Called when the user makes a selection, or when the user types in a date format. `null` indicates that _Default_ is selected.
 
 -   Type: `( format: string|null ) => void`
 -   Required: Yes

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

@@ -29,21 +29,10 @@ if ( exampleDate.getMonth() === 4 ) {
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md
  *
- * @param {Object}                          props
- * @param {string|null}                     props.format        The selected date
- *                                                              format. If
- *                                                              `null`,
- *                                                              _Default_ is
- *                                                              selected.
- * @param {string}                          props.defaultFormat The date format that
- *                                                              will be used if the
- *                                                              user selects
- *                                                              'Default'.
- * @param {( format: string|null ) => void} props.onChange      Called when a
- *                                                              selection is
- *                                                              made. If `null`,
- *                                                              _Default_ is
- *                                                              selected.
+ * @param {Object}      props
+ * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.
+ * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.
+ * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.
  */
 export default function DateFormatPicker( {
 	format,
@@ -51,7 +40,11 @@ export default function DateFormatPicker( {
 	onChange,
 } ) {
 	return (
-		<fieldset className="block-editor-date-format-picker">
+		<VStack
+			as="fieldset"
+			spacing={ 4 }
+			className="block-editor-date-format-picker"
+		>
 			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
 			<ToggleControl
 				__nextHasNoMarginBottom
@@ -68,7 +61,7 @@ export default function DateFormatPicker( {
 			{ format && (
 				<NonDefaultControls format={ format } onChange={ onChange } />
 			) }
-		</fieldset>
+		</VStack>
 	);
 }
 

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,10 +13,11 @@ 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: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

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

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

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

@@ -13,10 +13,11 @@ 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: { type: null } },
+		panelId: { control: false },
 		onChange: { action: 'changed' },
 	},
 };

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

@@ -13,10 +13,11 @@ 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: { type: null } },
+		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,
 	},
 };