From a2da3b5eb9908dfd6be2870f09a8ddd742de0e90 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 9 May 2023 09:24:03 +0100 Subject: [PATCH 1/3] Add the pages menu to the site editor --- .../sidebar-navigation-screen-main/index.js | 11 ++- .../index.js | 12 +-- .../sidebar-navigation-screen-page/index.js | 59 +++++++++++++ .../sidebar-navigation-screen-pages/index.js | 85 +++++++++++++++++++ .../sidebar-navigation-subtitle/index.js | 5 ++ .../sidebar-navigation-subtitle/style.scss | 7 ++ .../edit-site/src/components/sidebar/index.js | 8 ++ .../use-sync-path-with-url.js | 1 + packages/edit-site/src/style.scss | 1 + 9 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-page/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-subtitle/index.js create mode 100644 packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index fa735876eee6ed..a35e07220d52c4 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -6,7 +6,7 @@ import { __experimentalNavigatorButton as NavigatorButton, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { layout, symbol, navigation, styles } from '@wordpress/icons'; +import { layout, symbol, navigation, styles, page } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; @@ -76,6 +76,15 @@ export default function SidebarNavigationScreenMain() { { __( 'Styles' ) } ) } + + + { __( 'Pages' ) } + } - description={ - postType === 'page' - ? __( - 'Pages are static and are not listed by date. Pages do not use tags or categories.' - ) - : __( - 'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.' - ) - } + description={ __( + 'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.' + ) } content={ <> { record?.link ? ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js new file mode 100644 index 00000000000000..5acfc98ffe52c1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -0,0 +1,59 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useDispatch } from '@wordpress/data'; +import { + __experimentalUseNavigator as useNavigator, + ExternalLink, +} from '@wordpress/components'; +import { useEntityRecord } from '@wordpress/core-data'; +import { decodeEntities } from '@wordpress/html-entities'; +import { pencil } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; +import SidebarButton from '../sidebar-button'; + +export default function SidebarNavigationScreenPage() { + const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); + const { + params: { postId }, + } = useNavigator(); + const { record } = useEntityRecord( 'postType', 'page', postId ); + + return ( + setCanvasMode( 'edit' ) } + label={ __( 'Edit' ) } + icon={ pencil } + /> + } + description={ __( + 'Pages are static and are not listed by date. Pages do not use tags or categories.' + ) } + content={ + <> + { record?.link ? ( + + { record.link } + + ) : null } + { record + ? decodeEntities( record?.description?.rendered ) + : null } + + } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js new file mode 100644 index 00000000000000..2ece05651cd3f3 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -0,0 +1,85 @@ +/** + * WordPress dependencies + */ +import { + __experimentalItemGroup as ItemGroup, + __experimentalItem as Item, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useEntityRecords } from '@wordpress/core-data'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import { useLink } from '../routes/link'; +import SidebarNavigationItem from '../sidebar-navigation-item'; +import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle'; + +const PageItem = ( { postId, ...props } ) => { + const linkInfo = useLink( { + postType: 'page', + postId, + } ); + return ; +}; + +export default function SidebarNavigationScreenPages() { + const { records: pages, isResolving: isLoading } = useEntityRecords( + 'postType', + 'page', + { + orderby: 'date', + } + ); + + return ( + + { isLoading && ( + + { __( 'Loading pages' ) } + + ) } + { ! isLoading && ( + <> + + { __( 'Recent' ) } + + + { ! pages?.length && ( + { __( 'No page found' ) } + ) } + { pages?.map( ( page ) => ( + + { decodeEntities( + page.title?.rendered + ) ?? __( '(no title)' ) } + + ) ) } + { + document.location = + 'edit.php?post_type=page'; + } } + > + { __( 'Manage all pages' ) } + + + + ) } + + } + /> + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js new file mode 100644 index 00000000000000..2a20f31ce7fb48 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js @@ -0,0 +1,5 @@ +export default function SidebarNavigationSubtitle( { children } ) { + return ( +

{ children }

+ ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss new file mode 100644 index 00000000000000..735145ca1d80ce --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss @@ -0,0 +1,7 @@ +.edit-site-sidebar-navigation-subtitle { + color: $gray-100; + text-transform: uppercase; + font-weight: 500; + font-size: 11px; + padding: $grid-unit-20 0 0 $grid-unit-20; +} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 91bb2637f12b19..9571d6b54b4039 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -23,6 +23,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen import SaveHub from '../save-hub'; import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item'; import { unlock } from '../../private-apis'; +import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages'; +import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page'; const { useLocation } = unlock( routerPrivateApis ); @@ -43,6 +45,12 @@ function SidebarScreens() { + + + + + + diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js index 47aeff3652aa93..65673b45d60150 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js @@ -20,6 +20,7 @@ export function getPathFromURL( urlParams ) { switch ( urlParams.postType ) { case 'wp_template': case 'wp_template_part': + case 'page': path = `/${ encodeURIComponent( urlParams.postType ) }/${ encodeURIComponent( urlParams.postId ) }`; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index f271d36ef3c026..7137f6c7c1172a 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -28,6 +28,7 @@ @import "./components/sidebar-navigation-screen/style.scss"; @import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; +@import "./components/sidebar-navigation-subtitle/style.scss"; @import "./components/site-hub/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; @import "./components/site-icon/style.scss"; From f68cdff96708364ae37a8a67dac313dad85cfba8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 9 May 2023 11:43:03 +0100 Subject: [PATCH 2/3] Fix url syncing bug --- .../sync-state-with-url/use-sync-path-with-url.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js index 65673b45d60150..04cdef425716fd 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js @@ -77,6 +77,15 @@ export default function useSyncPathWithURL() { postId: navigatorParams?.postId, path: undefined, } ); + } else if ( + navigatorLocation.path.startsWith( '/page/' ) && + navigatorParams?.postId + ) { + updateUrlParams( { + postType: 'page', + postId: navigatorParams?.postId, + path: undefined, + } ); } else { updateUrlParams( { postType: undefined, From 250d3a68db669f73e27872674db7f270ca959a11 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 9 May 2023 13:35:37 +0100 Subject: [PATCH 3/3] Changes per review --- .../components/sidebar-navigation-screen-pages/index.js | 9 +++------ .../sidebar-navigation-screen-pages/style.scss | 4 ++++ packages/edit-site/src/style.scss | 1 + 3 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js index 2ece05651cd3f3..5f4958f44d2514 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -28,16 +28,13 @@ const PageItem = ( { postId, ...props } ) => { export default function SidebarNavigationScreenPages() { const { records: pages, isResolving: isLoading } = useEntityRecords( 'postType', - 'page', - { - orderby: 'date', - } + 'page' ); return ( { isLoading && ( @@ -66,7 +63,7 @@ export default function SidebarNavigationScreenPages() { ) ) } { document.location = diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss new file mode 100644 index 00000000000000..7bbdd103b6bcea --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss @@ -0,0 +1,4 @@ +.edit-site-sidebar-navigation-screen-pages__see-all { + /* Overrides the margin that comes from the Item component */ + margin-top: $grid-unit-20 !important; +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 7137f6c7c1172a..679d13a08277ac 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -26,6 +26,7 @@ @import "./components/sidebar-button/style.scss"; @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; +@import "./components/sidebar-navigation-screen-pages/style.scss"; @import "./components/sidebar-navigation-screen-template/style.scss"; @import "./components/sidebar-navigation-screen-templates/style.scss"; @import "./components/sidebar-navigation-subtitle/style.scss";