diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index dce10e1702a80..13ab903b179ae 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 5f7ae58958416..5785d0eb763df 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 22565309d6a89..ac81713c02d91 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 909be42091ad1..9cf1223b944c4 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