diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js index 4deed6aaef7d0f..4cce7db9d08028 100644 --- a/packages/block-editor/src/components/block-draggable/draggable-chip.js +++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js @@ -5,7 +5,7 @@ import { _n, sprintf } from '@wordpress/i18n'; import { getBlockType } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; import { Flex, FlexItem } from '@wordpress/components'; -import { handle } from '@wordpress/icons'; +import { dragHandle } from '@wordpress/icons'; /** * Internal dependencies @@ -35,9 +35,6 @@ export default function BlockDraggableChip( { clientIds } ) { justify="center" className="block-editor-block-draggable-chip__content" > - - - { icon ? ( @@ -49,6 +46,9 @@ export default function BlockDraggableChip( { clientIds } ) { ) ) } + + + diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index 18a59e43beeb1d..437ed65a936a88 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -1,9 +1,8 @@ .block-editor-block-draggable-chip-wrapper { position: absolute; - // Offset position by half the height of the draggable chip - // so that the cursor is centered over the left part of the chip. + // Offset position so that cursor is centered over the drag handle. top: -#{$block-toolbar-height / 2}; - left: -#{$block-toolbar-height / 2}; + left: 0; } .block-editor-block-draggable-chip { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index aa56a44e84ccdd..5e6411d09a80bd 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -543,12 +543,32 @@ .block-editor-block-mover:not(.is-horizontal) { .block-editor-block-mover-button { - &.is-up-button svg { - margin-top: 3px; + &.is-up-button { + svg { + margin-top: 2px; + transition: ease-in-out transform 0.1s; + @include reduce-motion("transition"); + } + &:focus, + &:hover { + svg { + transform: translateY(-2px); + } + } } - &.is-down-button svg { - margin-bottom: 3px; + &.is-down-button { + svg { + margin-bottom: 3px; + transition: ease-in-out transform 0.1s; + @include reduce-motion("transition"); + } + &:focus, + &:hover { + svg { + transform: translateY(2px); + } + } } &:focus::before { diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 45fc5a6e816c63..0c6417a9c02c52 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -7,7 +7,9 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { ToolbarGroup, ToolbarItem } from '@wordpress/components'; + +import { dragHandle } from '@wordpress/icons'; +import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components'; import { getBlockType } from '@wordpress/blocks'; import { useState } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -15,6 +17,7 @@ import { withSelect } from '@wordpress/data'; /** * Internal dependencies */ +import BlockDraggable from '../block-draggable'; import { BlockMoverUpButton, BlockMoverDownButton } from './button'; function BlockMover( { @@ -25,6 +28,7 @@ function BlockMover( { isHidden, rootClientId, orientation, + hideDragHandle, } ) { const [ isFocused, setIsFocused ] = useState( false ); @@ -46,7 +50,27 @@ function BlockMover( { 'is-horizontal': orientation === 'horizontal', } ) } > - + { ! hideDragHandle && ( + + { ( { isDraggable, onDraggableStart, onDraggableEnd } ) => ( + @@ -338,7 +338,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = xmlns="http://www.w3.org/2000/svg" > @@ -512,7 +512,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = xmlns="http://www.w3.org/2000/svg" > @@ -686,7 +686,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -860,7 +860,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -1034,7 +1034,7 @@ exports[`ColorPicker should render color picker 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index 08a3141f6b288e..68602ba472629b 100644 --- a/packages/components/src/toolbar-group/style.scss +++ b/packages/components/src/toolbar-group/style.scss @@ -6,7 +6,8 @@ flex-shrink: 0; flex-wrap: wrap; - & & { + // Unset for nested toolbar groups. Increase specificity. + & .components-toolbar-group.components-toolbar-group { border-width: 0; margin: 0; } diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap index aafa7c918f1795..a6062e7af7b6ba 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap index 6087ec62497e5c..b14bc1c0458d22 100644 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,4 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; +q diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 30b12d689a6884..820f90ca42d3de 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -49,6 +49,7 @@ export { default as currencyDollar } from './library/currency-dollar'; export { default as currencyEuro } from './library/currency-euro'; export { default as currencyPound } from './library/currency-pound'; export { default as desktop } from './library/desktop'; +export { default as dragHandle } from './library/drag-handle'; export { default as edit } from './library/edit'; export { default as external } from './library/external'; export { default as file } from './library/file'; diff --git a/packages/icons/src/library/chevron-down.js b/packages/icons/src/library/chevron-down.js index 9f490ee61edff7..6e1436d2e7fd93 100644 --- a/packages/icons/src/library/chevron-down.js +++ b/packages/icons/src/library/chevron-down.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const chevronDown = ( - + ); diff --git a/packages/icons/src/library/chevron-up.js b/packages/icons/src/library/chevron-up.js index de4075c4394265..4a51856f4f892a 100644 --- a/packages/icons/src/library/chevron-up.js +++ b/packages/icons/src/library/chevron-up.js @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; const chevronUp = ( - + ); diff --git a/packages/icons/src/library/drag-handle.js b/packages/icons/src/library/drag-handle.js new file mode 100644 index 00000000000000..d67765bbd2c441 --- /dev/null +++ b/packages/icons/src/library/drag-handle.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const dragHandle = ( + + + +); + +export default dragHandle;