Patterns: Add edit pattern to the list view instead of Ungroup

packages/block-editor/src/components/block-inspector/edit-contents.js

@@ -2,40 +2,21 @@
  * WordPress dependencies
  */
 import { Button, __experimentalVStack as VStack } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
+import useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';
 
 export default function EditContents( { clientId } ) {
-	const { editContentOnlySection, stopEditingContentOnlySection } = unlock(
-		useDispatch( blockEditorStore )
-	);
-	const { isWithinSection, isWithinEditedSection, editedContentOnlySection } =
-		useSelect(
-			( select ) => {
-				const {
-					isSectionBlock,
-					getParentSectionBlock,
-					getEditedContentOnlySection,
-					isWithinEditedContentOnlySection,
-				} = unlock( select( blockEditorStore ) );
-
-				return {
-					isWithinSection:
-						isSectionBlock( clientId ) ||
-						!! getParentSectionBlock( clientId ),
-					isWithinEditedSection:
-						isWithinEditedContentOnlySection( clientId ),
-					editedContentOnlySection: getEditedContentOnlySection(),
-				};
-			},
-			[ clientId ]
-		);
+	const {
+		isWithinSection,
+		isWithinEditedSection,
+		editedContentOnlySection,
+		editContentOnlySection,
+		stopEditingContentOnlySection,
+	} = useContentOnlySectionEdit( clientId );
 
 	if ( ! isWithinSection && ! isWithinEditedSection ) {
 		return null;

packages/block-editor/src/components/block-settings-menu-controls/edit-pattern-menu-item.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useContentOnlySectionEdit from '../../hooks/use-content-only-section-edit';
+
+export function EditPatternMenuItem( { clientId, onClose } ) {
+	const {
+		isSectionBlock,
+		isEditingContentOnlySection,
+		editContentOnlySection,
+	} = useContentOnlySectionEdit( clientId );
+
+	// Only show when the experiment is enabled, the block is a section block,
+	// and we're not already editing it
+	if (
+		! window?.__experimentalContentOnlyPatternInsertion ||
+		! isSectionBlock ||
+		isEditingContentOnlySection
+	) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				editContentOnlySection( clientId );
+				onClose();
+			} }
+		>
+			{ _x( 'Edit pattern', 'Editing a pattern block in the Editor' ) }
+		</MenuItem>
+	);
+}

packages/block-editor/src/components/block-settings-menu-controls/index.js

@@ -22,6 +22,8 @@ import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
 import { BlockVisibilityMenuItem } from '../block-visibility';
+import { EditPatternMenuItem } from './edit-pattern-menu-item';
+import { unlock } from '../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
@@ -31,6 +33,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		selectedClientIds,
 		isContentOnly,
 		canToggleSelectedBlocksVisibility,
+		isSectionBlock,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -39,6 +42,9 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				getSelectedBlockClientIds,
 				getBlockEditingMode,
 			} = select( blockEditorStore );
+			const { isSectionBlock: _isSectionBlock } = unlock(
+				select( blockEditorStore )
+			);
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
@@ -51,6 +57,8 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				).every( ( block ) =>
 					hasBlockSupport( block.name, 'blockVisibility', true )
 				),
+				isSectionBlock:
+					ids.length === 1 ? _isSectionBlock( ids[ 0 ] ) : false,
 			};
 		},
 		[ clientIds ]
@@ -70,8 +78,17 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const convertToGroupButtonProps =
 		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
+
+	// Don't show ungroup for section blocks when the experiment is enabled
+	// since we show "Unlock design" instead
+	const shouldShowUngroup =
+		isUngroupable &&
+		! (
+			isSectionBlock && window?.__experimentalContentOnlyPatternInsertion
+		);
+
 	const showConvertToGroupButton =
-		( isGroupable || isUngroupable ) && ! isContentOnly;
+		( isGroupable || shouldShowUngroup ) && ! isContentOnly;
 
 	return (
 		<Slot
@@ -95,6 +112,13 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 						{ showConvertToGroupButton && (
 							<ConvertToGroupButton
 								{ ...convertToGroupButtonProps }
+								isUngroupable={ shouldShowUngroup }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
+						{ selectedClientIds.length === 1 && (
+							<EditPatternMenuItem
+								clientId={ selectedClientIds[ 0 ] }
 								onClose={ fillProps?.onClose }
 							/>
 						) }

packages/block-editor/src/hooks/use-content-only-section-edit.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Hook that provides section block editing state and actions.
+ *
+ * @param {string} clientId Block client ID.
+ * @return {Object} Object containing section block state and actions.
+ */
+export default function useContentOnlySectionEdit( clientId ) {
+	const {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+	} = useSelect(
+		( select ) => {
+			const {
+				isSectionBlock: _isSectionBlock,
+				getParentSectionBlock,
+				getEditedContentOnlySection,
+				isWithinEditedContentOnlySection,
+			} = unlock( select( blockEditorStore ) );
+
+			const editedSection = getEditedContentOnlySection();
+
+			return {
+				isSectionBlock: _isSectionBlock( clientId ),
+				isWithinSection:
+					_isSectionBlock( clientId ) ||
+					!! getParentSectionBlock( clientId ),
+				isWithinEditedSection:
+					isWithinEditedContentOnlySection( clientId ),
+				isEditingContentOnlySection: editedSection === clientId,
+				editedContentOnlySection: editedSection,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockEditorActions = useDispatch( blockEditorStore );
+	const { editContentOnlySection, stopEditingContentOnlySection } =
+		unlock( blockEditorActions );
+
+	return {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+		editContentOnlySection,
+		stopEditingContentOnlySection,
+	};
+}