Skip to content

Commit

Permalink
Remove block moving mode
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Sep 11, 2024
1 parent 995c4ac commit 66c7c30
Show file tree
Hide file tree
Showing 15 changed files with 34 additions and 397 deletions.
18 changes: 7 additions & 11 deletions docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -857,15 +857,9 @@ _Returns_

### hasBlockMovingClientId

Returns whether block moving mode is enabled.

_Parameters_

- _state_ `Object`: Editor state.

_Returns_
> **Deprecated**
- `string`: Client Id of moving block.
Returns whether block moving mode is enabled.

### hasDraggedInnerBlock

Expand Down Expand Up @@ -1661,11 +1655,13 @@ _Returns_

### setBlockMovingClientId

Action that enables or disables the block moving mode.
> **Deprecated**
_Parameters_
Set the block moving client ID.

- _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
_Returns_

- `Object`: Action object.

### setBlockVisibility

Expand Down
12 changes: 1 addition & 11 deletions packages/block-editor/src/components/block-actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export default function BlockActions( {
getBlockRootClientId,
getBlocksByClientId,
getDirectInsertBlock,
canMoveBlocks,
canRemoveBlocks,
} = select( blockEditorStore );

Expand All @@ -44,7 +43,6 @@ export default function BlockActions( {
: null;

return {
canMove: canMoveBlocks( clientIds ),
canRemove: canRemoveBlocks( clientIds ),
canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
canCopyStyles: blocks.every( ( block ) => {
Expand All @@ -67,8 +65,7 @@ export default function BlockActions( {
);
const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );

const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
selected;
const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;

const {
removeBlocks,
Expand All @@ -77,8 +74,6 @@ export default function BlockActions( {
insertAfterBlock,
insertBeforeBlock,
flashBlock,
setBlockMovingClientId,
selectBlock,
} = useDispatch( blockEditorStore );

const notifyCopy = useNotifyCopy();
Expand All @@ -88,7 +83,6 @@ export default function BlockActions( {
canCopyStyles,
canDuplicate,
canInsertBlock,
canMove,
canRemove,
onDuplicate() {
return duplicateBlocks( clientIds, updateSelection );
Expand All @@ -102,10 +96,6 @@ export default function BlockActions( {
onInsertAfter() {
insertAfterBlock( clientIds[ clientIds.length - 1 ] );
},
onMoveTo() {
selectBlock( clientIds[ 0 ] );
setBlockMovingClientId( clientIds[ 0 ] );
},
onGroup() {
if ( ! clientIds.length ) {
return;
Expand Down
14 changes: 0 additions & 14 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -571,8 +571,6 @@ function BlockListBlockProvider( props ) {
__unstableSelectionHasUnmergeableBlock,
isBlockBeingDragged,
isDragging,
hasBlockMovingClientId,
canInsertBlockType,
__unstableHasActiveBlockOverlayActive,
__unstableGetEditorMode,
getSelectedBlocksInitialCaretPosition,
Expand Down Expand Up @@ -632,7 +630,6 @@ function BlockListBlockProvider( props ) {
clientId,
checkDeep
);
const movingClientId = hasBlockMovingClientId();
const blockEditingMode = getBlockEditingMode( clientId );

const multiple = hasBlockSupport( blockName, 'multiple', true );
Expand Down Expand Up @@ -692,13 +689,6 @@ function BlockListBlockProvider( props ) {
! __unstableSelectionHasUnmergeableBlock(),
isDragging: isBlockBeingDragged( clientId ),
hasChildSelected: isAncestorOfSelectedBlock,
isBlockMovingMode: !! movingClientId,
canInsertMovingBlock:
movingClientId &&
canInsertBlockType(
getBlockName( movingClientId ),
rootClientId
),
isEditingDisabled: blockEditingMode === 'disabled',
hasEditableOutline:
blockEditingMode !== 'disabled' &&
Expand Down Expand Up @@ -743,8 +733,6 @@ function BlockListBlockProvider( props ) {
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
templateLock,
isEditingDisabled,
hasEditableOutline,
Expand Down Expand Up @@ -790,8 +778,6 @@ function BlockListBlockProvider( props ) {
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
templateLock,
isEditingDisabled,
hasEditableOutline,
Expand Down
28 changes: 0 additions & 28 deletions packages/block-editor/src/components/block-list/content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -91,34 +91,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}

// Moving blocks using keyboard (Ellipsis > Move).
& .is-block-moving-mode.block-editor-block-list__block.is-selected {

&::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
transition:
border-color 0.1s linear,
border-style 0.1s linear,
box-shadow 0.1s linear;
right: 0;
left: 0;
top: -$default-block-margin * 0.5;
border-radius: $radius-small;
border-top: 4px solid $gray-400;
bottom: auto;
box-shadow: none;
}
}

& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
&::after {
border-color: var(--wp-admin-theme-color);
}
}

// Ensure an accurate partial text selection.
// To do this, we disable text selection on the main container, then re-enable it only on the
// elements that actually get selected.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
isReusable,
isDragging,
hasChildSelected,
isBlockMovingMode,
canInsertMovingBlock,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
Expand Down Expand Up @@ -180,8 +178,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
'is-reusable': isReusable,
'is-dragging': isDragging,
'has-child-selected': hasChildSelected,
'is-block-moving-mode': isBlockMovingMode,
'can-insert-moving-block': canInsertMovingBlock,
'is-editing-disabled': isEditingDisabled,
'has-editable-outline': hasEditableOutline,
'has-negative-margin': hasNegativeMargin,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,9 @@
import {
createSlotFill,
MenuGroup,
MenuItem,
__experimentalStyleProvider as StyleProvider,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { pipe } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
/>
) }
{ fills }
{ fillProps?.canMove &&
! fillProps?.onlyBlock &&
! isContentOnly && (
<MenuItem
onClick={ pipe(
fillProps?.onClose,
fillProps?.onMoveTo
) }
>
{ __( 'Move to' ) }
</MenuItem>
) }
{ selectedClientIds.length === 1 && (
<ModifyContentLockMenuItem
clientId={ selectedClientIds[ 0 ] }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export function BlockSettingsDropdown( {
const firstBlockClientId = clientIds[ 0 ];
const {
firstParentClientId,
onlyBlock,
parentBlockType,
previousBlockClientId,
selectedBlockClientIds,
Expand All @@ -67,7 +66,6 @@ export function BlockSettingsDropdown( {
} = useSelect(
( select ) => {
const {
getBlockCount,
getBlockName,
getBlockRootClientId,
getPreviousBlockClientId,
Expand All @@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {

return {
firstParentClientId: _firstParentClientId,
onlyBlock: 1 === getBlockCount( _firstParentClientId ),
parentBlockType:
_firstParentClientId &&
( getActiveBlockVariation(
Expand Down Expand Up @@ -195,15 +192,13 @@ export function BlockSettingsDropdown( {
canCopyStyles,
canDuplicate,
canInsertBlock,
canMove,
canRemove,
onDuplicate,
onInsertAfter,
onInsertBefore,
onRemove,
onCopy,
onPasteStyles,
onMoveTo,
} ) => (
<DropdownMenu
icon={ moreVertical }
Expand Down Expand Up @@ -294,9 +289,6 @@ export function BlockSettingsDropdown( {
<BlockSettingsMenuControls.Slot
fillProps={ {
onClose,
canMove,
onMoveTo,
onlyBlock,
count,
firstBlockClientId,
} }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
Expand All @@ -26,7 +21,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
( select ) => {
const {
getBlock,
hasBlockMovingClientId,
getNextBlockClientId,
getPreviousBlockClientId,
canRemoveBlock,
Expand Down Expand Up @@ -57,7 +51,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
}

return {
blockMovingMode: hasBlockMovingClientId(),
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
Expand All @@ -69,7 +62,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
);

const {
blockMovingMode,
isBlockTemplatePart,
isNextBlockTemplatePart,
isPrevBlockTemplatePart,
Expand All @@ -80,15 +72,11 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
const { removeBlock, __unstableSetEditorMode } =
useDispatch( blockEditorStore );

const classNames = clsx( 'zoom-out-toolbar', {
'is-block-moving-mode': !! blockMovingMode,
} );

const showBlockDraggable = canMove && ! isBlockTemplatePart;

return (
<NavigableToolbar
className={ classNames }
className="zoom-out-toolbar"
/* translators: accessibility text for the block toolbar */
aria-label={ __( 'Block tools' ) }
// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
Expand Down
29 changes: 1 addition & 28 deletions packages/block-editor/src/components/list-view/block-contents.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';

/**
* Internal dependencies
*/
import ListViewBlockSelectButton from './block-select-button';
import BlockDraggable from '../block-draggable';
import { store as blockEditorStore } from '../../store';
import { useListViewContext } from './context';

const ListViewBlockContents = forwardRef(
Expand All @@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
ref
) => {
const { clientId } = block;

const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
( select ) => {
const { hasBlockMovingClientId, getSelectedBlockClientId } =
select( blockEditorStore );
return {
blockMovingClientId: hasBlockMovingClientId(),
selectedBlockInBlockEditor: getSelectedBlockClientId(),
};
},
[]
);

const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
useListViewContext();

const isBlockMoveTarget =
blockMovingClientId && selectedBlockInBlockEditor === clientId;

const className = clsx( 'block-editor-list-view-block-contents', {
'is-dropping-before': isBlockMoveTarget,
} );

// Only include all selected blocks if the currently clicked on block
// is one of the selected blocks. This ensures that if a user attempts
// to drag a block that isn't part of the selection, they're still able
Expand All @@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
{ ( { draggable, onDragStart, onDragEnd } ) => (
<ListViewBlockSelectButton
ref={ ref }
className={ className }
className="block-editor-list-view-block-contents"
block={ block }
onClick={ onClick }
onToggleExpanded={ onToggleExpanded }
Expand Down
Loading

0 comments on commit 66c7c30

Please sign in to comment.