From ecea4ef734a923a51305f2f34e2d679fc1629ce3 Mon Sep 17 00:00:00 2001
From: Ella <ella@iseulde.com>
Date: Wed, 28 Jun 2017 16:30:46 +0200
Subject: [PATCH] Add more placeholders (#1485)

It also fixes a bug where styles would be messed up if there is no placeholder.
---
 blocks/editable/index.js             | 5 +++--
 blocks/editable/style.scss           | 2 +-
 blocks/editable/tinymce.js           | 7 ++++---
 blocks/library/code/index.js         | 1 +
 blocks/library/cover-image/index.js  | 2 +-
 blocks/library/heading/index.js      | 1 +
 blocks/library/preformatted/index.js | 2 ++
 blocks/library/pullquote/index.js    | 2 +-
 blocks/library/quote/index.js        | 3 ++-
 9 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index 99b38488e63e2c..4b66cfe7db52c4 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -449,6 +449,7 @@ export default class Editable extends Component {
 		// changes, we unmount and destroy the previous TinyMCE element, then
 		// mount and initialize a new child element in its place.
 		const key = [ 'editor', Tagname ].join();
+		const isPlaceholderVisible = placeholder && this.state.empty;
 		const classes = classnames( className, 'blocks-editable' );
 
 		const formatToolbar = (
@@ -478,11 +479,11 @@ export default class Editable extends Component {
 					onSetup={ this.onSetup }
 					style={ style }
 					defaultValue={ value }
-					isEmpty={ this.state.empty }
+					isPlaceholderVisible={ isPlaceholderVisible }
 					label={ placeholder }
 					key={ key }
 				/>
-				{ this.state.empty &&
+				{ isPlaceholderVisible &&
 					<Tagname
 						className="blocks-editable__tinymce"
 						style={ style }
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 3dd48643aa8abb..78fdb1c6f74062 100644
--- a/blocks/editable/style.scss
+++ b/blocks/editable/style.scss
@@ -39,7 +39,7 @@
 		background: $light-gray-400;
 	}
 
-	&[data-is-empty="true"] {
+	&[data-is-placeholder-visible="true"] {
 		position: absolute;
 		top: 0;
 		width: 100%;
diff --git a/blocks/editable/tinymce.js b/blocks/editable/tinymce.js
index 3d9d8b6b194c9b..ff80240beaa5f3 100644
--- a/blocks/editable/tinymce.js
+++ b/blocks/editable/tinymce.js
@@ -23,10 +23,11 @@ export default class TinyMCE extends Component {
 	}
 
 	componentWillReceiveProps( nextProps ) {
-		const isEmpty = String( nextProps.isEmpty );
+		const name = 'data-is-placeholder-visible';
+		const isPlaceholderVisible = String( !! nextProps.isPlaceholderVisible );
 
-		if ( this.editorNode.getAttribute( 'data-is-empty' ) !== isEmpty ) {
-			this.editorNode.setAttribute( 'data-is-empty', isEmpty );
+		if ( this.editorNode.getAttribute( name ) !== isPlaceholderVisible ) {
+			this.editorNode.setAttribute( name, isPlaceholderVisible );
 		}
 
 		if ( ! isEqual( this.props.style, nextProps.style ) ) {
diff --git a/blocks/library/code/index.js b/blocks/library/code/index.js
index a3e03abd21abcf..08908229f39a3a 100644
--- a/blocks/library/code/index.js
+++ b/blocks/library/code/index.js
@@ -32,6 +32,7 @@ registerBlockType( 'core/code', {
 			<TextareaAutosize
 				value={ attributes.content }
 				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
+				placeholder={ __( 'Write code…' ) }
 			/>
 		);
 	},
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index a45a70a377b89d..4d564be4a401aa 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -114,7 +114,7 @@ registerBlockType( 'core/cover-image', {
 					{ title || !! focus ? (
 						<Editable
 							tagName="h2"
-							placeholder={ __( 'Write title' ) }
+							placeholder={ __( 'Write title…' ) }
 							value={ title }
 							focus={ focus }
 							onFocus={ setFocus }
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index 40870e58d437fc..8164ce74c95541 100644
--- a/blocks/library/heading/index.js
+++ b/blocks/library/heading/index.js
@@ -145,6 +145,7 @@ registerBlockType( 'core/heading', {
 					} ) );
 				} }
 				style={ { textAlign: align } }
+				placeholder={ __( 'Write heading…' ) }
 			/>,
 		];
 	},
diff --git a/blocks/library/preformatted/index.js b/blocks/library/preformatted/index.js
index 6a90a051788a5f..2f2bdd882e81e6 100644
--- a/blocks/library/preformatted/index.js
+++ b/blocks/library/preformatted/index.js
@@ -56,6 +56,8 @@ registerBlockType( 'core/preformatted', {
 				} }
 				focus={ focus }
 				onFocus={ setFocus }
+				placeholder={ __( 'Write preformatted text…' ) }
+				inline
 			/>
 		);
 	},
diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js
index ece11c67959d6c..10e0a617ba82d0 100644
--- a/blocks/library/pullquote/index.js
+++ b/blocks/library/pullquote/index.js
@@ -56,7 +56,7 @@ registerBlockType( 'core/pullquote', {
 							value: nextValue,
 						} )
 					}
-					placeholder={ __( 'Write Quote…' ) }
+					placeholder={ __( 'Write quote…' ) }
 					focus={ focus && focus.editable === 'value' ? focus : null }
 					onFocus={ ( props ) => setFocus( { ...props, editable: 'value' } ) }
 					className="blocks-pullquote__content"
diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
index 9cf3496a8a68b9..7d43dd6314eccd 100644
--- a/blocks/library/quote/index.js
+++ b/blocks/library/quote/index.js
@@ -152,12 +152,13 @@ registerBlockType( 'core/quote', {
 					onFocus={ ( props ) => setFocus( { ...props, editable: 'value' } ) }
 					onMerge={ mergeBlocks }
 					style={ { textAlign: align } }
+					placeholder={ __( 'Write quote…' ) }
 				/>
 				{ ( ( citation && citation.length > 0 ) || !! focus ) && (
 					<Editable
 						tagName="footer"
 						value={ citation }
-						placeholder={ __( 'Add citation…' ) }
+						placeholder={ __( 'Write citation…' ) }
 						onChange={
 							( nextCitation ) => setAttributes( {
 								citation: nextCitation,