Buttons: Standardize on .button-link for link-like buttons.

This serves as both a reset and some basic styling. The class name also aligns with parallel components in other popular projects.

props paulwilde for the initial patch.
fixes #34242.


git-svn-id: https://develop.svn.wordpress.org/trunk@35636 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/customize-controls.css

@@ -3,18 +3,6 @@ body {
 	-webkit-text-size-adjust: 100%;
 }
 
-button.not-a-button {
-	background: transparent;
-	border: none;
-	-webkit-box-shadow: none;
-	box-shadow: none;
-	-webkit-border-radius: 0;
-	border-radius: 0;
-	outline: 0;
-	padding: 0;
-	margin: 0;
-}
-
 #customize-controls a {
 	text-decoration: none;
 }

src/wp-admin/css/customize-nav-menus.css

@@ -199,6 +199,8 @@
 	width: 30px;
 	height: 38px;
 	margin-right: 0 !important;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 	outline: none;
 	overflow: hidden;
 	cursor: pointer;
@@ -529,6 +531,9 @@
 
 .menu-item-bar .item-delete:hover,
 .menu-item-bar .item-delete:focus {
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	outline: none;
 	color: #f00;
 }
 
@@ -618,6 +623,9 @@
 	position: absolute;
 	top: 5px;
 	right: 5px;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	outline: none;
 	cursor: pointer;
 }
 
@@ -724,6 +732,9 @@
 	color: #82878c;
 	width: 30px;
 	height: 38px;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	outline: none;
 	cursor: pointer;
 }
 

src/wp-admin/css/press-this.css

