From 84ce39e8da1a076d8554a34443ba113955e32ca4 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 9 May 2017 16:44:44 +0200
Subject: [PATCH 1/4] Add Placeholder component

This PR seeks to address feedback here: https://github.com/WordPress/gutenberg/pull/710#discussion_r115389735 by creating a reusable component for block placeholders.

It's very basic right now, and holds options for icon, description, label, and any advanced items inside.
---
 blocks/editable/style.scss               | 29 +--------------------
 blocks/library/embed/index.js            | 20 ++++++---------
 blocks/library/image/index.js            | 17 ++++---------
 editor/components/placeholder/index.js   | 32 ++++++++++++++++++++++++
 editor/components/placeholder/style.scss | 27 ++++++++++++++++++++
 5 files changed, 72 insertions(+), 53 deletions(-)
 create mode 100644 editor/components/placeholder/index.js
 create mode 100644 editor/components/placeholder/style.scss

diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 6d1f1277ecb1d..2422d4341551d 100644
--- a/blocks/editable/style.scss
+++ b/blocks/editable/style.scss
@@ -100,7 +100,7 @@ input.editable-format-toolbar__link-input {
 }
 
 /* Block Placeholders */
-.editor-visual-editor__block .is-placeholder {
+.editor-visual-editor__block .placeholder {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -112,30 +112,3 @@ input.editable-format-toolbar__link-input {
 	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
index 54d3d1122d779..40ad09b808239 100644
--- 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
index 0cf5500d3c477..9430ec701a310 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import Dashicon from 'components/dashicon';
 import Button from 'components/button';
+import Placeholder from 'components/placeholder';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query } from '../../api';
-import Editable from '../../editable';
+import { registerBlock, query } from 'api';
+import Editable from 'components/editable';
 
 const { attr, children } = query;
 
@@ -79,18 +79,11 @@ 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/editor/components/placeholder/index.js b/editor/components/placeholder/index.js
new file mode 100644
index 0000000000000..4fc4c8557f0f0
--- /dev/null
+++ b/editor/components/placeholder/index.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from '../dashicon';
+
+function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
+	const classes = classnames( 'placeholder', className );
+
+	return (
+		<div { ...additionalProps } aria-label={ label } className={ classes }>
+			<div className="placeholder__label">
+				<Dashicon icon={ icon } />
+				{ label }
+			</div>
+			{ instructions
+				? <div className="placeholder__instructions">{ instructions }</div>
+				: ''
+			}
+			<div className="placeholder__fieldset">
+				{ children }
+			</div>
+		</div>
+	);
+}
+
+export default Placeholder;
diff --git a/editor/components/placeholder/style.scss b/editor/components/placeholder/style.scss
new file mode 100644
index 0000000000000..bd74e8d6860d4
--- /dev/null
+++ b/editor/components/placeholder/style.scss
@@ -0,0 +1,27 @@
+.placeholder__label {
+	display: flex;
+	justify-content: center;
+	font-weight: bold;
+	margin-bottom: 1em;
+
+	.dashicon {
+		margin-right: 1ch;
+	}
+}
+
+.placeholder__fieldset {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	width: 100%;
+	max-width: 280px;
+}
+
+.placeholder__input {
+	margin-right: 8px;
+	flex: 1 1 auto;
+}
+
+.placeholder__instructions {
+	margin-bottom: 1em;
+}

From 6afb502421f6da17512f2ba2672996e31f52624a Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 10 May 2017 12:09:21 +0200
Subject: [PATCH 2/4] Finish rebase.

---
 blocks/library/embed/index.js          | 2 +-
 blocks/library/image/index.js          | 6 +++---
 editor/components/placeholder/index.js | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
index 40ad09b808239..71e04082bc67d 100644
--- a/blocks/library/embed/index.js
+++ b/blocks/library/embed/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import Button from 'components/button';
-import Placeholder from 'components/placeholder';
+import Placeholder from 'editor/components/placeholder';
 
 /**
  * Internal dependencies
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 9430ec701a310..8a8f85e4b480e 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -2,14 +2,14 @@
  * WordPress dependencies
  */
 import Button from 'components/button';
-import Placeholder from 'components/placeholder';
+import Placeholder from 'editor/components/placeholder';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { registerBlock, query } from 'api';
-import Editable from 'components/editable';
+import { registerBlock, query } from '../../api';
+import Editable from '../../editable';
 
 const { attr, children } = query;
 
diff --git a/editor/components/placeholder/index.js b/editor/components/placeholder/index.js
index 4fc4c8557f0f0..40f59965fab87 100644
--- a/editor/components/placeholder/index.js
+++ b/editor/components/placeholder/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import './style.scss';
-import Dashicon from '../dashicon';
+import Dashicon from 'components/dashicon';
 
 function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
 	const classes = classnames( 'placeholder', className );

From a78d78ac7e82589c44ab083882cd96d6f15e382b Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 10 May 2017 12:28:31 +0200
Subject: [PATCH 3/4] Move placeholder component.

---
 blocks/library/embed/index.js                            | 2 +-
 blocks/library/image/index.js                            | 2 +-
 {editor/components => components}/placeholder/index.js   | 0
 {editor/components => components}/placeholder/style.scss | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename {editor/components => components}/placeholder/index.js (100%)
 rename {editor/components => components}/placeholder/style.scss (100%)

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
index 71e04082bc67d..40ad09b808239 100644
--- a/blocks/library/embed/index.js
+++ b/blocks/library/embed/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import Button from 'components/button';
-import Placeholder from 'editor/components/placeholder';
+import Placeholder from 'components/placeholder';
 
 /**
  * Internal dependencies
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 8a8f85e4b480e..da49dbc1ccf4a 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import Button from 'components/button';
-import Placeholder from 'editor/components/placeholder';
+import Placeholder from 'components/placeholder';
 
 /**
  * Internal dependencies
diff --git a/editor/components/placeholder/index.js b/components/placeholder/index.js
similarity index 100%
rename from editor/components/placeholder/index.js
rename to components/placeholder/index.js
diff --git a/editor/components/placeholder/style.scss b/components/placeholder/style.scss
similarity index 100%
rename from editor/components/placeholder/style.scss
rename to components/placeholder/style.scss

From 3469913ec9c03d07ad21818864ab7e24c3393a25 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 10 May 2017 12:51:51 +0200
Subject: [PATCH 4/4] Address feedback.

---
 blocks/editable/style.scss        | 14 --------------
 blocks/library/image/index.js     |  6 +++++-
 components/placeholder/index.js   | 11 ++++-------
 components/placeholder/style.scss | 21 +++++++++++++++++----
 4 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
index 2422d4341551d..706d697f6c3e7 100644
--- 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
index da49dbc1ccf4a..0cace66468552 100644
--- 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
index 40f59965fab87..79373be7c877c 100644
--- 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
index bd74e8d6860d4..d28fea95f215c 100644
--- 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,7 +22,7 @@
 	}
 }
 
-.placeholder__fieldset {
+.components-placeholder__fieldset {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -17,11 +30,11 @@
 	max-width: 280px;
 }
 
-.placeholder__input {
+.components-placeholder__input {
 	margin-right: 8px;
 	flex: 1 1 auto;
 }
 
-.placeholder__instructions {
+.components-placeholder__instructions {
 	margin-bottom: 1em;
 }