From 4f6e4076c0c0e7f08d3834ed9e31f23eecdae32b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Dec 2022 09:49:35 +0100 Subject: [PATCH 1/4] Allow adding new templates and template parts directly from the sidebar --- .../src/components/add-new-template/index.js | 9 +++-- .../add-new-template/new-template-part.js | 13 +++++-- .../add-new-template/new-template.js | 15 +++++--- .../components/add-new-template/style.scss | 4 -- .../edit-site/src/components/layout/index.js | 2 +- .../src/components/layout/style.scss | 2 +- .../edit-site/src/components/list/header.js | 6 ++- .../sidebar-navigation-screen-main/index.js | 4 +- .../index.js | 38 +++++++++++++------ .../sidebar-navigation-screen/style.scss | 6 ++- 10 files changed, 64 insertions(+), 35 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js index 89abbc0aa4614c..c3ba06f065bb99 100644 --- a/packages/edit-site/src/components/add-new-template/index.js +++ b/packages/edit-site/src/components/add-new-template/index.js @@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data'; import NewTemplate from './new-template'; import NewTemplatePart from './new-template-part'; -export default function AddNewTemplate( { templateType = 'wp_template' } ) { +export default function AddNewTemplate( { + templateType = 'wp_template', + ...props +} ) { const postType = useSelect( ( select ) => select( coreStore ).getPostType( templateType ), [ templateType ] @@ -21,9 +24,9 @@ export default function AddNewTemplate( { templateType = 'wp_template' } ) { } if ( templateType === 'wp_template' ) { - return ; + return ; } else if ( templateType === 'wp_template_part' ) { - return ; + return ; } return null; diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js index 783545bac826b7..578cfa515bd2c2 100644 --- a/packages/edit-site/src/components/add-new-template/new-template-part.js +++ b/packages/edit-site/src/components/add-new-template/new-template-part.js @@ -12,6 +12,7 @@ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; import { store as coreStore } from '@wordpress/core-data'; +import { plus } from '@wordpress/icons'; /** * Internal dependencies @@ -20,7 +21,11 @@ import { useHistory } from '../routes'; import { store as editSiteStore } from '../../store'; import CreateTemplatePartModal from '../create-template-part-modal'; -export default function NewTemplatePart( { postType } ) { +export default function NewTemplatePart( { + postType, + showIcon = true, + toggleProps, +} ) { const history = useHistory(); const [ isModalOpen, setIsModalOpen ] = useState( false ); const { createErrorNotice } = useDispatch( noticesStore ); @@ -83,12 +88,14 @@ export default function NewTemplatePart( { postType } ) { return ( <> { isModalOpen && ( { () => ( <> diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss index 51fb9af347c2ce..f247bfa214cfb6 100644 --- a/packages/edit-site/src/components/add-new-template/style.scss +++ b/packages/edit-site/src/components/add-new-template/style.scss @@ -1,8 +1,4 @@ .edit-site-new-template-dropdown { - .components-dropdown-menu__toggle { - padding: 6px 12px; - } - .edit-site-new-template-dropdown__popover { @include break-small() { min-width: 300px; diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index ab3d90eabb83a1..a652f1ad183e8c 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -138,7 +138,7 @@ export default function Layout( { onError } ) { { showEditButton && ( + +
+ { config[ postType ].labels.title } +
+ { ! isMobileViewport && ( + + + { isEditorPage && ( + + ) } + ) } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index e3044e95bbdd05..91c64bbd4c3ad2 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -6,7 +6,7 @@ } .edit-site-sidebar-navigation-screen__content { - margin: 0 $button-size; + margin: 0 $grid-unit-20 0 $button-size; flex-grow: 1; overflow-y: auto; } @@ -19,11 +19,13 @@ box-shadow: 0 $grid-unit-10 $grid-unit-20 $gray-900; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; + padding-right: $grid-unit-20; } .edit-site-sidebar-navigation-screen__title { font-size: calc(1.56 * 13px); - font-weight: 600; + font-weight: 500; + flex-grow: 1; } .edit-site-sidebar-navigation-screen__back { From c489d5479e1b1cb43803527831c38101dc033cfc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 12 Dec 2022 11:45:34 +0100 Subject: [PATCH 2/4] Fix e2e tests --- .../src/components/sidebar-navigation-screen-main/index.js | 2 +- .../src/components/sidebar-navigation-screen-templates/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 210e245bbcd017..6c1be45533e74f 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 @@ -36,7 +36,7 @@ export default function SidebarNavigationScreenMain() {
{ __( 'Design' ) }
{ ! isMobileViewport && isEditorPage && (