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

Try G2 #19344

Merged
merged 63 commits into from
Feb 25, 2020
Merged

Try G2 #19344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
c02489b
Move the block movers to the block toolbar
youknowriad Nov 22, 2019
889b891
Merge the movers into one button
youknowriad Dec 12, 2019
334a925
Fix multi-selection movers
youknowriad Dec 12, 2019
9f2a4c8
Increase the size of the block toolbar
youknowriad Dec 13, 2019
9cf6785
Fix styles after rebase
youknowriad Dec 24, 2019
3b83cff
Fix horizontal movers
youknowriad Dec 24, 2019
962e343
Fix height of top toolbar
youknowriad Dec 24, 2019
b4bc4eb
Breadcrumb toolbar fix
youknowriad Dec 24, 2019
d146aa4
Block Popover: editor canvas as boundary (#19322)
ellatrix Jan 14, 2020
d5d8a0a
Update block borders dark and 1px
youknowriad Dec 27, 2019
c36998c
Simplify hover and focus styles for buttons
youknowriad Dec 27, 2019
c08e520
Remove selected state and add focus state
youknowriad Dec 27, 2019
91d4e51
Update dropdown menus styles
youknowriad Dec 27, 2019
9d5ae41
tweaks
youknowriad Dec 27, 2019
c13f756
New placeholder style
youknowriad Dec 27, 2019
6dffd8b
Fix post title border styling
youknowriad Dec 27, 2019
7c0b54e
Update autocomplete styles
youknowriad Dec 27, 2019
89da294
Add corner triangle for the block switcher toggle
youknowriad Jan 2, 2020
90f4b32
no arrow indicator for dropdowns
youknowriad Jan 2, 2020
87980ea
Implement grid system.
Jan 8, 2020
9e37e63
Polish the mover icons.
Jan 9, 2020
f04ff76
Improve focus style for blocks, unify with multiselection.
jasmussen Jan 10, 2020
b75af39
Outset focus/select styles.
Jan 13, 2020
5602b7a
Refactor toolbar focus styles.
Jan 13, 2020
baaf2ad
Improve how the styles work with plugins.
Jan 14, 2020
efa7f91
Refactor focus styles again. Make more plugin compatible.
Jan 14, 2020
da73af8
Simplify first and last child code.
Jan 15, 2020
2d61458
Refactor "Block UI" to mixin, and polish permalinks.
Jan 15, 2020
dd732d0
Fix horizontal mover.
Jan 15, 2020
f27376d
Refactor away the block pseudo selector and polish reusables.
Jan 15, 2020
96d3503
Polish reusable blocks, warnings.
Jan 15, 2020
06c9eb7
Fix typo and initial work on navigation/select mode.
Jan 15, 2020
5d9d315
Refine select mode.
Jan 15, 2020
368a174
Fix unit tests
youknowriad Jan 16, 2020
1263f64
Fix toolbar in top toolbar mode and responsive
youknowriad Jan 16, 2020
fd0f679
Fix hover and toggle styles in top toolbar.
Jan 16, 2020
c704c74
Fix toggled states inside alignments.
Jan 16, 2020
f4becd7
Fix HTML block toolbar.
Jan 16, 2020
20e9d9c
Fix breadcrumbs.
jasmussen Jan 17, 2020
dd1c844
Polish toolips, make them not block hovering.
jasmussen Jan 17, 2020
2d4af41
Polish the focus ring, and Text Only buttons.
jasmussen Jan 17, 2020
601d5dd
Restore the drag line indicator.
Jan 21, 2020
a23c5d4
Refactor the focus rectangle.
Jan 22, 2020
0782246
Rename a color variable, and fix switcher icon size.
Jan 23, 2020
59c4dc6
Fix small css bug after rebase
youknowriad Feb 4, 2020
047b2a2
Center inbetweenserter.
Feb 5, 2020
79aa5cf
Same appearance for rich text toolbar (captions)
Feb 5, 2020
10705ed
Polish caption toolbar further.
Feb 5, 2020
6df212a
Fix icon rebase regression.
Feb 6, 2020
52d6b76
Fix inbetweenserter/dropdown position issue.
Feb 6, 2020
6363ff3
Remove the recycle icon from the toolbar.
Feb 6, 2020
22bd2d8
Fix rebase issue.
Feb 11, 2020
6daf068
Fix toolbar boundary element
youknowriad Feb 13, 2020
c745cec
Fix linting and unit tests
youknowriad Feb 13, 2020
819989b
Fix dropdown preview.
jasmussen Feb 18, 2020
e986412
Implement the G2 Mover interactions (#20056)
Feb 19, 2020
12756c4
Fix small movers visual glitch when there's only one block
youknowriad Feb 20, 2020
6d946a9
G2: UI surrounding the editor canvas (#19348)
youknowriad Feb 20, 2020
41b7eaf
Fix issue with drop target indicator.
Feb 20, 2020
9c0e0b3
Fix block toolbars with preview (#20351)
tellthemachines Feb 24, 2020
ead309d
Fix unit tests
youknowriad Feb 24, 2020
b1f3a9d
Fix movers e2e tests
youknowriad Feb 24, 2020
91fdca1
fix post rebase
youknowriad Feb 24, 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
11 changes: 9 additions & 2 deletions packages/base-styles/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@ $light-gray-200: #f3f4f5;
$light-gray-100: #f8f9f9;
$white: #fff;

// G2 colors.
Copy link
Contributor Author

@youknowriad youknowriad Jan 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I have the same remark about these variables. I think we should avoid using "gray", "blue" in these. Even "dark", "light" I'm not sure about them.

I'd prefer if we use semantic variables. "primary-border-color"... That way when we decide to change the color itself, we won't have to change the variable name. It won't go out of sync.

Copy link
Contributor

Choose a reason for hiding this comment

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

I see that point. @pablohoneyhoney any thoughts?

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 think we should change these variable names.

$dark-gray-primary: #1e1e1e;
$medium-gray-text: #757575;
$light-gray-secondary: #ccc;
$light-gray-tertiary: #e7e8e9;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Do you think we should replace all shared of grays (all gray variables) with these four variables?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, but I think it's also an opportunity to reduce the amount of grays we have. The wide range has not proven as useful in practice, given that they are intended to colorize the UI, vs. for example colorize a theme.

$theme-color: theme(button);
$blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

should we rename this $theme-color-focus and just use SASS functions (tint or shade) to compute it based on $theme-color, that way it works properly no matter the theme color.

Copy link
Contributor

Choose a reason for hiding this comment

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

Mmmmmaybe. As far as is possible at all, we should try and avoid the SASS coloring function as it can never be as good as a manually chosen shade. However if the resting state color is manually picked, it's probably fine if hover and active states are SASS shaded.

$blue-medium-focus-dark: #fff;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

that's white, not blue :) I believe ideally the variable name should contain "blue" but be more about the usage.

Copy link
Contributor

Choose a reason for hiding this comment

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

We could rename both of these to $block-focus and $block-focus-dark? Because that's what they are.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

#fff for dark?

Is this just about the blocks or all focus styles (buttons,...), I'd rather avoid the "block" prefix and maybe replace with something more generic.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is only for blocks, because we can't really rely on the theme colors to bring sufficient contrast in dark themes. In light themes:

Screenshot 2020-02-20 at 13 16 00

In dark themes:

Screenshot 2020-02-20 at 13 16 24


// Dark opacities, for use with light themes.
$dark-opacity-900: rgba(#000510, 0.9);
$dark-opacity-800: rgba(#00000a, 0.85);
Expand Down Expand Up @@ -82,8 +91,6 @@ $blue-medium-300: #66c6e4;
$blue-medium-200: #bfe7f3;
$blue-medium-100: #e5f5fa;
$blue-medium-highlight: #b3e7fe;
$blue-medium-focus: #007cba;
$blue-medium-focus-dark: #fff;

// Alert colors.
$alert-yellow: #f0b849;
Expand Down
57 changes: 16 additions & 41 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,12 +123,6 @@
cursor: default;
}

@mixin button-style__hover {
background-color: $white;
color: $dark-gray-900;
box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
}

@mixin button-style__active() {
outline: none;
background-color: $white;
Expand All @@ -137,12 +131,10 @@
}

@mixin button-style__focus-active() {
background-color: $white;
color: $dark-gray-900;
box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
box-shadow: 0 0 0 1px color($theme-color);

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline: 1px solid transparent;
}

// Switch.
Expand All @@ -154,26 +146,17 @@
outline-offset: 2px;
}

// Formatting Buttons.
@mixin formatting-button-style__hover {
color: $dark-gray-500;
box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
}

@mixin formatting-button-style__active() {
outline: none;
color: $white;
box-shadow: none;
background: $dark-gray-500;
}

@mixin formatting-button-style__focus() {
box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
/**
* Block Toolbar/Formatting Buttons
*/

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
@mixin block-toolbar-button-style__focus() {
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 have the same concern raise about the previous mixin. Should we just duplicate in Popover?

Copy link
Contributor

Choose a reason for hiding this comment

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

The mixin conversation I feel is worth elevating above this PR. They are intended to help create a single place to define reused code. But at the same time I can see how that goes against the CSS & components mantra.

box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 4px $white; // Inner halo makes this work on top of a toggled button.
outline: 2px solid transparent; // Shown to Windows 10 High Contrast Mode.
}


// Tabs, Inputs, Square buttons.
@mixin input-style__neutral() {
box-shadow: 0 0 0 transparent;
Expand Down Expand Up @@ -231,35 +214,26 @@
}

@mixin block-style__hover {
background: $light-gray-200;
color: $dark-gray-900;
border-color: $theme-color;
color: $theme-color !important;
}

@mixin block-style__focus() {
color: $dark-gray-900;
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}

@mixin block-style__is-active() {
color: $dark-gray-900;
box-shadow: inset 0 0 0 2px $dark-gray-500;
color: $white;
background: $dark-gray-primary;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
outline-offset: -2px;
}

@mixin block-style__is-active-focus() {
color: $dark-gray-900;
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 4px solid transparent;
outline-offset: -4px;
}

/**
* Applies editor left position to the selector passed as argument
Expand Down Expand Up @@ -337,13 +311,14 @@
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 5px solid;
margin-left: $grid-size-small;
margin-left: $grid-unit-05;

// This gives the icon space on the right side consistent with the material
// icon standards.
margin-right: 2px;
}


/**
* Allows users to opt-out of animations via OS-level preferences.
*/
Expand Down
92 changes: 68 additions & 24 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
@import "./colors";

/**
* Often re-used variables
* Fonts & basic variables.
*/

// Fonts & basics
$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
$default-font-size: 13px;
$default-line-height: 1.4;
Expand All @@ -17,15 +16,49 @@ $editor-line-height: 1.8;
$big-font-size: 18px;
$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"

// Grid size

/**
* Grid System.
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
*/

$grid-unit: 8px;
$grid-unit-05: 0.5 * $grid-unit; // 4px
$grid-unit-10: 1 * $grid-unit; // 8px
$grid-unit-15: 1.5 * $grid-unit; // 12px
$grid-unit-20: 2 * $grid-unit; // 16px
$grid-unit-30: 3 * $grid-unit; // 24px
$grid-unit-40: 4 * $grid-unit; // 32px
$grid-unit-50: 5 * $grid-unit; // 40px
$grid-unit-60: 6 * $grid-unit; // 48px

/* @Todo: Move towards custom properties:
:root {
--grid-unit: 8px;
--grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px
--grid-unit-10: calc(1 * var(--grid-unit)); // 8px
--grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px
--grid-unit-20: calc(2 * var(--grid-unit)); // 16px
--grid-unit-30: calc(3 * var(--grid-unit)); // 24px
--grid-unit-40: calc(4 * var(--grid-unit)); // 32px
--grid-unit-50: calc(5 * var(--grid-unit)); // 40px
--grid-unit-60: calc(6 * var(--grid-unit)); // 48px
}
*/

// Deprecated grid units.
$grid-size-small: 4px;
$grid-size: 8px;
$grid-size-large: 16px;
$grid-size-xlarge: 24px;

// Widths, heights & dimensions

/**
* Dimensions.
*/

$panel-padding: 16px;
$header-height: 56px;
$header-height: 60px;
$panel-header-height: 50px;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
Expand All @@ -34,25 +67,39 @@ $admin-sidebar-width-big: 190px;
$admin-sidebar-width-collapsed: 36px;
$empty-paragraph-height: $text-editor-font-size * 4;
$modal-min-width: 360px;
$spinner-size: 18px;


/**
* Shadows.
*/

// Visuals
$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1);
$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1);
$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05);
$shadow-popover: 0 2px 6px rgba($black, 0.05);
$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);

// Editor Widths

/**
* Editor widths.
*/

$sidebar-width: 280px;
$content-width: 580px; // This is optimized for 70 characters.
$widget-area-width: 700px;


/**
* Block UI.
*/

// Block UI
$border-width: 1px;
$block-controls-height: 36px;
$icon-button-size: 36px;
$inserter-tabs-height: 36px;
$block-toolbar-height: $block-controls-height + $border-width;
$icon-button-size-small: 24px;
$block-toolbar-height: $grid-unit-60;
$resize-handler-size: 15px;
$resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area.

// Blocks
$block-left-border-width: $border-width * 3;
// Block specific dimensions.
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
$block-spacing: 4px; // Vertical space between blocks.
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
Expand All @@ -75,14 +122,11 @@ $block-media-container-to-content: $block-selected-child-margin + $block-selecte
$block-selected-vertical-margin-descendant: 2 * $block-selected-to-content;
$block-selected-vertical-margin-child: $block-edge-to-content;

// Buttons & UI Widgets

/**
* Border radii.
*/

$radius-round-rectangle: 4px;
$radius-round: 50%;
$icon-button-size: 36px;
$icon-button-size-small: 24px;
$resize-handler-size: 15px;
$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
$spinner-size: 18px;

// Widgets screen
$widget-area-width: 700px;
$radius-block-ui: 2px;
5 changes: 2 additions & 3 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ $z-layers: (
".edit-site-header": 62,
".edit-widgets-header": 30,
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".wp-block-cover__video-background": 0, // Video background inside cover block.
Expand All @@ -55,7 +54,6 @@ $z-layers: (
".block-editor-inner-blocks.has-overlay::after": 60,

// The toolbar, when contextual, should be above any adjacent nested block click overlays.
".block-editor-block-list__layout .reusable-block-edit-panel": 61,
".block-editor-block-contextual-toolbar": 61,

// The block mover, particularly in nested contexts,
Expand Down Expand Up @@ -117,7 +115,8 @@ $z-layers: (
".components-tooltip": 1000002,

// Make sure corner handles are above side handles for ResizableBox component
".components-resizable-box__side-handle": 1,
".components-resizable-box__handle": 2,
".components-resizable-box__side-handle": 2,
".components-resizable-box__corner-handle": 2,

// Make sure block manager sticky category titles appear above the options
Expand Down
2 changes: 1 addition & 1 deletion packages/block-directory/src/components/downloadable-block-info/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
display: flex;
justify-content: space-between;
color: $dark-gray-400;
margin-top: $grid-size;
margin-top: $grid-unit-10;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ultimately, I think it's better to avoid relying on this kind of variables that refer to a "value" (10 units). Instead we should prefer more semantic variables ($default-whitespace, $button-size, ...).

For example if you use $button-size variable here, it would mean that this value should follow the button size, if the button size changes, this value should change while when rely on "values" like here. There's no specific meaning, it makes maintenance harder. If tomorrow I change the value of this variable, am I assured that it won't break the layout?

Just a general thought, nothing to consider specifically for this PR

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm actually introducing those variables to help enable a grid system that works with chunks of 8 and emphasis on 12 and 24. When used as the only units of spacing, rather than arbitrary pixel numbers, they can help add consistency to the grid. There's more in https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/, which this is directly based on.

font-size: 12px;

.block-directory-downloadable-block-info__column {
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,10 +345,6 @@ _Related_

- <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md>

<a name="MultiBlocksSwitcher" href="#MultiBlocksSwitcher">#</a> **MultiBlocksSwitcher**

Undocumented declaration.

<a name="MultiSelectScrollIntoView" href="#MultiSelectScrollIntoView">#</a> **MultiSelectScrollIntoView**

Scrolls the multi block selection end into view if not in view already. This
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-breadcrumb/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

.block-editor-block-breadcrumb__button.components-button,
.block-editor-block-breadcrumb__current {
color: $dark-gray-500;
padding: 0 $grid-size;
color: $dark-gray-primary;
padding: 0 $grid-unit-10;
font-size: inherit;
}
23 changes: 8 additions & 15 deletions packages/block-editor/src/components/block-draggable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { castArray } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -18,20 +13,18 @@ const BlockDraggable = ( { children, clientIds } ) => {
getBlockRootClientId,
getTemplateLock,
} = select( 'core/block-editor' );
const normalizedClientIds = castArray( clientIds );
const rootClientId =
normalizedClientIds.length === 1
? getBlockRootClientId( normalizedClientIds[ 0 ] )
clientIds.length === 1
? getBlockRootClientId( clientIds[ 0 ] )
: null;
const templateLock = rootClientId
? getTemplateLock( rootClientId )
: null;

return {
index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ),
index: getBlockIndex( clientIds[ 0 ], rootClientId ),
srcRootClientId: rootClientId,
isDraggable:
normalizedClientIds.length === 1 && 'all' !== templateLock,
isDraggable: clientIds.length === 1 && 'all' !== templateLock,
};
},
[ clientIds ]
Expand All @@ -51,15 +44,14 @@ const BlockDraggable = ( { children, clientIds } ) => {
}, [] );

if ( ! isDraggable ) {
return null;
return children( { isDraggable: false } );
}

const normalizedClientIds = castArray( clientIds );
const blockElementId = `block-${ normalizedClientIds[ 0 ] }`;
const blockElementId = `block-${ clientIds[ 0 ] }`;
const transferData = {
type: 'block',
srcIndex: index,
srcClientId: normalizedClientIds[ 0 ],
srcClientId: clientIds[ 0 ],
srcRootClientId,
};

Expand All @@ -78,6 +70,7 @@ const BlockDraggable = ( { children, clientIds } ) => {
>
{ ( { onDraggableStart, onDraggableEnd } ) => {
return children( {
isDraggable: true,
onDraggableStart,
onDraggableEnd,
} );
Expand Down
Loading