Address feedback.

WordPress · May 10, 2017 · 3469913 · 3469913
1 parent a78d78a
commit 3469913
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
@@ -98,17 +98,3 @@ input.editable-format-toolbar__link-input {
 	padding: 10px;
 	flex-grow: 1;
 }
-
-/* Block Placeholders */
-.editor-visual-editor__block .placeholder {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 1em;
-	min-height: 200px;
-	text-align: center;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	background: $light-gray-100;
-}
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -79,7 +79,11 @@ registerBlock( 'core/image', {
 
 		if ( ! url ) {
 			return (
-				<Placeholder instructions={ wp.i18n.__( 'Drag image here or insert from media library' ) } icon="format-image" label={ wp.i18n.__( 'Image' ) } className="blocks-image">
+				<Placeholder
+					instructions={ wp.i18n.__( 'Drag image here or insert from media library' ) }
+					icon="format-image"
+					label={ wp.i18n.__( 'Image' ) }
+					className="blocks-image">
 					<Button isLarge>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
 					</Button>

diff --git a/components/placeholder/index.js b/components/placeholder/index.js
@@ -10,19 +10,16 @@ import './style.scss';
 import Dashicon from 'components/dashicon';
 
 function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
-	const classes = classnames( 'placeholder', className );
+	const classes = classnames( 'components-placeholder', className );
 
 	return (
 		<div { ...additionalProps } aria-label={ label } className={ classes }>
-			<div className="placeholder__label">
+			<div className="components-placeholder__label">
 				<Dashicon icon={ icon } />
 				{ label }
 			</div>
-			{ instructions
-				? <div className="placeholder__instructions">{ instructions }</div>
-				: ''
-			}
-			<div className="placeholder__fieldset">
+			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
+			<div className="components-placeholder__fieldset">
 				{ children }
 			</div>
 		</div>

diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss
@@ -1,4 +1,17 @@
-.placeholder__label {
+.components-placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 1em;
+	min-height: 200px;
+	text-align: center;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	background: $light-gray-100;
+}
+
+.components-placeholder__label {
 	display: flex;
 	justify-content: center;
 	font-weight: bold;
@@ -9,19 +22,19 @@
 	}
 }
 
-.placeholder__fieldset {
+.components-placeholder__fieldset {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	width: 100%;
 	max-width: 280px;
 }
 
-.placeholder__input {
+.components-placeholder__input {
 	margin-right: 8px;
 	flex: 1 1 auto;
 }
 
-.placeholder__instructions {
+.components-placeholder__instructions {
 	margin-bottom: 1em;
 }