Add embed block placeholder. (#603)

blocks/library/embed/index.js

@@ -1,8 +1,12 @@
 /**
  * Internal dependencies
  */
+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;
 
@@ -22,6 +26,23 @@ registerBlock( 'core/embed', {
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { url, title, caption } = attributes;
 
+		if ( ! url ) {
+			return (
+				<div className="blocks-embed is-placeholder">
+					<div className="blocks-embed__placeholder-label">
+						<Dashicon icon="cloud" />
+						{ wp.i18n.__( 'Embed URL' ) }
+					</div>
+					<div className="blocks-embed__placeholder-fieldset">
+						<input type="url" className="blocks-embed__placeholder-input" placeholder={ wp.i18n.__( 'Enter URL to embed here...' ) } />
+						<Button isLarge>
+							{ wp.i18n.__( 'Embed' ) }
+						</Button>
+					</div>
+				</div>
+			);
+		}
+
 		return (
 			<figure>
 				<div className="iframe-overlay">

blocks/library/embed/style.scss

@@ -0,0 +1,33 @@
+.blocks-embed.is-placeholder {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	padding: 6em 0;
+	text-align: center;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	background: $light-gray-100;
+}
+
+.blocks-embed__placeholder-label {
+	display: flex;
+	justify-content: center;
+	font-weight: bold;
+	margin-bottom: 1em;
+
+	.dashicon {
+		margin-right: 1ch;
+	}
+}
+
+.blocks-embed__placeholder-fieldset {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	max-width: 280px;
+}
+
+.blocks-embed__placeholder-input {
+	margin-right: 8px;
+	flex: 1 1 auto;
+}

editor/assets/stylesheets/main.scss

@@ -48,4 +48,25 @@ body.toplevel_page_gutenberg {
 	@include break-small() {
 		padding-top: $header-height;
 	}
+
+	input, textarea {
+		border-radius: 4px;
+		border-color: $light-gray-500;
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 10px;
+
+		&::-webkit-input-placeholder {
+			color: $dark-gray-100;
+		}
+		&::-moz-placeholder {
+			color: $dark-gray-100;
+		}
+		&:-ms-input-placeholder {
+			color: $dark-gray-100;
+		}
+		&:-moz-placeholder {
+			color: $dark-gray-100;
+		}
+	}
 }

languages/gutenberg.pot

@@ -0,0 +1,141 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=utf-8\n"
+"X-Generator: babel-plugin-wp-i18n\n"
+
+#: blocks/components/editable/format-toolbar.js:12
+msgid "Bold"
+msgstr ""
+
+#: blocks/components/editable/format-toolbar.js:121
+msgid "Link"
+msgstr ""
+
+#: blocks/components/editable/format-toolbar.js:139
+msgid "Paste URL or type"
+msgstr ""
+
+#: blocks/components/editable/format-toolbar.js:17
+msgid "Italic"
+msgstr ""
+
+#: blocks/components/editable/format-toolbar.js:22
+msgid "Strikethrough"
+msgstr ""
+
+#: blocks/components/editable/index.js:29
+#: blocks/library/image/index.js:41
+#: blocks/library/list/index.js:25
+msgid "Align left"
+msgstr ""
+
+#: blocks/components/editable/index.js:34
+#: blocks/library/image/index.js:47
+#: blocks/library/list/index.js:33
+msgid "Align center"
+msgstr ""
+
+#: blocks/components/editable/index.js:39
+#: blocks/library/image/index.js:53
+#: blocks/library/list/index.js:41
+msgid "Align right"
+msgstr ""
+
+#: blocks/library/embed/index.js:34
+msgid "Embed URL"
+msgstr ""
+
+#: blocks/library/embed/index.js:37
+msgid "Enter URL to embed here..."
+msgstr ""
+
+#: blocks/library/embed/index.js:39
+msgid "Embed"
+msgstr ""
+
+#: blocks/library/embed/index.js:54
+#: blocks/library/image/index.js:81
+msgid "Write caption…"
+msgstr ""
+
+#: blocks/library/freeform/index.js:9
+msgid "Freeform"
+msgstr ""
+
+#: blocks/library/heading/index.js:10
+msgid "Heading"
+msgstr ""
+
+#: blocks/library/heading/index.js:24
+msgid "Heading %s"
+msgstr ""
+
+#: blocks/library/image/index.js:25
+msgid "Image"
+msgstr ""
+
+#: blocks/library/image/index.js:59
+msgid "No alignment"
+msgstr ""
+
+#: blocks/library/list/index.js:11
+msgid "List"
+msgstr ""
+
+#: blocks/library/list/index.js:49
+msgid "Justify"
+msgstr ""
+
+#: blocks/library/quote/index.js:11
+msgid "Quote"
+msgstr ""
+
+#: blocks/library/quote/index.js:35
+msgid "Quote style %d"
+msgstr ""
+
+#: blocks/library/text/index.js:10
+msgid "Text"
+msgstr ""
+
+#: editor/components/inserter/index.js:37
+msgid "Insert block"
+msgstr ""
+
+#: editor/components/inserter/menu.js:77
+msgid "Search…"
+msgstr ""
+
+#: editor/header/mode-switcher/index.js:20
+msgid "Visual"
+msgstr ""
+
+#: editor/header/saved-state/index.js:11
+msgid "Saved"
+msgstr ""
+
+#: editor/header/tools/index.js:21
+msgid "Undo"
+msgstr ""
+
+#: editor/header/tools/index.js:27
+msgid "Redo"
+msgstr ""
+
+#: editor/header/tools/index.js:38
+msgid "Post Settings"
+msgstr ""
+
+#: editor/header/tools/index.js:42
+msgid "Publish"
+msgstr ""
+
+#: editor/header/mode-switcher/index.js:24
+msgctxt "Name for the Text editor tab (formerly HTML)"
+msgid "Text"
+msgstr ""
+
+#: editor/header/tools/index.js:34
+msgctxt "imperative verb"
+msgid "Preview"
+msgstr ""