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/add drag handle to select mode #28815

Merged
merged 7 commits into from
Mar 12, 2021
Merged

Try/add drag handle to select mode #28815

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edbb114
Adds drag handle to block selection button in navigation mode
Feb 17, 2021
92d9c48
Make handle dark.
jasmussen Feb 25, 2021
7433d19
Dropper shadow.
jasmussen Feb 26, 2021
0599e07
makes the block selection button look like the daggable chip plus blo…
Mar 9, 2021
ebe3b2d
fix slight off vertical centering
Mar 9, 2021
27ca290
Make select mode chip accurate.
jasmussen Mar 10, 2021
594fe59
Make draggable chip accurate.
jasmussen Mar 10, 2021
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
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-draggable/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
62 changes: 53 additions & 9 deletions packages/block-editor/src/components/block-list/block-selection-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
import { dragHandle } from '@wordpress/icons';
import { Button, Flex, FlexItem } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect, useRef } from '@wordpress/element';
import {
Expand All @@ -27,12 +28,15 @@ 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 BlockIcon from '../block-icon';
import { store as blockEditorStore } from '../../store';
import BlockDraggable from '../block-draggable';

/**
* Returns true if the user is using windows.
Expand Down Expand Up @@ -93,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
Expand All @@ -107,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();

Expand Down Expand Up @@ -256,16 +271,45 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
}
);

const dragHandleLabel = __( 'Drag' );

return (
<div className={ classNames }>
<Button
ref={ ref }
onClick={ () => setNavigationMode( false ) }
onKeyDown={ onKeyDown }
label={ label }
<Flex
justify="center"
className="block-editor-block-list__block-selection-button__content"
>
<BlockTitle clientId={ clientId } />
</Button>
<FlexItem>
<BlockIcon icon={ icon } showColors />
</FlexItem>
<FlexItem>
<BlockDraggable clientIds={ [ clientId ] }>
{ ( draggableProps ) => (
<Button
icon={ dragHandle }
className="block-selection-button_drag-handle"
aria-hidden="true"
label={ dragHandleLabel }
// Should not be able to tab to drag handle as this
// button can only be used with a pointer device.
tabIndex="-1"
{ ...draggableProps }
/>
) }
</BlockDraggable>
</FlexItem>
<FlexItem>
<Button
ref={ ref }
onClick={ () => setNavigationMode( false ) }
onKeyDown={ onKeyDown }
label={ label }
className="block-selection-button_select-button"
>
<BlockTitle clientId={ clientId } />
</Button>
</FlexItem>
</Flex>
</div>
);
}
Expand Down
58 changes: 44 additions & 14 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -614,28 +614,58 @@
*/

.block-editor-block-list__block-selection-button {
display: block;
display: inline-flex;
padding: 0 20px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was kinda too hard to get right, none of the $grid-unit options seemed to fit right "visually" with the chip once the drag started.

z-index: z-index(".block-editor-block-list__block-selection-button");
// Dark block UI appearance.
border-radius: $radius-block-ui;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The comment seems to be in the wrong place.

background-color: $gray-900;

// 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;
font-size: $default-font-size;
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 {
cursor: grab;
padding: 0;
height: 24px;
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 wonder why did I need to bolt these magic numbers here.

min-width: 24px;
margin-right: 8px;

svg {
min-width: 20px;
min-height: 20px;
}
}

// Position this to align with the block toolbar.
position: relative;
top: -$border-width;
.block-editor-block-icon {
font-size: $default-font-size;
color: $white;
height: $block-toolbar-height;
}

// 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;
// The button here has a special style to appear as a toolbar.
.components-button {
min-width: $button-size;
color: $white;
height: $block-toolbar-height + 2 * $border-width;

// 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;
}

&:active {
color: $white;
}
display: flex;
}
.block-selection-button_select-button.components-button {
padding: 0;
}
}

Expand Down