From fad53c3a21b601085769ab30bd4d147151d5597b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 8 May 2018 18:18:02 +0200
Subject: [PATCH 1/2] First porting of functionalities from 6245 into the
 Button component.

---
 components/button/README.md                   | 16 ++++++--
 components/button/index.js                    | 40 ++++++++++++++++++-
 components/button/style.scss                  |  5 ++-
 .../audio/test/__snapshots__/index.js.snap    | 10 +++++
 .../test/__snapshots__/index.js.snap          |  5 +++
 .../embed/test/__snapshots__/index.js.snap    |  5 +++
 .../gallery/test/__snapshots__/index.js.snap  |  5 +++
 .../video/test/__snapshots__/index.js.snap    | 10 +++++
 editor/components/post-excerpt/index.js       |  6 +--
 9 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/components/button/README.md b/components/button/README.md
index 7f78cb981c7dc..346f6cdc70d2b 100644
--- a/components/button/README.md
+++ b/components/button/README.md
@@ -1,8 +1,18 @@
-This component is used to implement dang sweet buttons.
+# Button
 
-#### Props
+This component is used to implement buttons and links.
+It's also used to implement links that open in a new browser's tab.
 
-The following props are used to control the display of the component. Any additional props will be passed to the rendered `<a />` or `<button />` element. The presence of a `href` prop determines whether an anchor element is rendered instead of a button.
+## Props
+
+The component accepts the following props. Any additional props will be passed to the rendered `<a />` or `<button />` element. The presence of a `href` prop determines whether an anchor element is rendered instead of a button.
 
 * `isPrimary`: (bool) whether the button is styled as a primary button.
+* `isLarge`: (bool) whether the button is styled as a large button.
+* `isSmall`: (bool) whether the button is styled as a small button.
+* `isToggled`: (bool) whether the button is styled with an inversion of colors.
+* `isBusy`: (bool) whether the button is styled with a "busy" animation.
+* `disabled`: (bool) whether the `<button />` element is disabled.
 * `href`: (string) if this property is added, it will use an `a` rather than a `button` element.
