Migrate from calling onClose to calling preventDefault() when needing…

… to keep the dropdown open
WordPress · Jun 13, 2023 · d91f642 · d91f642
1 parent a2b0a6b
commit d91f642
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 87 deletions.
diff --git a/packages/block-editor/src/components/block-lock/menu-item.js b/packages/block-editor/src/components/block-lock/menu-item.js
@@ -42,7 +42,11 @@ export default function BlockLockMenuItem( { clientId } ) {
 						size={ 24 }
 					/>
 				}
-				onClick={ toggleModal }
+				onSelect={ ( event ) => {
+					toggleModal();
+					// Keep the dropdown menu open
+					event.preventDefault();
+				} }
 			>
 				{ label }
 			</DropdownMenuItemV2>

diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -88,7 +88,6 @@ const BlockSettingsMenuControlsSlot = ( {
 							{ showConvertToGroupButton && (
 								<ConvertToGroupButton
 									{ ...convertToGroupButtonProps }
-									onClose={ fillProps?.onClose }
 								/>
 							) }
 							{ showLockButton && (
@@ -99,19 +98,14 @@ const BlockSettingsMenuControlsSlot = ( {
 							{ fills }
 							{ fillProps?.canMove && ! fillProps?.onlyBlock && (
 								<DropdownMenuItemV2
-									onSelect={ pipe(
-										// TODO: onclose?
-										// fillProps?.onClose,
-										fillProps?.onMoveTo
-									) }
+									onSelect={ fillProps?.onMoveTo }
 								>
 									{ __( 'Move to' ) }
 								</DropdownMenuItemV2>
 							) }
 							{ fillProps?.count === 1 && (
 								<BlockModeToggle
 									clientId={ fillProps?.firstBlockClientId }
-									onToggle={ fillProps?.onClose }
 								/>
 							) }
 						</DropdownMenuGroupV2>

diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -36,9 +36,9 @@ export function BlockModeToggle( {
 		mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
 
 	return (
-		// TODO: should prevent default?
 		// TODO: check if this used in other legacy dropdown menus
 		<DropdownMenuItemV2 onSelect={ onToggleMode }>
+			{ /* TODO: what if `small` is true? What contents are displayed? */ }
 			{ ! small && label }
 		</DropdownMenuItemV2>
 	);

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -12,16 +12,11 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import {
-	Children,
-	cloneElement,
-	useCallback,
-	useRef,
-} from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
-	__unstableUseShortcutEventMatch,
+	// __unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
 import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
@@ -50,7 +45,13 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
 	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return (
-		<DropdownMenuItemV2 ref={ ref }>
+		<DropdownMenuItemV2
+			ref={ ref }
+			onSelect={ ( event ) => {
+				// Keep the dropdown menu open.
+				event.preventDefault();
+			} }
+		>
 			{ copyMenuItemLabel }
 		</DropdownMenuItemV2>
 	);
@@ -152,7 +153,7 @@ export function BlockSettingsDropdown( {
 			),
 		};
 	}, [] );
-	const isMatch = __unstableUseShortcutEventMatch();
+	// const isMatch = __unstableUseShortcutEventMatch();
 
 	const { selectBlock, toggleBlockHighlight } =
 		useDispatch( blockEditorStore );
@@ -250,12 +251,9 @@ export function BlockSettingsDropdown( {
 					{ ...props }
 				>
 					<DropdownMenuGroupV2>
-						<__unstableBlockSettingsMenuFirstItem.Slot
-						// fillProps={ { onClose } } TODO: onClose missing
-						/>
+						<__unstableBlockSettingsMenuFirstItem.Slot />
 						{ ! parentBlockIsSelected && !! firstParentClientId && (
 							<DropdownMenuItemV2
-								// TODO: add onMouseMove and onMouseLeave to dropdownmenuitem
 								{ ...showParentOutlineGestures }
 								ref={ selectParentButtonRef }
 								prefix={
@@ -281,7 +279,6 @@ export function BlockSettingsDropdown( {
 						{ canDuplicate && (
 							<DropdownMenuItemV2
 								onSelect={ pipe(
-									// onClose, TODO: missing onClose
 									onDuplicate,
 									updateSelectionAfterDuplicate
 								) }
@@ -297,10 +294,7 @@ export function BlockSettingsDropdown( {
 						{ canInsertDefaultBlock && (
 							<>
 								<DropdownMenuItemV2
-									onSelect={ pipe(
-										// onClose, TODO: add onClose
-										onInsertBefore
-									) }
+									onSelect={ onInsertBefore }
 									suffix={
 										<Shortcut
 											shortcut={ shortcuts.insertBefore }
@@ -310,10 +304,7 @@ export function BlockSettingsDropdown( {
 									{ __( 'Add before' ) }
 								</DropdownMenuItemV2>
 								<DropdownMenuItemV2
-									onSelect={ pipe(
-										// onClose, TODO: add onClose
-										onInsertAfter
-									) }
+									onSelect={ onInsertAfter }
 									suffix={
 										<Shortcut
 											shortcut={ shortcuts.insertAfter }
@@ -332,14 +323,19 @@ export function BlockSettingsDropdown( {
 							onCopy={ onCopy }
 							label={ __( 'Copy styles' ) }
 						/>
-						<DropdownMenuItemV2 onSelect={ onPasteStyles }>
+						<DropdownMenuItemV2
+							onSelect={ ( event ) => {
+								onPasteStyles();
+								// Keep the dropdown menu open.
+								event.preventDefault();
+							} }
+						>
 							{ __( 'Paste styles' ) }
 						</DropdownMenuItemV2>
 					</DropdownMenuGroupV2>
 
 					<BlockSettingsMenuControls.Slot
 						fillProps={ {
-							// onClose,
 							canMove,
 							onMoveTo,
 							onlyBlock,
@@ -349,22 +345,13 @@ export function BlockSettingsDropdown( {
 						clientIds={ clientIds }
 						__unstableDisplayLocation={ __unstableDisplayLocation }
 					/>
-					{ typeof children === 'function'
-						? children( {
-								/*onClose*/
-						  } )
-						: Children.map( ( child ) =>
-								cloneElement( child, {
-									/*onClose*/
-								} )
-						  ) }
+					{ typeof children === 'function' ? children() : children }
 					{ canRemove && (
 						<>
 							<DropdownMenuSeparatorV2 />
 							<DropdownMenuGroupV2>
 								<DropdownMenuItemV2
 									onClick={ pipe(
-										// onClose,
 										onRemove,
 										updateSelectionAfterRemove
 									) }

diff --git a/packages/block-editor/src/components/convert-to-group-buttons/index.js b/packages/block-editor/src/components/convert-to-group-buttons/index.js
@@ -23,8 +23,6 @@ function ConvertToGroupButton( {
 	onUngroup,
 	blocksSelection,
 	groupingBlockName,
-	// TODO: onclose
-	// onClose = () => {},
 } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
@@ -63,7 +61,6 @@ function ConvertToGroupButton( {
 				<DropdownMenuItemV2
 					onSelect={ () => {
 						onConvertToGroup();
-						// onClose();
 					} }
 				>
 					{ _x( 'Group', 'verb' ) }

diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -130,11 +130,7 @@ export const withBlockControls = createHigherOrderComponent(
 				) }
 				{ showStartEditingAsBlocks && (
 					<BlockSettingsMenuControls>
-						{ (
-							{
-								/*onClose*/
-							}
-						) => (
+						{ () => (
 							/* TODO: check if this used in other legacy dropdown menus */
 							<DropdownMenuItemV2
 								onSelect={ () => {
@@ -154,7 +150,6 @@ export const withBlockControls = createHigherOrderComponent(
 									__unstableSetTemporarilyEditingAsBlocks(
 										props.clientId
 									);
-									// onClose(); TODO: onClose
 								} }
 							>
 								{ __( 'Modify' ) }

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -166,9 +166,10 @@ export default function TemplatePartEdit( {
 						{ () => (
 							/* TODO: check if this used in other legacy dropdown menus */
 							<DropdownMenuItemV2
-								onSelect={ () => {
-									// TODO: should call preventDefault?
+								onSelect={ ( event ) => {
 									setIsTemplatePartSelectionOpen( true );
+									// Keep the dropdown menu open
+									event.preventDefault();
 								} }
 							>
 								{ createInterpolateElement(

diff --git a/packages/customize-widgets/src/components/block-inspector-button/index.js b/packages/customize-widgets/src/components/block-inspector-button/index.js
@@ -3,11 +3,18 @@
  */
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function BlockInspectorButton( { inspector, closeMenu, ...props } ) {
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { DropdownMenuItemV2 } = unlock( componentsPrivateApis );
+
+function BlockInspectorButton( { inspector, ...props } ) {
 	const selectedBlockClientId = useSelect(
 		( select ) => select( blockEditorStore ).getSelectedBlockClientId(),
 		[]
@@ -19,19 +26,18 @@ function BlockInspectorButton( { inspector, closeMenu, ...props } ) {
 	);
 
 	return (
-		<MenuItem
-			onClick={ () => {
+		/* TODO: check if this used in other legacy dropdown menus */
+		<DropdownMenuItemV2
+			onSelect={ () => {
 				// Open the inspector.
 				inspector.open( {
 					returnFocusWhenClose: selectedBlock,
 				} );
-				// Then close the dropdown menu.
-				closeMenu();
 			} }
 			{ ...props }
 		>
 			{ __( 'Show more settings' ) }
-		</MenuItem>
+		</DropdownMenuItemV2>
 	);
 }
 

diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -139,12 +139,7 @@ export default function SidebarBlockEditor( {
 			</SidebarEditorProvider>
 
 			<__unstableBlockSettingsMenuFirstItem>
-				{ ( { onClose } ) => (
-					<BlockInspectorButton
-						inspector={ inspector }
-						closeMenu={ onClose }
-					/>
-				) }
+				<BlockInspectorButton inspector={ inspector } />
 			</__unstableBlockSettingsMenuFirstItem>
 		</>
 	);

diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
@@ -104,10 +104,7 @@ const PluginBlockSettingsMenuItem = ( {
 			return (
 				/* TODO: check if this used in other legacy dropdown menus */
 				<DropdownMenuItemV2
-					onClick={ compose(
-						onClick
-						// onClose TODO: onClose
-					) }
+					onSelect={ onClick }
 					prefix={ <Icon icon={ icon } size={ 24 } /> }
 					label={ small ? label : undefined } // TODO: should item accept label? It's probably supposed to add an aria-label and potentially even a tooltip
 					role={ role } // TODO: should item accept role?

diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
@@ -34,6 +34,7 @@ export function BlockInspectorButton( { onClick = noop, small = false } ) {
 		: __( 'Show more settings' );
 
 	return (
+		// Is this dead code?
 		<MenuItem
 			onClick={ () => {
 				if ( areAdvancedSettingsOpened ) {

diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js
@@ -15,6 +15,7 @@ import { store as editSiteStore } from '../../store';
 import { STORE_NAME } from '../../store/constants';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 
+// Is this dead code?
 export default function BlockInspectorButton( { onClick = () => {} } ) {
 	const { shortcut, isBlockInspectorOpen } = useSelect(
 		( select ) => ( {

diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
@@ -13,7 +13,7 @@ import { unlock } from '../../lock-unlock';
 
 const { DropdownMenuItemV2 } = unlock( componentsPrivateApis );
 
-export default function ConvertToRegularBlocks( { clientId /*onClose*/ } ) {
+export default function ConvertToRegularBlocks( { clientId } ) {
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
@@ -31,7 +31,6 @@ export default function ConvertToRegularBlocks( { clientId /*onClose*/ } ) {
 		<DropdownMenuItemV2
 			onSelect={ () => {
 				replaceBlocks( clientId, getBlocks( clientId ) );
-				// onClose(); TODO: onClose
 			} }
 		>
 			{ __( 'Detach blocks from template part' ) }

diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -84,9 +84,10 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 			{ /* TODO: check if this used in other legacy dropdown menus */ }
 			<DropdownMenuItemV2
 				prefix={ <Icon icon={ symbolFilled } size={ 24 } /> }
-				onSelect={ () => {
+				onSelect={ ( event ) => {
 					setIsModalOpen( true );
-					// TODO: should call prevent default?
+					// Keep the dropdown menu open
+					event.preventDefault();
 				} }
 			>
 				{ __( 'Create Template part' ) }

diff --git a/packages/edit-site/src/components/template-part-converter/index.js b/packages/edit-site/src/components/template-part-converter/index.js
@@ -16,17 +16,16 @@ import ConvertToTemplatePart from './convert-to-template-part';
 export default function TemplatePartConverter() {
 	return (
 		<BlockSettingsMenuControls>
-			{ ( { selectedClientIds, onClose } ) => (
+			{ ( { selectedClientIds } ) => (
 				<TemplatePartConverterMenuItem
 					clientIds={ selectedClientIds }
-					onClose={ onClose }
 				/>
 			) }
 		</BlockSettingsMenuControls>
 	);
 }
 
-function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
+function TemplatePartConverterMenuItem( { clientIds } ) {
 	const blocks = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlocksByClientId( clientIds ),
@@ -35,12 +34,7 @@ function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
 
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
-		return (
-			<ConvertToRegularBlocks
-				clientId={ clientIds[ 0 ] }
-				onClose={ onClose }
-			/>
-		);
+		return <ConvertToRegularBlocks clientId={ clientIds[ 0 ] } />;
 	}
 	return <ConvertToTemplatePart clientIds={ clientIds } blocks={ blocks } />;
 }