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/plugins/wrapped-amp-preview-button.js

@@ -1,14 +1,8 @@
-/**
- * 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
@@ -19,74 +13,43 @@ 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;
+function WrappedAmpPreviewButton() {
+	const root = useRef();
+	const postPreviewButton = useRef();
+
+	const isViewable = useSelect(
+		( select ) => select( 'core' ).getPostType( select( 'core/editor' ).getEditedPostAttribute( 'type' ) )?.viewable,
+		[],
+	);
+
+	useEffect( () => {
+		if ( isViewable && ! root.current && ! postPreviewButton.current ) {
+			postPreviewButton.current = document.querySelector( `.${ POST_PREVIEW_CLASS }` );
+
+			// Insert the AMP preview button immediately after the post preview button.
+			if ( postPreviewButton.current ) {
+				root.current = document.createElement( 'div' );
+				root.current.className = 'amp-wrapper-post-preview';
+				postPreviewButton.current.parentNode.insertBefore( root.current, postPreviewButton.current.nextSibling );
+			}
 		}
 
-		// Insert the AMP preview button immediately after the post preview button.
-		this.postPreviewButton.parentNode.insertBefore( this.root, this.postPreviewButton.nextSibling );
-	}
+		return () => {
+			if ( postPreviewButton.current && root.current ) {
+				postPreviewButton.current.parentNode.removeChild( root.current );
+			}
+		};
+	}, [ isViewable ] );
 
-	/**
-	 * Invoked immediately before a component is unmounted and destroyed.
-	 */
-	componentWillUnmount() {
-		if ( ! this.postPreviewButton ) {
-			return;
-		}
-
-		this.postPreviewButton.parentNode.removeChild( this.root );
+	if ( ! isViewable || ! root.current ) {
+		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;