@wordpress/block-editor 8.3.0 → 8.5.0

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/font-sizes/font-size-picker.js

@@ -21,4 +21,7 @@ function FontSizePicker( props ) {
 	);
 }
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/font-sizes/README.md
+ */
 export default FontSizePicker;

package/src/components/iframe/index.js

@@ -203,14 +203,10 @@ function Iframe(
 			return true;
 		}
 
-		if ( setDocumentIfReady() ) {
-			return;
-		}
+		// Document set with srcDoc is not immediately ready.
+		node.addEventListener( 'load', setDocumentIfReady );
 
-		// Document is not immediately loaded in Firefox.
-		node.addEventListener( 'load', () => {
-			setDocumentIfReady();
-		} );
+		return () => node.removeEventListener( 'load', setDocumentIfReady );
 	}, [] );
 	const headRef = useRefEffect( ( element ) => {
 		scripts
@@ -264,6 +260,8 @@ function Iframe(
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
+				// Correct doctype is required to enable rendering in standards mode
+				srcDoc="<!doctype html>"
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&

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';
@@ -98,6 +99,8 @@ export { default as withColorContext } from './color-palette/with-color-context'
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
+export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';
 export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';

package/src/components/justify-content-control/index.js

@@ -3,10 +3,15 @@
  */
 import JustifyContentUI from './ui';
 
-export function JustifyContentControl( props ) {
+const JustifyContentControl = ( props ) => {
 	return <JustifyContentUI { ...props } isToolbar={ false } />;
-}
+};
 
-export function JustifyToolbar( props ) {
+const JustifyToolbar = ( props ) => {
 	return <JustifyContentUI { ...props } isToolbar />;
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/justify-content-control/README.md
+ */
+export { JustifyContentControl, JustifyToolbar };

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

@@ -61,7 +61,7 @@ function KeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/block-editor/delete-multi-selection',
 			category: 'block',
-			description: __( 'Remove multiple selected blocks.' ),
+			description: __( 'Delete selection.' ),
 			keyCombination: {
 				character: 'del',
 			},

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

@@ -15,13 +15,13 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( {
+const LineHeightControl = ( {
 	value: lineHeight,
 	onChange,
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
-} ) {
+} ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
 	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
@@ -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;
@@ -101,4 +101,9 @@ export default function LineHeightControl( {
 			/>
 		</div>
 	);
-}
+};
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/line-height-control/README.md
+ */
+export default LineHeightControl;

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,47 +6,43 @@ 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';
+import { useSelect } from '@wordpress/data';
+import { Icon, lock } from '@wordpress/icons';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
  * 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';
+import { store as blockEditorStore } from '../../store';
 
 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
+	const isLocked = useSelect(
+		( select ) => {
+			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
+
+			return ! canMoveBlock( clientId ) || ! canRemoveBlock( clientId );
+		},
+		[ clientId ]
 	);
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -55,7 +51,7 @@ function ListViewBlockSelectButton(
 	// inside the `useOnBlockDrop` hook.
 	const onDragStartHandler = ( event ) => {
 		event.dataTransfer.clearData();
-		onDragStart( event );
+		onDragStart?.( event );
 	};
 
 	function onKeyDownHandler( event ) {
@@ -73,7 +69,6 @@ function ListViewBlockSelectButton(
 				) }
 				onClick={ onClick }
 				onKeyDown={ onKeyDownHandler }
-				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
@@ -81,28 +76,24 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-expanded={ isExpanded }
+				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+				<span className="block-editor-list-view-block-select-button__title">
+					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
+				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor">
 						{ blockInformation.anchor }
 					</span>
 				) }
-				{ isSelected && (
-					<VisuallyHidden>
-						{ __( '(selected block)' ) }
-					</VisuallyHidden>
+				{ isLocked && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
 				) }
 			</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,13 +51,44 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
+	preventAnnouncement,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
+	const isFirstSelectedBlock =
+		isSelected && selectedClientIds[ 0 ] === clientId;
+	const isLastSelectedBlock =
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
 
 	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,
@@ -74,7 +107,7 @@ function ListViewBlock( {
 
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isSelected }
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
 	// If ListView has experimental features related to the Persistent List View,
@@ -106,11 +139,12 @@ function ListViewBlock( {
 	const selectEditorBlock = useCallback(
 		( event ) => {
 			selectBlock( event, clientId );
+			event.preventDefault();
 		},
 		[ clientId, selectBlock ]
 	);
 
-	const selectDuplicatedBlock = useCallback(
+	const updateSelection = useCallback(
 		( newClientId ) => {
 			selectBlock( undefined, newClientId );
 		},
@@ -148,21 +182,14 @@ function ListViewBlock( {
 
 	const classes = classnames( {
 		'is-selected': isSelected,
+		'is-first-selected': isFirstSelectedBlock,
+		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
 		'is-dragging': isDragged,
 		'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 +212,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 +238,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 +282,10 @@ function ListViewBlock( {
 			) }
 
 			{ showBlockActions && (
-				<TreeGridCell className={ listViewBlockSettingsClassName }>
+				<TreeGridCell
+					className={ listViewBlockSettingsClassName }
+					aria-selected={ !! isSelected }
+				>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ dropdownClientIds }
@@ -256,7 +298,7 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ selectDuplicatedBlock }
+							__experimentalSelectBlock={ updateSelection }
 						/>
 					) }
 				</TreeGridCell>