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
36 changes: 16 additions & 20 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 @@ -105,24 +105,20 @@
}

// Show a draggable handle when you're dragging using the toolbar component.
.block-editor-block-toolbar__drag-clone {
margin-top: -$block-toolbar-height; // This puts it closer to the drag handle.

&::before {
content: "";
display: block;
position: absolute;
top: 0;
width: $button-size * 2;
height: $block-toolbar-height;
border-radius: $radius-block-ui;
background-color: $dark-gray-primary;
border: $border-width solid $dark-gray-primary;

// This should be reconsidered if successful.
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-size: $icon-size;
background-repeat: no-repeat;
background-position: center center;
}
.block-editor-block-toolbar__drag-clone::before {
content: "";
display: block;
position: absolute;
top: -$block-toolbar-height - $grid-unit-15;
width: $button-size * 2;
height: $block-toolbar-height;
border-radius: $radius-block-ui;
background-color: $dark-gray-primary;
border: $border-width solid $dark-gray-primary;

// This should be reconsidered if successful.
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMTYuNWgxMFYxNUg3djEuNXptMC05VjloMTBWNy41SDd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
background-size: $icon-size;
background-repeat: no-repeat;
background-position: center center;
}
2 changes: 1 addition & 1 deletion packages/components/src/draggable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { withSafeTimeout } from '@wordpress/compose';
const dragImageClass = 'components-draggable__invisible-drag-image';
const cloneWrapperClass = 'components-draggable__clone';
const cloneHeightTransformationBreakpoint = 700;
const clonePadding = 20;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These 20 appear to have been picked at random, back in the day, and almost certainly due to there being side UI and margins. Because there is neither anymore, I've now set this to zero, instead of cmopensating for it.

const clonePadding = 0;

class Draggable extends Component {
constructor() {
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/draggable/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ body.is-dragging-components-draggable {

.components-draggable__clone {
position: fixed;
padding: 20px;
padding: 0; // Should match clonePadding variable.
background: transparent;
pointer-events: none;
z-index: z-index(".components-draggable__clone");

> * {
opacity: 0.8;
// This needs specificity as a theme is meant to define these by default.
margin-top: 0 !important;
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 know that you must never use !important. Except in this case. Themes can define block margins, and when they do, the draggable clone will be as offset from the mouse cursor position as the theme margin decides. By explicitly and with high specificity setting these, this is unlikely to break.

margin-bottom: 0 !important;
}
}