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

Show movers next to block switcher #22673

Merged
merged 15 commits into from
Jun 9, 2020
Merged

Show movers next to block switcher #22673

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9e22137
Initial work on unhiding movers.
jasmussen May 27, 2020
5eaf7cd
Make parent button 48x48
jasmussen May 28, 2020
b12f5c2
Handle focus styles.
jasmussen May 28, 2020
ea8f2a2
Horizontal mover polish.
jasmussen May 28, 2020
593240b
Polish drag and drop.
jasmussen May 28, 2020
368a566
Fix issue with just one block.
jasmussen May 29, 2020
b654825
Small refactor.
jasmussen May 29, 2020
c561d70
Switcher + Movers draggable
youknowriad May 29, 2020
9cb984b
Update syntax.
jasmussen May 29, 2020
fd18667
Move the dragging handle to the block toolbar styles.
jasmussen May 29, 2020
1ecb964
specific block clone className
youknowriad May 29, 2020
d0bb0bb
Fix centering when lonesome.
jasmussen May 29, 2020
27e548a
Fix tab-order test
jasmussen Jun 3, 2020
ffe28be
Simplify handle positioning variables.
Jun 8, 2020
cce712f
Remove rounding on drop target.
Jun 8, 2020
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
Next Next commit
Initial work on unhiding movers.
  • Loading branch information
@jasmussen
jasmussen authored and Joen Asmussen committed Jun 8, 2020
commit 9e22137ed9c2b39ffb32249ede55d0d1f9211c26
33 changes: 33 additions & 0 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,39 @@
.block-editor-block-toolbar .components-toolbar {
border-right-color: $dark-gray-primary;
}

// Adjust the mover control to fit as a unit next to the block switcher.
.block-editor-block-switcher {
.components-toolbar {
border-right-color: transparent;
}
}
.block-editor-block-mover {
margin-left: -$grid-unit-15;
width: $button-size;

// Needs specificity to override a first-child rule.
.components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button {
min-width: $button-size;
width: $button-size;

> svg {
margin-left: 2px;
}

&.is-up-button svg {
margin-top: 3px;
}

&.is-down-button svg {
margin-bottom: 3px;
}

&:focus::before {
left: 0 !important;
}
}
}
}


Expand Down
28 changes: 6 additions & 22 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
const shouldShowVisualToolbar = isValid && mode === 'visual';
const isMultiToolbar = blockClientIds.length > 1;

const animatedMoverStyles = {
opacity: shouldShowMovers ? 1 : 0,
transform: shouldShowMovers ? 'translateX(0px)' : 'translateX(100%)',
};

const classes = classnames(
'block-editor-block-toolbar',
shouldShowMovers && 'is-showing-movers',
! displayHeaderToolbar && 'has-responsive-movers'
);

return (
Expand All @@ -119,22 +113,6 @@ export default function BlockToolbar( { hideDragHandle } ) {
</div>
) }

<div
className="block-editor-block-toolbar__mover-trigger-container"
{ ...showMoversGestures }
>
<div
className="block-editor-block-toolbar__mover-trigger-wrapper"
style={ animatedMoverStyles }
>
<BlockMover
clientIds={ blockClientIds }
__experimentalOrientation={ moverDirection }
hideDragHandle={ hideDragHandle }
/>
</div>
</div>

{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
<div
{ ...showMoversGestures }
Expand All @@ -143,6 +121,12 @@ export default function BlockToolbar( { hideDragHandle } ) {
<BlockSwitcher clientIds={ blockClientIds } />
</div>
) }

<BlockMover
clientIds={ blockClientIds }
__experimentalOrientation={ moverDirection }
hideDragHandle={ hideDragHandle }
/>
</div>

{ shouldShowVisualToolbar && ! isMultiToolbar && (
Expand Down
38 changes: 3 additions & 35 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,41 +95,9 @@
.block-editor-block-switcher {
display: block;
}
}

.block-editor-block-toolbar.has-responsive-movers {
.block-editor-block-toolbar__mover-trigger-container {
@include break-medium() {
bottom: -1px;
left: -1px;
position: absolute;
top: -1px;
transform: translateX(-48px);
user-select: none;
}
}

// Explicitly color the background of the switcher to "cover" the mover control as it animates out.
.block-editor-block-toolbar__block-switcher-wrapper {
background: $white;
border-left: $border-width solid;
border-radius: 0 0 $radius-block-ui $radius-block-ui;
position: relative;
z-index: 1;
margin-left: -$border-width;
}

.block-editor-block-toolbar__mover-trigger-wrapper:not(:empty) {
@include break-medium() {
background-color: $white;
border: 1px solid $black;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border-right: none;
height: 100%;
transition: all 60ms linear;
}

@include reduce-motion("transition");
// Show this together with the mover as one group.
.components-toolbar-group {
border-right: none;
}
}