Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 22 commits into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 7 additions & 11 deletions docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down
5 changes: 0 additions & 5 deletions packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,

Expand Down Expand Up @@ -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,

Expand Down
14 changes: 1 addition & 13 deletions packages/block-editor/src/components/block-actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export default function BlockActions( {
getBlockRootClientId,
getBlocksByClientId,
getDirectInsertBlock,
canMoveBlocks,
canRemoveBlocks,
} = select( blockEditorStore );

Expand All @@ -44,7 +43,6 @@ export default function BlockActions( {
: null;

return {
canMove: canMoveBlocks( clientIds ),
canRemove: canRemoveBlocks( clientIds ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can users remove blocks in this mode?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know I updated this file because canMove and onMove are not used anymore by the components using BlockActions.

canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
canCopyStyles: blocks.every( ( block ) => {
Expand All @@ -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,
Expand All @@ -77,9 +74,6 @@ export default function BlockActions( {
insertAfterBlock,
insertBeforeBlock,
flashBlock,
setBlockMovingClientId,
setNavigationMode,
selectBlock,
} = useDispatch( blockEditorStore );

const notifyCopy = useNotifyCopy();
Expand All @@ -89,7 +83,6 @@ export default function BlockActions( {
canCopyStyles,
canDuplicate,
canInsertBlock,
canMove,
canRemove,
onDuplicate() {
return duplicateBlocks( clientIds, updateSelection );
Expand All @@ -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;
Expand Down
174 changes: 79 additions & 95 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,83 +40,36 @@ function BlockStylesPanel( { clientId } ) {
);
}

function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of creating a custom "inspector control" for "content only" mode (and similar), I refactored this component to reuse the same block inspector control component by passing a "isContentLockingParent" flag instead.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes everything easier to reason about 👍

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 ),
};
}, [] );

Expand All @@ -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 />
Expand Down Expand Up @@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
}
return null;
}
if ( topLevelLockedBlock ) {
return (
<BlockInspectorLockedBlocks
topLevelLockedBlock={ topLevelLockedBlock }
/>
);
}

return (
<BlockInspectorSingleBlockWrapper
Expand All @@ -219,6 +165,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
<BlockInspectorSingleBlock
clientId={ selectedBlockClientId }
blockName={ blockType.name }
isSectionBlock={ isSectionBlock }
/>
</BlockInspectorSingleBlockWrapper>
);
Expand Down Expand Up @@ -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 ) => {
Expand All @@ -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">
Expand All @@ -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" />
Expand Down
Loading
Loading