Performance: Avoid calculating html block styles in useSelect

packages/block-library/src/html/edit.js

@@ -6,42 +6,19 @@ import { useContext, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	PlainText,
-	transformStyles,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Disabled,
-	SandBox,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Preview from './preview';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
-	const styles = useSelect( ( select ) => {
-		// Default styles used to unset some of the styles
-		// that might be inherited from the editor style.
-		const defaultStyles = `
-			html,body,:root {
-				margin: 0 !important;
-				padding: 0 !important;
-				overflow: visible !important;
-				min-height: auto !important;
-			}
-		`;
-
-		return [
-			defaultStyles,
-			...transformStyles(
-				select( blockEditorStore ).getSettings().styles
-			),
-		];
-	}, [] );
-
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<>
-					<SandBox html={ attributes.content } styles={ styles } />
-					{ /*
-							An overlay is added when the block is not selected in order to register click events.
-							Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
-							difficult to reselect the block.
-						*/ }
-					{ ! isSelected && (
-						<div className="block-library-html__preview-overlay"></div>
-					) }
-				</>
+				<Preview
+					content={ attributes.content }
+					isSelected={ isSelected }
+				/>
 			) : (
 				<PlainText
 					value={ attributes.content }

packages/block-library/src/html/preview.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	transformStyles,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+// Default styles used to unset some of the styles
+// that might be inherited from the editor style.
+const DEFAULT_STYLES = `
+	html,body,:root {
+		margin: 0 !important;
+		padding: 0 !important;
+		overflow: visible !important;
+		min-height: auto !important;
+	}
+`;
+
+export default function HTMLEditPreview( { content, isSelected } ) {
+	const settingStyles = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings()?.styles;
+	}, [] );
+
+	const styles = useMemo(
+		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		[ settingStyles ]
+	);
+
+	return (
+		<>
+			<SandBox html={ content } styles={ styles } />
+			{ /*
+				An overlay is added when the block is not selected in order to register click events.
+				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
+				difficult to reselect the block.
+			*/ }
+			{ ! isSelected && (
+				<div className="block-library-html__preview-overlay"></div>
+			) }
+		</>
+	);
+}