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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 22 commits into from
Sep 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
32b3ed8
Select Mode: Use the content-only behavior in select mode
youknowriad Sep 10, 2024
fd0007a
Remove some navigation mode leftovers
youknowriad Sep 10, 2024
6150855
Remove memoization
youknowriad Sep 10, 2024
ea2e6d9
Remove block moving mode
youknowriad Sep 11, 2024
e7d306a
Fix unit tests
youknowriad Sep 11, 2024
8a954af
Fix e2e tests
youknowriad Sep 11, 2024
596aff7
Change wording in the tool selector
youknowriad Sep 11, 2024
a80d1f3
Allow selection of sections
getdave Sep 17, 2024
ac9f416
Avoid unnecessary subscriptions
getdave Sep 17, 2024
f3d104d
Untangle section blocks and content only parents
youknowriad Sep 17, 2024
a0df8e3
Support block highlighting
youknowriad Sep 18, 2024
0ae55fe
Fix canInsertBlockType dependents
youknowriad Sep 18, 2024
51c2c81
Hide appender in section blocks
youknowriad Sep 18, 2024
330efd3
Disallow inserting blocks within sections
youknowriad Sep 18, 2024
3eaf070
Update components changelog
youknowriad Sep 18, 2024
7ed6c44
Fix and add unit tests
youknowriad Sep 18, 2024
cf9cedf
Allow inserting blocks within the sections root container in navigati…
youknowriad Sep 18, 2024
be0afbc
Fix block settings menu
youknowriad Sep 18, 2024
96642a6
Remove debug code
youknowriad Sep 18, 2024
f1954d3
Blocks within sections shouldn't be removable
youknowriad Sep 18, 2024
2084336
Small fixes per review
youknowriad Sep 19, 2024
a783818
Add condition to break the loop
youknowriad Sep 19, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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