Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add embed block placeholder. #603

Merged
merged 3 commits into from
May 4, 2017
Merged

Add embed block placeholder. #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c49179
Add embed block placeholder.
BE-Webdesign May 2, 2017
8ac0656
Polish the visual styles a bit.
jasmussen May 2, 2017
e61cf86
Update translations
nylen May 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions blocks/library/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -22,6 +26,23 @@ registerBlock( 'core/embed', {
edit( { attributes, setAttributes, focus, setFocus } ) {
const { url, title, caption } = attributes;

if ( ! url ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aduth thoughts on a separate default method for this? I think it would clean up edit implementation a bit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

! url is fine by me, it is a micro performance optimization as well!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean more moving the return into a separate function.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, I misunderstood. We should do that at some point for sure. I don't think we need to right now, but once the placeholder actually has to do something we will probably turn it into its own component.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know that this necessarily needs to be built-in, but I think we could surface better the fact that edit is truly a React component, and can itself branch into separate subcomponents up to the implementer's discretion.

return (
<div className="blocks-embed is-placeholder">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds like a <Placeholder> reusable component. @jasmussen do we expect the design to share these commonalities between image/embed/video/etc placeholders?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regarding this question and the above about splitting out into a separate method... I'm not sure we can know the answer until we implement the placeholders for a couple of other blocks. I vote we merge something like this structure and iterate later.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The interface for embedding a URL and inserting from the media library will probably be different.

Copy link
Contributor

@jasmussen jasmussen May 2, 2017 •
edited by BE-Webdesign
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sounds like a reusable component. @jasmussen do we expect the design to share these commonalities between image/embed/video/etc placeholders?

Yes, the design for a placeholder block is always 90% the same. Always a block, always an icon and a title centered, and always some more options after that. Those more options are likely going to be different, as @BE-Webdesign suggests:

  • Image will have a "open media library" button
  • Embeds will have a URL option
  • We'll probably run into other things as well.

So maybe something like, and please correct my pseudo code:

<Placeholder icon="cloud" title="Embed">
... input field and button ...
</Placeholder>

Copy link
Contributor Author

@BE-Webdesign BE-Webdesign May 2, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could probably make use of the Slot Fill as well, probably overkill. But I think unifying a component would be a future issue.

<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">
Expand Down
33 changes: 33 additions & 0 deletions blocks/library/embed/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
21 changes: 21 additions & 0 deletions editor/assets/stylesheets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,25 @@ body.toplevel_page_gutenberg {
@include break-small() {
padding-top: $header-height;
}

input, textarea {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This style is overriding the Text mode textarea styles, eliminating padding and changing font appearance.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ack, my bad, will fix.

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;
}
}
}
141 changes: 141 additions & 0 deletions languages/gutenberg.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ""