From edbb114a306deba2d6d5d72e2ff8c8ba59f0c847 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 17 Feb 2021 09:00:10 +0000 Subject: [PATCH 1/7] Adds drag handle to block selection button in navigation mode --- .../block-list/block-selection-button.js | 23 ++++++++++++ .../src/components/block-list/style.scss | 36 +++++++++++-------- 2 files changed, 45 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index 0c1c731049663..6238107bcf2c6 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -6,6 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { dragHandle } from '@wordpress/icons'; import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -27,12 +28,14 @@ import { } from '@wordpress/blocks'; import { speak } from '@wordpress/a11y'; import { focus } from '@wordpress/dom'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import BlockTitle from '../block-title'; import { store as blockEditorStore } from '../../store'; +import BlockDraggable from '../block-draggable'; /** * Returns true if the user is using windows. @@ -256,13 +259,33 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { } ); + const dragHandleLabel = __( 'Drag' ); + return (
+ + { ( draggableProps ) => ( + diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index a5beff931b5cd..efab9997d2a85 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -614,29 +614,37 @@ */ .block-editor-block-list__block-selection-button { - display: block; + display: flex; z-index: z-index(".block-editor-block-list__block-selection-button"); + // Block UI appearance. + box-shadow: 0 0 0 $border-width $gray-900; + border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius. + background-color: $white; + + font-size: $default-font-size; + height: $block-toolbar-height - $border-width - $border-width; + padding: 0; + + .components-button.has-icon.block-selection-button_drag-handle { + flex-grow: 1; + cursor: grab; + } // The button here has a special style to appear as a toolbar. .components-button { - font-size: $default-font-size; height: $block-toolbar-height - $border-width - $border-width; - padding: $grid-unit-15 $grid-unit-20; - - // Position this to align with the block toolbar. - position: relative; - top: -$border-width; - - // Block UI appearance. - box-shadow: 0 0 0 $border-width $gray-900; - border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius. - background-color: $white; - // When button is focused, it receives a box-shadow instead of the border. &:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: none; + border: none; } + padding: 6px; } + + .components-button.block-selection-button_select-button { + padding-left: 0; + } + } From 92d9c481088480f838fa4a2479f638dbb48a7196 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 25 Feb 2021 11:46:01 +0100 Subject: [PATCH 2/7] Make handle dark. --- .../src/components/block-list/style.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index efab9997d2a85..c178ea58262ac 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -616,10 +616,10 @@ .block-editor-block-list__block-selection-button { display: flex; z-index: z-index(".block-editor-block-list__block-selection-button"); - // Block UI appearance. - box-shadow: 0 0 0 $border-width $gray-900; - border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius. - background-color: $white; + + // Dark block UI appearance. + border-radius: $radius-block-ui; + background-color: $gray-900; font-size: $default-font-size; height: $block-toolbar-height - $border-width - $border-width; @@ -632,19 +632,20 @@ // The button here has a special style to appear as a toolbar. .components-button { + color: $white; height: $block-toolbar-height - $border-width - $border-width; + // When button is focused, it receives a box-shadow instead of the border. &:focus { box-shadow: none; border: none; } - padding: 6px; + padding: $grid-unit-15 / 2; } .components-button.block-selection-button_select-button { padding-left: 0; } - } From 7433d19a7ffd48cfd3964015df412a839fde626c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 26 Feb 2021 10:02:39 +0100 Subject: [PATCH 3/7] Dropper shadow. --- .../block-editor/src/components/block-draggable/style.scss | 2 +- packages/block-editor/src/components/block-list/style.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index 437ed65a936a8..528155d19c594 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -9,7 +9,7 @@ background-color: $gray-900; border-radius: $radius-block-ui; border: $border-width solid $gray-900; - box-shadow: 0 4px 6px rgba($black, 0.3); + box-shadow: 0 6px 8px rgba($black, 0.3); color: $white; cursor: grabbing; display: inline-flex; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index c178ea58262ac..de307ef6f8979 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -641,6 +641,10 @@ border: none; } padding: $grid-unit-15 / 2; + + &:active { + color: $white; + } } .components-button.block-selection-button_select-button { From 0599e070b1fb4f645cb69fe2bcfefc2f8a1fde3d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 9 Mar 2021 16:08:54 +0000 Subject: [PATCH 4/7] makes the block selection button look like the daggable chip plus block name --- .../block-list/block-selection-button.js | 73 ++++++++++++------- .../src/components/block-list/style.scss | 37 +++++++--- 2 files changed, 74 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index 6238107bcf2c6..12a6ac220d297 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { dragHandle } from '@wordpress/icons'; -import { Button } from '@wordpress/components'; +import { Button, Flex, FlexItem } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; import { @@ -34,6 +34,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import BlockTitle from '../block-title'; +import BlockIcon from '../block-icon'; import { store as blockEditorStore } from '../../store'; import BlockDraggable from '../block-draggable'; @@ -96,9 +97,12 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { const { __unstableGetBlockWithoutInnerBlocks, getBlockIndex, + getBlockName, hasBlockMovingClientId, getBlockListSettings, } = select( blockEditorStore ); + const blockName = getBlockName( clientId ); + const blockType = getBlockType( blockName ); const index = getBlockIndex( clientId, rootClientId ); const { name, attributes } = __unstableGetBlockWithoutInnerBlocks( clientId @@ -110,11 +114,19 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { attributes, blockMovingMode, orientation: getBlockListSettings( rootClientId )?.orientation, + icon: blockType.icon, }; }, [ clientId, rootClientId ] ); - const { index, name, attributes, blockMovingMode, orientation } = selected; + const { + index, + name, + attributes, + blockMovingMode, + orientation, + icon, + } = selected; const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore ); const ref = useRef(); @@ -263,32 +275,41 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { return (
- - { ( draggableProps ) => ( + + + + + + { ( draggableProps ) => ( + + ref={ ref } + onClick={ () => setNavigationMode( false ) } + onKeyDown={ onKeyDown } + label={ label } + className="block-selection-button_select-button" + > + + + +
); } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index de307ef6f8979..cbd3f62c58e72 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -614,41 +614,58 @@ */ .block-editor-block-list__block-selection-button { - display: flex; + display: inline-flex; + padding: 0 20px; z-index: z-index(".block-editor-block-list__block-selection-button"); - // Dark block UI appearance. border-radius: $radius-block-ui; background-color: $gray-900; font-size: $default-font-size; - height: $block-toolbar-height - $border-width - $border-width; - padding: 0; + height: $block-toolbar-height + 2 * $border-width; + .block-editor-block-list__block-selection-button__content { + margin: auto; + display: inline-flex; + } .components-button.has-icon.block-selection-button_drag-handle { - flex-grow: 1; cursor: grab; + padding: 0; + height: 24px; + min-width: 24px; + margin-right: 8px; + + svg { + min-width: 20px; + min-height: 20px; + } + } + + .block-editor-block-icon { + font-size: $default-font-size; + color: $white; + height: $block-toolbar-height; } // The button here has a special style to appear as a toolbar. .components-button { + min-width: $button-size; color: $white; - height: $block-toolbar-height - $border-width - $border-width; + height: $block-toolbar-height + 2 * $border-width; // When button is focused, it receives a box-shadow instead of the border. &:focus { box-shadow: none; border: none; } - padding: $grid-unit-15 / 2; &:active { color: $white; } + display: flex; } - - .components-button.block-selection-button_select-button { - padding-left: 0; + .block-selection-button_select-button.components-button { + padding: 0; } } From ebe3b2d2c7d566c3596886f48ca84a1403a18896 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 9 Mar 2021 16:25:52 +0000 Subject: [PATCH 5/7] fix slight off vertical centering --- packages/block-editor/src/components/block-list/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index cbd3f62c58e72..620112c25a7e7 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -627,6 +627,7 @@ .block-editor-block-list__block-selection-button__content { margin: auto; display: inline-flex; + align-items: center; } .components-button.has-icon.block-selection-button_drag-handle { cursor: grab; From 27ca2902af1f1b1480bbb7fcc789994e17daa66a Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 10 Mar 2021 08:07:00 +0100 Subject: [PATCH 6/7] Make select mode chip accurate. --- .../src/components/block-list/style.scss | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 620112c25a7e7..eff5c20457da5 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -615,30 +615,35 @@ .block-editor-block-list__block-selection-button { display: inline-flex; - padding: 0 20px; + padding: 0 ( $grid-unit-15 + $border-width ); z-index: z-index(".block-editor-block-list__block-selection-button"); + // Dark block UI appearance. border-radius: $radius-block-ui; background-color: $gray-900; font-size: $default-font-size; - height: $block-toolbar-height + 2 * $border-width; + height: $block-toolbar-height; .block-editor-block-list__block-selection-button__content { margin: auto; display: inline-flex; align-items: center; + + > .components-flex__item { + margin-right: $grid-unit-15 / 2; + } } .components-button.has-icon.block-selection-button_drag-handle { cursor: grab; padding: 0; - height: 24px; - min-width: 24px; - margin-right: 8px; + height: $grid-unit-30; + min-width: $grid-unit-30; + // Drag handle is smaller than the others. svg { - min-width: 20px; - min-height: 20px; + min-width: 18px; + min-height: 18px; } } @@ -652,7 +657,7 @@ .components-button { min-width: $button-size; color: $white; - height: $block-toolbar-height + 2 * $border-width; + height: $block-toolbar-height; // When button is focused, it receives a box-shadow instead of the border. &:focus { From 594fe599708b6c3d1fe308e1980a03d91eaf6919 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 10 Mar 2021 08:19:47 +0100 Subject: [PATCH 7/7] Make draggable chip accurate. --- .../src/components/block-draggable/style.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index 528155d19c594..b33fced9af2ab 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -8,14 +8,12 @@ .block-editor-block-draggable-chip { background-color: $gray-900; border-radius: $radius-block-ui; - border: $border-width solid $gray-900; box-shadow: 0 6px 8px rgba($black, 0.3); color: $white; cursor: grabbing; display: inline-flex; height: $block-toolbar-height; - min-width: $button-size * 2; - padding: 0 $grid-unit-15; + padding: 0 ( $grid-unit-15 + $border-width ); user-select: none; svg { @@ -24,6 +22,21 @@ .block-editor-block-draggable-chip__content { margin: auto; + justify-content: flex-start; + + > .components-flex__item { + margin-right: $grid-unit-15 / 2; + + &:last-child { + margin-right: 0; + } + } + + // Drag handle is smaller than the others. + .block-editor-block-icon svg { + min-width: 18px; + min-height: 18px; + } } .components-flex__item {