Select Mode: Use the content-only behavior in select mode

docs/reference-guides/data/data-core-block-editor.md

@@ -857,15 +857,9 @@ _Returns_
 
 ### hasBlockMovingClientId
 
-Returns whether block moving mode is enabled.
-
-_Parameters_
-
-- _state_ `Object`: Editor state.
-
-_Returns_
+> **Deprecated**
 
-- `string`: Client Id of moving block.
+Returns whether block moving mode is enabled.
 
 ### hasDraggedInnerBlock
 
@@ -1661,11 +1655,13 @@ _Returns_
 
 ### setBlockMovingClientId
 
-Action that enables or disables the block moving mode.
+> **Deprecated**
 
-_Parameters_
+Set the block moving client ID.
 
-- _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
+_Returns_
+
+- `Object`: Action object.
 
 ### setBlockVisibility
 

packages/base-styles/_z-index.scss

@@ -8,7 +8,6 @@ $z-layers: (
  ".block-editor-block-switcher__arrow": 1,
  ".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
  ".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
- ".block-editor-block-list__block-selection-button": 22,
  ".components-form-toggle__input": 1,
  ".editor-text-editor__toolbar": 1,
 
@@ -70,10 +69,6 @@ $z-layers: (
  // Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
  ".block-editor-global-styles-background-panel__popover": 159900 - 10,
 
- // Small screen inner blocks overlay must be displayed above drop zone,
- // settings menu, and movers.
- ".block-editor-block-list__layout.has-overlay::after": 60,
-
  // The toolbar, when contextual, should be above any adjacent nested block click overlays.
  ".block-editor-block-contextual-toolbar": 61,
 

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

@@ -29,7 +29,6 @@ export default function BlockActions( {
  getBlockRootClientId,
  getBlocksByClientId,
  getDirectInsertBlock,
- canMoveBlocks,
  canRemoveBlocks,
  } = select( blockEditorStore );
 
@@ -44,7 +43,6 @@ export default function BlockActions( {
  : null;
 
  return {
- canMove: canMoveBlocks( clientIds ),
  canRemove: canRemoveBlocks( clientIds ),
  canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
  canCopyStyles: blocks.every( ( block ) => {
@@ -67,8 +65,7 @@ export default function BlockActions( {
  );
  const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
- const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
- selected;
+ const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
  const {
  removeBlocks,
@@ -77,9 +74,6 @@ export default function BlockActions( {
  insertAfterBlock,
  insertBeforeBlock,
  flashBlock,
- setBlockMovingClientId,
- setNavigationMode,
- selectBlock,
  } = useDispatch( blockEditorStore );
 
  const notifyCopy = useNotifyCopy();
@@ -89,7 +83,6 @@ export default function BlockActions( {
  canCopyStyles,
  canDuplicate,
  canInsertBlock,
- canMove,
  canRemove,
  onDuplicate() {
  return duplicateBlocks( clientIds, updateSelection );
@@ -103,11 +96,6 @@ export default function BlockActions( {
  onInsertAfter() {
  insertAfterBlock( clientIds[ clientIds.length - 1 ] );
  },
- onMoveTo() {
- setNavigationMode( true );
- selectBlock( clientIds[ 0 ] );
- setBlockMovingClientId( clientIds[ 0 ] );
- },
  onGroup() {
  if ( ! clientIds.length ) {
  return;

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

@@ -40,83 +40,36 @@ function BlockStylesPanel( { clientId } ) {
  );
 }
 
-function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
- const contentClientIds = useSelect(
- ( select ) => {
- const {
- getClientIdsOfDescendants,
- getBlockName,
- getBlockEditingMode,
- } = select( blockEditorStore );
- return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
- ( clientId ) =>
- getBlockName( clientId ) !== 'core/list-item' &&
- getBlockEditingMode( clientId ) === 'contentOnly'
- );
- },
- [ topLevelLockedBlock ]
- );
- const hasBlockStyles = useSelect(
- ( select ) => {
- const { getBlockName } = select( blockEditorStore );
- const { getBlockStyles } = select( blocksStore );
- return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
- ?.length;
- },
- [ topLevelLockedBlock ]
- );
- const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
- return (
- <div className="block-editor-block-inspector">
- <BlockCard
- { ...blockInformation }
- className={ blockInformation.isSynced && 'is-synced' }
- />
- <BlockInfo.Slot />
- { hasBlockStyles && (
- <BlockStylesPanel clientId={ topLevelLockedBlock } />
- ) }
- { contentClientIds.length > 0 && (
- <PanelBody title={ __( 'Content' ) }>
- <BlockQuickNavigation clientIds={ contentClientIds } />
- </PanelBody>
- ) }
- </div>
- );
-}
-
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
  const {
  count,
  selectedBlockName,
  selectedBlockClientId,
  blockType,
- topLevelLockedBlock,
+ isSectionBlock,
  } = useSelect( ( select ) => {
  const {
  getSelectedBlockClientId,
  getSelectedBlockCount,
  getBlockName,
- getContentLockingParent,
- getTemplateLock,
+ getParentSectionBlock,
+ isSectionBlock: _isSectionBlock,
  } = unlock( select( blockEditorStore ) );
  const _selectedBlockClientId = getSelectedBlockClientId();
+ const renderedBlockClientId =
+ getParentSectionBlock( _selectedBlockClientId ) ||
+ getSelectedBlockClientId();
  const _selectedBlockName =
- _selectedBlockClientId && getBlockName( _selectedBlockClientId );
+ renderedBlockClientId && getBlockName( renderedBlockClientId );
  const _blockType =
  _selectedBlockName && getBlockType( _selectedBlockName );
 
  return {
  count: getSelectedBlockCount(),
- selectedBlockClientId: _selectedBlockClientId,
+ selectedBlockClientId: renderedBlockClientId,
  selectedBlockName: _selectedBlockName,
  blockType: _blockType,
- topLevelLockedBlock:
- getContentLockingParent( _selectedBlockClientId ) ||
- ( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
- _selectedBlockName === 'core/block'
- ? _selectedBlockClientId
- : undefined ),
+ isSectionBlock: _isSectionBlock( renderedBlockClientId ),
  };
  }, [] );
 
@@ -136,7 +89,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
  blockName: selectedBlockName,
  } );
 
- if ( count > 1 ) {
+ if ( count > 1 && ! isSectionBlock ) {
  return (
  <div className="block-editor-block-inspector">
  <MultiSelectionInspector />
@@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
  }
  return null;
  }
- if ( topLevelLockedBlock ) {
- return (
- <BlockInspectorLockedBlocks
- topLevelLockedBlock={ topLevelLockedBlock }
- />
- );
- }
 
  return (
  <BlockInspectorSingleBlockWrapper
@@ -219,6 +165,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
  <BlockInspectorSingleBlock
  clientId={ selectedBlockClientId }
  blockName={ blockType.name }
+ isSectionBlock={ isSectionBlock }
  />
  </BlockInspectorSingleBlockWrapper>
  );
@@ -260,9 +207,13 @@ const AnimatedContainer = ( {
  );
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+ clientId,
+ blockName,
+ isSectionBlock,
+} ) => {
  const availableTabs = useInspectorControlsTabs( blockName );
- const showTabs = availableTabs?.length > 1;
+ const showTabs = ! isSectionBlock && availableTabs?.length > 1;
 
  const hasBlockStyles = useSelect(
  ( select ) => {
@@ -274,6 +225,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
  );
  const blockInformation = useBlockDisplayInformation( clientId );
  const borderPanelLabel = useBorderPanelLabel( { blockName } );
+ const contentClientIds = useSelect(
+ ( select ) => {
+ // Avoid unnecessary subscription.
+ if ( ! isSectionBlock ) {
+ return;
+ }
+
+ const {
+ getClientIdsOfDescendants,
+ getBlockName,
+ getBlockEditingMode,
+ } = select( blockEditorStore );
+ return getClientIdsOfDescendants( clientId ).filter(
+ ( current ) =>
+ getBlockName( current ) !== 'core/list-item' &&
+ getBlockEditingMode( current ) === 'contentOnly'
+ );
+ },
+ [ isSectionBlock, clientId ]
+ );
 
  return (
  <div className="block-editor-block-inspector">
@@ -296,35 +267,48 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
  { hasBlockStyles && (
  <BlockStylesPanel clientId={ clientId } />
  ) }
- <InspectorControls.Slot />
- <InspectorControls.Slot group="list" />
- <InspectorControls.Slot
- group="color"
- label={ __( 'Color' ) }
- className="color-block-support-panel__inner-wrapper"
- />
- <InspectorControls.Slot
- group="background"
- label={ __( 'Background image' ) }
- />
- <InspectorControls.Slot
- group="typography"
- label={ __( 'Typography' ) }
- />
- <InspectorControls.Slot
- group="dimensions"
- label={ __( 'Dimensions' ) }
- />
- <InspectorControls.Slot
- group="border"
- label={ borderPanelLabel }
- />
- <InspectorControls.Slot group="styles" />
- <PositionControls />
- <InspectorControls.Slot group="bindings" />
- <div>
- <AdvancedControls />
- </div>
+
+ { contentClientIds && contentClientIds?.length > 0 && (
+ <PanelBody title={ __( 'Content' ) }>
+ <BlockQuickNavigation
+ clientIds={ contentClientIds }
+ />
+ </PanelBody>
+ ) }
+
+ { ! isSectionBlock && (
+ <>
+ <InspectorControls.Slot />
+ <InspectorControls.Slot group="list" />
+ <InspectorControls.Slot
+ group="color"
+ label={ __( 'Color' ) }
+ className="color-block-support-panel__inner-wrapper"
+ />
+ <InspectorControls.Slot
+ group="background"
+ label={ __( 'Background image' ) }
+ />
+ <InspectorControls.Slot
+ group="typography"
+ label={ __( 'Typography' ) }
+ />
+ <InspectorControls.Slot
+ group="dimensions"
+ label={ __( 'Dimensions' ) }
+ />
+ <InspectorControls.Slot
+ group="border"
+ label={ borderPanelLabel }
+ />
+ <InspectorControls.Slot group="styles" />
+ <PositionControls />
+ <InspectorControls.Slot group="bindings" />
+ <div>
+ <AdvancedControls />
+ </div>
+ </>
+ ) }
  </>
  ) }
  <SkipToSelectedBlock key="back" />