Implement image block placeholder

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;
 
@@ -72,6 +75,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 } />

blocks/library/image/style.scss

@@ -24,3 +24,25 @@
 		display: block;
 	}
 }
+
+.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;
+}

editor/modes/visual-editor/style.scss

@@ -23,7 +23,7 @@
 		position: absolute;
 		top: 0;
 		bottom: 0;
-		left: 33px;
+		left: 35px;
 		right: 0;
 		border: 2px solid transparent;
 		transition: 0.2s border-color;

languages/gutenberg.pot

@@ -20,7 +20,7 @@ msgid "Embed"
 msgstr ""
 
 #: blocks/library/embed/index.js:33
-#: blocks/library/image/index.js:81
+#: blocks/library/image/index.js:101
 msgid "Write caption…"
 msgstr ""
 
@@ -36,32 +36,40 @@ msgstr ""
 msgid "Heading %s"
 msgstr ""
 
-#: blocks/library/image/index.js:25
-msgid "Image"
-msgstr ""
-
-#: blocks/library/image/index.js:41
+#: blocks/library/image/index.js:44
 #: blocks/library/list/index.js:25
 #: blocks/library/text/index.js:27
 msgid "Align left"
 msgstr ""
 
-#: blocks/library/image/index.js:47
+#: blocks/library/image/index.js:50
 #: blocks/library/list/index.js:33
 #: blocks/library/text/index.js:35
 msgid "Align center"
 msgstr ""
 
-#: blocks/library/image/index.js:53
+#: blocks/library/image/index.js:56
 #: blocks/library/list/index.js:41
 #: blocks/library/text/index.js:43
 msgid "Align right"
 msgstr ""
 
-#: blocks/library/image/index.js:59
+#: blocks/library/image/index.js:62
 msgid "No alignment"
 msgstr ""
 
+#: blocks/library/image/index.js:83
+msgid "Image"
+msgstr ""
+
+#: blocks/library/image/index.js:86
+msgid "Drag image here or insert from media library"
+msgstr ""
+
+#: blocks/library/image/index.js:89
+msgid "Insert from Media Library"
+msgstr ""
+
 #: blocks/library/list/index.js:11
 msgid "List"
 msgstr ""