Skip to content

Commit

Permalink
Add embed block placeholder.
Browse files Browse the repository at this point in the history
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 committed May 4, 2017
1 parent dd842a1 commit 6c49179
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 0 deletions.
19 changes: 19 additions & 0 deletions blocks/library/embed/index.js
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 ) {
return (
<div className="blocks-embed is-placeholder">
<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
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;
}

0 comments on commit 6c49179

Please sign in to comment.