From 4558a0585625b4bed6ad11817b53da44c89ada1f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 22 Sep 2019 21:40:01 -0500 Subject: [PATCH 01/29] Add an 'AMP Preview' button to the block editor Use the plugin pattern in the block-editor/ directory. Maybe the UI could be improved, especially the icon. --- .../block-editor/plugins/amp-black-icon.js | 18 ++ .../src/block-editor/plugins/amp-preview.js | 287 ++++++++++++++++++ 2 files changed, 305 insertions(+) create mode 100644 assets/src/block-editor/plugins/amp-black-icon.js create mode 100644 assets/src/block-editor/plugins/amp-preview.js diff --git a/assets/src/block-editor/plugins/amp-black-icon.js b/assets/src/block-editor/plugins/amp-black-icon.js new file mode 100644 index 00000000000..ff71c264fe5 --- /dev/null +++ b/assets/src/block-editor/plugins/amp-black-icon.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +/** + * Forked from AMP-Brand-Black-Icon.svg on amp.dev. + * + * Simplified, including removing the and tags. + * + * @see https://amp.dev/static/files/brand-material/AMP_Logo_Rebrush.zip + */ +export default ( + + + + +); diff --git a/assets/src/block-editor/plugins/amp-preview.js b/assets/src/block-editor/plugins/amp-preview.js new file mode 100644 index 00000000000..cbb1ce7362c --- /dev/null +++ b/assets/src/block-editor/plugins/amp-preview.js @@ -0,0 +1,287 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; +import { errorMessages } from 'amp-block-editor-data'; +import PropTypes from 'prop-types'; + +/** + * WordPress dependencies + */ +import { Component, renderToString } from '@wordpress/element'; +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { withSelect, withDispatch } from '@wordpress/data'; +import { PluginPostStatusInfo } from '@wordpress/edit-post'; +import { DotTip } from '@wordpress/nux'; +import { ifCondition, compose } from '@wordpress/compose'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import ampIcon from './amp-black-icon'; + +/** + * Writes the message and graphic in the new preview window that was opened. + * + * Forked from the Core component . + * The errorMessages are imported via wp_localize_script(). + * + * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L17 + * @param {Object} targetDocument The target document. + */ +function writeInterstitialMessage( targetDocument ) { + let markup = renderToString( +
+ { ampIcon } +

{ __( 'Generating AMP preview…', 'amp' ) }

+
+ ); + + markup += ` + + `; + + targetDocument.write( markup ); + targetDocument.title = __( 'Generating AMP preview…', 'amp' ); + targetDocument.close(); +} + +/** + * Forked from the Core component . + * + * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js + */ +class AMPPreview extends Component { + /** + * Constructs the class. + * + * @param {*} args Constructor arguments. + */ + constructor( ...args ) { + super( ...args ); + this.openPreviewWindow = this.openPreviewWindow.bind( this ); + } + + /** + * Called after the component updated. + * + * @param {Object} prevProps The previous props. + */ + componentDidUpdate( prevProps ) { + const { previewLink } = this.props; + + // This relies on the window being responsible to unset itself when + // navigation occurs or a new preview window is opened, to avoid + // unintentional forceful redirects. + if ( previewLink && ! prevProps.previewLink ) { + this.setPreviewWindowLink( previewLink ); + } + } + + /** + * Sets the preview window's location to the given URL, if a preview window + * exists and is not closed. + * + * @param {string} url URL to assign as preview window location. + */ + setPreviewWindowLink( url ) { + const { previewWindow } = this; + + if ( previewWindow && ! previewWindow.closed ) { + previewWindow.location = url; + } + } + + /** + * Gets the window target. + */ + getWindowTarget() { + const { postId } = this.props; + return `wp-preview-${ postId }`; + } + + /** + * Opens the preview window. + * + * @param {Object} event The DOM event. + */ + openPreviewWindow( event ) { + // Our Preview button has its 'href' and 'target' set correctly for a11y + // purposes. Unfortunately, though, we can't rely on the default 'click' + // handler since sometimes it incorrectly opens a new tab instead of reusing + // the existing one. + // https://github.com/WordPress/gutenberg/pull/8330 + event.preventDefault(); + + // Open up a Preview tab if needed. This is where we'll show the preview. + if ( ! this.previewWindow || this.previewWindow.closed ) { + this.previewWindow = window.open( '', this.getWindowTarget() ); + } + + // Focus the Preview tab. This might not do anything, depending on the browser's + // and user's preferences. + // https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus + this.previewWindow.focus(); + + // If we don't need to autosave the post before previewing, then we simply + // load the Preview URL in the Preview tab. + if ( ! this.props.isAutosaveable ) { + this.setPreviewWindowLink( event.target.href ); + return; + } + + // Request an autosave. This happens asynchronously and causes the component + // to update when finished. + if ( this.props.isDraft ) { + this.props.savePost( { isPreview: true } ); + } else { + this.props.autosave( { isPreview: true } ); + } + + // Display a 'Generating preview' message in the Preview tab while we wait for the + // autosave to finish. + writeInterstitialMessage( this.previewWindow.document ); + } + + /** + * Renders the component. + */ + render() { + const { previewLink, currentPostLink, isSaveable } = this.props; + + // Link to the `?preview=true` URL if we have it, since this lets us see + // changes that were autosaved since the post was last published. Otherwise, + // just link to the post's URL. + const href = previewLink || currentPostLink; + + return ( + ! errorMessages.length && ( + + + + ) + ); + } +} + +AMPPreview.propTypes = { + autosave: PropTypes.bool.isRequired, + currentPostLink: PropTypes.func.isRequired, + postId: PropTypes.bool.isRequired, + previewLink: PropTypes.func.isRequired, + isAutosaveable: PropTypes.func.isRequired, + isDraft: PropTypes.func.isRequired, + isSaveable: PropTypes.func.isRequired, + isViewable: PropTypes.func.isRequired, + savePost: PropTypes.bool.isRequired, +}; + +export const name = 'amp-preview'; + +export const icon = 'hidden'; + +export const render = compose( [ + withSelect( ( select, { forcePreviewLink, forceIsAutosaveable } ) => { + const { + getCurrentPostId, + getCurrentPostAttribute, + getEditedPostAttribute, + isEditedPostSaveable, + isEditedPostAutosaveable, + getEditedPostPreviewLink, + } = select( 'core/editor' ); + const { + getPostType, + } = select( 'core' ); + + const initialPreviewLink = getEditedPostPreviewLink(); + const previewLink = initialPreviewLink ? addQueryArgs( initialPreviewLink, { amp: 1 } ) : undefined; + const postType = getPostType( getEditedPostAttribute( 'type' ) ); + + return { + postId: getCurrentPostId(), + currentPostLink: getCurrentPostAttribute( 'link' ), + previewLink: forcePreviewLink !== undefined ? forcePreviewLink : previewLink, + isSaveable: isEditedPostSaveable(), + isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(), + isViewable: get( postType, [ 'viewable' ], false ), + isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1, + }; + } ), + withDispatch( ( dispatch ) => ( { + autosave: dispatch( 'core/editor' ).autosave, + savePost: dispatch( 'core/editor' ).savePost, + } ) ), + ifCondition( ( { isViewable } ) => isViewable ), +] )( AMPPreview ); From d86f0903383a2c9dac19e8df4ab492eb9984fdc6 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 22 Sep 2019 22:41:29 -0500 Subject: [PATCH 02/29] Don't display the 'AMP Preview' button if the 'Enable AMP' toggle isn't selected There's no need to preview AMP if it's not enabled. --- .../{plugins => components}/amp-black-icon.js | 0 .../block-editor/{plugins => components}/amp-preview.js | 6 +----- assets/src/block-editor/components/index.js | 1 + assets/src/block-editor/plugins/amp-toggle.js | 8 ++++++++ 4 files changed, 10 insertions(+), 5 deletions(-) rename assets/src/block-editor/{plugins => components}/amp-black-icon.js (100%) rename assets/src/block-editor/{plugins => components}/amp-preview.js (98%) diff --git a/assets/src/block-editor/plugins/amp-black-icon.js b/assets/src/block-editor/components/amp-black-icon.js similarity index 100% rename from assets/src/block-editor/plugins/amp-black-icon.js rename to assets/src/block-editor/components/amp-black-icon.js diff --git a/assets/src/block-editor/plugins/amp-preview.js b/assets/src/block-editor/components/amp-preview.js similarity index 98% rename from assets/src/block-editor/plugins/amp-preview.js rename to assets/src/block-editor/components/amp-preview.js index cbb1ce7362c..2c26865097c 100644 --- a/assets/src/block-editor/plugins/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -247,11 +247,7 @@ AMPPreview.propTypes = { savePost: PropTypes.bool.isRequired, }; -export const name = 'amp-preview'; - -export const icon = 'hidden'; - -export const render = compose( [ +export default compose( [ withSelect( ( select, { forcePreviewLink, forceIsAutosaveable } ) => { const { getCurrentPostId, diff --git a/assets/src/block-editor/components/index.js b/assets/src/block-editor/components/index.js index a28f9a3de0a..c839ec254b0 100644 --- a/assets/src/block-editor/components/index.js +++ b/assets/src/block-editor/components/index.js @@ -1,3 +1,4 @@ +export { default as AMPPreview } from './amp-preview'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as LayoutControls } from './layout-controls'; export { default as withMediaLibraryNotice } from './with-media-library-notice'; diff --git a/assets/src/block-editor/plugins/amp-toggle.js b/assets/src/block-editor/plugins/amp-toggle.js index 55fca16b765..ea2e3acca96 100644 --- a/assets/src/block-editor/plugins/amp-toggle.js +++ b/assets/src/block-editor/plugins/amp-toggle.js @@ -19,6 +19,7 @@ import { compose, withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import { isAMPEnabled } from '../helpers'; +import { AMPPreview } from '../components'; /** * Adds an 'Enable AMP' toggle to the block editor 'Status & Visibility' section. @@ -60,6 +61,13 @@ function AMPToggle( { isEnabled, onChange } ) { ) } + { + isEnabled && ( + + + + ) + } ); } From 75e357c76ff801f1b355b25fe34f99bd29eead78 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 22 Sep 2019 22:54:42 -0500 Subject: [PATCH 03/29] Address failed PHPUnit test, though I'm not positive this is the right approach I'm not sure how the tests seemeingly passed before, though they're not passing now. --- tests/php/test-class-amp-meta-box.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/php/test-class-amp-meta-box.php b/tests/php/test-class-amp-meta-box.php index 71bd83ce002..9778dd0c6e5 100644 --- a/tests/php/test-class-amp-meta-box.php +++ b/tests/php/test-class-amp-meta-box.php @@ -145,9 +145,11 @@ public function test_enqueue_block_assets() { 'wp-element', 'wp-hooks', 'wp-i18n', + 'wp-nux', 'wp-plugins', 'wp-polyfill', 'wp-server-side-render', + 'wp-url', ], $block_script->deps ); From 7a574efb3c6247d655ed42d648dde6db0a77031e Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 22 Sep 2019 23:30:46 -0500 Subject: [PATCH 04/29] Use the AMP slug from amp_get_slug(), apply query var to currentPostLink As Weston suggested, that URL should also have the AMP query var. --- assets/src/block-editor/components/amp-preview.js | 8 +++++--- assets/src/block-editor/plugins/amp-toggle.js | 4 ++-- includes/admin/class-amp-post-meta-box.php | 1 + 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 2c26865097c..632fe160655 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -2,7 +2,7 @@ * External dependencies */ import { get } from 'lodash'; -import { errorMessages } from 'amp-block-editor-data'; +import { ampSlug, errorMessages } from 'amp-block-editor-data'; import PropTypes from 'prop-types'; /** @@ -261,13 +261,15 @@ export default compose( [ getPostType, } = select( 'core' ); + const queryArgs = {}; + queryArgs[ ampSlug ] = 1; const initialPreviewLink = getEditedPostPreviewLink(); - const previewLink = initialPreviewLink ? addQueryArgs( initialPreviewLink, { amp: 1 } ) : undefined; + const previewLink = initialPreviewLink ? addQueryArgs( initialPreviewLink, queryArgs ) : undefined; const postType = getPostType( getEditedPostAttribute( 'type' ) ); return { postId: getCurrentPostId(), - currentPostLink: getCurrentPostAttribute( 'link' ), + currentPostLink: addQueryArgs( getCurrentPostAttribute( 'link' ), queryArgs ), previewLink: forcePreviewLink !== undefined ? forcePreviewLink : previewLink, isSaveable: isEditedPostSaveable(), isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(), diff --git a/assets/src/block-editor/plugins/amp-toggle.js b/assets/src/block-editor/plugins/amp-toggle.js index ea2e3acca96..20730741b54 100644 --- a/assets/src/block-editor/plugins/amp-toggle.js +++ b/assets/src/block-editor/plugins/amp-toggle.js @@ -2,7 +2,7 @@ /** * External dependencies */ -import { errorMessages } from 'amp-block-editor-data'; +import { errorMessages, isStandardMode } from 'amp-block-editor-data'; import PropTypes from 'prop-types'; /** @@ -62,7 +62,7 @@ function AMPToggle( { isEnabled, onChange } ) { } { - isEnabled && ( + isEnabled && ! isStandardMode && ( diff --git a/includes/admin/class-amp-post-meta-box.php b/includes/admin/class-amp-post-meta-box.php index 9199d603392..7a34c6a1fd6 100644 --- a/includes/admin/class-amp-post-meta-box.php +++ b/includes/admin/class-amp-post-meta-box.php @@ -230,6 +230,7 @@ public function enqueue_block_assets() { $error_messages = $this->get_error_messages( $status_and_errors['status'], $status_and_errors['errors'] ); $data = [ + 'ampSlug' => amp_get_slug(), 'possibleStatuses' => [ self::ENABLED_STATUS, self::DISABLED_STATUS ], 'defaultStatus' => $enabled_status, 'errorMessages' => $error_messages, From cc1bedb325c2dde21264fc7b87f0037011f84ce8 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 22 Sep 2019 23:49:34 -0500 Subject: [PATCH 05/29] Test that the proper values are localized As a follow-up to adding 'ampSlug' to thie wp_localize_script() values, this tests that the right values are present. --- tests/php/test-class-amp-meta-box.php | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/tests/php/test-class-amp-meta-box.php b/tests/php/test-class-amp-meta-box.php index 9778dd0c6e5..d087f5c601b 100644 --- a/tests/php/test-class-amp-meta-box.php +++ b/tests/php/test-class-amp-meta-box.php @@ -156,6 +156,22 @@ public function test_enqueue_block_assets() { $this->assertEquals( AMP_Post_Meta_Box::BLOCK_ASSET_HANDLE, $block_script->handle ); $this->assertEquals( amp_get_asset_url( 'js/' . AMP_Post_Meta_Box::BLOCK_ASSET_HANDLE . '.js' ), $block_script->src ); + $this->assertContains( 'ampBlockEditor', $block_script->extra['data'] ); + $expected_localized_values = [ + 'ampSlug', + 'possibleStatuses', + 'defaultStatus', + 'errorMessages', + 'isWebsiteEnabled', + 'isStoriesEnabled', + 'hasThemeSupport', + 'isStandardMode', + ]; + + foreach ( $expected_localized_values as $localized_value ) { + $this->assertContains( $localized_value, $block_script->extra['data'] ); + } + /* * Test Stories integration. * The current screen is the AMP Story editor, so the data for the Latest Stories block should not be present, as it's not needed there. From 98133f67d4cab9dabe07c3990e9c1024cc104488 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 23 Sep 2019 02:01:29 -0500 Subject: [PATCH 06/29] Correct the propTypes These were mainly copied, so apply the correct types. --- .../src/block-editor/components/amp-preview.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 632fe160655..74e6e94404a 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -236,15 +236,15 @@ class AMPPreview extends Component { } AMPPreview.propTypes = { - autosave: PropTypes.bool.isRequired, - currentPostLink: PropTypes.func.isRequired, - postId: PropTypes.bool.isRequired, - previewLink: PropTypes.func.isRequired, - isAutosaveable: PropTypes.func.isRequired, - isDraft: PropTypes.func.isRequired, - isSaveable: PropTypes.func.isRequired, - isViewable: PropTypes.func.isRequired, - savePost: PropTypes.bool.isRequired, + autosave: PropTypes.func.isRequired, + currentPostLink: PropTypes.string.isRequired, + postId: PropTypes.number.isRequired, + previewLink: PropTypes.string, + isAutosaveable: PropTypes.bool.isRequired, + isDraft: PropTypes.bool.isRequired, + isSaveable: PropTypes.bool.isRequired, + isViewable: PropTypes.bool.isRequired, + savePost: PropTypes.func.isRequired, }; export default compose( [ From f80dd860f00b9b9ee7c261933ce89d2c96016992 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 26 Sep 2019 01:42:05 -0500 Subject: [PATCH 07/29] Experiment with manipulating the DOM --- .../block-editor/components/amp-preview.js | 50 +++++++++---------- assets/src/block-editor/helpers/index.js | 21 +++++++- assets/src/block-editor/index.js | 12 ++++- 3 files changed, 56 insertions(+), 27 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 74e6e94404a..2456920d1eb 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -2,7 +2,7 @@ * External dependencies */ import { get } from 'lodash'; -import { ampSlug, errorMessages } from 'amp-block-editor-data'; +import { ampSlug, errorMessages, isStandardMode } from 'amp-block-editor-data'; import PropTypes from 'prop-types'; /** @@ -12,7 +12,6 @@ import { Component, renderToString } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; -import { PluginPostStatusInfo } from '@wordpress/edit-post'; import { DotTip } from '@wordpress/nux'; import { ifCondition, compose } from '@wordpress/compose'; import { addQueryArgs } from '@wordpress/url'; @@ -21,6 +20,7 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import ampIcon from './amp-black-icon'; +import { isAMPEnabled } from '../helpers'; /** * Writes the message and graphic in the new preview window that was opened. @@ -200,7 +200,7 @@ class AMPPreview extends Component { * Renders the component. */ render() { - const { previewLink, currentPostLink, isSaveable } = this.props; + const { previewLink, currentPostLink, isEnabled, isSaveable } = this.props; // Link to the `?preview=true` URL if we have it, since this lets us see // changes that were autosaved since the post was last published. Otherwise, @@ -208,28 +208,26 @@ class AMPPreview extends Component { const href = previewLink || currentPostLink; return ( - ! errorMessages.length && ( - - - + isEnabled && ! errorMessages.length && ! isStandardMode && ( + ) ); } @@ -242,6 +240,7 @@ AMPPreview.propTypes = { previewLink: PropTypes.string, isAutosaveable: PropTypes.bool.isRequired, isDraft: PropTypes.bool.isRequired, + isEnabled: PropTypes.bool.isRequired, isSaveable: PropTypes.bool.isRequired, isViewable: PropTypes.bool.isRequired, savePost: PropTypes.func.isRequired, @@ -275,6 +274,7 @@ export default compose( [ isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(), isViewable: get( postType, [ 'viewable' ], false ), isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1, + isEnabled: isAMPEnabled(), }; } ), withDispatch( ( dispatch ) => ( { diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index e8d13aaaddc..8321e0d8a9e 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -8,7 +8,7 @@ import { ReactElement } from 'react'; * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { cloneElement, RawHTML } from '@wordpress/element'; +import { cloneElement, RawHTML, render } from '@wordpress/element'; import { TextControl, SelectControl, ToggleControl, Notice, PanelBody, FontSizePicker } from '@wordpress/components'; import { InspectorControls } from '@wordpress/block-editor'; import { select } from '@wordpress/data'; @@ -18,6 +18,7 @@ import { select } from '@wordpress/data'; */ import { TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../constants'; import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../common/constants'; +import { AMPPreview } from '../components'; const ampLayoutOptions = [ { @@ -939,3 +940,21 @@ export const isAMPEnabled = () => { return 'enabled' === getDefaultStatus(); }; + +/** + * Replaces the button to preview the post with one that also previews AMP. + */ +export const replacePreviewButton = () => { + const postPreviewButton = document.querySelector( '.editor-post-preview' ); + if ( ! postPreviewButton ) { + return; + } + + const buttonWrapper = document.createElement( 'div' ); + postPreviewButton.parentElement.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); + + render( + , + buttonWrapper + ); +}; diff --git a/assets/src/block-editor/index.js b/assets/src/block-editor/index.js index ae435c4e5d6..e1bde672aea 100644 --- a/assets/src/block-editor/index.js +++ b/assets/src/block-editor/index.js @@ -5,13 +5,14 @@ import { addFilter } from '@wordpress/hooks'; import { registerPlugin } from '@wordpress/plugins'; import { registerBlockType } from '@wordpress/blocks'; import { select } from '@wordpress/data'; +import domReady from '@wordpress/dom-ready'; /** * Internal dependencies */ import { withFeaturedImageNotice } from '../common/components'; import { withMediaLibraryNotice } from './components'; -import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave } from './helpers'; +import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, replacePreviewButton } from './helpers'; import { getMinimumFeaturedImageDimensions } from '../common/helpers'; import './store'; @@ -77,3 +78,12 @@ blocks.keys().forEach( ( modulePath ) => { registerBlockType( name, settings ); } } ); + +/** + * Replace the preview button with one that also previews AMP. + */ +if ( isWebsiteEnabled() ) { + domReady( () => { + replacePreviewButton(); + } ); +} From 3459cbf2a7312ae13dcbe56cfed9aea6560bdc3a Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 29 Sep 2019 19:02:38 -0500 Subject: [PATCH 08/29] Try maniplating the DOM to add the 'Preview AMP' button This still needs more testing. But so far, it looks like it's working. It inserts the button into the DOM on domReady, and in that component's componentDidUpdate(), it moves it back to the correct position if needed. --- assets/css/src/amp-block-editor.css | 32 ++++++++++++ assets/images/amp-black-icon.svg | 5 ++ .../block-editor/components/amp-black-icon.js | 18 ------- .../block-editor/components/amp-preview.js | 52 +++++++++++++++---- assets/src/block-editor/constants.js | 3 ++ assets/src/block-editor/helpers/index.js | 15 +++--- assets/src/block-editor/index.js | 6 +-- assets/src/block-editor/plugins/amp-toggle.js | 10 +--- 8 files changed, 94 insertions(+), 47 deletions(-) create mode 100644 assets/images/amp-black-icon.svg delete mode 100644 assets/src/block-editor/components/amp-black-icon.js diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 976c2f6d217..336f0fe61d3 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -18,3 +18,35 @@ flex: 0 0 auto; margin-right: 1rem; } + +/* AMP preview button wrapper */ +.wp-core-ui #amp-wrapper-post-preview { + border: 0; + margin-left: -4px; + padding: 0; + position: relative; +} + +/* AMP preview button */ +.wp-core-ui .amp-editor-post-preview { + height: 33px; + padding-left: 6px; + padding-right: 6px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.wp-core-ui .amp-editor-post-preview svg { + width: 15px; + height: 15px; + margin: 0; +} + +/* + * Remove right border radius on the (non-AMP) 'Preview' button, as it'll be next to the AMP button. + * @todo: only apply this if the 'Preview AMP' button displays. + */ +.wp-core-ui .editor-post-preview { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} diff --git a/assets/images/amp-black-icon.svg b/assets/images/amp-black-icon.svg new file mode 100644 index 00000000000..288237e3489 --- /dev/null +++ b/assets/images/amp-black-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/src/block-editor/components/amp-black-icon.js b/assets/src/block-editor/components/amp-black-icon.js deleted file mode 100644 index ff71c264fe5..00000000000 --- a/assets/src/block-editor/components/amp-black-icon.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * WordPress dependencies - */ -import { Path, SVG } from '@wordpress/components'; - -/** - * Forked from AMP-Brand-Black-Icon.svg on amp.dev. - * - * Simplified, including removing the and tags. - * - * @see https://amp.dev/static/files/brand-material/AMP_Logo_Rebrush.zip - */ -export default ( - - - - -); diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 2456920d1eb..b1cdc1e3c94 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -8,8 +8,8 @@ import PropTypes from 'prop-types'; /** * WordPress dependencies */ -import { Component, renderToString } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { Component, createRef, renderToString } from '@wordpress/element'; +import { Icon, IconButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { withSelect, withDispatch } from '@wordpress/data'; import { DotTip } from '@wordpress/nux'; @@ -19,8 +19,10 @@ import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ -import ampIcon from './amp-black-icon'; +import ampBlackIcon from '../../../images/amp-black-icon.svg'; +import ampFilledIcon from '../../../images/amp-icon.svg'; import { isAMPEnabled } from '../helpers'; +import { POST_PREVIEW_CLASS } from '../constants'; /** * Writes the message and graphic in the new preview window that was opened. @@ -34,7 +36,10 @@ import { isAMPEnabled } from '../helpers'; function writeInterstitialMessage( targetDocument ) { let markup = renderToString(
- { ampIcon } +

{ __( 'Generating AMP preview…', 'amp' ) }

); @@ -73,8 +78,8 @@ function writeInterstitialMessage( targetDocument ) { } } .editor-post-preview-button__interstitial-message svg { - width: 192px; - height: 192px; + width: 198px; + height: 198px; stroke: #555d66; stroke-width: 0.75; } @@ -100,7 +105,10 @@ function writeInterstitialMessage( targetDocument ) { } /** - * Forked from the Core component . + * A 'Preview AMP' button, forked from the Core 'Preview' button: . + * + * Rendered into the DOM with renderPreviewButton() in helpers/index.js. + * This also moves the (non-AMP) 'Preview' button to before this, if it's not already there. * * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js */ @@ -113,6 +121,8 @@ class AMPPreview extends Component { constructor( ...args ) { super( ...args ); this.openPreviewWindow = this.openPreviewWindow.bind( this ); + this.moveButton = this.moveButton.bind( this ); + this.buttonRef = createRef(); } /** @@ -129,6 +139,23 @@ class AMPPreview extends Component { if ( previewLink && ! prevProps.previewLink ) { this.setPreviewWindowLink( previewLink ); } + + this.moveButton(); + } + + /** + * Moves the (non-AMP) 'Preview' button to before this 'Preview AMP' button, if it's not there already. + */ + moveButton() { + const buttonWrapper = get( this, [ 'buttonRef', 'current', 'parentNode' ], false ); + if ( ! buttonWrapper ) { + return; + } + + if ( ! buttonWrapper.previousSibling || ! buttonWrapper.previousSibling.classList.contains( POST_PREVIEW_CLASS ) ) { + const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); + buttonWrapper.parentNode.insertBefore( postPreviewButton, buttonWrapper ); + } } /** @@ -206,18 +233,21 @@ class AMPPreview extends Component { // changes that were autosaved since the post was last published. Otherwise, // just link to the post's URL. const href = previewLink || currentPostLink; + const buttonIcon = ; return ( isEnabled && ! errorMessages.length && ! isStandardMode && ( - + ) ); } diff --git a/assets/src/block-editor/constants.js b/assets/src/block-editor/constants.js index 54fb0670429..c958c79fb9f 100644 --- a/assets/src/block-editor/constants.js +++ b/assets/src/block-editor/constants.js @@ -13,3 +13,6 @@ export const MEDIA_BLOCKS = [ export const DEFAULT_WIDTH = 608; // Max-width in the editor. export const DEFAULT_HEIGHT = 400; + +export const AMP_PREVIEW_BUTTON_WRAPPER_ID = 'amp-wrapper-post-preview'; +export const POST_PREVIEW_CLASS = 'editor-post-preview'; diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index 8321e0d8a9e..51a82ba4e42 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -16,7 +16,7 @@ import { select } from '@wordpress/data'; /** * Internal dependencies */ -import { TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../constants'; +import { AMP_PREVIEW_BUTTON_WRAPPER_ID, TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH, POST_PREVIEW_CLASS } from '../constants'; import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../common/constants'; import { AMPPreview } from '../components'; @@ -942,19 +942,22 @@ export const isAMPEnabled = () => { }; /** - * Replaces the button to preview the post with one that also previews AMP. + * Renders the 'Preview AMP' button in the DOM right after the (non-AMP) 'Preview' button. */ -export const replacePreviewButton = () => { - const postPreviewButton = document.querySelector( '.editor-post-preview' ); - if ( ! postPreviewButton ) { +export const renderPreviewButton = () => { + const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); + if ( ! postPreviewButton || document.getElementById( AMP_PREVIEW_BUTTON_WRAPPER_ID ) ) { return; } const buttonWrapper = document.createElement( 'div' ); - postPreviewButton.parentElement.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); + buttonWrapper.id = AMP_PREVIEW_BUTTON_WRAPPER_ID; render( , buttonWrapper ); + + // Insert this after the (non-AMP) 'Preview' button. + postPreviewButton.parentNode.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); }; diff --git a/assets/src/block-editor/index.js b/assets/src/block-editor/index.js index e1bde672aea..37288209b40 100644 --- a/assets/src/block-editor/index.js +++ b/assets/src/block-editor/index.js @@ -12,7 +12,7 @@ import domReady from '@wordpress/dom-ready'; */ import { withFeaturedImageNotice } from '../common/components'; import { withMediaLibraryNotice } from './components'; -import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, replacePreviewButton } from './helpers'; +import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, renderPreviewButton } from './helpers'; import { getMinimumFeaturedImageDimensions } from '../common/helpers'; import './store'; @@ -80,10 +80,10 @@ blocks.keys().forEach( ( modulePath ) => { } ); /** - * Replace the preview button with one that also previews AMP. + * Render the 'Preview AMP' button, and move it to after the (non-AMP) 'Preview' button. */ if ( isWebsiteEnabled() ) { domReady( () => { - replacePreviewButton(); + renderPreviewButton(); } ); } diff --git a/assets/src/block-editor/plugins/amp-toggle.js b/assets/src/block-editor/plugins/amp-toggle.js index 20730741b54..55fca16b765 100644 --- a/assets/src/block-editor/plugins/amp-toggle.js +++ b/assets/src/block-editor/plugins/amp-toggle.js @@ -2,7 +2,7 @@ /** * External dependencies */ -import { errorMessages, isStandardMode } from 'amp-block-editor-data'; +import { errorMessages } from 'amp-block-editor-data'; import PropTypes from 'prop-types'; /** @@ -19,7 +19,6 @@ import { compose, withInstanceId } from '@wordpress/compose'; * Internal dependencies */ import { isAMPEnabled } from '../helpers'; -import { AMPPreview } from '../components'; /** * Adds an 'Enable AMP' toggle to the block editor 'Status & Visibility' section. @@ -61,13 +60,6 @@ function AMPToggle( { isEnabled, onChange } ) { ) } - { - isEnabled && ! isStandardMode && ( - - - - ) - } ); } From 097ba9594c36a5d44f433829e81bd380dc919ee3 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 30 Sep 2019 16:53:26 -0500 Subject: [PATCH 09/29] Adjust styling of the non-AMP 'Preview' button This allows the (non-AMP) preview button to align with the end of the .edit-post-sidebar. --- assets/css/src/amp-block-editor.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 336f0fe61d3..3699700e425 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -49,4 +49,6 @@ .wp-core-ui .editor-post-preview { border-top-right-radius: 0; border-bottom-right-radius: 0; + padding-left: 10px; + padding-right: 10px; } From 89bc7e8b819545759a51cd31e49ca28dd766871f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 20 Oct 2019 17:24:50 -0500 Subject: [PATCH 10/29] Fix an issue where the 'Preview AMP' button was out of place on a new post On creating a new post and making the first edit, the 'Preview AMP' button appeared out of place. --- assets/src/block-editor/components/amp-preview.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index b1cdc1e3c94..2f8ed5ecbbb 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -154,7 +154,9 @@ class AMPPreview extends Component { if ( ! buttonWrapper.previousSibling || ! buttonWrapper.previousSibling.classList.contains( POST_PREVIEW_CLASS ) ) { const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); - buttonWrapper.parentNode.insertBefore( postPreviewButton, buttonWrapper ); + if ( get( postPreviewButton, 'nextSibling' ) ) { + buttonWrapper.parentNode.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); + } } } From c02a2d57e9a2f111305f1efe576b1bb7e36d76bc Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 21 Oct 2019 18:22:11 -0500 Subject: [PATCH 11/29] Fix failing unit tests There are 2 tests that failed, apparently from dependencies not being added to the expected dependencies. --- tests/php/test-class-amp-meta-box.php | 1 + tests/php/validation/test-class-amp-validation-manager.php | 2 ++ 2 files changed, 3 insertions(+) diff --git a/tests/php/test-class-amp-meta-box.php b/tests/php/test-class-amp-meta-box.php index d087f5c601b..b869a4f297c 100644 --- a/tests/php/test-class-amp-meta-box.php +++ b/tests/php/test-class-amp-meta-box.php @@ -141,6 +141,7 @@ public function test_enqueue_block_assets() { 'wp-components', 'wp-compose', 'wp-data', + 'wp-dom-ready', 'wp-edit-post', 'wp-element', 'wp-hooks', diff --git a/tests/php/validation/test-class-amp-validation-manager.php b/tests/php/validation/test-class-amp-validation-manager.php index 2f6f1dab510..f1ede714e24 100644 --- a/tests/php/validation/test-class-amp-validation-manager.php +++ b/tests/php/validation/test-class-amp-validation-manager.php @@ -1747,7 +1747,9 @@ public function test_enqueue_block_validation() { 'wp-element', 'wp-hooks', 'wp-i18n', + 'wp-nux', 'wp-polyfill', + 'wp-url', ]; $this->assertContains( 'js/amp-block-validation.js', $script->src ); From 1dc42afd778de69a28ed99e29096d1eca6d95aa8 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Mon, 21 Oct 2019 22:15:54 -0500 Subject: [PATCH 12/29] Use the 'amp/block-editor' store for the exported data There's already a method in that for isStandardMode(), and add 2 new methods. This addresses a console error from ampBlockEditor not being defined. --- .../block-editor/components/amp-preview.js | 16 ++++++++++---- assets/src/block-editor/store/selectors.js | 22 +++++++++++++++++++ .../src/block-editor/store/test/selectors.js | 20 +++++++++++++++++ 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 6c5a477c0fd..99b7409a389 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -2,7 +2,6 @@ * External dependencies */ import { get } from 'lodash'; -import { ampSlug, errorMessages, isStandardMode } from 'amp-block-editor-data'; import PropTypes from 'prop-types'; /** @@ -28,7 +27,6 @@ import { POST_PREVIEW_CLASS } from '../constants'; * Writes the message and graphic in the new preview window that was opened. * * Forked from the Core component . - * The errorMessages are imported via wp_localize_script(). * * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L17 * @param {Object} targetDocument The target document. @@ -231,7 +229,7 @@ class AMPPreview extends Component { * Renders the component. */ render() { - const { previewLink, currentPostLink, isEnabled, isSaveable } = this.props; + const { previewLink, currentPostLink, errorMessages, isEnabled, isSaveable, isStandardMode } = this.props; // Link to the `?preview=true` URL if we have it, since this lets us see // changes that were autosaved since the post was last published. Otherwise, @@ -277,6 +275,8 @@ AMPPreview.propTypes = { isEnabled: PropTypes.bool.isRequired, isSaveable: PropTypes.bool.isRequired, savePost: PropTypes.func.isRequired, + errorMessages: PropTypes.array, + isStandardMode: PropTypes.bool, }; export default compose( [ @@ -290,8 +290,14 @@ export default compose( [ getEditedPostPreviewLink, } = select( 'core/editor' ); + const { + getAmpSlug, + getErrorMessages, + isStandardMode, + } = select( 'amp/block-editor' ); + const queryArgs = {}; - queryArgs[ ampSlug ] = 1; + queryArgs[ getAmpSlug() ] = 1; const initialPreviewLink = getEditedPostPreviewLink(); const previewLink = initialPreviewLink ? addQueryArgs( initialPreviewLink, queryArgs ) : undefined; @@ -303,6 +309,8 @@ export default compose( [ isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(), isDraft: [ 'draft', 'auto-draft' ].indexOf( getEditedPostAttribute( 'status' ) ) !== -1, isEnabled: isAMPEnabled(), + errorMessages: getErrorMessages(), + isStandardMode: isStandardMode(), }; } ), withDispatch( ( dispatch ) => ( { diff --git a/assets/src/block-editor/store/selectors.js b/assets/src/block-editor/store/selectors.js index 084cb8d01c6..26973b5015d 100644 --- a/assets/src/block-editor/store/selectors.js +++ b/assets/src/block-editor/store/selectors.js @@ -63,3 +63,25 @@ export function getDefaultStatus( state ) { export function getPossibleStatuses( state ) { return state.possibleStatuses; } + +/** + * Returns the AMP validation error messages. + * + * @param {Object} state The editor state. + * + * @return {string[]} The validation error messages. + */ +export function getErrorMessages( state ) { + return state.errorMessages; +} + +/** + * Returns the AMP slug used in the query var, like 'amp'. + * + * @param {Object} state The editor state. + * + * @return {string} The slug for AMP, like 'amp'. + */ +export function getAmpSlug( state ) { + return state.ampSlug; +} diff --git a/assets/src/block-editor/store/test/selectors.js b/assets/src/block-editor/store/test/selectors.js index 41946f8a170..cbf77df07e2 100644 --- a/assets/src/block-editor/store/test/selectors.js +++ b/assets/src/block-editor/store/test/selectors.js @@ -8,6 +8,8 @@ import { isStoriesEnabled, getDefaultStatus, getPossibleStatuses, + getErrorMessages, + getAmpSlug, } from '../selectors'; describe( 'selectors', () => { @@ -58,4 +60,22 @@ describe( 'selectors', () => { expect( getPossibleStatuses( state ) ).toStrictEqual( [ 'enabled', 'disabled' ] ); } ); } ); + + describe( 'getErrorMessages', () => { + it( 'should return the AMP validation messages', () => { + const expectedMessages = [ 'Disallowed script', 'Disallowed attribute' ]; + const state = { errorMessages: expectedMessages }; + + expect( getErrorMessages( state ) ).toStrictEqual( expectedMessages ); + } ); + } ); + + describe( 'getAmpSlug', () => { + it( 'should return the AMP slug', () => { + const slug = 'amp'; + const state = { ampSlug: slug }; + + expect( getAmpSlug( state ) ).toStrictEqual( slug ); + } ); + } ); } ); From 038b078dbf1c1019455f80787701ff493e8c102f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Tue, 22 Oct 2019 12:58:05 -0500 Subject: [PATCH 13/29] Move a constant into a function, as it's only used there Delete AMP_PREVIEW_BUTTON_WRAPPER_ID, as there's no need to store it in constants.js. Simply define it as a const in renderPreviewButton(), the only function where it's used. --- assets/src/block-editor/constants.js | 1 - assets/src/block-editor/helpers/index.js | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/src/block-editor/constants.js b/assets/src/block-editor/constants.js index c958c79fb9f..f5b8f586c48 100644 --- a/assets/src/block-editor/constants.js +++ b/assets/src/block-editor/constants.js @@ -14,5 +14,4 @@ export const MEDIA_BLOCKS = [ export const DEFAULT_WIDTH = 608; // Max-width in the editor. export const DEFAULT_HEIGHT = 400; -export const AMP_PREVIEW_BUTTON_WRAPPER_ID = 'amp-wrapper-post-preview'; export const POST_PREVIEW_CLASS = 'editor-post-preview'; diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index 72127257d3b..0206bc78681 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -16,7 +16,7 @@ import { select } from '@wordpress/data'; /** * Internal dependencies */ -import { AMP_PREVIEW_BUTTON_WRAPPER_ID, TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH, POST_PREVIEW_CLASS } from '../constants'; +import { TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH, POST_PREVIEW_CLASS } from '../constants'; import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../common/constants'; import { AMPPreview } from '../components'; @@ -952,13 +952,14 @@ export const isAMPEnabled = () => { * Renders the 'Preview AMP' button in the DOM right after the (non-AMP) 'Preview' button. */ export const renderPreviewButton = () => { + const ampPreviewButtonWrapperId = 'amp-wrapper-post-preview'; const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); - if ( ! postPreviewButton || document.getElementById( AMP_PREVIEW_BUTTON_WRAPPER_ID ) ) { + if ( ! postPreviewButton || document.getElementById( ampPreviewButtonWrapperId ) ) { return; } const buttonWrapper = document.createElement( 'div' ); - buttonWrapper.id = AMP_PREVIEW_BUTTON_WRAPPER_ID; + buttonWrapper.id = ampPreviewButtonWrapperId; render( , From db963ac6dcacaa83f352b8cba00b0c3d690c014f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Tue, 22 Oct 2019 21:56:12 -0500 Subject: [PATCH 14/29] Fix an issue with the icon display in WP 5.3 Using that version of Core, the icons were too small. --- assets/images/amp-black-icon.svg | 3 +-- assets/src/block-editor/components/amp-preview.js | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/assets/images/amp-black-icon.svg b/assets/images/amp-black-icon.svg index 288237e3489..98bc238c57b 100644 --- a/assets/images/amp-black-icon.svg +++ b/assets/images/amp-black-icon.svg @@ -1,5 +1,4 @@ - - + diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 99b7409a389..663003874a4 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -35,8 +35,7 @@ function writeInterstitialMessage( targetDocument ) { let markup = renderToString(

{ __( 'Generating AMP preview…', 'amp' ) } @@ -235,12 +234,11 @@ class AMPPreview extends Component { // changes that were autosaved since the post was last published. Otherwise, // just link to the post's URL. const href = previewLink || currentPostLink; - const buttonIcon = ; return ( isEnabled && ! errorMessages.length && ! isStandardMode && ( Date: Sat, 26 Oct 2019 14:02:23 -0500 Subject: [PATCH 15/29] Add an xmlns property to the so the build succeeds Before, there was a console error from an property. --- assets/css/src/amp-block-editor.css | 2 +- assets/images/amp-black-icon.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 3699700e425..bea6fec1c80 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -29,7 +29,7 @@ /* AMP preview button */ .wp-core-ui .amp-editor-post-preview { - height: 33px; + height: 34px; padding-left: 6px; padding-right: 6px; border-top-left-radius: 0; diff --git a/assets/images/amp-black-icon.svg b/assets/images/amp-black-icon.svg index 98bc238c57b..3d3a0003bfb 100644 --- a/assets/images/amp-black-icon.svg +++ b/assets/images/amp-black-icon.svg @@ -1,4 +1,4 @@ - + From 32057c7e866f5b01dee6ecb379593c55e066f91f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 15:24:22 -0500 Subject: [PATCH 16/29] Add a unit test for the helper renderPreviewButton Add a param to that, so that it's easier to test. It'll accept the component that it renders as a parameter. --- assets/src/block-editor/helpers/index.js | 7 ++-- .../helpers/test/renderPreviewButton.js | 34 +++++++++++++++++++ assets/src/block-editor/index.js | 4 +-- 3 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 assets/src/block-editor/helpers/test/renderPreviewButton.js diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index 0206bc78681..c239685c4c4 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -18,7 +18,6 @@ import { select } from '@wordpress/data'; */ import { TEXT_BLOCKS, MEDIA_BLOCKS, DEFAULT_HEIGHT, DEFAULT_WIDTH, POST_PREVIEW_CLASS } from '../constants'; import { MIN_FONT_SIZE, MAX_FONT_SIZE } from '../../common/constants'; -import { AMPPreview } from '../components'; const ampLayoutOptions = [ { @@ -950,8 +949,10 @@ export const isAMPEnabled = () => { /** * Renders the 'Preview AMP' button in the DOM right after the (non-AMP) 'Preview' button. + * + * @param {Object} PreviewComponent The 'Preview AMP' component to render into the DOM. */ -export const renderPreviewButton = () => { +export const renderPreviewButton = ( PreviewComponent ) => { const ampPreviewButtonWrapperId = 'amp-wrapper-post-preview'; const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); if ( ! postPreviewButton || document.getElementById( ampPreviewButtonWrapperId ) ) { @@ -962,7 +963,7 @@ export const renderPreviewButton = () => { buttonWrapper.id = ampPreviewButtonWrapperId; render( - , + , buttonWrapper ); diff --git a/assets/src/block-editor/helpers/test/renderPreviewButton.js b/assets/src/block-editor/helpers/test/renderPreviewButton.js new file mode 100644 index 00000000000..66233dd5e89 --- /dev/null +++ b/assets/src/block-editor/helpers/test/renderPreviewButton.js @@ -0,0 +1,34 @@ +/** + * Internal dependencies + */ +import { renderPreviewButton } from '../'; +import { POST_PREVIEW_CLASS } from '../../constants'; + +const ampPreviewButtonWrapperId = '#amp-wrapper-post-preview'; +const mockPreviewButtonClass = 'mock-preview-class'; +const MockPreviewButton = () => { + return ; +}; + +describe( 'renderPreviewButton', () => { + it( 'should not render the preview component into the DOM if the preview button is not present', () => { + renderPreviewButton( MockPreviewButton ); + expect( document.querySelectorAll( ampPreviewButtonWrapperId ) ).toHaveLength( 0 ); + } ); + + it( 'should render the preview component into the DOM now that the preview button exists', () => { + renderPreviewButton(); + const previewButton = document.createElement( 'div' ); + previewButton.setAttribute( 'class', POST_PREVIEW_CLASS ); + const previewButtonSibling = document.createElement( 'div' ); + + const wrapper = document.createElement( 'div' ); + document.body.appendChild( wrapper ); + wrapper.appendChild( previewButton ); + wrapper.appendChild( previewButtonSibling ); + + renderPreviewButton( MockPreviewButton ); + expect( document.querySelectorAll( ampPreviewButtonWrapperId ) ).toHaveLength( 1 ); + expect( document.getElementsByClassName( mockPreviewButtonClass ) ).toHaveLength( 1 ); + } ); +} ); diff --git a/assets/src/block-editor/index.js b/assets/src/block-editor/index.js index 172642cdc31..fd78a5c48b8 100644 --- a/assets/src/block-editor/index.js +++ b/assets/src/block-editor/index.js @@ -12,7 +12,7 @@ import domReady from '@wordpress/dom-ready'; */ import { withFeaturedImageNotice } from '../common/components'; import { getMinimumFeaturedImageDimensions } from '../common/helpers'; -import { withMediaLibraryNotice } from './components'; +import { withMediaLibraryNotice, AMPPreview } from './components'; import { addAMPAttributes, addAMPExtraProps, filterBlocksEdit, filterBlocksSave, renderPreviewButton } from './helpers'; import './store'; @@ -84,6 +84,6 @@ blocks.keys().forEach( ( modulePath ) => { */ if ( isWebsiteEnabled() ) { domReady( () => { - renderPreviewButton(); + renderPreviewButton( AMPPreview ); } ); } From c67f5b54678af42ee75821c2ec16a73434f1ed17 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 15:30:35 -0500 Subject: [PATCH 17/29] Remove extra *,and use a simply one-line comment This is just and if block, and it's probably not necessary to have **. --- assets/src/block-editor/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/src/block-editor/index.js b/assets/src/block-editor/index.js index fd78a5c48b8..e0f7f26f606 100644 --- a/assets/src/block-editor/index.js +++ b/assets/src/block-editor/index.js @@ -79,9 +79,7 @@ blocks.keys().forEach( ( modulePath ) => { } } ); -/** - * Render the 'Preview AMP' button, and move it to after the (non-AMP) 'Preview' button. - */ +// Render the 'Preview AMP' button, and move it to after the (non-AMP) 'Preview' button. if ( isWebsiteEnabled() ) { domReady( () => { renderPreviewButton( AMPPreview ); From 6631f4462594b00bbb77862baf1b68ed1093128d Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 15:38:20 -0500 Subject: [PATCH 18/29] Address failed unit tests by removing 2 expected dependencies Still, these might be needed, so I'll have to look at this more. --- tests/php/validation/test-class-amp-validation-manager.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/php/validation/test-class-amp-validation-manager.php b/tests/php/validation/test-class-amp-validation-manager.php index f1ede714e24..2f6f1dab510 100644 --- a/tests/php/validation/test-class-amp-validation-manager.php +++ b/tests/php/validation/test-class-amp-validation-manager.php @@ -1747,9 +1747,7 @@ public function test_enqueue_block_validation() { 'wp-element', 'wp-hooks', 'wp-i18n', - 'wp-nux', 'wp-polyfill', - 'wp-url', ]; $this->assertContains( 'js/amp-block-validation.js', $script->src ); From 885d2f24caece1de1d6d25694a0a6c784a903a3c Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 18:30:56 -0500 Subject: [PATCH 19/29] Remove styling for the (non-AMP) Preview button This was dependent on whether the AMP Preview button was present, so it should be good to not need this. --- assets/css/src/amp-block-editor.css | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index bea6fec1c80..6b5aaa3bf46 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -22,7 +22,7 @@ /* AMP preview button wrapper */ .wp-core-ui #amp-wrapper-post-preview { border: 0; - margin-left: -4px; + margin-left: -6px; padding: 0; position: relative; } @@ -41,14 +41,3 @@ height: 15px; margin: 0; } - -/* - * Remove right border radius on the (non-AMP) 'Preview' button, as it'll be next to the AMP button. - * @todo: only apply this if the 'Preview AMP' button displays. - */ -.wp-core-ui .editor-post-preview { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - padding-left: 10px; - padding-right: 10px; -} From e055c4da7914b5faedfd2f476aee46d6365bf2ed Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 19:01:35 -0500 Subject: [PATCH 20/29] Ensure the height of the 'Preview AMP' button matches the non-AMP preview This is needed for WP before 5.3, or 5.2.4 with Gutenberg active. Without this fix, the 'Preview AMP' button can be 1px taller than the non-AMP preview button. --- assets/css/src/amp-block-editor.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 6b5aaa3bf46..0e14a265031 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -41,3 +41,11 @@ height: 15px; margin: 0; } + +/* + * This is the height of the non-AMP preview button in WordPress 5.3, + * though the height before was 33px, so force this to 34px so it's the same as the 'Preview AMP' button. + */ +.wp-core-ui .edit-post-header .editor-post-preview { + height: 34px; +} From 463d75bda1d3c540f7b2dd33e7db332ce01b0150 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 19:04:37 -0500 Subject: [PATCH 21/29] Ensure the height of the 'Preview AMP' button matches the non-AMP preview This is needed for WP before 5.3, or 5.2.4 with Gutenberg active. Without this fix, the 'Preview AMP' button can be 1px taller than the non-AMP preview button. --- assets/css/src/amp-block-editor.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 0e14a265031..2d6cd3a6db4 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -43,8 +43,9 @@ } /* - * This is the height of the non-AMP preview button in WordPress 5.3, - * though the height before was 33px, so force this to 34px so it's the same as the 'Preview AMP' button. + * Ensure the non-AMP preview button is the same height as the AMP preview one. + * 34px is the height of the non-AMP preview button in WordPress 5.3, though the height before was 33px. + * Without this, the non-AMP AMP preview button will be 1 px too short before WP 5.3. */ .wp-core-ui .edit-post-header .editor-post-preview { height: 34px; From 32e3e31e0124a507f35662bcf3cacb7e79020d42 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sat, 26 Oct 2019 19:25:27 -0500 Subject: [PATCH 22/29] Remove an extra call in a unit test to renderPreviewButton() That's only needed at the end of the test. Also, change a tipId to have 'amp' instead of 'core'. --- assets/src/block-editor/components/amp-preview.js | 4 ++-- assets/src/block-editor/helpers/test/renderPreviewButton.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 663003874a4..216c04124d3 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -254,8 +254,8 @@ class AMPPreview extends Component { __( '(opens in a new tab)', 'amp' ) } - - { __( 'Click “Preview” to load a preview of this page in AMP, so you can make sure you’re happy with your blocks.', 'amp' ) } + + { __( 'Click “Preview” to load a preview of this page in AMP, so you can make sure you are happy with your blocks.', 'amp' ) } ) diff --git a/assets/src/block-editor/helpers/test/renderPreviewButton.js b/assets/src/block-editor/helpers/test/renderPreviewButton.js index 66233dd5e89..54a763b041d 100644 --- a/assets/src/block-editor/helpers/test/renderPreviewButton.js +++ b/assets/src/block-editor/helpers/test/renderPreviewButton.js @@ -17,7 +17,6 @@ describe( 'renderPreviewButton', () => { } ); it( 'should render the preview component into the DOM now that the preview button exists', () => { - renderPreviewButton(); const previewButton = document.createElement( 'div' ); previewButton.setAttribute( 'class', POST_PREVIEW_CLASS ); const previewButtonSibling = document.createElement( 'div' ); From 1fc8bb6d7a36e221759fc493cc3f867a487fbf65 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 27 Oct 2019 15:34:19 -0600 Subject: [PATCH 23/29] Remove extra style rules for 'Preview AMP' button It looks like these aren't needed. Also, clarify a comment. --- assets/css/src/amp-block-editor.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/css/src/amp-block-editor.css b/assets/css/src/amp-block-editor.css index 2d6cd3a6db4..9400ac094dc 100644 --- a/assets/css/src/amp-block-editor.css +++ b/assets/css/src/amp-block-editor.css @@ -21,10 +21,7 @@ /* AMP preview button wrapper */ .wp-core-ui #amp-wrapper-post-preview { - border: 0; margin-left: -6px; - padding: 0; - position: relative; } /* AMP preview button */ @@ -45,7 +42,7 @@ /* * Ensure the non-AMP preview button is the same height as the AMP preview one. * 34px is the height of the non-AMP preview button in WordPress 5.3, though the height before was 33px. - * Without this, the non-AMP AMP preview button will be 1 px too short before WP 5.3. + * Without this style rule, the non-AMP AMP preview button will be 1 px shorter than the AMP one, before WP 5.3. */ .wp-core-ui .edit-post-header .editor-post-preview { height: 34px; From cc2a3072d3e617e0534e0358af370c66ba6d3b6f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 27 Oct 2019 15:55:35 -0600 Subject: [PATCH 24/29] Exit if the non-AMP 'Preview' button has no nextSibling This inserts the AMP preview button before that nextSibling, so it's probably best to exit if it doesn't exist. --- assets/src/block-editor/components/amp-preview.js | 2 +- assets/src/block-editor/helpers/index.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 216c04124d3..31a1106990c 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -125,7 +125,7 @@ class AMPPreview extends Component { } /** - * Called after the component updated. + * Called after the component is updated. * * @param {Object} prevProps The previous props. */ diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index c239685c4c4..4c66e58b3ee 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -948,14 +948,16 @@ export const isAMPEnabled = () => { }; /** - * Renders the 'Preview AMP' button in the DOM right after the (non-AMP) 'Preview' button. + * Renders the 'Preview AMP' button in the DOM right after the non-AMP 'Preview' button. * * @param {Object} PreviewComponent The 'Preview AMP' component to render into the DOM. */ export const renderPreviewButton = ( PreviewComponent ) => { - const ampPreviewButtonWrapperId = 'amp-wrapper-post-preview'; const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); - if ( ! postPreviewButton || document.getElementById( ampPreviewButtonWrapperId ) ) { + const ampPreviewButtonWrapperId = 'amp-wrapper-post-preview'; + + // Exit if the non-AMP 'Preview' button doesn't exist, or if the AMP preview button already exists. + if ( ! postPreviewButton || ! postPreviewButton.nextSibling || document.getElementById( ampPreviewButtonWrapperId ) ) { return; } @@ -967,6 +969,6 @@ export const renderPreviewButton = ( PreviewComponent ) => { buttonWrapper ); - // Insert this after the (non-AMP) 'Preview' button. + // Insert the new AMP preview button after the non-AMP 'Preview' button. postPreviewButton.parentNode.insertBefore( buttonWrapper, postPreviewButton.nextSibling ); }; From 286ff794786087865e75adf91279b07fff92e2a3 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 27 Oct 2019 16:01:02 -0600 Subject: [PATCH 25/29] Remove a check for whether the component exists already The function runs on domReady, so it should only run 1 time, and the component shouldn't be rendered into the DOM when it runs. --- assets/src/block-editor/helpers/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index 4c66e58b3ee..240fcecef03 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -956,8 +956,8 @@ export const renderPreviewButton = ( PreviewComponent ) => { const postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` ); const ampPreviewButtonWrapperId = 'amp-wrapper-post-preview'; - // Exit if the non-AMP 'Preview' button doesn't exist, or if the AMP preview button already exists. - if ( ! postPreviewButton || ! postPreviewButton.nextSibling || document.getElementById( ampPreviewButtonWrapperId ) ) { + // Exit if the non-AMP 'Preview' button doesn't exist. + if ( ! postPreviewButton || ! postPreviewButton.nextSibling ) { return; } From 05994f04b9f0789fc211b62fa354ec0447961c3b Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Sun, 27 Oct 2019 16:08:22 -0600 Subject: [PATCH 26/29] Change the order of the .bind calls in the constructor The moveButton function comes before openPreviewWindow in the class, so move it above it. --- assets/src/block-editor/components/amp-preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 31a1106990c..fce7ff0b0f7 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -119,8 +119,8 @@ class AMPPreview extends Component { */ constructor( ...args ) { super( ...args ); - this.openPreviewWindow = this.openPreviewWindow.bind( this ); this.moveButton = this.moveButton.bind( this ); + this.openPreviewWindow = this.openPreviewWindow.bind( this ); this.buttonRef = createRef(); } From bc1b7278fe830fea8e14afbce97449b95670d011 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 8 Nov 2019 16:45:32 -0600 Subject: [PATCH 27/29] Address ESLint issues There was a failed Travis build, with ESLint issues for the lack of a trailing comma. --- assets/src/block-editor/components/amp-preview.js | 2 +- assets/src/block-editor/helpers/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index fce7ff0b0f7..a93d6b386d6 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -40,7 +40,7 @@ function writeInterstitialMessage( targetDocument ) {

{ __( 'Generating AMP preview…', 'amp' ) }

-
+ , ); markup += ` diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index c2e0ab5c1c1..44351351866 100644 --- a/assets/src/block-editor/helpers/index.js +++ b/assets/src/block-editor/helpers/index.js @@ -966,7 +966,7 @@ export const renderPreviewButton = ( PreviewComponent ) => { render( , - buttonWrapper + buttonWrapper, ); // Insert the new AMP preview button after the non-AMP 'Preview' button. From a2e18e7a13c8e0383da127e3f9b80b7739619ebb Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 8 Nov 2019 16:49:16 -0600 Subject: [PATCH 28/29] Fix an issue where clicking the non-AMP preview button reloads the AMP preview As Pascal mentioned, on opening an AMP Preview, clicking the non-AMP Preview button reloads the AMP preview. And vice versa. --- assets/src/block-editor/components/amp-preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index a93d6b386d6..0ec89b48789 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -178,7 +178,7 @@ class AMPPreview extends Component { */ getWindowTarget() { const { postId } = this.props; - return `wp-preview-${ postId }`; + return `amp-preview-${ postId }`; } /** From 0b1a5d30a4738e09b508e97b7baa323bd363a894 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 10 Nov 2019 21:52:28 -0800 Subject: [PATCH 29/29] Improve specificity of JS doc --- assets/src/block-editor/components/amp-preview.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/src/block-editor/components/amp-preview.js b/assets/src/block-editor/components/amp-preview.js index 0ec89b48789..e8dfe15878e 100644 --- a/assets/src/block-editor/components/amp-preview.js +++ b/assets/src/block-editor/components/amp-preview.js @@ -28,8 +28,8 @@ import { POST_PREVIEW_CLASS } from '../constants'; * * Forked from the Core component . * - * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L17 - * @param {Object} targetDocument The target document. + * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L17-L93 + * @param {Document} targetDocument The target document. */ function writeInterstitialMessage( targetDocument ) { let markup = renderToString( @@ -109,7 +109,7 @@ function writeInterstitialMessage( targetDocument ) { * Rendered into the DOM with renderPreviewButton() in helpers/index.js. * This also moves the (non-AMP) 'Preview' button to before this, if it's not already there. * - * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js + * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L95-L200 */ class AMPPreview extends Component { /** @@ -184,7 +184,7 @@ class AMPPreview extends Component { /** * Opens the preview window. * - * @param {Object} event The DOM event. + * @param {Event} event The DOM event. */ openPreviewWindow( event ) { // Our Preview button has its 'href' and 'target' set correctly for a11y