Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 543eb3b

Browse files
ryelleryelle
authored
Add styles for better reusable block preview (#210)
* Add styles for better reusable block preview * Fix class names for legacy block preview style * Check that `products` exists before checking length * Fix stylelint issues
1 parent 5420bb2 commit 543eb3b

File tree

3 files changed

+131
-23
lines changed

3 files changed

+131
-23
lines changed

‎assets/css/product-category-block.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,48 @@
22
// @todo Move this to a separate file so we can build a cacheable single stylesheet for all blocks.
33
@import "../../node_modules/@woocommerce/components/build-style/style.css";
44

5+
// Hack to hide preview overflow.
6+
.editor-block-preview__content {
7+
overflow: hidden;
8+
}
9+
510
.wc-block-products-category {
611
overflow: hidden;
712

813
&.components-placeholder {
914
padding: 2em 1em;
1015
}
16+
17+
.editor-block-preview & {
18+
min-width: 5em;
19+
20+
.wc-product-preview__title,
21+
.wc-product-preview__price,
22+
.wc-product-preview__add-to-cart {
23+
font-size: 0.6em;
24+
}
25+
26+
&.cols-2 {
27+
min-width: 2 * 5em;
28+
}
29+
&.cols-3 {
30+
min-width: 3 * 5em;
31+
}
32+
&.cols-4 {
33+
min-width: 4 * 5em;
34+
}
35+
&.cols-5 {
36+
min-width: 5 * 5em;
37+
}
38+
&.cols-6 {
39+
min-width: 6 * 5em;
40+
}
41+
42+
&.is-loading,
43+
&.is-not-found {
44+
min-width: auto;
45+
}
46+
}
1147
}
1248

1349
.wc-block-products-category__selection {

‎assets/css/products-block.scss‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $color__alt-background: #fdfdfd;
3131
margin-right: 0;
3232
}
3333

34-
&:nth-of-type(2n+1) {
34+
&:nth-of-type(2n + 1) {
3535
clear: both;
3636
}
3737
}
@@ -43,7 +43,7 @@ $color__alt-background: #fdfdfd;
4343
margin-right: 0;
4444
}
4545

46-
&:nth-of-type(3n+1) {
46+
&:nth-of-type(3n + 1) {
4747
clear: both;
4848
}
4949
}
@@ -55,7 +55,7 @@ $color__alt-background: #fdfdfd;
5555
margin-right: 0;
5656
}
5757

58-
&:nth-of-type(4n+1) {
58+
&:nth-of-type(4n + 1) {
5959
clear: both;
6060
}
6161
}
@@ -67,7 +67,7 @@ $color__alt-background: #fdfdfd;
6767
margin-right: 0;
6868
}
6969

70-
&:nth-of-type(5n+1) {
70+
&:nth-of-type(5n + 1) {
7171
clear: both;
7272
}
7373

@@ -83,7 +83,7 @@ $color__alt-background: #fdfdfd;
8383
margin-right: 0;
8484
}
8585

86-
&:nth-of-type(6n+1) {
86+
&:nth-of-type(6n + 1) {
8787
clear: both;
8888
}
8989

@@ -103,6 +103,32 @@ $color__alt-background: #fdfdfd;
103103
margin-top: 0.5em;
104104
margin-bottom: 1em;
105105
}
106+
107+
.editor-block-preview & {
108+
min-width: 5em;
109+
110+
.product-title,
111+
.product-price,
112+
.product-add-to-cart {
113+
font-size: 0.6em !important;
114+
}
115+
116+
&.cols-2 {
117+
min-width: 2 * 5em;
118+
}
119+
&.cols-3 {
120+
min-width: 3 * 5em;
121+
}
122+
&.cols-4 {
123+
min-width: 4 * 5em;
124+
}
125+
&.cols-5 {
126+
min-width: 5 * 5em;
127+
}
128+
&.cols-6 {
129+
min-width: 6 * 5em;
130+
}
131+
}
106132
}
107133

