Merge pull request #3732 from WordPress/try/deleting-empty-blocks-whe…

…n-backspacing-into-an-image Delete empty paragraphs when backspacing
WordPress · Dec 14, 2017 · e421572 · e421572
2 parents 9bb6609 + 18e281a
commit e421572
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 15 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -507,15 +507,29 @@ export default class Editable extends Component {
 	 * @param {KeydownEvent} event The keydow event as triggered by tinyMCE.
 	 */
 	onKeyDown( event ) {
+		const dom = this.editor.dom;
+		const rootNode = this.editor.getBody();
+
 		if (
-			this.props.onMerge && (
-				( event.keyCode === BACKSPACE && this.isStartOfEditor() ) ||
-				( event.keyCode === DELETE && this.isEndOfEditor() )
-			)
+			( event.keyCode === BACKSPACE && this.isStartOfEditor() ) ||
+			( event.keyCode === DELETE && this.isEndOfEditor() )
 		) {
-			const forward = event.keyCode === DELETE;
+			if ( ! this.props.onMerge && ! this.props.onRemove ) {
+				return;
+			}
+
 			this.fireChange();
-			this.props.onMerge( forward );
+
+			const forward = event.keyCode === DELETE;
+
+			if ( this.props.onMerge ) {
+				this.props.onMerge( forward );
+			}
+
+			if ( this.props.onRemove && dom.isEmpty( rootNode ) ) {
+				this.props.onRemove( forward );
+			}
+
 			event.preventDefault();
 			event.stopImmediatePropagation();
 		}
@@ -528,15 +542,12 @@ export default class Editable extends Component {
 					return;
 				}
 
-				const rootNode = this.editor.getBody();
 				const selectedNode = this.editor.selection.getNode();
 
 				if ( selectedNode.parentNode !== rootNode ) {
 					return;
 				}
 
-				const dom = this.editor.dom;
-
 				if ( ! dom.isEmpty( selectedNode ) ) {
 					return;
 				}

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -98,7 +98,7 @@ registerBlockType( 'core/heading', {
 		};
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlocksAfter } ) {
+	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlocksAfter, onReplace } ) {
 		const { align, content, nodeName, placeholder } = attributes;
 
 		return [
@@ -162,6 +162,7 @@ registerBlockType( 'core/heading', {
 						} :
 						undefined
 				}
+				onRemove={ () => onReplace( [] ) }
 				style={ { textAlign: align } }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 			/>,

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 } from 'lodash';
+import { find, compact, get, initial, last, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -106,20 +106,26 @@ registerBlockType( 'core/list', {
 				isMultiBlock: true,
 				blocks: [ 'core/paragraph' ],
 				transform: ( blockAttributes ) => {
+					const items = blockAttributes.map( ( { content } ) => content );
+					const hasItems = ! items.every( isEmpty );
 					return createBlock( 'core/list', {
 						nodeName: 'UL',
-						values: blockAttributes.map( ( { content }, index ) => ( <li key={ index }>{ content }</li> ) ),
+						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
 					} );
 				},
 			},
 			{
 				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: value.map( ( item, index ) => <li key={ index } >{ get( item, 'children.props.children', '' ) } </li> )
-							.concat( citation ? <li key="citation">{ citation }</li> : [] ),
+						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
 					} );
 				},
 			},
@@ -281,6 +287,7 @@ registerBlockType( 'core/list', {
 				insertBlocksAfter,
 				setAttributes,
 				mergeBlocks,
+				onReplace,
 			} = this.props;
 			const { nodeName, values } = attributes;
 
@@ -354,6 +361,7 @@ registerBlockType( 'core/list', {
 							} :
 							undefined
 					}
+					onRemove={ () => onReplace( [] ) }
 				/>,
 			];
 		}

diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -182,6 +182,7 @@ class ParagraphBlock extends Component {
 							}
 							onMerge={ mergeBlocks }
 							onReplace={ onReplace }
+							onRemove={ () => onReplace( [] ) }
 							placeholder={ placeholder || __( 'Add text or type / to insert content' ) }
 							aria-autocomplete="list"
 							aria-expanded={ isExpanded }

diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
@@ -152,7 +152,7 @@ registerBlockType( 'core/quote', {
 		],
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, className } ) {
+	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, onReplace, className } ) {
 		const { align, value, citation, style } = attributes;
 		const focusedEditable = focus ? focus.editable || 'value' : null;
 		const containerClassname = classnames( className, style === 2 ? 'is-large' : '' );
@@ -198,6 +198,12 @@ registerBlockType( 'core/quote', {
 					focus={ focusedEditable === 'value' ? focus : null }
 					onFocus={ ( props ) => setFocus( { ...props, editable: 'value' } ) }
 					onMerge={ mergeBlocks }
+					onRemove={ ( forward ) => {
+						const hasEmptyCitation = ! citation || citation.length === 0;
+						if ( ! forward && hasEmptyCitation ) {
+							onReplace( [] );
+						}
+					} }
 					style={ { textAlign: align } }
 					placeholder={ __( 'Write quote…' ) }
 				/>
@@ -213,6 +219,11 @@ registerBlockType( 'core/quote', {
 						}
 						focus={ focusedEditable === 'citation' ? focus : null }
 						onFocus={ ( props ) => setFocus( { ...props, editable: 'citation' } ) }
+						onRemove={ ( forward ) => {
+							if ( ! forward ) {
+								setFocus( { ...focus, editable: 'value' } );
+							}
+						} }
 					/>
 				) }
 			</blockquote>,