Fix placeholder positioning

WordPress · Jun 27, 2017 · 212f395 · 212f395
1 parent b662b2e
commit 212f395
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 12 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -434,20 +434,21 @@ export default class Editable extends Component {
 
 	render() {
 		const {
-			tagName,
+			tagName: Tagname = 'div',
 			style,
 			value,
 			focus,
 			className,
 			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
@@ -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
@@ -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
@@ -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
@@ -127,7 +127,7 @@ registerBlockType( 'core/quote', {
 					<Editable
 						tagName="footer"
 						value={ citation }
-						placeholder={ __( '— Add citation…' ) }
+						placeholder={ __( 'Add citation…' ) }
 						onChange={
 							( nextCitation ) => setAttributes( {
 								citation: nextCitation,