Use nested blocks for quotes

81aec55 Don't use rawHandler for migration 188e4a8 Make paste work 86770b7 Adjust e2e, multi selection does not work across nested levels 23027a7 Preserve citation when unwrapping the blocks 188150c Update demo content 2900215 ENTER twice should remove nesting f69f171 Avoid updateContent call on split a54b12d Restore before arg in onSplit, refactor later bf8c171 Handle block (un)wrapping in a separate PR 8929b5f Add e2e test for nested block splitting ef09336 Commits on Apr 12, 2018 Use moveBlockToPosition 6662c36 Fix TinyMCE error on double enter split 6ab8eea Fix split and merge ec7f609
WordPress · Apr 23, 2018 · 1924ae2 · 1924ae2
1 parent d96d79b
commit 1924ae2
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>
+/>
 `;