Skip to content

Commit

Permalink
Move the block movers to the block toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Nov 22, 2019
1 parent c1ccf04 commit f3c561a
Show file tree
Hide file tree
Showing 17 changed files with 169 additions and 391 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -756,6 +756,18 @@ _Returns_

- `boolean`: Whether the caret is within formatted text.

<a name="isDraggingBlocks" href="#isDraggingBlocks">#</a> **isDraggingBlocks**

Returns true if the user is dragging blocks, or false otherwise.

_Parameters_

- _state_ `Object`: Global application state.

_Returns_

- `boolean`: Whether user is dragging blocks.

<a name="isFirstMultiSelectedBlock" href="#isFirstMultiSelectedBlock">#</a> **isFirstMultiSelectedBlock**

Returns true if a multi-selection exists, and the block corresponding to the
Expand Down Expand Up @@ -1177,6 +1189,14 @@ _Returns_

- `Object`: Action object.

<a name="startDraggingBlocks" href="#startDraggingBlocks">#</a> **startDraggingBlocks**

Returns an action object used in signalling that the user has begun to drag blocks.

_Returns_

- `Object`: Action object.

<a name="startMultiSelect" href="#startMultiSelect">#</a> **startMultiSelect**

Returns an action object used in signalling that a block multi-selection has started.
Expand All @@ -1193,6 +1213,14 @@ _Returns_

- `Object`: Action object.

<a name="stopDraggingBlocks" href="#stopDraggingBlocks">#</a> **stopDraggingBlocks**

Returns an action object used in signalling that the user has stopped dragging blocks.

_Returns_

- `Object`: Action object.

<a name="stopMultiSelect" href="#stopMultiSelect">#</a> **stopMultiSelect**

Returns an action object used in signalling that block multi-selection stopped.
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -332,10 +332,6 @@ _Related_

- <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md>

<a name="MultiBlocksSwitcher" href="#MultiBlocksSwitcher">#</a> **MultiBlocksSwitcher**

Undocumented declaration.

<a name="MultiSelectScrollIntoView" href="#MultiSelectScrollIntoView">#</a> **MultiSelectScrollIntoView**

Undocumented declaration.
Expand Down
43 changes: 29 additions & 14 deletions packages/block-editor/src/components/block-draggable/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,44 @@
* WordPress dependencies
*/
import { Draggable } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { useSelect, useDispatch } from '@wordpress/data';

