From 212f395f3331957eb613391883107e63801f9401 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Tue, 27 Jun 2017 10:23:06 +0200
Subject: [PATCH] Fix placeholder positioning

---
 blocks/editable/index.js            | 17 +++++++++++++----
 blocks/editable/style.scss          | 14 ++++++++++----
 blocks/editable/tinymce.js          |  4 ++--
 blocks/library/cover-image/index.js |  4 +++-
 blocks/library/quote/index.js       |  2 +-
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index fd2af332a099de..99b38488e63e2c 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -434,7 +434,7 @@ export default class Editable extends Component {
 
 	render() {
 		const {
-			tagName,
+			tagName: Tagname = 'div',
 			style,
 			value,
 			focus,
@@ -442,12 +442,13 @@ export default class Editable extends Component {
 			inlineToolbar = false,
 			formattingControls,
 			placeholder,
+			inline,
 		} = this.props;
 
 		// Generating a key that includes `tagName` ensures that if the tag
 		// 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 key = [ 'editor', Tagname ].join();
 		const classes = classnames( className, 'blocks-editable' );
 
 		const formatToolbar = (
@@ -472,15 +473,23 @@ export default class Editable extends Component {
 					</div>
 				}
 				<TinyMCE
-					tagName={ tagName }
+					tagName={ Tagname }
 					getSettings={ this.getSettings }
 					onSetup={ this.onSetup }
 					style={ style }
 					defaultValue={ value }
 					isEmpty={ this.state.empty }
-					placeholder={ placeholder }
+					label={ placeholder }
 					key={ key }
 				/>
+				{ this.state.empty &&
+					<Tagname
+						className="blocks-editable__tinymce"
+						style={ style }
+					>
+						{ inline ? placeholder : <p>{ placeholder }</p> }
+					</Tagname>
+				}
 			</div>
 		);
 	}
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 9c143868dcdbe3..100e3b8f7f4af5 100644
--- a/blocks/editable/style.scss
+++ b/blocks/editable/style.scss
@@ -4,6 +4,7 @@
 
 .blocks-editable__tinymce {
 	margin: 0;
+	position: relative;
 
 	> p:empty {
 		min-height: $editor-font-size * $editor-line-height;
@@ -39,14 +40,19 @@
 	}
 
 	&[data-is-empty="true"] {
-		position: relative;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		margin-top: 0;
+
+		& > p {
+			margin-top: 0;
+		}
 	}
 
-	&[data-is-empty="true"]:before {
-		content: attr( data-placeholder );
+	& + .blocks-editable__tinymce {
 		opacity: 0.5;
 		pointer-events: none;
-		position: absolute;
 	}
 }
 
diff --git a/blocks/editable/tinymce.js b/blocks/editable/tinymce.js
index 61ba1ebbbf068c..75daa27f7ac932 100644
--- a/blocks/editable/tinymce.js
+++ b/blocks/editable/tinymce.js
@@ -76,7 +76,7 @@ export default class TinyMCE extends Component {
 	}
 
 	render() {
-		const { tagName = 'div', style, defaultValue, placeholder } = this.props;
+		const { tagName, style, defaultValue, label } = this.props;
 
 		// If a default value is provided, render it into the DOM even before
 		// TinyMCE finishes initializing. This avoids a short delay by allowing
@@ -92,7 +92,7 @@ export default class TinyMCE extends Component {
 			suppressContentEditableWarning: true,
 			className: 'blocks-editable__tinymce',
 			style,
-			'data-placeholder': placeholder,
+			'aria-label': label,
 		}, children );
 	}
 }
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index 5f28992bcc812a..36f0dc622ee2cc 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -88,7 +88,9 @@ registerBlockType( 'core/cover-image', {
 							formattingControls={ [] }
 							focus={ focus }
 							onFocus={ setFocus }
-							onChange={ ( value ) => setAttributes( { title: value } ) } />
+							onChange={ ( value ) => setAttributes( { title: value } ) }
+							inline
+						/>
 					) : null }
 				</section>
 			</section>,
diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
index 58bfa69cd971a6..df65154d48424a 100644
--- a/blocks/library/quote/index.js
+++ b/blocks/library/quote/index.js
@@ -127,7 +127,7 @@ registerBlockType( 'core/quote', {
 					<Editable
 						tagName="footer"
 						value={ citation }
-						placeholder={ __( '— Add citation…' ) }
+						placeholder={ __( 'Add citation…' ) }
 						onChange={
 							( nextCitation ) => setAttributes( {
 								citation: nextCitation,