Use nested blocks for quotes

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 17, 2018 · feb649f · feb649f
1 parent 75d64fa
commit feb649f
Show file tree

Hide file tree

Showing 35 changed files with 419 additions and 447 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
@@ -153,8 +153,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
@@ -14,25 +14,13 @@ import { withState } from '@wordpress/components';
  */
 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',
@@ -68,7 +56,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 key="quote" 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"
@@ -116,13 +91,11 @@ export const settings = {
 	} ),
 
 	save( { attributes } ) {
-		const { value, citation, align } = attributes;
+		const { citation, align } = attributes;
 
 		return (
 			<blockquote className={ `align${ align }` }>
-				{ value && value.map( ( paragraph, i ) =>
-					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-				) }
+				<InnerBlocks.Content />
 				{ citation && citation.length > 0 && (
 					<cite>{ citation }</cite>
 				) }
@@ -133,6 +106,56 @@ 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 && (
+						<cite>{ citation }</cite>
+					) }
+				</blockquote>
+			);
+		},
+	}, {
+		attributes: {
+			...blockAttributes,
+			value: {
+				type: 'array',
+				source: 'query',
+				selector: 'blockquote > p',
+				query: {
+					children: {
+						source: 'node',
+					},
+				},
+			},
 			citation: {
 				type: 'array',
 				source: 'children',

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>
+/>
 `;