TinyMCE per block: Neutral image/embed block state hides the empty ca…

…ption (#217)
WordPress · Mar 9, 2017 · 081e009 · 081e009
1 parent c16df7a
commit 081e009
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/tinymce-per-block/src/blocks/embed-block/form.js b/tinymce-per-block/src/blocks/embed-block/form.js
@@ -53,7 +53,10 @@ export default class EmbedBlockForm extends Component {
 					</div>
 				}
 
-				<div onClick={ select }>
+				<div onClick={ () => {
+					select();
+					! focusConfig && focus();
+				} }>
 					{ ! block.url &&
 						<div className="embed-block__form">
 							<div className="embed-block__title">
@@ -75,23 +78,25 @@ export default class EmbedBlockForm extends Component {
 					{ block.url &&
 						<div className="embed-block__content">
 							<div dangerouslySetInnerHTML={ { __html: html } } />
-							<div className="embed-block__caption">
-								<EnhancedInputComponent
-									ref={ this.bindCaption }
-									moveCursorUp={ moveCursorUp }
-									removePrevious={ removePrevious }
-									moveCursorDown={ moveCursorDown }
-									splitValue={ splitValue }
-									value={ block.caption }
-									onChange={ ( value ) => {
-										change( { caption: value } );
-										unselect();
-									} }
-									placeholder="Write caption"
-									focusConfig={ focusConfig }
-									onFocusChange={ focus }
-								/>
-							</div>
+							{ ( focusConfig || block.caption ) &&
+								<div className="embed-block__caption">
+									<EnhancedInputComponent
+										ref={ this.bindCaption }
+										moveCursorUp={ moveCursorUp }
+										removePrevious={ removePrevious }
+										moveCursorDown={ moveCursorDown }
+										splitValue={ splitValue }
+										value={ block.caption }
+										onChange={ ( value ) => {
+											change( { caption: value } );
+											unselect();
+										} }
+										placeholder="Write caption"
+										focusConfig={ focusConfig }
+										onFocusChange={ focus }
+									/>
+								</div>
+							}
 						</div>
 					}
 				</div>

diff --git a/tinymce-per-block/src/blocks/image-block/form.js b/tinymce-per-block/src/blocks/image-block/form.js
@@ -45,30 +45,29 @@ export default class ImageBlockForm extends Component {
 						</div>
 					</div>
 				}
-				<div onClick={ select }>
-					<img
-						src={ block.src }
-						className="image-block__display"
-						onClick={ () => {
-							! focusConfig && focus();
-						} }
-					/>
-					<div className="image-block__caption">
-						<EnhancedInputComponent
-							moveCursorUp={ moveCursorUp }
-							removePrevious={ removePrevious }
-							moveCursorDown={ moveCursorDown }
-							splitValue={ splitValue }
-							value={ block.caption }
-							onChange={ ( value ) => {
-								change( { caption: value } );
-								unselect();
-							} }
-							placeholder="Write caption"
-							focusConfig={ focusConfig }
-							onFocusChange={ focus }
-						/>
-					</div>
+				<div onClick={ () => {
+					select();
+					! focusConfig && focus();
+				} }>
+					<img src={ block.src } className="image-block__display" />
+					{ ( focusConfig || block.caption ) &&
+						<div className="image-block__caption">
+							<EnhancedInputComponent
+								moveCursorUp={ moveCursorUp }
+								removePrevious={ removePrevious }
+								moveCursorDown={ moveCursorDown }
+								splitValue={ splitValue }
+								value={ block.caption }
+								onChange={ ( value ) => {
+									change( { caption: value } );
+									unselect();
+								} }
+								placeholder="Write caption"
+								focusConfig={ focusConfig }
+								onFocusChange={ focus }
+							/>
+						</div>
+					}
 				</div>
 			</div>
 		);