Skip to content

Commit

Permalink
[Experimental] Utilize WP generated class names to style rating filte…
Browse files Browse the repository at this point in the history 
…r block. (#44072)
  • Loading branch information
@samueljseay
samueljseay committed Jan 29, 2024
1 parent 6f9e853 commit cfd8f36
Show file tree
Hide file tree
Showing 5 changed files with 7 additions and 181 deletions.
10 changes: 2 additions & 8 deletions ...ns/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/edit.tsx
View file
Expand Up @@ -21,13 +21,12 @@ import { Disabled, Notice, withSpokenMessages } from '@wordpress/components';
* Internal dependencies
*/
import { previewOptions } from './preview';
import './style.scss';
import { Attributes } from './types';
import { getActiveFilters } from './utils';
import { useSetWraperVisibility } from '../../../filter-wrapper/context';
import './editor.scss';
import { Inspector } from './components/inspector';
import { PreviewDropdown } from '../components/preview-dropdown';
import './style.scss';

const NoRatings = () => (
<Notice status="warning" isDismissible={ false }>
Expand All @@ -41,12 +40,9 @@ const NoRatings = () => (
);

const Edit = ( props: BlockEditProps< Attributes > ) => {
const { className } = props.attributes;
const blockAttributes = props.attributes;

const blockProps = useBlockProps( {
className: classnames( 'wc-block-rating-filter', className ),
} );
const blockProps = useBlockProps();

const isEditor = true;

Expand Down Expand Up @@ -167,7 +163,6 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
{ displayNoProductRatingsNotice && <NoRatings /> }
<div
className={ classnames(
'wc-block-rating-filter',
`style-${ blockAttributes.displayStyle }`,
{
'is-loading': isLoading,
Expand All @@ -192,7 +187,6 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
</>
) : (
<CheckboxList
className={ 'wc-block-rating-filter-list' }
options={ displayedOptions }
checked={ checked }
onChange={ () => {
Expand Down
3 changes: 0 additions & 3 deletions ...woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/editor.scss
View file

This file was deleted.

167 changes: 1 addition & 166 deletions .../woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/rating-filter/style.scss
View file
@@ -1,94 +1,4 @@
@import "../../../shared/styles/style";

.wc-block-rating-filter {
&.is-loading {
@include placeholder();
margin-top: $gap;
box-shadow: none;
border-radius: 0;
}

&.style-dropdown {
@include includeFormTokenFieldFix();
position: relative;
display: flex;
gap: $gap;
align-items: flex-start;

.wc-block-components-filter-submit-button {
height: 36px;
line-height: 1;
}

> svg {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}

.wc-block-components-product-rating__stars {
display: inline-block;
}

.wc-blocks-components-form-token-field-wrapper {
flex-grow: 1;
max-width: unset;
width: 0;
height: max-content;

&:not(.is-loading) {
border: 1px solid $gray-700 !important;
border-radius: 4px;
}

&.is-loading {
border-radius: em(4px);
}

.components-form-token-field {
border-radius: inherit;
}
}

.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
@include reset-color();
@include reset-typography();
border: 0;
padding: $gap-smaller;
border-radius: inherit;

.components-form-token-field__input {
@include font-size(small);

&::placeholder {
color: $black;
}
}

.components-form-token-field__suggestions-list {
border: 1px solid $gray-700;
border-radius: 4px;
margin-top: $gap-smaller;
max-height: 21em;

.components-form-token-field__suggestion {
color: $black;
border: 1px solid $gray-400;
border-radius: 4px;
margin: $gap-small;
padding: $gap-small;
}
}

.components-form-token-field__token,
.components-form-token-field__suggestion {
@include font-size(small);
}
}

.wp-block-woocommerce-product-filter-rating {
.wc-block-components-product-rating {
margin-bottom: 0;
display: flex;
Expand All @@ -98,78 +8,3 @@
margin-left: $gap-smallest;
}
}

.wc-blocks-components-form-token-field-wrapper:not(.single-selection) .components-form-token-field__input-container {
padding: $gap-smallest 30px $gap-smallest $gap-smaller;

.components-form-token-field__token-text {
background-color: $white;
border: 1px solid;
border-right: 0;
border-radius: 25px 0 0 25px;
padding: em($gap-smallest) em($gap-smaller) em($gap-smallest) em($gap-small);
line-height: 22px;
}

> .components-form-token-field__input {
margin: em($gap-smallest) 0;
}

.components-button.components-form-token-field__remove-token {
background-color: $white;
border: 1px solid;
border-left: 0;
border-radius: 0 25px 25px 0;
padding: 1px em($gap-smallest) 0 0;

&.has-icon svg {
background-color: $gray-200;
border-radius: 25px;
}
}
}

.wp-block-woocommerce-rating-filter {
margin-bottom: $gap-large;

.wc-block-rating-filter .wc-block-rating-filter-list li input,
.wc-block-rating-filter .wc-block-rating-filter-list li label {
cursor: pointer;
}
}

.wc-block-rating-filter__actions {
align-items: center;
display: flex;
gap: $gap;
justify-content: flex-end;
margin-top: $gap;

.wc-block-components-filter-submit-button {
margin-left: 0;

&:disabled {
opacity: 0.6;
cursor: auto;
}
}

// The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop.
button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button {
margin-left: 0;
margin-top: 0;
@include font-size(small);
}

.wc-block-rating-filter__button {
margin-top: em($gap-smaller);
padding: em($gap-smaller) em($gap);
@include font-size(small);
}
}

.editor-styles-wrapper .wc-block-rating-filter .wc-block-rating-filter__button {
margin-top: em($gap-smaller);
padding: em($gap-smaller) em($gap);
@include font-size(small);
}
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/44072-dev-unify-class-naming-rating-filter
View file
@@ -0,0 +1,4 @@
Significance: patch
Type: dev

[Experimental] Utilize WP generated class names to style rating filter block.
4 changes: 0 additions & 4 deletions plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterRating.php
View file
Expand Up @@ -128,7 +128,6 @@ function( $rating ) {
$wrapper_attributes = get_block_wrapper_attributes(
array(
'data-wc-interactive' => $this->get_full_block_name(),
'class' => 'wc-block-rating-filter',
'data-has-filter' => empty( $filtered_rating_counts ) ? 'no' : 'yes',
)
);
Expand All @@ -155,11 +154,8 @@ function( $rating ) {
return sprintf(
'<div %1$s>
%2$s
<div class="wc-block-rating-filter__controls">%3$s</div>
<div class="wc-block-rating-filter__actions"></div>
</div>',
$wrapper_attributes,
$content,
$input
);
}
Expand Down

0 comments on commit cfd8f36

Please sign in to comment.