From f9f4ba7fd7ebd0d5d8fca8db264b94cad7056847 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Wed, 10 May 2017 16:06:26 -0400
Subject: [PATCH] Apply placeholder on editable wrapper

---
 blocks/editable/index.js   |  7 ++++---
 blocks/editable/style.scss | 28 ++++++++++++----------------
 blocks/editable/tinymce.js | 13 ++-----------
 3 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/blocks/editable/index.js b/blocks/editable/index.js
index 443df10c21a99..8dbccb9af22dc 100644
--- a/blocks/editable/index.js
+++ b/blocks/editable/index.js
@@ -373,6 +373,7 @@ export default class Editable extends wp.element.Component {
 			formattingControls,
 			placeholder
 		} = this.props;
+		const { empty } = this.state;
 
 		// Generating a key that includes `tagName` ensures that if the tag
 		// changes, we unmount (+ destroy) the previous TinyMCE element, then
@@ -390,7 +391,9 @@ export default class Editable extends wp.element.Component {
 		);
 
 		return (
-			<div className={ classes }>
+			<div
+				className={ classes }
+				data-placeholder={ empty ? placeholder : null }>
 				{ focus &&
 					<Fill name="Formatting.Toolbar">
 						{ showAlignments &&
@@ -419,8 +422,6 @@ export default class Editable extends wp.element.Component {
 					settings={ {
 						forced_root_block: inline ? false : 'p'
 					} }
-					isEmpty={ this.state.empty }
-					placeholder={ placeholder }
 					key={ key } />
 			</div>
 		);
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 42c2583ff5087..d156fe0538894 100644
--- a/blocks/editable/style.scss
+++ b/blocks/editable/style.scss
@@ -1,5 +1,17 @@
 .blocks-editable {
 	position: relative;
+
+	&[data-placeholder]:before {
+		content: attr( data-placeholder );
+		position: absolute;
+		top: 50%;
+		right: 0;
+		left: 0;
+		transform: translateY( -50% );
+		text-align: center;
+		opacity: 0.5;
+		pointer-events: none;
+	}
 }
 
 .blocks-editable__tinymce {
@@ -39,17 +51,6 @@
 	code[data-mce-selected] {
 		background: $light-gray-400;
 	}
-
-	&[data-is-empty="true"] {
-		position: relative;
-	}
-
-	&[data-is-empty="true"]:before {
-		content: attr( data-placeholder );
-		opacity: 0.5;
-		pointer-events: none;
-		position: absolute;
-	}
 }
 
 .block-editable__inline-toolbar {
@@ -67,11 +68,6 @@ figcaption.blocks-editable__tinymce {
 	color: $dark-gray-100;
 	text-align: center;
 	font-size: $default-font-size;
-
-	&:before {
-		left: 50%;
-		transform: translateX( -50% );
-	}
 }
 
 
diff --git a/blocks/editable/tinymce.js b/blocks/editable/tinymce.js
index 531f215fb6c46..d718f7a5abbc1 100644
--- a/blocks/editable/tinymce.js
+++ b/blocks/editable/tinymce.js
@@ -11,14 +11,6 @@ export default class TinyMCE extends wp.element.Component {
 		return false;
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		const isEmpty = String( nextProps.isEmpty );
-
-		if ( this.editorNode.getAttribute( 'data-is-empty' ) !== isEmpty ) {
-			this.editorNode.setAttribute( 'data-is-empty', isEmpty );
-		}
-	}
-
 	componentWillUnmount() {
 		if ( ! this.editor ) {
 			return;
@@ -55,7 +47,7 @@ export default class TinyMCE extends wp.element.Component {
 	}
 
 	render() {
-		const { tagName = 'div', style, defaultValue, placeholder } = this.props;
+		const { tagName = 'div', style, defaultValue } = 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
@@ -70,8 +62,7 @@ export default class TinyMCE extends wp.element.Component {
 			contentEditable: true,
 			suppressContentEditableWarning: true,
 			className: 'blocks-editable__tinymce',
-			style,
-			'data-placeholder': placeholder
+			style
 		}, children );
 	}
 }