diff --git a/assets/src/block-editor/components/amp-preview-button.js b/assets/src/block-editor/components/preview-menu-item.js similarity index 89% rename from assets/src/block-editor/components/amp-preview-button.js rename to assets/src/block-editor/components/preview-menu-item.js index e2295f2e1e6..e147c100ca6 100644 --- a/assets/src/block-editor/components/amp-preview-button.js +++ b/assets/src/block-editor/components/preview-menu-item.js @@ -6,7 +6,8 @@ import PropTypes from 'prop-types'; /** * WordPress dependencies */ -import { Button, Icon, VisuallyHidden } from '@wordpress/components'; +import { PluginPreviewMenuItem } from '@wordpress/editor'; +import { Icon, VisuallyHidden } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; import { Component, createRef, renderToString } from '@wordpress/element'; @@ -16,7 +17,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { isAMPEnabled } from '../helpers'; -import { AMPFilledIcon, AMPBlackIcon } from '../../icons'; +import { AMPBlackIcon } from '../../icons'; /** * Writes the message and graphic in the new preview window that was opened. @@ -95,11 +96,10 @@ function writeInterstitialMessage(targetDocument) { } /** - * A 'Preview AMP' button, forked from the Core 'Preview' button: . + * A 'Preview AMP' Menu Item. * - * @see https://github.com/WordPress/gutenberg/blob/95e769df1f82f6b0ef587d81af65dd2f48cd1c38/packages/editor/src/components/post-preview-button/index.js#L95-L200 */ -class AmpPreviewButton extends Component { +class AmpPreviewMenuItem extends Component { /** * Constructs the class. * @@ -108,7 +108,7 @@ class AmpPreviewButton extends Component { constructor(...args) { super(...args); - this.buttonRef = createRef(); + this.itemRef = createRef(); this.openPreviewWindow = this.openPreviewWindow.bind(this); } @@ -139,8 +139,8 @@ class AmpPreviewButton extends Component { if (previewWindow && !previewWindow.closed) { previewWindow.location = url; - if (this.buttonRef.current) { - this.buttonRef.current.focus(); + if (this.itemRef.current) { + this.itemRef.current.focus(); } } } @@ -159,7 +159,7 @@ class AmpPreviewButton extends Component { * @param {Event} event The DOM event. */ openPreviewWindow(event) { - // Our Preview button has its 'href' and 'target' set correctly for a11y + // Our Preview Menu Item 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. @@ -208,7 +208,6 @@ class AmpPreviewButton extends Component { currentPostLink, errorMessages, isEnabled, - isSaveable, isStandardMode, } = this.props; @@ -217,33 +216,37 @@ class AmpPreviewButton extends Component { // just link to the post's URL. const href = previewLink || currentPostLink; + if (typeof PluginPreviewMenuItem !== 'function') { + return null; + } + return ( isEnabled && !errorMessages.length && !isStandardMode && ( - + ) ); } } -AmpPreviewButton.propTypes = { +AmpPreviewMenuItem.propTypes = { autosave: PropTypes.func.isRequired, currentPostLink: PropTypes.string.isRequired, postId: PropTypes.number.isRequired, @@ -251,7 +254,6 @@ AmpPreviewButton.propTypes = { isAutosaveable: PropTypes.bool.isRequired, isDraft: PropTypes.bool.isRequired, isEnabled: PropTypes.bool.isRequired, - isSaveable: PropTypes.bool.isRequired, savePost: PropTypes.func.isRequired, errorMessages: PropTypes.array, isStandardMode: PropTypes.bool, @@ -308,4 +310,4 @@ export default compose([ autosave: dispatch('core/editor').autosave, savePost: dispatch('core/editor').savePost, })), -])(AmpPreviewButton); +])(AmpPreviewMenuItem); diff --git a/assets/src/block-editor/plugins/amp-preview-item.js b/assets/src/block-editor/plugins/amp-preview-item.js new file mode 100644 index 00000000000..717c0b7e1dc --- /dev/null +++ b/assets/src/block-editor/plugins/amp-preview-item.js @@ -0,0 +1,15 @@ +/** + * Internal dependencies + */ +import { AMPFilledIcon } from '../../icons'; +import AmpPreviewMenuItem from '../components/preview-menu-item'; + +export const name = 'amp-preview-menu-item'; + +export const icon = ( + +); + +export const onlyPaired = true; + +export const render = AmpPreviewMenuItem; diff --git a/assets/src/block-editor/plugins/wrapped-amp-preview-button.js b/assets/src/block-editor/plugins/wrapped-amp-preview-button.js deleted file mode 100644 index 68bc0065ba1..00000000000 --- a/assets/src/block-editor/plugins/wrapped-amp-preview-button.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * WordPress dependencies - */ -import { createPortal, useLayoutEffect, useRef } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import AmpPreviewButton from '../components/amp-preview-button'; - -/** - * A wrapper for the AMP preview button that renders it immediately after the 'Post' preview button, when present. - */ -function WrappedAmpPreviewButton() { - const root = useRef(null); - const referenceNode = useRef(null); - - const { isEditedPostSaveable, isViewable } = useSelect( - (select) => ({ - isEditedPostSaveable: select('core/editor').isEditedPostSaveable(), - isViewable: select('core').getPostType( - select('core/editor').getEditedPostAttribute('type') - )?.viewable, - }), - [] - ); - - useLayoutEffect(() => { - // The AMP preview button should always be inserted right before the publish/update button. - referenceNode.current = document.querySelector( - '.editor-post-publish-button__button' - ); - - if (referenceNode.current?.parentNode) { - if (!root.current) { - root.current = document.createElement('div'); - root.current.className = 'amp-wrapper-post-preview'; - } - - referenceNode.current.parentNode.insertBefore( - root.current, - referenceNode.current - ); - } - - return () => { - if (referenceNode.current && root.current) { - referenceNode.current.parentNode.removeChild(root.current); - referenceNode.current = null; - } - }; - // AMP Preview button should be "refreshed" whenever settings in the post editor header are re-rendered. - // The following properties may indicate a change in the toolbar layout: - // - Viewable property gets defined once the toolbar has been rendered. - // - When saveable property changes, the toolbar is reshuffled heavily. - }, [isEditedPostSaveable, isViewable]); - - return root.current - ? createPortal(, root.current) - : null; -} - -export const name = 'amp-preview-button-wrapper'; - -export const onlyPaired = true; - -export const render = WrappedAmpPreviewButton; diff --git a/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap b/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap index 97d42563551..30b98416830 100644 --- a/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap +++ b/assets/src/components/amp-setting-toggle/test/__snapshots__/index.js.snap @@ -5,13 +5,13 @@ exports[`AMPSettingToggle matches snapshots 1`] = ` className="amp-setting-toggle" >
@@ -33,7 +33,7 @@ exports[`AMPSettingToggle matches snapshots 1`] = ` />