diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 475d4f6a4b8c2..dfc7fae478831 100644
--- 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 (
) }
- { contentClientIds && contentClientIds?.length > 0 && (
-
-
-
- ) }
+ { ! isSelectedContentClientIdControlling &&
+ contentClientIds &&
+ contentClientIds?.length > 0 && (
+
+
+
+ ) }
+
+ { isSelectedContentClientIdControlling &&
+ contentClientIds &&
+ contentClientIds?.length > 0 && (
+
+
+
+ ) }
{ ! isSectionBlock && (
<>
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index d7961bd6c02f3..a2b7ff80f072a 100644
--- 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
index 8a1ccfcede4c1..0980818b41828 100644
--- 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
index 525aca4c236cb..74630ef29d5db 100644
--- 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
index b09c3d3d01b16..7437ccd4036a3 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -3037,6 +3037,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
index 6fe3dd8347a33..e2534a20ed1bb 100644
--- 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,