Implement image block placeholder

WordPress · May 2, 2017 · e4b84ea · e4b84ea
1 parent 734e188
commit e4b84ea
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -4,6 +4,9 @@
 import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
+// TODO: Revisit when we have a common components solution
+import Dashicon from '../../../editor/components/dashicon';
+import Button from '../../../editor/components/button';
 
 const { attr, children } = query;
 
@@ -78,6 +81,23 @@ registerBlock( 'core/image', {
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { url, alt, caption } = attributes;
 
+		if ( ! url ) {
+			return (
+				<div className="blocks-image is-placeholder">
+					<div className="blocks-image__placeholder-label">
+						<Dashicon icon="format-image" />
+						{ wp.i18n.__( 'Image' ) }
+					</div>
+					<div className="blocks-image__placeholder-instructions">
+						{ wp.i18n.__( 'Drag image here or insert from media library' ) }
+					</div>
+					<Button isLarge>
+						{ wp.i18n.__( 'Insert from Media Library' ) }
+					</Button>
+				</div>
+			);
+		}
+
 		return (
 			<figure className="blocks-image">
 				<img src={ url } alt={ alt } />

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
@@ -89,3 +89,25 @@
 		width: 100%;
 	}
 }
+
+.blocks-image.is-placeholder {
+	margin: -15px;
+	padding: 6em 0;
+	border: 2px solid $light-gray-500;
+	text-align: center;
+}
+
+.blocks-image__placeholder-label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+
+	.dashicon {
+		margin-right: 1ch;
+	}
+}
+
+.blocks-image__placeholder-instructions {
+	margin: 1.8em 0;
+}
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -22,7 +22,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: 33px;
+		left: 35px;
 		right: 0;
 		border: 2px solid transparent;
 		transition: 0.2s border-color;

diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
@@ -24,19 +24,19 @@ msgid "Strikethrough"
 msgstr ""
 
 #: blocks/components/editable/index.js:29
-#: blocks/library/image/index.js:41
+#: blocks/library/image/index.js:44
 #: blocks/library/list/index.js:25
 msgid "Align left"
 msgstr ""
 
 #: blocks/components/editable/index.js:34
-#: blocks/library/image/index.js:47
+#: blocks/library/image/index.js:50
 #: blocks/library/list/index.js:33
 msgid "Align center"
 msgstr ""
 
 #: blocks/components/editable/index.js:39
-#: blocks/library/image/index.js:53
+#: blocks/library/image/index.js:56
 #: blocks/library/list/index.js:41
 msgid "Align right"
 msgstr ""
@@ -46,7 +46,7 @@ msgid "Embed"
 msgstr ""
 
 #: blocks/library/embed/index.js:33
-#: blocks/library/image/index.js:87
+#: blocks/library/image/index.js:107
 msgid "Write caption…"
 msgstr ""
 
@@ -62,16 +62,24 @@ msgstr ""
 msgid "Heading %s"
 msgstr ""
 
-#: blocks/library/image/index.js:25
+#: blocks/library/image/index.js:62
+msgid "No alignment"
+msgstr ""
+
+#: blocks/library/image/index.js:68
+msgid "Wide width"
+msgstr ""
+
+#: blocks/library/image/index.js:89
 msgid "Image"
 msgstr ""
 
-#: blocks/library/image/index.js:59
-msgid "No alignment"
+#: blocks/library/image/index.js:92
+msgid "Drag image here or insert from media library"
 msgstr ""
 
-#: blocks/library/image/index.js:65
-msgid "Wide width"
+#: blocks/library/image/index.js:95
+msgid "Insert from Media Library"
 msgstr ""
 
 #: blocks/library/list/index.js:11