+* `rel`: (string) the `rel` attribute for the `<a />` element.
+* `target`: (string) the `target` attribute for the `<a />` element.
diff --git a/components/button/index.js b/components/button/index.js
index d824433d4f502..6726ae129043d 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -2,21 +2,25 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { compact, uniq, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { createElement, forwardRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import Dashicon from '../dashicon';
 import './style.scss';
 
 export function Button( props, ref ) {
 	const {
 		href,
 		target,
+		rel = '',
 		isPrimary,
 		isLarge,
 		isSmall,
@@ -25,9 +29,37 @@ export function Button( props, ref ) {
 		className,
 		disabled,
 		focus,
+		children,
 		...additionalProps
 	} = props;
 
+	const { icon = true } = additionalProps;
+	const isExternalLink = href && ( target && ! includes( [ '_self', '_parent', '_top' ], target ) );
+
+	const getRel = () => {
+		// Allow to omit the `rel` attribute passing a `null` value.
+		return rel === null ? rel : uniq( compact( [
+			...rel.split( ' ' ),
+			'external',
+			'noreferrer',
+			'noopener',
+		] ) ).join( ' ' );
+	};
+
+	const { opensInNewTabText = __(
+		/* translators: accessibility text */
+		'(opens in a new tab)'
+	) } = additionalProps;
+
+	const OpensInNewTabText = (
+		<span className="screen-reader-text">
+			{
+				// We need a space to separate this from previous text.
+				' ' + opensInNewTabText
+			}
+		</span>
+	);
+
 	const classes = classnames( 'components-button', className, {
 		button: ( isPrimary || isLarge || isSmall ),
 		'button-primary': isPrimary,
@@ -35,18 +67,22 @@ export function Button( props, ref ) {
 		'button-small': isSmall,
 		'is-toggled': isToggled,
 		'is-busy': isBusy,
+		'components-external-link': isExternalLink,
+		'components-icon-button': isExternalLink && icon && ( isPrimary || isLarge || isSmall ),
 	} );
 
 	const tag = href !== undefined && ! disabled ? 'a' : 'button';
-	const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled };
+	const tagProps = tag === 'a' ? { href, target, rel } : { type: 'button', disabled };
+	const externalIcon = icon && isExternalLink && <Dashicon icon="external" />;
 
 	return createElement( tag, {
 		...tagProps,
 		...additionalProps,
 		className: classes,
 		autoFocus: focus,
+		rel: isExternalLink && getRel(),
 		ref,
-	} );
+	}, ...children, OpensInNewTabText, externalIcon );
 }
 
 export default forwardRef( Button );
diff --git a/components/button/style.scss b/components/button/style.scss
index c61884cab1290..09b5567a3d29e 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -2,10 +2,13 @@
 	background: none;
 	border: none;
 	outline: none;
-	text-decoration: none;
 	margin: 0;
 	border-radius: 0;
 
+	&.button {
+		text-decoration: none;
+	}
+
 	&:active {
 		color: currentColor;
 	}
diff --git a/core-blocks/audio/test/__snapshots__/index.js.snap b/core-blocks/audio/test/__snapshots__/index.js.snap
index c40fb0b476a8f..a61dc473aa1b0 100644
--- a/core-blocks/audio/test/__snapshots__/index.js.snap
+++ b/core-blocks/audio/test/__snapshots__/index.js.snap
@@ -43,6 +43,11 @@ exports[`core/audio block edit matches snapshot 1`] = `
         type="submit"
       >
         Use URL
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
     </form>
     <div
@@ -67,6 +72,11 @@ exports[`core/audio block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
       <input
         accept="audio/*"
diff --git a/core-blocks/cover-image/test/__snapshots__/index.js.snap b/core-blocks/cover-image/test/__snapshots__/index.js.snap
index ee701c6e9620c..6fbfc5c4a297e 100644
--- a/core-blocks/cover-image/test/__snapshots__/index.js.snap
+++ b/core-blocks/cover-image/test/__snapshots__/index.js.snap
@@ -80,6 +80,11 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
       <input
         accept="image/*"
diff --git a/core-blocks/embed/test/__snapshots__/index.js.snap b/core-blocks/embed/test/__snapshots__/index.js.snap
index 859c0480b1089..c520b40166b42 100644
--- a/core-blocks/embed/test/__snapshots__/index.js.snap
+++ b/core-blocks/embed/test/__snapshots__/index.js.snap
@@ -39,6 +39,11 @@ exports[`core/embed block edit matches snapshot 1`] = `
         type="submit"
       >
         Embed
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
     </form>
   </div>
diff --git a/core-blocks/gallery/test/__snapshots__/index.js.snap b/core-blocks/gallery/test/__snapshots__/index.js.snap
index 28da151354f23..bf9729cb92d76 100644
--- a/core-blocks/gallery/test/__snapshots__/index.js.snap
+++ b/core-blocks/gallery/test/__snapshots__/index.js.snap
@@ -80,6 +80,11 @@ exports[`core/gallery block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
       <input
         accept="image/*"
diff --git a/core-blocks/video/test/__snapshots__/index.js.snap b/core-blocks/video/test/__snapshots__/index.js.snap
index ccc89e10953a6..f542d7b144309 100644
--- a/core-blocks/video/test/__snapshots__/index.js.snap
+++ b/core-blocks/video/test/__snapshots__/index.js.snap
@@ -43,6 +43,11 @@ exports[`core/video block edit matches snapshot 1`] = `
         type="submit"
       >
         Use URL
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
     </form>
     <div
@@ -67,6 +72,11 @@ exports[`core/video block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
+        <span
+          class="screen-reader-text"
+        >
+           (opens in a new tab)
+        </span>
       </button>
       <input
         accept="video/*"
diff --git a/editor/components/post-excerpt/index.js b/editor/components/post-excerpt/index.js
index b7c7c9ce088b8..11664f09273bf 100644
--- a/editor/components/post-excerpt/index.js
+++ b/editor/components/post-excerpt/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ExternalLink, TextareaControl } from '@wordpress/components';
+import { Button, TextareaControl } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/element';
 
