From 744719464442a84fdab8e5c1e6246c801cd6c99b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20Van=C2=A0Dorpe?= <iseulde@automattic.com>
Date: Thu, 30 Aug 2018 11:44:39 +0200
Subject: [PATCH] Add RichText.isEmpty (#9249)

* Add RichText.isEmpty

* Consolidate isEmpty checks

* chore: Use isRichTextValueEmpty directly over passing through class method

* Use this.isEmpty
---
 packages/block-library/src/audio/edit.js      |  2 +-
 packages/block-library/src/audio/index.js     |  2 +-
 .../block-library/src/cover-image/index.js    |  6 ++--
 packages/block-library/src/embed/index.js     |  6 ++--
 packages/block-library/src/image/edit.js      |  4 +--
 packages/block-library/src/image/index.js     |  6 ++--
 packages/block-library/src/list/index.js      |  8 ++---
 packages/block-library/src/pullquote/index.js |  6 ++--
 packages/block-library/src/quote/index.js     |  8 ++---
 packages/block-library/src/video/edit.js      |  2 +-
 packages/block-library/src/video/index.js     |  2 +-
 .../editor/src/components/rich-text/index.js  | 31 +++++++++++++------
 12 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 4faa7be955f6a5..df34522d7d3cb2 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -163,7 +163,7 @@ class AudioEdit extends Component {
 					<Disabled>
 						<audio controls="controls" src={ src } />
 					</Disabled>
-					{ ( ( caption && caption.length ) || !! isSelected ) && (
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index c137ceab43ff5d..d7e2e2e1b8a85c 100644
--- a/packages/block-library/src/audio/index.js
+++ b/packages/block-library/src/audio/index.js
@@ -90,7 +90,7 @@ export const settings = {
 		return (
 			<figure>
 				<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
-				{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+				{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 			</figure>
 		);
 	},
diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
index 8a578ad675db4c..9198a0630e6756 100644
--- a/packages/block-library/src/cover-image/index.js
+++ b/packages/block-library/src/cover-image/index.js
@@ -208,7 +208,7 @@ export const settings = {
 					style={ style }
 					className={ classes }
 				>
-					{ title || isSelected ? (
+					{ ( ! RichText.isEmpty( title ) || isSelected ) && (
 						<RichText
 							tagName="p"
 							className="wp-block-cover-image-text"
@@ -217,7 +217,7 @@ export const settings = {
 							onChange={ ( value ) => setAttributes( { title: value } ) }
 							inlineToolbar
 						/>
-					) : null }
+					) }
 				</div>
 			</Fragment>
 		);
@@ -239,7 +239,7 @@ export const settings = {
 
 		return (
 			<div className={ classes } style={ style }>
-				{ title && title.length > 0 && (
+				{ ! RichText.isEmpty( title ) && (
 					<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
 				) }
 			</div>
diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js
index 36afa9bc8bae79..6b11992352bbc5 100644
--- a/packages/block-library/src/embed/index.js
+++ b/packages/block-library/src/embed/index.js
@@ -242,7 +242,7 @@ export function getEmbedEdit( title, icon ) {
 							<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
 						</Placeholder>
 					) : embedWrapper }
-					{ ( caption && caption.length > 0 ) || isSelected ? (
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
@@ -250,7 +250,7 @@ export function getEmbedEdit( title, icon ) {
 							onChange={ ( value ) => setAttributes( { caption: value } ) }
 							inlineToolbar
 						/>
-					) : null }
+					) }
 				</figure>
 			);
 		}
@@ -321,7 +321,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 			return (
 				<figure className={ embedClassName }>
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+					{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 				</figure>
 			);
 		},
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 2ae93346c923c6..79b04bbe2178d0 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -472,7 +472,7 @@ class ImageEdit extends Component {
 							);
 						} }
 					</ImageSize>
-					{ ( caption && caption.length > 0 ) || isSelected ? (
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
@@ -482,7 +482,7 @@ class ImageEdit extends Component {
 							isSelected={ this.state.captionFocused }
 							inlineToolbar
 						/>
-					) : null }
+					) }
 				</figure>
 			</Fragment>
 		);
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index e3602a45f85fa3..1be0a9c5815186 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -265,7 +265,7 @@ export const settings = {
 				return (
 					<figure className={ classes }>
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+						{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>
 				);
 			},
@@ -288,7 +288,7 @@ export const settings = {
 				return (
 					<figure className={ align ? `align${ align }` : null } >
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+						{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>
 				);
 			},
@@ -311,7 +311,7 @@ export const settings = {
 				return (
 					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
+						{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
 					</figure>
 				);
 			},
diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js
index 086cfd03e93b52..6db9511f6c82d0 100644
--- a/packages/block-library/src/list/index.js
+++ b/packages/block-library/src/list/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, compact, get, initial, last, isEmpty, omit } from 'lodash';
+import { find, compact, get, initial, last, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ export const settings = {
 				blocks: [ 'core/paragraph' ],
 				transform: ( blockAttributes ) => {
 					let items = blockAttributes.map( ( { content } ) => content );
-					const hasItems = ! items.every( isEmpty );
+					const hasItems = ! items.every( RichText.isEmpty );
 
 					// Look for line breaks if converting a single paragraph,
 					// then treat each line as a list item.
@@ -97,10 +97,10 @@ export const settings = {
 				blocks: [ 'core/quote' ],
 				transform: ( { value, citation } ) => {
 					const items = value.map( ( p ) => get( p, [ 'children', 'props', 'children' ] ) );
-					if ( ! isEmpty( citation ) ) {
+					if ( ! RichText.isEmpty( citation ) ) {
 						items.push( citation );
 					}
-					const hasItems = ! items.every( isEmpty );
+					const hasItems = ! items.every( RichText.isEmpty );
 					return createBlock( 'core/list', {
 						values: hasItems ? items.map( ( content, index ) => <li key={ index }>{ content }</li> ) : [],
 					} );
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index 981522029fffda..15324812c8f0f2 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -68,7 +68,7 @@ export const settings = {
 					placeholder={ __( 'Write quote…' ) }
 					wrapperClassName="block-library-pullquote__content"
 				/>
-				{ ( citation || isSelected ) && (
+				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 					<RichText
 						tagName="cite"
 						value={ citation }
@@ -91,7 +91,7 @@ export const settings = {
 		return (
 			<blockquote>
 				<RichText.Content value={ toRichTextValue( value ) } />
-				{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
+				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
 	},
@@ -116,7 +116,7 @@ export const settings = {
 			return (
 				<blockquote className={ `align${ align }` }>
 					<RichText.Content value={ toRichTextValue( value ) } />
-					{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
 				</blockquote>
 			);
 		},
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index 4e2653f066e19c..e883a46122aed6 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -203,7 +203,7 @@ export const settings = {
 						/* translators: the text of the quotation */
 						placeholder={ __( 'Write quote…' ) }
 					/>
-					{ ( ( citation && citation.length > 0 ) || isSelected ) && (
+					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 						<RichText
 							tagName="cite"
 							value={ citation }
@@ -227,7 +227,7 @@ export const settings = {
 		return (
 			<blockquote style={ { textAlign: align ? align : null } }>
 				<RichText.Content value={ toRichTextValue( value ) } />
-				{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
+				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
 	},
@@ -262,7 +262,7 @@ export const settings = {
 						style={ { textAlign: align ? align : null } }
 					>
 						<RichText.Content value={ toRichTextValue( value ) } />
-						{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
+						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 					</blockquote>
 				);
 			},
@@ -290,7 +290,7 @@ export const settings = {
 						style={ { textAlign: align ? align : null } }
 					>
 						<RichText.Content value={ toRichTextValue( value ) } />
-						{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
+						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
 					</blockquote>
 				);
 			},
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 5b862a36642a62..20f1727b48fdfd 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -226,7 +226,7 @@ class VideoEdit extends Component {
 							ref={ this.videoPlayer }
 						/>
 					</Disabled>
-					{ ( ( caption && caption.length ) || !! isSelected ) && (
+					{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 						<RichText
 							tagName="figcaption"
 							placeholder={ __( 'Write caption…' ) }
diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js
index 8168da42ebd423..7a6bb47748201f 100644
--- a/packages/block-library/src/video/index.js
+++ b/packages/block-library/src/video/index.js
@@ -121,7 +121,7 @@ export const settings = {
 						src={ src }
 					/>
 				) }
-				{ caption && caption.length > 0 && (
+				{ ! RichText.isEmpty( caption ) && (
 					<RichText.Content tagName="figcaption" value={ caption } />
 				) }
 			</figure>
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
index d74d5b6e7a765a..4335706b1f1c79 100644
--- a/packages/editor/src/components/rich-text/index.js
+++ b/packages/editor/src/components/rich-text/index.js
@@ -62,6 +62,17 @@ const { Node, getSelection } = window;
  */
 const TINYMCE_ZWSP = '\uFEFF';
 
+/**
+ * Check if the given `RichText` value is empty on not.
+ *
+ * @param {Array} value `RichText` value.
+ *
+ * @return {boolean} True if empty, false if not.
+ */
+const isRichTextValueEmpty = ( value ) => {
+	return ! value || ! value.length;
+};
+
 export function getFormatValue( formatName, parents ) {
 	if ( formatName === 'link' ) {
 		const anchor = find( parents, ( node ) => node.nodeName === 'A' );
@@ -676,17 +687,17 @@ export class RichText extends Component {
 		// value. This also provides an opportunity for the parent component to
 		// determine whether the before/after value has changed using a trivial
 		//  strict equality operation.
-		if ( this.isEmpty( after ) ) {
+		if ( isRichTextValueEmpty( after ) ) {
 			before = this.props.value;
-		} else if ( this.isEmpty( before ) ) {
+		} else if ( isRichTextValueEmpty( before ) ) {
 			after = this.props.value;
 		}
 
 		// If pasting and the split would result in no content other than the
 		// pasted blocks, remove the before and after blocks.
 		if ( context.paste ) {
-			before = this.isEmpty( before ) ? null : before;
-			after = this.isEmpty( after ) ? null : after;
+			before = isRichTextValueEmpty( before ) ? null : before;
+			after = isRichTextValueEmpty( after ) ? null : after;
 		}
 
 		onSplit( before, after, ...blocks );
@@ -797,14 +808,12 @@ export class RichText extends Component {
 	}
 
 	/**
-	 * Returns true if the field is currently empty, or false otherwise.
+	 * Returns true if the component's value prop is currently empty, or false otherwise.
 	 *
-	 * @param {Array} value Content to check.
-	 *
-	 * @return {boolean} Whether field is empty.
+	 * @return {boolean} Whether this.props.value is empty.
 	 */
-	isEmpty( value = this.props.value ) {
-		return ! value || ! value.length;
+	isEmpty() {
+		return isRichTextValueEmpty( this.props.value );
 	}
 
 	isFormatActive( format ) {
@@ -1059,6 +1068,8 @@ RichTextContainer.Content = ( { value, format, tagName: Tag, ...props } ) => {
 	return content;
 };
 
+RichTextContainer.isEmpty = isRichTextValueEmpty;
+
 RichTextContainer.Content.defaultProps = {
 	format: 'children',
 };