Update placeholder styles (https://github.com/woocommerce/woocommerce-blocks/pull/2456)

* Convert several default buttons to primary

* Align primary and tertiary buttons

* Align select controls of placeholders

* Don't force a placeholder background color

* Add border to placeholder lists

* Add work-around for SearchListComponent compatibility with last version of @wordpress/components

plugins/woocommerce-blocks/assets/css/editor.scss

@@ -46,3 +46,17 @@
 		margin: -$gap 0 $gap-small;
 	}
 }
+
+// Adds border to placeholder lists, so they can be distinguished from the white background.
+.components-placeholder .woocommerce-search-list__list {
+	border: 1px solid $core-grey-light-500;
+}
+
+// Work-around to make the SearchList component work fine with the last versions of @wordpress/components.
+// Ideally it should be possible to remove this once this issue is fixed in WC Admin:
+// https://github.com/woocommerce/woocommerce-admin/issues/4349
+.components-placeholder .woocommerce-search-list__list .woocommerce-search-list__item {
+	border-radius: 0;
+	height: auto;
+	text-align: left;
+}

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js

@@ -369,7 +369,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			>
 				<div className="wc-block-attribute-filter__selection">
 					{ renderAttributeControl() }
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js

@@ -214,7 +214,7 @@ const FeaturedCategory = ( {
 						} }
 						isSingle
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss

@@ -1,9 +1,4 @@
 .wc-block-featured-category {
-	&.components-placeholder {
-		// Reset the background for the placeholders.
-		background-color: rgba(139, 139, 150, 0.1);
-	}
-
 	.components-resizable-box__handle {
 		z-index: 10;
 	}

plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js

@@ -112,7 +112,7 @@ const FeaturedProduct = ( {
 								triggerUrlUpdate();
 							} }
 						/>
-						<Button isDefault onClick={ onDone }>
+						<Button isPrimary onClick={ onDone }>
 							{ __( 'Done', 'woo-gutenberg-products-block' ) }
 						</Button>
 					</div>

plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss

@@ -1,9 +1,4 @@
 .wc-block-featured-product {
-	&.components-placeholder {
-		// Reset the background for the placeholders.
-		background-color: rgba(139, 139, 150, 0.1);
-	}
-
 	.components-resizable-box__handle {
 		z-index: 10;
 	}

plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js

@@ -145,7 +145,7 @@ class ProductsBlock extends Component {
 							setAttributes( { products: ids } );
 						} }
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js

@@ -219,7 +219,7 @@ class ProductByCategoryBlock extends Component {
 							this.setChangedAttributes( { catOperator: value } )
 						}
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 					<Button

plugins/woocommerce-blocks/assets/js/blocks/product-category/editor.scss

@@ -1,9 +1,7 @@
 .wc-block-products-category__selection {
 	width: 100%;
 }
+
 .wc-block-products-category__cancel-button.is-tertiary {
 	margin: 1em auto 0;
-	display: block;
-	text-align: center;
-	font-size: 1em;
 }

plugins/woocommerce-blocks/assets/js/blocks/product-tag/block.js

@@ -202,7 +202,7 @@ class ProductsByTagBlock extends Component {
 							this.setChangedAttributes( { tagOperator: value } )
 						}
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 					<Button

plugins/woocommerce-blocks/assets/js/blocks/product-tag/editor.scss

@@ -1,9 +1,7 @@
 .wc-block-product-tag__selection {
 	width: 100%;
 }
+
 .wc-block-product-tag__cancel-button.is-tertiary {
 	margin: 1em auto 0;
-	display: block;
-	text-align: center;
-	font-size: 1em;
 }

plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js

@@ -145,7 +145,7 @@ class ProductsByAttributeBlock extends Component {
 							setAttributes( { attrOperator: value } )
 						}
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js

@@ -155,7 +155,7 @@ const ReviewsByCategoryEditor = ( {
 						} }
 						showReviewCount={ true }
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js

@@ -143,7 +143,7 @@ const ReviewsByProductEditor = ( {
 						} }
 						renderItem={ renderProductControlItem }
 					/>
-					<Button isDefault onClick={ onDone }>
+					<Button isPrimary onClick={ onDone }>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }
 					</Button>
 				</div>

plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss

@@ -2,6 +2,11 @@
 	.components-base-control__help {
 		@include visually-hidden;
 	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+		margin-right: 0.5em;
+	}
 }
 
 .components-panel {

plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss

@@ -2,6 +2,11 @@
 	.components-base-control__help {
 		@include visually-hidden;
 	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+		margin-right: 0.5em;
+	}
 }
 
 .components-panel {

plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss

@@ -2,6 +2,11 @@
 	.components-base-control__help {
 		@include visually-hidden;
 	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+		margin-right: 0.5em;
+	}
 }
 
 .components-panel {