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;
+}