108134
/**

‎assets/js/product-category-block.js‎

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,10 @@ export default class ProductByCategoryBlock extends Component {
8585

8686
return (
8787
<InspectorControls key="inspector">
88-
<PanelBody title={ __( 'Product Category', 'woo-gutenberg-products-block' ) } initialOpen={ false }>
88+
<PanelBody
89+
title={ __( 'Product Category', 'woo-gutenberg-products-block' ) }
90+
initialOpen={ false }
91+
>
8992
<ProductCategoryControl
9093
selected={ attributes.categories }
9194
onChange={ ( value = [] ) => {
@@ -94,7 +97,10 @@ export default class ProductByCategoryBlock extends Component {
9497
} }
9598
/>
9699
</PanelBody>
97-
<PanelBody title={ __( 'Layout', 'woo-gutenberg-products-block' ) } initialOpen>
100+
<PanelBody
101+
title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
102+
initialOpen
103+
>
98104
<RangeControl
99105
label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
100106
value={ columns }
@@ -110,33 +116,51 @@ export default class ProductByCategoryBlock extends Component {
110116
max={ wc_product_block_data.max_rows }
111117
/>
112118
</PanelBody>
113-
<PanelBody title={ __( 'Order By', 'woo-gutenberg-products-block' ) } initialOpen={ false }>
119+
<PanelBody
120+
title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
121+
initialOpen={ false }
122+
>
114123
<SelectControl
115124
label={ __( 'Order products by', 'woo-gutenberg-products-block' ) }
116125
value={ orderby }
117126
options={ [
118127
{
119-
label: __( 'Newness - newest first', 'woo-gutenberg-products-block' ),
128+
label: __(
129+
'Newness - newest first',
130+
'woo-gutenberg-products-block'
131+
),
120132
value: 'date',
121133
},
122134
{
123-
label: __( 'Price - low to high', 'woo-gutenberg-products-block' ),
135+
label: __(
136+
'Price - low to high',
137+
'woo-gutenberg-products-block'
138+
),
124139
value: 'price_asc',
125140
},
126141
{
127-
label: __( 'Price - high to low', 'woo-gutenberg-products-block' ),
142+
label: __(
143+
'Price - high to low',
144+
'woo-gutenberg-products-block'
145+
),
128146
value: 'price_desc',
129147
},
130148
{
131-
label: __( 'Rating - highest first', 'woo-gutenberg-products-block' ),
149+
label: __(
150+
'Rating - highest first',
151+
'woo-gutenberg-products-block'
152+
),
132153
value: 'rating',
133154
},
134155
{
135156
label: __( 'Sales - most first', 'woo-gutenberg-products-block' ),
136157
value: 'popularity',
137158
},
138159
{
139-
label: __( 'Title - alphabetical', 'woo-gutenberg-products-block' ),
160+
label: __(
161+
'Title - alphabetical',
162+
'woo-gutenberg-products-block'
163+
),
140164
value: 'title',
141165
},
142166
{
@@ -155,7 +179,9 @@ export default class ProductByCategoryBlock extends Component {
155179
const { attributes, debouncedSpeak, setAttributes } = this.props;
156180
const onDone = () => {
157181
setAttributes( { editMode: false } );
158-
debouncedSpeak( __( 'Showing product block preview.', 'woo-gutenberg-products-block' ) );
182+
debouncedSpeak(
183+
__( 'Showing product block preview.', 'woo-gutenberg-products-block' )
184+
);
159185
};
160186

161187
return (
@@ -176,10 +202,7 @@ export default class ProductByCategoryBlock extends Component {
176202
setAttributes( { categories: ids } );
177203
} }
178204
/>
179-
<Button
180-
isDefault
181-
onClick={ onDone }
182-
>
205+
<Button isDefault onClick={ onDone }>
183206
{ __( 'Done', 'woo-gutenberg-products-block' ) }
184207
</Button>
185208
</div>
@@ -191,6 +214,17 @@ export default class ProductByCategoryBlock extends Component {
191214
const { setAttributes } = this.props;
192215
const { columns, align, editMode } = this.props.attributes;
193216
const { loaded, products } = this.state;
217+
const classes = [ 'wc-block-products-category' ];
218+
if ( columns ) {
219+
classes.push( `cols-${ columns }` );
220+
}
221+
if ( products && ! products.length ) {
222+
if ( ! loaded ) {
223+
classes.push( 'is-loading' );
224+
} else {
225+
classes.push( 'is-not-found' );
226+
}
227+
}
194228

195229
return (
196230
<Fragment>
@@ -215,20 +249,26 @@ export default class ProductByCategoryBlock extends Component {
215249
{ editMode ? (
216250
this.renderEditMode()
217251
) : (
218-
<div className={ `wc-block-products-category cols-${ columns }` }>
252+
<div className={ classes.join( ' ' ) }>
219253
{ products.length ? (
220254
products.map( ( product ) => (
221255
<ProductPreview product={ product } key={ product.id } />
222256
) )
223257
) : (
224258
<Placeholder
225259
icon="category"
226-
label={ __( 'Products by Category', 'woo-gutenberg-products-block' ) }
260+
label={ __(
261+
'Products by Category',
262+
'woo-gutenberg-products-block'
263+
) }
227264
>
228265
{ ! loaded ? (
229266
<Spinner />
230267
) : (
231-
__( 'No products in this category.', 'woo-gutenberg-products-block' )
268+
__(
269+
'No products in this category.',
270+
'woo-gutenberg-products-block'
271+
)
232272
) }
233273
</Placeholder>
234274
) }
@@ -252,7 +292,9 @@ ProductByCategoryBlock.propTypes = {
252292
debouncedSpeak: PropTypes.func.isRequired,
253293
};
254294

255-
const WrappedProductByCategoryBlock = withSpokenMessages( ProductByCategoryBlock );
295+
const WrappedProductByCategoryBlock = withSpokenMessages(
296+
ProductByCategoryBlock
297+
);
256298

257299
/**
258300
* Register and run the "Products by Category" block.
@@ -301,6 +343,10 @@ registerBlockType( 'woocommerce/product-category', {
301343
const {
302344
align,
303345
} = props.attributes; /* eslint-disable-line react/prop-types */
304-
return <RawHTML className={ align ? `align${ align }` : '' }>{ getShortcode( props ) }</RawHTML>;
346+
return (
347+
<RawHTML className={ align ? `align${ align }` : '' }>
348+
{ getShortcode( props ) }
349+
</RawHTML>
350+
);
305351
},
306352
} );

0 commit comments

Comments
 (0)