From 74bf23ce35f9a7c6f6d2a3a88895b4ca1fd844a6 Mon Sep 17 00:00:00 2001
From: Niels Lange <info@nielslange.de>
Date: Wed, 15 Sep 2021 13:35:06 +0200
Subject: [PATCH] Twenty Twenty: Adjust font styles for filter and product grid
 blocks (https://github.com/woocommerce/woocommerce-blocks/pull/4749)

* Twenty Twenty: Adjust font styles for filter and product grid blocks

* Add missing CSS class for stock filter
---
 .../woocommerce-blocks/assets/css/editor.scss | 12 +++++++++++
 .../woocommerce-blocks/assets/css/style.scss  | 20 +++++++++++++++++--
 .../assets/js/blocks/active-filters/block.js  |  4 +++-
 .../assets/js/blocks/active-filters/edit.js   |  1 +
 .../js/blocks/attribute-filter/block.js       |  4 +++-
 .../assets/js/blocks/attribute-filter/edit.js |  1 +
 .../assets/js/blocks/price-filter/block.js    |  4 +++-
 .../assets/js/blocks/price-filter/edit.js     |  1 +
 .../assets/js/blocks/stock-filter/block.js    |  4 +++-
 .../assets/js/blocks/stock-filter/edit.js     |  1 +
 .../js/editor-components/block-title/index.js |  8 ++------
 11 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/css/editor.scss b/plugins/woocommerce-blocks/assets/css/editor.scss
index b4400dd2f7d..dc2747ff276 100644
--- a/plugins/woocommerce-blocks/assets/css/editor.scss
+++ b/plugins/woocommerce-blocks/assets/css/editor.scss
@@ -60,3 +60,15 @@
 	margin: 0;
 	padding: 0;
 }
+
+.theme-twentytwenty {
+	.wp-block {
+		.wc-block-grid__product-title,
+		.wc-block-active-filters__title,
+		.wc-block-attribute-filter__title,
+		.wc-block-price-filter__title,
+		.wc-block-stock-filter__title {
+			@include font-size(regular);
+		}
+	}
+}
diff --git a/plugins/woocommerce-blocks/assets/css/style.scss b/plugins/woocommerce-blocks/assets/css/style.scss
index 3bc8a430f72..e2d184cfad3 100644
--- a/plugins/woocommerce-blocks/assets/css/style.scss
+++ b/plugins/woocommerce-blocks/assets/css/style.scss
@@ -217,8 +217,8 @@
 	.wc-block-grid__product-title,
 	.wc-block-components-product-title {
 		font-family: $twentytwenty-headings;
-		color: #000;
-		font-size: 1.2em;
+		color: $twentytwenty-highlights-color;
+		@include font-size(regular);
 	}
 
 	.wp-block-columns .wc-block-components-product-title {
@@ -285,6 +285,22 @@
 		z-index: 1;
 	}
 
+	.wc-block-active-filters__title,
+	.wc-block-attribute-filter__title,
+	.wc-block-price-filter__title,
+	.wc-block-stock-filter__title {
+		@include font-size(regular);
+	}
+
+	.wc-block-active-filters .wc-block-active-filters__clear-all {
+		@include font-size(smaller);
+	}
+
+	.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
+		@include font-size(smaller);
+		padding: em($gap-smaller);
+	}
+
 	@media only screen and (min-width: 768px) {
 		.wc-block-grid__products .wc-block-grid__product-onsale {
 			@include font-size(small);
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
index 021968541c5..62161897562 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
@@ -125,7 +125,9 @@ const ActiveFiltersBlock = ( {
 	return (
 		<>
 			{ ! isEditor && blockAttributes.heading && (
-				<TagName>{ blockAttributes.heading }</TagName>
+				<TagName className="wc-block-active-filters__title">
+					{ blockAttributes.heading }
+				</TagName>
 			) }
 			<div className="wc-block-active-filters">
 				<ul className={ listClasses }>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js
index 824ad2cad57..e4b76cb8216 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js
@@ -78,6 +78,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 		<div className={ className }>
 			{ getInspectorControls() }
 			<BlockTitle
+				className="wc-block-active-filters__title"
 				headingLevel={ headingLevel }
 				heading={ heading }
 				onChange={ ( value ) => setAttributes( { heading: value } ) }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
index aae8a034a8f..86084a54cce 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
@@ -327,7 +327,9 @@ const AttributeFilterBlock = ( {
 	return (
 		<>
 			{ ! isEditor && blockAttributes.heading && (
-				<TagName>{ blockAttributes.heading }</TagName>
+				<TagName className="wc-block-attribute-filter__title">
+					{ blockAttributes.heading }
+				</TagName>
 			) }
 			<div className="wc-block-attribute-filter">
 				{ blockAttributes.displayStyle === 'dropdown' ? (
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
index 8df4bdb00d1..26d665dac94 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
@@ -386,6 +386,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			) : (
 				<div className={ className }>
 					<BlockTitle
+						className="wc-block-attribute-filter__title"
 						headingLevel={ headingLevel }
 						heading={ heading }
 						onChange={ ( value ) =>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
index 757c962e278..2d8f67df180 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
@@ -151,7 +151,9 @@ const PriceFilterBlock = ( { attributes, isEditor = false } ) => {
 	return (
 		<>
 			{ ! isEditor && attributes.heading && (
-				<TagName>{ attributes.heading }</TagName>
+				<TagName className="wc-block-price-filter__title">
+					{ attributes.heading }
+				</TagName>
 			) }
 			<div className="wc-block-price-slider">
 				<PriceSlider
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js
index 6ee7373a0f3..52938d1a6df 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js
@@ -158,6 +158,7 @@ export default function ( { attributes, setAttributes } ) {
 				<div className={ className }>
 					{ getInspectorControls() }
 					<BlockTitle
+						className="wc-block-price-filter__title"
 						headingLevel={ headingLevel }
 						heading={ heading }
 						onChange={ ( value ) =>
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.js b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.js
index 1315dfe5710..a624d17d871 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.js
@@ -258,7 +258,9 @@ const StockStatusFilterBlock = ( {
 	return (
 		<>
 			{ ! isEditor && blockAttributes.heading && (
-				<TagName>{ blockAttributes.heading }</TagName>
+				<TagName className="wc-block-stock-filter__title">
+					{ blockAttributes.heading }
+				</TagName>
 			) }
 			<div className="wc-block-stock-filter">
 				<CheckboxList
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js
index 2510ad48b34..e8241e386c7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js
+++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js
@@ -118,6 +118,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 					) }
 				>
 					<BlockTitle
+						className="wc-block-stock-filter__title"
 						headingLevel={ headingLevel }
 						heading={ heading }
 						onChange={ ( value ) =>
diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
index faa9abdcd55..18ccd0f605d 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
@@ -3,7 +3,6 @@
  */
 import PropTypes from 'prop-types';
 import { PlainText } from '@wordpress/block-editor';
-import classnames from 'classnames';
 import { withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -21,7 +20,7 @@ const BlockTitle = ( {
 } ) => {
 	const TagName = `h${ headingLevel }`;
 	return (
-		<TagName>
+		<TagName className={ className }>
 			<label
 				className="screen-reader-text"
 				htmlFor={ `block-title-${ instanceId }` }
@@ -30,10 +29,7 @@ const BlockTitle = ( {
 			</label>
 			<PlainText
 				id={ `block-title-${ instanceId }` }
-				className={ classnames(
-					'wc-block-editor-components-title',
-					className
-				) }
+				className="wc-block-editor-components-title"
 				value={ heading }
 				onChange={ onChange }
 			/>