Use nested blocks for quotes 7f666e3, 3478730, db4c94d, 01df9e7, 56315f1

WordPress · Jun 21, 2018 · 2dcba4d · 2dcba4d
1 parent 5ea93cd
commit 2dcba4d
Show file tree

Hide file tree

Showing 41 changed files with 776 additions and 421 deletions.
diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
@@ -94,7 +94,7 @@ class AudioEdit extends Component {
 							placeholder={ __( 'Write caption…' ) }
 							value={ caption }
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
-							inlineToolbar
+							inlineToolbar="center"
 						/>
 					) }
 				</figure>

diff --git a/core-blocks/cover-image/index.js b/core-blocks/cover-image/index.js
@@ -221,7 +221,7 @@ export const settings = {
 							placeholder={ __( 'Write title…' ) }
 							value={ title }
 							onChange={ ( value ) => setAttributes( { title: value } ) }
-							inlineToolbar
+							inlineToolbar="center"
 						/>
 					) : null }
 				</div>

diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js
@@ -271,7 +271,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 									placeholder={ __( 'Write caption…' ) }
 									value={ caption }
 									onChange={ ( value ) => setAttributes( { caption: value } ) }
-									inlineToolbar
+									inlineToolbar="center"
 								/>
 							) : null }
 						</figure>

diff --git a/core-blocks/gallery/gallery-image.js b/core-blocks/gallery/gallery-image.js
@@ -136,7 +136,7 @@ class GalleryImage extends Component {
 						isSelected={ this.state.captionSelected }
 						onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
 						unstableOnFocus={ this.onSelectCaption }
-						inlineToolbar
+						inlineToolbar="center"
 					/>
 				) : null }
 			</figure>

diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
@@ -393,7 +393,7 @@ class ImageEdit extends Component {
 							unstableOnFocus={ this.onFocusCaption }
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
 							isSelected={ this.state.captionFocused }
-							inlineToolbar
+							inlineToolbar="center"
 						/>
 					) : null }
 				</figure>

diff --git a/core-blocks/list/index.js b/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
@@ -80,21 +80,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',
 				selector: 'ol,ul',
@@ -134,18 +119,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' ] ) ] ),
-					} );
-				},
-			},
 		],
 	},
 
@@ -253,7 +226,6 @@ export const settings = {
 			const {
 				attributes,
 				insertBlocksAfter,
-				setAttributes,
 				mergeBlocks,
 				onReplace,
 				className,
@@ -301,7 +273,7 @@ export const settings = {
 						onMerge={ mergeBlocks }
 						onSplit={
 							insertBlocksAfter ?
-								( before, after, ...blocks ) => {
+								( unused, after, ...blocks ) => {
 									if ( ! blocks.length ) {
 										blocks.push( createBlock( 'core/paragraph' ) );
 									}
@@ -313,7 +285,6 @@ export const settings = {
 										} ) );
 									}
 
-									setAttributes( { values: before } );
 									insertBlocksAfter( blocks );
 								} :
 								undefined

diff --git a/core-blocks/pullquote/index.js b/core-blocks/pullquote/index.js
@@ -1,17 +1,19 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import {
+	createBlock,
 	BlockControls,
 	BlockAlignmentToolbar,
 	RichText,
+	InnerBlocks,
 } from '@wordpress/editor';
 
 /**
@@ -20,21 +22,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',
@@ -68,7 +56,7 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { value, citation, align } = attributes;
+		const { citation, align } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 
 		return (
@@ -80,18 +68,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="core-blocks-pullquote__content"
-					/>
+					<InnerBlocks />
 					{ ( citation || isSelected ) && (
 						<RichText
 							tagName="cite"
@@ -103,6 +80,7 @@ export const settings = {
 									citation: nextCitation,
 								} )
 							}
+							inlineToolbar="center"
 						/>
 					) }
 				</blockquote>
@@ -111,11 +89,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>
 		);
@@ -124,6 +102,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',
@@ -136,7 +162,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>
 			);