const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, index, onDragStart, onDragEnd } ) => {
const BlockDraggable = ( { children, clientIds } ) => {
const { srcRootClientId, index, isDraggable } = useSelect( ( select ) => {
const {
getBlockIndex,
getBlockRootClientId,
getTemplateLock,
} = select( 'core/block-editor' );
const rootClientId = clientIds.length === 1 ? getBlockRootClientId( clientIds[ 0 ] ) : null;
const templateLock = rootClientId ? getTemplateLock( rootClientId ) : null;

return {
index: getBlockIndex( clientIds[ 0 ], rootClientId ),
srcRootClientId: rootClientId,
isDraggable: clientIds.length === 1 && 'all' !== templateLock,
};
}, [ clientIds ] );
const { startDraggingBlocks, stopDraggingBlocks } = useDispatch( 'core/block-editor' );

if ( ! isDraggable ) {
return null;
}

const blockElementId = `block-${ clientIds[ 0 ] }`;
const transferData = {
type: 'block',
srcIndex: index,
srcRootClientId: rootClientId,
srcClientId: clientId,
srcClientId: clientIds[ 0 ],
srcRootClientId,
};

return (
<Draggable
elementId={ blockElementId }
transferData={ transferData }
onDragStart={ onDragStart }
onDragEnd={ onDragEnd }
onDragStart={ startDraggingBlocks }
onDragEnd={ stopDraggingBlocks }
>
{
( { onDraggableStart, onDraggableEnd } ) => {
Expand All @@ -31,11 +53,4 @@ const BlockDraggable = ( { children, clientId, rootClientId, blockElementId, ind
);
};

export default withSelect( ( select, { clientId } ) => {
const { getBlockIndex, getBlockRootClientId } = select( 'core/block-editor' );
const rootClientId = getBlockRootClientId( clientId );
return {
index: getBlockIndex( clientId, rootClientId ),
rootClientId,
};
} )( BlockDraggable );
export default BlockDraggable;

This file was deleted.

55 changes: 5 additions & 50 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,13 @@ import { compose, pure, ifCondition } from '@wordpress/compose';
* Internal dependencies
*/
import BlockEdit from '../block-edit';
import BlockMover from '../block-mover';
import BlockDropZone from '../block-drop-zone';
import BlockInvalidWarning from './block-invalid-warning';
import BlockCrashWarning from './block-crash-warning';
import BlockCrashBoundary from './block-crash-boundary';
import BlockHtml from './block-html';
import BlockBreadcrumb from './breadcrumb';
import BlockContextualToolbar from './block-contextual-toolbar';
import BlockMultiControls from './multi-controls';
import BlockMobileToolbar from './block-mobile-toolbar';
import BlockInsertionPoint from './insertion-point';
import IgnoreNestedEvents from '../ignore-nested-events';
import InserterWithShortcuts from '../inserter-with-shortcuts';
Expand Down Expand Up @@ -75,11 +72,10 @@ function BlockListBlock( {
isPartOfMultiSelection,
isFirstMultiSelected,
isTypingWithinBlock,
isDragging,
isCaretWithinFormattedText,
isEmptyDefaultBlock,
isMovable,
isParentOfSelectedBlock,
isDraggable,
isSelectionEnabled,
className,
name,
Expand Down Expand Up @@ -171,15 +167,6 @@ function BlockListBlock( {
}
} );

// Handling the dragging state
const [ isDragging, setBlockDraggingState ] = useState( false );
const onDragStart = () => {
setBlockDraggingState( true );
};
const onDragEnd = () => {
setBlockDraggingState( false );
};

// Handling the error state
const [ hasError, setErrorState ] = useState( false );
const onBlockError = () => setErrorState( true );
Expand Down Expand Up @@ -397,13 +384,6 @@ function BlockListBlock( {
! hasFixedToolbar &&
isHovered &&
! isEmptyDefaultBlock;
// We render block movers and block settings to keep them tabbale even if hidden
const shouldRenderMovers =
! isNavigationMode &&
isSelected &&
! showEmptyBlockSideInserter &&
! isPartOfMultiSelection &&
! isTypingWithinBlock;
const shouldShowBreadcrumb =
( isSelected && isNavigationMode ) ||
( ! isNavigationMode && ! isFocusMode && isHovered && ! isEmptyDefaultBlock );
Expand All @@ -415,7 +395,6 @@ function BlockListBlock( {
( isSelected && ( ! isTypingWithinBlock || isCaretWithinFormattedText ) ) ||
isFirstMultiSelected
);
const shouldShowMobileToolbar = ! isNavigationMode && shouldAppearSelected;

// 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.
Expand Down Expand Up @@ -451,20 +430,6 @@ function BlockListBlock( {
};
}
const blockElementId = `block-${ clientId }`;
const blockMover = (
<BlockMover
clientIds={ clientId }
blockElementId={ blockElementId }
isHidden={ ! isSelected }
isDraggable={
isDraggable !== false &&
( ! isPartOfMultiSelection && isMovable )
}
onDragStart={ onDragStart }
onDragEnd={ onDragEnd }
__experimentalOrientation={ moverDirection }
/>
);

// We wrap the BlockEdit component in a div that hides it when editing in
// HTML mode. This allows us to render all of the ancillary pieces
Expand Down Expand Up @@ -525,19 +490,12 @@ function BlockListBlock( {
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' },
) }
>
{ shouldRenderMovers && ( moverDirection === 'vertical' ) && blockMover }
{ shouldShowBreadcrumb && (
<BlockBreadcrumb
clientId={ clientId }
Expand Down Expand Up @@ -577,7 +535,6 @@ function BlockListBlock( {
{ isValid && mode === 'html' && (
<BlockHtml clientId={ clientId } />
) }
{ shouldRenderMovers && ( moverDirection === 'horizontal' ) && blockMover }
{ ! isValid && [
<BlockInvalidWarning
key="invalid-warning"
Expand All @@ -589,9 +546,6 @@ function BlockListBlock( {
] }
</BlockCrashBoundary>
{ !! hasError && <BlockCrashWarning /> }
{ shouldShowMobileToolbar && (
<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
) }
</IgnoreNestedEvents>
</div>
{ showInserterShortcuts && (
Expand Down Expand Up @@ -625,6 +579,7 @@ const applyWithSelect = withSelect(
isBlockMultiSelected,
isFirstMultiSelectedBlock,
isTyping,
isDraggingBlocks,
isCaretWithinFormattedText,
getBlockMode,
isSelectionEnabled,
Expand All @@ -644,15 +599,15 @@ const applyWithSelect = withSelect(
const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );
const index = getBlockIndex( clientId, rootClientId );
const blockOrder = getBlockOrder( rootClientId );
const isPartOfMultiSelection = isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId );

// The fallback to `{}` is a temporary fix.
// This function should never be called when a block is not present in the state.
// It happens now because the order in withSelect rendering is not correct.
const { name, attributes, isValid } = block || {};

return {
isPartOfMultiSelection:
isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ),
isDragging: isDraggingBlocks() && ( isSelected || isPartOfMultiSelection ),
isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ),
// We only care about this prop when the block is selected
// Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected.
Expand All @@ -664,12 +619,12 @@ const applyWithSelect = withSelect(
initialPosition: isSelected ? getSelectedBlocksInitialCaretPosition() : null,
isEmptyDefaultBlock:
name && isUnmodifiedDefaultBlock( { name, attributes } ),
isMovable: 'all' !== templateLock,
isLocked: !! templateLock,
isFocusMode: focusMode && isLargeViewport,
hasFixedToolbar: hasFixedToolbar && isLargeViewport,
isLast: index === blockOrder.length - 1,
isNavigationMode: isNavigationMode(),
isPartOfMultiSelection,
isRTL,

// Users of the editor.BlockListBlock filter used to be able to access the block prop
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/block-list/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ class BlockList extends Component {
blockClientIds,
rootClientId,
__experimentalMoverDirection: moverDirection = 'vertical',
isDraggable,
selectedBlockClientId,
multiSelectedBlockClientIds,
hasMultiSelection,
Expand Down Expand Up @@ -227,7 +226,6 @@ class BlockList extends Component {
clientId={ clientId }
blockRef={ this.setBlockRef }
onSelectionStart={ this.onSelectionStart }
isDraggable={ isDraggable }
moverDirection={ moverDirection }

// This prop is explicitely computed and passed down
Expand Down
39 changes: 0 additions & 39 deletions packages/block-editor/src/components/block-list/multi-controls.js

This file was deleted.

Loading

0 comments on commit f3c561a

Please sign in to comment.