From 520aad672937218b29339a19bbd7cbe74e1f9561 Mon Sep 17 00:00:00 2001
From: Noah Allen <noahtallen@gmail.com>
Date: Tue, 15 Aug 2023 03:16:04 -0700
Subject: [PATCH] Fix crash by moving editor style logic into a hook with
 useMemo (#53596)

* Move editor style logic into a hook whith useMemo

* Remove unnecessary useMemo

* Move the  whole logic inside the 'useMemo'

* Add missing useSelect dep

---------

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
---
 .../edit-post/src/components/layout/index.js  | 94 +++++++++++--------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 73e050af14df24..46f9a0a258e6be 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -31,7 +31,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';
 
@@ -70,6 +70,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', '>=' );
@@ -94,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(),
@@ -165,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'