Add more placeholders (#1485)

It also fixes a bug where styles would be messed up if there is no placeholder.
WordPress · Jun 28, 2017 · ecea4ef · ecea4ef
1 parent 81ac2ab
commit ecea4ef
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,