RichText state structure for value manipulation (#7890)

* [squashed] RichText structure: 1fbad6edc2b3f4c4752f19630cf5ef57754a69ee Fix links e2e test with auto focus 138655ecadfdb744ebdbf542ebd2af7582b912d1 Fix line break clean up 10acf8a4c96202d4e3e1729494eb590fdc51e1dd Reorganise create.js 8678a56f84bfd948d30303e5dd5a73eb10e74120 Fix link toolbar 3d42e2db51d74e7c2c856c1afd40f7261f2f0ed3 Split out escape HTML tools to separate package 29f2a959b9ecdf823aed70ce7bb8dfcb8df447e5 Corrections after rebase 9597714006869be3059f8597b230cd4689db8aa3 Deprecate node matcher 11d2b3ee83a2b904d5609a5b0398dca190e9d4dd More unit tests 964bb8a80b49b657c0eb0dfeac7d137d188ef7c9 Flatten selection structure 865187accf52b419a81f92ff3e61a7dbc85b4d91 Flatten record structure 4f94b9d3bb26ac7c14d9123c658151e0da5cb984 Add some docs bbec4f134992cad9280d78aa970c9f4fa12119b3 Multiline adjustments 42c3fd95795965a670447e6a4e80a8b7a612fe54 Simplify multiline records 3b7d483b0af09ee929c48e771053b2dc73d2c2dd Restore completer ability to insert HTML 796c01404cbb366d11d8d479da27dde19c842706 Fix splitting and merging e2e tests 376f3e753cdd187fdac93343f8628f1265143c4b Fix writing flow test ae5e549a027862b74c2ccfe619ea8999d07009b9 Fix whitespace b5c32e75a246eb96b31f29a4e09a1b8fbb20182d Fix link e2e tests a62c2641cdb63fbfdbd80dccf86b4f17391a7b00 Clean up create() tests cd3ec6d357df3c045ea74ad54749d893a7ef26c3 Add create() selection tests f839f1bfbd808f5a2e0aa1a8378c1e4b4a7bd857 Fix block icons e2e tests e97969f11b6f95c004ad4f63b4d49df00b087f0f Add createValue tests 27c3391a47427f2d1239eef00af68e6b84b1e1a5 Fix selection to always be set on text nodes c41c54f35b75628445db595deab0efdd824a9b53 Restore format prop on RichText. Use it on verse for now to test. 4566268949ae14d50e12b0aa728ba132d5d8d564 Readability 7abbe9d2c7e939aa2136f0696d34b4b745e0802c Fix case where br sets entry in sparse array 11ca0435dbecf1e4d75ed2ccc74cb96e6bedb342 Address feedback + add sparse array length tests 7a1b29e6c2d83e602efeb392ce1e2f4ae67eceba Add back 'enter patterns' 0544aea4fc9774314a6fa0af153d78ccf44c68e4 Make tests less verbose (2) a7f9d99dc763fc117eab5df8a29bedb9e074ecc0 Make tests less verbose b7a3815461b341668a178d64d8288b732f1a69fd chore: Use `includes` instead of `indexOf` 25bed696e74962ce72b1884c18a5008946a76378 Allow format removal for uncollapsed selection 40c65f2b37c83e1a4a12b66281054c4f4f1b2e9e chore: Rename a few things for clarity f585aa89251e5bedfeb13785c17df7ea895d0551 chore: Tweak acc variable name and comment 5b63dc5f6a3af8ee78f27f9adc5b7eed9786c706 e2e: fix link toolbar 1f72cdf9f24b085c2664a5f89baacea13b7f9cc8 chore: Fix typo c8fef39c7112d6546c4fb55bcaa6c0ad08cf7a24 Fix some e2e tests f23eea4d6fb31b1b15c594e647d87a7d52ead889 chore: Rename $3 to settings ce483239c4d40efcd3ad00eebb6f381ac66c18dc Only apply selection if there is selection. Fixes splitting and merging selection bug 126c0f05638c54a9d054305cd7093533808e73d5 chore: rename accu to accumlator d763f15c8a4c745e8d0b64ce14cfa36ea5d2e116 chore: Sorry, document is a keyword :'( f2121f7bbe361765d274bad293057577fb0d7644 chore: Change doc to document 4cb73449c27ac599b43a5f7fac1b2805f6996189 chore: Rename accu to accumlator 25478fde1387dd2e255dea024c342a90edfc059e chore: Rename accu to accumlator e19d5f466f023445b7fc2ec341021f403c8027f5 chore: Fix misspelling c4ea8453049bbeb0250394194136bfbbefac7fda chore: whitespace tweak 8492bc79cc83cccdb23a04eca62132098d2e71e9 Add some tests for applying records to DOM 2a72f95a8d5f21937c5c1fa14930519e92f69af5 Reorganise fa3d812385c82733a37f27c43f07cb1e98de418e Don't use DOM to create string from record b3d7616ca91cbe41bfbbece5497bf7fba5502af7 Update selection and value at the same time. Clean up. 21615bb50ad4279d50022529a5aafcb172b9efd7 Restore Autocomplete API f8ac82119ef01c77a33cd82a25ab230b2ab5e01a attribute source: rich-text => children 1806afd7ade0be412b3089cbd653722230fa7db3 Add test for referencing format objects d6dcd7aa70a3a3c64847b26cd73779ba7378e8ee Clean up 3d5f8a95e6a2c634c68ac0b5618e4087cd681c10 Fix selection check inconsistencies 6612529bf120ebefbd4a9df687e643fa3a385623 chore: Allow trailing slash to be optional for img tag 8dc9354355c60054d8cb7f1d3b3a091cb6e47192 fix: Fix test for inline image tokens c409c9ac4437049a3a68025d7bed6f3099b3991e Split up structure functions d27a033fe18a1f962252f05f3a1a79ffbd86a491 Restore splitting on line breaks in list transform e069f9a18a514bb31ce9956729c53e6663653615 Move rich text structure to separate package ccd3f296f3dd6fde402297ea9ff2d61800afb6c3 Fix up link toolbar f95ba89952f3ab28b0c6cde393f457e4236285e5 Remove format prop for now 95db205147f9df86782d15a44640629b9bf887e1 Add comments, remove custom formatters f943f7a2110608fb3b5bc3af0a21c41052db5e21 Fix tests 0746e20095c50ff8cbe945c31547df7f9e8f4049 RichText state * Test deprecated node matcher * Fix equality check for deprecated node matcher value * Deprecate wp.blocks.node and wp.blocks.children * Value manipulation: ensure passed value is not mutated * Fix initial selection RichText field * Represent object format in text string * Reduce this.editor dependency * Adjust e2e test expected output * More docs, rename things * Make mobile tests pass * Fix richTextValue dependency in test plugin * Remove web logic from native format toolbar * Mobile: drop custom formatters as well * Mobile: absort formatting toolbar into RichText to reuse formatting methods * RN entrypoints for escape-html, rich-text-value packages * Rewrite multiline splitting * Rebase: correct new tests * Bump deprecation version and add to deprecated.md * Adjust wrong isEmpty check in cover image block * Update package.json * Prepare packages for the intial release * Fix package-lock.json file for the new packages * Fix typo in pattern transform * Rebase: fix new failing test #9454 * Abstract tree creation * Restore children and node sources * Clean up * Fix isEmptyLine * Adjust merge functions * Clean up * Polish: make create() easier to read * Inline pasted text should be parsed as HTML * Fix create() call after 9a754dc * children and node sources should work without default set * Cast default values of children and node sources as array * Fix verse transform * List merging: don't merge empty line * Use line separator to separate multiline values, instead of double line breaks * Change deprecation removal version * Update quote to use line separators * Guard against blocks passing null value to RichText * Ensure formats with different reference are reduced to different nodes in tree output * rich-text-value => rich-text, better deprecation messages, cast string to rich text value during block creation
WordPress · Oct 1, 2018 · 78d1254 · 78d1254
1 parent 71fc9bb
commit 78d1254
Show file tree

Hide file tree

Showing 166 changed files with 7,224 additions and 3,436 deletions.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -383,6 +383,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/element/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/escape-html",
+		"slug": "packages-escape-html",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/escape-html/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/hooks",
 		"slug": "packages-hooks",
@@ -467,6 +473,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/redux-routine/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/rich-text",
+		"slug": "packages-rich-text",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/rich-text/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/scripts",
 		"slug": "packages-scripts",

diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
@@ -1,5 +1,16 @@
 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
@@ -360,10 +360,24 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_script(
 		'wp-element',
 		gutenberg_url( 'build/element/index.js' ),
-		array( 'wp-polyfill', 'react', 'react-dom', 'lodash' ),
+		array( 'wp-polyfill', 'react', 'react-dom', 'lodash', 'wp-escape-html' ),
 		filemtime( gutenberg_dir_path() . 'build/element/index.js' ),
 		true
 	);
+	wp_register_script(
+		'wp-escape-html',
+		gutenberg_url( 'build/escape-html/index.js' ),
+		array( 'wp-polyfill' ),
+		filemtime( gutenberg_dir_path() . 'build/element/index.js' ),
+		true
+	);
+	wp_register_script(
+		'wp-rich-text',
+		gutenberg_url( 'build/rich-text/index.js' ),
+		array( 'wp-polyfill', 'wp-escape-html', 'lodash' ),
+		filemtime( gutenberg_dir_path() . 'build/rich-text/index.js' ),
+		true
+	);
 	wp_register_script(
 		'wp-components',
 		gutenberg_url( 'build/components/index.js' ),
@@ -383,6 +397,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-keycodes',
 			'wp-polyfill',
 			'wp-url',
+			'wp-rich-text',
 		),
 		filemtime( gutenberg_dir_path() . 'build/components/index.js' ),
 		true
@@ -408,6 +423,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-polyfill',
 			'wp-shortcode',
 			'lodash',
+			'wp-rich-text',
 		),
 		filemtime( gutenberg_dir_path() . 'build/blocks/index.js' ),
 		true
