diff --git a/blocks/api/matchers.js b/blocks/api/matchers.js
index 0ccf4cf8d8832b..40cd89859eb5b1 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';
+/**
+ * WordPress dependencies
+ */
+import { createSimpleElement } from '@wordpress/element';
+
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..fa2983015350a4 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';
/**
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..5c9eeeae9837d8 100644
--- a/editor/components/rich-text/format.js
+++ b/editor/components/rich-text/format.js
@@ -7,7 +7,7 @@ import { nodeListToReact } from 'dom-react';
/**
* WordPress dependencies
*/
-import { createElement, renderToString } from '@wordpress/element';
+import { renderToString, createSimpleElement } from '@wordpress/element';
/**
* Transforms a WP Element to its corresponding HTML string.
@@ -55,7 +55,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..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 { createElement } from '@wordpress/element';
+import { createSimpleElement } from '@wordpress/element';
/**
* 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
' );
} );
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