@wordpress/block-editor 14.9.0 → 14.10.0

package/src/components/block-title/stories/index.story.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import BlockTitle from '../';
+
+// Register core blocks for the story environment
+registerCoreBlocks();
+
+// Sample blocks for testing
+const blocks = [ createBlock( 'core/paragraph' ) ];
+
+const meta = {
+	title: 'BlockEditor/BlockTitle',
+	component: BlockTitle,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					"Renders the block's configured title as a string, or empty if the title cannot be determined.",
+			},
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<ExperimentalBlockEditorProvider value={ blocks }>
+				<Story />
+			</ExperimentalBlockEditorProvider>
+		),
+	],
+	argTypes: {
+		clientId: {
+			control: { type: null },
+			description: 'Client ID of block.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		maximumLength: {
+			control: { type: 'number' },
+			description:
+				'The maximum length that the block title string may be before truncated.',
+			table: {
+				type: {
+					summary: 'number',
+				},
+			},
+		},
+		context: {
+			control: { type: 'text' },
+			description: 'The context to pass to `getBlockLabel`.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		clientId: blocks[ 0 ].clientId,
+	},
+};

package/src/components/block-tools/style.scss

@@ -78,6 +78,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/block-tools/zoom-out-mode-inserters.js

@@ -20,6 +20,8 @@ function ZoomOutModeInserters() {
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
+		blockInsertionPoint,
+		insertionPointVisible,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
@@ -27,6 +29,8 @@ function ZoomOutModeInserters() {
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getSectionRootClientId,
+			getBlockInsertionPoint,
+			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -38,6 +42,8 @@ function ZoomOutModeInserters() {
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
+			blockInsertionPoint: getBlockInsertionPoint(),
+			insertionPointVisible: isBlockInsertionPointVisible(),
 		};
 	}, [] );
 
@@ -62,7 +68,19 @@ function ZoomOutModeInserters() {
 	const index = blockOrder.findIndex(
 		( clientId ) => selectedBlockClientId === clientId
 	);
-	const nextClientId = blockOrder[ index + 1 ];
+
+	const insertionIndex = index + 1;
+
+	const nextClientId = blockOrder[ insertionIndex ];
+
+	// If the block insertion point is visible, and the insertion
+	// Indices match then we don't need to render the inserter.
+	if (
+		insertionPointVisible &&
+		blockInsertionPoint?.index === insertionIndex
+	) {
+		return null;
+	}
 
 	return (
 		<BlockPopoverInbetween
@@ -73,11 +91,11 @@ function ZoomOutModeInserters() {
 				onClick={ () => {
 					setInserterIsOpened( {
 						rootClientId: sectionRootClientId,
-						insertionIndex: index + 1,
+						insertionIndex,
 						tab: 'patterns',
 						category: 'all',
 					} );
-					showInsertionPoint( sectionRootClientId, index + 1, {
+					showInsertionPoint( sectionRootClientId, insertionIndex, {
 						operation: 'insert',
 					} );
 				} }

package/src/components/border-radius-control/README.md

@@ -0,0 +1,59 @@
+# BorderRadiusControl
+
+`BorderRadiusControl` is a React component that provides a user interface for managing border radius values. It allows users to control the border radius of each corner independently or link them together for uniform values.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+const MyBorderRadiusControl = () => {
+    const [values, setValues] = useState({
+        topLeft: '10px',
+        topRight: '10px',
+        bottomLeft: '10px',
+        bottomRight: '10px',
+    });
+
+    return (
+        <BorderRadiusControl
+            values={values}
+            onChange={setValues}
+        />
+    );
+};
+```
+
+## Props
+
+### values
+
+An object containing the border radius values for each corner.
+
+- **Type:** `Object`
+- **Required:** No
+- **Default:** `undefined`
+
+The values object has the following schema:
+
+| Property    | Description                          | Type   |
+| ----------- | ------------------------------------ | ------ |
+| topLeft     | Border radius for top left corner    | string |
+| topRight    | Border radius for top right corner   | string |
+| bottomLeft  | Border radius for bottom left corner | string |
+| bottomRight | Border radius for bottom right corner| string |
+
+Each value should be a valid CSS border radius value (e.g., '10px', '1em').
+
+### onChange
+
+Callback function that is called when any border radius value changes.
+
+- **Type:** `Function`
+- **Required:** Yes
+
+The function receives the updated values object as its argument.

package/src/components/border-radius-control/stories/index.story.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BorderRadiusControl from '../';
+
+const meta = {
+	title: 'BlockEditor/BorderRadiusControl',
+	component: BorderRadiusControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to display border radius options.',
+			},
+		},
+	},
+	argTypes: {
+		values: {
+			control: 'object',
+			description: 'Border radius values.',
+			table: {
+				type: { summary: 'object' },
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+			},
+			description: 'Callback to handle onChange.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ values, setValues ] = useState( args.values );
+
+		return (
+			<BorderRadiusControl
+				{ ...args }
+				values={ values }
+				onChange={ ( ...changeArgs ) => {
+					setValues( ...changeArgs );
+					onChange( ...changeArgs );
+				} }
+			/>
+		);
+	},
+};

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

@@ -140,4 +140,9 @@ $swatch-gap: 12px;
 	&: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>
 	);
 }