Test caption length when considering to show editable (#684)

* Remove paragraphs from captioned content * Test caption length when considering to show editable * Treat serialized content as array * Test truthiness of children before assuming property Can be undefined for new block. We may want to look to provide default, but for now simply test truthiness.
WordPress · May 8, 2017 · e4d749a · e4d749a
1 parent a72b370
commit e4d749a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -48,7 +48,7 @@ registerBlock( 'core/embed', {
 				<div className="iframe-overlay">
 					<iframe src={ url } title={ title } />
 				</div>
-				{ caption || !! focus ? (
+				{ ( caption && caption.length > 0 ) || !! focus ? (
 					<Editable
 						tagName="figcaption"
 						placeholder={ wp.i18n.__( 'Write caption…' ) }
@@ -67,7 +67,7 @@ registerBlock( 'core/embed', {
 		const { url, title, caption } = attributes;
 		const iframe = <iframe src={ url } title={ title } />;
 
-		if ( ! caption ) {
+		if ( ! caption || ! caption.length ) {
 			return iframe;
 		}
 

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -94,7 +94,7 @@ registerBlock( 'core/image', {
 		return (
 			<figure className="blocks-image">
 				<img src={ url } alt={ alt } />
-				{ caption || !! focus ? (
+				{ ( caption && caption.length > 0 ) || !! focus ? (
 					<Editable
 						tagName="figcaption"
 						placeholder={ wp.i18n.__( 'Write caption…' ) }
@@ -113,7 +113,7 @@ registerBlock( 'core/image', {
 		const { url, alt, caption, align = 'none' } = attributes;
 		const img = <img src={ url } alt={ alt } className={ `align${ align }` } />;
 
-		if ( ! caption ) {
+		if ( ! caption || ! caption.length ) {
 			return img;
 		}
 

diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
@@ -120,7 +120,7 @@ registerBlock( 'core/quote', {
 					onMerge={ mergeWithPrevious }
 					showAlignments
 				/>
-				{ ( citation || !! focus ) && (
+				{ ( ( citation && citation.length > 0 ) || !! focus ) && (
 					<Editable
 						tagName="footer"
 						value={ citation }
@@ -143,10 +143,12 @@ registerBlock( 'core/quote', {
 
 		return (
 			<blockquote className={ `blocks-quote-style-${ style }` }>
-				{ value && wp.element.Children.map( value, ( paragraph, i ) => (
+				{ value && value.map( ( paragraph, i ) => (
 					<p key={ i }>{ paragraph }</p>
 				) ) }
-				<footer>{ citation }</footer>
+				{ citation && citation.length > 0 && (
+					<footer>{ citation }</footer>
+				) }
 			</blockquote>
 		);
 	}

diff --git a/post-content.js b/post-content.js
@@ -30,15 +30,15 @@ window._wpGutenbergPost = {
 			'<!-- /wp:core/text -->',
 
 			'<!-- wp:core/image align="center" -->',
-			'<figure><img src="https://cldup.com/E4PzNdrFSQ.jpg" class="aligncenter"/><figcaption><p>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</p></figcaption></figure>',
+			'<figure><img src="https://cldup.com/E4PzNdrFSQ.jpg" class="aligncenter"/><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>',
 			'<!-- /wp:core/image -->',
 
 			'<!-- wp:core/text -->',
 			'<p>Try selecting and removing or editing the caption, now you don\'t have to be careful about selecting the image or other text by mistake and ruining the presentation.</p>',
 			'<!-- /wp:core/text -->',
 
 			'<!-- wp:core/embed url="https://www.youtube.com/watch?v=Nl6U7UotA-M" -->',
-			'<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe><figcaption><p>State of the Word 2016</p></figcaption></figure>',
+			'<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe><figcaption>State of the Word 2016</figcaption></figure>',
 			'<!-- /wp:core/embed -->',
 
 			'<!-- wp:core/heading -->',