Experiment: Add content only block controls to Inspector Panel

lib/experimental/editor-settings.php

@@ -37,6 +37,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-editor-write-mode', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEditorWriteMode = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-content-only-pattern-insertion', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalContentOnlyPatternInsertion = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -199,6 +199,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-content-only-pattern-insertion',
+		__( 'contentOnly: Make patterns contentOnly by default upon insertion', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'When patterns are inserted, default to a simplified content only mode for editing pattern content.', 'gutenberg' ),
+			'id'    => 'gutenberg-content-only-pattern-insertion',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/autocompleters/block.js

@@ -3,9 +3,9 @@
  */
 import { useSelect } from '@wordpress/data';
 import {
+	cloneBlock,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
-	parse,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
@@ -125,21 +125,16 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const {
-				name,
-				initialAttributes,
-				innerBlocks,
-				syncStatus,
-				content,
-			} = inserterItem;
+			const { name, initialAttributes, innerBlocks, syncStatus, blocks } =
+				inserterItem;
 
 			return {
 				action: 'replace',
 				value:
 					syncStatus === 'unsynced'
-						? parse( content, {
-								__unstableSkipMigrationLogs: true,
-						  } )
+						? ( blocks ?? [] ).map( ( block ) =>
+								cloneBlock( block )
+						  )
 						: createBlock(
 								name,
 								initialAttributes,

packages/block-editor/src/components/block-inspector/index.js

@@ -28,6 +28,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
+import ContentOnlyControls from '../content-only-controls';
 
 import { unlock } from '../../lock-unlock';
 
@@ -264,11 +265,20 @@ const BlockInspectorSingleBlock = ( {
 					) }
 
 					{ contentClientIds && contentClientIds?.length > 0 && (
-						<PanelBody title={ __( 'Content' ) }>
-							<BlockQuickNavigation
-								clientIds={ contentClientIds }
-							/>
-						</PanelBody>
+						<>
+							{ ! window?.__experimentalContentOnlyPatternInsertion && (
+								<PanelBody title={ __( 'Content' ) }>
+									<BlockQuickNavigation
+										clientIds={ contentClientIds }
+									/>
+								</PanelBody>
+							) }
+							{ window?.__experimentalContentOnlyPatternInsertion && (
+								<ContentOnlyControls
+									clientIds={ contentClientIds }
+								/>
+							) }
+						</>
 					) }
 
 					{ ! isSectionBlock && (

packages/block-editor/src/components/block-switcher/index.js

@@ -30,6 +30,7 @@ import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { unlock } from '../../lock-unlock';
 
 function BlockSwitcherDropdownMenuContents( {
 	onClose,
@@ -196,6 +197,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		isReusable,
 		isTemplate,
 		isDisabled,
+		isSection,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -204,7 +206,8 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				getBlockAttributes,
 				canRemoveBlocks,
 				getBlockEditingMode,
-			} = select( blockEditorStore );
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const _blocks = getBlocksByClientId( clientIds );
@@ -250,6 +253,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
 				isDisabled: editingMode !== 'default',
+				isSection: isSectionBlock( clientIds[ 0 ] ),
 			};
 		},
 		[ clientIds ]
@@ -278,7 +282,10 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			? blockTitle
 			: undefined;
 
+	const hideTransformsForSections =
+		window?.__experimentalContentOnlyPatternInsertion && isSection;
 	const hideDropdown =
+		hideTransformsForSections ||
 		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
 		hasContentOnlyLocking;

packages/block-editor/src/components/block-toolbar/index.js

@@ -128,6 +128,16 @@ export function PrivateBlockToolbar( {
 
 		const _isZoomOut = isZoomOut();
 
+		// The switch style button appears more prominently with the
+		// content only pattern experiment.
+		const _showSwitchSectionStyleButton =
+			window?.__experimentalContentOnlyPatternInsertion
+				? _isZoomOut || isSectionBlock( selectedBlockClientId )
+				: _isZoomOut ||
+				  ( isNavigationModeEnabled &&
+						editingMode === 'contentOnly' &&
+						isSectionBlock( selectedBlockClientId ) );
+
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
@@ -153,11 +163,7 @@ export function PrivateBlockToolbar( {
 			showSlots: ! _isZoomOut,
 			showGroupButtons: ! _isZoomOut,
 			showLockButtons: ! _isZoomOut,
-			showSwitchSectionStyleButton:
-				_isZoomOut ||
-				( isNavigationModeEnabled &&
-					editingMode === 'contentOnly' &&
-					isSectionBlock( selectedBlockClientId ) ), // Zoom out or Write Mode Section Blocks
+			showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
 			hasFixedToolbar: getSettings().hasFixedToolbar,
 			isNavigationMode: isNavigationModeEnabled,
 		};

packages/block-editor/src/components/block-variation-transforms/index.js

@@ -139,32 +139,40 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly } = useSelect(
-		( select ) => {
-			const { getActiveBlockVariation, getBlockVariations } =
-				select( blocksStore );
-
-			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
-				select( blockEditorStore );
-
-			const name = blockClientId && getBlockName( blockClientId );
-
-			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
-			const isContentBlock = hasContentRoleAttribute( name );
-
-			return {
-				activeBlockVariation: getActiveBlockVariation(
-					name,
-					getBlockAttributes( blockClientId )
-				),
-				variations: name && getBlockVariations( name, 'transform' ),
-				isContentOnly:
-					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
-					! isContentBlock,
-			};
-		},
-		[ blockClientId ]
-	);
+	const { activeBlockVariation, variations, isContentOnly, isSection } =
+		useSelect(
+			( select ) => {
+				const { getActiveBlockVariation, getBlockVariations } =
+					select( blocksStore );
+
+				const {
+					getBlockName,
+					getBlockAttributes,
+					getBlockEditingMode,
+					isSectionBlock,
+				} = unlock( select( blockEditorStore ) );
+
+				const name = blockClientId && getBlockName( blockClientId );
+
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContentBlock = hasContentRoleAttribute( name );
+
+				return {
+					activeBlockVariation: getActiveBlockVariation(
+						name,
+						getBlockAttributes( blockClientId )
+					),
+					variations: name && getBlockVariations( name, 'transform' ),
+					isContentOnly:
+						getBlockEditingMode( blockClientId ) ===
+							'contentOnly' && ! isContentBlock,
+					isSection: isSectionBlock( blockClientId ),
+				};
+			},
+			[ blockClientId ]
+		);
 
 	const selectedValue = activeBlockVariation?.name;
 
@@ -189,7 +197,10 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	if ( ! variations?.length || isContentOnly ) {
+	const hideVariationsForSections =
+		window?.__experimentalContentOnlyPatternInsertion && isSection;
+
+	if ( ! variations?.length || isContentOnly || hideVariationsForSections ) {
 		return null;
 	}