Use nested blocks for quotes (#6054)

WordPress · Apr 23, 2018 · 853900d · 853900d
1 parent d96d79b
commit 853900d
Show file tree

Hide file tree

Showing 35 changed files with 426 additions and 445 deletions.
diff --git a/blocks/inner-blocks/index.js b/blocks/inner-blocks/index.js
@@ -4,13 +4,13 @@
 import { withContext } from '@wordpress/components';
 
 function InnerBlocks( { BlockList, layouts } ) {
-	return <BlockList layouts={ layouts } />;
+	return BlockList ? <BlockList layouts={ layouts } /> : null;
 }
 
 InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );
 
 InnerBlocks.Content = ( { BlockContent } ) => {
-	return <BlockContent />;
+	return BlockContent ? <BlockContent /> : null;
 };
 
 InnerBlocks.Content = withContext( 'BlockContent' )()( InnerBlocks.Content );

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -148,8 +148,7 @@ export const settings = {
 					onMerge={ mergeBlocks }
 					onSplit={
 						insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
+							( unused, after, ...blocks ) => {
 								insertBlocksAfter( [
 									...blocks,
 									createBlock( 'core/paragraph', { content: after } ),

diff --git a/blocks/library/list/index.js b/blocks/library/list/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, compact, get, initial, last, isEmpty } from 'lodash';
+import { find, compact, get, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,21 +61,6 @@ export const settings = {
 					} );
 				},
 			},
-			{
-				type: 'block',
-				blocks: [ 'core/quote' ],
-				transform: ( { value, citation } ) => {
-					const items = value.map( ( p ) => get( p, 'children.props.children' ) );
-					if ( ! isEmpty( citation ) ) {
-						items.push( citation );
-					}
-					const hasItems = ! items.every( isEmpty );
-					return createBlock( 'core/list', {
-						nodeName: 'UL',
-						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
-					} );
-				},
-			},
 			{
 				type: 'raw',
 				isMatch: ( node ) => node.nodeName === 'OL' || node.nodeName === 'UL',
@@ -111,18 +96,6 @@ export const settings = {
 							content: [ 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' ) ] ),
-					} );
-				},
-			},
 		],
 	},
 
@@ -230,7 +203,6 @@ export const settings = {
 			const {
 				attributes,
 				insertBlocksAfter,
-				setAttributes,
 				mergeBlocks,
 				onReplace,
 				className,
@@ -278,7 +250,7 @@ export const settings = {
 						onMerge={ mergeBlocks }
 						onSplit={
 							insertBlocksAfter ?
-								( before, after, ...blocks ) => {
+								( unused, after, ...blocks ) => {
 									if ( ! blocks.length ) {
 										blocks.push( createBlock( 'core/paragraph' ) );
 									}
@@ -290,7 +262,6 @@ export const settings = {
 										} ) );
 									}
 
-									setAttributes( { values: before } );
 									insertBlocksAfter( blocks );
 								} :
 								undefined

diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -246,8 +246,7 @@ class ParagraphBlock extends Component {
 							} );
 						} }
 						onSplit={ insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
+							( unused, after, ...blocks ) => {
 								insertBlocksAfter( [
 									...blocks,
 									createBlock( 'core/paragraph', { content: after } ),

diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,25 +15,13 @@ import { Fragment } from '@wordpress/element';
  */
 import './editor.scss';
 import './style.scss';
+import { createBlock } from '../../api';
 import RichText from '../../rich-text';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import InnerBlocks from '../../inner-blocks';
 
-const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) );
-const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( {
-	children: subValue,
-} ) );
 const blockAttributes = {
-	value: {
-		type: 'array',
-		source: 'query',
-		selector: 'blockquote > p',
-		query: {
-			children: {
-				source: 'node',
-			},
-		},
-	},
 	citation: {
 		type: 'array',
 		source: 'children',
@@ -69,7 +57,7 @@ export const settings = {
 	edit: withState( {
 		editable: 'content',
 	} )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => {
-		const { value, citation, align } = attributes;
+		const { citation, align } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } );
 
@@ -82,20 +70,7 @@ export const settings = {
 					/>
 				</BlockControls>
 				<blockquote className={ className }>
-					<RichText
-						multiline="p"
-						value={ toRichTextValue( value ) }
-						onChange={
-							( nextValue ) => setAttributes( {
-								value: fromRichTextValue( nextValue ),
-							} )
-						}
-						/* translators: the text of the quotation */
-						placeholder={ __( 'Write quote…' ) }
-						wrapperClassName="blocks-pullquote__content"
-						isSelected={ isSelected && editable === 'content' }
-						onFocus={ onSetActiveEditable( 'content' ) }
-					/>
+					<InnerBlocks />
 					{ ( citation || isSelected ) && (
 						<RichText
 							tagName="cite"
@@ -117,11 +92,11 @@ export const settings = {
 	} ),
 
 	save( { attributes } ) {
-		const { value, citation, align } = attributes;
+		const { citation, align } = attributes;
 
 		return (
 			<blockquote className={ `align${ align }` }>
-				<RichText.Content value={ toRichTextValue( value ) } />
+				<InnerBlocks.Content />
 				{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
@@ -130,6 +105,54 @@ export const settings = {
 	deprecated: [ {
 		attributes: {
 			...blockAttributes,
+			value: {
+				type: 'array',
+				source: 'query',
+				selector: 'blockquote > p',
+				query: {
+					children: {
+						source: 'node',
+					},
+				},
+			},
+		},
+
+		migrate( { value = [], ...attributes } ) {
+			return [
+				attributes,
+				value.map( ( { children: paragraph } ) =>
+					createBlock( 'core/paragraph', {
+						content: castArray( paragraph.props.children ),
+					} )
+				),
+			];
+		},
+
+		save( { attributes } ) {
+			const { value, citation, align } = attributes;
+
+			return (
+				<blockquote className={ `align${ align }` }>
+					{ value && value.map( ( paragraph, i ) =>
+						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
+					) }
+					{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	}, {
+		attributes: {
+			...blockAttributes,
+			value: {
+				type: 'array',
+				source: 'query',
+				selector: 'blockquote > p',
+				query: {
+					children: {
+						source: 'node',
+					},
+				},
+			},
 			citation: {
 				type: 'array',
 				source: 'children',
@@ -142,7 +165,9 @@ export const settings = {
 
 			return (
 				<blockquote className={ `align${ align }` }>
-					<RichText.Content value={ toRichTextValue( value ) } />
+					{ value && value.map( ( paragraph, i ) =>
+						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
+					) }
 					{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
 				</blockquote>
 			);

diff --git a/blocks/library/pullquote/test/__snapshots__/index.js.snap b/blocks/library/pullquote/test/__snapshots__/index.js.snap
@@ -3,35 +3,5 @@
 exports[`core/pullquote block edit matches snapshot 1`] = `
 <blockquote
   class="wp-block-pullquote"
->
-  <div
-    class="blocks-pullquote__content blocks-rich-text"
-  >
-    <div>
-      <div>
-        <div
-          class="components-autocomplete"
-        >
-          <div
-            aria-autocomplete="list"
-            aria-expanded="false"
-            aria-label="Write quote…"
-            aria-multiline="true"
-            class="blocks-rich-text__tinymce"
-            contenteditable="true"
-            data-is-placeholder-visible="true"
-            role="textbox"
-          />
-          <div
-            class="blocks-rich-text__tinymce"
-          >
-            <p>
-              Write quote…
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</blockquote>
+/>
 `;