From aa91b49d763481c65acea6ead1ee4a8615713cda Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Apr 2024 11:34:07 +0100 Subject: [PATCH 1/3] Site Editor: Support starter patterns --- .../edit-post/src/components/layout/index.js | 2 - packages/edit-post/src/style.scss | 1 - .../editor/src/components/provider/index.js | 2 + .../components/start-page-options/index.js | 62 +++++++++++++------ .../components/start-page-options/style.scss | 2 +- packages/editor/src/style.scss | 1 + 6 files changed, 47 insertions(+), 23 deletions(-) rename packages/{edit-post => editor}/src/components/start-page-options/index.js (60%) rename packages/{edit-post => editor}/src/components/start-page-options/style.scss (83%) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 6fc9ab570e5ac9..bc5ad7fe04851e 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -56,7 +56,6 @@ import SettingsSidebar from '../sidebar/settings-sidebar'; import MetaBoxes from '../meta-boxes'; import WelcomeGuide from '../welcome-guide'; import ActionsPanel from './actions-panel'; -import StartPageOptions from '../start-page-options'; import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; import useCommonCommands from '../../hooks/commands/use-common-commands'; @@ -364,7 +363,6 @@ function Layout( { initialPost } ) { - { ! isDistractionFree && } diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 4ba063905d8b2e..c46246c8df1502 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -11,7 +11,6 @@ @import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; @import "./components/welcome-guide/style.scss"; -@import "./components/start-page-options/style.scss"; /** * Animations diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 5d4b2c0079a741..b1a2164e1274ef 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -26,6 +26,7 @@ import NavigationBlockEditingMode from './navigation-block-editing-mode'; import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter'; import useCommands from '../commands'; import BlockRemovalWarnings from '../block-removal-warnings'; +import StartPageOptions from '../start-page-options'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); @@ -267,6 +268,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( ) } + diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js similarity index 60% rename from packages/edit-post/src/components/start-page-options/index.js rename to packages/editor/src/components/start-page-options/index.js index 0ef3e166e8ee1a..e42521b0cb4492 100644 --- a/packages/edit-post/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -3,19 +3,19 @@ */ import { Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useState, useMemo } from '@wordpress/element'; +import { useState, useMemo, useEffect } from '@wordpress/element'; import { store as blockEditorStore, __experimentalBlockPatternsList as BlockPatternsList, } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { useAsyncList } from '@wordpress/compose'; -import { store as editorStore } from '@wordpress/editor'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { store as editPostStore } from '../../store'; +import { store as editorStore } from '../../store'; function useStartPatterns() { // A pattern is a start pattern if it includes 'core/post-content' in its blockTypes, @@ -23,11 +23,19 @@ function useStartPatterns() { // the current post type is part of the postTypes declared. const { blockPatternsWithPostContentBlockType, postType } = useSelect( ( select ) => { - const { getPatternsByBlockTypes } = select( blockEditorStore ); - const { getCurrentPostType } = select( editorStore ); + const { getPatternsByBlockTypes, getBlocksByName } = + select( blockEditorStore ); + const { getCurrentPostType, getRenderingMode } = + select( editorStore ); + const rootClientId = + getRenderingMode() === 'post-only' + ? '' + : getBlocksByName( 'core/post-content' )?.[ 0 ]; return { - blockPatternsWithPostContentBlockType: - getPatternsByBlockTypes( 'core/post-content' ), + blockPatternsWithPostContentBlockType: getPatternsByBlockTypes( + 'core/post-content', + rootClientId + ), postType: getCurrentPostType(), }; }, @@ -49,13 +57,21 @@ function useStartPatterns() { function PatternSelection( { blockPatterns, onChoosePattern } ) { const shownBlockPatterns = useAsyncList( blockPatterns ); - const { resetEditorBlocks } = useDispatch( editorStore ); + const { editEntityRecord } = useDispatch( coreStore ); + const { postType, postId } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + + return { + postType: getCurrentPostType(), + postId: getCurrentPostId(), + }; + }, [] ); return ( { - resetEditorBlocks( blocks ); + editEntityRecord( 'postType', postType, postId, { blocks } ); onChoosePattern(); } } /> @@ -72,12 +88,11 @@ function StartPageOptionsModal( { onClose } ) { return ( -
+
{ - const { isCleanNewPost, getRenderingMode } = select( editorStore ); - const { isFeatureActive } = select( editPostStore ); + const { shouldEnableModal, postType, postId } = useSelect( ( select ) => { + const { + isEditedPostDirty, + isEditedPostEmpty, + getCurrentPostType, + getCurrentPostId, + } = select( editorStore ); - return ( - getRenderingMode() === 'post-only' && - ! isFeatureActive( 'welcomeGuide' ) && - isCleanNewPost() - ); + return { + shouldEnableModal: ! isEditedPostDirty() && isEditedPostEmpty(), + postType: getCurrentPostType(), + postId: getCurrentPostId(), + }; }, [] ); + useEffect( () => { + // Should reset the modal state when navigating to a new page/post. + setIsClosed( false ); + }, [ postType, postId ] ); + if ( ! shouldEnableModal || isClosed ) { return null; } diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss similarity index 83% rename from packages/edit-post/src/components/start-page-options/style.scss rename to packages/editor/src/components/start-page-options/style.scss index 52f3f5ff9a8889..129d670526c709 100644 --- a/packages/edit-post/src/components/start-page-options/style.scss +++ b/packages/editor/src/components/start-page-options/style.scss @@ -1,5 +1,5 @@ // 2 column masonry layout. -.edit-post-start-page-options__modal-content .block-editor-block-patterns-list { +.editor-start-page-options__modal-content .block-editor-block-patterns-list { column-count: 2; column-gap: $grid-unit-30; diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 865635f228891e..da3cd2b297ba71 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -30,5 +30,6 @@ @import "./components/post-visibility/style.scss"; @import "./components/post-trash/style.scss"; @import "./components/preview-dropdown/style.scss"; +@import "./components/start-page-options/style.scss"; @import "./components/table-of-contents/style.scss"; @import "./components/template-areas/style.scss"; From 5486788111ddc450174619545c02aff3eea43b12 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Apr 2024 12:07:10 +0100 Subject: [PATCH 2/3] Fix unit test --- packages/block-library/src/block/test/edit.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js index 0b719dd06609df..f184fa164ce71b 100644 --- a/packages/block-library/src/block/test/edit.native.js +++ b/packages/block-library/src/block/test/edit.native.js @@ -45,6 +45,7 @@ const getMockedReusableBlock = ( id ) => ( { title: { raw: `Reusable block - ${ id }` }, type: 'wp_block', meta: { footnotes: '' }, + wp_pattern_category: [], } ); beforeAll( () => { From 5c6baa857ea4baeaff8c1d4f4e12e03ca1ec907f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Apr 2024 12:56:18 +0100 Subject: [PATCH 3/3] Disable starter page options in preview mode --- packages/editor/src/components/start-page-options/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index e42521b0cb4492..70e7ecd642d4c5 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -110,10 +110,13 @@ export default function StartPageOptions() { isEditedPostEmpty, getCurrentPostType, getCurrentPostId, + getEditorSettings, } = select( editorStore ); + const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings(); return { - shouldEnableModal: ! isEditedPostDirty() && isEditedPostEmpty(), + shouldEnableModal: + ! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(), postType: getCurrentPostType(), postId: getCurrentPostId(), };