Merge pull request #733 from WordPress/add/placeholder-component

Add Placeholder component
WordPress · May 10, 2017 · 490fdad · 490fdad
2 parents 8353130 + 3469913
commit 490fdad
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 64 deletions.
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
@@ -98,44 +98,3 @@ input.editable-format-toolbar__link-input {
 	padding: 10px;
 	flex-grow: 1;
 }
-
-/* Block Placeholders */
-.editor-visual-editor__block .is-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;
-}
-
-.placeholder__label {
-	display: flex;
-	justify-content: center;
-	font-weight: bold;
-	margin-bottom: 1em;
-
-	.dashicon {
-		margin-right: 1ch;
-	}
-}
-
-.placeholder__fieldset {
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	max-width: 280px;
-}
-
-.placeholder__input {
-	margin-right: 8px;
-	flex: 1 1 auto;
-}
-
-.placeholder__instructions {
-	margin-bottom: 1em;
-}
diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import Dashicon from 'components/dashicon';
 import Button from 'components/button';
+import Placeholder from 'components/placeholder';
 
 /**
  * Internal dependencies
@@ -30,18 +30,12 @@ registerBlock( 'core/embed', {
 
 		if ( ! url ) {
 			return (
-				<div className="blocks-embed is-placeholder">
-					<div className="placeholder__label">
-						<Dashicon icon="cloud" />
-						{ wp.i18n.__( 'Embed URL' ) }
-					</div>
-					<div className="placeholder__fieldset">
-						<input type="url" className="placeholder__input" placeholder={ wp.i18n.__( 'Enter URL to embed here...' ) } />
-						<Button isLarge>
-							{ wp.i18n.__( 'Embed' ) }
-						</Button>
-					</div>
-				</div>
+				<Placeholder icon="cloud" label={ wp.i18n.__( 'Embed URL' ) } className="blocks-embed">
+					<input type="url" className="placeholder__input" placeholder={ wp.i18n.__( 'Enter URL to embed here...' ) } />
+					<Button isLarge>
+						{ wp.i18n.__( 'Embed' ) }
+					</Button>
+				</Placeholder>
 			);
 		}
 

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import Dashicon from 'components/dashicon';
 import Button from 'components/button';
+import Placeholder from 'components/placeholder';
 
 /**
  * Internal dependencies
@@ -79,18 +79,15 @@ registerBlock( 'core/image', {
 
 		if ( ! url ) {
 			return (
-				<div className="blocks-image is-placeholder">
-					<div className="placeholder__label">
-						<Dashicon icon="format-image" />
-						{ wp.i18n.__( 'Image' ) }
-					</div>
-					<div className="placeholder__instructions">
-						{ wp.i18n.__( 'Drag image here or insert from media library' ) }
-					</div>
+				<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>
-				</div>
+				</Placeholder>
 			);
 		}
 

diff --git a/components/placeholder/index.js b/components/placeholder/index.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from 'components/dashicon';
+
+function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
+	const classes = classnames( 'components-placeholder', className );
+
+	return (
+		<div { ...additionalProps } aria-label={ label } className={ classes }>
+			<div className="components-placeholder__label">
+				<Dashicon icon={ icon } />
+				{ label }
+			</div>
+			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
+			<div className="components-placeholder__fieldset">
+				{ children }
+			</div>
+		</div>
+	);
+}
+
+export default Placeholder;
diff --git a/components/placeholder/style.scss b/components/placeholder/style.scss
@@ -0,0 +1,40 @@
+.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;
+	margin-bottom: 1em;
+
+	.dashicon {
+		margin-right: 1ch;
+	}
+}
+
+.components-placeholder__fieldset {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	width: 100%;
+	max-width: 280px;
+}
+
+.components-placeholder__input {
+	margin-right: 8px;
+	flex: 1 1 auto;
+}
+
+.components-placeholder__instructions {
+	margin-bottom: 1em;
+}