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.

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"

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"

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"

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"

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"

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"

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"

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"

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"

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 );
 	}
 }