@@ -312,7 +312,6 @@ strong {
 * Pushing buttons is what I do.
 */
 
-.button-subtle,
 .scan-submit {
 	display: inline-block;
 	margin: 0;
@@ -329,67 +328,6 @@ strong {
 	-webkit-appearance: none;
 }
 
-.button-subtle {
-	background: none;
-	border: 0;
-	color: #0073aa;
-}
-
-.button-subtle:visited {
-	color: #0073aa;
-}
-
-.button-subtle:focus,
-.button-subtle:hover,
-.button-subtle:active,
-.edit-post-link:focus,
-.edit-post-link:hover,
-.edit-post-link:active {
-	color: #00a0d2;
-}
-
-.button-subtle:focus,
-.button-subtle:active,
-.edit-post-link:focus,
-.edit-post-link:active {
-	outline: 0;
-	text-decoration: underline;
-}
-
-.preview-button {
-	margin-right: 5px;
-}
-
-.button-reset {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: none;
-	cursor: pointer;
-	-webkit-appearance: none;
-}
-
-.button-reset:focus {
-	outline: 0;
-}
-
-.button-link {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: none;
-	color: #0073aa;
-	cursor: pointer;
-	-webkit-appearance: none;
-}
-
-.button-link:hover,
-.button-link:active,
-.button-link:focus {
-	color: #00a0d2;
-	text-decoration: underline;
-}
-
 .split-button {
 	position: relative;
 	display: inline-block;
@@ -443,6 +381,7 @@ strong {
 	margin: 0;
 	width: 100%;
 	text-align: left;
+	line-height: 2;
 }
 
 .is-open .split-button-body {
@@ -921,7 +860,7 @@ dd {
 	margin: 0;
 }
 
-.tagcloud-link {
+.press-this .tagcloud-link {
 	display: block;
 	margin: 0 16px 5px;
 	padding: 0;
@@ -991,23 +930,24 @@ input[type="search"].categories-search,
 	}
 }
 
-.add-cat-toggle {
+.press-this .add-cat-toggle {
 	float: right;
 	margin-top: -45px;
 	line-height: 20px;
 	padding: 12px 10px 8px;
+	color: #0073aa;
 }
 
-.add-cat-toggle:focus {
+.press-this .add-cat-toggle:focus {
 	text-decoration: none;
 	color: #00a0d2;
 }
 
-.add-cat-toggle.is-toggled {
+.press-this .add-cat-toggle.is-toggled {
 	padding: 10px;
 }
 
-.add-cat-toggle.is-toggled .dashicons:before {
+.press-this .add-cat-toggle.is-toggled .dashicons:before {
 	content: "\f179";
 }
 
@@ -1261,11 +1201,13 @@ html {
 	color: #999;
 }
 
-.adminbar button {
+.press-this .adminbar button {
 	position: absolute;
 	top: 50%;
 	right: 6px;
 	margin-top: -13px;
+	padding: 0 10px 1px;
+	font-size: 13px;
 }
 
 @media (max-width: 320px) {
@@ -1881,13 +1823,6 @@ html {
 	}
 }
 
-.edit-post-link {
-	font-size: 13px;
-	display: inline-block;
-	text-decoration: none;
-	padding: 0 10px;
-}
-
 .publish-button .saving-draft,
 .publish-button.is-saving .publish {
 	display: none;
@@ -2101,6 +2036,7 @@ html {
 	outline: 0;
 	-webkit-box-shadow: inset 5px 0 0 #00a0d2;
 	box-shadow: inset 5px 0 0 #00a0d2;
+	border-color: #e5e5e5;
 }
 
 .is-off-screen > .post-option {
@@ -2157,7 +2093,7 @@ html {
 	}
 }
 
-.modal-close {
+.press-this .modal-close {
 	display: block;
 	width: 100%;
 	padding: 13px 14px;
@@ -2167,10 +2103,11 @@ html {
 	text-align: left;
 }
 
-.modal-close:focus {
+.press-this .modal-close:focus {
 	outline: 0;
 	-webkit-box-shadow: inset 5px 0 0 #00a0d2;
 	box-shadow: inset 5px 0 0 #00a0d2;
+	border-color: #e5e5e5;
 }
 
 .setting-title {

src/wp-admin/includes/class-wp-press-this.php

@@ -876,7 +876,7 @@ class WP_Press_This {
 
 		if ( current_user_can( $taxonomy->cap->edit_terms ) ) {
 			?>
-			<button type="button" class="add-cat-toggle button-subtle" aria-expanded="false">
+			<button type="button" class="add-cat-toggle button-link" aria-expanded="false">
 				<span class="dashicons dashicons-plus"></span><span class="screen-reader-text"><?php _e( 'Toggle add category' ); ?></span>
 			</button>
 			<div class="add-category is-hidden">
@@ -961,7 +961,7 @@ class WP_Press_This {
 
 		if ( $user_can_assign_terms ) {
 			?>
-			<button type="button" class="button-reset button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
+			<button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
 			<?php
 		}
 	}
@@ -1341,7 +1341,7 @@ class WP_Press_This {
 				<span class="current-site-name"><?php bloginfo( 'name' ); ?></span>
 			</a>
 		</h1>
-		<button type="button" class="options button-subtle closed">
+		<button type="button" class="options button-link closed">
 			<span class="dashicons dashicons-tag on-closed"></span>
 			<span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
 			<span aria-hidden="true" class="on-open"><?php _e( 'Done' ); ?></span>
@@ -1430,7 +1430,7 @@ class WP_Press_This {
 			<div class="post-options">
 
 				<?php if ( $supports_formats ) : ?>
-					<button type="button" class="button-reset post-option">
+					<button type="button" class="button-link post-option">
 						<span class="dashicons dashicons-admin-post"></span>
 						<span class="post-option-title"><?php _ex( 'Format', 'post format' ); ?></span>
 						<span class="post-option-contents" id="post-option-post-format"><?php echo esc_html( get_post_format_string( $post_format ) ); ?></span>
@@ -1438,13 +1438,13 @@ class WP_Press_This {
 					</button>
 				<?php endif; ?>
 
-				<button type="button" class="button-reset post-option">
+				<button type="button" class="button-link post-option">
 					<span class="dashicons dashicons-category"></span>
 					<span class="post-option-title"><?php _e( 'Categories' ); ?></span>
 					<span class="dashicons post-option-forward"></span>
 				</button>
 
-				<button type="button" class="button-reset post-option">
+				<button type="button" class="button-link post-option">
 					<span class="dashicons dashicons-tag"></span>
 					<span class="post-option-title"><?php _e( 'Tags' ); ?></span>
 					<span class="dashicons post-option-forward"></span>
@@ -1453,7 +1453,7 @@ class WP_Press_This {
 
 			<?php if ( $supports_formats ) : ?>
 				<div class="setting-modal is-off-screen is-hidden">
-					<button type="button" class="button-reset modal-close">
+					<button type="button" class="button-link modal-close">
 						<span class="dashicons post-option-back"></span>
 						<span class="setting-title" aria-hidden="true"><?php _ex( 'Format', 'post format' ); ?></span>
 						<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1463,7 +1463,7 @@ class WP_Press_This {
 			<?php endif; ?>
 
 			<div class="setting-modal is-off-screen is-hidden">
-				<button type="button" class="button-reset modal-close">
+				<button type="button" class="button-link modal-close">
 					<span class="dashicons post-option-back"></span>
 					<span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
 					<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1472,7 +1472,7 @@ class WP_Press_This {
 			</div>
 
 			<div class="setting-modal tags is-off-screen is-hidden">
-				<button type="button" class="button-reset modal-close">
+				<button type="button" class="button-link modal-close">
 					<span class="dashicons post-option-back"></span>
 					<span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
 					<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
@@ -1484,7 +1484,7 @@ class WP_Press_This {
 
 	<div class="press-this-actions">
 		<div class="pressthis-media-buttons">
-			<button type="button" class="insert-media button-subtle" data-editor="pressthis">
+			<button type="button" class="insert-media button-link" data-editor="pressthis">
 				<span class="dashicons dashicons-admin-media"></span>
 				<span class="screen-reader-text"><?php _e( 'Add Media' ); ?></span>
 			</button>
@@ -1502,9 +1502,9 @@ class WP_Press_This {
 					</button>
 				</div>
 				<ul class="split-button-body">
-					<li><button type="button" class="button-subtle draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
+					<li><button type="button" class="button-link draft-button split-button-option"><?php _e( 'Save Draft' ); ?></button></li>
-					<li><button type="button" class="button-subtle standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
+					<li><button type="button" class="button-link standard-editor-button split-button-option"><?php _e( 'Standard Editor' ); ?></button></li>
-					<li><button type="button" class="button-subtle preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
+					<li><button type="button" class="button-link preview-button split-button-option"><?php _e( 'Preview' ); ?></button></li>
 				</ul>
 			</div>
 		</div>

src/wp-includes/class-wp-customize-nav-menus.php

@@ -677,7 +677,7 @@ final class WP_Customize_Nav_Menus {
 						<span class="item-title" aria-hidden="true">
 							<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
 						</span>
-						<button type="button" class="not-a-button item-add">
+						<button type="button" class="button-link item-add">
 							<span class="screen-reader-text"><?php
 								/* translators: 1: Title of a menu item, 2: Type of a menu item */
 								printf( __( 'Add to menu: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.type_label }}' );
@@ -740,7 +740,7 @@ final class WP_Customize_Nav_Menus {
 			<div id="new-custom-menu-item" class="accordion-section">
 				<h4 class="accordion-section-title" role="presentation">
 					<?php _e( 'Custom Links' ); ?>
-					<button type="button" class="not-a-button" aria-expanded="false">
+					<button type="button" class="button-link" aria-expanded="false">
 						<span class="screen-reader-text"><?php _e( 'Toggle section: Custom Links' ); ?></span>
 						<span class="toggle-indicator" aria-hidden="true"></span>
 					</button>
@@ -777,7 +777,7 @@ final class WP_Customize_Nav_Menus {
 						<?php echo esc_html( $available_item_type['title'] ); ?>
 						<span class="spinner"></span>
 						<span class="no-items"><?php _e( 'No items' ); ?></span>
-						<button type="button" class="not-a-button" aria-expanded="false">
+						<button type="button" class="button-link" aria-expanded="false">
 							<span class="screen-reader-text"><?php
 							/* translators: %s: Title of a section with menu items */
 							printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) ); ?></span>

src/wp-includes/css/buttons.css

@@ -100,10 +100,6 @@ TABLE OF CONTENTS:
 	outline: none;
 }
 
-.ie8 .wp-core-ui .button-link:focus {
-	outline: #5b9dd9 solid 1px;
-}
-
 .wp-core-ui .button.hidden {
 	display: none;
 }
@@ -140,13 +136,6 @@ TABLE OF CONTENTS:
 	vertical-align: baseline;
 }
 
-.wp-core-ui .button-link {
-	border: 0;
-	background: none;
-	outline: none;
-	cursor: pointer;
-}
-
 .wp-core-ui .button.hover,
 .wp-core-ui .button:hover,
 .wp-core-ui .button-secondary:hover,
@@ -206,6 +195,24 @@ TABLE OF CONTENTS:
 	cursor: default;
 }
 
+/* Buttons that look like links, for a cross of good semantics with the visual */
+.wp-core-ui .button-link {
+	margin: 0;
+	padding: 0;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	border: 0;
+	-webkit-border-radius: 0;
+	border-radius: 0;
+	background: none;
+	outline: none;
+	cursor: pointer;
+}
+
+.wp-core-ui .button-link:focus {
+	outline: #5b9dd9 solid 1px;
+}
+
 /* ----------------------------------------------------------------------------
   3.0 - Primary Button Style
 ---------------------------------------------------------------------------- */

src/wp-includes/customize/class-wp-customize-nav-menu-control.php

@@ -51,13 +51,13 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 		<button type="button" class="button-secondary add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
 			<?php _e( 'Add Items' ); ?>
 		</button>
-		<button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
+		<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
 			<span class="reorder"><?php _ex( 'Reorder', 'Reorder menu items in Customizer' ); ?></span>
 			<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering menu items in Customizer' ); ?></span>
 		</button>
 		<p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
 		<span class="menu-delete-item">
-			<button type="button" class="not-a-button menu-delete">
+			<button type="button" class="button-link menu-delete">
 				<?php _e( 'Delete menu' ); ?> <span class="screen-reader-text">{{ data.menu_name }}</span>
 			</button>
 		</span>

src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

@@ -72,11 +72,11 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
 					<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
 				</span>
 				<span class="item-controls">
-					<button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
+					<button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text"><?php
 						/* translators: 1: Title of a menu item, 2: Type of a menu item */
 						printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
 					?></span><span class="toggle-indicator" aria-hidden="true"></span></button>
-					<button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text"><?php
+					<button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text"><?php
 						/* translators: 1: Title of a menu item, 2: Type of a menu item */
 						printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
 					?></span></button>
@@ -138,7 +138,7 @@ class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
 				</p>
 				<# } #>
 
-				<button type="button" class="not-a-button item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
+				<button type="button" class="button-link item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
 				<span class="spinner"></span>
 			</div>
 			<input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />

src/wp-includes/customize/class-wp-widget-area-customize-control.php

@@ -60,7 +60,7 @@ class WP_Widget_Area_Customize_Control extends WP_Customize_Control {
 		<button type="button" class="button-secondary add-new-widget" aria-expanded="false" aria-controls="available-widgets">
 			<?php _e( 'Add a Widget' ); ?>
 		</button>
-		<button type="button" class="not-a-button reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
+		<button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder widgets' ); ?>" aria-describedby="<?php echo esc_attr( $id ); ?>">
 			<span class="reorder"><?php _ex( 'Reorder', 'Reorder widgets in Customizer' ); ?></span>
 			<span class="reorder-done"><?php _ex( 'Done', 'Cancel reordering widgets in Customizer' ); ?></span>
 		</button>