Limit CSS styles to WooCommerce Block icons only (woocommerce#5363)

* Limit CSS styles to WooCommerce Block icons only * Update assets/css/editor.scss Co-authored-by: Albert Juhé Lluveras <[email protected]> Co-authored-by: Albert Juhé Lluveras <[email protected]>
jonny-bull · Dec 14, 2021 · 6507ffb · 6507ffb
1 parent 9034cec
commit 6507ffb
Show file tree

Hide file tree

Showing 76 changed files with 390 additions and 162 deletions.
diff --git a/assets/css/editor.scss b/assets/css/editor.scss
@@ -45,11 +45,14 @@
 	}
 }
 
-// Display white icon when block is selected in list view.
+svg.wc-block-editor-components-block-icon {
+	color: $studio-woocommerce-purple-50;
+}
+
 .block-editor-list-view-leaf.is-selected {
 	.block-editor-list-view-block-contents {
-		svg {
-			fill: #fff;
+		svg.wc-block-editor-components-block-icon {
+			color: currentColor;
 		}
 	}
 }

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js b/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js
@@ -5,7 +5,12 @@ import { __ } from '@wordpress/i18n';
 import { cart, Icon } from '@woocommerce/icons';
 
 export const BLOCK_TITLE = __( 'Add to Cart', 'woo-gutenberg-products-block' );
-export const BLOCK_ICON = <Icon srcElement={ cart } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ cart }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Displays an add to cart button. Optionally displays other add to cart form elements.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	edit,
 	attributes,
 };

diff --git a/assets/js/atomic/blocks/product-elements/button/constants.js b/assets/js/atomic/blocks/product-elements/button/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Add to Cart Button',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ cart } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ cart }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display a call to action button which either adds the product to the cart, or links to the product page.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/button/index.js b/assets/js/atomic/blocks/product-elements/button/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/category-list/constants.tsx b/assets/js/atomic/blocks/product-elements/category-list/constants.tsx
@@ -8,7 +8,12 @@ export const BLOCK_TITLE: string = __(
 	'Product Category List',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON: JSX.Element = <Icon srcElement={ folder } />;
+export const BLOCK_ICON: JSX.Element = (
+	<Icon
+		srcElement={ folder }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION: string = __(
 	'Display a list of categories belonging to a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/category-list/index.ts b/assets/js/atomic/blocks/product-elements/category-list/index.ts
@@ -20,10 +20,7 @@ const blockConfig: BlockConfiguration = {
 	...sharedConfig,
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/image/constants.js b/assets/js/atomic/blocks/product-elements/image/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Image',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ image } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ image }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display the main product image',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/image/index.js b/assets/js/atomic/blocks/product-elements/image/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/price/constants.js b/assets/js/atomic/blocks/product-elements/price/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Price',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ bill } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ bill }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display the price of a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/price/index.js b/assets/js/atomic/blocks/product-elements/price/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/rating/constants.js b/assets/js/atomic/blocks/product-elements/rating/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Rating',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ star } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ star }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display the average rating of a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/rating/index.js b/assets/js/atomic/blocks/product-elements/rating/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/constants.js b/assets/js/atomic/blocks/product-elements/sale-badge/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'On-Sale Badge',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ tag }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Displays an on-sale badge if the product is on-sale.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/index.js b/assets/js/atomic/blocks/product-elements/sale-badge/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	supports: {
 		html: false,
 	},

diff --git a/assets/js/atomic/blocks/product-elements/shared/config.tsx b/assets/js/atomic/blocks/product-elements/shared/config.tsx
@@ -19,8 +19,12 @@ const sharedConfig: Omit< BlockConfiguration, 'attributes' | 'title' > = {
 	category: 'woocommerce-product-elements',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
-		src: <Icon srcElement={ grid } />,
-		foreground: '#7f54b3',
+		src: (
+			<Icon
+				srcElement={ grid }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
 	supports: {
 		html: false,

diff --git a/assets/js/atomic/blocks/product-elements/sku/constants.js b/assets/js/atomic/blocks/product-elements/sku/constants.js
@@ -5,7 +5,12 @@ import { __ } from '@wordpress/i18n';
 import { barcode, Icon } from '@woocommerce/icons';
 
 export const BLOCK_TITLE = __( 'Product SKU', 'woo-gutenberg-products-block' );
-export const BLOCK_ICON = <Icon srcElement={ barcode } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ barcode }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display the SKU of a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/sku/index.js b/assets/js/atomic/blocks/product-elements/sku/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js b/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Stock Indicator',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ box } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ box }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display product stock status.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/index.js b/assets/js/atomic/blocks/product-elements/stock-indicator/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/summary/constants.js b/assets/js/atomic/blocks/product-elements/summary/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Summary',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ notes } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ notes }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display a short description about a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/summary/index.js b/assets/js/atomic/blocks/product-elements/summary/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/tag-list/constants.js b/assets/js/atomic/blocks/product-elements/tag-list/constants.js
@@ -8,7 +8,12 @@ export const BLOCK_TITLE = __(
 	'Product Tag List',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_ICON = (
+	<Icon
+		srcElement={ tag }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION = __(
 	'Display a list of tags belonging to a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/tag-list/index.js b/assets/js/atomic/blocks/product-elements/tag-list/index.js
@@ -18,10 +18,7 @@ import {
 const blockConfig = {
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 };

diff --git a/assets/js/atomic/blocks/product-elements/title/constants.tsx b/assets/js/atomic/blocks/product-elements/title/constants.tsx
@@ -8,7 +8,12 @@ export const BLOCK_TITLE: string = __(
 	'Product Title',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON: JSX.Element = <Icon srcElement={ bookmark } />;
+export const BLOCK_ICON: JSX.Element = (
+	<Icon
+		srcElement={ bookmark }
+		className="wc-block-editor-components-block-icon"
+	/>
+);
 export const BLOCK_DESCRIPTION: string = __(
 	'Display the title of a product.',
 	'woo-gutenberg-products-block'

diff --git a/assets/js/atomic/blocks/product-elements/title/index.ts b/assets/js/atomic/blocks/product-elements/title/index.ts
@@ -21,10 +21,7 @@ const blockConfig: BlockConfiguration = {
 	apiVersion: 2,
 	title,
 	description,
-	icon: {
-		src: icon,
-		foreground: '#7f54b3',
-	},
+	icon: { src: icon },
 	attributes,
 	edit,
 	supports: isFeaturePluginBuild()

diff --git a/assets/js/blocks/active-filters/index.js b/assets/js/blocks/active-filters/index.js
@@ -14,8 +14,12 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/active-filters', {
 	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon srcElement={ toggle } />,
-		foreground: '#7f54b3',
+		src: (
+			<Icon
+				srcElement={ toggle }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],

diff --git a/assets/js/blocks/attribute-filter/index.js b/assets/js/blocks/attribute-filter/index.js
@@ -14,8 +14,12 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/attribute-filter', {
 	title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon srcElement={ server } />,
-		foreground: '#7f54b3',
+		src: (
+			<Icon
+				srcElement={ server }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],

diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart-checkout/cart/index.js
@@ -21,8 +21,12 @@ import './inner-blocks';
 const settings = {
 	title: __( 'Cart', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Icon srcElement={ cart } />,
-		foreground: '#7f54b3',
+		src: (
+			<Icon
+				srcElement={ cart }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],