diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js index 1ee725fc1daf39..8f960f4538a6c9 100644 --- a/packages/block-editor/src/components/block-draggable/index.js +++ b/packages/block-editor/src/components/block-draggable/index.js @@ -5,7 +5,7 @@ import { Draggable } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; -const BlockDraggable = ( { children, clientIds } ) => { +const BlockDraggable = ( { children, clientIds, cloneClassname } ) => { const { srcRootClientId, index, isDraggable } = useSelect( ( select ) => { const { @@ -57,6 +57,7 @@ const BlockDraggable = ( { children, clientIds } ) => { return ( { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 8a315525222049..fb9a0a925c8db6 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -107,7 +107,6 @@ right: 0; left: 0; top: -$default-block-margin / 2; - border-radius: $radius-block-ui; border-top: 4px solid $blue-medium-focus; } } @@ -486,9 +485,86 @@ background-color: $white; .block-editor-block-toolbar .components-toolbar-group, - .block-editor-block-toolbar .components-toolbar { + .block-editor-block-toolbar .components-toolbar, + .block-editor-block-toolbar__mover-switcher-container { border-right-color: $dark-gray-primary; } + + .block-editor-block-toolbar__mover-switcher-container { + border-right-style: solid; + border-right-width: $border-width; + } + + // Adjust the mover control to fit as a unit next to the block switcher. + .block-editor-block-toolbar__block-switcher-wrapper { + // Adjust the focus rectangle for the switcher. + .block-editor-block-switcher__no-switcher-icon::before, + .block-editor-block-switcher__toggle::before { + width: $grid-unit-60 - $grid-unit-10 - $grid-unit-15; + } + + // Adjust the positioning of the icon to better balance the new unit. + .block-editor-block-icon svg { + margin-left: 10px; + } + + .block-editor-block-switcher:last-child .block-editor-block-icon svg { + margin-left: auto; + } + + .components-toolbar, + .components-toolbar-group { + border-right: none; + } + } + + .block-editor-block-mover { + margin-left: -$grid-unit-15; + width: $button-size; + + &.is-horizontal { + width: $block-toolbar-height; + } + + // 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; + cursor: grab; + + &:active { + cursor: grabbing; + } + } + + &.is-horizontal .components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button { + min-width: $block-toolbar-height/2; + width: $block-toolbar-height/2; + } + } + + .block-editor-block-mover:not(.is-horizontal) { + + .block-editor-block-mover-button { + > svg { + margin-left: 2px; + } + + &.is-up-button svg { + margin-top: 3px; + } + + &.is-down-button svg { + margin-bottom: 3px; + } + + &:focus::before { + left: 0 !important; + min-width: 0; + width: 28px; + } + } + } } diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js index 1ad8c660d5dd11..41ff9e859a0939 100644 --- a/packages/block-editor/src/components/block-mover/button.js +++ b/packages/block-editor/src/components/block-mover/button.js @@ -17,19 +17,23 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { leftArrow, rightArrow } from './icons'; -import { chevronUp, chevronDown } from '@wordpress/icons'; +import { + chevronLeft, + chevronRight, + chevronUp, + chevronDown, +} from '@wordpress/icons'; import { getBlockMoverDescription } from './mover-description'; const getArrowIcon = ( direction, orientation, isRTL ) => { if ( direction === 'up' ) { if ( orientation === 'horizontal' ) { - return isRTL ? rightArrow : leftArrow; + return isRTL ? chevronRight : chevronLeft; } return chevronUp; } else if ( direction === 'down' ) { if ( orientation === 'horizontal' ) { - return isRTL ? leftArrow : rightArrow; + return isRTL ? chevronLeft : chevronRight; } return chevronDown; } diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js deleted file mode 100644 index 207b3b285e2684..00000000000000 --- a/packages/block-editor/src/components/block-mover/icons.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * WordPress dependencies - */ -import { Polygon, Path, SVG } from '@wordpress/components'; - -export const leftArrow = ( - - - -); - -export const rightArrow = ( - - - -); - -export const dragHandle = ( - - - -); diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 61a579d01efea5..8f38cbe99f270f 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -18,7 +18,6 @@ import { withSelect } from '@wordpress/data'; /** * Internal dependencies */ -import BlockDraggable from '../block-draggable'; import { BlockMoverUpButton, BlockMoverDownButton } from './button'; export class BlockMover extends Component { @@ -51,7 +50,6 @@ export class BlockMover extends Component { isLocked, isHidden, rootClientId, - hideDragHandle, __experimentalOrientation: orientation, } = this.props; const { isFocused } = this.state; @@ -64,44 +62,37 @@ export class BlockMover extends Component { // to an unfocused state (body as active element) without firing blur on, // the rendering parent, leaving it unable to react to focus out. return ( - - { ( { isDraggable, onDraggableStart, onDraggableEnd } ) => ( -
+ + - - - { ( itemProps ) => ( - - ) } - - - { ( itemProps ) => ( - - ) } - - -
- ) } - + { ( itemProps ) => ( + + ) } + + + { ( itemProps ) => ( + + ) } + + + ); } } diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 427e41189c8073..cd575144d79580 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -69,8 +69,8 @@ .block-editor-block-mover-button.has-icon { height: $block-toolbar-height; // Overrides .components-toolbar-group styles - width: $block-toolbar-height/2 !important; - min-width: $grid-unit-30 !important; + width: $block-toolbar-height / 2; + min-width: $grid-unit-30; padding-left: 0; padding-right: 0; @@ -115,17 +115,4 @@ } } } - - // Drag and drop is only enabled in contextual toolbars. - &:not([draggable="false"]) { - cursor: grab; - - .block-editor-block-mover__control { - cursor: grab !important; - - &:not(:disabled):not([aria-disabled="true"]):active { - cursor: grabbing; - } - } - } } diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss index ffe18863d8d1bc..65276179369c68 100644 --- a/packages/block-editor/src/components/block-parent-selector/style.scss +++ b/packages/block-editor/src/components/block-parent-selector/style.scss @@ -1,14 +1,14 @@ .block-editor-block-parent-selector { background: $white; - border: 1px solid $dark-gray-primary; + border: $border-width solid $dark-gray-primary; border-radius: $radius-block-ui; - padding: 8px; + padding: $grid-unit-10 - $border-width; line-height: 1; .block-editor-block-parent-selector__button { - width: 32px; min-width: auto; - height: 32px; + width: $grid-unit-40; + height: $grid-unit-40; padding: 0; } } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 29bd8f1b3980f5..5917853733323a 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -41,7 +41,9 @@ } // Style this the same as the block buttons in the library. -// Needs specificiity to override the icon button. +// Needs specificity to override the icon button. +.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon, +.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon, .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon, .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon { padding: 0; @@ -149,6 +151,7 @@ width: $grid-unit-60; } + .components-button.block-editor-block-switcher__no-switcher-icon, .components-button.block-editor-block-switcher__toggle { .block-editor-block-icon, .block-editor-block-switcher__transform { diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 8572805766e988..1976255dceb869 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -19,6 +19,7 @@ import BlockSwitcher from '../block-switcher'; import BlockControls from '../block-controls'; import BlockFormatControls from '../block-format-controls'; import BlockSettingsMenu from '../block-settings-menu'; +import BlockDraggable from '../block-draggable'; import { useShowMoversGestures, useToggleBlockHighlight } from './utils'; export default function BlockToolbar( { hideDragHandle } ) { @@ -96,15 +97,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' + shouldShowMovers && 'is-showing-movers' ); return ( @@ -119,29 +114,31 @@ export default function BlockToolbar( { hideDragHandle } ) { ) } -
-
- -
-
- { ( shouldShowVisualToolbar || isMultiToolbar ) && ( -
- -
+ { ( { + isDraggable, + onDraggableStart, + onDraggableEnd, + } ) => ( +
+ + +
+ ) } + ) } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 378911374945a9..26180931d49f2f 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -92,44 +92,33 @@ } .block-editor-block-toolbar__block-switcher-wrapper { - .block-editor-block-switcher { - display: block; - } -} + display: flex; -.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; - } + // Drag and drop is only enabled in contextual toolbars. + &:not([draggable="false"]) * { + cursor: grab; } - // 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-switcher { + display: block; } +} - .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 a draggable handle when you're dragging using the toolbar component. +.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; } diff --git a/packages/components/src/draggable/index.js b/packages/components/src/draggable/index.js index d41182e574928a..0a44ebeb70d8b6 100644 --- a/packages/components/src/draggable/index.js +++ b/packages/components/src/draggable/index.js @@ -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; +const clonePadding = 0; class Draggable extends Component { constructor() { @@ -74,7 +74,12 @@ class Draggable extends Component { * @param {Object} event The non-custom DragEvent. */ onDragStart( event ) { - const { elementId, transferData, onDragStart = noop } = this.props; + const { + cloneClassname, + elementId, + transferData, + onDragStart = noop, + } = this.props; const element = document.getElementById( elementId ); if ( ! element ) { event.preventDefault(); @@ -106,6 +111,9 @@ class Draggable extends Component { clone.id = `clone-${ elementId }`; this.cloneWrapper = document.createElement( 'div' ); this.cloneWrapper.classList.add( cloneWrapperClass ); + if ( cloneClassname ) { + this.cloneWrapper.classList.add( cloneClassname ); + } this.cloneWrapper.style.width = `${ elementRect.width + clonePadding * 2 }px`; diff --git a/packages/components/src/draggable/style.scss b/packages/components/src/draggable/style.scss index ad046f4e092a36..6cbc4ff09db4da 100644 --- a/packages/components/src/draggable/style.scss +++ b/packages/components/src/draggable/style.scss @@ -12,9 +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; + margin-bottom: 0 !important; + } } diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index ae147df18885c4..ad8dce270b6ffa 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -32,8 +32,7 @@ position: absolute; display: block; border-radius: $radius-block-ui; - height: 32px; - min-width: 32px; + height: $grid-unit-40; // Position the focus rectangle. left: $grid-unit-10; diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index 3f590f4741f12b..d8f4e06458bf70 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -43,13 +43,13 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { const tabThroughBlockToolbar = async () => { await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Move up' ); + await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Move down' ); + await expect( await getActiveLabel() ).toBe( 'Move up' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); + await expect( await getActiveLabel() ).toBe( 'Move down' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Change text alignment' ); @@ -70,7 +70,7 @@ const tabThroughBlockToolbar = async () => { await expect( await getActiveLabel() ).toBe( 'More options' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Move up' ); + await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); }; describe( 'Order of block keyboard navigation', () => { @@ -197,6 +197,7 @@ describe( 'Order of block keyboard navigation', () => { ); await pressKeyWithModifier( 'shift', 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Move up' ); } ); } );