Merge pull request #4397 from ampproject/fix/amp-button-placement

Improve AMP preview button in WP 5.4 and with Gutenberg

assets/css/src/amp-block-editor.css

@@ -6,20 +6,22 @@
 /* AMP preview button wrapper */
 .wp-core-ui #amp-wrapper-post-preview {
 	margin-left: -6px;
+	margin-right: 6px;
 }
 
 /* AMP preview button */
 .wp-core-ui .amp-editor-post-preview {
 	height: 34px;
-	padding-left: 6px;
-	padding-right: 6px;
+	padding: 6px 12px;
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
+	justify-content: center;
+	align-items: center;
 }
 
 .wp-core-ui .amp-editor-post-preview svg {
-	width: 15px;
-	height: 15px;
+	width: 18px;
+	height: 18px;
 	margin: 0;
 }
 

assets/src/block-editor/components/amp-preview.js

@@ -8,10 +8,9 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { Component, createRef, renderToString } from '@wordpress/element';
-import { Icon, IconButton } from '@wordpress/components';
+import { Button, Icon, Tooltip } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { DotTip } from '@wordpress/nux';
 import { compose } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -237,27 +236,25 @@ class AMPPreview extends Component {
 
 		return (
 			isEnabled && ! errorMessages.length && ! isStandardMode && (
-				<IconButton
-					icon={ ampFilledIcon( { viewBox: '0 0 62 62' } ) }
-					isLarge
-					className="amp-editor-post-preview"
-					href={ href }
-					label={ __( 'Preview AMP', 'amp' ) }
-					target={ this.getWindowTarget() }
-					disabled={ ! isSaveable }
-					onClick={ this.openPreviewWindow }
-					ref={ this.buttonRef }
-				>
-					<span className="screen-reader-text">
-						{
-							/* translators: accessibility text */
-							__( '(opens in a new tab)', 'amp' )
-						}
-					</span>
-					<DotTip tipId="amp/editor.preview">
-						{ __( 'Click “Preview” to load a preview of this page in AMP, so you can make sure you are happy with your blocks.', 'amp' ) }
-					</DotTip>
-				</IconButton>
+				<Tooltip text={ __( 'Preview AMP', 'amp' ) } >
+					<Button
+						className="amp-editor-post-preview"
+						href={ href }
+						label={ __( 'Preview AMP', 'amp' ) }
+						isSecondary
+						disabled={ ! isSaveable }
+						onClick={ this.openPreviewWindow }
+						ref={ this.buttonRef }
+					>
+						{ ampFilledIcon( { viewBox: '0 0 62 62', width: 18, height: 18 } ) }
+						<span className="screen-reader-text">
+							{
+								/* translators: accessibility text */
+								__( '(opens in a new tab)', 'amp' )
+							}
+						</span>
+					</Button>
+				</Tooltip>
 			)
 		);
 	}

package.json

@@ -41,7 +41,6 @@
     "@wordpress/hooks": "2.7.0",
     "@wordpress/i18n": "3.9.0",
     "@wordpress/jest-puppeteer-axe": "1.6.0",
-    "@wordpress/nux": "3.12.3",
     "@wordpress/plugins": "2.12.0",
     "@wordpress/scripts": "5.1.0",
     "@wordpress/url": "2.9.0",

tests/php/test-class-amp-meta-box.php

@@ -143,7 +143,6 @@ public function test_enqueue_block_assets() {
 				'wp-element',
 				'wp-hooks',
 				'wp-i18n',
-				'wp-nux',
 				'wp-plugins',
 				'wp-polyfill',
 				'wp-url',