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

westonruter · web-flow · commit ab653495e56f · 2020-03-17T14:41:09.000-07:00
Improve AMP preview button in WP 5.4 and with Gutenberg
diff --git a/assets/css/src/amp-block-editor.css b/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;
 }
 
diff --git a/assets/images/amp-icon.svg b/assets/images/amp-icon.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<title>AMP-Icon</title>
 	<g id="AMP-Icon" fill="#82878c">
 		<path d="M41.6288667,28.1614333 L28.6243667,49.8035667 L26.2683667,49.8035667 L28.5975,35.7016667 L21.3838,35.7109667 C21.3838,35.7109667 21.3156,35.7130333 21.2835667,35.7130333 C20.6336,35.7130333 20.1076333,35.1870667 20.1076333,34.5371 C20.1076333,34.2581 20.367,33.7858667 20.367,33.7858667 L33.3291333,12.1695667 L35.7244,12.1799 L33.3363667,26.3035 L40.5872667,26.2942 C40.5872667,26.2942 40.6647667,26.2931667 40.7019667,26.2931667 C41.3519333,26.2931667 41.8779,26.8191333 41.8779,27.4691 C41.8779,27.7326 41.7745667,27.9640667 41.6278333,28.1604 L41.6288667,28.1614333 Z M31,0 C13.8787,0 0,13.8797333 0,31 C0,48.1213 13.8787,62 31,62 C48.1202667,62 62,48.1213 62,31 C62,13.8797333 48.1202667,0 31,0 L31,0 Z" id="Fill-1"></path>
 	</g>
diff --git a/assets/images/amp-white-icon.svg b/assets/images/amp-white-icon.svg
@@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>AMP-White-Icon</title>
     <g id="amp-logo-internal-site" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="AMP-Brand-White-Icon" fill="#FFFFFF">
             <path d="M41.6288667,28.1614333 L28.6243667,49.8035667 L26.2683667,49.8035667 L28.5975,35.7016667 L21.3838,35.7109667 C21.3838,35.7109667 21.3156,35.7130333 21.2835667,35.7130333 C20.6336,35.7130333 20.1076333,35.1870667 20.1076333,34.5371 C20.1076333,34.2581 20.367,33.7858667 20.367,33.7858667 L33.3291333,12.1695667 L35.7244,12.1799 L33.3363667,26.3035 L40.5872667,26.2942 C40.5872667,26.2942 40.6647667,26.2931667 40.7019667,26.2931667 C41.3519333,26.2931667 41.8779,26.8191333 41.8779,27.4691 C41.8779,27.7326 41.7745667,27.9640667 41.6278333,28.1604 L41.6288667,28.1614333 Z M31,0 C13.8787,0 0,13.8797333 0,31 C0,48.1213 13.8787,62 31,62 C48.1202667,62 62,48.1213 62,31 C62,13.8797333 48.1202667,0 31,0 L31,0 Z" id="Fill-1"></path>
         </g>
     </g>
-</svg>
+</svg>
diff --git a/assets/src/block-editor/components/amp-preview.js b/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>
 			)
 		);
 	}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
diff --git a/tests/php/test-class-amp-meta-box.php b/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',
