RichText state

WordPress · Jul 30, 2018 · c30eeed · c30eeed
1 parent ba4295c
commit c30eeed
Show file tree

Hide file tree

Showing 115 changed files with 5,070 additions and 3,454 deletions.
diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
@@ -135,7 +135,7 @@ class AudioEdit extends Component {
 				</InspectorControls>
 				<figure className={ className }>
 					<audio controls="controls" src={ src } />
-					{ ( ( caption && caption.length ) || !! isSelected ) && (
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }

diff --git a/core-blocks/audio/index.js b/core-blocks/audio/index.js
@@ -30,7 +30,7 @@ export const settings = {
 		},
 		caption: {
 			type: 'array',
-			source: 'children',
+			source: 'rich-text',
 			selector: 'figcaption',
 		},
 		id: {
@@ -67,7 +67,7 @@ export const settings = {
 		return (
 			<figure>
 				<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
-				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+				{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 			</figure>
 		);
 	},

diff --git a/core-blocks/button/index.js b/core-blocks/button/index.js
@@ -33,8 +33,8 @@ const blockAttributes = {
 		attribute: 'title',
 	},
 	text: {
-		type: 'array',
-		source: 'children',
+		type: 'object',
+		source: 'rich-text',
 		selector: 'a',
 	},
 	backgroundColor: {

diff --git a/core-blocks/cover-image/index.js b/core-blocks/cover-image/index.js
@@ -31,8 +31,8 @@ const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
 const blockAttributes = {
 	title: {
-		type: 'array',
-		source: 'children',
+		type: 'object',
+		source: 'rich-text',
 		selector: 'p',
 	},
 	url: {
@@ -245,7 +245,7 @@ export const settings = {
 
 		return (
 			<div className={ classes } style={ style }>
-				{ title && title.length > 0 && (
+				{ ! RichText.isEmpty( title ) && (
 					<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
 				) }
 			</div>
@@ -256,8 +256,8 @@ export const settings = {
 		attributes: {
 			...blockAttributes,
 			title: {
-				type: 'array',
-				source: 'children',
+				type: 'object',
+				source: 'rich-text',
 				selector: 'h2',
 			},
 		},

diff --git a/core-blocks/cover-image/test/__snapshots__/index.js.snap b/core-blocks/cover-image/test/__snapshots__/index.js.snap
@@ -7,21 +7,26 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
   <div
     class="components-placeholder__label"
   >
-    <svg
-      aria-hidden="true"
-      class="dashicon dashicons-format-image"
-      focusable="false"
-      height="20"
-      role="img"
-      viewBox="0 0 20 20"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="editor-rich-text"
     >
-      <path
-        d="M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z"
-      />
-    </svg>
-    Cover Image
+      <div>
+        <div>
+          <div
+            class="components-autocomplete"
+          >
+            <h2
+              aria-autocomplete="list"
+              aria-expanded="false"
+              aria-multiline="true"
+              class="editor-rich-text__tinymce"
+              contenteditable="true"
+              role="textbox"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div
     class="components-placeholder__instructions"

diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js
@@ -58,10 +58,9 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 				type: 'string',
 			},
 			caption: {
-				type: 'array',
-				source: 'children',
+				type: 'object',
+				source: 'rich-text',
 				selector: 'figcaption',
-				default: [],
 			},
 			type: {
 				type: 'string',
@@ -286,7 +285,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 			return (
 				<figure className={ embedClassName }>
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 				</figure>
 			);
 		},

diff --git a/core-blocks/gallery/index.js b/core-blocks/gallery/index.js
@@ -46,8 +46,8 @@ const blockAttributes = {
 				attribute: 'data-id',
 			},
 			caption: {
-				type: 'array',
-				source: 'children',
+				type: 'object',
+				source: 'rich-text',
 				selector: 'figcaption',
 			},
 		},

diff --git a/core-blocks/heading/index.js b/core-blocks/heading/index.js
@@ -39,8 +39,8 @@ const supports = {
 
 const schema = {
 	content: {
-		type: 'array',
-		source: 'children',
+		type: 'object',
+		source: 'rich-text',
 		selector: 'h1,h2,h3,h4,h5,h6',
 	},
 	level: {

diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
@@ -467,7 +467,7 @@ class ImageEdit extends Component {
 							);
 						} }
 					</ImageSize>
-					{ ( caption && caption.length > 0 ) || isSelected ? (
+					{ ! RichText.isEmpty( caption ) || isSelected ? (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }

diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
@@ -39,8 +39,8 @@ const blockAttributes = {
 		default: '',
 	},
 	caption: {
-		type: 'array',
-		source: 'children',
+		type: 'object',
+		source: 'rich-text',
 		selector: 'figcaption',
 	},
 	href: {
@@ -220,7 +220,7 @@ export const settings = {
 		return (
 			<figure className={ classes }>
 				{ href ? <a href={ href }>{ image }</a> : image }
-				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+				{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 			</figure>
 		);
 	},
@@ -244,7 +244,7 @@ export const settings = {
 				return (
 					<figure className={ align ? `align${ align }` : null } >
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+						{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>
 				);
 			},
@@ -267,7 +267,7 @@ export const settings = {
 				return (
 					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+						{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>
 				);
 			},

diff --git a/core-blocks/list/index.js b/core-blocks/list/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, compact, get, initial, last, isEmpty, omit } from 'lodash';
+import { find, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -52,9 +52,9 @@ const schema = {
 	},
 	values: {
 		type: 'array',
-		source: 'children',
+		source: 'rich-text',
 		selector: 'ol,ul',
-		default: [],
+		multiline: 'li',
 	},
 };
 
@@ -78,24 +78,21 @@ export const settings = {
 				isMultiBlock: true,
 				blocks: [ 'core/paragraph' ],
 				transform: ( blockAttributes ) => {
-					const items = blockAttributes.map( ( { content } ) => content );
-					const hasItems = ! items.every( isEmpty );
 					return createBlock( 'core/list', {
-						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
+						values: blockAttributes.map( ( { content } ) => content ),
 					} );
 				},
 			},
 			{
 				type: 'block',
 				blocks: [ 'core/quote' ],
 				transform: ( { value, citation } ) => {
-					const items = value.map( ( p ) => get( p, [ 'children', 'props', 'children' ] ) );
-					if ( ! isEmpty( citation ) ) {
-						items.push( citation );
+					if ( ! RichText.isEmpty( citation ) ) {
+						value.push( citation );
 					}
-					const hasItems = ! items.every( isEmpty );
+
 					return createBlock( 'core/list', {
-						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
+						values: value,
 					} );
 				},
 			},
@@ -121,7 +118,7 @@ export const settings = {
 				regExp: /^[*-]\s/,
 				transform: ( { content } ) => {
 					return createBlock( 'core/list', {
-						values: [ <li key="1">{ content }</li> ],
+						values: [ content ],
 					} );
 				},
 			},
@@ -131,7 +128,7 @@ export const settings = {
 				transform: ( { content } ) => {
 					return createBlock( 'core/list', {
 						ordered: true,
-						values: [ <li key="1">{ content }</li> ],
+						values: [ content ],
 					} );
 				},
 			},
@@ -141,20 +138,14 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/paragraph' ],
 				transform: ( { values } ) =>
-					compact( values.map( ( value ) => get( value, [ 'props', 'children' ], null ) ) )
-						.map( ( content ) => createBlock( 'core/paragraph', {
-							content: [ content ],
-						} ) ),
+					values.map( ( content ) => createBlock( 'core/paragraph', { content } ) ),
 			},
 			{
 				type: 'block',
 				blocks: [ 'core/quote' ],
 				transform: ( { values } ) => {
 					return createBlock( 'core/quote', {
-						value: compact( ( values.length === 1 ? values : initial( values ) )
-							.map( ( value ) => get( value, [ 'props', 'children' ], null ) ) )
-							.map( ( children ) => ( { children: <p>{ children }</p> } ) ),
-						citation: ( values.length === 1 ? undefined : [ get( last( values ), [ 'props', 'children' ] ) ] ),
+						value: values,
 					} );
 				},
 			},
@@ -370,7 +361,7 @@ export const settings = {
 		const tagName = ordered ? 'ol' : 'ul';
 
 		return (
-			<RichText.Content tagName={ tagName } value={ values } />
+			<RichText.Content tagName={ tagName } value={ values } multiline="li" />
 		);
 	},
 };
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -34,7 +34,6 @@ import {
 import {
 	createBlock,
 	getPhrasingContentSchema,
-	children,
 } from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
 
@@ -246,10 +245,9 @@ const supports = {
 
 const schema = {
 	content: {
-		type: 'array',
-		source: 'children',
+		type: 'object',
+		source: 'rich-text',
 		selector: 'p',
-		default: [],
 	},
 	align: {
 		type: 'string',
@@ -425,10 +423,7 @@ export const settings = {
 
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: children.concat(
-				attributes.content,
-				attributesToMerge.content
-			),
+			content: RichText.concat( attributes.content, attributesToMerge.content ),
 		};
 	},
 

diff --git a/core-blocks/preformatted/index.js b/core-blocks/preformatted/index.js
@@ -24,8 +24,8 @@ export const settings = {
 
 	attributes: {
 		content: {
-			type: 'array',
-			source: 'children',
+			type: 'object',
+			source: 'rich-text',
 			selector: 'pre',
 		},
 	},