Add a default placeholder title for newly added attributes and always show remove button for attributes (#35904)

* Remove CSS that hides the 'Remove' button for product attributes

* Add default placeholder title 'Custom attribute' when user adds a new attribute

* Add changelog

* Add missing esc_html_e

* Try to fix PHPCS

* Add placeholder value for Attribute name input

* Add css and logic to make placeholder title have opacity and remove opacity class after user types the attribute name at the input

* Update placeholder value

* Fix wrong labels

I added e.g. Fabric or Brand to the wrong place.

plugins/woocommerce/changelog/enhancement-35116

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add a default placeholder title for newly added attributes and always show remove button for attributes

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

@@ -962,7 +962,7 @@
 #variable_product_options .notice {
 	display: flex;
 	margin: 10px;
-	background-color: #FCFAE8;
+	background-color: #fcfae8;
 	> p {
 		width: 85%;
 	}
@@ -977,7 +977,7 @@
 }
 
 .woocommerce-set-price-variations {
-	.woocommerce-usage-modal__wrapper{
+	.woocommerce-usage-modal__wrapper {
 		.woocommerce-usage-modal__message {
 			height: 60px;
 			flex-wrap: wrap;
@@ -990,7 +990,7 @@
 			display: flex;
 			justify-content: flex-end;
 			margin-top: 20px;
-			> button{
+			> button {
 				margin-left: 16px;
 				width: 88px;
 				display: unset;
@@ -1013,7 +1013,8 @@
 
 #product_attributes {
 	.toolbar-top {
-		.button, .select2-container {
+		.button,
+		.select2-container {
 			margin: 1px;
 		}
 	}
@@ -5169,14 +5170,6 @@ img.help_tip {
 	}
 }
 
-.woocommerce_attribute {
-	h3 {
-		.sort, a.delete {
-			visibility: hidden;
-		}
-	}
-}
-
 .woocommerce_options_panel {
 	min-height: 175px;
 	box-sizing: border-box;
@@ -5644,6 +5637,9 @@ img.help_tip {
 				float: right;
 			}
 		}
+		.placeholder {
+			opacity: 0.4;
+		}
 	}
 }
 
@@ -7861,7 +7857,7 @@ table.bar_chart {
 #postdivrich.woocommerce-product-description {
 	margin-top: 20px;
 	margin-bottom: 0px;
-	
+
 	.wp-editor-tools {
 		background: none;
 		padding-top: 0px;

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

@@ -520,10 +520,14 @@ jQuery( function ( $ ) {
 	} );
 
 	$( '.product_attributes' ).on( 'blur', 'input.attribute_name', function () {
-		$( this )
+		var text = $( this ).val();
+		var attributeName = $( this )
 			.closest( '.woocommerce_attribute' )
-			.find( 'strong.attribute_name' )
-			.text( $( this ).val() );
+			.find( 'strong.attribute_name' );
+		var isPlaceholder = attributeName.hasClass( 'placeholder' );
+		if ( ( isPlaceholder && text ) || ! isPlaceholder ) {
+			attributeName.removeClass( 'placeholder' ).text( text );
+		}
 	} );
 
 	$( '.product_attributes' ).on(

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

@@ -8,7 +8,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 		<a href="#" class="remove_row delete"><?php esc_html_e( 'Remove', 'woocommerce' ); ?></a>
 		<div class="handlediv" title="<?php esc_attr_e( 'Click to toggle', 'woocommerce' ); ?>"></div>
 		<div class="tips sort" data-tip="<?php esc_attr_e( 'Drag and drop to set admin attribute order', 'woocommerce' ); ?>"></div>
-		<strong class="attribute_name"><?php echo wc_attribute_label( $attribute->get_name() ); ?></strong>
+		<strong class="attribute_name<?php echo esc_attr( $attribute->get_name() === '' ? ' placeholder' : '' ); ?>"><?php echo esc_html( $attribute->get_name() !== '' ? wc_attribute_label( $attribute->get_name() ) : __( 'Custom attribute', 'woocommerce' ) ); ?></strong>
 	</h3>
 	<div class="woocommerce_attribute_data wc-metabox-content hidden">
 		<table cellpadding="0" cellspacing="0">
@@ -21,7 +21,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 							<strong><?php echo wc_attribute_label( $attribute->get_name() ); ?></strong>
 							<input type="hidden" name="attribute_names[<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $attribute->get_name() ); ?>" />
 						<?php else : ?>
-							<input type="text" class="attribute_name" name="attribute_names[<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $attribute->get_name() ); ?>" />
+							<input type="text" class="attribute_name" name="attribute_names[<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $attribute->get_name() ); ?>" placeholder="<?php esc_attr_e( 'e.g. Fabric or Brand', 'woocommerce' ); ?>" />
 						<?php endif; ?>
 
 						<input type="hidden" name="attribute_position[<?php echo esc_attr( $i ); ?>]" class="attribute_position" value="<?php echo esc_attr( $attribute->get_position() ); ?>" />