From 6c49179a803072dc8a1eed1f51849260881e1885 Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Tue, 2 May 2017 11:21:36 -0400 Subject: [PATCH 1/3] Add embed block placeholder. Closes #551. This PR adds a placeholder for the embed block. Currently it does not function and merely serves as a step forward on the UI. **Testing Instruction:** Open the inserter menu and add an embed block to the editor. The embed block should feature an input to submit the URL. This functionality does not yet work but serves as a placeholder. **Note:** Someone needs to do the translation build, as Windows breaks it. --- blocks/library/embed/index.js | 19 +++++++++++++++++++ blocks/library/embed/style.scss | 27 +++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 blocks/library/embed/style.scss diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js index 3a02a8672fe80f..5c6db137717ef8 100644 --- a/blocks/library/embed/index.js +++ b/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,21 @@ registerBlock( 'core/embed', { edit( { attributes, setAttributes, focus, setFocus } ) { const { url, title, caption } = attributes; + if ( ! url ) { + return ( +
+
+ + { wp.i18n.__( 'Embed URL' ) } +
+ + +
+ ); + } + return (
diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss new file mode 100644 index 00000000000000..fc9b765f932a87 --- /dev/null +++ b/blocks/library/embed/style.scss @@ -0,0 +1,27 @@ +.blocks-embed.is-placeholder { + align-items: center; + display: flex; + flex-direction: column; + margin: -15px; + padding: 6em 0; + text-align: center; +} + +.blocks-embed__placeholder-label { + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + + .dashicon { + margin-right: 1ch; + } +} + +.blocks-embed__placeholder-input { + border-radius: 4px; + margin: 1.62em 0 1em; + min-width: 280px; + padding: 0.62em; + text-align: center; +} From 8ac06568ac07562bd7da7ce591976ad1e4dea753 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 2 May 2017 18:37:56 +0200 Subject: [PATCH 2/3] Polish the visual styles a bit. - Add a bg color. This will receive further love later, as this block has surfaced a problem with the initial design. - Use the default font stack - Normalize the input fields for gutenberg - Rephrase ever so slightly - Reposition input field and embed button with flex --- blocks/library/embed/index.js | 10 ++++++---- blocks/library/embed/style.scss | 20 +++++++++++++------- editor/assets/stylesheets/main.scss | 21 +++++++++++++++++++++ 3 files changed, 40 insertions(+), 11 deletions(-) diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js index 5c6db137717ef8..9e89059da1d8ec 100644 --- a/blocks/library/embed/index.js +++ b/blocks/library/embed/index.js @@ -33,10 +33,12 @@ registerBlock( 'core/embed', { { wp.i18n.__( 'Embed URL' ) }
- - +
+ + +
); } diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index fc9b765f932a87..b2aa7603c435ee 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -2,26 +2,32 @@ align-items: center; display: flex; flex-direction: column; - margin: -15px; 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; - align-items: center; 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 { - border-radius: 4px; - margin: 1.62em 0 1em; - min-width: 280px; - padding: 0.62em; - text-align: center; + margin-right: 8px; + flex: 1 1 auto; } diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index 1c0dab0aa84367..a06b83d3e6816e 100644 --- a/editor/assets/stylesheets/main.scss +++ b/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; + } + } } From e61cf86ab89fc79b1597684313021c9805308898 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Tue, 2 May 2017 11:53:20 -0500 Subject: [PATCH 3/3] Update translations --- languages/gutenberg.pot | 141 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 languages/gutenberg.pot diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot new file mode 100644 index 00000000000000..0952bbc7728938 --- /dev/null +++ b/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 "" \ No newline at end of file