Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Niels Lange 2021-09-15 13:35:06 +02:00 committed by GitHub
parent e216a7c90c
commit 74bf23ce35
11 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/woocommerce-blocks/assets/css/editor.scss
View File

@ -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);
}
}
}

20
plugins/woocommerce-blocks/assets/css/style.scss
View File

@ -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);

4
plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.js
View File

@ -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 }>

1
plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js
View File

@ -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 } ) }

4
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.js
View File

@ -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' ? (

1
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
View File

@ -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 ) =>

4
plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.js
View File

@ -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

1
plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js
View File

@ -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 ) =>

4
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.js
View File

@ -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

1
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js
View File

@ -118,6 +118,7 @@ const Edit = ( { attributes, setAttributes } ) => {
) }
>
<BlockTitle
className="wc-block-stock-filter__title"
headingLevel={ headingLevel }
heading={ heading }
onChange={ ( value ) =>

8
plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
View File

@ -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 }
/>