From 8615f433627790eebb7baf246e84b2f9663794c0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 11:23:54 +0800 Subject: [PATCH 01/14] Add moveTo icon --- packages/icons/src/index.js | 1 + packages/icons/src/library/move-to.js | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/icons/src/library/move-to.js diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 22e0b3aa7a7073..3fa3853b61568f 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -122,6 +122,7 @@ export { default as more } from './library/more'; export { default as moreHorizontal } from './library/more-horizontal'; export { default as moreHorizontalMobile } from './library/more-horizontal-mobile'; export { default as moreVertical } from './library/more-vertical'; +export { default as moveTo } from './library/move-to'; export { default as navigation } from './library/navigation'; export { default as overlayText } from './library/overlay-text'; export { default as pageBreak } from './library/page-break'; diff --git a/packages/icons/src/library/move-to.js b/packages/icons/src/library/move-to.js new file mode 100644 index 00000000000000..b4caef9ce499e5 --- /dev/null +++ b/packages/icons/src/library/move-to.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +const moveTo = ( + + + +); + +export default moveTo; From af286ba36fde5f6da37eeba6dac96303faa5cae0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 11:26:46 +0800 Subject: [PATCH 02/14] Add first draft of move to widget area dropdown menu --- .../components/move-to-widget-area/index.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 packages/edit-widgets/src/components/move-to-widget-area/index.js diff --git a/packages/edit-widgets/src/components/move-to-widget-area/index.js b/packages/edit-widgets/src/components/move-to-widget-area/index.js new file mode 100644 index 00000000000000..239287a1c8efd5 --- /dev/null +++ b/packages/edit-widgets/src/components/move-to-widget-area/index.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { + DropdownMenu, + MenuGroup, + MenuItemsChoice, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { moveTo } from '@wordpress/icons'; + +export default function MoveToWidgetArea( { + currentWidgetArea, + widgetAreas, + onSelect, +} ) { + return ( + + + ( { + value: widgetArea.slug, + label: widgetArea.name, + } ) ) } + value={ currentWidgetArea.slug } + onSelect={ onSelect } + /> + + + ); +} From 31dd7ae24d1bad7243ea6f9028d89438c7a7284c Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 11:33:59 +0800 Subject: [PATCH 03/14] Reorganise editor filters --- packages/edit-widgets/src/{hooks => filters}/index.js | 2 +- .../components/index.js => filters/replace-media-upload.js} | 0 packages/edit-widgets/src/index.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/edit-widgets/src/{hooks => filters}/index.js (50%) rename packages/edit-widgets/src/{hooks/components/index.js => filters/replace-media-upload.js} (100%) diff --git a/packages/edit-widgets/src/hooks/index.js b/packages/edit-widgets/src/filters/index.js similarity index 50% rename from packages/edit-widgets/src/hooks/index.js rename to packages/edit-widgets/src/filters/index.js index c6cbc1d173e861..ea1a8c260cc7a9 100644 --- a/packages/edit-widgets/src/hooks/index.js +++ b/packages/edit-widgets/src/filters/index.js @@ -1,4 +1,4 @@ /** * Internal dependencies */ -import './components'; +import './replace-media-upload'; diff --git a/packages/edit-widgets/src/hooks/components/index.js b/packages/edit-widgets/src/filters/replace-media-upload.js similarity index 100% rename from packages/edit-widgets/src/hooks/components/index.js rename to packages/edit-widgets/src/filters/replace-media-upload.js diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index 521c997ec791b3..78ea17b68c8a3b 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -17,7 +17,7 @@ import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wor * Internal dependencies */ import './store'; -import './hooks'; +import './filters'; import * as widgetArea from './blocks/widget-area'; import Layout from './components/layout'; import registerLegacyWidgetVariations from './register-legacy-widget-variations'; From a8b3bb0916d9bfb457d96908d0e0e75ccc891d84 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 12:03:15 +0800 Subject: [PATCH 04/14] Use callback for child of DropdownMenu --- .../components/move-to-widget-area/index.js | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/edit-widgets/src/components/move-to-widget-area/index.js b/packages/edit-widgets/src/components/move-to-widget-area/index.js index 239287a1c8efd5..29db740ac787d6 100644 --- a/packages/edit-widgets/src/components/move-to-widget-area/index.js +++ b/packages/edit-widgets/src/components/move-to-widget-area/index.js @@ -16,16 +16,22 @@ export default function MoveToWidgetArea( { } ) { return ( - - ( { - value: widgetArea.slug, - label: widgetArea.name, - } ) ) } - value={ currentWidgetArea.slug } - onSelect={ onSelect } - /> - + { ( { onClose } ) => ( + + ( { + value: widgetArea.id, + label: widgetArea.name, + info: widgetArea.description, + } ) ) } + value={ currentWidgetArea?.id } + onSelect={ ( value ) => { + onSelect( value ); + onClose(); + } } + /> + + ) } ); } From 8dc9d9d0c213cd291a381d926cca0557fd6d5691 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 12:03:51 +0800 Subject: [PATCH 05/14] Add filter for showing move to widget area menu --- packages/edit-widgets/src/filters/index.js | 1 + .../src/filters/move-to-widget-area.js | 55 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 packages/edit-widgets/src/filters/move-to-widget-area.js diff --git a/packages/edit-widgets/src/filters/index.js b/packages/edit-widgets/src/filters/index.js index ea1a8c260cc7a9..3cd2ae58dc5bf3 100644 --- a/packages/edit-widgets/src/filters/index.js +++ b/packages/edit-widgets/src/filters/index.js @@ -1,4 +1,5 @@ /** * Internal dependencies */ +import './move-to-widget-area'; import './replace-media-upload'; diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js new file mode 100644 index 00000000000000..b9943cc65d885d --- /dev/null +++ b/packages/edit-widgets/src/filters/move-to-widget-area.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ + +import { BlockControls } from '@wordpress/block-editor'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; +import { addFilter } from '@wordpress/hooks'; + +/** + * Internal dependencies + */ +import MoveToWidgetArea from '../components/move-to-widget-area'; + +const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const { __internalWidgetId } = props; + const { widgetAreas, currentWidgetArea } = useSelect( + ( select ) => { + const selectors = select( 'core/edit-widgets' ); + return { + widgetAreas: selectors.getWidgetAreas(), + currentWidgetArea: __internalWidgetId + ? selectors.getWidgetAreaForWidgetId( + __internalWidgetId + ) + : undefined, + }; + }, + [ __internalWidgetId ] + ); + + return ( + <> + { props.name !== 'core/widget-area' && ( + + {} } + /> + + ) } + + + ); + }, + 'withMoveToWidgetAreaToolbarItem' +); + +addFilter( + 'editor.BlockEdit', + 'core/edit-widgets/block-edit', + withMoveToWidgetAreaToolbarItem +); From 9577e48ee99775d8ab5dbbaae83de10927f64d4e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 12:11:16 +0800 Subject: [PATCH 06/14] Fix __internalWidgetId prop being part of the attributes not block props --- packages/edit-widgets/src/filters/move-to-widget-area.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js index b9943cc65d885d..84cfaaf2995c7c 100644 --- a/packages/edit-widgets/src/filters/move-to-widget-area.js +++ b/packages/edit-widgets/src/filters/move-to-widget-area.js @@ -14,7 +14,7 @@ import MoveToWidgetArea from '../components/move-to-widget-area'; const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { __internalWidgetId } = props; + const { __internalWidgetId } = props.attributes; const { widgetAreas, currentWidgetArea } = useSelect( ( select ) => { const selectors = select( 'core/edit-widgets' ); From 2ce5dd279cb6cc6fa50c324154244c9836a8db63 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 13:01:03 +0800 Subject: [PATCH 07/14] Use toolbar item for dropdown menu toggle --- .../components/move-to-widget-area/index.js | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/edit-widgets/src/components/move-to-widget-area/index.js b/packages/edit-widgets/src/components/move-to-widget-area/index.js index 29db740ac787d6..6171c37ad331a7 100644 --- a/packages/edit-widgets/src/components/move-to-widget-area/index.js +++ b/packages/edit-widgets/src/components/move-to-widget-area/index.js @@ -5,6 +5,7 @@ import { DropdownMenu, MenuGroup, MenuItemsChoice, + ToolbarItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { moveTo } from '@wordpress/icons'; @@ -15,23 +16,31 @@ export default function MoveToWidgetArea( { onSelect, } ) { return ( - - { ( { onClose } ) => ( - - ( { - value: widgetArea.id, - label: widgetArea.name, - info: widgetArea.description, - } ) ) } - value={ currentWidgetArea?.id } - onSelect={ ( value ) => { - onSelect( value ); - onClose(); - } } - /> - + + { ( toggleProps ) => ( + + { ( { onClose } ) => ( + + ( { + value: widgetArea.id, + label: widgetArea.name, + info: widgetArea.description, + } ) ) } + value={ currentWidgetArea?.id } + onSelect={ ( value ) => { + onSelect( value ); + onClose(); + } } + /> + + ) } + ) } - + ); } From 4d776b27cc9898b420500ce5bf1b000813ea4c28 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 13 Apr 2021 14:40:21 +0800 Subject: [PATCH 08/14] Move button to end of toolbar and place in own toolbar group --- .../components/move-to-widget-area/index.js | 57 ++++++++++--------- .../src/filters/move-to-widget-area.js | 2 +- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/edit-widgets/src/components/move-to-widget-area/index.js b/packages/edit-widgets/src/components/move-to-widget-area/index.js index 6171c37ad331a7..b2d44624b4d16c 100644 --- a/packages/edit-widgets/src/components/move-to-widget-area/index.js +++ b/packages/edit-widgets/src/components/move-to-widget-area/index.js @@ -5,6 +5,7 @@ import { DropdownMenu, MenuGroup, MenuItemsChoice, + ToolbarGroup, ToolbarItem, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -16,31 +17,35 @@ export default function MoveToWidgetArea( { onSelect, } ) { return ( - - { ( toggleProps ) => ( - - { ( { onClose } ) => ( - - ( { - value: widgetArea.id, - label: widgetArea.name, - info: widgetArea.description, - } ) ) } - value={ currentWidgetArea?.id } - onSelect={ ( value ) => { - onSelect( value ); - onClose(); - } } - /> - - ) } - - ) } - + + + { ( toggleProps ) => ( + + { ( { onClose } ) => ( + + ( { + value: widgetArea.id, + label: widgetArea.name, + info: widgetArea.description, + } ) + ) } + value={ currentWidgetArea?.id } + onSelect={ ( value ) => { + onSelect( value ); + onClose(); + } } + /> + + ) } + + ) } + + ); } diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js index 84cfaaf2995c7c..362f9c31a16f9c 100644 --- a/packages/edit-widgets/src/filters/move-to-widget-area.js +++ b/packages/edit-widgets/src/filters/move-to-widget-area.js @@ -32,6 +32,7 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( return ( <> + { props.name !== 'core/widget-area' && ( ) } - ); }, From 5868fe8365d1ba2ea82ec96b5283bfd302eea180 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Apr 2021 11:06:41 +0800 Subject: [PATCH 09/14] Add moveBlockToWidgetArea action and implement for toolbar button --- .../src/filters/move-to-widget-area.js | 11 ++++- packages/edit-widgets/src/store/actions.js | 40 +++++++++++++++++++ 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js index 362f9c31a16f9c..283566806e3839 100644 --- a/packages/edit-widgets/src/filters/move-to-widget-area.js +++ b/packages/edit-widgets/src/filters/move-to-widget-area.js @@ -4,7 +4,7 @@ import { BlockControls } from '@wordpress/block-editor'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; /** @@ -30,6 +30,8 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( [ __internalWidgetId ] ); + const { moveBlockToWidgetArea } = useDispatch( 'core/edit-widgets' ); + return ( <> @@ -38,7 +40,12 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( {} } + onSelect={ ( widgetAreaId ) => { + moveBlockToWidgetArea( + props.clientId, + widgetAreaId + ); + } } /> ) } diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index c8934021c18a5a..7a383abcde1405 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -321,3 +321,43 @@ export function* closeGeneralSidebar() { editWidgetsStoreName ); } + +/** + * Action that handles moving a block between widget areas + * + * @param {string} clientId The clientId of the block to move. + * @param {string} widgetAreaId The id of the widget area to move the block to. + */ +export function* moveBlockToWidgetArea( clientId, widgetAreaId ) { + const fromRootClientId = yield select( + 'core/block-editor', + 'getBlockRootClientId', + [ clientId ] + ); + + // Search the top level blocks (widget areas) for the one with the matching + // id attribute. Makes the assumption that all top-level blocks are widget + // areas. + const widgetAreas = yield select( 'core/block-editor', 'getBlocks' ); + const toWidgetAreaBlock = widgetAreas.find( + ( { attributes } ) => attributes.id === widgetAreaId + ); + const toRootClientId = toWidgetAreaBlock.clientId; + + // Get the index for moving to the end of the the destination widget area. + const destinationClientIds = yield select( + 'core/block-editor', + 'getBlockOrder', + toRootClientId + ); + const toIndex = destinationClientIds.length; + + yield dispatch( + 'core/block-editor', + 'moveBlocksToPosition', + [ clientId ], + fromRootClientId, + toRootClientId, + toIndex + ); +} From 7b744cef6375422aeb6200057967c69525b19609 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Apr 2021 11:39:47 +0800 Subject: [PATCH 10/14] Open widget area for moving before moving --- packages/edit-widgets/src/store/actions.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index 7a383abcde1405..2b5afc82ec4427 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -352,6 +352,22 @@ export function* moveBlockToWidgetArea( clientId, widgetAreaId ) { ); const toIndex = destinationClientIds.length; + // Reveal the widget area, if it's not open. + const isDestinationWidgetAreaOpen = yield select( + editWidgetsStoreName, + 'getIsWidgetAreaOpen', + toRootClientId + ); + + if ( ! isDestinationWidgetAreaOpen ) { + yield dispatch( + editWidgetsStoreName, + 'setIsWidgetAreaOpen', + toRootClientId, + true + ); + } + yield dispatch( 'core/block-editor', 'moveBlocksToPosition', From aaecc99f7aa2b387cbc2b509a3bc19169ee2b505 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Apr 2021 11:51:50 +0800 Subject: [PATCH 11/14] Handle scrolling when block moves into new parent --- .../selection-scroll-into-view/index.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/selection-scroll-into-view/index.js b/packages/block-editor/src/components/selection-scroll-into-view/index.js index 5e9ff07f1ca6d8..bbfb6f7370119b 100644 --- a/packages/block-editor/src/components/selection-scroll-into-view/index.js +++ b/packages/block-editor/src/components/selection-scroll-into-view/index.js @@ -17,10 +17,21 @@ import { getBlockDOMNode } from '../../utils/dom'; import { store as blockEditorStore } from '../../store'; export function useScrollSelectionIntoView( ref ) { - const selectionEnd = useSelect( - ( select ) => select( blockEditorStore ).getBlockSelectionEnd(), - [] - ); + // Although selectionRootClientId isn't used directly in calculating + // whether scrolling should occur, it is used as a dependency of the + // effect to take into account situations where a block might be moved + // to a different parent. In this situation, the selectionEnd clientId + // remains the same, so the rootClientId is used to trigger the effect. + const { selectionRootClientId, selectionEnd } = useSelect( ( select ) => { + const selectors = select( blockEditorStore ); + const selectionEndClientId = selectors.getBlockSelectionEnd(); + return { + selectionEnd: selectionEndClientId, + selectionRootClientId: selectors.getBlockRootClientId( + selectionEndClientId + ), + }; + }, [] ); useEffect( () => { if ( ! selectionEnd ) { @@ -45,7 +56,7 @@ export function useScrollSelectionIntoView( ref ) { scrollIntoView( extentNode, scrollContainer, { onlyScrollIfNeeded: true, } ); - }, [ selectionEnd ] ); + }, [ selectionRootClientId, selectionEnd ] ); } /** From c3e40ca5ee5531c8345ff9f2d99d7cda5b8c4e8a Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Apr 2021 14:49:56 +0800 Subject: [PATCH 12/14] Use store variable instead of string --- packages/edit-widgets/src/filters/move-to-widget-area.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js index 283566806e3839..5a825c16e0b93f 100644 --- a/packages/edit-widgets/src/filters/move-to-widget-area.js +++ b/packages/edit-widgets/src/filters/move-to-widget-area.js @@ -11,13 +11,14 @@ import { addFilter } from '@wordpress/hooks'; * Internal dependencies */ import MoveToWidgetArea from '../components/move-to-widget-area'; +import { store as editWidgetsStore } from '../store'; const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { const { __internalWidgetId } = props.attributes; const { widgetAreas, currentWidgetArea } = useSelect( ( select ) => { - const selectors = select( 'core/edit-widgets' ); + const selectors = select( editWidgetsStore ); return { widgetAreas: selectors.getWidgetAreas(), currentWidgetArea: __internalWidgetId @@ -30,7 +31,7 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent( [ __internalWidgetId ] ); - const { moveBlockToWidgetArea } = useDispatch( 'core/edit-widgets' ); + const { moveBlockToWidgetArea } = useDispatch( editWidgetsStore ); return ( <> From 441b039dc534d50de1db25c361073e1835f7e6be Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Apr 2021 16:15:18 +0800 Subject: [PATCH 13/14] Improve naming conventions --- packages/edit-widgets/src/store/actions.js | 23 +++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index 2b5afc82ec4427..9c5b86924e2908 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -329,7 +329,7 @@ export function* closeGeneralSidebar() { * @param {string} widgetAreaId The id of the widget area to move the block to. */ export function* moveBlockToWidgetArea( clientId, widgetAreaId ) { - const fromRootClientId = yield select( + const sourceRootClientId = yield select( 'core/block-editor', 'getBlockRootClientId', [ clientId ] @@ -339,41 +339,42 @@ export function* moveBlockToWidgetArea( clientId, widgetAreaId ) { // id attribute. Makes the assumption that all top-level blocks are widget // areas. const widgetAreas = yield select( 'core/block-editor', 'getBlocks' ); - const toWidgetAreaBlock = widgetAreas.find( + const destinationWidgetAreaBlock = widgetAreas.find( ( { attributes } ) => attributes.id === widgetAreaId ); - const toRootClientId = toWidgetAreaBlock.clientId; + const destinationRootClientId = destinationWidgetAreaBlock.clientId; // Get the index for moving to the end of the the destination widget area. - const destinationClientIds = yield select( + const destinationInnerBlocksClientIds = yield select( 'core/block-editor', 'getBlockOrder', - toRootClientId + destinationRootClientId ); - const toIndex = destinationClientIds.length; + const destinationIndex = destinationInnerBlocksClientIds.length; // Reveal the widget area, if it's not open. const isDestinationWidgetAreaOpen = yield select( editWidgetsStoreName, 'getIsWidgetAreaOpen', - toRootClientId + destinationRootClientId ); if ( ! isDestinationWidgetAreaOpen ) { yield dispatch( editWidgetsStoreName, 'setIsWidgetAreaOpen', - toRootClientId, + destinationRootClientId, true ); } + // Move the block. yield dispatch( 'core/block-editor', 'moveBlocksToPosition', [ clientId ], - fromRootClientId, - toRootClientId, - toIndex + sourceRootClientId, + destinationRootClientId, + destinationIndex ); } From 7b2e59cc4ad52592d00e030dcb9655d5621920af Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 15 Apr 2021 15:36:00 +0800 Subject: [PATCH 14/14] Add e2e test --- .../specs/widgets/adding-widgets.test.js | 54 ++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/widgets/adding-widgets.test.js b/packages/e2e-tests/specs/widgets/adding-widgets.test.js index 3bfa04945c2a3a..7f935c12a09b47 100644 --- a/packages/e2e-tests/specs/widgets/adding-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/adding-widgets.test.js @@ -2,11 +2,13 @@ * WordPress dependencies */ import { - visitAdminPage, - deactivatePlugin, activatePlugin, activateTheme, + clickBlockToolbarButton, + deactivatePlugin, pressKeyWithModifier, + showBlockToolbar, + visitAdminPage, } from '@wordpress/e2e-test-utils'; /** @@ -521,6 +523,54 @@ describe( 'Widgets screen', () => { } ` ); } ); + + it( 'allows widgets to be moved between widget areas using the dropdown in the block toolbar', async () => { + const widgetAreas = await page.$$( + '[aria-label="Block: Widget Area"][role="group"]' + ); + const [ firstWidgetArea ] = widgetAreas; + + // Insert a paragraph it should be in the first widget area. + const inserterParagraphBlock = await getBlockInGlobalInserter( + 'Paragraph' + ); + await inserterParagraphBlock.hover(); + await inserterParagraphBlock.click(); + const addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$( + '[data-block][data-type="core/paragraph"][aria-label^="Empty block"]' + ); + await addedParagraphBlockInFirstWidgetArea.focus(); + await page.keyboard.type( 'First Paragraph' ); + + // Check that the block exists in the first widget area. + await page.waitForXPath( + '//*[@aria-label="Block: Widget Area"][@role="group"][1]//p[@data-type="core/paragraph"][.="First Paragraph"]' + ); + + // Move the block to the second widget area. + await showBlockToolbar(); + await clickBlockToolbarButton( 'Move to widget area' ); + const widgetAreaButton = await page.waitForXPath( + '//button[@role="menuitemradio"][contains(.,"Footer #2")]' + ); + await widgetAreaButton.click(); + + // Check that the block exists in the second widget area. + await page.waitForXPath( + '//*[@aria-label="Block: Widget Area"][@role="group"][2]//p[@data-type="core/paragraph"][.="First Paragraph"]' + ); + + // Assert that the serialized widget areas shows the block as in the second widget area. + await saveWidgets(); + const serializedWidgetAreas2 = await getSerializedWidgetAreas(); + expect( serializedWidgetAreas2 ).toMatchInlineSnapshot( ` + Object { + "sidebar-2": "
+

First Paragraph

+
", + } + ` ); + } ); } ); async function saveWidgets() {