enable list view inspector control for controlling blocks in content …

…only mode
WordPress · Nov 11, 2024 · 3980b84 · 3980b84
1 parent 249c0cf
commit 3980b84
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -29,8 +29,10 @@ import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSett
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
 import { useBorderPanelLabel } from '../../hooks/border';
+import { privateApis as blockEditorPrivateApis } from '../../private-apis';
 
 import { unlock } from '../../lock-unlock';
+const { PrivateListView } = unlock( blockEditorPrivateApis );
 
 function BlockStylesPanel( { clientId } ) {
 	return (
@@ -223,6 +225,7 @@ const BlockInspectorSingleBlock = ( {
 		},
 		[ blockName ]
 	);
+
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 	const contentClientIds = useSelect(
@@ -246,6 +249,20 @@ const BlockInspectorSingleBlock = ( {
 		[ isSectionBlock, clientId ]
 	);
 
+	const { selectedContentClientId, isSelectedContentClientIdControlling } =
+		useSelect( ( select ) => {
+			const { getSelectedBlockClientId, areInnerBlocksControlled } =
+				select( blockEditorStore );
+
+			const _selectedBlockClientId = getSelectedBlockClientId();
+			return {
+				selectedContentClientId: _selectedBlockClientId,
+				isSelectedContentClientIdControlling: areInnerBlocksControlled(
+					_selectedBlockClientId
+				),
+			};
+		} );
+
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
@@ -268,13 +285,29 @@ const BlockInspectorSingleBlock = ( {
 						<BlockStylesPanel clientId={ clientId } />
 					) }
 
-					{ contentClientIds && contentClientIds?.length > 0 && (
-						<PanelBody title={ __( 'Content' ) }>
-							<BlockQuickNavigation
-								clientIds={ contentClientIds }
-							/>
-						</PanelBody>
-					) }
+					{ ! isSelectedContentClientIdControlling &&
+						contentClientIds &&
+						contentClientIds?.length > 0 && (
+							<PanelBody title={ __( 'Content' ) }>
+								<BlockQuickNavigation
+									clientIds={ contentClientIds }
+								/>
+							</PanelBody>
+						) }
+
+					{ isSelectedContentClientIdControlling &&
+						contentClientIds &&
+						contentClientIds?.length > 0 && (
+							<PanelBody title={ __( 'Content' ) }>
+								<PrivateListView
+									rootClientId={ selectedContentClientId }
+									ignoreRenderingMode
+									isExpanded
+									description={ __( 'Inner blocks' ) }
+									showAppender={ false }
+								/>
+							</PanelBody>
+						) }
 
 					{ ! isSectionBlock && (
 						<>

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -78,6 +78,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 32;
  * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
  * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
  * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.ignoreRenderingMode    Flag to ignore rendering mode and always show the block. Defaults to `false`.
  * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
  * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
  * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
@@ -93,6 +94,7 @@ function ListViewComponent(
 		dropZoneElement,
 		showBlockMovers = false,
 		isExpanded = false,
+		ignoreRenderingMode = false,
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
@@ -115,7 +117,7 @@ function ListViewComponent(
 
 	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( { blocks, rootClientId } );
+		useListViewClientIds( { blocks, rootClientId, ignoreRenderingMode } );
 	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
 	const { getBlock } = useSelect( blockEditorStore );

diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
@@ -10,22 +10,29 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-export default function useListViewClientIds( { blocks, rootClientId } ) {
+export default function useListViewClientIds( {
+	blocks,
+	rootClientId,
+	ignoreRenderingMode,
+} ) {
 	return useSelect(
 		( select ) => {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
 				getEnabledClientIdsTree,
+				__unstableGetClientIdsTree: getClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
 				clientIdsTree:
-					blocks ?? getEnabledClientIdsTree( rootClientId ),
+					blocks ?? ignoreRenderingMode
+						? getClientIdsTree( rootClientId )
+						: getEnabledClientIdsTree( rootClientId ),
 			};
 		},
-		[ blocks, rootClientId ]
+		[ blocks, rootClientId, ignoreRenderingMode ]
 	);
 }
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -90,6 +90,7 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 			state,
 			clientId
 		);
+
 		if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
 			result.push( { clientId, innerBlocks } );
 		} else {

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -3046,6 +3046,10 @@ export const getBlockEditingMode = createRegistrySelector(
 				clientId = '';
 			}
 
+			if ( areInnerBlocksControlled( state, clientId ) ) {
+				return 'contentOnly';
+			}
+
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.

diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -73,6 +73,11 @@ export default function NavigationInnerBlocks( {
 	const showPlaceholder =
 		! hasCustomPlaceholder && ! hasMenuItems && ! isSelected;
 
+	const defaultRenderingMode = useSelect( ( select ) => {
+		const { getBlockEditingMode } = select( blockEditorStore );
+		return getBlockEditingMode( clientId ) === 'default';
+	} );
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-navigation__container',
@@ -93,13 +98,14 @@ export default function NavigationInnerBlocks( {
 			// the sibling inserter.
 			// See https://github.com/WordPress/gutenberg/issues/37572.
 			renderAppender:
-				isSelected ||
+				defaultRenderingMode &&
+				( isSelected ||
 				( isImmediateParentOfSelectedBlock &&
 					! selectedBlockHasChildren ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender
-					: false,
+					: false ),
 			placeholder: showPlaceholder ? placeholder : undefined,
 			__experimentalCaptureToolbars: true,
 			__unstableDisableLayoutClassNames: true,