Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix crash by moving editor style logic into a hook with useMemo #53596

Merged
merged 4 commits into from Aug 15, 2023
Merged

Fix crash by moving editor style logic into a hook with useMemo #53596

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
31bb1f4
Move editor style logic into a hook whith useMemo
noahtallen Aug 11, 2023
6f32b8f
Remove unnecessary useMemo
noahtallen Aug 12, 2023
d7d917b
Move the whole logic inside the 'useMemo'
Mamaduka Aug 15, 2023
00c5a78
Add missing useSelect dep
Mamaduka Aug 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
94 changes: 54 additions & 40 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Expand Up @@ -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';

Expand Down Expand Up @@ -71,6 +71,57 @@ 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.
return useMemo( () => {
const presetStyles =
editorSettings.styles?.filter(
( style ) =>
style.__unstableType && style.__unstableType !== 'theme'
) ?? [];

const defaultEditorStyles = [
...editorSettings.defaultEditorStyles,
...presetStyles,
];

// 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;
}, [
editorSettings.defaultEditorStyles,
editorSettings.disableLayoutStyles,
editorSettings.styles,
hasThemeStyleSupport,
] );
}

function Layout() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
Expand All @@ -95,45 +146,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(),
Expand Down Expand Up @@ -166,13 +182,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'
Expand Down