@@ -20,9 +20,9 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 				onChange={ ( value ) => onUpdateExcerpt( value ) }
 				value={ excerpt }
 			/>
-			<ExternalLink href="https://codex.wordpress.org/Excerpt">
+			<Button href="https://codex.wordpress.org/Excerpt" target="_blank">
 				{ __( 'Learn more about manual excerpts' ) }
-			</ExternalLink>
+			</Button>
 		</div>
 	);
 }

From 2f8b3e2df29d32d8b40cda34770166e777b8bb22 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 16 May 2018 18:56:57 +0200
Subject: [PATCH 2/2] Use on all linsk with target blank and remove
 ExternalLink.

---
 components/button/index.js                    | 36 ++++++++---------
 components/button/style.scss                  |  9 +++++
 components/external-link/index.js             | 40 -------------------
 components/external-link/style.scss           |  8 ----
 components/index.js                           |  1 -
 .../audio/test/__snapshots__/index.js.snap    | 10 -----
 core-blocks/categories/edit.js                | 11 ++++-
 .../test/__snapshots__/index.js.snap          |  5 ---
 .../embed/test/__snapshots__/index.js.snap    |  5 ---
 .../gallery/test/__snapshots__/index.js.snap  |  5 ---
 core-blocks/latest-posts/edit.js              | 12 +++++-
 .../video/test/__snapshots__/index.js.snap    | 10 -----
 editor/components/block-list/style.scss       |  5 +++
 .../components/post-last-revision/style.scss  |  1 +
 editor/components/post-permalink/index.js     |  3 ++
 .../components/post-preview-button/index.js   |  1 +
 .../rich-text/format-toolbar/index.js         |  6 ++-
 .../rich-text/format-toolbar/style.scss       |  3 +-
 18 files changed, 63 insertions(+), 108 deletions(-)
 delete mode 100644 components/external-link/index.js
 delete mode 100644 components/external-link/style.scss

