From 163068bb6d0b40ea29cf49594ae9625ed1c7cc49 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 25 Oct 2024 13:17:08 +0900
Subject: [PATCH 1/2] HTML Block: Force HTML preview in view mode

---
 packages/block-library/src/html/edit.js    | 8 +++++++-
 packages/block-library/src/html/preview.js | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 5c57d73ae40f6..9a1972d54b7e6 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -7,6 +7,7 @@ import {
 	BlockControls,
 	PlainText,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
@@ -14,6 +15,7 @@ import {
 	ToolbarGroup,
 	VisuallyHidden,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -27,6 +29,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 
 	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
 
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -58,7 +64,7 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isDisabled ? (
+			{ isPreview || isPreviewMode || isDisabled ? (
 				<>
 					<Preview
 						content={ attributes.content }
diff --git a/packages/block-library/src/html/preview.js b/packages/block-library/src/html/preview.js
index d515c0119aa8d..2f9db6a763324 100644
--- a/packages/block-library/src/html/preview.js
+++ b/packages/block-library/src/html/preview.js
@@ -23,7 +23,7 @@ const DEFAULT_STYLES = `
 
 export default function HTMLEditPreview( { content, isSelected } ) {
 	const settingStyles = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().styles
+		( select ) => select( blockEditorStore ).getSettings().styles || []
 	);
 
 	const styles = useMemo(

From 7bcb7c059ec314ceca5ad8fa7ea6c3e935e8b7e7 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Fri, 25 Oct 2024 18:30:33 +0900
Subject: [PATCH 2/2] move empty array out of useSelect, add empty dependency
 array

---
 packages/block-library/src/html/preview.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/html/preview.js b/packages/block-library/src/html/preview.js
index 2f9db6a763324..eb24b00bc2352 100644
--- a/packages/block-library/src/html/preview.js
+++ b/packages/block-library/src/html/preview.js
@@ -23,14 +23,15 @@ const DEFAULT_STYLES = `
 
 export default function HTMLEditPreview( { content, isSelected } ) {
 	const settingStyles = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().styles || []
+		( select ) => select( blockEditorStore ).getSettings().styles,
+		[]
 	);
 
 	const styles = useMemo(
 		() => [
 			DEFAULT_STYLES,
 			...transformStyles(
-				settingStyles.filter( ( style ) => style.css )
+				( settingStyles ?? [] ).filter( ( style ) => style.css )
 			),
 		],
 		[ settingStyles ]