From ad182a582acdba15666ecfedcacd36039088c6a3 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 15 Feb 2018 13:04:52 +0000
Subject: [PATCH] Fixed RichText placeholder whitespace. (#5035)

The RichText CSS uses a rule based on attribute data-is-placeholder-visible. The TinyMCE component was just setting this attribute when componentWillReceiveProps is invoked while it should also set on the first render for the first props received.
---
 .../button/test/__snapshots__/index.js.snap   |  1 +
 .../heading/test/__snapshots__/index.js.snap  |  1 +
 .../list/test/__snapshots__/index.js.snap     |  1 +
 .../test/__snapshots__/index.js.snap          |  1 +
 .../test/__snapshots__/index.js.snap          |  1 +
 .../test/__snapshots__/index.js.snap          |  1 +
 .../quote/test/__snapshots__/index.js.snap    |  1 +
 .../test/__snapshots__/index.js.snap          |  2 ++
 .../verse/test/__snapshots__/index.js.snap    |  1 +
 blocks/rich-text/tinymce.js                   | 26 +++++++++++--------
 10 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/blocks/library/button/test/__snapshots__/index.js.snap b/blocks/library/button/test/__snapshots__/index.js.snap
index 02ccb119e2de08..c90afe81797fe8 100644
--- a/blocks/library/button/test/__snapshots__/index.js.snap
+++ b/blocks/library/button/test/__snapshots__/index.js.snap
@@ -11,6 +11,7 @@ exports[`core/button block edit matches snapshot 1`] = `
       aria-label="Add text…"
       class="wp-block-button__link blocks-rich-text__tinymce"
       contenteditable="true"
+      data-is-placeholder-visible="true"
     />
     <span
       class="blocks-rich-text__tinymce wp-block-button__link"
diff --git a/blocks/library/heading/test/__snapshots__/index.js.snap b/blocks/library/heading/test/__snapshots__/index.js.snap
index 06b39ea29aa60c..b609495cafebb5 100644
--- a/blocks/library/heading/test/__snapshots__/index.js.snap
+++ b/blocks/library/heading/test/__snapshots__/index.js.snap
@@ -8,6 +8,7 @@ exports[`core/heading block edit matches snapshot 1`] = `
     aria-label="Write heading…"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
+    data-is-placeholder-visible="true"
   />
   <h2
     class="blocks-rich-text__tinymce"
diff --git a/blocks/library/list/test/__snapshots__/index.js.snap b/blocks/library/list/test/__snapshots__/index.js.snap
index 559b19ffaee4c2..be2068fdf123f7 100644
--- a/blocks/library/list/test/__snapshots__/index.js.snap
+++ b/blocks/library/list/test/__snapshots__/index.js.snap
@@ -8,6 +8,7 @@ exports[`core/list block edit matches snapshot 1`] = `
     aria-label="Write list…"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
+    data-is-placeholder-visible="true"
   />
   <ul
     class="blocks-rich-text__tinymce"
diff --git a/blocks/library/paragraph/test/__snapshots__/index.js.snap b/blocks/library/paragraph/test/__snapshots__/index.js.snap
index b4a13c25eebd75..70db105dfef59e 100644
--- a/blocks/library/paragraph/test/__snapshots__/index.js.snap
+++ b/blocks/library/paragraph/test/__snapshots__/index.js.snap
@@ -15,6 +15,7 @@ exports[`core/paragraph block edit matches snapshot 1`] = `
           aria-label="Add text or type / to add content"
           class="wp-block-paragraph blocks-rich-text__tinymce"
           contenteditable="true"
+          data-is-placeholder-visible="true"
         />
         <p
           class="blocks-rich-text__tinymce wp-block-paragraph"
diff --git a/blocks/library/preformatted/test/__snapshots__/index.js.snap b/blocks/library/preformatted/test/__snapshots__/index.js.snap
index 22f53d3d7ee002..309ddbdef8a9d5 100644
--- a/blocks/library/preformatted/test/__snapshots__/index.js.snap
+++ b/blocks/library/preformatted/test/__snapshots__/index.js.snap
@@ -8,6 +8,7 @@ exports[`core/preformatted block edit matches snapshot 1`] = `
     aria-label="Write preformatted text…"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
+    data-is-placeholder-visible="true"
   />
   <pre
     class="blocks-rich-text__tinymce"
diff --git a/blocks/library/pullquote/test/__snapshots__/index.js.snap b/blocks/library/pullquote/test/__snapshots__/index.js.snap
index e715d56966e52e..d77c0faf63f18a 100644
--- a/blocks/library/pullquote/test/__snapshots__/index.js.snap
+++ b/blocks/library/pullquote/test/__snapshots__/index.js.snap
@@ -11,6 +11,7 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
       aria-label="Write quote…"
       class="blocks-rich-text__tinymce"
       contenteditable="true"
+      data-is-placeholder-visible="true"
     />
     <div
       class="blocks-rich-text__tinymce"
diff --git a/blocks/library/quote/test/__snapshots__/index.js.snap b/blocks/library/quote/test/__snapshots__/index.js.snap
index c7874f171346af..54b03c5e572298 100644
--- a/blocks/library/quote/test/__snapshots__/index.js.snap
+++ b/blocks/library/quote/test/__snapshots__/index.js.snap
@@ -11,6 +11,7 @@ exports[`core/quote block edit matches snapshot 1`] = `
       aria-label="Write quote…"
       class="blocks-rich-text__tinymce"
       contenteditable="true"
+      data-is-placeholder-visible="true"
     />
     <div
       class="blocks-rich-text__tinymce"
diff --git a/blocks/library/text-columns/test/__snapshots__/index.js.snap b/blocks/library/text-columns/test/__snapshots__/index.js.snap
index 9ad1e10e718be3..0ccf70650bd90e 100644
--- a/blocks/library/text-columns/test/__snapshots__/index.js.snap
+++ b/blocks/library/text-columns/test/__snapshots__/index.js.snap
@@ -14,6 +14,7 @@ exports[`core/text-columns block edit matches snapshot 1`] = `
         aria-label="New Column"
         class="blocks-rich-text__tinymce"
         contenteditable="true"
+        data-is-placeholder-visible="true"
       />
       <p
         class="blocks-rich-text__tinymce"
@@ -32,6 +33,7 @@ exports[`core/text-columns block edit matches snapshot 1`] = `
         aria-label="New Column"
         class="blocks-rich-text__tinymce"
         contenteditable="true"
+        data-is-placeholder-visible="true"
       />
       <p
         class="blocks-rich-text__tinymce"
diff --git a/blocks/library/verse/test/__snapshots__/index.js.snap b/blocks/library/verse/test/__snapshots__/index.js.snap
index 9c7bd2fe8aa04c..9b11da6a1dfa3c 100644
--- a/blocks/library/verse/test/__snapshots__/index.js.snap
+++ b/blocks/library/verse/test/__snapshots__/index.js.snap
@@ -8,6 +8,7 @@ exports[`core/verse block edit matches snapshot 1`] = `
     aria-label="Write…"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
+    data-is-placeholder-visible="true"
   />
   <pre
     class="blocks-rich-text__tinymce"
diff --git a/blocks/rich-text/tinymce.js b/blocks/rich-text/tinymce.js
index 372550bc83c946..049605688c796f 100644
--- a/blocks/rich-text/tinymce.js
+++ b/blocks/rich-text/tinymce.js
@@ -15,6 +15,7 @@ import { Component, Children, createElement } from '@wordpress/element';
  */
 import { diffAriaProps, pickAriaProps } from './aria';
 
+const IS_PLACEHOLDER_VISIBLE_ATTR_NAME = 'data-is-placeholder-visible';
 export default class TinyMCE extends Component {
 	componentDidMount() {
 		this.initialize();
@@ -28,13 +29,15 @@ export default class TinyMCE extends Component {
 		return false;
 	}
 
-	componentWillReceiveProps( nextProps ) {
-		const name = 'data-is-placeholder-visible';
-		const isPlaceholderVisible = String( !! nextProps.isPlaceholderVisible );
-
-		if ( this.editorNode.getAttribute( name ) !== isPlaceholderVisible ) {
-			this.editorNode.setAttribute( name, isPlaceholderVisible );
+	configureIsPlaceholderVisible( isPlaceholderVisible ) {
+		const isPlaceholderVisibleString = String( !! isPlaceholderVisible );
+		if ( this.editorNode.getAttribute( IS_PLACEHOLDER_VISIBLE_ATTR_NAME ) !== isPlaceholderVisibleString ) {
+			this.editorNode.setAttribute( IS_PLACEHOLDER_VISIBLE_ATTR_NAME, isPlaceholderVisibleString );
 		}
+	}
+
+	componentWillReceiveProps( nextProps ) {
+		this.configureIsPlaceholderVisible( nextProps.isPlaceholderVisible );
 
 		if ( ! isEqual( this.props.style, nextProps.style ) ) {
 			this.editorNode.setAttribute( 'style', '' );
@@ -93,7 +96,7 @@ export default class TinyMCE extends Component {
 	}
 
 	render() {
-		const { tagName = 'div', style, defaultValue, className } = this.props;
+		const { tagName = 'div', style, defaultValue, className, isPlaceholderVisible } = this.props;
 		const ariaProps = pickAriaProps( this.props );
 
 		// If a default value is provided, render it into the DOM even before
@@ -105,12 +108,13 @@ export default class TinyMCE extends Component {
 		}
 
 		return createElement( tagName, {
-			ref: ( node ) => this.editorNode = node,
-			contentEditable: true,
-			suppressContentEditableWarning: true,
+			...ariaProps,
 			className: classnames( className, 'blocks-rich-text__tinymce' ),
+			contentEditable: true,
+			[ IS_PLACEHOLDER_VISIBLE_ATTR_NAME ]: isPlaceholderVisible,
+			ref: ( node ) => this.editorNode = node,
 			style,
-			...ariaProps,
+			suppressContentEditableWarning: true,
 		}, children );
 	}
 }