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

This reverts commit 853900d.

blocks/inner-blocks/index.js

@@ -4,13 +4,13 @@
 import { withContext } from '@wordpress/components';
 
 function InnerBlocks( { BlockList, layouts } ) {
-	return BlockList ? <BlockList layouts={ layouts } /> : null;
+	return <BlockList layouts={ layouts } />;
 }
 
 InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );
 
 InnerBlocks.Content = ( { BlockContent } ) => {
-	return BlockContent ? <BlockContent /> : null;
+	return <BlockContent />;
 };
 
 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 `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.
+*Optional.* Called when the content can be split with `before` and `after`. There might be blocks present, which should be inserted in between.
 
 ### `onReplace( blocks: Array ): Function`
 

blocks/rich-text/index.js

@@ -38,11 +38,6 @@ 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;
 
 /**
@@ -126,7 +121,6 @@ export class RichText extends Component {
 		};
 
 		this.isEmpty = ! value || ! value.length;
-		this.savedContent = value;
 	}
 
 	/**
@@ -278,7 +272,7 @@ export class RichText extends Component {
 			} );
 
 			// Allows us to ask for this information when we get a report.
-			console.log( 'Received item:\n\n', blob );
+			window.console.log( 'Received item:\n\n', blob );
 
 			if ( isEmptyEditor && this.props.onReplace ) {
 				// Necessary to allow the paste bin to be removed without errors.
@@ -309,8 +303,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.
-		console.log( 'Received HTML:\n\n', HTML );
-		console.log( 'Received plain text:\n\n', this.pastedPlainText );
+		window.console.log( 'Received HTML:\n\n', HTML );
+		window.console.log( 'Received plain text:\n\n', this.pastedPlainText );
 
 		// There is a selection, check if a link is pasted.
 		if ( ! this.editor.selection.isCollapsed() ) {
@@ -325,7 +319,7 @@ export class RichText extends Component {
 				} );
 
 				// Allows us to ask for this information when we get a report.
-				console.log( 'Created link:\n\n', pastedText );
+				window.console.log( 'Created link:\n\n', pastedText );
 
 				event.preventDefault();
 
@@ -493,10 +487,6 @@ 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();
 				}
 			}
@@ -629,8 +619,10 @@ export class RichText extends Component {
 			return memo;
 		}, [] );
 
-		const { format } = this.props;
+		// 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 )
@@ -709,16 +701,15 @@ export class RichText extends Component {
 			!! this.editor &&
 			this.props.tagName === prevProps.tagName &&
 			this.props.value !== prevProps.value &&
-			this.props.value !== this.savedContent
+			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.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.' );
-			}
 		}
 	}
 
@@ -775,15 +766,14 @@ export class RichText extends Component {
 
 	/**
 	 * Calling onSplit means we need to abort the change done by TinyMCE.
-	 * we need to call setContent to restore the initial content before calling onSplit.
+	 * we need to call updateContent 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.setContent( before );
-		this.onChange();
+		this.updateContent();
 		this.props.onSplit( before, after, ...blocks );
 	}
 

core-blocks/heading/index.js

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

core-blocks/list/index.js

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

core-blocks/paragraph/index.js

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

core-blocks/pullquote/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,11 +10,9 @@ import { __ } from '@wordpress/i18n';
 import { withState } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import {
-	createBlock,
 	BlockControls,
 	BlockAlignmentToolbar,
 	RichText,
-	InnerBlocks,
 } from '@wordpress/blocks';
 
 /**
@@ -23,7 +21,21 @@ 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',
@@ -59,7 +71,7 @@ export const settings = {
 	edit: withState( {
 		editable: 'content',
 	} )( ( { attributes, setAttributes, isSelected, className, editable, setState } ) => {
-		const { citation, align } = attributes;
+		const { value, citation, align } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSetActiveEditable = ( newEditable ) => () => setState( { editable: newEditable } );
 
@@ -72,7 +84,20 @@ export const settings = {
 					/>
 				</BlockControls>
 				<blockquote className={ className }>
-					<InnerBlocks />
+					<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' ) }
+					/>
 					{ ( citation || isSelected ) && (
 						<RichText
 							tagName="cite"
@@ -94,11 +119,11 @@ export const settings = {
 	} ),
 
 	save( { attributes } ) {
-		const { citation, align } = attributes;
+		const { value, citation, align } = attributes;
 
 		return (
 			<blockquote className={ `align${ align }` }>
-				<InnerBlocks.Content />
+				<RichText.Content value={ toRichTextValue( value ) } />
 				{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
@@ -107,54 +132,6 @@ 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',
@@ -167,9 +144,7 @@ export const settings = {
 
 			return (
 				<blockquote className={ `align${ align }` }>
-					{ value && value.map( ( paragraph, i ) =>
-						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-					) }
+					<RichText.Content value={ toRichTextValue( value ) } />
 					{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
 				</blockquote>
 			);