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,