Skip to content

Commit

Permalink
Try version of grid where manual mode means all blocks have a columnS…
Browse files Browse the repository at this point in the history
…tart and rowStart
  • Loading branch information
noisysocks committed Apr 24, 2024
1 parent 2fe83bd commit 006dc77
Show file tree
Hide file tree
Showing 17 changed files with 801 additions and 320 deletions.
60 changes: 36 additions & 24 deletions packages/block-editor/src/components/block-mover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,22 @@ function BlockMover( {
isBlockMoverUpButtonDisabled,
isBlockMoverDownButtonDisabled,
} ) {
const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
const {
canMove,
rootClientId,
isFirst,
isLast,
orientation,
isManualGrid,
} = useSelect(
( select ) => {
const {
getBlockIndex,
getBlockListSettings,
canMoveBlocks,
getBlockOrder,
getBlockRootClientId,
getBlockAttributes,
} = select( blockEditorStore );
const normalizedClientIds = Array.isArray( clientIds )
? clientIds
Expand All @@ -44,13 +52,17 @@ function BlockMover( {
normalizedClientIds[ normalizedClientIds.length - 1 ]
);
const blockOrder = getBlockOrder( _rootClientId );
const { layout = {} } = getBlockAttributes( _rootClientId ) ?? {};

return {
canMove: canMoveBlocks( clientIds, _rootClientId ),
rootClientId: _rootClientId,
isFirst: firstIndex === 0,
isLast: lastIndex === blockOrder.length - 1,
orientation: getBlockListSettings( _rootClientId )?.orientation,
// TODO: Doesn't feel great to couple BlockMover and grid layouts.
// TODO: Can we use useLayout() instead?
isManualGrid: layout.type === 'grid' && !! layout.columnCount,
};
},
[ clientIds ]
Expand All @@ -60,8 +72,6 @@ function BlockMover( {
return null;
}

const dragHandleLabel = __( 'Drag' );

return (
<ToolbarGroup
className={ classnames( 'block-editor-block-mover', {
Expand All @@ -75,7 +85,7 @@ function BlockMover( {
icon={ dragHandle }
className="block-editor-block-mover__drag-handle"
aria-hidden="true"
label={ dragHandleLabel }
label={ __( 'Drag' ) }
// Should not be able to tab to drag handle as this
// button can only be used with a pointer device.
tabIndex="-1"
Expand All @@ -84,26 +94,28 @@ function BlockMover( {
) }
</BlockDraggable>
) }
<div className="block-editor-block-mover__move-button-container">
<ToolbarItem>
{ ( itemProps ) => (
<BlockMoverUpButton
disabled={ isBlockMoverUpButtonDisabled }
clientIds={ clientIds }
{ ...itemProps }
/>
) }
</ToolbarItem>
<ToolbarItem>
{ ( itemProps ) => (
<BlockMoverDownButton
disabled={ isBlockMoverDownButtonDisabled }
clientIds={ clientIds }
{ ...itemProps }
/>
) }
</ToolbarItem>
</div>
{ ! isManualGrid && (
<div className="block-editor-block-mover__move-button-container">
<ToolbarItem>
{ ( itemProps ) => (
<BlockMoverUpButton
disabled={ isBlockMoverUpButtonDisabled }
clientIds={ clientIds }
{ ...itemProps }
/>
) }
</ToolbarItem>
<ToolbarItem>
{ ( itemProps ) => (
<BlockMoverDownButton
disabled={ isBlockMoverDownButtonDisabled }
clientIds={ clientIds }
{ ...itemProps }
/>
) }
</ToolbarItem>
</div>
) }
</ToolbarGroup>
);
}
Expand Down

This file was deleted.

This file was deleted.

2 changes: 0 additions & 2 deletions packages/block-editor/src/components/grid-visualizer/index.js

This file was deleted.

33 changes: 0 additions & 33 deletions packages/block-editor/src/components/grid-visualizer/style.scss

This file was deleted.

5 changes: 0 additions & 5 deletions packages/block-editor/src/components/grid-visualizer/utils.js

This file was deleted.

Loading

0 comments on commit 006dc77

Please sign in to comment.