Add RichText.isEmpty (#9249)

* Add RichText.isEmpty * Consolidate isEmpty checks * chore: Use isRichTextValueEmpty directly over passing through class method * Use this.isEmpty
WordPress · Aug 30, 2018 · 7447194 · 7447194
1 parent 208c0fa
commit 7447194
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -242,15 +242,15 @@ 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…' ) }
 							value={ caption }
 							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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
 };