Revert "Revert "Use nested blocks for quotes (#6054)" (#6501)"

This reverts commit 230ad0d.

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 );

blocks/rich-text/README.md

@@ -39,7 +39,7 @@ a traditional `input` field, usually when the user exits the field.
 
 ### `onSplit( before: Array|String, after: Array|String, ...blocks: Object ): Function`
 
-*Optional.* Called when the content can be split with `before` and `after`. There might be blocks present, which should be inserted in between.
+*Optional.* Called when the content can be split with `after` as the split off value. There might be blocks present, which should be inserted before the `after` value. Note: the `before` value should no longer be used.
 
 ### `onReplace( blocks: Array ): Function`
 

blocks/rich-text/index.js

@@ -38,6 +38,11 @@ import { EVENTS } from './constants';
 import { withBlockEditContext } from '../block-edit/context';
 import { domToFormat, valueToString, isEmpty } from './format';
 
+/**
+ * Browser dependencies
+ */
+const { console } = window;
+
 const { BACKSPACE, DELETE, ENTER } = keycodes;
 
 /**
@@ -121,6 +126,7 @@ export class RichText extends Component {
 		};
 
 		this.isEmpty = ! value || ! value.length;
+		this.savedContent = value;
 	}
 
 	/**
@@ -272,7 +278,7 @@ export class RichText extends Component {
 			} );
 
 			// Allows us to ask for this information when we get a report.
-			window.console.log( 'Received item:\n\n', blob );
+			console.log( 'Received item:\n\n', blob );
 
 			if ( isEmptyEditor && this.props.onReplace ) {
 				// Necessary to allow the paste bin to be removed without errors.
@@ -303,8 +309,8 @@ export class RichText extends Component {
 	onPastePreProcess( event ) {
 		const HTML = this.isPlainTextPaste ? '' : event.content;
 		// Allows us to ask for this information when we get a report.
-		window.console.log( 'Received HTML:\n\n', HTML );
-		window.console.log( 'Received plain text:\n\n', this.pastedPlainText );
+		console.log( 'Received HTML:\n\n', HTML );
+		console.log( 'Received plain text:\n\n', this.pastedPlainText );
 
 		// There is a selection, check if a link is pasted.
 		if ( ! this.editor.selection.isCollapsed() ) {
@@ -319,7 +325,7 @@ export class RichText extends Component {
 				} );
 
 				// Allows us to ask for this information when we get a report.
-				window.console.log( 'Created link:\n\n', pastedText );
+				console.log( 'Created link:\n\n', pastedText );
 
 				event.preventDefault();
 
@@ -487,6 +493,10 @@ export class RichText extends Component {
 				if ( event.shiftKey || ! this.props.onSplit ) {
 					this.editor.execCommand( 'InsertLineBreak', false, event );
 				} else {
+					// Splitting the content might destroy the editor, so it's
+					// important that we stop other handlers (e.g. ones
+					// registered by TinyMCE) from also handling this event.
+					event.stopImmediatePropagation();
 					this.splitContent();
 				}
 			}
@@ -619,10 +629,8 @@ export class RichText extends Component {
 			return memo;
 		}, [] );
 
-		// Splitting into two blocks
-		this.setContent( this.props.value );
-
 		const { format } = this.props;
+
 		this.restoreContentAndSplit(
 			domToFormat( before, format, this.editor ),
 			domToFormat( after, format, this.editor )
@@ -701,15 +709,16 @@ export class RichText extends Component {
 			!! this.editor &&
 			this.props.tagName === prevProps.tagName &&
 			this.props.value !== prevProps.value &&
-			this.props.value !== this.savedContent &&
-
-			// Comparing using isEqual is necessary especially to avoid unnecessary updateContent calls
-			// This fixes issues in multi richText blocks like quotes when moving the focus between
-			// the different editables.
-			! isEqual( this.props.value, prevProps.value ) &&
-			! isEqual( this.props.value, this.savedContent )
+			this.props.value !== this.savedContent
 		) {
 			this.updateContent();
+
+			if (
+				'development' === process.env.NODE_ENV &&
+				isEqual( this.props.value, prevProps.value )
+			) {
+				console.warn( 'The current and previous value props are not strictly equal but the contents are the same. Please ensure the value prop reference does not change.' );
+			}
 		}
 	}
 
@@ -766,14 +775,15 @@ export class RichText extends Component {
 
 	/**
 	 * Calling onSplit means we need to abort the change done by TinyMCE.
-	 * we need to call updateContent to restore the initial content before calling onSplit.
+	 * we need to call setContent to restore the initial content before calling onSplit.
 	 *
 	 * @param {Array}  before content before the split position
 	 * @param {Array}  after  content after the split position
 	 * @param {?Array} blocks blocks to insert at the split position
 	 */
 	restoreContentAndSplit( before, after, blocks = [] ) {
-		this.updateContent();
+		this.setContent( before );
+		this.onChange();
 		this.props.onSplit( before, after, ...blocks );
 	}
 

core-blocks/heading/index.js

@@ -150,8 +150,7 @@ export const settings = {
 					onMerge={ mergeBlocks }
 					onSplit={
 						insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
+							( unused, after, ...blocks ) => {
 								insertBlocksAfter( [
 									...blocks,
 									createBlock( 'core/paragraph', { content: after } ),

core-blocks/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
@@ -63,21 +63,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',
@@ -113,18 +98,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' ) ] ),
-					} );
-				},
-			},
 		],
 	},
 
@@ -232,7 +205,6 @@ export const settings = {
 			const {
 				attributes,
 				insertBlocksAfter,
-				setAttributes,
 				mergeBlocks,
 				onReplace,
 				className,
@@ -280,7 +252,7 @@ export const settings = {
 						onMerge={ mergeBlocks }
 						onSplit={
 							insertBlocksAfter ?
-								( before, after, ...blocks ) => {
+								( unused, after, ...blocks ) => {
 									if ( ! blocks.length ) {
 										blocks.push( createBlock( 'core/paragraph' ) );
 									}
@@ -292,7 +264,6 @@ export const settings = {
 										} ) );
 									}
 
-									setAttributes( { values: before } );
 									insertBlocksAfter( blocks );
 								} :
 								undefined

core-blocks/paragraph/index.js

@@ -256,8 +256,7 @@ class ParagraphBlock extends Component {
 							} );
 						} }
 						onSplit={ insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
+							( unused, after, ...blocks ) => {
 								insertBlocksAfter( [
 									...blocks,
 									createBlock( 'core/paragraph', { content: after } ),

core-blocks/pullquote/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,9 +10,11 @@ import { __ } from '@wordpress/i18n';
 import { withState } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import {
+	createBlock,
 	BlockControls,
 	BlockAlignmentToolbar,
 	RichText,
+	InnerBlocks,
 } from '@wordpress/blocks';
 
 /**
@@ -21,21 +23,7 @@ import {
 import './editor.scss';
 import './style.scss';
 
-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',
@@ -71,7 +59,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 } );
 
@@ -84,20 +72,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"
@@ -119,11 +94,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>
 		);
@@ -132,6 +107,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',
@@ -144,7 +167,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>
 			);