@wordpress/block-editor 8.3.1 → 8.4.0

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -69,13 +69,64 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   min-height: 0;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.emotion-10>*+*:not( marquee ) {
+  margin-left: calc(4px * 2);
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
+.emotion-13 {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-15 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
   <div
     className="components-base-control__field emotion-2 emotion-3"
   >
-    <fieldset>
+    <fieldset
+      className="block-editor-color-gradient-control__fieldset"
+    >
       <div
         className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
         data-wp-c16t={true}
@@ -104,8 +155,10 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             <button
               aria-expanded={false}
               aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-color-palette__custom-color"
+              aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+              className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+              data-wp-c16t={true}
+              data-wp-component="Flex"
               onClick={[Function]}
               style={
                 Object {
@@ -114,7 +167,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 }
               }
             >
-              #f00
+              <span
+                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                data-wp-c16t={true}
+                data-wp-component="FlexItem"
+              >
+                red
+              </span>
+              <span
+                className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                data-wp-c16t={true}
+                data-wp-component="FlexItem"
+              >
+                f00
+              </span>
             </button>
           </div>
           <div

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

@@ -66,7 +66,7 @@ function ColorGradientControlInner( {
 				className
 			) }
 		>
-			<fieldset>
+			<fieldset className="block-editor-color-gradient-control__fieldset">
 				<VStack spacing={ 1 }>
 					{ showTitle && (
 						<legend>

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

@@ -4,6 +4,12 @@
 	}
 }
 
+.block-editor-color-gradient-control__fieldset {
+	// Prevents the `fieldset` from growing beyond its parent's size
+	// in order to fit its content.
+	min-width: 0;
+}
+
 .block-editor-panel-color-gradient-settings {
 	.block-editor-panel-color-gradient-settings__panel-title {
 		display: flex;

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

@@ -0,0 +1,58 @@
+# DateFormatPicker
+
+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).
+
+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).
+
+## Usage
+
+```jsx
+import { DateFormatPicker } from '@wordpress/block-editor';
+
+const Example = () => {
+	const [ format, setFormat ] = useState( null );
+	return (
+		<DateFormatPicker
+			format={ format }
+			defaultFormat={ 'M j, Y' }
+			onChange={ ( nextFormat ) =>
+				setFormat( nextFormat );
+			}
+		/>
+	);
+};
+```
+
+## Props
+
+### `format`
+
+The current date format selected by the user. If `null`, _Default_ is selected.
+
+-   Type: `string|null`
+-   Required: Yes
+
+### `defaultFormat`
+
+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.
+
+-   Type: `( format: string|null ) => void`
+-   Required: Yes

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

@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import { uniq } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+import { dateI18n } from '@wordpress/date';
+import { useState, createInterpolateElement } from '@wordpress/element';
+import {
+	TextControl,
+	ExternalLink,
+	VisuallyHidden,
+	CustomSelectControl,
+	BaseControl,
+	ToggleControl,
+} from '@wordpress/components';
+
+// So that we can illustrate the different formats in the dropdown properly,
+// show a date that has a day greater than 12 and a month with more than three
+// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
+// released.
+const EXAMPLE_DATE = new Date( 2022, 0, 25 );
+
+/**
+ * The `DateFormatPicker` component renders controls that let the user choose a
+ * _date format_. That is, how they want their dates to be formatted.
+ *
+ * @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.
+ */
+export default function DateFormatPicker( {
+	format,
+	defaultFormat,
+	onChange,
+} ) {
+	return (
+		<fieldset className="block-editor-date-format-picker">
+			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
+			<ToggleControl
+				label={
+					<>
+						{ __( 'Default format' ) }
+						<span className="block-editor-date-format-picker__default-format-toggle-control__hint">
+							{ dateI18n( defaultFormat, EXAMPLE_DATE ) }
+						</span>
+					</>
+				}
+				checked={ ! format }
+				onChange={ ( checked ) =>
+					onChange( checked ? null : defaultFormat )
+				}
+			/>
+			{ format && (
+				<NonDefaultControls format={ format } onChange={ onChange } />
+			) }
+		</fieldset>
+	);
+}
+
+function NonDefaultControls( { format, onChange } ) {
+	// Suggest a short format, medium format, long format, and a standardised
+	// (YYYY-MM-DD) format. The short, medium, and long formats are localised as
+	// different languages have different ways of writing these. For example, 'F
+	// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April
+	// 2022) in German (de). The resultant array is de-duplicated as some
+	// languages will use the same format string for short, medium, and long
+	// formats.
+	const suggestedFormats = uniq( [
+		'Y-m-d',
+		_x( 'n/j/Y', 'short date format' ),
+		_x( 'n/j/Y g:i A', 'short date format with time' ),
+		_x( 'M j, Y', 'medium date format' ),
+		_x( 'M j, Y g:i A', 'medium date format with time' ),
+		_x( 'F j, Y', 'long date format' ),
+	] );
+
+	const suggestedOptions = suggestedFormats.map(
+		( suggestedFormat, index ) => ( {
+			key: `suggested-${ index }`,
+			name: dateI18n( suggestedFormat, EXAMPLE_DATE ),
+			format: suggestedFormat,
+		} )
+	);
+	const customOption = {
+		key: 'custom',
+		name: __( 'Custom' ),
+		className:
+			'block-editor-date-format-picker__custom-format-select-control__custom-option',
+		__experimentalHint: __( 'Enter your own date format' ),
+	};
+
+	const [ isCustom, setIsCustom ] = useState(
+		() => !! format && ! suggestedFormats.includes( format )
+	);
+
+	return (
+		<>
+			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
+				<CustomSelectControl
+					label={ __( 'Choose a format' ) }
+					options={ [ ...suggestedOptions, customOption ] }
+					value={
+						isCustom
+							? customOption
+							: suggestedOptions.find(
+									( option ) => option.format === format
+							  ) ?? customOption
+					}
+					onChange={ ( { selectedItem } ) => {
+						if ( selectedItem === customOption ) {
+							setIsCustom( true );
+						} else {
+							setIsCustom( false );
+							onChange( selectedItem.format );
+						}
+					} }
+				/>
+			</BaseControl>
+			{ isCustom && (
+				<TextControl
+					label={ __( 'Custom format' ) }
+					hideLabelFromVision
+					help={ createInterpolateElement(
+						__(
+							'Enter a date or time <Link>format string</Link>.'
+						),
+						{
+							Link: (
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/support/article/formatting-date-and-time/'
+									) }
+								/>
+							),
+						}
+					) }
+					value={ format }
+					onChange={ ( value ) => onChange( value ) }
+				/>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,31 @@
+.block-editor-date-format-picker {
+	margin-bottom: $grid-unit-20;
+}
+
+.block-editor-date-format-picker__default-format-toggle-control__hint {
+	color: $gray-700;
+	display: block;
+}
+
+.block-editor-date-format-picker__custom-format-select-control {
+	&.components-base-control {
+		margin-bottom: 0;
+	}
+
+	.components-custom-select-control__button {
+		width: 100%;
+	}
+}
+
+.block-editor-date-format-picker__custom-format-select-control__custom-option {
+	border-top: 1px solid $gray-300;
+
+	&.has-hint {
+		grid-template-columns: auto 30px;
+	}
+
+	.components-custom-select-control__item-hint {
+		grid-row: 2;
+		text-align: left;
+	}
+}

package/src/components/index.js

@@ -42,6 +42,7 @@ export {
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';
 export { default as ContrastChecker } from './contrast-checker';
+export { default as __experimentalDateFormatPicker } from './date-format-picker';
 export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';

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

@@ -37,7 +37,7 @@ export default function LineHeightControl( {
 		 * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
 		 * or by clicking the spin buttons.
 		 */
-		switch ( nextValue ) {
+		switch ( `${ nextValue }` ) {
 			case `${ STEP }`:
 				// Increment by step value.
 				return BASE_DEFAULT_VALUE + STEP;
@@ -63,8 +63,8 @@ export default function LineHeightControl( {
 		const wasTypedOrPasted = [ 'insertText', 'insertFromPaste' ].includes(
 			action.payload.event.nativeEvent?.inputType
 		);
-		state.value = adjustNextValue( state.value, wasTypedOrPasted );
-		return state;
+		const value = adjustNextValue( state.value, wasTypedOrPasted );
+		return { ...state, value };
 	};
 
 	const value = isDefined ? lineHeight : RESET_VALUE;

package/src/components/link-control/README.md

@@ -85,7 +85,7 @@ Value change handler, called with the updated value if the user selects a new li
 <LinkControl
 	onChange={ ( nextValue ) => {
 		console.log( `The selected item URL: ${ nextValue.url }.` );
-	}
+	} }
 />
 ```
 

package/src/components/list-view/block-select-button.js

@@ -6,17 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -25,29 +22,17 @@ function ListViewBlockSelectButton(
 	{
 		className,
 		block: { clientId },
-		isSelected,
 		onClick,
 		onToggleExpanded,
-		position,
-		siblingBlockCount,
-		level,
 		tabIndex,
 		onFocus,
 		onDragStart,
 		onDragEnd,
 		draggable,
-		isExpanded,
 	},
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const instanceId = useInstanceId( ListViewBlockSelectButton );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		siblingBlockCount,
-		level
-	);
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -73,7 +58,6 @@ function ListViewBlockSelectButton(
 				) }
 				onClick={ onClick }
 				onKeyDown={ onKeyDownHandler }
-				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
@@ -81,7 +65,7 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-expanded={ isExpanded }
+				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
@@ -91,18 +75,7 @@ function ListViewBlockSelectButton(
 						{ blockInformation.anchor }
 					</span>
 				) }
-				{ isSelected && (
-					<VisuallyHidden>
-						{ __( '(selected block)' ) }
-					</VisuallyHidden>
-				) }
 			</Button>
-			<div
-				className="block-editor-list-view-block-select-button__description"
-				id={ descriptionId }
-			>
-				{ blockPositionDescription }
-			</div>
 		</>
 	);
 }

package/src/components/list-view/block.js

@@ -10,6 +10,7 @@ import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import {
 	useState,
@@ -32,6 +33,7 @@ import {
 import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
+import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 
@@ -49,6 +51,7 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
+	preventAnnouncement,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -56,6 +59,31 @@ function ListViewBlock( {
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const instanceId = useInstanceId( ListViewBlock );
+	const descriptionId = `list-view-block-select-button__${ instanceId }`;
+	const blockPositionDescription = getBlockPositionDescription(
+		position,
+		siblingBlockCount,
+		level
+	);
+
+	const blockAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block. This string indicates a link to select the block.
+				__( '%s link' ),
+				blockInformation.title
+		  )
+		: __( 'Link' );
+
+	const settingsAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Options for %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Options' );
+
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
 		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
@@ -106,11 +134,12 @@ function ListViewBlock( {
 	const selectEditorBlock = useCallback(
 		( event ) => {
 			selectBlock( event, clientId );
+			event.preventDefault();
 		},
 		[ clientId, selectBlock ]
 	);
 
-	const selectDuplicatedBlock = useCallback(
+	const updateSelection = useCallback(
 		( newClientId ) => {
 			selectBlock( undefined, newClientId );
 		},
@@ -154,15 +183,6 @@ function ListViewBlock( {
 		'has-single-cell': hideBlockActions,
 	} );
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const settingsAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Options' );
-
 	// Only include all selected blocks if the currently clicked on block
 	// is one of the selected blocks. This ensures that if a user attempts
 	// to alter a block that isn't part of the selection, they're still able
@@ -185,11 +205,16 @@ function ListViewBlock( {
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			isExpanded={ isExpanded }
+			aria-selected={ !! isSelected }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
+				aria-label={ blockAriaLabel }
+				aria-selected={ !! isSelected }
+				aria-expanded={ isExpanded }
+				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -206,7 +231,14 @@ function ListViewBlock( {
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }
+							preventAnnouncement={ preventAnnouncement }
 						/>
+						<div
+							className="block-editor-list-view-block-select-button__description"
+							id={ descriptionId }
+						>
+							{ blockPositionDescription }
+						</div>
 					</div>
 				) }
 			</TreeGridCell>
@@ -243,7 +275,10 @@ function ListViewBlock( {
 			) }
 
 			{ showBlockActions && (
-				<TreeGridCell className={ listViewBlockSettingsClassName }>
+				<TreeGridCell
+					className={ listViewBlockSettingsClassName }
+					aria-selected={ !! isSelected }
+				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ dropdownClientIds }
@@ -256,7 +291,7 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ selectDuplicatedBlock }
+							__experimentalSelectBlock={ updateSelection }
 						/>
 					) }
 				</TreeGridCell>