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

Drop patterns and blocks between sections only in zoom out mode #60828

Merged
merged 4 commits into from
Apr 22, 2024
Merged

Drop patterns and blocks between sections only in zoom out mode #60828

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
440e289
in zoom out mode remove the drop zone for the sections
draganescu Apr 17, 2024
83b7572
Update packages/block-editor/src/components/inner-blocks/index.js
draganescu Apr 22, 2024
50c0e2e
Update packages/block-editor/src/components/inner-blocks/index.js
draganescu Apr 22, 2024
7a372d1
Update packages/block-editor/src/components/inner-blocks/index.js
draganescu Apr 22, 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
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/inner-blocks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,8 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
getBlockEditingMode,
getBlockSettings,
isDragging,
getSettings,
getBlockOrder,
} = unlock( select( blockEditorStore ) );
const { hasBlockSupport, getBlockType } = select( blocksStore );
const blockName = getBlockName( clientId );
Expand All @@ -212,6 +214,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
const blockEditingMode = getBlockEditingMode( clientId );
const parentClientId = getBlockRootClientId( clientId );
const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );

// In zoom out mode, we want to disable the drop zone for the sections.
// The inner blocks belonging to the section drop zone is
// already disabled by the blocks themselves being disabled.
let _isDropZoneDisabled = blockEditingMode === 'disabled';
if ( __unstableGetEditorMode() === 'zoom-out' ) {
const { sectionRootClientId } = unlock( getSettings() );
const sectionsClientIds = getBlockOrder( sectionRootClientId );
_isDropZoneDisabled = sectionsClientIds?.includes( clientId );
Copy link
Member

Choose a reason for hiding this comment

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

I thought we changed the block editing mode to account for this? Why do we need to change it here as well? Is this a bug? https://github.com/WordPress/gutenberg/pull/59249/files#diff-aa92c48095c35f17feb834dd919baf52274a73c7b1180ff5acce7b6087b126cfR2923

Copy link
Contributor Author

@draganescu draganescu Apr 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I wondered the same.

In that file we disable all blocks that are NOT sections, NOT the container (content only), not the block root (disabled). The sections are default. So that means, we need to manually disable the drop zone for each section because the mode is default.

It's easy to see in trunk: one can drop just at immediate 1st level of a pattern but not in nested block levels.

Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't we disable the section blocks?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

we can't select them if they're disabled.

Copy link
Member

Choose a reason for hiding this comment

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

🤔 if you disable a block you should still be able to select it? For what use case does it behave that way? If you want to disable selection, you should disable the whole block list imo

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We do disable the whole block list if there is a section root.
So the case is:

  • the elements outside the section root should not be selectable
  • the section root should not be selectable
  • the 1st children (sections) of the section root should be selectable
  • anything inside the sections should not be selectable

This is what this code accomplishes.

if you disable a block you should still be able to select it?

See #51148 how it specifically "Disable selection (using user-select: none) in disabled blocks."

}

return {
__experimentalCaptureToolbars: hasBlockSupport(
blockName,
Expand All @@ -228,7 +241,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
blockType: getBlockType( blockName ),
parentLock: getTemplateLock( parentClientId ),
parentClientId,
isDropZoneDisabled: blockEditingMode === 'disabled',
isDropZoneDisabled: _isDropZoneDisabled,
defaultLayout,
};
},
Expand Down
Loading