From bc39750f34e16fdd0a2b5d7d9cc6e5d4611f465c Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 4 Sep 2024 14:16:55 +1000 Subject: [PATCH 1/8] Adds a preference to disable the loading of the Choose a pattern modal when adding new pages. Adds a footer to the modal component. --- packages/edit-post/src/index.js | 1 + packages/edit-site/src/index.js | 1 + packages/edit-site/src/posts.js | 1 + .../src/components/preferences-modal/index.js | 13 +++++ .../components/start-page-options/index.js | 56 ++++++++++++++++--- .../components/start-page-options/style.scss | 22 ++++++++ 6 files changed, 87 insertions(+), 7 deletions(-) diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 51abac654da29..daf789cb0a2ec 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -70,6 +70,7 @@ export function initializeEditor( showBlockBreadcrumbs: true, showIconLabels: false, showListViewByDefault: false, + enableChoosePatternModal: true, isPublishSidebarEnabled: true, } ); diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 4ed5b96e3844d..1aceecc4d8b1f 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -79,6 +79,7 @@ export function initializeEditor( id, settings ) { openPanels: [ 'post-status' ], showBlockBreadcrumbs: true, showListViewByDefault: false, + enableChoosePatternModal: true, } ); if ( window.__experimentalMediaProcessing ) { diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js index 9e2582ac23328..78d823b56c4c1 100644 --- a/packages/edit-site/src/posts.js +++ b/packages/edit-site/src/posts.js @@ -72,6 +72,7 @@ export function initializePostsDashboard( id, settings ) { openPanels: [ 'post-status' ], showBlockBreadcrumbs: true, showListViewByDefault: false, + enableChoosePatternModal: true, } ); dispatch( editSiteStore ).updateSettings( settings ); diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index e7cc637dd0aed..12b5bcef3720b 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -26,6 +26,7 @@ import PageAttributesCheck from '../page-attributes/check'; import PostTypeSupportCheck from '../post-type-support-check'; import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { useStartPatterns } from '../start-page-options'; const { PreferencesModal, @@ -57,6 +58,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { const { setIsListViewOpened, setIsInserterOpened } = useDispatch( editorStore ); const { set: setPreference } = useDispatch( preferencesStore ); + const starterPatterns = useStartPatterns(); const sections = useMemo( () => @@ -208,6 +210,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { ) } label={ __( 'Spotlight mode' ) } /> + { starterPatterns?.length && ( + + ) } { extraSections?.appearance } ), @@ -314,6 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { setIsListViewOpened, setPreference, isLargeViewport, + starterPatterns, ] ); diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index d888d1ccc4342..fcae88d7588bb 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,7 +1,12 @@ /** * WordPress dependencies */ -import { Modal } from '@wordpress/components'; +import { + Button, + CheckboxControl, + Modal, + __experimentalHStack as HStack, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useState, useMemo, useEffect } from '@wordpress/element'; import { @@ -12,6 +17,8 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useAsyncList } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; import { __unstableSerializeAndClean } from '@wordpress/blocks'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies @@ -19,7 +26,7 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks'; import { store as editorStore } from '../../store'; import { TEMPLATE_POST_TYPE } from '../../store/constants'; -function useStartPatterns() { +export function useStartPatterns() { // A pattern is a start pattern if it includes 'core/post-content' in its blockTypes, // and it has no postTypes declared and the current post type is page or if // the current post type is part of the postTypes declared. @@ -85,18 +92,19 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) { } function StartPageOptionsModal( { onClose } ) { + const { set: setPreference } = useDispatch( preferencesStore ); + const [ disablePreference, setDisablePreference ] = useState( false ); const startPatterns = useStartPatterns(); - const hasStartPattern = startPatterns.length > 0; - if ( ! hasStartPattern ) { - return null; + if ( ! startPatterns.length ) { + return; } return (
+
+ + + setDisablePreference( newValue ) + } + /> + + +
); } @@ -118,9 +153,16 @@ export default function StartPageOptions() { getCurrentPostId, } = select( editorStore ); const _postType = getCurrentPostType(); - + const preferencesModalActive = + select( interfaceStore ).isModalActive( 'editor/preferences' ); + const choosePatternModalEnabled = select( preferencesStore ).get( + 'core', + 'enableChoosePatternModal' + ); return { shouldEnableModal: + choosePatternModalEnabled && + ! preferencesModalActive && ! isEditedPostDirty() && isEditedPostEmpty() && TEMPLATE_POST_TYPE !== _postType, diff --git a/packages/editor/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss index 129d670526c70..bc165127b1db3 100644 --- a/packages/editor/src/components/start-page-options/style.scss +++ b/packages/editor/src/components/start-page-options/style.scss @@ -24,3 +24,25 @@ } } } + +.editor-start-page-options__modal-content { + margin-bottom: 72px; +} + +.editor-start-page-options__modal-footer { + box-sizing: border-box; + border-bottom: $border-width solid transparent; + padding: $grid-unit-10 $grid-unit-40 $grid-unit-10; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: $header-height + $grid-unit-15; + width: 100%; + z-index: z-index(".components-modal__header"); + position: absolute; + bottom: 0; + left: 0; + background: $white; + border-top: 1px solid $gray-300; +} From 48fabd8982e25e0414bc3226cfb6f0262dd27057 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 4 Sep 2024 15:12:30 +1000 Subject: [PATCH 2/8] Return an empty array from the memoized value of useStartPatterns() so that the preferences modal has a value to test. --- .../editor/src/components/start-page-options/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index fcae88d7588bb..1c13ba6bbcc5d 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -52,8 +52,14 @@ export function useStartPatterns() { ); return useMemo( () => { - // filter patterns without postTypes declared if the current postType is page - // or patterns that declare the current postType in its post type array. + if ( ! blockPatternsWithPostContentBlockType?.length ) { + return []; + } + + /* + * Filter patterns without postTypes declared if the current postType is page + * or patterns that declare the current postType in its post type array. + */ return blockPatternsWithPostContentBlockType.filter( ( pattern ) => { return ( ( postType === 'page' && ! pattern.postTypes ) || From c3e41abdfc740006c23414a860625224092ffbe3 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 4 Sep 2024 15:37:13 +1000 Subject: [PATCH 3/8] Don't reset the `isClosed` value in the same editor session. This prevents the modal popping open between page > template part > page navigation. --- .../components/start-page-options/index.js | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 1c13ba6bbcc5d..31b7572176b1e 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -8,7 +8,7 @@ import { __experimentalHStack as HStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useState, useMemo, useEffect } from '@wordpress/element'; +import { useState, useMemo } from '@wordpress/element'; import { store as blockEditorStore, __experimentalBlockPatternsList as BlockPatternsList, @@ -151,37 +151,24 @@ function StartPageOptionsModal( { onClose } ) { export default function StartPageOptions() { const [ isClosed, setIsClosed ] = useState( false ); - const { shouldEnableModal, postType, postId } = useSelect( ( select ) => { - const { - isEditedPostDirty, - isEditedPostEmpty, - getCurrentPostType, - getCurrentPostId, - } = select( editorStore ); - const _postType = getCurrentPostType(); + const shouldEnableModal = useSelect( ( select ) => { + const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } = + select( editorStore ); const preferencesModalActive = select( interfaceStore ).isModalActive( 'editor/preferences' ); const choosePatternModalEnabled = select( preferencesStore ).get( 'core', 'enableChoosePatternModal' ); - return { - shouldEnableModal: - choosePatternModalEnabled && - ! preferencesModalActive && - ! isEditedPostDirty() && - isEditedPostEmpty() && - TEMPLATE_POST_TYPE !== _postType, - postType: _postType, - postId: getCurrentPostId(), - }; + return ( + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + TEMPLATE_POST_TYPE !== getCurrentPostType() + ); }, [] ); - useEffect( () => { - // Should reset the modal state when navigating to a new page/post. - setIsClosed( false ); - }, [ postType, postId ] ); - if ( ! shouldEnableModal || isClosed ) { return null; } From 01552df0c402c053d7cc8ce1a67ad7997190e5c3 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 6 Sep 2024 11:09:12 +1000 Subject: [PATCH 4/8] Move preferences toggle to Publishing Removed modal footer and related components --- .../src/components/preferences-modal/index.js | 20 ++++----- .../components/start-page-options/index.js | 43 +++---------------- 2 files changed, 15 insertions(+), 48 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 12b5bcef3720b..d06b3637a88d2 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -156,6 +156,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { /> ) } + { starterPatterns?.length && ( + + ) } { extraSections?.general } ), @@ -210,16 +220,6 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { ) } label={ __( 'Spotlight mode' ) } /> - { starterPatterns?.length && ( - - ) } { extraSections?.appearance } ), diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 31b7572176b1e..07fee67fbed19 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,12 +1,7 @@ /** * WordPress dependencies */ -import { - Button, - CheckboxControl, - Modal, - __experimentalHStack as HStack, -} from '@wordpress/components'; +import { Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useState, useMemo } from '@wordpress/element'; import { @@ -98,19 +93,18 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) { } function StartPageOptionsModal( { onClose } ) { - const { set: setPreference } = useDispatch( preferencesStore ); - const [ disablePreference, setDisablePreference ] = useState( false ); const startPatterns = useStartPatterns(); + const hasStartPattern = startPatterns.length > 0; - if ( ! startPatterns.length ) { - return; + if ( ! hasStartPattern ) { + return null; } return (
-
- - - setDisablePreference( newValue ) - } - /> - - -
); } From f91c964a7cb5fde2eadb13ff3837c40435d399ba Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 6 Sep 2024 11:38:18 +1000 Subject: [PATCH 5/8] Move preferences toggle to Publishing (in the right place now) --- .../src/components/preferences-modal/index.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index d06b3637a88d2..e437992adb900 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -154,17 +154,19 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { 'Enable pre-publish checks' ) } /> - - ) } - { starterPatterns?.length && ( - ) } - label={ __( 'Show starter patterns' ) } - /> + ) } { extraSections?.general } From 8799cd36cf141d6ecd5a93820b628e9e5bd6b160 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 6 Sep 2024 12:41:20 +1000 Subject: [PATCH 6/8] Revert styles for modal footer --- .../components/start-page-options/style.scss | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/packages/editor/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss index bc165127b1db3..129d670526c70 100644 --- a/packages/editor/src/components/start-page-options/style.scss +++ b/packages/editor/src/components/start-page-options/style.scss @@ -24,25 +24,3 @@ } } } - -.editor-start-page-options__modal-content { - margin-bottom: 72px; -} - -.editor-start-page-options__modal-footer { - box-sizing: border-box; - border-bottom: $border-width solid transparent; - padding: $grid-unit-10 $grid-unit-40 $grid-unit-10; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: $header-height + $grid-unit-15; - width: 100%; - z-index: z-index(".components-modal__header"); - position: absolute; - bottom: 0; - left: 0; - background: $white; - border-top: 1px solid $gray-300; -} From 0512af881101e5e2ffbdaae8037000c474626e31 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 6 Sep 2024 19:49:10 +1000 Subject: [PATCH 7/8] Move pref to interface group and coerce bool --- .../src/components/preferences-modal/index.js | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index e437992adb900..4f8cedc064c3c 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -154,18 +154,6 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { 'Enable pre-publish checks' ) } /> - { starterPatterns?.length && ( - - ) } ) } { extraSections?.general } @@ -259,6 +247,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { 'Show text instead of icons on buttons across the interface.' ) } /> + { !! starterPatterns?.length && ( + + ) } ), From 613b1978871c7816ba503061a7e6158b232bedab Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 6 Sep 2024 20:33:32 +1000 Subject: [PATCH 8/8] Only memo hasStarterPatterns Also, move pref to the right location :) --- .../src/components/preferences-modal/index.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 4f8cedc064c3c..a8cfd8245522c 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -58,7 +58,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { const { setIsListViewOpened, setIsInserterOpened } = useDispatch( editorStore ); const { set: setPreference } = useDispatch( preferencesStore ); - const starterPatterns = useStartPatterns(); + const hasStarterPatterns = !! useStartPatterns().length; const sections = useMemo( () => @@ -99,6 +99,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { 'Allow right-click contextual menus' ) } /> + { hasStarterPatterns && ( + + ) } - { !! starterPatterns?.length && ( - - ) } ), @@ -326,7 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) { setIsListViewOpened, setPreference, isLargeViewport, - starterPatterns, + hasStarterPatterns, ] );