From 52532a55822029f5613e5848baf5c5c2f1be6ff3 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 23 Aug 2023 13:50:19 +0200 Subject: [PATCH] StartPageOptions: load and parse patterns only after establishing the need for them (#53673) * Remove pattern pre-parsing * StartPageOptions: load and parse patterns only after establishing the need for them --- .../src/components/block-list/index.js | 2 - .../src/utils/pre-parse-patterns.js | 69 -------------- .../components/start-page-options/index.js | 92 ++++++++----------- 3 files changed, 38 insertions(+), 125 deletions(-) delete mode 100644 packages/block-editor/src/utils/pre-parse-patterns.js diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 04b767d9568b78..9adb913e057c72 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -31,7 +31,6 @@ import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; import { useInBetweenInserter } from './use-in-between-inserter'; import { store as blockEditorStore } from '../../store'; -import { usePreParsePatterns } from '../../utils/pre-parse-patterns'; import { LayoutProvider, defaultLayout } from './layout'; import { useBlockSelectionClearer } from '../block-selection-clearer'; import { useInnerBlocksProps } from '../inner-blocks'; @@ -124,7 +123,6 @@ function Root( { className, ...settings } ) { } export default function BlockList( settings ) { - usePreParsePatterns(); return ( diff --git a/packages/block-editor/src/utils/pre-parse-patterns.js b/packages/block-editor/src/utils/pre-parse-patterns.js deleted file mode 100644 index c18215ee8e63f9..00000000000000 --- a/packages/block-editor/src/utils/pre-parse-patterns.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, select } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { store as blockEditorStore } from '../store'; - -const requestIdleCallback = ( () => { - if ( typeof window === 'undefined' ) { - return ( callback ) => { - setTimeout( () => callback( Date.now() ), 0 ); - }; - } - - return window.requestIdleCallback || window.requestAnimationFrame; -} )(); - -const cancelIdleCallback = ( () => { - if ( typeof window === 'undefined' ) { - return clearTimeout; - } - - return window.cancelIdleCallback || window.cancelAnimationFrame; -} )(); - -export function usePreParsePatterns() { - const { patterns, isPreviewMode } = useSelect( ( _select ) => { - const { __experimentalBlockPatterns, __unstableIsPreviewMode } = - _select( blockEditorStore ).getSettings(); - return { - patterns: __experimentalBlockPatterns, - isPreviewMode: __unstableIsPreviewMode, - }; - }, [] ); - - useEffect( () => { - if ( isPreviewMode ) { - return; - } - if ( ! patterns?.length ) { - return; - } - - let handle; - let index = -1; - - const callback = () => { - index++; - if ( index >= patterns.length ) { - return; - } - - select( blockEditorStore ).__experimentalGetParsedPattern( - patterns[ index ].name - ); - - handle = requestIdleCallback( callback ); - }; - - handle = requestIdleCallback( callback ); - return () => cancelIdleCallback( handle ); - }, [ patterns, isPreviewMode ] ); - - return null; -} diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js index e1a475bc59aa3c..8eafa5487b718f 100644 --- a/packages/edit-post/src/components/start-page-options/index.js +++ b/packages/edit-post/src/components/start-page-options/index.js @@ -19,7 +19,7 @@ import { store as editPostStore } from '../../store'; function useStartPatterns() { // A pattern is a start pattern if it includes 'core/post-content' in its blockTypes, - // and it has no postTypes declares and the current post type is page or if + // 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. const { blockPatternsWithPostContentBlockType, postType } = useSelect( ( select ) => { @@ -47,8 +47,7 @@ function useStartPatterns() { }, [ postType, blockPatternsWithPostContentBlockType ] ); } -function PatternSelection( { onChoosePattern } ) { - const blockPatterns = useStartPatterns(); +function PatternSelection( { blockPatterns, onChoosePattern } ) { const shownBlockPatterns = useAsyncList( blockPatterns ); const { resetEditorBlocks } = useDispatch( editorStore ); return ( @@ -63,70 +62,55 @@ function PatternSelection( { onChoosePattern } ) { ); } -const START_PAGE_MODAL_STATES = { - INITIAL: 'INITIAL', - PATTERN: 'PATTERN', - CLOSED: 'CLOSED', -}; - -export default function StartPageOptions() { - const [ modalState, setModalState ] = useState( - START_PAGE_MODAL_STATES.INITIAL - ); - const blockPatterns = useStartPatterns(); - const hasStartPattern = blockPatterns.length > 0; - const shouldOpenModel = useSelect( - ( select ) => { - if ( - ! hasStartPattern || - modalState !== START_PAGE_MODAL_STATES.INITIAL - ) { - return false; - } - const { getEditedPostContent, isEditedPostSaveable } = - select( editorStore ); - const { isEditingTemplate, isFeatureActive } = - select( editPostStore ); - return ( - ! isEditedPostSaveable() && - '' === getEditedPostContent() && - ! isEditingTemplate() && - ! isFeatureActive( 'welcomeGuide' ) - ); - }, - [ modalState, hasStartPattern ] - ); +function StartPageOptionsModal() { + const [ modalState, setModalState ] = useState( 'initial' ); + const startPatterns = useStartPatterns(); + const hasStartPattern = startPatterns.length > 0; + const shouldOpenModal = hasStartPattern && modalState === 'initial'; useEffect( () => { - if ( shouldOpenModel ) { - setModalState( START_PAGE_MODAL_STATES.PATTERN ); + if ( shouldOpenModal ) { + setModalState( 'open' ); } - }, [ shouldOpenModel ] ); + }, [ shouldOpenModal ] ); - if ( - modalState === START_PAGE_MODAL_STATES.INITIAL || - modalState === START_PAGE_MODAL_STATES.CLOSED - ) { + if ( modalState !== 'open' ) { return null; } + return ( { - setModalState( START_PAGE_MODAL_STATES.CLOSED ); - } } + isFullScreen + onRequestClose={ () => setModalState( 'closed' ) } >
- { modalState === START_PAGE_MODAL_STATES.PATTERN && ( - { - setModalState( START_PAGE_MODAL_STATES.CLOSED ); - } } - /> - ) } + setModalState( 'closed' ) } + />
); } + +export default function StartPageOptions() { + const shouldEnableModal = useSelect( ( select ) => { + const { getEditedPostContent, isEditedPostSaveable } = + select( editorStore ); + const { isEditingTemplate, isFeatureActive } = select( editPostStore ); + return ( + ! isEditedPostSaveable() && + '' === getEditedPostContent() && + ! isEditingTemplate() && + ! isFeatureActive( 'welcomeGuide' ) + ); + }, [] ); + + if ( ! shouldEnableModal ) { + return null; + } + + return ; +}