diff --git a/edit-post/components/header/style.scss b/edit-post/components/header/style.scss index a99539ea6bf2c..db312fee2fcf3 100644 --- a/edit-post/components/header/style.scss +++ b/edit-post/components/header/style.scss @@ -31,7 +31,7 @@ display: none; @include break-small { - display: inline-block; + display: inline-flex; } } } diff --git a/editor/components/post-permalink/index.js b/editor/components/post-permalink/index.js index ced2fc2437211..ae389492cf19c 100644 --- a/editor/components/post-permalink/index.js +++ b/editor/components/post-permalink/index.js @@ -9,8 +9,8 @@ import classnames from 'classnames'; import { withDispatch, withSelect } from '@wordpress/data'; import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { ClipboardButton, Button } from '@wordpress/components'; import { compose } from '@wordpress/compose'; +import { ClipboardButton, Button, ExternalLink } from '@wordpress/components'; /** * Internal Dependencies @@ -48,7 +48,7 @@ class PostPermalink extends Component { componentDidUpdate( prevProps, prevState ) { // If we've just stopped editing the permalink, focus on the new permalink. if ( prevState.isEditingPermalink && ! this.state.isEditingPermalink ) { - this.permalinkButton.focus(); + this.linkElement.focus(); } } @@ -79,15 +79,15 @@ class PostPermalink extends Component { { __( 'Permalink:' ) } { ! isEditingPermalink && - + } { isEditingPermalink && diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js index 154f9f98d7c54..d35b29a699eb2 100644 --- a/editor/components/post-preview-button/index.js +++ b/editor/components/post-preview-button/index.js @@ -63,12 +63,16 @@ export class PostPreviewButton extends Component { * @param {MouseEvent} event Click event from preview button click. */ openPreviewWindow( event ) { - const { isAutosaveable, previewLink } = this.props; + const { isAutosaveable, previewLink, currentPostLink } = this.props; // If there are no changes to autosave, we cannot perform the save, but // if there is an existing preview link (e.g. previous published post // autosave), it should be reused as the popup destination. - if ( ! isAutosaveable && ! previewLink ) { + if ( ! isAutosaveable && ! previewLink && currentPostLink ) { + this.previewWindow = window.open( + currentPostLink, + this.getWindowTarget() + ); return; } @@ -115,15 +119,13 @@ export class PostPreviewButton extends Component { } render() { - const { currentPostLink, isSaveable } = this.props; + const { isSaveable } = this.props; return ( +`; diff --git a/editor/components/post-preview-button/test/index.js b/editor/components/post-preview-button/test/index.js index 899d7f20a459e..d364561b390fc 100644 --- a/editor/components/post-preview-button/test/index.js +++ b/editor/components/post-preview-button/test/index.js @@ -96,7 +96,10 @@ describe( 'PostPreviewButton', () => { wrapper.simulate( 'click', { preventDefault } ); if ( expectedPreviewURL ) { - expect( preventDefault ).toHaveBeenCalled(); + if ( expectedPreviewURL !== props.currentPostLink ) { + expect( preventDefault ).toHaveBeenCalled(); + } + expect( window.open ).toHaveBeenCalledWith( expectedPreviewURL, 'wp-preview-1' ); } else { expect( preventDefault ).not.toHaveBeenCalled(); @@ -113,11 +116,13 @@ describe( 'PostPreviewButton', () => { return wrapper; } - it( 'should do nothing if neither autosaveable nor preview link available', () => { + it( 'should open the currentPostLink if not autosaveable nor preview link available', () => { + const currentPostLink = 'https://wordpress.org/?p=1'; assertForPreview( { isAutosaveable: false, previewLink: undefined, - }, null, false ); + currentPostLink, + }, currentPostLink, false ); } ); it( 'should save for autosaveable post with preview link', () => { @@ -143,7 +148,7 @@ describe( 'PostPreviewButton', () => { } ); describe( 'render()', () => { - it( 'should render a link', () => { + it( 'should match the snapshot', () => { const wrapper = shallow( { currentPostLink="https://wordpress.org/?p=1" /> ); - expect( wrapper.prop( 'href' ) ).toBe( 'https://wordpress.org/?p=1' ); - expect( wrapper.prop( 'disabled' ) ).toBe( false ); - expect( wrapper.prop( 'target' ) ).toBe( 'wp-preview-1' ); + expect( wrapper ).toMatchSnapshot(); } ); it( 'should be disabled if post is not saveable', () => { diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js index f86974d469b12..0f4825c9579a9 100644 --- a/editor/components/rich-text/format-toolbar/index.js +++ b/editor/components/rich-text/format-toolbar/index.js @@ -10,6 +10,7 @@ import { Toolbar, withSpokenMessages, Popover, + ExternalLink, } from '@wordpress/components'; import { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } from '@wordpress/keycodes'; import { prependHTTP } from '@wordpress/url'; @@ -255,13 +256,12 @@ class FormatToolbar extends Component { onKeyPress={ stopKeyPropagation } >
- { formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) } - + + { children } { @@ -31,9 +32,9 @@ function ExternalLink( { href, children, className, rel = '', ...additionalProps __( '(opens in a new window)' ) } - + ); } -export default ExternalLink; +export default forwardRef( ExternalLink ); diff --git a/packages/components/src/external-link/style.scss b/packages/components/src/external-link/style.scss index b20adc9ccccc9..8bb70186ce054 100644 --- a/packages/components/src/external-link/style.scss +++ b/packages/components/src/external-link/style.scss @@ -1,8 +1,6 @@ -.components-external-link { - .dashicon { - width: 1.4em; - height: 1.4em; - margin: 0 .2em; - vertical-align: top; - } -} \ No newline at end of file +.components-external-link__icon { + width: 1.4em; + height: 1.4em; + margin: -0.2em 0.1em 0; + vertical-align: middle; +}