+
);
}
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index ff63879a08f611..173225ceab1ecd 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -127,7 +127,7 @@
}
}
- &.is-navigate-mode::before {
+ .is-navigate-mode &::before {
border-color: $blue-medium-focus;
box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus;
@@ -277,7 +277,7 @@
}
// Select tool/navigation mode shows the default cursor until an additional click edits.
- &.is-navigate-mode {
+ .is-navigate-mode & {
cursor: default;
}
@@ -537,8 +537,21 @@
}
}
+.block-editor-block-list__insertion-point-popover {
+ z-index: z-index(".block-editor-block-list__insertion-point-popover");
+ position: absolute;
+
+ .components-popover__content {
+ background: none;
+ border: none;
+ box-shadow: none;
+ overflow-y: visible;
+ }
+}
+
.components-popover.block-editor-block-list__block-popover {
z-index: z-index(".block-editor-block-list__block-popover");
+ position: absolute;
.components-popover__content {
margin: 0 !important;
diff --git a/packages/block-editor/src/components/block-list/use-multi-selection.js b/packages/block-editor/src/components/block-list/use-multi-selection.js
index 3750c9334a1f61..a0ba7de65a0f01 100644
--- a/packages/block-editor/src/components/block-list/use-multi-selection.js
+++ b/packages/block-editor/src/components/block-list/use-multi-selection.js
@@ -147,18 +147,38 @@ export default function useMultiSelection( ref ) {
selectedBlockClientId,
] );
- const onSelectionChange = useCallback( () => {
+ const onSelectionChange = useCallback( ( { isSelectionEnd } ) => {
const selection = window.getSelection();
- // If no selection is found, end multi selection.
+ // If no selection is found, end multi selection and enable all rich
+ // text areas.
if ( ! selection.rangeCount || selection.isCollapsed ) {
+ toggleRichText( ref.current, true );
return;
}
const clientId = getBlockClientId( selection.focusNode );
+ const isSingularSelection = startClientId.current === clientId;
- if ( startClientId.current === clientId ) {
+ if ( isSingularSelection ) {
selectBlock( clientId );
+
+ // If the selection is complete (on mouse up), and no multiple
+ // blocks have been selected, set focus back to the anchor element
+ // if the anchor element contains the selection. Additionally, rich
+ // text elements that were previously disabled can now be enabled
+ // again.
+ if ( isSelectionEnd ) {
+ toggleRichText( ref.current, true );
+
+ if ( selection.rangeCount ) {
+ const { commonAncestorContainer } = selection.getRangeAt( 0 );
+
+ if ( anchorElement.current.contains( commonAncestorContainer ) ) {
+ anchorElement.current.focus();
+ }
+ }
+ }
} else {
const startPath = [ ...getBlockParents( startClientId.current ), startClientId.current ];
const endPath = [ ...getBlockParents( clientId ), clientId ];
@@ -178,21 +198,8 @@ export default function useMultiSelection( ref ) {
// The browser selection won't have updated yet at this point, so wait
// until the next animation frame to get the browser selection.
rafId.current = window.requestAnimationFrame( () => {
- onSelectionChange();
+ onSelectionChange( { isSelectionEnd: true } );
stopMultiSelect();
- toggleRichText( ref.current, true );
-
- const selection = window.getSelection();
-
- // If the anchor element contains the selection, set focus back to
- // the anchor element.
- if ( selection.rangeCount ) {
- const { commonAncestorContainer } = selection.getRangeAt( 0 );
-
- if ( anchorElement.current.contains( commonAncestorContainer ) ) {
- anchorElement.current.focus();
- }
- }
} );
}, [ onSelectionChange, stopMultiSelect ] );
diff --git a/packages/block-editor/src/components/block-mover/mover-description.js b/packages/block-editor/src/components/block-mover/mover-description.js
index d9a62de176d821..cb0203f8c60cfc 100644
--- a/packages/block-editor/src/components/block-mover/mover-description.js
+++ b/packages/block-editor/src/components/block-mover/mover-description.js
@@ -49,47 +49,130 @@ export function getBlockMoverDescription( selectedCount, type, firstIndex, isFir
if ( dir > 0 && ! isLast ) {
// moving down
- return sprintf(
- // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: Direction of movement ( up, down, left, right ), 4: New position
- __( 'Move %1$s block from position %2$d %3$s to position %4$d' ),
- type,
- position,
- getMovementDirection( 'down' ),
- ( position + 1 ),
- );
+ const movementDirection = getMovementDirection( 'down' );
+
+ if ( movementDirection === 'down' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d down to position %3$d' ),
+ type,
+ position,
+ ( position + 1 ),
+ );
+ }
+
+ if ( movementDirection === 'left' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d left to position %3$d' ),
+ type,
+ position,
+ ( position + 1 ),
+ );
+ }
+
+ if ( movementDirection === 'right' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d right to position %3$d' ),
+ type,
+ position,
+ ( position + 1 ),
+ );
+ }
}
if ( dir > 0 && isLast ) {
// moving down, and is the last item
- // translators: 1: Type of block (i.e. Text, Image etc), 2: Direction of movement ( up, down, left, right )
- return sprintf(
- __( 'Block %1$s is at the end of the content and can’t be moved %2$s' ),
- type,
- getMovementDirection( 'down' ),
+ const movementDirection = getMovementDirection( 'down' );
- );
+ if ( movementDirection === 'down' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the end of the content and can’t be moved down' ),
+ type,
+ );
+ }
+
+ if ( movementDirection === 'left' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the end of the content and can’t be moved left' ),
+ type,
+ );
+ }
+
+ if ( movementDirection === 'right' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the end of the content and can’t be moved right' ),
+ type,
+ );
+ }
}
if ( dir < 0 && ! isFirst ) {
// moving up
- return sprintf(
- // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: Direction of movement ( up, down, left, right ), 4: New position
- __( 'Move %1$s block from position %2$d %3$s to position %4$d' ),
- type,
- position,
- getMovementDirection( 'up' ),
- ( position - 1 ),
- );
+ const movementDirection = getMovementDirection( 'up' );
+
+ if ( movementDirection === 'up' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d up to position %3$d' ),
+ type,
+ position,
+ ( position - 1 ),
+ );
+ }
+
+ if ( movementDirection === 'left' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d left to position %3$d' ),
+ type,
+ position,
+ ( position - 1 ),
+ );
+ }
+
+ if ( movementDirection === 'right' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc), 2: Position of selected block, 3: New position
+ __( 'Move %1$s block from position %2$d right to position %3$d' ),
+ type,
+ position,
+ ( position - 1 ),
+ );
+ }
}
if ( dir < 0 && isFirst ) {
// moving up, and is the first item
- // translators: 1: Type of block (i.e. Text, Image etc), 2: Direction of movement ( up, down, left, right )
- return sprintf(
- __( 'Block %1$s is at the beginning of the content and can’t be moved %2$s' ),
- type,
- getMovementDirection( 'up' ),
- );
+ const movementDirection = getMovementDirection( 'up' );
+
+ if ( movementDirection === 'up' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the beginning of the content and can’t be moved up' ),
+ type,
+ );
+ }
+
+ if ( movementDirection === 'left' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the beginning of the content and can’t be moved left' ),
+ type,
+ );
+ }
+
+ if ( movementDirection === 'right' ) {
+ return sprintf(
+ // translators: 1: Type of block (i.e. Text, Image etc)
+ __( 'Block %1$s is at the beginning of the content and can’t be moved right' ),
+ type,
+ );
+ }
}
}
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 22ff1e94352ba1..bb4c84c0d9f963 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -49,12 +49,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
/>