Preview: skip rendering rich text (#60544)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

packages/block-editor/src/components/block-edit/context.js

@@ -7,6 +7,7 @@ export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
 export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
 export const blockEditingModeKey = Symbol( 'blockEditingMode' );
 export const blockBindingsKey = Symbol( 'blockBindings' );
+export const isPreviewModeKey = Symbol( 'isPreviewMode' );
 
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',

packages/block-editor/src/components/block-edit/index.js

@@ -15,6 +15,7 @@ import {
 	mayDisplayParentControlsKey,
 	blockEditingModeKey,
 	blockBindingsKey,
+	isPreviewModeKey,
 } from './context';
 
 /**
@@ -31,6 +32,7 @@ export default function BlockEdit( {
 	mayDisplayControls,
 	mayDisplayParentControls,
 	blockEditingMode,
+	isPreviewMode,
 	// The remaining props are passed through the BlockEdit filters and are thus
 	// public API!
 	...props
@@ -65,6 +67,7 @@ export default function BlockEdit( {
 					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
 					[ blockEditingModeKey ]: blockEditingMode,
 					[ blockBindingsKey ]: bindings,
+					[ isPreviewModeKey ]: isPreviewMode,
 				} ),
 				[
 					name,
@@ -77,6 +80,7 @@ export default function BlockEdit( {
 					mayDisplayParentControls,
 					blockEditingMode,
 					bindings,
+					isPreviewMode,
 				]
 			) }
 		>

packages/block-editor/src/components/block-list/block.js

@@ -143,6 +143,7 @@ function BlockListBlock( {
 			mayDisplayControls={ mayDisplayControls }
 			mayDisplayParentControls={ mayDisplayParentControls }
 			blockEditingMode={ context.blockEditingMode }
+			isPreviewMode={ context.isPreviewMode }
 		/>
 	);
 
@@ -572,6 +573,7 @@ function BlockListBlockProvider( props ) {
 			} = getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
+				isPreviewMode,
 				blockWithoutAttributes,
 				name: blockName,
 				attributes,
@@ -671,6 +673,7 @@ function BlockListBlockProvider( props ) {
 	);
 
 	const {
+		isPreviewMode,
 		// Fill values that end up as a public API and may not be defined in
 		// preview mode.
 		mode = 'visual',
@@ -728,6 +731,7 @@ function BlockListBlockProvider( props ) {
 	}
 
 	const privateContext = {
+		isPreviewMode,
 		clientId,
 		className,
 		index,

packages/block-editor/src/components/rich-text/content.js

@@ -15,33 +15,40 @@ import RichText from './';
  */
 import { getMultilineTag } from './utils';
 
-export function Content( {
-	value,
-	tagName: Tag,
-	multiline,
-	format,
-	...props
-} ) {
+export function valueToHTMLString( value, multiline ) {
 	if ( RichText.isEmpty( value ) ) {
-		const MultilineTag = getMultilineTag( multiline );
-		value = MultilineTag ? <MultilineTag /> : null;
-	} else if ( Array.isArray( value ) ) {
+		const multilineTag = getMultilineTag( multiline );
+		return multilineTag ? `<${ multilineTag }></${ multilineTag }>` : '';
+	}
+
+	if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
 			since: '6.1',
 			version: '6.3',
 			alternative: 'value prop as string',
 			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
 		} );
-		value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
-	} else if ( typeof value === 'string' ) {
-		// To do: deprecate.
-		value = <RawHTML>{ value }</RawHTML>;
-	} else {
-		// To do: create a toReactComponent method on RichTextData, which we
-		// might in the future also use for the editable tree. See
-		// https://github.com/WordPress/gutenberg/pull/41655.
-		value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
+		return childrenSource.toHTML( value );
+	}
+
+	// To do: deprecate string type.
+	if ( typeof value === 'string' ) {
+		return value;
 	}
 
+	// To do: create a toReactComponent method on RichTextData, which we
+	// might in the future also use for the editable tree. See
+	// https://github.com/WordPress/gutenberg/pull/41655.
+	return value.toHTMLString();
+}
+
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	value = <RawHTML>{ valueToHTMLString( value, multiline ) }</RawHTML>;
 	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
 }

packages/block-editor/src/components/rich-text/index.js

@@ -26,7 +26,7 @@ import { getBlockType, store as blocksStore } from '@wordpress/blocks';
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
-import { blockBindingsKey } from '../block-edit/context';
+import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
@@ -44,7 +44,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
-import { Content } from './content';
+import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
@@ -485,6 +485,50 @@ PrivateRichText.isEmpty = ( value ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
 const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	const context = useBlockEditContext();
+	const isPreviewMode = context[ isPreviewModeKey ];
+
+	if ( isPreviewMode ) {
+		// Remove all non-content props.
+		const {
+			children,
+			tagName: Tag = 'div',
+			value,
+			onChange,
+			isSelected,
+			multiline,
+			inlineToolbar,
+			wrapperClassName,
+			autocompleters,
+			onReplace,
+			placeholder,
+			allowedFormats,
+			withoutInteractiveFormatting,
+			onRemove,
+			onMerge,
+			onSplit,
+			__unstableOnSplitAtEnd,
+			__unstableOnSplitAtDoubleLineEnd,
+			identifier,
+			preserveWhiteSpace,
+			__unstablePastePlainText,
+			__unstableEmbedURLOnPaste,
+			__unstableDisableFormats,
+			disableLineBreaks,
+			__unstableAllowPrefixTransformations,
+			readOnly,
+			...contentProps
+		} = removeNativeProps( props );
+		return (
+			<Tag
+				{ ...contentProps }
+				dangerouslySetInnerHTML={ {
+					__html: valueToHTMLString( value, multiline ),
+				} }
+			/>
+		);
+	}
+
 	return <PrivateRichText ref={ ref } { ...props } readOnly={ false } />;
 } );