Give it a try. Press the "really wide" button on the image toolbar.
+Give it a try. Press the "really wide" button on the image toolbar.
Courgette ' );
} );
+ it( 'should escape attributes and html', () => {
+ const result = renderToString( createElement( 'a', {
+ href: '/index.php?foo=bar&qux=<"scary">',
+ style: {
+ backgroundColor: 'red',
+ },
+ }, '© (sic) © © 2018 <"WordPress" & Friends>' ) );
+
+ expect( result ).toBe(
+ '' +
+ '© (sic) © © 2018 <"WordPress" & Friends>' +
+ ' '
+ );
+ } );
+
it( 'strips raw html wrapper', () => {
const html = 'So scary!
';
diff --git a/element/test/serialize.js b/element/test/serialize.js
new file mode 100644
index 00000000000000..4f506d2707cc38
--- /dev/null
+++ b/element/test/serialize.js
@@ -0,0 +1,488 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { Component, Fragment } from '../';
+import serialize, {
+ hasPrefix,
+ renderElement,
+ renderNativeComponent,
+ renderComponent,
+ renderAttributes,
+ renderStyle,
+} from '../serialize';
+
+describe( 'serialize()', () => {
+ it( 'should render with context', () => {
+ class Provider extends Component {
+ getChildContext() {
+ return {
+ greeting: 'Hello!',
+ };
+ }
+
+ render() {
+ return this.props.children;
+ }
+ }
+
+ Provider.childContextTypes = {
+ greeting: noop,
+ };
+
+ // NOTE: Technically, a component should only receive context if it
+ // explicitly defines `contextTypes`. This requirement is ignored in
+ // our implementation.
+
+ function FunctionComponent( props, context ) {
+ return 'FunctionComponent: ' + context.greeting;
+ }
+
+ class ClassComponent extends Component {
+ render() {
+ return 'ClassComponent: ' + this.context.greeting;
+ }
+ }
+
+ const result = serialize(
+
+
+ );
+
+ expect( result ).toBe(
+ 'FunctionComponent: Hello!' +
+ 'ClassComponent: Hello!'
+ );
+ } );
+
+ describe( 'empty attributes', () => {
+ it( 'should not render a null attribute value', () => {
+ const result = serialize(
] );
+
+ expect( result ).toBe( 'hello
' );
+ } );
+
+ it( 'renders escaped string element', () => {
+ const result = renderElement( 'hello & world & friends Hello
);
+
+ expect( result ).toBe( 'Hello
' );
+ } );
+
+ it( 'renders function component', () => {
+ function Greeting() {
+ return Hello
;
+ }
+
+ const result = renderElement( Hello
' );
+ } );
+
+ it( 'renders class component', () => {
+ class Greeting extends Component {
+ render() {
+ return Hello
;
+ }
+ }
+
+ const result = renderElement( Hello
' );
+ } );
+
+ it( 'renders empty string for indeterminite types', () => {
+ const result = renderElement( {} );
+
+ expect( result ).toBe( '' );
+ } );
+
+ it( 'renders fragment as its inner children', () => {
+ const result = renderElement( Hello );
+
+ expect( result ).toBe( 'Hello' );
+ } );
+} );
+
+describe( 'renderNativeComponent()', () => {
+ describe( 'textarea', () => {
+ it( 'should render textarea value as its content', () => {
+ const result = renderNativeComponent( 'textarea', { value: 'Hello', children: [] } );
+
+ expect( result ).toBe( '' );
+ } );
+
+ it( 'should render textarea children as its content', () => {
+ const result = renderNativeComponent( 'textarea', { children: [ 'Hello' ] } );
+
+ expect( result ).toBe( '' );
+ } );
+ } );
+
+ describe( 'escaping', () => {
+ it( 'should escape children', () => {
+ const result = renderNativeComponent( 'div', { children: [ '<img/>
' );
+ } );
+
+ it( 'should not escape children with dangerouslySetInnerHTML', () => {
+ const result = renderNativeComponent( 'div', { dangerouslySetInnerHTML: { __html: 'Hello
' );
+ } );
+
+ it( 'should render array of children', () => {
+ const result = renderNativeComponent( 'div', { children: [
+ 'Hello ',
+ World ,
+ ] } );
+
+ expect( result ).toBe( 'Hello World
' );
+ } );
+ } );
+} );
+
+describe( 'renderComponent()', () => {
+ it( 'calls constructor and componentWillMount', () => {
+ class Example extends Component {
+ constructor() {
+ super( ...arguments );
+
+ this.constructed = 'constructed';
+ }
+
+ componentWillMount() {
+ this.willMounted = 'willMounted';
+ }
+
+ render() {
+ return this.constructed + this.willMounted;
+ }
+ }
+
+ const result = renderComponent( Example, {} );
+
+ expect( result ).toBe( 'constructedwillMounted' );
+ } );
+
+ it( 'does not call componentDidMount', () => {
+ class Example extends Component {
+ constructor() {
+ super( ...arguments );
+
+ this.state = {};
+ }
+
+ componentDidMount() {
+ this.setState( { didMounted: 'didMounted' } );
+ }
+
+ render() {
+ return this.state.didMounted;
+ }
+ }
+
+ const result = renderComponent( Example, {} );
+
+ expect( result ).toBe( '' );
+ } );
+} );
+
+describe( 'renderAttributes()', () => {
+ describe( 'boolean attributes', () => {
+ it( 'should return boolean attributes false as omitted', () => {
+ const result = renderAttributes( { controls: false } );
+
+ expect( result ).toBe( '' );
+ } );
+
+ it( 'should return boolean attributes non-false as present', () => {
+ [ true, 'true', 'false', '' ].forEach( ( controls ) => {
+ const result = renderAttributes( { controls } );
+
+ expect( result ).toBe( ' controls' );
+ } );
+ } );
+
+ it( 'should consider normalized boolean attribute name', () => {
+ const result = renderAttributes( { allowFullscreen: true } );
+
+ expect( result ).toBe( ' allowfullscreen' );
+ } );
+ } );
+
+ describe( 'prefixed attributes', () => {
+ it( 'should not render if nullish', () => {
+ [ null, undefined ].forEach( ( value ) => {
+ const result = renderAttributes( { 'data-foo': value } );
+
+ expect( result ).toBe( '' );
+ } );
+ } );
+
+ it( 'should return in its string form unmodified', () => {
+ let result = renderAttributes( {
+ 'aria-hidden': '',
+ } );
+
+ expect( result ).toBe( ' aria-hidden=""' );
+
+ result = renderAttributes( {
+ 'aria-hidden': true,
+ } );
+
+ expect( result ).toBe( ' aria-hidden="true"' );
+
+ result = renderAttributes( {
+ 'aria-hidden': false,
+ } );
+
+ expect( result ).toBe( ' aria-hidden="false"' );
+ } );
+ } );
+
+ describe( 'normalized attribute names', () => {
+ it( 'should return with normal attribute names', () => {
+ const result = renderAttributes( {
+ htmlFor: 'foo',
+ className: 'bar',
+ contentEditable: true,
+ } );
+
+ expect( result ).toBe( ' for="foo" class="bar" contenteditable="true"' );
+ } );
+ } );
+
+ describe( 'string escaping', () => {
+ it( 'should escape string attributes', () => {
+ const result = renderAttributes( {
+ style: {
+ background: 'url("foo.png")',
+ },
+ href: '/index.php?foo=bar&qux=<"scary">',
+ } );
+
+ expect( result ).toBe( ' style="background:url("foo.png")" href="/index.php?foo=bar&qux=<"scary">"' );
+ } );
+
+ it( 'should render numeric attributes', () => {
+ const result = renderAttributes( {
+ size: 10,
+ } );
+
+ expect( result ).toBe( ' size="10"' );
+ } );
+ } );
+
+ describe( 'ignored attributes', () => {
+ it( 'does not render nullish attributes', () => {
+ const result = renderAttributes( {
+ className: null,
+ htmlFor: undefined,
+ } );
+
+ expect( result ).toBe( '' );
+ } );
+
+ it( 'does not render attributes of invalid types', () => {
+ const result = renderAttributes( {
+ onClick: () => {},
+ className: [],
+ } );
+
+ expect( result ).toBe( '' );
+ } );
+
+ it( 'does not render internal attributes', () => {
+ const result = renderAttributes( {
+ key: 'foo',
+ children: [ 'hello' ],
+ } );
+
+ expect( result ).toBe( '' );
+ } );
+ } );
+} );
+
+describe( 'renderStyle()', () => {
+ it( 'should render without trailing semi-colon', () => {
+ const result = renderStyle( {
+ color: 'red',
+ } );
+
+ expect( result ).toBe( 'color:red' );
+ } );
+
+ it( 'should not render nullish value', () => {
+ const result = renderStyle( {
+ border: null,
+ backgroundColor: undefined,
+ color: 'red',
+ } );
+
+ expect( result ).toBe( 'color:red' );
+ } );
+
+ it( 'should render a semi-colon delimited set', () => {
+ const result = renderStyle( {
+ color: 'red',
+ border: '1px dotted green',
+ } );
+
+ expect( result ).toBe( 'color:red;border:1px dotted green' );
+ } );
+
+ it( 'should kebab-case style properties', () => {
+ const result = renderStyle( {
+ color: 'red',
+ backgroundColor: 'green',
+ } );
+
+ expect( result ).toBe( 'color:red;background-color:green' );
+ } );
+
+ describe( 'value unit', () => {
+ it( 'should not render zero unit', () => {
+ const result = renderStyle( {
+ borderWidth: 0,
+ } );
+
+ expect( result ).toBe( 'border-width:0' );
+ } );
+
+ it( 'should render numeric units', () => {
+ const result = renderStyle( {
+ borderWidth: 10,
+ } );
+
+ expect( result ).toBe( 'border-width:10px' );
+ } );
+
+ it( 'should not render numeric units for unitless properties', () => {
+ const result = renderStyle( {
+ order: 10,
+ } );
+
+ expect( result ).toBe( 'order:10' );
+ } );
+ } );
+} );
diff --git a/lib/client-assets.php b/lib/client-assets.php
index ebd72a4397fa57..6daf043b44d81c 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -141,7 +141,7 @@ function gutenberg_register_scripts_and_styles() {
wp_register_script(
'wp-element',
gutenberg_url( 'element/build/index.js' ),
- array( 'react', 'react-dom', 'react-dom-server' ),
+ array( 'react', 'react-dom' ),
filemtime( gutenberg_dir_path() . 'element/build/index.js' )
);
wp_register_script(
@@ -386,11 +386,6 @@ function gutenberg_register_vendor_scripts() {
'https://unpkg.com/react-dom@16.2.0/umd/react-dom' . $react_suffix . '.js',
array( 'react' )
);
- gutenberg_register_vendor_script(
- 'react-dom-server',
- 'https://unpkg.com/react-dom@16.2.0/umd/react-dom-server.browser' . $react_suffix . '.js',
- array( 'react' )
- );
$moment_script = SCRIPT_DEBUG ? 'moment.js' : 'min/moment.min.js';
gutenberg_register_vendor_script(
'moment',
diff --git a/phpunit/class-vendor-script-filename-test.php b/phpunit/class-vendor-script-filename-test.php
index a16f2cc35b208f..2dff7dbac239a1 100644
--- a/phpunit/class-vendor-script-filename-test.php
+++ b/phpunit/class-vendor-script-filename-test.php
@@ -17,10 +17,6 @@ function vendor_script_filename_cases() {
'https://unpkg.com/react-dom@next/umd/react-dom.development.js',
'react-dom.HASH.js',
),
- array(
- 'https://unpkg.com/react-dom@next/umd/react-dom-server.development.js',
- 'react-dom-server.HASH.js',
- ),
array(
'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.js',
'tinymce.HASH.js',
@@ -38,10 +34,6 @@ function vendor_script_filename_cases() {
'https://unpkg.com/react-dom@next/umd/react-dom.production.min.js',
'react-dom.min.HASH.js',
),
- array(
- 'https://unpkg.com/react-dom@next/umd/react-dom-server.production.min.js',
- 'react-dom-server.min.HASH.js',
- ),
array(
'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.min.js',
'tinymce.min.HASH.js',
diff --git a/post-content.js b/post-content.js
index c5c350ecf5971b..c82d8b3d36655e 100644
--- a/post-content.js
+++ b/post-content.js
@@ -12,7 +12,7 @@ window._wpGutenbergPost.content = {
'',
'',
- 'The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content —somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you'll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.
',
+ 'The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content —somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you\'ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.
',
'',
'',
@@ -32,15 +32,15 @@ window._wpGutenbergPost.content = {
'',
'',
- 'Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you'll find aspects of adding captions or going full-width with your pictures much easier and robust than before.
',
+ 'Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you\'ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.
',
'',
'',
- 'Give it a try. Press the "wide" button on the image toolbar. Give it a try. Press the "wide" button on the image toolbar. Try selecting and removing or editing the caption, now you don't have to be careful about selecting the image or other text by mistake and ruining the presentation.
',
+ 'Try selecting and removing or editing the caption, now you don\'t have to be careful about selecting the image or other text by mistake and ruining the presentation.
',
'',
'',
@@ -48,11 +48,11 @@ window._wpGutenbergPost.content = {
'',
'',
- 'Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That's the spirit behind the inserter—the (+) button you'll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.
',
+ 'Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That\'s the spirit behind the inserter—the (+) button you\'ll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.
',
'',
'',
- 'Go give it a try, you may discover things WordPress can already add into your posts that you didn't know about. Here's a short list of what you can currently find there:
',
+ 'Go give it a try, you may discover things WordPress can already add into your posts that you didn\'t know about. Here\'s a short list of what you can currently find there:
',
'',
'',
@@ -76,7 +76,7 @@ window._wpGutenbergPost.content = {
'',
'',
- 'The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It's always easy to add it back.
',
+ 'The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It\'s always easy to add it back.
',
'',
'',
@@ -104,7 +104,7 @@ window._wpGutenbergPost.content = {
'',
'',
- '
- 
' );
+ } );
+
+ it( 'should ignore self-closing elements children', () => {
+ const result = renderNativeComponent( 'img', { src: 'foo.png', children: [ 'Surprise!' ] } );
+
+ expect( result ).toBe( '
