From db6c40f6bbe39f035bf2db010160a90779f56c45 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 22 Jun 2018 13:59:58 +0100 Subject: [PATCH 1/2] RichText: Use a simplified format for rich text values --- blocks/api/index.js | 1 + blocks/api/matchers.js | 14 ++-- blocks/api/utils.js | 20 ++++- .../test/fixtures/core__heading__h2-em.json | 2 +- core-blocks/test/fixtures/core__list__ul.json | 12 +-- .../test/fixtures/core__preformatted.json | 5 +- .../test/fixtures/core__pullquote.json | 8 +- .../core__pullquote__multi-paragraph.json | 22 ++---- .../test/fixtures/core__quote__style-1.json | 8 +- .../test/fixtures/core__quote__style-2.json | 8 +- core-blocks/test/fixtures/core__subhead.json | 2 +- core-blocks/test/fixtures/core__table.json | 76 +++++++++---------- .../core__text__converts-to-paragraph.json | 2 +- core-blocks/test/fixtures/core__verse.json | 5 +- editor/components/rich-text/format.js | 5 +- .../test/__snapshots__/format.js.snap | 23 ++++-- editor/components/rich-text/test/format.js | 6 +- 17 files changed, 113 insertions(+), 106 deletions(-) diff --git a/blocks/api/index.js b/blocks/api/index.js index e9e883a33b6a12..cdc9c60a84e764 100644 --- a/blocks/api/index.js +++ b/blocks/api/index.js @@ -39,6 +39,7 @@ export { } from './registration'; export { isUnmodifiedDefaultBlock, + createSimpleElement, } from './utils'; export { doBlocksMatchTemplate, diff --git a/blocks/api/matchers.js b/blocks/api/matchers.js index 0ccf4cf8d8832b..46f833eeba0d43 100644 --- a/blocks/api/matchers.js +++ b/blocks/api/matchers.js @@ -1,14 +1,14 @@ -/** - * WordPress dependencies - */ -import { createElement } from '@wordpress/element'; - /** * External dependencies */ import { nodeListToReact, nodeToReact } from 'dom-react'; export { attr, prop, html, text, query } from 'hpq'; +/** + * Internal dependencies + */ +import { createSimpleElement } from './utils'; + export const children = ( selector ) => { return ( domNode ) => { let match = domNode; @@ -18,7 +18,7 @@ export const children = ( selector ) => { } if ( match ) { - return nodeListToReact( match.childNodes || [], createElement ); + return nodeListToReact( match.childNodes || [], createSimpleElement ); } return []; @@ -33,6 +33,6 @@ export const node = ( selector ) => { match = domNode.querySelector( selector ); } - return nodeToReact( match, createElement ); + return nodeToReact( match, createSimpleElement ); }; }; diff --git a/blocks/api/utils.js b/blocks/api/utils.js index bb7ecf15bb5160..94552f06609da2 100644 --- a/blocks/api/utils.js +++ b/blocks/api/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { every, keys, isEqual, isFunction, isString } from 'lodash'; +import { every, keys, isEqual, isFunction, isString, omit } from 'lodash'; import { default as tinycolor, mostReadable } from 'tinycolor2'; /** @@ -118,3 +118,21 @@ export function normalizeIconObject( icon ) { } return icon; } + +/** + * Creates a simplified element representation. + * + * @param {string} type + * @param {Object} props + * @param {Array?} children + * + * @return {Object} Element. + */ +export function createSimpleElement( type, props, ...children ) { + return { + type, props: { + ...omit( props, [ 'key' ] ), + children, + }, + }; +} diff --git a/core-blocks/test/fixtures/core__heading__h2-em.json b/core-blocks/test/fixtures/core__heading__h2-em.json index 213be79cfa972b..9a0e1b16a9e8a7 100644 --- a/core-blocks/test/fixtures/core__heading__h2-em.json +++ b/core-blocks/test/fixtures/core__heading__h2-em.json @@ -8,7 +8,7 @@ "The ", { "type": "em", - "children": "Inserter" + "children": [ "Inserter" ] }, " Tool" ], diff --git a/core-blocks/test/fixtures/core__list__ul.json b/core-blocks/test/fixtures/core__list__ul.json index 4f86b13d9acd42..644541e6b96741 100644 --- a/core-blocks/test/fixtures/core__list__ul.json +++ b/core-blocks/test/fixtures/core__list__ul.json @@ -8,23 +8,23 @@ "values": [ { "type": "li", - "children": "Text & Headings" + "children": [ "Text & Headings" ] }, { "type": "li", - "children": "Images & Videos" + "children": [ "Images & Videos" ] }, { "type": "li", - "children": "Galleries" + "children": [ "Galleries" ] }, { "type": "li", - "children": "Embeds, like YouTube, Tweets, or other WordPress posts." + "children": [ "Embeds, like YouTube, Tweets, or other WordPress posts." ] }, { "type": "li", - "children": "Layout blocks, like Buttons, Hero Images, Separators, etc." + "children": [ "Layout blocks, like Buttons, Hero Images, Separators, etc." ] }, { "type": "li", @@ -32,7 +32,7 @@ "And ", { "type": "em", - "children": "Lists" + "children": [ "Lists" ] }, " like this one of course :)" ] diff --git a/core-blocks/test/fixtures/core__preformatted.json b/core-blocks/test/fixtures/core__preformatted.json index d8e03462e4c687..ccd16bec18b790 100644 --- a/core-blocks/test/fixtures/core__preformatted.json +++ b/core-blocks/test/fixtures/core__preformatted.json @@ -8,11 +8,12 @@ "Some ", { "type": "em", - "children": "preformatted" + "children": [ "preformatted" ] }, " text...", { - "type": "br" + "type": "br", + "children": [] }, "And more!" ] diff --git a/core-blocks/test/fixtures/core__pullquote.json b/core-blocks/test/fixtures/core__pullquote.json index e044ae447f65f8..a83d093a88dbfb 100644 --- a/core-blocks/test/fixtures/core__pullquote.json +++ b/core-blocks/test/fixtures/core__pullquote.json @@ -8,13 +8,9 @@ { "children": { "type": "p", - "key": null, - "ref": null, "props": { - "children": "Testing pullquote block..." - }, - "_owner": null, - "_store": {} + "children": [ "Testing pullquote block..." ] + } } } ], diff --git a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json index c2a6c0d770de73..73bb0c75fac65b 100644 --- a/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json +++ b/core-blocks/test/fixtures/core__pullquote__multi-paragraph.json @@ -8,37 +8,25 @@ { "children": { "type": "p", - "key": null, - "ref": null, "props": { "children": [ "Paragraph ", { "type": "strong", - "key": "_domReact71", - "ref": null, "props": { - "children": "one" - }, - "_owner": null, - "_store": {} + "children": [ "one" ] + } } ] - }, - "_owner": null, - "_store": {} + } } }, { "children": { "type": "p", - "key": null, - "ref": null, "props": { - "children": "Paragraph two" - }, - "_owner": null, - "_store": {} + "children": [ "Paragraph two" ] + } } } ], diff --git a/core-blocks/test/fixtures/core__quote__style-1.json b/core-blocks/test/fixtures/core__quote__style-1.json index af662dec93e702..163d92365c5d55 100644 --- a/core-blocks/test/fixtures/core__quote__style-1.json +++ b/core-blocks/test/fixtures/core__quote__style-1.json @@ -8,13 +8,9 @@ { "children": { "type": "p", - "key": null, - "ref": null, "props": { - "children": "The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery." - }, - "_owner": null, - "_store": {} + "children": [ "The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery." ] + } } } ], diff --git a/core-blocks/test/fixtures/core__quote__style-2.json b/core-blocks/test/fixtures/core__quote__style-2.json index 230306c9fc133e..0ca746a8d28492 100644 --- a/core-blocks/test/fixtures/core__quote__style-2.json +++ b/core-blocks/test/fixtures/core__quote__style-2.json @@ -8,13 +8,9 @@ { "children": { "type": "p", - "key": null, - "ref": null, "props": { - "children": "There is no greater agony than bearing an untold story inside you." - }, - "_owner": null, - "_store": {} + "children": [ "There is no greater agony than bearing an untold story inside you." ] + } } } ], diff --git a/core-blocks/test/fixtures/core__subhead.json b/core-blocks/test/fixtures/core__subhead.json index c2373ee2781c04..07b9727cbb64c0 100644 --- a/core-blocks/test/fixtures/core__subhead.json +++ b/core-blocks/test/fixtures/core__subhead.json @@ -8,7 +8,7 @@ "This is a ", { "type": "em", - "children": "subhead" + "children": [ "subhead" ] }, "." ] diff --git a/core-blocks/test/fixtures/core__table.json b/core-blocks/test/fixtures/core__table.json index 0a38c827b437f3..5fb5252fbd8335 100644 --- a/core-blocks/test/fixtures/core__table.json +++ b/core-blocks/test/fixtures/core__table.json @@ -7,23 +7,23 @@ "content": [ { "type": "thead", - "children": { + "children": [ { "type": "tr", "children": [ { "type": "th", - "children": "Version" + "children": [ "Version" ] }, { "type": "th", - "children": "Musician" + "children": [ "Musician" ] }, { "type": "th", - "children": "Date" + "children": [ "Date" ] } ] - } + } ] }, { "type": "tbody", @@ -33,21 +33,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2003/05/wordpress-now-available/" }, - "children": ".70" - } + "children": [ ".70" ] + } ] }, { "type": "td", - "children": "No musician chosen." + "children": [ "No musician chosen." ] }, { "type": "td", - "children": "May 27, 2003" + "children": [ "May 27, 2003" ] } ] }, @@ -56,21 +56,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2004/01/wordpress-10/" }, - "children": "1.0" - } + "children": [ "1.0" ] + } ] }, { "type": "td", - "children": "Miles Davis" + "children": [ "Miles Davis" ] }, { "type": "td", - "children": "January 3, 2004" + "children": [ "January 3, 2004" ] } ] }, @@ -86,17 +86,17 @@ "attributes": { "href": "https://codex.wordpress.org/WordPress_Versions" }, - "children": "the full list" + "children": [ "the full list" ] } ] }, { "type": "td", - "children": "…" + "children": [ "…" ] }, { "type": "td", - "children": "…" + "children": [ "…" ] } ] }, @@ -105,21 +105,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2015/12/clifford/" }, - "children": "4.4" - } + "children": [ "4.4" ] + } ] }, { "type": "td", - "children": "Clifford Brown" + "children": [ "Clifford Brown" ] }, { "type": "td", - "children": "December 8, 2015" + "children": [ "December 8, 2015" ] } ] }, @@ -128,21 +128,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2016/04/coleman/" }, - "children": "4.5" - } + "children": [ "4.5" ] + } ] }, { "type": "td", - "children": "Coleman Hawkins" + "children": [ "Coleman Hawkins" ] }, { "type": "td", - "children": "April 12, 2016" + "children": [ "April 12, 2016" ] } ] }, @@ -151,21 +151,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2016/08/pepper/" }, - "children": "4.6" - } + "children": [ "4.6" ] + } ] }, { "type": "td", - "children": "Pepper Adams" + "children": [ "Pepper Adams" ] }, { "type": "td", - "children": "August 16, 2016" + "children": [ "August 16, 2016" ] } ] }, @@ -174,21 +174,21 @@ "children": [ { "type": "td", - "children": { + "children": [ { "type": "a", "attributes": { "href": "https://wordpress.org/news/2016/12/vaughan/" }, - "children": "4.7" - } + "children": [ "4.7" ] + } ] }, { "type": "td", - "children": "Sarah Vaughan" + "children": [ "Sarah Vaughan" ] }, { "type": "td", - "children": "December 6, 2016" + "children": [ "December 6, 2016" ] } ] } diff --git a/core-blocks/test/fixtures/core__text__converts-to-paragraph.json b/core-blocks/test/fixtures/core__text__converts-to-paragraph.json index f9ff727423d80a..a3f77750905005 100644 --- a/core-blocks/test/fixtures/core__text__converts-to-paragraph.json +++ b/core-blocks/test/fixtures/core__text__converts-to-paragraph.json @@ -8,7 +8,7 @@ "This is an old-style text block. Changed to ", { "type": "code", - "children": "paragraph" + "children": [ "paragraph" ] }, " in #2135." ], diff --git a/core-blocks/test/fixtures/core__verse.json b/core-blocks/test/fixtures/core__verse.json index 0f784623281357..67fc178929dc37 100644 --- a/core-blocks/test/fixtures/core__verse.json +++ b/core-blocks/test/fixtures/core__verse.json @@ -8,11 +8,12 @@ "A ", { "type": "em", - "children": "verse" + "children": [ "verse" ] }, "…", { - "type": "br" + "type": "br", + "children": [] }, "And more!" ] diff --git a/editor/components/rich-text/format.js b/editor/components/rich-text/format.js index 221966b81fa7e4..791dac85615776 100644 --- a/editor/components/rich-text/format.js +++ b/editor/components/rich-text/format.js @@ -7,7 +7,8 @@ import { nodeListToReact } from 'dom-react'; /** * WordPress dependencies */ -import { createElement, renderToString } from '@wordpress/element'; +import { renderToString } from '@wordpress/element'; +import { createSimpleElement } from '@wordpress/blocks'; /** * Transforms a WP Element to its corresponding HTML string. @@ -55,7 +56,7 @@ export function createTinyMCEElement( type, props, ...children ) { return children; } - return createElement( + return createSimpleElement( type, omitBy( props, ( _, key ) => key.indexOf( 'data-mce-' ) === 0 ), ...children diff --git a/editor/components/rich-text/test/__snapshots__/format.js.snap b/editor/components/rich-text/test/__snapshots__/format.js.snap index 731d9765c970d5..16fd983c7e72ef 100644 --- a/editor/components/rich-text/test/__snapshots__/format.js.snap +++ b/editor/components/rich-text/test/__snapshots__/format.js.snap @@ -12,12 +12,21 @@ exports[`createTinyMCEElement should render a TinyMCE element 1`] = ` exports[`domToElement should return the corresponding element 1`] = ` Array [ -
- - content - -
, + Object { + "props": Object { + "children": Array [ + Object { + "props": Object { + "children": Array [ + "content", + ], + }, + "type": "strong", + }, + ], + "className": "container", + }, + "type": "div", + }, ] `; diff --git a/editor/components/rich-text/test/format.js b/editor/components/rich-text/test/format.js index 1a42aa9e39f051..3216fc0d575bb0 100644 --- a/editor/components/rich-text/test/format.js +++ b/editor/components/rich-text/test/format.js @@ -6,7 +6,7 @@ import { shallow } from 'enzyme'; /** * WordPress dependencies */ -import { createElement } from '@wordpress/element'; +import { createSimpleElement } from '@wordpress/blocks'; /** * Internal dependencies @@ -59,8 +59,8 @@ describe( 'elementToString', () => { } ); test( 'should return the HTML content ', () => { - const element = createElement( 'div', { className: 'container' }, - createElement( 'strong', {}, 'content' ) + const element = createSimpleElement( 'div', { className: 'container' }, + createSimpleElement( 'strong', {}, 'content' ) ); expect( elementToString( element ) ).toBe( '
content
' ); } ); From 1634a05916391d198f05f6f431df8ad7e678265f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Jun 2018 13:26:50 +0100 Subject: [PATCH 2/2] Move createSimpleElement to wordpress/element --- blocks/api/index.js | 1 - blocks/api/matchers.js | 4 ++-- blocks/api/utils.js | 18 ------------------ editor/components/rich-text/format.js | 3 +-- editor/components/rich-text/test/format.js | 2 +- packages/element/src/index.js | 19 +++++++++++++++++++ 6 files changed, 23 insertions(+), 24 deletions(-) diff --git a/blocks/api/index.js b/blocks/api/index.js index cdc9c60a84e764..e9e883a33b6a12 100644 --- a/blocks/api/index.js +++ b/blocks/api/index.js @@ -39,7 +39,6 @@ export { } from './registration'; export { isUnmodifiedDefaultBlock, - createSimpleElement, } from './utils'; export { doBlocksMatchTemplate, diff --git a/blocks/api/matchers.js b/blocks/api/matchers.js index 46f833eeba0d43..40cd89859eb5b1 100644 --- a/blocks/api/matchers.js +++ b/blocks/api/matchers.js @@ -5,9 +5,9 @@ import { nodeListToReact, nodeToReact } from 'dom-react'; export { attr, prop, html, text, query } from 'hpq'; /** - * Internal dependencies + * WordPress dependencies */ -import { createSimpleElement } from './utils'; +import { createSimpleElement } from '@wordpress/element'; export const children = ( selector ) => { return ( domNode ) => { diff --git a/blocks/api/utils.js b/blocks/api/utils.js index 94552f06609da2..fa2983015350a4 100644 --- a/blocks/api/utils.js +++ b/blocks/api/utils.js @@ -118,21 +118,3 @@ export function normalizeIconObject( icon ) { } return icon; } - -/** - * Creates a simplified element representation. - * - * @param {string} type - * @param {Object} props - * @param {Array?} children - * - * @return {Object} Element. - */ -export function createSimpleElement( type, props, ...children ) { - return { - type, props: { - ...omit( props, [ 'key' ] ), - children, - }, - }; -} diff --git a/editor/components/rich-text/format.js b/editor/components/rich-text/format.js index 791dac85615776..5c9eeeae9837d8 100644 --- a/editor/components/rich-text/format.js +++ b/editor/components/rich-text/format.js @@ -7,8 +7,7 @@ import { nodeListToReact } from 'dom-react'; /** * WordPress dependencies */ -import { renderToString } from '@wordpress/element'; -import { createSimpleElement } from '@wordpress/blocks'; +import { renderToString, createSimpleElement } from '@wordpress/element'; /** * Transforms a WP Element to its corresponding HTML string. diff --git a/editor/components/rich-text/test/format.js b/editor/components/rich-text/test/format.js index 3216fc0d575bb0..143a6c7af68021 100644 --- a/editor/components/rich-text/test/format.js +++ b/editor/components/rich-text/test/format.js @@ -6,7 +6,7 @@ import { shallow } from 'enzyme'; /** * WordPress dependencies */ -import { createSimpleElement } from '@wordpress/blocks'; +import { createSimpleElement } from '@wordpress/element'; /** * Internal dependencies diff --git a/packages/element/src/index.js b/packages/element/src/index.js index d45ad349ec8b5e..337c385754f1da 100644 --- a/packages/element/src/index.js +++ b/packages/element/src/index.js @@ -19,6 +19,7 @@ import { flowRight, isString, upperFirst, + omit, } from 'lodash'; /** @@ -45,6 +46,24 @@ import serialize from './serialize'; */ export { createElement }; +/** + * Creates a simplified element representation. + * + * @param {string} type + * @param {Object} props + * @param {Array?} children + * + * @return {Object} Element. + */ +export function createSimpleElement( type, props, ...children ) { + return { + type, props: { + ...omit( props, [ 'key' ] ), + children, + }, + }; +} + /** * Returns an object tracking a reference to a rendered element via its * `current` property as either a DOMElement or Element, dependent upon the