Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
Browse files Browse the repository at this point in the history
…rnmobile/split-para-on-enter
  • Loading branch information
daniloercoli committed Oct 15, 2018
2 parents 5383932 + 24c9674 commit aa791fe
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 15 deletions.
2 changes: 1 addition & 1 deletion docs/reference/scripts.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ The editor includes a number of packages to enable various pieces of functionali
| [Element](https://wordpress.org/gutenberg/handbook/packages/packages-element/) | wp-element |Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/) |
| [Escape Html](https://wordpress.org/gutenberg/handbook/packages/packages-escape-html/) | wp-escape-html | Escape HTML utils |
| [Hooks](https://wordpress.org/gutenberg/handbook/packages/packages-hooks/) | wp-hooks | A lightweight and efficient EventManager for JavaScript |
| [Html Entities](https://wordpress.org/gutenberg/handbook/packages/packages-html-entities/) | wo-html-entities | HTML entity utilities for WordPress |
| [Html Entities](https://wordpress.org/gutenberg/handbook/packages/packages-html-entities/) | wp-html-entities | HTML entity utilities for WordPress |
| [I18N](https://wordpress.org/gutenberg/handbook/packages/packages-i18n/) | wp-i18n | Internationalization utilities for client-side localization |
| [Is Shallow Equal](https://wordpress.org/gutenberg/handbook/packages/packages-is-shallow-equal/) | wp-is-shallow-equal | A function for performing a shallow comparison between two objects or arrays |
| [Keycodes](https://wordpress.org/gutenberg/handbook/packages/packages-keycodes/) | wp-keycodes | Keycodes utilities for WordPress, used to check the key pressed in events like `onKeyDown` |
Expand Down
26 changes: 14 additions & 12 deletions packages/block-library/src/embed/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function getEmbedEdit( title, icon ) {
}

if ( ( hasPreview && ! hadPreview ) || switchedPreview ) {
if ( this.props.previewIsFallback ) {
if ( this.props.cannotEmbed ) {
this.setState( { editingURL: true } );
return;
}
Expand Down Expand Up @@ -257,14 +257,12 @@ export function getEmbedEdit( title, icon ) {
render() {
const { url, editingURL } = this.state;
const { caption, type, allowResponsive } = this.props.attributes;
const { fetching, setAttributes, isSelected, className, preview, previewIsFallback } = this.props;
// We have a URL, but couldn't get a preview, or the preview was the oEmbed fallback.
const cannotEmbed = url && ( ! preview || previewIsFallback );
const { fetching, setAttributes, isSelected, className, preview, cannotEmbed } = this.props;
const controls = (
<Fragment>
<BlockControls>
<Toolbar>
{ preview && ! previewIsFallback && (
{ preview && ! cannotEmbed && (
<IconButton
className="components-toolbar__control"
label={ __( 'Edit URL' ) }
Expand Down Expand Up @@ -299,7 +297,7 @@ export function getEmbedEdit( title, icon ) {
// translators: %s: type of embed e.g: "YouTube", "Twitter", etc. "Embed" is used when no specific type exists
const label = sprintf( __( '%s URL' ), title );

if ( ! preview || previewIsFallback || editingURL ) {
if ( ! preview || cannotEmbed || editingURL ) {
return (
<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label } className="wp-block-embed">
<form onSubmit={ this.setUrl }>
Expand Down Expand Up @@ -345,7 +343,7 @@ export function getEmbedEdit( title, icon ) {
);

return (
<figure className={ classnames( className, 'wp-block-embed', { 'is-video': 'video' === type } ) }>
<figure className={ classnames( className, 'wp-block-embed', { 'is-type-video': 'video' === type } ) }>
{ controls }
{ ( cannotPreview ) ? (
<Placeholder icon={ <BlockIcon icon={ icon } showColors /> } label={ label }>
Expand Down Expand Up @@ -411,17 +409,21 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
const { url } = ownProps.attributes;
const core = select( 'core' );
const { getEmbedPreview, isPreviewEmbedFallback, isRequestingEmbedPreview } = core;
const preview = url && getEmbedPreview( url );
const previewIsFallback = url && isPreviewEmbedFallback( url );
const preview = undefined !== url && getEmbedPreview( url );
const previewIsFallback = undefined !== url && isPreviewEmbedFallback( url );
const fetching = undefined !== url && isRequestingEmbedPreview( url );
// The external oEmbed provider does not exist. We got no type info and no html.
const badEmbedProvider = !! preview && undefined === preview.type && false === preview.html;
// Some WordPress URLs that can't be embedded will cause the API to return
// a valid JSON response with no HTML and `data.status` set to 404, rather
// than generating a fallback response as other embeds do.
const validPreview = preview && ! ( preview.data && preview.data.status === 404 );
const wordpressCantEmbed = !! preview && preview.data && preview.data.status === 404;
const validPreview = !! preview && ! badEmbedProvider && ! wordpressCantEmbed;
const cannotEmbed = undefined !== url && ( ! validPreview || previewIsFallback );
return {
preview: validPreview && preview,
previewIsFallback,
preview: validPreview ? preview : undefined,
fetching,
cannotEmbed,
};
} )
)( getEmbedEdit( title, icon ) ),
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/gallery/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,12 @@
max-width: $content-width / 2;
width: 100%;
}

// Keep the display property consistent when alignments are applied
// to preserve columns
&.alignleft,
&.aligncenter,
&.alignright {
display: flex;
}
}
14 changes: 12 additions & 2 deletions packages/editor/src/components/post-saved-state/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { get } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -41,8 +42,9 @@ export class PostSavedState extends Component {
}

render() {
const { isNew, isScheduled, isPublished, isDirty, isSaving, isSaveable, onSave, isAutosaving } = this.props;
const { post, isNew, isScheduled, isPublished, isDirty, isSaving, isSaveable, onSave, isAutosaving, isPending } = this.props;
const { forceSavedMessage } = this.state;
const hasPublishAction = get( post, [ '_links', 'wp:action-publish' ], false );
if ( isSaving ) {
// TODO: Classes generation should be common across all return
// paths of this function, including proper naming convention for
Expand Down Expand Up @@ -76,14 +78,20 @@ export class PostSavedState extends Component {
);
}

// Once the post has been submitted for review this button
// is not needed for the contributor role.
if ( ! hasPublishAction && isPending ) {
return null;
}

return (
<IconButton
className="editor-post-save-draft"
onClick={ onSave }
icon="cloud-upload"
shortcut={ displayShortcut.primary( 's' ) }
>
{ __( 'Save Draft' ) }
{ isPending ? __( 'Save as Pending' ) : __( 'Save Draft' ) }
</IconButton>
);
}
Expand All @@ -100,6 +108,7 @@ export default compose( [
isEditedPostSaveable,
getCurrentPost,
isAutosavingPost,
getEditedPostAttribute,
} = select( 'core/editor' );
return {
post: getCurrentPost(),
Expand All @@ -110,6 +119,7 @@ export default compose( [
isSaving: forceIsSaving || isSavingPost(),
isSaveable: isEditedPostSaveable(),
isAutosaving: isAutosavingPost(),
isPending: 'pending' === getEditedPostAttribute( 'status' ),
};
} ),
withDispatch( ( dispatch ) => ( {
Expand Down
130 changes: 130 additions & 0 deletions test/e2e/specs/embedding.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/**
* Internal dependencies
*/
import { clickBlockAppender, newPost } from '../support/utils';

const INTERCEPT_EMBED_SUCCESS_URLS = [
'https://wordpress.org/gutenberg/handbook/block-api/attributes/',
'https://www.youtube.com/watch?v=lXMskKTw3Bc',
'https://cloudup.com/cQFlxqtY4ob',
'https://twitter.com/notnownikki',
];

const VIDEO_URL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';

const MOCK_EMBED_RICH_SUCCESS_RESPONSE = {
url: 'https://twitter.com/notnownikki',
html: '<p>Mock success response.</p>',
type: 'rich',
provider_name: 'Twitter',
provider_url: 'https://twitter.com',
version: '1.0',
};

const MOCK_EMBED_VIDEO_SUCCESS_RESPONSE = {
url: 'https://www.youtube.com/watch?v=lXMskKTw3Bc',
html: '<iframe width="16" height="9"></iframe>',
type: 'video',
provider_name: 'YouTube',
provider_url: 'https://youtube.com',
version: '1.0',
};

const setupEmbedRequestInterception = async () => {
// Intercept successful embed requests so that scripts loaded from third parties
// cannot leave errors in the console and cause the test to fail.
await page.setRequestInterception( true );
page.on( 'request', async ( request ) => {
const requestUrl = request.url();
const hasEmbedSuccessUrl = INTERCEPT_EMBED_SUCCESS_URLS.some(
( url ) => -1 !== requestUrl.indexOf( encodeURIComponent( url ) )
);
if ( hasEmbedSuccessUrl ) {
// If this is the YouTube request, return the video mock response that has
// an iframe with set aspect ratio.
// Otherwise: use the generic rich response.
const embedResponse = -1 !== requestUrl.indexOf( encodeURIComponent( VIDEO_URL ) ) ? MOCK_EMBED_VIDEO_SUCCESS_RESPONSE : MOCK_EMBED_RICH_SUCCESS_RESPONSE;
request.respond( {
content: 'application/json',
body: JSON.stringify( embedResponse ),
} );
} else {
request.continue();
}
} );
};

const addEmbeds = async () => {
await newPost();

// Valid embed.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://twitter.com/notnownikki' );
await page.keyboard.press( 'Enter' );

// Valid provider; invalid content.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://twitter.com/wooyaygutenberg123454312' );
await page.keyboard.press( 'Enter' );

// Valid provider; erroring provider API.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://www.reverbnation.com/collection/186-mellow-beats' );
await page.keyboard.press( 'Enter' );

// WordPress content that can't be embedded.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://wordpress.org/gutenberg/handbook/' );
await page.keyboard.press( 'Enter' );

// WordPress content that can be embedded.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://wordpress.org/gutenberg/handbook/block-api/attributes/' );
await page.keyboard.press( 'Enter' );

// Video content.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
await page.keyboard.press( 'Enter' );

// Photo content.
await clickBlockAppender();
await page.keyboard.type( '/embed' );
await page.keyboard.press( 'Enter' );
await page.keyboard.type( 'https://cloudup.com/cQFlxqtY4ob' );
await page.keyboard.press( 'Enter' );
};

const setUp = async () => {
await setupEmbedRequestInterception();
await addEmbeds();
};

describe( 'Embedding content', () => {
beforeEach( setUp );

it( 'should render embeds in the correct state', async () => {
// The successful embeds should be in a correctly classed figure element.
await page.waitForSelector( 'figure.wp-block-embed-twitter' );
await page.waitForSelector( 'figure.wp-block-embed-cloudup' );
// Video embed should also have the aspect ratio class.
await page.waitForSelector( 'figure.wp-block-embed-youtube.wp-embed-aspect-16-9' );

// Each failed embed should be in the edit state.
await page.waitForSelector( 'input[value="https://twitter.com/wooyaygutenberg123454312"]' );
await page.waitForSelector( 'input[value="https://www.reverbnation.com/collection/186-mellow-beats"]' );
await page.waitForSelector( 'input[value="https://wordpress.org/gutenberg/handbook/"]' );
} );
} );

0 comments on commit aa791fe

Please sign in to comment.