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

Commit

Permalink
Add styles for better reusable block preview (#210)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@ryelle
ryelle authored Dec 4, 2018
1 parent 5420bb2 commit 543eb3b
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 23 deletions.
36 changes: 36 additions & 0 deletions assets/css/product-category-block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,48 @@
// @todo Move this to a separate file so we can build a cacheable single stylesheet for all blocks.
@import "../../node_modules/@woocommerce/components/build-style/style.css";

// Hack to hide preview overflow.
.editor-block-preview__content {
overflow: hidden;
}

.wc-block-products-category {
overflow: hidden;

&.components-placeholder {
padding: 2em 1em;
}

.editor-block-preview & {
min-width: 5em;

.wc-product-preview__title,
.wc-product-preview__price,
.wc-product-preview__add-to-cart {
font-size: 0.6em;
}

&.cols-2 {
min-width: 2 * 5em;
}
&.cols-3 {
min-width: 3 * 5em;
}
&.cols-4 {
min-width: 4 * 5em;
}
&.cols-5 {
min-width: 5 * 5em;
}
&.cols-6 {
min-width: 6 * 5em;
}

&.is-loading,
&.is-not-found {
min-width: auto;
}
}
}

.wc-block-products-category__selection {
Expand Down
36 changes: 31 additions & 5 deletions assets/css/products-block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $color__alt-background: #fdfdfd;
margin-right: 0;
}

&:nth-of-type(2n+1) {
&:nth-of-type(2n + 1) {
clear: both;
}
}
Expand All @@ -43,7 +43,7 @@ $color__alt-background: #fdfdfd;
margin-right: 0;
}

&:nth-of-type(3n+1) {
&:nth-of-type(3n + 1) {
clear: both;
}
}
Expand All @@ -55,7 +55,7 @@ $color__alt-background: #fdfdfd;
margin-right: 0;
}

&:nth-of-type(4n+1) {
&:nth-of-type(4n + 1) {
clear: both;
}
}
Expand All @@ -67,7 +67,7 @@ $color__alt-background: #fdfdfd;
margin-right: 0;
}

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

Expand All @@ -83,7 +83,7 @@ $color__alt-background: #fdfdfd;
margin-right: 0;
}

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

Expand All @@ -103,6 +103,32 @@ $color__alt-background: #fdfdfd;
margin-top: 0.5em;
margin-bottom: 1em;
}

.editor-block-preview & {
min-width: 5em;

.product-title,
.product-price,
.product-add-to-cart {
font-size: 0.6em !important;
}

&.cols-2 {
min-width: 2 * 5em;
}
&.cols-3 {
min-width: 3 * 5em;
}
&.cols-4 {
min-width: 4 * 5em;
}
&.cols-5 {
min-width: 5 * 5em;
}
&.cols-6 {
min-width: 6 * 5em;
}
}
}

