From b2e9ebaaca15c2a761b699d1b5a059e1bcd1b284 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 25 Oct 2024 19:11:46 +0900
Subject: [PATCH] HTML Block: Force HTML preview in view mode (#66440)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
---
 packages/block-library/src/html/edit.js    | 8 +++++++-
 packages/block-library/src/html/preview.js | 5 +++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 5c57d73ae40f6c..9a1972d54b7e65 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 d515c0119aa8db..eb24b00bc2352b 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 ]