From 31bb1f49dbbbb30ddd3bbdbbb201f966a3e78ff9 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Fri, 11 Aug 2023 15:34:06 -0700 Subject: [PATCH 1/4] Move editor style logic into a hook whith useMemo --- .../edit-post/src/components/layout/index.js | 93 +++++++++++-------- 1 file changed, 53 insertions(+), 40 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index e3000ae77b863d..782c2b7fa555bf 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -32,7 +32,7 @@ import { InterfaceSkeleton, store as interfaceStore, } from '@wordpress/interface'; -import { useState, useEffect, useCallback } from '@wordpress/element'; +import { useState, useEffect, useCallback, useMemo } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { store as noticesStore } from '@wordpress/notices'; @@ -71,6 +71,56 @@ const interfaceLabels = { footer: __( 'Editor footer' ), }; +function useEditorStyles() { + const { hasThemeStyleSupport, editorSettings } = useSelect( + ( select ) => ( { + hasThemeStyleSupport: + select( editPostStore ).isFeatureActive( 'themeStyles' ), + editorSettings: select( editorStore ).getEditorSettings(), + } ) + ); + + // Compute the default styles. + const { defaultEditorStyles, presetStyles } = useMemo( () => { + const _presetStyles = + editorSettings.styles?.filter( + ( style ) => + style.__unstableType && style.__unstableType !== 'theme' + ) ?? []; + return { + presetStyles: _presetStyles, + defaultEditorStyles: [ + ...editorSettings.defaultEditorStyles, + ..._presetStyles, + ], + }; + }, [ editorSettings.defaultEditorStyles, editorSettings.styles ] ); + + // Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles). + const hasThemeStyles = + hasThemeStyleSupport && + presetStyles.length !== ( editorSettings.styles?.length ?? 0 ); + + // If theme styles are not present or displayed, ensure that + // base layout styles are still present in the editor. + if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) { + defaultEditorStyles.push( { + css: getLayoutStyles( { + style: {}, + selector: 'body', + hasBlockGapSupport: false, + hasFallbackGapSupport: true, + fallbackGapValue: '0.5em', + } ), + } ); + } + + return useMemo( + () => ( hasThemeStyles ? editorSettings.styles : defaultEditorStyles ), + [ hasThemeStyles, editorSettings.styles, defaultEditorStyles ] + ); +} + function Layout() { const isMobileViewport = useViewportMatch( 'medium', '<' ); const isHugeViewport = useViewportMatch( 'huge', '>=' ); @@ -95,45 +145,10 @@ function Layout() { showBlockBreadcrumbs, isTemplateMode, documentLabel, - styles, } = useSelect( ( select ) => { const { getEditorSettings, getPostTypeLabel } = select( editorStore ); - const { isFeatureActive } = select( editPostStore ); const editorSettings = getEditorSettings(); const postTypeLabel = getPostTypeLabel(); - const hasThemeStyles = isFeatureActive( 'themeStyles' ); - - const themeStyles = []; - const presetStyles = []; - editorSettings.styles?.forEach( ( style ) => { - if ( ! style.__unstableType || style.__unstableType === 'theme' ) { - themeStyles.push( style ); - } else { - presetStyles.push( style ); - } - } ); - - const defaultEditorStyles = [ - ...editorSettings.defaultEditorStyles, - ...presetStyles, - ]; - - // If theme styles are not present or displayed, ensure that - // base layout styles are still present in the editor. - if ( - ! editorSettings.disableLayoutStyles && - ! ( hasThemeStyles && themeStyles.length ) - ) { - defaultEditorStyles.push( { - css: getLayoutStyles( { - style: {}, - selector: 'body', - hasBlockGapSupport: false, - hasFallbackGapSupport: true, - fallbackGapValue: '0.5em', - } ), - } ); - } return { isTemplateMode: select( editPostStore ).isEditingTemplate(), @@ -166,13 +181,11 @@ function Layout() { ), // translators: Default label for the Document in the Block Breadcrumb. documentLabel: postTypeLabel || _x( 'Document', 'noun' ), - styles: - hasThemeStyles && themeStyles.length - ? editorSettings.styles - : defaultEditorStyles, }; }, [] ); + const styles = useEditorStyles(); + const openSidebarPanel = () => openGeneralSidebar( hasBlockSelected ? 'edit-post/block' : 'edit-post/document' From 6f32b8fc6fbd0d0f5d69cf0480f6700861cd8ad8 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Sat, 12 Aug 2023 00:16:38 -0700 Subject: [PATCH 2/4] Remove unnecessary useMemo --- packages/edit-post/src/components/layout/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 782c2b7fa555bf..5a520e4ef496bd 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -115,10 +115,7 @@ function useEditorStyles() { } ); } - return useMemo( - () => ( hasThemeStyles ? editorSettings.styles : defaultEditorStyles ), - [ hasThemeStyles, editorSettings.styles, defaultEditorStyles ] - ); + return hasThemeStyles ? editorSettings.styles : defaultEditorStyles; } function Layout() { From d7d917b1ec2a0fd621708fc3834117c68b816ad5 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 15 Aug 2023 10:45:13 +0400 Subject: [PATCH 3/4] Move the whole logic inside the 'useMemo' --- .../edit-post/src/components/layout/index.js | 59 ++++++++++--------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 5a520e4ef496bd..3c752825c0e330 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -81,41 +81,44 @@ function useEditorStyles() { ); // Compute the default styles. - const { defaultEditorStyles, presetStyles } = useMemo( () => { - const _presetStyles = + return useMemo( () => { + const presetStyles = editorSettings.styles?.filter( ( style ) => style.__unstableType && style.__unstableType !== 'theme' ) ?? []; - return { - presetStyles: _presetStyles, - defaultEditorStyles: [ - ...editorSettings.defaultEditorStyles, - ..._presetStyles, - ], - }; - }, [ editorSettings.defaultEditorStyles, editorSettings.styles ] ); - // Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles). - const hasThemeStyles = - hasThemeStyleSupport && - presetStyles.length !== ( editorSettings.styles?.length ?? 0 ); + const defaultEditorStyles = [ + ...editorSettings.defaultEditorStyles, + ...presetStyles, + ]; - // If theme styles are not present or displayed, ensure that - // base layout styles are still present in the editor. - if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) { - defaultEditorStyles.push( { - css: getLayoutStyles( { - style: {}, - selector: 'body', - hasBlockGapSupport: false, - hasFallbackGapSupport: true, - fallbackGapValue: '0.5em', - } ), - } ); - } + // Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles). + const hasThemeStyles = + hasThemeStyleSupport && + presetStyles.length !== ( editorSettings.styles?.length ?? 0 ); + + // If theme styles are not present or displayed, ensure that + // base layout styles are still present in the editor. + if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) { + defaultEditorStyles.push( { + css: getLayoutStyles( { + style: {}, + selector: 'body', + hasBlockGapSupport: false, + hasFallbackGapSupport: true, + fallbackGapValue: '0.5em', + } ), + } ); + } - return hasThemeStyles ? editorSettings.styles : defaultEditorStyles; + return hasThemeStyles ? editorSettings.styles : defaultEditorStyles; + }, [ + editorSettings.defaultEditorStyles, + editorSettings.disableLayoutStyles, + editorSettings.styles, + hasThemeStyleSupport, + ] ); } function Layout() { From 00c5a78f60982c365d7eccc61fcda7cb1b99a42c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 15 Aug 2023 11:16:07 +0400 Subject: [PATCH 4/4] Add missing useSelect dep --- packages/edit-post/src/components/layout/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 3c752825c0e330..b1481f4e177e59 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -77,7 +77,8 @@ function useEditorStyles() { hasThemeStyleSupport: select( editPostStore ).isFeatureActive( 'themeStyles' ), editorSettings: select( editorStore ).getEditorSettings(), - } ) + } ), + [] ); // Compute the default styles.