Update Gutenberg packages after v12.5.0 release

assets/src/admin/amp-plugin-install.js

@@ -1,15 +1,15 @@
-/**
- * WordPress dependencies
- */
-import domReady from '@wordpress/dom-ready';
-import { __ } from '@wordpress/i18n';
-
 /**
  * External dependencies
  */
 import { AMP_PLUGINS, AMP_COMPATIBLE } from 'amp-plugins'; // From WP inline script.
 import { debounce } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { __ } from '@wordpress/i18n';
+
 const ampPluginInstall = {
 
 	/**

assets/src/admin/amp-theme-install.js

@@ -1,13 +1,13 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import domReady from '@wordpress/dom-ready';
+import { AMP_COMPATIBLE } from 'amp-themes'; // From WP inline script.
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { AMP_COMPATIBLE } from 'amp-themes'; // From WP inline script.
+import { __ } from '@wordpress/i18n';
+import domReady from '@wordpress/dom-ready';
 
 /**
  * Internal dependencies

assets/src/admin/site-scan-notice/notice.js

@@ -1,9 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useContext, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
 /**
  * External dependencies
  */
@@ -12,6 +6,12 @@ import {
 	SETTINGS_LINK,
 } from 'amp-site-scan-notice'; // From WP inline script.
 
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */

assets/src/admin/site-scan-notice/plugins-with-amp-incompatibility.js

@@ -1,13 +1,13 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useContext } from '@wordpress/element';
-import { _n, sprintf } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import PropTypes from 'prop-types';
+import { useContext } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies

assets/src/admin/theme-install/view/theme.js

@@ -1,12 +1,12 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { AMP_THEMES, AMP_COMPATIBLE, NONE_WPORG_THEMES } from 'amp-themes'; // From WP inline script.
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { AMP_THEMES, AMP_COMPATIBLE, NONE_WPORG_THEMES } from 'amp-themes'; // From WP inline script.
+import { __, sprintf } from '@wordpress/i18n';
 
 const wpThemeView = wp.themes.view.Theme;
 

assets/src/block-editor/constants.js

@@ -5,5 +5,3 @@ export const TEXT_BLOCKS = [
 	'core/quote',
 	'core/subhead',
 ];
-
-export const POST_PREVIEW_CLASS = 'editor-post-preview';

assets/src/block-editor/plugins/wrapped-amp-preview-button.js

@@ -1,92 +1,69 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Component, createPortal } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { ifCondition, compose, pure } from '@wordpress/compose';
+import { createPortal, useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { POST_PREVIEW_CLASS } from '../constants';
 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.
  */
-class WrappedAmpPreviewButton extends Component {
-	/**
-	 * Constructs the class.
-	 *
-	 * @param {*} args Constructor arguments.
-	 */
-	constructor( ...args ) {
-		super( ...args );
-
-		this.root = document.createElement( 'div' );
-		this.root.className = 'amp-wrapper-post-preview';
-
-		this.postPreviewButton = document.querySelector( `.${ POST_PREVIEW_CLASS }` );
-	}
-
-	/**
-	 * Invoked immediately after a component is mounted (inserted into the tree).
-	 */
-	componentDidMount() {
-		if ( ! this.postPreviewButton ) {
-			return;
-		}
-
-		// Insert the AMP preview button immediately after the post preview button.
-		this.postPreviewButton.parentNode.insertBefore( this.root, this.postPreviewButton.nextSibling );
-	}
-
-	/**
-	 * Invoked immediately before a component is unmounted and destroyed.
-	 */
-	componentWillUnmount() {
-		if ( ! this.postPreviewButton ) {
-			return;
+function WrappedAmpPreviewButton() {
+	const root = useRef( null );
+	const referenceNode = useRef( null );
+
+	const isViewable = useSelect(
+		( select ) => select( 'core' ).getPostType( select( 'core/editor' ).getEditedPostAttribute( 'type' ) )?.viewable,
+		[],
+	);
+
+	useEffect( () => {
+		if ( ! root.current && ! referenceNode.current ) {
+			// At first, we try finding the post preview button that is visible only on small screens.
+			// If found, we will use its next sibling so that `insertBefore` gets us to the exact location
+			// we are looking for.
+			referenceNode.current = document.querySelector( '.editor-post-preview' )?.nextSibling;
+
+			// Since the mobile post preview button is rendered with a delay, we are using the post publish/update
+			// button as a fallback. Because it is rendered early, our AMP preview button will be visible immediately.
+			if ( ! referenceNode.current ) {
+				referenceNode.current = document.querySelector( '.editor-post-publish-button' );
+			}
+
+			if ( referenceNode.current ) {
+				root.current = document.createElement( 'div' );
+				root.current.className = 'amp-wrapper-post-preview';
+				referenceNode.current.parentNode.insertBefore( root.current, referenceNode.current );
+			}
 		}
 
-		this.postPreviewButton.parentNode.removeChild( this.root );
+		return () => {
+			if ( referenceNode.current && root.current ) {
+				referenceNode.current.parentNode.removeChild( root.current );
+				root.current = null;
+				referenceNode.current = null;
+			}
+		};
+	// We use `isViewable` as a dependency in order to reposition the preview button once the block editor is fully loaded.
+	}, [ isViewable ] );
+
+	// It is unlikely that AMP would be enabled for a non-viewable post type. This is why the Preview button will
+	// always be displayed initially (when `isViewable` is undefined), preventing horizontal layout shift.
+	// Once the `isViewable` value is defined (which is after the initial block editor load) and it is `false`,
+	// the Preview button will be hidden causing a minor layout shift.
+	if ( ! root.current || isViewable === false ) {
+		return null;
 	}
 
-	/**
-	 * Renders the component.
-	 */
-	render() {
-		if ( ! this.postPreviewButton ) {
-			return null;
-		}
-
-		return createPortal( <AmpPreviewButton />, this.root );
-	}
+	return createPortal( <AmpPreviewButton />, root.current );
 }
 
 export const name = 'amp-preview-button-wrapper';
 
 export const onlyPaired = true;
 
-export const render = pure(
-	compose( [
-		withSelect( ( select ) => {
-			const { getPostType } = select( 'core' );
-			const { getEditedPostAttribute } = select( 'core/editor' );
-
-			const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-			return {
-				isViewable: get( postType, [ 'viewable' ], false ),
-			};
-		} ),
-		// This HOC creator renders the component only when the condition is true. At that point the 'Post' preview
-		// button should have already been rendered (since it also relies on the same condition for rendering).
-		ifCondition( ( { isViewable } ) => isViewable ),
-	] )( WrappedAmpPreviewButton ),
-);
+export const render = WrappedAmpPreviewButton;