From 8b4e68e6d82627e39576ed0af92f55d49532a2ab Mon Sep 17 00:00:00 2001 From: Jimmy Comack Date: Fri, 28 Aug 2020 14:47:00 +0200 Subject: [PATCH] Added functionality to support announcing of moving blocks up, down, left and right --- .../src/components/block-mover/button.js | 2 +- .../components/keyboard-shortcuts/index.js | 46 ++++++----- packages/block-editor/src/store/actions.js | 3 +- packages/block-editor/src/store/effects.js | 76 +++++++++++++++++++ 4 files changed, 106 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js index d1b4f4b5df2cbb..d93ed62dcbfc50 100644 --- a/packages/block-editor/src/components/block-mover/button.js +++ b/packages/block-editor/src/components/block-mover/button.js @@ -121,7 +121,7 @@ const BlockMoverButton = forwardRef( direction === 'up' ? moveBlocksUp : moveBlocksDown; const onClick = ( event ) => { - moverFunction( clientIds, rootClientId ); + moverFunction( clientIds, rootClientId, orientation ); if ( props.onClick ) { props.onClick( event ); } diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js index 4091626b5c93dd..b52b1ee84efdc0 100644 --- a/packages/block-editor/src/components/keyboard-shortcuts/index.js +++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js @@ -12,23 +12,31 @@ import { __ } from '@wordpress/i18n'; function KeyboardShortcuts() { // Shortcuts Logic - const { clientIds, rootBlocksClientIds, rootClientId } = useSelect( - ( select ) => { - const { - getSelectedBlockClientIds, - getBlockOrder, - getBlockRootClientId, - } = select( 'core/block-editor' ); - const selectedClientIds = getSelectedBlockClientIds(); - const [ firstClientId ] = selectedClientIds; - return { - clientIds: selectedClientIds, - rootBlocksClientIds: getBlockOrder(), - rootClientId: getBlockRootClientId( firstClientId ), - }; - }, - [] - ); + const { + clientIds, + rootBlocksClientIds, + rootClientId, + orientation, + } = useSelect( ( select ) => { + const { + getSelectedBlockClientIds, + getBlockOrder, + getBlockRootClientId, + getBlockListSettings, + } = select( 'core/block-editor' ); + const selectedClientIds = getSelectedBlockClientIds(); + const [ firstClientId ] = selectedClientIds; + const blockRootClientId = getBlockRootClientId( firstClientId ); + const { orientation: blockListOrientation } = + getBlockListSettings( blockRootClientId ) || {}; + + return { + clientIds: selectedClientIds, + rootBlocksClientIds: getBlockOrder(), + rootClientId: blockRootClientId, + orientation: blockListOrientation || 'vertical', + }; + }, [] ); const { duplicateBlocks, @@ -47,7 +55,7 @@ function KeyboardShortcuts() { useCallback( ( event ) => { event.preventDefault(); - moveBlocksUp( clientIds, rootClientId ); + moveBlocksUp( clientIds, rootClientId, orientation ); }, [ clientIds, moveBlocksUp ] ), @@ -60,7 +68,7 @@ function KeyboardShortcuts() { useCallback( ( event ) => { event.preventDefault(); - moveBlocksDown( clientIds, rootClientId ); + moveBlocksDown( clientIds, rootClientId, orientation ); }, [ clientIds, moveBlocksDown ] ), diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 963ce993aae83b..fa08336c86657f 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -356,11 +356,12 @@ export function replaceBlock( clientId, block ) { * @return {Function} Action creator. */ function createOnMove( type ) { - return ( clientIds, rootClientId ) => { + return ( clientIds, rootClientId, orientation ) => { return { clientIds: castArray( clientIds ), type, rootClientId, + orientation, }; }; } diff --git a/packages/block-editor/src/store/effects.js b/packages/block-editor/src/store/effects.js index 5142020ffffa1e..5bc3825c3f474e 100644 --- a/packages/block-editor/src/store/effects.js +++ b/packages/block-editor/src/store/effects.js @@ -35,6 +35,7 @@ import { getTemplate, isValidTemplate, getSelectionStart, + getSettings, } from './selectors'; /** @@ -66,6 +67,57 @@ export function validateBlocksToTemplate( action, store ) { } } +/** + * Announces when a block is moved. + * + * @param {Object} state The current state. + * @param {string} direction The direction the block was moved in. + */ +export function announceBlockMoved( state, direction ) { + const blockCount = getSelectedBlockCount( state ); + let message; + + switch ( direction ) { + case 'up': + /* translators: %s: number of selected blocks */ + message = _n( + '%s block moved up.', + '%s blocks moved up.', + blockCount + ); + break; + case 'down': + /* translators: %s: number of selected blocks */ + message = _n( + '%s block moved down.', + '%s blocks moved down.', + blockCount + ); + break; + case 'left': + /* translators: %s: number of selected blocks */ + message = _n( + '%s block moved left.', + '%s blocks moved left.', + blockCount + ); + break; + case 'right': + /* translators: %s: number of selected blocks */ + message = _n( + '%s block moved right.', + '%s blocks moved right.', + blockCount + ); + break; + default: + /* translators: %s: number of selected blocks */ + message = _n( '%s block moved.', '%s blocks moved.', blockCount ); + } + + speak( sprintf( message, blockCount, direction ), 'assertive' ); +} + export default { MERGE_BLOCKS( action, store ) { const { dispatch } = store; @@ -219,6 +271,30 @@ export default { ) ); }, + MOVE_BLOCKS_DOWN: ( action, { getState } ) => { + const state = getState(); + const settings = getSettings( state ); + + let direction = 'down'; + + if ( action.orientation === 'horizontal' ) { + direction = settings.isRTL ? 'left' : 'right'; + } + + announceBlockMoved( state, direction ); + }, + MOVE_BLOCKS_UP: ( action, { getState } ) => { + const state = getState(); + const settings = getSettings( state ); + + let direction = 'up'; + + if ( action.orientation === 'horizontal' ) { + direction = settings.isRTL ? 'right' : 'left'; + } + + announceBlockMoved( state, direction ); + }, RESET_BLOCKS: [ validateBlocksToTemplate ], MULTI_SELECT: ( action, { getState } ) => { const blockCount = getSelectedBlockCount( getState() );