Init rich text values on block attributes parse

WordPress · Aug 11, 2023 · bff3746 · bff3746
1 parent 073f0d3
commit bff3746
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/rich-text/content.js b/packages/block-editor/src/components/rich-text/content.js
@@ -10,7 +10,12 @@ import deprecated from '@wordpress/deprecated';
  */
 import { getMultilineTag } from './utils';
 
-export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+export const Content = ( {
+	value = '',
+	tagName: Tag,
+	multiline,
+	...props
+} ) => {
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
@@ -29,7 +34,7 @@ export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 		value = `<${ MultilineTag }></${ MultilineTag }>`;
 	}
 
-	const content = <RawHTML>{ value }</RawHTML>;
+	const content = <RawHTML>{ value.valueOf() }</RawHTML>;
 
 	if ( Tag ) {
 		const { format, ...restProps } = props;

diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -42,6 +42,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"change-case": "^4.1.2",
 		"colord": "^2.7.0",

diff --git a/packages/blocks/src/api/matchers.js b/packages/blocks/src/api/matchers.js
@@ -3,13 +3,18 @@
  */
 export { attr, prop, text, query } from 'hpq';
 
+/**
+ * WordPress dependencies
+ */
+import { __unstableCreateRichTextString, create } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
 export { matcher as node } from './node';
 export { matcher as children } from './children';
 
-export function html( selector, multilineTag ) {
+export function html( selector, multilineTag, preserveWhiteSpace ) {
 	return ( domNode ) => {
 		let match = domNode;
 
@@ -38,6 +43,11 @@ export function html( selector, multilineTag ) {
 			return value;
 		}
 
-		return match.innerHTML;
+		return __unstableCreateRichTextString( {
+			// This is faste because we don't need to parse the HTML string.
+			value: create( { element: match } ),
+			multilineTag,
+			preserveWhiteSpace,
+		} );
 	};
 }
diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -59,7 +59,7 @@ export const toBooleanAttributeMatcher = ( matcher ) =>
 export function isOfType( value, type ) {
 	switch ( type ) {
 		case 'string':
-			return typeof value === 'string';
+			return value instanceof String || typeof value === 'string';
 
 		case 'boolean':
 			return typeof value === 'boolean';
@@ -208,7 +208,11 @@ export const matcherFromSource = memoize( ( sourceConfig ) => {
 
 			return matcher;
 		case 'html':
-			return html( sourceConfig.selector, sourceConfig.multiline );
+			return html(
+				sourceConfig.selector,
+				sourceConfig.multiline,
+				sourceConfig.preserveWhitespace
+			);
 		case 'text':
 			return text( sourceConfig.selector );
 		case 'children':

diff --git a/packages/rich-text/src/index.ts b/packages/rich-text/src/index.ts
@@ -24,6 +24,7 @@ export { toggleFormat } from './toggle-format';
 export { LINE_SEPARATOR as __UNSTABLE_LINE_SEPARATOR } from './special-characters';
 export { unregisterFormatType } from './unregister-format-type';
 export { createElement as __unstableCreateElement } from './create-element';
+export { createRichTextString as __unstableCreateRichTextString } from './value';
 
 export { useAnchorRef } from './component/use-anchor-ref';
 export { useAnchor } from './component/use-anchor';