Skip to content

Add embed block placeholder. #603

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

Merged
nylen merged 3 commits into from
May 4, 2017
Merged

Add embed block placeholder. #603

Show file tree
Hide file tree
Changes from 1 commit
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
Next Next commit
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.
  • Loading branch information
@BE-Webdesign
BE-Webdesign committed May 4, 2017
commit 6c49179a803072dc8a1eed1f51849260881e1885
19 changes: 19 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,21 @@ registerBlock( 'core/embed', {
edit( { attributes, setAttributes, focus, setFocus } ) {
const { url, title, caption } = attributes;

if ( ! url ) {
Copy link
Member

@mtias mtias May 2, 2017

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

@BE-Webdesign BE-Webdesign May 2, 2017

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

@mtias mtias May 2, 2017

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

@BE-Webdesign BE-Webdesign May 2, 2017

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

@aduth aduth May 2, 2017

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

@mtias mtias May 2, 2017

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

@nylen nylen May 2, 2017

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

@BE-Webdesign BE-Webdesign May 2, 2017

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>
<input type="url" className="blocks-embed__placeholder-input" placeholder={ wp.i18n.__( 'Enter URL to embed here.' ) } />
<Button isLarge>
{ wp.i18n.__( 'Embed the link above.' ) }
</Button>
</div>
);
}

return (
<figure>
<div className="iframe-overlay">
Expand Down
27 changes: 27 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,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;
}