Only use rich text value internally to the RichText component (#10439)

* Only use rich text value internally to the RichText component * Convert templates containing a "children" format into html strings * Remove children deprecations and leave them for the next release to ensure we have the correct API * Fix multiline transforms * Clean up * Restore e2e test result
WordPress · Oct 10, 2018 · e7d674d · e7d674d
1 parent 1a6ed5e
commit e7d674d
Show file tree

Hide file tree

Showing 85 changed files with 350 additions and 2,624 deletions.
diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
@@ -1,16 +1,5 @@
 Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
 
-## 4.4.0
-
-- The block attribute sources `children` and `node` have been removed. Please use the `rich-text` source instead. See the core blocks for examples.
-- `wp.blocks.node.matcher` has been removed. Please use `wp.richTextValue.create` instead.
-- `wp.blocks.node.toHTML` has been removed. Please use `wp.richTextValue.toHTMLString` instead.
-- `wp.blocks.node.fromDOM` has been removed. Please use `wp.richTextValue.create` instead.
-- `wp.blocks.children.toHTML` has been removed. Please use `wp.richTextValue.toHTMLString` instead.
-- `wp.blocks.children.fromDOM` has been removed. Please use `wp.richTextValue.create` instead.
-- `wp.blocks.children.concat` has been removed. Please use `wp.richTextValue.concat` instead.
-- `wp.blocks.children.getChildrenArray` has been removed. Please use `wp.richTextValue.create` instead.
-
 ## 4.2.0
 
 - Writing resolvers as async generators has been removed. Use the controls plugin instead.

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -423,7 +423,6 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-polyfill',
 			'wp-shortcode',
 			'lodash',
-			'wp-rich-text',
 		),
 		filemtime( gutenberg_dir_path() . 'build/blocks/index.js' ),
 		true

diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
@@ -30,7 +30,7 @@ export const settings = {
 			attribute: 'src',
 		},
 		caption: {
-			source: 'rich-text',
+			source: 'html',
 			selector: 'figcaption',
 		},
 		id: {

diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
@@ -32,7 +32,7 @@ const blockAttributes = {
 		attribute: 'title',
 	},
 	text: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'a',
 	},
 	backgroundColor: {

diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -28,7 +28,7 @@ const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
 const blockAttributes = {
 	title: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'p',
 	},
 	url: {
@@ -310,7 +310,7 @@ export const settings = {
 		attributes: {
 			...blockAttributes,
 			title: {
-				source: 'rich-text',
+				source: 'html',
 				selector: 'h2',
 			},
 		},

diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js
@@ -373,7 +373,7 @@ const embedAttributes = {
 		type: 'string',
 	},
 	caption: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'figcaption',
 	},
 	type: {

diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js
@@ -11,7 +11,7 @@ import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import { RichText } from '@wordpress/editor';
-import { getTextContent, isEmpty } from '@wordpress/rich-text';
+import { create, getTextContent } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -39,7 +39,7 @@ export const settings = {
 			type: 'string',
 		},
 		fileName: {
-			source: 'rich-text',
+			source: 'html',
 			selector: 'a:not([download])',
 		},
 		// Differs to the href when the block is configured to link to the attachment page
@@ -61,7 +61,7 @@ export const settings = {
 			default: true,
 		},
 		downloadButtonText: {
-			source: 'rich-text',
+			source: 'html',
 			selector: 'a[download]',
 			default: __( 'Download' ),
 		},
@@ -203,7 +203,7 @@ export const settings = {
 
 		return ( href &&
 			<div>
-				{ ! isEmpty( fileName ) &&
+				{ ! RichText.isEmpty( fileName ) &&
 					<a
 						href={ textLinkHref }
 						target={ textLinkTarget }
@@ -221,7 +221,7 @@ export const settings = {
 						// ensure download attribute is still set when fileName
 						// is undefined. Using '' here as `true` still leaves
 						// the attribute unset.
-						download={ getTextContent( fileName ) }
+						download={ getTextContent( create( { html: fileName } ) ) }
 					>
 						<RichText.Content
 							value={ downloadButtonText }

diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -45,7 +45,7 @@ const blockAttributes = {
 				attribute: 'data-id',
 			},
 			caption: {
-				source: 'rich-text',
+				source: 'html',
 				selector: 'figcaption',
 			},
 		},

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -14,7 +14,6 @@ import {
 	getBlockType,
 } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
-import { concat } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -39,7 +38,7 @@ const supports = {
 
 const schema = {
 	content: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'h1,h2,h3,h4,h5,h6',
 	},
 	level: {
@@ -166,7 +165,7 @@ export const settings = {
 
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: concat( attributes.content, attributesToMerge.content ),
+			content: attributes.content + attributesToMerge.content,
 		};
 	},
 

diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
@@ -16,7 +16,6 @@ import {
 } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
 import { createBlobURL } from '@wordpress/blob';
-import { create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -40,7 +39,7 @@ const blockAttributes = {
 		default: '',
 	},
 	caption: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'figcaption',
 	},
 	href: {
@@ -161,8 +160,7 @@ export const settings = {
 					caption: {
 						shortcode: ( attributes, { shortcode } ) => {
 							const { content } = shortcode;
-							const html = content.replace( /\s*<img[^>]*>\s/, '' );
-							return create( { html } );
+							return content.replace( /\s*<img[^>]*>\s/, '' );
 						},
 					},
 					href: {

diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js
@@ -18,7 +18,7 @@ import {
 	BlockControls,
 	RichText,
 } from '@wordpress/editor';
-import { replace, join, split, isEmpty } from '@wordpress/rich-text';
+import { replace, join, split, create, toHTMLString } from '@wordpress/rich-text';
 
 const listContentSchema = {
 	...getPhrasingContentSchema(),
@@ -47,7 +47,7 @@ const schema = {
 		default: false,
 	},
 	values: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'ol,ul',
 		multiline: 'li',
 	},
@@ -74,9 +74,9 @@ export const settings = {
 				blocks: [ 'core/paragraph' ],
 				transform: ( blockAttributes ) => {
 					return createBlock( 'core/list', {
-						values: join( blockAttributes.map( ( { content } ) =>
-							replace( content, /\n/g, '\u2028' )
-						), '\u2028' ),
+						values: toHTMLString( join( blockAttributes.map( ( { content } ) =>
+							replace( create( { html: content } ), /\n/g, '\u2028' )
+						), '\u2028' ), 'li' ),
 					} );
 				},
 			},
@@ -131,9 +131,12 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/paragraph' ],
 				transform: ( { values } ) =>
-					split( values, '\u2028' ).map( ( content ) =>
-						createBlock( 'core/paragraph', { content } )
-					),
+					split( create( { html: values, multilineTag: 'li' } ), '\u2028' )
+						.map( ( piece ) =>
+							createBlock( 'core/paragraph', {
+								content: toHTMLString( piece ),
+							} )
+						),
 			},
 			{
 				type: 'block',
@@ -182,16 +185,15 @@ export const settings = {
 	],
 
 	merge( attributes, attributesToMerge ) {
-		const { values, content } = attributesToMerge;
-		const valueToMerge = values || content;
+		const { values } = attributesToMerge;
 
-		if ( isEmpty( valueToMerge ) ) {
+		if ( ! values || values === '<li></li>' ) {
 			return attributes;
 		}
 
 		return {
 			...attributes,
-			values: join( [ attributes.values, valueToMerge ], '\u2028' ),
+			values: attributes.values + values,
 		};
 	},
 
@@ -329,7 +331,7 @@ export const settings = {
 										blocks.push( createBlock( 'core/paragraph' ) );
 									}
 
-									if ( ! RichText.isEmpty( after ) ) {
+									if ( after !== '<li></li>' ) {
 										blocks.push( createBlock( 'core/list', {
 											ordered,
 											values: after,

diff --git a/packages/block-library/src/list/test/__snapshots__/index.js.snap b/packages/block-library/src/list/test/__snapshots__/index.js.snap
@@ -18,9 +18,7 @@ exports[`core/list block edit matches snapshot 1`] = `
           contenteditable="true"
           data-is-placeholder-visible="true"
           role="textbox"
-        >
-          <li />
-        </ul>
+        />
         <ul
           class="editor-rich-text__tinymce"
         >

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -99,7 +99,7 @@ class ParagraphBlock extends Component {
 			onReplace,
 		} = this.props;
 
-		if ( after ) {
+		if ( after !== null ) {
 			// Append "After" content as a new paragraph block to the end of
 			// any other blocks being inserted after the current paragraph.
 			blocks.push( createBlock( name, { content: after } ) );
@@ -110,7 +110,7 @@ class ParagraphBlock extends Component {
 		}
 
 		const { content } = attributes;
-		if ( ! before ) {
+		if ( before === null ) {
 			// If before content is omitted, treat as intent to delete block.
 			onReplace( [] );
 		} else if ( content !== before ) {

diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -17,7 +17,6 @@ import {
 	RichText,
 } from '@wordpress/editor';
 import { getPhrasingContentSchema } from '@wordpress/blocks';
-import { create, concat } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -30,8 +29,9 @@ const supports = {
 
 const schema = {
 	content: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'p',
+		default: '',
 	},
 	align: {
 		type: 'string',
@@ -195,17 +195,14 @@ export const settings = {
 				return <RawHTML>{ attributes.content }</RawHTML>;
 			},
 			migrate( attributes ) {
-				return {
-					...attributes,
-					content: create( { html: attributes.content } ),
-				};
+				return attributes;
 			},
 		},
 	],
 
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: concat( attributes.content, attributesToMerge.content ),
+			content: attributes.content + attributesToMerge.content,
 		};
 	},
 

diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
-import { create, concat } from '@wordpress/rich-text';
 
 export const name = 'core/preformatted';
 
@@ -19,7 +18,7 @@ export const settings = {
 
 	attributes: {
 		content: {
-			source: 'rich-text',
+			source: 'html',
 			selector: 'pre',
 		},
 	},
@@ -31,7 +30,7 @@ export const settings = {
 				blocks: [ 'core/code', 'core/paragraph' ],
 				transform: ( { content } ) =>
 					createBlock( 'core/preformatted', {
-						content: create( { text: content } ),
+						content,
 					} ),
 			},
 			{
@@ -87,7 +86,7 @@ export const settings = {
 
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: concat( attributes.content, attributesToMerge.content ),
+			content: attributes.content + attributesToMerge.content,
 		};
 	},
 };
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
@@ -25,12 +25,12 @@ import {
 
 const blockAttributes = {
 	value: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'blockquote',
 		multiline: 'p',
 	},
 	citation: {
-		source: 'rich-text',
+		source: 'html',
 		selector: 'cite',
 	},
 	mainColor: {
@@ -132,7 +132,7 @@ export const settings = {
 		attributes: {
 			...blockAttributes,
 			citation: {
-				source: 'rich-text',
+				source: 'html',
 				selector: 'footer',
 			},
 			align: {

diff --git a/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap b/packages/block-library/src/pullquote/test/__snapshots__/index.js.snap
@@ -22,9 +22,7 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
               contenteditable="true"
               data-is-placeholder-visible="true"
               role="textbox"
-            >
-              <p />
-            </div>
+            />
             <div
               class="editor-rich-text__tinymce"
             >