Skip to content

Commit

Permalink
Grid Interactivity: Fix block mover layout and styles (#64021)
Browse files Browse the repository at this point in the history 
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: noisysocks <[email protected]>
  • Loading branch information
@t-hamano @noisysocks
3 people authored Jul 30, 2024
1 parent a051fe7 commit dcd0bcd
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 55 deletions.
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/block-mover/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,11 @@ function BlockMover( {
[ clientIds ]
);

if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
if (
! canMove ||
( isFirst && isLast && ! rootClientId ) ||
( hideDragHandle && isManualGrid )
) {
return null;
}

Expand Down
90 changes: 46 additions & 44 deletions packages/block-editor/src/components/grid/grid-item-movers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,28 +55,29 @@ export function GridItemMovers( {
return (
<BlockControls group="parent">
<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
<GridItemMover
className="is-left-button"
icon={ chevronLeft }
label={ __( 'Move left' ) }
description={ __( 'Move left' ) }
isDisabled={ columnStart <= 1 }
onClick={ () => {
onChange( {
columnStart: columnStart - 1,
} );
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[ blockClientId ],
gridClientId,
gridClientId,
getNumberOfBlocksBeforeCell(
columnStart - 1,
rowStart
)
);
} }
/>
<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
<GridItemMover
icon={ chevronLeft }
label={ __( 'Move left' ) }
description={ __( 'Move left' ) }
isDisabled={ columnStart <= 1 }
onClick={ () => {
onChange( {
columnStart: columnStart - 1,
} );
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[ blockClientId ],
gridClientId,
gridClientId,
getNumberOfBlocksBeforeCell(
columnStart - 1,
rowStart
)
);
} }
/>
</div>
<div className="block-editor-grid-item-mover__move-vertical-button-container">
<GridItemMover
className="is-up-button"
Expand Down Expand Up @@ -123,28 +124,29 @@ export function GridItemMovers( {
} }
/>
</div>
<GridItemMover
className="is-right-button"
icon={ chevronRight }
label={ __( 'Move right' ) }
description={ __( 'Move right' ) }
isDisabled={ columnCount && columnEnd >= columnCount }
onClick={ () => {
onChange( {
columnStart: columnStart + 1,
} );
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[ blockClientId ],
gridClientId,
gridClientId,
getNumberOfBlocksBeforeCell(
columnStart + 1,
rowStart
)
);
} }
/>
<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
<GridItemMover
icon={ chevronRight }
label={ __( 'Move right' ) }
description={ __( 'Move right' ) }
isDisabled={ columnCount && columnEnd >= columnCount }
onClick={ () => {
onChange( {
columnStart: columnStart + 1,
} );
__unstableMarkNextChangeAsNotPersistent();
moveBlocksToPosition(
[ blockClientId ],
gridClientId,
gridClientId,
getNumberOfBlocksBeforeCell(
columnStart + 1,
rowStart
)
);
} }
/>
</div>
</ToolbarGroup>
</BlockControls>
);
Expand Down
70 changes: 60 additions & 10 deletions packages/block-editor/src/components/grid/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@
.block-editor-grid-item-mover-button {
width: $block-toolbar-height * 0.5;
min-width: 0 !important; // overrides default button width.
overflow: hidden;
padding-left: 0;
padding-right: 0;

Expand Down Expand Up @@ -155,7 +154,7 @@
justify-content: space-around;

> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
height: $block-toolbar-height * 0.5 - $grid-unit-05;
height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
width: 100%;
min-width: 0 !important; // overrides default button width.

Expand All @@ -173,18 +172,53 @@
}
}

.editor-collapsible-block-toolbar {
.block-editor-grid-item-mover__move-vertical-button-container {
// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
@include break-small() {
height: $grid-unit-50;
position: relative;
top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
}
}
}

.show-icon-labels {

.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
border-right: 1px solid $gray-700;
padding-right: 12px;
}
.block-editor-grid-item-mover__move-horizontal-button-container {
position: relative;

.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
border-left: 1px solid $gray-700;
padding-left: 12px;
}
&::before {
@include break-small() {
content: "";
height: 100%;
width: $border-width;
background: $gray-200;
position: absolute;
top: 0;
}

@include break-medium() {
background: $gray-900;
}
}

&.is-left {
padding-right: 6px;

&::before {
right: 0;
}
}

&.is-right {
padding-left: 6px;

&::before {
left: 0;
}
}
}

.block-editor-grid-item-mover__move-vertical-button-container {
&::before {
Expand All @@ -208,5 +242,21 @@
}
}

.block-editor-grid-item-mover-button {
white-space: nowrap;
}

.editor-collapsible-block-toolbar {
.block-editor-grid-item-mover__move-horizontal-button-container::before {
height: $grid-unit-30;
background: $gray-300;
top: $grid-unit-05;
}

.block-editor-grid-item-mover__move-vertical-button-container::before {
background: $gray-300;
width: calc(100% - #{$grid-unit-30});
}
}
}

0 comments on commit dcd0bcd

Please sign in to comment.