diff --git a/components/button/index.js b/components/button/index.js
index 6726ae129043d..b0c632a6cfec6 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { compact, uniq, includes } from 'lodash';
+import { compact, uniq, includes, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -33,9 +33,22 @@ export function Button( props, ref ) {
 		...additionalProps
 	} = props;
 
+	const tag = href !== undefined && ! disabled ? 'a' : 'button';
+	const tagProps = tag === 'a' ? { href, target, rel } : { type: 'button', disabled };
 	const { icon = true } = additionalProps;
 	const isExternalLink = href && ( target && ! includes( [ '_self', '_parent', '_top' ], target ) );
 
+	const classes = classnames( 'components-button', className, {
+		button: ( isPrimary || isLarge || isSmall ),
+		'button-primary': isPrimary,
+		'button-large': isLarge,
+		'button-small': isSmall,
+		'is-toggled': isToggled,
+		'is-busy': isBusy,
+		'external-link': isExternalLink,
+		'components-icon-button': isExternalLink && icon && ( isPrimary || isLarge || isSmall ),
+	} );
+
 	const getRel = () => {
 		// Allow to omit the `rel` attribute passing a `null` value.
 		return rel === null ? rel : uniq( compact( [
@@ -51,7 +64,7 @@ export function Button( props, ref ) {
 		'(opens in a new tab)'
 	) } = additionalProps;
 
-	const OpensInNewTabText = (
+	const OpensInNewTabScreenReaderText = isExternalLink && (
 		<span className="screen-reader-text">
 			{
 				// We need a space to separate this from previous text.
@@ -60,29 +73,16 @@ export function Button( props, ref ) {
 		</span>
 	);
 
-	const classes = classnames( 'components-button', className, {
-		button: ( isPrimary || isLarge || isSmall ),
-		'button-primary': isPrimary,
-		'button-large': isLarge,
-		'button-small': isSmall,
-		'is-toggled': isToggled,
-		'is-busy': isBusy,
-		'components-external-link': isExternalLink,
-		'components-icon-button': isExternalLink && icon && ( isPrimary || isLarge || isSmall ),
-	} );
-
-	const tag = href !== undefined && ! disabled ? 'a' : 'button';
-	const tagProps = tag === 'a' ? { href, target, rel } : { type: 'button', disabled };
-	const externalIcon = icon && isExternalLink && <Dashicon icon="external" />;
+	const ExternalIcon = icon && isExternalLink && <Dashicon icon="external" />;
 
 	return createElement( tag, {
 		...tagProps,
-		...additionalProps,
+		...omit( additionalProps, [ 'icon', 'opensInNewTabText' ] ),
 		className: classes,
 		autoFocus: focus,
 		rel: isExternalLink && getRel(),
 		ref,
-	}, ...children, OpensInNewTabText, externalIcon );
+	}, children, OpensInNewTabScreenReaderText, ExternalIcon );
 }
 
 export default forwardRef( Button );
diff --git a/components/button/style.scss b/components/button/style.scss
index 09b5567a3d29e..ff13e228fb47d 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -44,6 +44,15 @@
 	.wp-core-ui.gutenberg-editor-page & {
 		font-size: $default-font-size;
 	}
+
+	&.external-link {
+		.dashicon {
+			width: 1.4em;
+			height: 1.4em;
+			margin: 0 .2em;
+			vertical-align: top;
+		}
+	}
 }
 
 @keyframes components-button__busy-animation {
diff --git a/components/external-link/index.js b/components/external-link/index.js
deleted file mode 100644
index 6a484111ff665..0000000000000
--- a/components/external-link/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { compact, uniq } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Dashicon from '../dashicon';
-import './style.scss';
-
-function ExternalLink( { href, children, className, rel = '', ...additionalProps } ) {
-	rel = uniq( compact( [
-		...rel.split( ' ' ),
-		'external',
-		'noreferrer',
-		'noopener',
-	] ) ).join( ' ' );
-	const classes = classnames( 'components-external-link', className );
-	return (
-		<a { ...additionalProps } className={ classes } href={ href } target="_blank" rel={ rel }>
-			{ children }
-			<span className="screen-reader-text">
-				{
-					/* translators: accessibility text */
-					__( '(opens in a new window)' )
-				}
-			</span>
-			<Dashicon icon="external" />
-		</a>
-	);
-}
-
-export default ExternalLink;
diff --git a/components/external-link/style.scss b/components/external-link/style.scss
deleted file mode 100644
index b20adc9ccccc9..0000000000000
--- a/components/external-link/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.components-external-link {
-	.dashicon {
-		width: 1.4em;
-		height: 1.4em;
-		margin: 0 .2em;
-		vertical-align: top;
-	}
-}
\ No newline at end of file
diff --git a/components/index.js b/components/index.js
index 3f76939bcfac2..e709cc51b3a05 100644
--- a/components/index.js
+++ b/components/index.js
@@ -16,7 +16,6 @@ export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
-export { default as ExternalLink } from './external-link';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
diff --git a/core-blocks/audio/test/__snapshots__/index.js.snap b/core-blocks/audio/test/__snapshots__/index.js.snap
index a61dc473aa1b0..c40fb0b476a8f 100644
--- a/core-blocks/audio/test/__snapshots__/index.js.snap
+++ b/core-blocks/audio/test/__snapshots__/index.js.snap
@@ -43,11 +43,6 @@ exports[`core/audio block edit matches snapshot 1`] = `
         type="submit"
       >
         Use URL
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
     </form>
     <div
@@ -72,11 +67,6 @@ exports[`core/audio block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
       <input
         accept="audio/*"
diff --git a/core-blocks/categories/edit.js b/core-blocks/categories/edit.js
index 1e34203a9d136..7e4539c485608 100644
--- a/core-blocks/categories/edit.js
+++ b/core-blocks/categories/edit.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component, Fragment } from '@wordpress/element';
-import { PanelBody, Placeholder, Spinner, ToggleControl } from '@wordpress/components';
+import { PanelBody, Placeholder, Spinner, ToggleControl, Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { times, unescape } from 'lodash';
@@ -88,10 +88,17 @@ class CategoriesEdit extends Component {
 	renderCategoryListItem( category, level ) {
 		const { showHierarchy, showPostCounts } = this.props.attributes;
 		const childCategories = this.getCategories( category.id );
+		const opensInNewTabText = __( '(opens in a new tab from this preview)' );
 
 		return (
 			<li key={ category.id }>
-				<a href={ category.link } target="_blank">{ this.renderCategoryName( category ) }</a>
+				<Button href={ category.link }
+					target="_blank"
+					icon={ false }
+					opensInNewTabText={ opensInNewTabText }
+				>
+					{ this.renderCategoryName( category ) }
+				</Button>
 				{ showPostCounts &&
 					<span className={ `${ this.props.className }__post-count` }>
 						{ ' ' }({ category.count })
diff --git a/core-blocks/cover-image/test/__snapshots__/index.js.snap b/core-blocks/cover-image/test/__snapshots__/index.js.snap
index 6fbfc5c4a297e..ee701c6e9620c 100644
--- a/core-blocks/cover-image/test/__snapshots__/index.js.snap
+++ b/core-blocks/cover-image/test/__snapshots__/index.js.snap
@@ -80,11 +80,6 @@ exports[`core/cover-image block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
       <input
         accept="image/*"
diff --git a/core-blocks/embed/test/__snapshots__/index.js.snap b/core-blocks/embed/test/__snapshots__/index.js.snap
index c520b40166b42..859c0480b1089 100644
--- a/core-blocks/embed/test/__snapshots__/index.js.snap
+++ b/core-blocks/embed/test/__snapshots__/index.js.snap
@@ -39,11 +39,6 @@ exports[`core/embed block edit matches snapshot 1`] = `
         type="submit"
       >
         Embed
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
     </form>
   </div>
diff --git a/core-blocks/gallery/test/__snapshots__/index.js.snap b/core-blocks/gallery/test/__snapshots__/index.js.snap
index bf9729cb92d76..28da151354f23 100644
--- a/core-blocks/gallery/test/__snapshots__/index.js.snap
+++ b/core-blocks/gallery/test/__snapshots__/index.js.snap
@@ -80,11 +80,6 @@ exports[`core/gallery block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
       <input
         accept="image/*"
diff --git a/core-blocks/latest-posts/edit.js b/core-blocks/latest-posts/edit.js
index 859b32f0a2b0d..258e04cf007b1 100644
--- a/core-blocks/latest-posts/edit.js
+++ b/core-blocks/latest-posts/edit.js
@@ -19,6 +19,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	withAPIData,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/utils';
@@ -123,6 +124,8 @@ class LatestPostsEdit extends Component {
 			},
 		];
 
+		const opensInNewTabText = __( '(opens in a new tab from this preview)' );
+
 		return (
 			<Fragment>
 				{ inspectorControls }
@@ -144,7 +147,14 @@ class LatestPostsEdit extends Component {
 				>
 					{ displayPosts.map( ( post, i ) =>
 						<li key={ i }>
-							<a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a>
+							<Button
+								href={ post.link }
+								target="_blank"
+								icon={ false }
+								opensInNewTabText={ opensInNewTabText }
+							>
+								{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }
+							</Button>
 							{ displayPostDate && post.date_gmt &&
 								<time dateTime={ moment( post.date_gmt ).utc().format() } className={ `${ this.props.className }__post-date` }>
 									{ moment( post.date_gmt ).local().format( 'MMMM DD, Y' ) }
diff --git a/core-blocks/video/test/__snapshots__/index.js.snap b/core-blocks/video/test/__snapshots__/index.js.snap
index f542d7b144309..ccc89e10953a6 100644
--- a/core-blocks/video/test/__snapshots__/index.js.snap
+++ b/core-blocks/video/test/__snapshots__/index.js.snap
@@ -43,11 +43,6 @@ exports[`core/video block edit matches snapshot 1`] = `
         type="submit"
       >
         Use URL
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
     </form>
     <div
@@ -72,11 +67,6 @@ exports[`core/video block edit matches snapshot 1`] = `
           />
         </svg>
         Upload
-        <span
-          class="screen-reader-text"
-        >
-           (opens in a new tab)
-        </span>
       </button>
       <input
         accept="video/*"
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index d688fd27a8119..7d0b8894a6f80 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -96,6 +96,11 @@
 		padding-left: 0;
 		padding-right: 0;
 	}
+
+	// Let buttons in the post content inherit the content font-size.
+	.wp-core-ui & .components-button.external-link {
+		font-size: inherit;
+	}
 }
 
 .editor-block-list__layout .editor-block-list__block {
diff --git a/editor/components/post-last-revision/style.scss b/editor/components/post-last-revision/style.scss
index 17c9de56816c2..0f98f6fbd3727 100644
--- a/editor/components/post-last-revision/style.scss
+++ b/editor/components/post-last-revision/style.scss
@@ -1,6 +1,7 @@
 .editor-post-last-revision__title {
 	width: 100%;
 	font-weight: 600;
+	text-decoration: none;
 
 	.dashicon {
 		margin-right: 5px;
diff --git a/editor/components/post-permalink/index.js b/editor/components/post-permalink/index.js
index b1ba0dec54c96..fbfdf4471fa9a 100644
--- a/editor/components/post-permalink/index.js
+++ b/editor/components/post-permalink/index.js
@@ -83,6 +83,7 @@ class PostPermalink extends Component {
 						href={ ! isPublished ? previewLink : samplePermalink }
 						target="_blank"
 						ref={ ( permalinkButton ) => this.permalinkButton = permalinkButton }
+						icon={ false }
 					>
 						{ decodeURI( samplePermalink ) }
 						&lrm;
@@ -112,6 +113,8 @@ class PostPermalink extends Component {
 						href={ getWPAdminURL( 'options-permalink.php' ) }
 						onClick={ this.addVisibilityCheck }
 						target="_blank"
+						icon={ false }
+						rel={ null }
 					>
 						{ __( 'Change Permalinks' ) }
 					</Button>
diff --git a/editor/components/post-preview-button/index.js b/editor/components/post-preview-button/index.js
index 00244ec04afd1..be0ce8ab0a057 100644
--- a/editor/components/post-preview-button/index.js
+++ b/editor/components/post-preview-button/index.js
@@ -105,6 +105,7 @@ export class PostPreviewButton extends Component {
 				onClick={ this.saveForPreview }
 				target={ this.getWindowTarget() }
 				disabled={ ! isSaveable }
+				icon={ false }
 			>
 				{ _x( 'Preview', 'imperative verb' ) }
 			</Button>
diff --git a/editor/components/rich-text/format-toolbar/index.js b/editor/components/rich-text/format-toolbar/index.js
index 62d48671769de..1154e5dd8b350 100644
--- a/editor/components/rich-text/format-toolbar/index.js
+++ b/editor/components/rich-text/format-toolbar/index.js
@@ -9,6 +9,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	withSpokenMessages,
+	Button,
 } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
 import { prependHTTP } from '@wordpress/url';
@@ -240,13 +241,14 @@ class FormatToolbar extends Component {
 									onKeyPress={ stopKeyPropagation }
 								>
 									<div className="editor-format-toolbar__link-modal-line">
-										<a
+										<Button
 											className="editor-format-toolbar__link-value"
 											href={ formats.link.value }
 											target="_blank"
+											icon={ false }
 										>
 											{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
-										</a>
+										</Button>
 										<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
 										<IconButton
 											className="editor-format-toolbar__link-settings-toggle"
diff --git a/editor/components/rich-text/format-toolbar/style.scss b/editor/components/rich-text/format-toolbar/style.scss
index 13f20e839f222..4a8a5417b39fd 100644
--- a/editor/components/rich-text/format-toolbar/style.scss
+++ b/editor/components/rich-text/format-toolbar/style.scss
@@ -35,7 +35,8 @@
 	min-width: 0;
 	align-items: flex-start;
 
-	.components-button {
+
+	.components-icon-button {
 		flex-shrink: 0;
 		width: $icon-button-size;
 		height: $icon-button-size;