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

Add grid block previews using an SVG image (https://github.com/woocommerce/woocommerce-blocks/pull/1118) 

* Implement preview for on-sale products

* Previews for other grid blocks

* Shared previews

* Fix SVG

* add svg as asset

* Add image via path

* cleanup
This commit is contained in:
Mike Jolley 2019-11-15 15:16:18 +00:00 committed by GitHub
parent d613d2fde6
commit bf370806ed
25 changed files with 209 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
plugins/woocommerce-blocks/assets/img/grid.svg Normal file
View File

@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" width="231" height="252" fill="none">
<rect width="65.374" height="65.374" x=".162" y=".779" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="9.216" y="76.153" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="1.565" y="101.448" fill="#E1E3E6" rx="5"/>
<rect width="65.374" height="65.374" x=".162" y="136.277" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="9.216" y="211.651" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="1.565" y="236.946" fill="#E1E3E6" rx="5"/>
<rect width="65.374" height="65.374" x="82.478" y=".779" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="91.532" y="76.153" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="83.882" y="101.448" fill="#E1E3E6" rx="5"/>
<rect width="65.374" height="65.374" x="82.478" y="136.277" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="91.532" y="211.651" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="83.882" y="236.946" fill="#E1E3E6" rx="5"/>
<rect width="65.374" height="65.374" x="164.788" y=".779" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="173.843" y="76.153" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="166.192" y="101.448" fill="#E1E3E6" rx="5"/>
<rect width="65.374" height="65.374" x="164.788" y="136.277" fill="#E1E3E6" rx="3"/>
<rect width="47.266" height="5.148" x="173.843" y="211.651" fill="#E1E3E6" rx="2.574"/>
<rect width="62.8" height="15" x="166.192" y="236.946" fill="#E1E3E6" rx="5"/>
<rect width="6.177" height="6.177" x="13.283" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="21.498" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="29.713" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="37.927" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="46.238" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="95.599" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="103.814" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="112.029" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="120.243" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="128.554" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="177.909" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="186.124" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="194.339" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="202.553" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="210.864" y="86.301" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="13.283" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="21.498" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="29.713" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="37.927" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="46.238" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="95.599" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="103.814" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="112.029" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="120.243" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="128.554" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="177.909" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="186.124" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="194.339" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="202.553" y="221.798" fill="#E1E3E6" rx="3"/>
<rect width="6.177" height="6.177" x="210.864" y="221.798" fill="#E1E3E6" rx="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

15
plugins/woocommerce-blocks/assets/js/base/hooks/use-store-products.js
View File

@ -28,15 +28,16 @@ export const useStoreProducts = ( query ) => {
namespace: '/wc/store',
resourceName: 'products',
};
const { results: products, isLoading: productsLoading } = useCollection(
{ ...collectionOptions, query }
);
const { results: products, isLoading: productsLoading } = useCollection( {
...collectionOptions,
query,
} );
// eslint-disable-next-line no-unused-vars, camelcase
const { order, orderby, page, per_page, ...totalQuery } = query;
const { value: totalProducts } = useCollectionHeader(
'x-wp-total',
{ ...collectionOptions, query: totalQuery }
);
const { value: totalProducts } = useCollectionHeader( 'x-wp-total', {
...collectionOptions,
query: totalQuery,
} );
return {
products,
totalProducts,

5
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js
View File

@ -24,6 +24,7 @@ import GridContentControl from '@woocommerce/block-components/grid-content-contr
import { IconWidgets } from '@woocommerce/block-components/icons';
import ProductsControl from '@woocommerce/block-components/products-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Hand-picked Products".
@ -159,6 +160,10 @@ class ProductsBlock extends Component {
const { attributes, name, setAttributes } = this.props;
const { editMode } = attributes;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
<BlockControls>

13
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/index.js
View File

@ -29,6 +29,11 @@ registerBlockType( 'woocommerce/handpicked-products', {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
/**
* Alignment of product grid
@ -89,6 +94,14 @@ registerBlockType( 'woocommerce/handpicked-products', {
type: 'boolean',
default: false,
},
/**
* Are we previewing?
*/
isPreview: {
type: 'boolean',
default: false,
},
},
deprecated: [

5
plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/block.js
View File

@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import GridContentControl from '@woocommerce/block-components/grid-content-control';
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Best Selling Products".
@ -75,6 +76,10 @@ class ProductBestSellersBlock extends Component {
render() {
const { attributes, name } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
{ this.getInspectorControls() }

5
plugins/woocommerce-blocks/assets/js/blocks/product-best-sellers/index.js
View File

@ -31,6 +31,11 @@ registerBlockType( 'woocommerce/product-best-sellers', {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
...sharedAttributes,
},

6
plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js
View File

@ -21,6 +21,7 @@ import GridContentControl from '@woocommerce/block-components/grid-content-contr
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Products by Category".
@ -268,6 +269,11 @@ class ProductByCategoryBlock extends Component {
render() {
const { isEditing } = this.state;
const { attributes } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>

5
plugins/woocommerce-blocks/assets/js/blocks/product-category/index.js
View File

@ -34,6 +34,11 @@ registerBlockType( 'woocommerce/product-category', {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
...sharedAttributes,

5
plugins/woocommerce-blocks/assets/js/blocks/product-new/block.js
View File

@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import GridContentControl from '@woocommerce/block-components/grid-content-control';
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Newest Products".
@ -75,6 +76,10 @@ class ProductNewestBlock extends Component {
render() {
const { attributes, name } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
{ this.getInspectorControls() }

5
plugins/woocommerce-blocks/assets/js/blocks/product-new/index.js
View File

@ -34,6 +34,11 @@ registerBlockType( 'woocommerce/product-new', {
attributes: {
...sharedAttributes,
},
example: {
attributes: {
isPreview: true,
},
},
transforms: {
from: [
{

5
plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/block.js
View File

@ -10,6 +10,7 @@ import GridContentControl from '@woocommerce/block-components/grid-content-contr
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "On Sale Products".
@ -86,6 +87,10 @@ class ProductOnSaleBlock extends Component {
render() {
const { attributes, name } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
{ this.getInspectorControls() }

5
plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js
View File

@ -42,6 +42,11 @@ registerBlockType( 'woocommerce/product-on-sale', {
default: 'date',
},
},
example: {
attributes: {
isPreview: true,
},
},
transforms: {
from: [
{

6
plugins/woocommerce-blocks/assets/js/blocks/product-tag/block.js
View File

@ -23,6 +23,7 @@ import GridLayoutControl from '@woocommerce/block-components/grid-layout-control
import ProductTagControl from '@woocommerce/block-components/product-tag-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { IconProductTag } from '@woocommerce/block-components/icons';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Products by Tag".
@ -248,6 +249,11 @@ class ProductsByTagBlock extends Component {
render() {
const { isEditing } = this.state;
const { attributes } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>

13
plugins/woocommerce-blocks/assets/js/blocks/product-tag/index.js
View File

@ -31,6 +31,11 @@ registerBlockType( 'woocommerce/product-tag', {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
/**
* Number of columns.
@ -92,6 +97,14 @@ registerBlockType( 'woocommerce/product-tag', {
type: 'string',
default: 'date',
},
/**
* Are we previewing?
*/
isPreview: {
type: 'boolean',
default: false,
},
},
/**

5
plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/block.js
View File

@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
import GridContentControl from '@woocommerce/block-components/grid-content-control';
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Top Rated Products".
@ -75,6 +76,10 @@ class ProductTopRatedBlock extends Component {
render() {
const { name, attributes } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
{ this.getInspectorControls() }

5
plugins/woocommerce-blocks/assets/js/blocks/product-top-rated/index.js
View File

@ -33,6 +33,11 @@ registerBlockType( blockTypeName, {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
...sharedAttributes,
},

5
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js
View File

@ -22,6 +22,7 @@ import GridContentControl from '@woocommerce/block-components/grid-content-contr
import GridLayoutControl from '@woocommerce/block-components/grid-layout-control';
import ProductAttributeTermControl from '@woocommerce/block-components/product-attribute-term-control';
import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
import { gridBlockPreview } from '@woocommerce/resource-previews';
/**
* Component to handle edit mode of "Products by Attribute".
@ -159,6 +160,10 @@ class ProductsByAttributeBlock extends Component {
const { attributes, name, setAttributes } = this.props;
const { editMode } = attributes;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
return (
<Fragment>
<BlockControls>

13
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/index.js
View File

@ -31,6 +31,11 @@ registerBlockType( blockTypeName, {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
/**
* Product attributes, used to display only products with the given attributes.
@ -100,6 +105,14 @@ registerBlockType( blockTypeName, {
type: 'boolean',
default: false,
},
/**
* Are we previewing?
*/
isPreview: {
type: 'boolean',
default: false,
},
},
deprecated: [

6
plugins/woocommerce-blocks/assets/js/blocks/products/all-products/block.js
View File

@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import ProductListContainer from '@woocommerce/base-components/product-list/container';
import { InnerBlockConfigurationProvider } from '@woocommerce/base-context/inner-block-configuration-context';
import { ProductLayoutContextProvider } from '@woocommerce/base-context/product-layout-context';
import { gridBlockPreview } from '@woocommerce/resource-previews';
import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
const layoutContextConfig = {
@ -27,6 +28,11 @@ class Block extends Component {
render() {
const { attributes, urlParameterSuffix } = this.props;
if ( attributes.isPreview ) {
return gridBlockPreview;
}
/**
* Todo classes
*

5
plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js
View File

@ -33,6 +33,11 @@ registerBlockType( 'woocommerce/all-products', {
align: [ 'wide', 'full' ],
html: false,
},
example: {
attributes: {
isPreview: true,
},
},
attributes: {
...sharedAttributes,
},

8
plugins/woocommerce-blocks/assets/js/blocks/products/attributes.js
View File

@ -58,4 +58,12 @@ export default {
type: 'array',
default: DEFAULT_PRODUCT_LIST_LAYOUT,
},
/**
* Are we previewing?
*/
isPreview: {
type: 'boolean',
default: false,
},
};

16
plugins/woocommerce-blocks/assets/js/previews/grid-block.js Normal file
View File

@ -0,0 +1,16 @@
/**
* External dependencies
*/
import { WC_BLOCKS_ASSET_URL } from '@woocommerce/block-settings';
export const gridBlockPreview = (
<img
src={ WC_BLOCKS_ASSET_URL + 'img/grid.svg' }
alt="Grid Preview"
width="230"
height="250"
style={ {
width: '100%',
} }
/>
);

1
plugins/woocommerce-blocks/assets/js/previews/index.js
View File

@ -1,3 +1,4 @@
export { previewProducts } from './products';
export { previewReviews } from './reviews';
export { gridBlockPreview } from './grid-block';
export { previewCategories } from './categories';

8
plugins/woocommerce-blocks/assets/js/utils/shared-attributes.js
View File

@ -64,4 +64,12 @@ export default {
button: true,
},
},
/**
* Are we previewing?
*/
isPreview: {
type: 'boolean',
default: false,
},
};

1
plugins/woocommerce-blocks/src/BlockTypes/AbstractProductGrid.php
View File

@ -55,6 +55,7 @@ abstract class AbstractProductGrid extends AbstractDynamicBlock {
'contentVisibility' => $this->get_schema_content_visibility(),
'align' => $this->get_schema_align(),
'alignButtons' => $this->get_schema_boolean( false ),
'isPreview' => $this->get_schema_boolean( false ),
);
}