From 83a834bfa2ae3ff3bdf77270941e9589d9f1699e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 8 Apr 2020 17:05:16 +0300 Subject: [PATCH 01/13] adds delete with menus as state Given deleting entities is a complex endeavor, that will eventually allow to undo deletes before saving, this approach advances the navigation screen and allows for user testing. --- packages/edit-navigation/package.json | 2 +- .../src/components/menu-editor/index.js | 40 ++++++++++++++++++- .../src/components/menu-editor/style.scss | 8 ++++ .../src/components/menus-editor/index.js | 16 +++++++- 4 files changed, 62 insertions(+), 4 deletions(-) diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json index 92713ffcfaf0a..8db819af1e34f 100644 --- a/packages/edit-navigation/package.json +++ b/packages/edit-navigation/package.json @@ -22,7 +22,7 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.9.2", - "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/api-fetch": "^3.12.0", "@wordpress/block-editor": "file:../block-editor", "@wordpress/block-library": "file:../block-library", "@wordpress/blocks": "file:../blocks", diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index 3e8297bdf5403..f71045533f085 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -1,11 +1,18 @@ +/** + * External dependencies + */ +import { find } from 'lodash'; + /** * WordPress dependencies */ +import apiFetch from '@wordpress/api-fetch'; import { BlockEditorKeyboardShortcuts, BlockEditorProvider, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -15,9 +22,40 @@ import MenuEditorShortcuts from './shortcuts'; import BlockEditorPanel from './block-editor-panel'; import NavigationStructurePanel from './navigation-structure-panel'; -export default function MenuEditor( { menuId, blockEditorSettings } ) { +export default function MenuEditor( { + menuId, + blockEditorSettings, + onDelete, +} ) { + const kind = 'root'; + const name = 'menu'; + const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId ); const isLargeViewport = useViewportMatch( 'medium' ); + const entities = useSelect( ( select ) => + select( 'core' ).getEntitiesByKind( kind ) + ); + + const entity = find( entities, { kind, name } ); + + const deleteMenu = async ( recordId ) => { + const path = `${ entity.baseURL + '/' + recordId + '?force=true' }`; + const deletedRecord = await apiFetch( { + path, + method: 'DELETE', + } ); + return deletedRecord.previous; + }; + + const askToDelete = async () => { + if ( + // eslint-disable-next-line no-alert + window.confirm( __( 'Are you sure you want to delete this menu?' ) ) + ) { + const deletedMenu = await deleteMenu( menuId ); + onDelete( deletedMenu ); + } + }; return (
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index aa7a3d98b33f5..7fdc5cf9f3468 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -66,3 +66,11 @@ // Make panels collapsible in IE. The IE analogue of align-items: self-start;. -ms-grid-row-align: start; } + +.components-panel__header-actions { + margin-top: $grid-unit-20; + margin-bottom: $grid-unit-60; + width: 100%; + display: flex; + justify-content: space-between; +} diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js index b3513b1115044..23b0569e2da4b 100644 --- a/packages/edit-navigation/src/components/menus-editor/index.js +++ b/packages/edit-navigation/src/components/menus-editor/index.js @@ -1,3 +1,7 @@ +/** + * External dependencies + */ +import { filter } from 'lodash'; /** * WordPress dependencies */ @@ -15,14 +19,16 @@ export default function MenusEditor( { blockEditorSettings } ) { const menus = useSelect( ( select ) => select( 'core' ).getMenus() ); const [ menuId, setMenuId ] = useState( 0 ); + const [ stateMenus, setStateMenus ] = useState( false ); useEffect( () => { if ( menus?.length ) { + setStateMenus( menus ); setMenuId( menus[ 0 ].id ); } }, [ menus ] ); - if ( ! menus ) { + if ( ! stateMenus ) { return ; } @@ -33,7 +39,7 @@ export default function MenusEditor( { blockEditorSettings } ) { ( { + options={ stateMenus.map( ( menu ) => ( { value: menu.id, label: menu.name, } ) ) } @@ -47,6 +53,12 @@ export default function MenusEditor( { blockEditorSettings } ) { { + const newStateMenus = filter( stateMenus, ( menu ) => { + return menu.id !== deletedMenu.id; + } ); + setStateMenus( newStateMenus ); + } } /> ) } From 106dacbf6f71108b46468019d08d4ff4c1dcf60d Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 8 Apr 2020 17:23:48 +0300 Subject: [PATCH 02/13] selects first menu after delete --- packages/edit-navigation/src/components/menus-editor/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js index 23b0569e2da4b..ad66c49df86ff 100644 --- a/packages/edit-navigation/src/components/menus-editor/index.js +++ b/packages/edit-navigation/src/components/menus-editor/index.js @@ -58,6 +58,7 @@ export default function MenusEditor( { blockEditorSettings } ) { return menu.id !== deletedMenu.id; } ); setStateMenus( newStateMenus ); + setMenuId( newStateMenus[ 0 ].id ); } } /> ) } From e982b29c51c718414f1edba3add28262e0f753a9 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 9 Apr 2020 18:12:40 +0300 Subject: [PATCH 03/13] adds api fetch to package-lock --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 6e67612f2fc93..4f0338b247fd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10117,7 +10117,7 @@ "version": "file:packages/edit-navigation", "requires": { "@babel/runtime": "^7.9.2", - "@wordpress/api-fetch": "file:packages/api-fetch", + "@wordpress/api-fetch": "^3.12.0", "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/block-library": "file:packages/block-library", "@wordpress/blocks": "file:packages/blocks", From c168c89288257255e7258ca732250f31319560ed Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 27 Apr 2020 14:03:12 +0300 Subject: [PATCH 04/13] adds a new MenuDelete component removes extra getEntities call --- .../src/components/menu-delete/index.js | 33 +++++++++++++++++ .../src/components/menu-editor/index.js | 37 ++----------------- 2 files changed, 37 insertions(+), 33 deletions(-) create mode 100644 packages/edit-navigation/src/components/menu-delete/index.js diff --git a/packages/edit-navigation/src/components/menu-delete/index.js b/packages/edit-navigation/src/components/menu-delete/index.js new file mode 100644 index 0000000000000..ab9e3803edf7b --- /dev/null +++ b/packages/edit-navigation/src/components/menu-delete/index.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import apiFetch from '@wordpress/api-fetch'; +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export default function MenuDelete( { menuId, onDelete } ) { + const deleteMenu = async ( recordId ) => { + const path = `${ '/__experimental/menus/' + recordId + '?force=true' }`; + const deletedRecord = await apiFetch( { + path, + method: 'DELETE', + } ); + return deletedRecord.previous; + }; + + const askToDelete = async () => { + if ( + // eslint-disable-next-line no-alert + window.confirm( __( 'Are you sure you want to delete this menu?' ) ) + ) { + const deletedMenu = await deleteMenu( menuId ); + onDelete( deletedMenu ); + } + }; + + return ( + + ); +} diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index f71045533f085..715b763b378f5 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -1,61 +1,32 @@ -/** - * External dependencies - */ -import { find } from 'lodash'; - /** * WordPress dependencies */ -import apiFetch from '@wordpress/api-fetch'; import { BlockEditorKeyboardShortcuts, BlockEditorProvider, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import useNavigationBlocks from './use-navigation-blocks'; import MenuEditorShortcuts from './shortcuts'; +<<<<<<< HEAD import BlockEditorPanel from './block-editor-panel'; import NavigationStructurePanel from './navigation-structure-panel'; +======= +import MenuDelete from '../menu-delete'; +>>>>>>> adds a new MenuDelete component export default function MenuEditor( { menuId, blockEditorSettings, onDelete, } ) { - const kind = 'root'; - const name = 'menu'; const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId ); const isLargeViewport = useViewportMatch( 'medium' ); - const entities = useSelect( ( select ) => - select( 'core' ).getEntitiesByKind( kind ) - ); - - const entity = find( entities, { kind, name } ); - - const deleteMenu = async ( recordId ) => { - const path = `${ entity.baseURL + '/' + recordId + '?force=true' }`; - const deletedRecord = await apiFetch( { - path, - method: 'DELETE', - } ); - return deletedRecord.previous; - }; - - const askToDelete = async () => { - if ( - // eslint-disable-next-line no-alert - window.confirm( __( 'Are you sure you want to delete this menu?' ) ) - ) { - const deletedMenu = await deleteMenu( menuId ); - onDelete( deletedMenu ); - } - }; return (
From f4187cb4fc47e65ec6bd0aa8f99809396dd06579 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 27 Apr 2020 14:47:51 +0300 Subject: [PATCH 05/13] adds delete button styling --- .../src/components/menu-delete/index.js | 7 ++++++- .../src/components/menu-delete/style.scss | 7 +++++++ .../components/menu-editor/block-editor-panel.js | 11 +++++++++++ .../src/components/menu-editor/index.js | 1 - .../src/components/menu-editor/style.scss | 13 +++++++++++-- packages/edit-navigation/src/style.scss | 1 + 6 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 packages/edit-navigation/src/components/menu-delete/style.scss diff --git a/packages/edit-navigation/src/components/menu-delete/index.js b/packages/edit-navigation/src/components/menu-delete/index.js index ab9e3803edf7b..e1f9118c42587 100644 --- a/packages/edit-navigation/src/components/menu-delete/index.js +++ b/packages/edit-navigation/src/components/menu-delete/index.js @@ -26,7 +26,12 @@ export default function MenuDelete( { menuId, onDelete } ) { }; return ( - ); diff --git a/packages/edit-navigation/src/components/menu-delete/style.scss b/packages/edit-navigation/src/components/menu-delete/style.scss new file mode 100644 index 0000000000000..23c97372aca98 --- /dev/null +++ b/packages/edit-navigation/src/components/menu-delete/style.scss @@ -0,0 +1,7 @@ +.components-button.is-link.menu-editor-button__delete { + color: $red; + &:hover { + background: transparent; + color: $red; + } +} diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index 3e1a2885b464d..7780fbfb9dc2e 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -48,6 +48,11 @@ export default function BlockEditorPanel( { saveBlocks } ) { } > +
+ +
+
+ +
); diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index 715b763b378f5..a269b9ec48b3f 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -24,7 +24,6 @@ export default function MenuEditor( { blockEditorSettings, onDelete, } ) { - const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId ); const isLargeViewport = useViewportMatch( 'medium' ); diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index 7fdc5cf9f3468..d70196e0c5eb4 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -69,8 +69,17 @@ .components-panel__header-actions { margin-top: $grid-unit-20; + padding-bottom: $grid-unit-20; margin-bottom: $grid-unit-60; width: 100%; - display: flex; - justify-content: space-between; + text-align: right; + border-bottom: 1px solid $light-gray; +} + +.components-panel__footer-actions { + margin-top: $grid-unit-60; + padding-top: $grid-unit-20; + width: 100%; + text-align: left; + border-top: 1px solid $light-gray; } diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss index 1e907633b0724..7ce19c98171c3 100644 --- a/packages/edit-navigation/src/style.scss +++ b/packages/edit-navigation/src/style.scss @@ -1,3 +1,4 @@ @import "./components/layout/style.scss"; @import "./components/menu-editor/style.scss"; @import "./components/menus-editor/style.scss"; +@import "./components/menu-delete/style.scss"; From 6d2eda9f58a58cc8cff91efbd0c1a3b9c1db8d1a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 27 Apr 2020 14:53:46 +0300 Subject: [PATCH 06/13] fixes wrong color names --- .../edit-navigation/src/components/menu-delete/style.scss | 4 ++-- .../edit-navigation/src/components/menu-editor/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-delete/style.scss b/packages/edit-navigation/src/components/menu-delete/style.scss index 23c97372aca98..5e314b1a727fc 100644 --- a/packages/edit-navigation/src/components/menu-delete/style.scss +++ b/packages/edit-navigation/src/components/menu-delete/style.scss @@ -1,7 +1,7 @@ .components-button.is-link.menu-editor-button__delete { - color: $red; + color: $alert-red; &:hover { background: transparent; - color: $red; + color: $alert-red; } } diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index d70196e0c5eb4..d505972b97990 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -73,7 +73,7 @@ margin-bottom: $grid-unit-60; width: 100%; text-align: right; - border-bottom: 1px solid $light-gray; + border-bottom: 1px solid $light-gray-300; } .components-panel__footer-actions { @@ -81,5 +81,5 @@ padding-top: $grid-unit-20; width: 100%; text-align: left; - border-top: 1px solid $light-gray; + border-top: 1px solid $light-gray-300; } From 58fb73b2f8d65f271f0caed8479f6b35beb7ee9f Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 27 Apr 2020 15:25:35 +0300 Subject: [PATCH 07/13] fixes rebase issues --- .../src/components/menu-editor/block-editor-panel.js | 12 ++++++------ .../src/components/menu-editor/index.js | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index 7780fbfb9dc2e..7fc46753515bf 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -17,7 +17,12 @@ import { Button, Panel, PanelBody, Popover } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -export default function BlockEditorPanel( { saveBlocks } ) { +/** + * Internal dependencies + */ +import MenuDelete from '../menu-delete'; + +export default function BlockEditorPanel( { onDelete, menuId, saveBlocks } ) { const { isNavigationModeActive, hasSelectedBlock } = useSelect( ( select ) => { const { @@ -41,11 +46,6 @@ export default function BlockEditorPanel( { saveBlocks } ) { return ( - { __( 'Save navigation' ) } - - } >
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index a269b9ec48b3f..cee099cb30352 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -12,12 +12,8 @@ import { useViewportMatch } from '@wordpress/compose'; */ import useNavigationBlocks from './use-navigation-blocks'; import MenuEditorShortcuts from './shortcuts'; -<<<<<<< HEAD import BlockEditorPanel from './block-editor-panel'; import NavigationStructurePanel from './navigation-structure-panel'; -======= -import MenuDelete from '../menu-delete'; ->>>>>>> adds a new MenuDelete component export default function MenuEditor( { menuId, @@ -48,7 +44,11 @@ export default function MenuEditor( { blocks={ blocks } initialOpen={ isLargeViewport } /> - +
); From ed689bb23e9d06816e339acbea7a59fa39387aff Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 27 Apr 2020 15:26:01 +0300 Subject: [PATCH 08/13] fixes rebase issues --- .../src/components/menu-editor/block-editor-panel.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index 7fc46753515bf..368ec38e18121 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -44,9 +44,7 @@ export default function BlockEditorPanel( { onDelete, menuId, saveBlocks } ) { ); return ( - +
diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js index ad66c49df86ff..87b93ce257c55 100644 --- a/packages/edit-navigation/src/components/menus-editor/index.js +++ b/packages/edit-navigation/src/components/menus-editor/index.js @@ -19,7 +19,7 @@ export default function MenusEditor( { blockEditorSettings } ) { const menus = useSelect( ( select ) => select( 'core' ).getMenus() ); const [ menuId, setMenuId ] = useState( 0 ); - const [ stateMenus, setStateMenus ] = useState( false ); + const [ stateMenus, setStateMenus ] = useState( null ); useEffect( () => { if ( menus?.length ) { @@ -53,12 +53,14 @@ export default function MenusEditor( { blockEditorSettings } ) { { + onDeleteMenu={ ( deletedMenu ) => { const newStateMenus = filter( stateMenus, ( menu ) => { - return menu.id !== deletedMenu.id; + return menu.id !== deletedMenu; } ); setStateMenus( newStateMenus ); - setMenuId( newStateMenus[ 0 ].id ); + if ( newStateMenus.length ) { + setMenuId( newStateMenus[ 0 ].id ); + } } } /> ) } diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss index 7ce19c98171c3..9e999764f9f9c 100644 --- a/packages/edit-navigation/src/style.scss +++ b/packages/edit-navigation/src/style.scss @@ -1,4 +1,4 @@ @import "./components/layout/style.scss"; @import "./components/menu-editor/style.scss"; @import "./components/menus-editor/style.scss"; -@import "./components/menu-delete/style.scss"; +@import "./components/delete-menu-button/style.scss"; From e0621bae3280f940cdcef44301b61a9daf19e75c Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 7 May 2020 11:58:24 +0300 Subject: [PATCH 13/13] removes lodash filter --- .../edit-navigation/src/components/menus-editor/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js index 87b93ce257c55..ad5637f069100 100644 --- a/packages/edit-navigation/src/components/menus-editor/index.js +++ b/packages/edit-navigation/src/components/menus-editor/index.js @@ -1,7 +1,3 @@ -/** - * External dependencies - */ -import { filter } from 'lodash'; /** * WordPress dependencies */ @@ -54,7 +50,7 @@ export default function MenusEditor( { blockEditorSettings } ) { menuId={ menuId } blockEditorSettings={ blockEditorSettings } onDeleteMenu={ ( deletedMenu ) => { - const newStateMenus = filter( stateMenus, ( menu ) => { + const newStateMenus = stateMenus.filter( ( menu ) => { return menu.id !== deletedMenu; } ); setStateMenus( newStateMenus );