@wordpress/block-editor 9.2.0 → 9.5.0

package/src/components/preview-options/index.js

@@ -35,11 +35,15 @@ export default function PreviewOptions( {
 		/* translators: button label text should, if possible, be under 16 characters. */
 		children: __( 'Preview' ),
 	};
+	const menuProps = {
+		'aria-label': __( 'Preview options' ),
+	};
 	return (
 		<DropdownMenu
 			className="block-editor-post-preview__dropdown"
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
+			menuProps={ menuProps }
 			icon={ null }
 		>
 			{ () => (

package/src/components/provider/use-block-sync.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, noop } from 'lodash';
+import { last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,8 @@ import { cloneBlock } from '@wordpress/blocks';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 /**
  * A function to call when the block value has been updated in the block-editor
  * store.
@@ -258,7 +260,8 @@ export default function useBlockSync( {
 					selection: {
 						selectionStart: getSelectionStart(),
 						selectionEnd: getSelectionEnd(),
-						initialPosition: getSelectedBlocksInitialCaretPosition(),
+						initialPosition:
+							getSelectedBlocksInitialCaretPosition(),
 					},
 				} );
 			}

package/src/components/publish-date-time-picker/README.md

@@ -49,4 +49,4 @@ const MyDateTimePicker = () => {
 Called when the user presses the close button.
 
 - Type: `Function`
-- Required: Yes
+- Required: No

package/src/components/publish-date-time-picker/index.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	DateTimePicker,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	Button,
-} from '@wordpress/components';
-import { closeSmall } from '@wordpress/icons';
+import { DateTimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { __experimentalGetSettings as getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import InspectorPopoverHeader from '../inspector-popover-header';
 
 function PublishDateTimePicker(
 	{ onClose, onChange, ...additionalProps },
@@ -17,27 +17,18 @@ function PublishDateTimePicker(
 ) {
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
-			{ /* TODO: This header is essentially the same as the one in <PostVisiblity />. DRY it up. */ }
-			<HStack className="block-editor-publish-date-time-picker__header">
-				<h2 className="block-editor-publish-date-time-picker__heading">
-					{ __( 'Publish' ) }
-				</h2>
-				<Spacer />
-				<Button
-					className="block-editor-publish-date-time-picker__reset"
-					variant="tertiary"
-					onClick={ () => onChange?.( null ) }
-				>
-					{ __( 'Now' ) }
-				</Button>
-				<Button
-					className="block-editor-publish-date-time-picker__close"
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ onClose }
-				/>
-			</HStack>
+			<InspectorPopoverHeader
+				title={ __( 'Publish' ) }
+				actions={ [
+					{
+						label: __( 'Now' ),
+						onClick: () => onChange?.( null ),
+					},
+				] }
+				onClose={ onClose }
+			/>
 			<DateTimePicker
+				startOfWeek={ getSettings().l10n.startOfWeek }
 				__nextRemoveHelpButton
 				__nextRemoveResetButton
 				onChange={ onChange }

package/src/components/responsive-block-control/README.md

@@ -171,8 +171,10 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 An optional render function (prop) used to render the controls for the _responsive_ settings. If not provided, by default, responsive controls will be _automatically_ rendered using the component returned by the `renderDefaultControl` prop. For _complete_ control over the output of the responsive controls, you may return a component here and it will be rendered when the control group is in "responsive" mode.
 
 ```jsx
+let uniqueId = 0;
+
 const renderResponsiveControls = ( viewports ) => {
-	const inputId = uniqueId(); // lodash
+	const inputId = ++uniqueId;
 
 	return viewports.map( ( { id, label } ) => {
 		return (

package/src/components/responsive-block-control/test/index.js

@@ -3,7 +3,6 @@
  */
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ afterEach( () => {
 	container = null;
 } );
 
-const inputId = uniqueId();
+const inputId = 'input-12345678';
 
 const sizeOptions = [
 	{
@@ -97,8 +96,9 @@ describe( 'Basic rendering', () => {
 			)
 		);
 
-		const toggleState = container.querySelector( 'input[type="checkbox"]' )
-			.checked;
+		const toggleState = container.querySelector(
+			'input[type="checkbox"]'
+		).checked;
 
 		const defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'

package/src/components/rich-text/embed-handler-picker.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,6 +11,8 @@ import {
 import { Picker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const noop = () => {};
+
 const DEFAULT_PICKER_OPTIONS = [
 	{
 		id: 'createEmbed',

package/src/components/rich-text/index.js

@@ -122,9 +122,8 @@ function RichTextWrapper(
 	const anchorRef = useRef();
 	const { clientId } = useBlockEditContext();
 	const selector = ( select ) => {
-		const { getSelectionStart, getSelectionEnd } = select(
-			blockEditorStore
-		);
+		const { getSelectionStart, getSelectionEnd } =
+			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -241,7 +240,11 @@ function RichTextWrapper(
 		);
 	}
 
-	const { value, onChange, ref: richTextRef } = useRichText( {
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
 			adjustedOnChange( html );

package/src/components/rich-text/use-format-types.js

@@ -69,15 +69,14 @@ export function useFormatTypes( {
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
 				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[
-						type.name
-					] = type.__experimentalGetPropsForEditableTreePreparation(
-						select,
-						{
-							richTextIdentifier: identifier,
-							blockClientId: clientId,
-						}
-					);
+					accumulator[ type.name ] =
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
+						);
 				}
 
 				return accumulator;
@@ -116,13 +115,14 @@ export function useFormatTypes( {
 			let dispatchers = {};
 
 			if ( type.__experimentalGetPropsForEditableTreeChangeHandler ) {
-				dispatchers = type.__experimentalGetPropsForEditableTreeChangeHandler(
-					dispatch,
-					{
-						richTextIdentifier: identifier,
-						blockClientId: clientId,
-					}
-				);
+				dispatchers =
+					type.__experimentalGetPropsForEditableTreeChangeHandler(
+						dispatch,
+						{
+							richTextIdentifier: identifier,
+							blockClientId: clientId,
+						}
+					);
 			}
 
 			changeHandlers.push(

package/src/components/rich-text/use-input-rules.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { findKey } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,21 +12,17 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
-
-// A robust way to retain selection position through various
-// transforms is to insert a special character at the position and
-// then recover it.
-const START_OF_SELECTED_AREA = '\u0086';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../utils/selection';
 
 function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {
-		const attributeKey = findKey(
-			blocks[ i ].attributes,
-			( v ) =>
-				typeof v === 'string' &&
-				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
 		);
 
 		if ( attributeKey ) {

package/src/components/rich-text/use-mark-persistent.js

@@ -13,9 +13,8 @@ export function useMarkPersistent( { html, value } ) {
 	const previousText = useRef();
 	const hasActiveFormats =
 		value.activeFormats && !! value.activeFormats.length;
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {

package/src/components/rich-text/use-paste-handler.js

@@ -254,17 +254,29 @@ export function usePasteHandler( props ) {
 }
 
 /**
- * Normalizes a given string of HTML to remove the Windows specific "Fragment" comments
- * and any preceeding and trailing whitespace.
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceeding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html
  */
 function removeWindowsFragments( html ) {
-	const startReg = /.*<!--StartFragment-->/s;
-	const endReg = /<!--EndFragment-->.*/s;
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
 
-	return html.replace( startReg, '' ).replace( endReg, '' );
+	return html;
 }
 
 /**

package/src/components/skip-to-selected-block/index.js

@@ -33,8 +33,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
  */
 export default withSelect( ( select ) => {
 	return {
-		selectedBlockClientId: select(
-			blockEditorStore
-		).getBlockSelectionStart(),
+		selectedBlockClientId:
+			select( blockEditorStore ).getBlockSelectionStart(),
 	};
 } )( SkipToSelectedBlock );

package/src/components/ungroup-button/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,6 +13,8 @@ import { compose } from '@wordpress/compose';
 import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
 		return null;
@@ -35,9 +32,8 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const { getGroupingBlockName } = select( blocksStore );
 

package/src/components/url-input/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, isFunction } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -27,6 +27,16 @@ import { isURL } from '@wordpress/url';
  */
 import { store as blockEditorStore } from '../../store';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class URLInput extends Component {
 	constructor( props ) {
 		super( props );
@@ -60,10 +70,8 @@ class URLInput extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const { showSuggestions, selectedSuggestion } = this.state;
-		const {
-			value,
-			__experimentalShowInitialSuggestions = false,
-		} = this.props;
+		const { value, __experimentalShowInitialSuggestions = false } =
+			this.props;
 
 		// Only have to worry about scrolling selected suggestion into view
 		// when already expanded.
@@ -122,10 +130,8 @@ class URLInput extends Component {
 
 	shouldShowInitialSuggestions() {
 		const { suggestions } = this.state;
-		const {
-			__experimentalShowInitialSuggestions = false,
-			value,
-		} = this.props;
+		const { __experimentalShowInitialSuggestions = false, value } =
+			this.props;
 		return (
 			! this.isUpdatingSuggestions &&
 			__experimentalShowInitialSuggestions &&
@@ -257,12 +263,8 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
-		const {
-			showSuggestions,
-			selectedSuggestion,
-			suggestions,
-			loading,
-		} = this.state;
+		const { showSuggestions, selectedSuggestion, suggestions, loading } =
+			this.state;
 
 		// If the suggestions are not shown or loading, we shouldn't handle the arrow keys
 		// We shouldn't preventDefault to allow block arrow keys navigation.
@@ -315,9 +317,8 @@ class URLInput extends Component {
 			return;
 		}
 
-		const suggestion = this.state.suggestions[
-			this.state.selectedSuggestion
-		];
+		const suggestion =
+			this.state.suggestions[ this.state.selectedSuggestion ];
 
 		switch ( event.keyCode ) {
 			case UP: {
@@ -590,8 +591,8 @@ export default compose(
 		}
 		const { getSettings } = select( blockEditorStore );
 		return {
-			__experimentalFetchLinkSuggestions: getSettings()
-				.__experimentalFetchLinkSuggestions,
+			__experimentalFetchLinkSuggestions:
+				getSettings().__experimentalFetchLinkSuggestions,
 		};
 	} )
 )( URLInput );

package/src/components/url-popover/index.js

@@ -33,6 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
+			__unstableShift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -2,6 +2,7 @@
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -38,6 +39,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -81,6 +83,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"

package/src/components/use-block-display-information/index.js

@@ -41,12 +41,10 @@ export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
-			const { getBlockType, getActiveBlockVariation } = select(
-				blocksStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			if ( ! blockType ) return null;

package/src/components/use-block-drop-zone/index.js

@@ -101,9 +101,8 @@ export default function useBlockDropZone( {
 	);
 
 	const { getBlockListSettings } = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 	const throttled = useThrottle(

package/src/components/use-block-drop-zone/index.native.js

@@ -113,10 +113,8 @@ export default function useBlockDropZone( {
 	const targetBlockIndex = useSharedValue( null );
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const {
-		blocksLayouts,
-		getBlockLayoutsOrderedByYCoord,
-	} = useBlockListContext();
+	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
+		useBlockListContext();
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );

package/src/components/use-block-drop-zone/test/index.js

@@ -39,30 +39,29 @@ const createMockClassList = ( classes ) => {
 	};
 };
 
-const mapElements = ( orientation ) => (
-	{ top, right, bottom, left },
-	index
-) => {
-	return {
-		dataset: { block: index + 1 },
-		getBoundingClientRect() {
-			return orientation === 'vertical'
-				? {
-						top,
-						right,
-						bottom,
-						left,
-				  }
-				: {
-						top: left,
-						bottom: right,
-						left: top,
-						right: bottom,
-				  };
-		},
-		classList: createMockClassList( 'wp-block' ),
+const mapElements =
+	( orientation ) =>
+	( { top, right, bottom, left }, index ) => {
+		return {
+			dataset: { block: index + 1 },
+			getBoundingClientRect() {
+				return orientation === 'vertical'
+					? {
+							top,
+							right,
+							bottom,
+							left,
+					  }
+					: {
+							top: left,
+							bottom: right,
+							left: top,
+							right: bottom,
+					  };
+			},
+			classList: createMockClassList( 'wp-block' ),
+		};
 	};
-};
 
 const verticalElements = elementData.map( mapElements( 'vertical' ) );
 // Flip the elementData to make a horizontal block list.

package/src/components/use-display-block-controls/index.native.js

@@ -14,9 +14,8 @@ export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockRootClientId } =
+				select( blockEditorStore );
 
 			const parentId = getBlockRootClientId( clientId );
 			const parentBlockName = getBlockName( parentId );

package/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js

@@ -16,9 +16,8 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		uniqueId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( uniqueId );
 
 	if ( hasAlreadyRendered ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;

package/src/components/use-on-block-drop/index.js

@@ -217,11 +217,8 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const {
-		canInsertBlockType,
-		getBlockIndex,
-		getClientIdsOfDescendants,
-	} = useSelect( blockEditorStore );
+	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,

package/src/components/use-on-block-drop/index.native.js

@@ -100,14 +100,10 @@ export function onBlockDrop(
  * @return {Function} The event handler for a block drop event.
  */
 export default function useOnBlockDrop() {
-	const { getBlockIndex, getClientIdsOfDescendants } = useSelect(
-		blockEditorStore
-	);
-	const {
-		insertBlocks,
-		moveBlocksToPosition,
-		clearSelectedBlock,
-	} = useDispatch( blockEditorStore );
+	const { getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
+	const { insertBlocks, moveBlocksToPosition, clearSelectedBlock } =
+		useDispatch( blockEditorStore );
 
 	return onBlockDrop(
 		getBlockIndex,