Design enhancements for the Attributes tab

plugins/woocommerce/client/legacy/css/admin.scss

@@ -5290,6 +5290,12 @@ img.help_tip {
 			visibility: visible;
 		}
 	}
+
+	&.wc-metabox {
+		&.postbox {
+			border: 0px;
+		}
+	}
 }
 
 .woocommerce_options_panel {
@@ -5504,7 +5510,8 @@ img.help_tip {
   * WooCommerce meta boxes
   */
 .wc-metaboxes-wrapper {
-	:not(#variable_product_options_inner) {
+	:not(#variable_product_options_inner),
+	&#product_attributes {
 		.toolbar:not(.expand-close-hidden) {
 		  border-bottom: 1px solid #eee;
 		}

plugins/woocommerce/client/legacy/js/admin/meta-boxes-product.js

@@ -514,6 +514,23 @@ jQuery( function ( $ ) {
 		$attributeListItem.find( 'h3' ).trigger( 'click' );
 	}
 
+	function toggle_selection_of_attribute_list_item_terms( $attributeListItem ) {
+
+		var $attributeListItemSelectAllButton = $attributeListItem.find( 'button.select_all_attributes' );
+
+		if ( $attributeListItemSelectAllButton.length ) {
+			$attributeListItemSelectAllButton.trigger( 'click' );
+		}
+	}
+
+	function add_placeholder_to_attribute_values_field( $attributeListItem ) {
+		if ( $attributeListItem.find( 'input.woocommerce_attribute_used_for_variations' ).is( ':checked' ) ) {
+			$attributeListItem.find( 'textarea' ).attr( 'placeholder', woocommerce_admin_product_meta_boxes.i18n_attributes_used_for_variations_placeholder );
+		} else {
+			$attributeListItem.find( 'textarea' ).attr( 'placeholder', woocommerce_admin_product_meta_boxes.i18n_attributes_default_placeholder );
+		}
+	}
+
 	function init_select_controls() {
 		$( document.body ).trigger( 'wc-enhanced-select-init' );
 	}
@@ -547,6 +564,18 @@ jQuery( function ( $ ) {
 
 			toggle_expansion_of_attribute_list_item( $attributeListItem );
 
+			// Automatically pre-select all terms when a global Attribute is chosen.
+			toggle_selection_of_attribute_list_item_terms( $attributeListItem );
+
+			// Conditionally change the placeholder of product-level Attributes depending on the value of the "Use for variations" checkbox.
+			if ( 'undefined' === typeof globalAttributeId ) {
+				add_placeholder_to_attribute_values_field( $attributeListItem );
+
+				$( '.woocommerce_attribute input.woocommerce_attribute_used_for_variations' ).on( 'change', function() {
+					add_placeholder_to_attribute_values_field( $(this).closest( '.woocommerce_attribute' ) );
+				} );
+			}
+
 			$( document.body ).trigger( 'woocommerce_added_attribute' );
 
 			jQuery.maybe_disable_save_button();
@@ -602,6 +631,17 @@ jQuery( function ( $ ) {
 		}
 	}
 
+	// Handle the Attributes onboarding dismissible notice.
+	// If users dismiss the notice, never show it again.
+	if ( localStorage.getItem('attributes-notice-dismissed' ) ) {
+		$( '#product_attributes .notice' ).hide();
+	}
+
+	$( '#product_attributes .notice.woocommerce-message button' ).on( 'click', function( e ) {
+		$( '#product_attributes .notice' ).hide();
+		localStorage.setItem( 'attributes-notice-dismissed', 'true');
+	} );
+
 	$( 'select.wc-attribute-search' ).on( 'select2:select', function ( e ) {
 		const attributeId = e && e.params && e.params.data && e.params.data.id;
 

plugins/woocommerce/includes/admin/class-wc-admin-assets.php

@@ -280,6 +280,14 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
 				wp_enqueue_script( 'wc-admin-product-meta-boxes' );
 				wp_enqueue_script( 'wc-admin-variation-meta-boxes' );
 
+				$params = array(
+					/* translators: %s: WC_DELIMITER */
+					'i18n_attributes_default_placeholder'             => sprintf( esc_attr__( 'Enter some descriptive text. Use “%s” to separate different values.', 'woocommerce' ), esc_attr( WC_DELIMITER ) ),
+					'i18n_attributes_used_for_variations_placeholder' => sprintf( esc_attr__( 'Enter options for customers to choose from, f.e. “Blue” or “Large”. Use “%s” to separate different options.', 'woocommerce' ), esc_attr( WC_DELIMITER ) )
+				);
+
+				wp_localize_script( 'wc-admin-product-meta-boxes', 'woocommerce_admin_product_meta_boxes', $params );
+
 				$params = array(
 					'post_id'                             => isset( $post->ID ) ? $post->ID : '',
 					'plugin_url'                          => WC()->plugin_url(),

plugins/woocommerce/includes/admin/meta-boxes/views/html-product-attribute-inner.php

@@ -41,7 +41,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 					<select multiple="multiple"
 							data-minimum_input_length="0"
 							data-limit="50" data-return_id="id"
-							data-placeholder="<?php esc_attr_e( 'Select terms', 'woocommerce' ); ?>"
+							data-placeholder="<?php esc_attr_e( 'Select values', 'woocommerce' ); ?>"
 							data-orderby="<?php echo esc_attr( $attribute_orderby ); ?>"
 							class="multiselect attribute_values wc-taxonomy-term-search"
 							name="attribute_values[<?php echo esc_attr( $i ); ?>][]"
@@ -79,7 +79,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 				do_action( 'woocommerce_product_option_terms', $attribute_taxonomy, $i, $attribute );
 			} else {
 				?>
-				<textarea name="attribute_values[<?php echo esc_attr( $i ); ?>]" cols="5" rows="5" placeholder="<?php /* translators: %s: WC_DELIMITER */ printf( esc_attr__( 'Enter options for customers to choose from, f.e. “Blue” or “Large”. Use “%s” to separate different options.', 'woocommerce' ), esc_attr( WC_DELIMITER ) ); ?>"><?php echo esc_textarea( wc_implode_text_attributes( $attribute->get_options() ) ); ?></textarea>
+				<textarea name="attribute_values[<?php echo esc_attr( $i ); ?>]" cols="5" rows="5"><?php echo esc_textarea( wc_implode_text_attributes( $attribute->get_options() ) ); ?></textarea>
 				<?php
 			}
 			?>

plugins/woocommerce/includes/admin/meta-boxes/views/html-product-data-attributes.php

@@ -17,14 +17,15 @@ $product_attributes = $product_object->get_attributes( 'edit' );
 ?>
 <div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
 	<div class="toolbar toolbar-top">
-		<div id="message" class="inline notice woocommerce-message">
+		<div id="message" class="inline notice woocommerce-message is-dismissible">
-			<p>
+			<p class="help">
 				<?php
 				esc_html_e(
 					'Add descriptive pieces of information that customers can use to search for this product on your store, such as “Material” or “Brand”.',
 					'woocommerce'
 				);
 				?>
+				<button type="button" class="notice-dismiss"><span class="screen-reader-text"><?php esc_html_e( 'Dismiss this notice.', 'woocommerce' ); ?></span></button>
 			</p>
 		</div>
 		<span class="expand-close">