/**
Expand Down
82 changes: 64 additions & 18 deletions assets/js/product-category-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,10 @@ export default class ProductByCategoryBlock extends Component {

return (
<InspectorControls key="inspector">
<PanelBody title={ __( 'Product Category', 'woo-gutenberg-products-block' ) } initialOpen={ false }>
<PanelBody
title={ __( 'Product Category', 'woo-gutenberg-products-block' ) }
initialOpen={ false }
>
<ProductCategoryControl
selected={ attributes.categories }
onChange={ ( value = [] ) => {
Expand All @@ -94,7 +97,10 @@ export default class ProductByCategoryBlock extends Component {
} }
/>
</PanelBody>
<PanelBody title={ __( 'Layout', 'woo-gutenberg-products-block' ) } initialOpen>
<PanelBody
title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
initialOpen
>
<RangeControl
label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
value={ columns }
Expand All @@ -110,33 +116,51 @@ export default class ProductByCategoryBlock extends Component {
max={ wc_product_block_data.max_rows }
/>
</PanelBody>
<PanelBody title={ __( 'Order By', 'woo-gutenberg-products-block' ) } initialOpen={ false }>
<PanelBody
title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
initialOpen={ false }
>
<SelectControl
label={ __( 'Order products by', 'woo-gutenberg-products-block' ) }
value={ orderby }
options={ [
{
label: __( 'Newness - newest first', 'woo-gutenberg-products-block' ),
label: __(
'Newness - newest first',
'woo-gutenberg-products-block'
),
value: 'date',
},
{
label: __( 'Price - low to high', 'woo-gutenberg-products-block' ),
label: __(
'Price - low to high',
'woo-gutenberg-products-block'
),
value: 'price_asc',
},
{
label: __( 'Price - high to low', 'woo-gutenberg-products-block' ),
label: __(
'Price - high to low',
'woo-gutenberg-products-block'
),
value: 'price_desc',
},
{
label: __( 'Rating - highest first', 'woo-gutenberg-products-block' ),
label: __(
'Rating - highest first',
'woo-gutenberg-products-block'
),
value: 'rating',
},
{
label: __( 'Sales - most first', 'woo-gutenberg-products-block' ),
value: 'popularity',
},
{
label: __( 'Title - alphabetical', 'woo-gutenberg-products-block' ),
label: __(
'Title - alphabetical',
'woo-gutenberg-products-block'
),
value: 'title',
},
{
Expand All @@ -155,7 +179,9 @@ export default class ProductByCategoryBlock extends Component {
const { attributes, debouncedSpeak, setAttributes } = this.props;
const onDone = () => {
setAttributes( { editMode: false } );
debouncedSpeak( __( 'Showing product block preview.', 'woo-gutenberg-products-block' ) );
debouncedSpeak(
__( 'Showing product block preview.', 'woo-gutenberg-products-block' )
);
};

return (
Expand All @@ -176,10 +202,7 @@ export default class ProductByCategoryBlock extends Component {
setAttributes( { categories: ids } );
} }
/>
<Button
isDefault
onClick={ onDone }
>
<Button isDefault onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>
Expand All @@ -191,6 +214,17 @@ export default class ProductByCategoryBlock extends Component {
const { setAttributes } = this.props;
const { columns, align, editMode } = this.props.attributes;
const { loaded, products } = this.state;
const classes = [ 'wc-block-products-category' ];
if ( columns ) {
classes.push( `cols-${ columns }` );
}
if ( products && ! products.length ) {
if ( ! loaded ) {
classes.push( 'is-loading' );
} else {
classes.push( 'is-not-found' );
}
}

return (
<Fragment>
Expand All @@ -215,20 +249,26 @@ export default class ProductByCategoryBlock extends Component {
{ editMode ? (
this.renderEditMode()
) : (
<div className={ `wc-block-products-category cols-${ columns }` }>
<div className={ classes.join( ' ' ) }>
{ products.length ? (
products.map( ( product ) => (
<ProductPreview product={ product } key={ product.id } />
) )
) : (
<Placeholder
icon="category"
label={ __( 'Products by Category', 'woo-gutenberg-products-block' ) }
label={ __(
'Products by Category',
'woo-gutenberg-products-block'
) }
>
{ ! loaded ? (
<Spinner />
) : (
__( 'No products in this category.', 'woo-gutenberg-products-block' )
__(
'No products in this category.',
'woo-gutenberg-products-block'
)
) }
</Placeholder>
) }
Expand All @@ -252,7 +292,9 @@ ProductByCategoryBlock.propTypes = {
debouncedSpeak: PropTypes.func.isRequired,
};

const WrappedProductByCategoryBlock = withSpokenMessages( ProductByCategoryBlock );
const WrappedProductByCategoryBlock = withSpokenMessages(
ProductByCategoryBlock
);

/**
* Register and run the "Products by Category" block.
Expand Down Expand Up @@ -301,6 +343,10 @@ registerBlockType( 'woocommerce/product-category', {
const {
align,
} = props.attributes; /* eslint-disable-line react/prop-types */
return <RawHTML className={ align ? `align${ align }` : '' }>{ getShortcode( props ) }</RawHTML>;
return (
<RawHTML className={ align ? `align${ align }` : '' }>
{ getShortcode( props ) }
</RawHTML>
);
},
} );

0 comments on commit 543eb3b

Please sign in to comment.