@@ -442,6 +458,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-polyfill',
 			'wp-url',
 			'wp-viewport',
+			'wp-rich-text',
 		),
 		filemtime( gutenberg_dir_path() . 'build/block-library/index.js' ),
 		true
@@ -601,6 +618,7 @@ function gutenberg_register_scripts_and_styles() {
 			'wp-url',
 			'wp-viewport',
 			'wp-wordcount',
+			'wp-rich-text',
 		),
 		filemtime( gutenberg_dir_path() . 'build/editor/index.js' )
 	);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
 		"@wordpress/dom-ready": "file:packages/dom-ready",
 		"@wordpress/editor": "file:packages/editor",
 		"@wordpress/element": "file:packages/element",
+		"@wordpress/escape-html": "file:packages/escape-html",
 		"@wordpress/hooks": "file:packages/hooks",
 		"@wordpress/html-entities": "file:packages/html-entities",
 		"@wordpress/i18n": "file:packages/i18n",
@@ -41,6 +42,7 @@
 		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/redux-routine": "file:packages/redux-routine",
+		"@wordpress/rich-text": "file:packages/rich-text",
 		"@wordpress/shortcode": "file:packages/shortcode",
 		"@wordpress/token-list": "file:packages/token-list",
 		"@wordpress/url": "file:packages/url",

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

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

diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -25,8 +24,7 @@ const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
 const blockAttributes = {
 	title: {
-		type: 'array',
-		source: 'children',
+		source: 'rich-text',
 		selector: 'p',
 	},
 	url: {
@@ -195,7 +193,7 @@ export const settings = {
 		);
 
 		if ( ! url ) {
-			const hasTitle = ! isEmpty( title );
+			const hasTitle = ! RichText.isEmpty( title );
 			const icon = hasTitle ? undefined : 'format-image';
 			const label = hasTitle ? (
 				<RichText
@@ -276,8 +274,7 @@ export const settings = {
 		attributes: {
 			...blockAttributes,
 			title: {
-				type: 'array',
-				source: 'children',
+				source: 'rich-text',
 				selector: 'h2',
 			},
 		},

diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js
@@ -371,10 +371,8 @@ const embedAttributes = {
 		type: 'string',
 	},
 	caption: {
-		type: 'array',
-		source: 'children',
+		source: 'rich-text',
 		selector: 'figcaption',
-		default: [],
 	},
 	type: {
 		type: 'string',

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

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

diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
@@ -39,8 +39,7 @@ const blockAttributes = {
 		default: '',
 	},
 	caption: {
-		type: 'array',
-		source: 'children',
+		source: 'rich-text',
 		selector: 'figcaption',
 	},
 	href: {