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

ListView: Try showing blocks that are dragged (no longer hide them) #51724

Merged
merged 7 commits into from
Jun 23, 2023
Merged

ListView: Try showing blocks that are dragged (no longer hide them) #51724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
08fd5a3
ListView: Try showing blocks that are dragged, but with lower opacity
andrewserong Jun 21, 2023
3d265b1
Fix hover styling issue
andrewserong Jun 22, 2023
5b95777
Ensure we only override hover styles
andrewserong Jun 22, 2023
2abb7a3
Ensure the hover override only affects non-selected blocks
andrewserong Jun 22, 2023
7f6f37c
Re-instate opacity rule
andrewserong Jun 22, 2023
d2782bc
Fix issue with drop indicator in nested dragged blocks
andrewserong Jun 23, 2023
9339445
Remove opacity rule
andrewserong Jun 23, 2023
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
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/list-view/branch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ function ListViewBranch( props ) {
selectedClientIds,
level = 1,
path = '',
isBranchDragged = false,
isBranchSelected = false,
listPosition = 0,
fixedListWindow,
Expand Down Expand Up @@ -167,7 +168,8 @@ function ListViewBranch( props ) {
);
const isSelectedBranch =
isBranchSelected || ( isSelected && hasNestedBlocks );
const showBlock = isDragged || blockInView || isSelected;
const showBlock =
isDragged || blockInView || isSelected || isBranchDragged;
return (
<AsyncModeProvider key={ clientId } value={ ! isSelected }>
{ showBlock && (
Expand All @@ -176,7 +178,7 @@ function ListViewBranch( props ) {
selectBlock={ selectBlock }
isSelected={ isSelected }
isBranchSelected={ isSelectedBranch }
isDragged={ isDragged }
isDragged={ isDragged || isBranchDragged }
level={ level }
position={ position }
rowCount={ rowCount }
Expand All @@ -194,7 +196,7 @@ function ListViewBranch( props ) {
<td className="block-editor-list-view-placeholder" />
</tr>
) }
{ hasNestedBlocks && shouldExpand && ! isDragged && (
{ hasNestedBlocks && shouldExpand && (
<ListViewBranch
parentId={ clientId }
blocks={ innerBlocks }
Expand All @@ -205,6 +207,7 @@ function ListViewBranch( props ) {
listPosition={ nextPosition + 1 }
fixedListWindow={ fixedListWindow }
isBranchSelected={ isSelectedBranch }
isBranchDragged={ isDragged || isBranchDragged }
selectedClientIds={ selectedClientIds }
isExpanded={ isExpanded }
isSyncedBranch={ syncedBranch }
Expand Down
22 changes: 11 additions & 11 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@
}
}

&:not(.is-selected) .block-editor-list-view-block-select-button {
// While components are being dragged, ensure that hover styles are not applied.
// This resolves a bug where while dragging, the hover styles would be applied to
// the wrong list item while scrolling long lists, particularly in Chrome.
.is-dragging-components-draggable & {
&:hover {
color: inherit;
}
}
}

// The background has to be applied to the td, not tr, or border-radius won't work.
&.is-selected td {
background: var(--wp-admin-theme-color);
Expand All @@ -51,13 +62,6 @@
&.is-selected .components-button.has-icon {
color: $white;
}
&.is-selected .block-editor-list-view-block-contents {
// Hide selection styles while a user is dragging blocks/files etc.
.is-dragging-components-draggable & {
background: none;
color: $gray-900;
}
}
&.is-selected .block-editor-list-view-block-contents:focus {
&::after {
box-shadow:
Expand All @@ -76,10 +80,6 @@
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
}

&.is-dragging {
display: none;
}

// Border radius for corners of the selected item.
&.is-first-selected td:first-child {
border-top-left-radius: $radius-block-ui;
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,6 +434,8 @@ export default function useListViewDropZone( { dropZoneElement } ) {
const blocksData = blockElements.map( ( blockElement ) => {
const clientId = blockElement.dataset.block;
const isExpanded = blockElement.dataset.expanded === 'true';
const isDraggedBlock =
blockElement.classList.contains( 'is-dragging' );

// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
const nestingLevel = parseInt(
Expand All @@ -449,9 +451,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
blockIndex: getBlockIndex( clientId ),
element: blockElement,
nestingLevel: nestingLevel || undefined,
isDraggedBlock: isBlockDrag
? draggedBlockClientIds.includes( clientId )
: false,
isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
innerBlockCount: getBlockCount( clientId ),
canInsertDraggedBlocksAsSibling: isBlockDrag
? canInsertBlocks(
Expand Down