Skip to content

Commit

Permalink
[Mobile] Moves block settings and more button to the toolbar (#52289)
Browse files Browse the repository at this point in the history 
* Remove BlockMobileToolbar

* Refactor BlockSettingsButton

* Update BlockToolbar with new order for buttons

* Clean up BlockMobileToolbar refactor

* Update EditorPage with new swipeToolbarToElement and updates removeBlock, toggleFormatting and addBlock helpers

* Update E2E Tests

* Update BlockList to remove inline block settings options

* Update Gallery test

* Update BlockDraggable test

* Update BlockMover

* EditorPage utils - Update swipeToolbarToElement to take into account swiping to the right
  • Loading branch information
Gerardo Pacheco authored Jul 6, 2023
1 parent dbc146a commit eaf6715
Show file tree
Hide file tree
Showing 19 changed files with 219 additions and 361 deletions.
54 changes: 0 additions & 54 deletions packages/block-editor/src/components/block-draggable/test/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,16 +133,6 @@ describe( 'BlockDraggable', () => {
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();

// Start dragging from block's mobile toolbar
fireLongPress(
paragraphBlock,
'draggable-trigger-mobile-toolbar'
);
expect( getDraggableChip( screen ) ).toBeVisible();
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();
} ) );

it( 'does not enable drag mode when selected and editing text', async () =>
Expand Down Expand Up @@ -243,16 +233,6 @@ describe( 'BlockDraggable', () => {
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();

// Start dragging from block's mobile toolbar
fireLongPress(
imageBlock,
'draggable-trigger-mobile-toolbar'
);
expect( getDraggableChip( screen ) ).toBeVisible();
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();
} ) );
} );

Expand Down Expand Up @@ -301,16 +281,6 @@ describe( 'BlockDraggable', () => {
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();

// Start dragging from block's mobile toolbar
fireLongPress(
galleryBlock,
'draggable-trigger-mobile-toolbar'
);
expect( getDraggableChip( screen ) ).toBeVisible();
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();
} ) );

it( 'enables drag mode when nested block is selected', async () =>
Expand All @@ -336,20 +306,6 @@ describe( 'BlockDraggable', () => {
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();

// After dropping the block, the gallery item gets automatically selected.
// Hence, we have to select the gallery item again.
fireEvent.press( galleryItem );

// Start dragging from nested block's mobile toolbar
fireLongPress(
galleryItem,
'draggable-trigger-mobile-toolbar'
);
expect( getDraggableChip( screen ) ).toBeVisible();
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();
} ) );
} );

Expand Down Expand Up @@ -390,16 +346,6 @@ describe( 'BlockDraggable', () => {
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();

// Start dragging from block's mobile toolbar
fireLongPress(
spacerBlock,
'draggable-trigger-mobile-toolbar'
);
expect( getDraggableChip( screen ) ).toBeVisible();
// "firePanGesture" finishes the dragging gesture
firePanGesture( blockDraggableWrapper );
expect( getDraggableChip( screen ) ).not.toBeDefined();
} ) );
} );
} );
Expand Down
30 changes: 1 addition & 29 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@ import { Pressable, useWindowDimensions, View } from 'react-native';
/**
* WordPress dependencies
*/
import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
import { useCallback, useMemo, useState } from '@wordpress/element';
import {
GlobalStylesContext,
getMergedGlobalStyles,
useMobileGlobalStylesColors,
alignmentHelpers,
useGlobalStyles,
} from '@wordpress/components';
import {
Expand All @@ -36,9 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
import BlockEdit from '../block-edit';
import BlockDraggable from '../block-draggable';
import BlockInvalidWarning from './block-invalid-warning';
import BlockMobileToolbar from '../block-mobile-toolbar';
import BlockOutline from './block-outline';
import styles from './block.scss';
import { store as blockEditorStore } from '../../store';
import { useLayout } from './layout';
import useSetting from '../use-setting';
Expand All @@ -63,27 +60,19 @@ function getWrapperProps( value, getWrapperPropsFunction ) {

function BlockWrapper( {
accessibilityLabel,
align,
blockWidth,
children,
clientId,
draggingClientId,
draggingEnabled,
isDescendentBlockSelected,
isParentSelected,
isSelected,
isStackedHorizontally,
isTouchable,
marginHorizontal,
marginVertical,
onDeleteBlock,
onFocus,
} ) {
const { width: screenWidth } = useWindowDimensions();
const anchorNodeRef = useRef();
const { isFullWidth } = alignmentHelpers;
const isScreenWidthEqual = blockWidth === screenWidth;
const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
const blockWrapperStyles = { flex: 1 };
const blockWrapperStyle = [
blockWrapperStyles,
Expand Down Expand Up @@ -116,19 +105,6 @@ function BlockWrapper( {
>
{ children }
</BlockDraggable>
<View style={ styles.neutralToolbar } ref={ anchorNodeRef }>
{ isSelected && (
<BlockMobileToolbar
anchorNodeRef={ anchorNodeRef.current }
blockWidth={ blockWidth }
clientId={ clientId }
draggingClientId={ draggingClientId }
isFullWidth={ isFullWidthToolbar }
isStackedHorizontally={ isStackedHorizontally }
onDelete={ onDeleteBlock }
/>
) }
</View>
</Pressable>
);
}
Expand Down Expand Up @@ -295,7 +271,6 @@ function BlockListBlock( {
),
] );

const { align } = attributes;
const isFocused = isSelected || isDescendentBlockSelected;
const isTouchable =
isSelected ||
Expand All @@ -312,8 +287,6 @@ function BlockListBlock( {
return (
<BlockWrapper
accessibilityLabel={ accessibilityLabel }
align={ align }
blockWidth={ blockWidth }
clientId={ clientId }
draggingClientId={ draggingClientId }
draggingEnabled={ draggingEnabled }
Expand All @@ -325,7 +298,6 @@ function BlockListBlock( {
isTouchable={ isTouchable }
marginHorizontal={ marginHorizontal }
marginVertical={ marginVertical }
onDeleteBlock={ onDeleteBlock }
onFocus={ onFocus }
>
{ () =>
Expand Down
7 changes: 1 addition & 6 deletions packages/block-editor/src/components/block-list/block.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,10 @@
min-height: 50px;
}

.neutralToolbar {
margin-left: -$block-edge-to-content;
margin-right: -$block-edge-to-content;
}

.solidBorder {
position: absolute;
top: -$solid-border-space;
bottom: 0;
bottom: -$solid-border-space;
left: -$solid-border-space;
right: -$solid-border-space;
border-width: $block-selected-border-width;
Expand Down
127 changes: 0 additions & 127 deletions packages/block-editor/src/components/block-mobile-toolbar/index.native.js
View file

This file was deleted.

16 changes: 0 additions & 16 deletions packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
View file

This file was deleted.

6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-mover/index.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Platform } from 'react-native';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Picker, ToolbarButton } from '@wordpress/components';
import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
Expand Down Expand Up @@ -107,7 +107,7 @@ export const BlockMover = ( {
}

return (
<>
<ToolbarGroup>
<ToolbarButton
title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
isDisabled={ isFirst }
Expand Down Expand Up @@ -136,7 +136,7 @@ export const BlockMover = ( {
leftAlign={ true }
hideCancelButton={ Platform.OS !== 'ios' }
/>
</>
</ToolbarGroup>
);
};

Expand Down
Loading

1 comment on commit eaf6715

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in eaf6715.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5477927187
📝 Reported issues:

Please sign in to comment.