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

Smooth Native Multi Block Selection #16835

Merged
merged 4 commits into from
Nov 29, 2019
Merged

Smooth Native Multi Block Selection #16835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b46ad9c
Squash:
ellatrix Nov 29, 2019
a1095bf
Add comment
ellatrix Nov 29, 2019
9ea4bc4
E2e: wait for selection to update
ellatrix Nov 29, 2019
07fdb73
Extract logic from componentDidUpdate
ellatrix Nov 29, 2019
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
70 changes: 51 additions & 19 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ const preventDrag = ( event ) => {
};

function BlockListBlock( {
blockRef,
mode,
isFocusMode,
hasFixedToolbar,
Expand Down Expand Up @@ -102,16 +101,14 @@ function BlockListBlock( {
enableAnimation,
isNavigationMode,
setNavigationMode,
isMultiSelecting,
} ) {
// Random state used to rerender the component if needed, ideally we don't need this
const [ , updateRerenderState ] = useState( {} );
const rerender = () => updateRerenderState( {} );

// Reference of the wrapper
const wrapper = useRef( null );
useEffect( () => {
blockRef( wrapper.current, clientId );
}, [] );

// Reference to the block edit node
const blockNodeRef = useRef();
Expand Down Expand Up @@ -207,6 +204,19 @@ function BlockListBlock( {
* @param {boolean} ignoreInnerBlocks Should not focus inner blocks.
*/
const focusTabbable = ( ignoreInnerBlocks ) => {
const selection = window.getSelection();

if ( selection.rangeCount && ! selection.isCollapsed ) {
const { startContainer, endContainer } = selection.getRangeAt( 0 );

if (
! blockNodeRef.current.contains( startContainer ) ||
! blockNodeRef.current.contains( endContainer )
) {
selection.removeAllRanges();
}
}

// Focus is captured by the wrapper node, so while focus transition
// should only consider tabbables within editable display, since it
// may be the wrapper itself or a side control which triggered the
Expand Down Expand Up @@ -333,12 +343,14 @@ function BlockListBlock( {
}
};

const isPointerDown = useRef( false );

/**
* Begins tracking cursor multi-selection when clicking down within block.
*
* @param {MouseEvent} event A mousedown event.
*/
const onPointerDown = ( event ) => {
const onMouseDown = ( event ) => {
// Not the main button.
// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
if ( event.button !== 0 ) {
Expand All @@ -362,7 +374,7 @@ function BlockListBlock( {
// Avoid triggering multi-selection if we click toolbars/inspectors
// and all elements that are outside the Block Edit DOM tree.
} else if ( blockNodeRef.current.contains( event.target ) ) {
onSelectionStart( clientId );
isPointerDown.current = true;

// Allow user to escape out of a multi-selection to a singular
// selection of a block via click. This is handled here since
Expand All @@ -375,6 +387,20 @@ function BlockListBlock( {
}
};

const onMouseUp = () => {
isPointerDown.current = false;
};

const onMouseLeave = () => {
if ( isPointerDown.current ) {
onSelectionStart( clientId );
}

hideHoverEffects();

isPointerDown.current = false;
};

const selectOnOpen = ( open ) => {
if ( open && ! isSelected ) {
onSelect();
Expand Down Expand Up @@ -412,9 +438,10 @@ function BlockListBlock( {
! showEmptyBlockSideInserter &&
! isPartOfMultiSelection &&
! isTypingWithinBlock;
const shouldShowBreadcrumb =
const shouldShowBreadcrumb = ! isMultiSelecting && (
( isSelected && isNavigationMode ) ||
( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock )
);
const shouldShowContextualToolbar =
! isNavigationMode &&
! hasFixedToolbar &&
Expand All @@ -427,9 +454,12 @@ function BlockListBlock( {

// Insertion point can only be made visible if the block is at the
// the extent of a multi-selection, or not in a multi-selection.
const shouldShowInsertionPoint =
const shouldShowInsertionPoint = ! isMultiSelecting && (
( isPartOfMultiSelection && isFirstMultiSelected ) ||
! isPartOfMultiSelection;
! isPartOfMultiSelection
);

const shouldRenderDropzone = shouldShowInsertionPoint;

// The wp-block className is important for editor styles.
// Generate the wrapper class names handling the different states of the block.
Expand Down Expand Up @@ -529,22 +559,22 @@ function BlockListBlock( {
rootClientId={ rootClientId }
/>
) }
<BlockDropZone
{ shouldRenderDropzone && <BlockDropZone
clientId={ clientId }
rootClientId={ rootClientId }
/>
{ isFirstMultiSelected && (
<BlockMultiControls
rootClientId={ rootClientId }
moverDirection={ moverDirection }
/>
) }
/> }
<div
className={ classnames(
'editor-block-list__block-edit block-editor-block-list__block-edit',
{ 'has-mover-inside': moverDirection === 'horizontal' },
) }
>
{ isFirstMultiSelected && (
<BlockMultiControls
rootClientId={ rootClientId }
moverDirection={ moverDirection }
/>
) }
{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
{ shouldShowBreadcrumb && (
<BlockBreadcrumb
Expand Down Expand Up @@ -577,7 +607,9 @@ function BlockListBlock( {
<IgnoreNestedEvents
ref={ blockNodeRef }
onDragStart={ preventDrag }
onMouseDown={ onPointerDown }
onMouseDown={ onMouseDown }
onMouseUp={ onMouseUp }
onMouseLeave={ onMouseLeave }
data-block={ clientId }
>
<BlockCrashBoundary onError={ onBlockError }>
Expand Down
Loading