diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index dce10e1702a80a..13ab903b179aeb 100644
--- 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 (
+
+
+
+ { wp.i18n.__( 'Image' ) }
+
+
+ { wp.i18n.__( 'Drag image here or insert from media library' ) }
+
+
+
+ );
+ }
+
return (
diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 5f7ae58958416d..5785d0eb763df9 100644
--- 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
index 22565309d6a896..ac81713c02d91b 100644
--- 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
index 909be42091ad17..9cf1223b944c49 100644
--- 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