Start using `block.json` for the `Products by Attribute` block (https://github.com/woocommerce/woocommerce-blocks/pull/6414)
This commit is contained in:
parent
bcdb2174aa
commit
d61c5116ad
|
@ -0,0 +1,88 @@
|
|||
{
|
||||
"name": "woocommerce/products-by-attribute",
|
||||
"title": "Products by Attribute",
|
||||
"category": "woocommerce",
|
||||
"keywords": [
|
||||
"WooCommerce"
|
||||
],
|
||||
"description": "Display a grid of products with selected attributes.",
|
||||
"supports": {
|
||||
"align": [
|
||||
"wide",
|
||||
"full"
|
||||
],
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"attributes": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"attrOperator": {
|
||||
"type": "string",
|
||||
"default": "any"
|
||||
},
|
||||
"columns": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"editMode": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"contentVisibility": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"image": true,
|
||||
"title": true,
|
||||
"price": true,
|
||||
"rating": true,
|
||||
"button": true
|
||||
},
|
||||
"properties": {
|
||||
"image": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"title": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"price": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"rating": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"button": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"orderby": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"rows": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"alignButtons": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isPreview": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"stockStatus": {
|
||||
"type": "array"
|
||||
}
|
||||
},
|
||||
"textdomain": "woo-gutenberg-products-block",
|
||||
"apiVersion": 2,
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json"
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Block from './block';
|
||||
import './editor.scss';
|
||||
|
||||
export const Edit = ( props: unknown ): JSX.Element => {
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<Block { ...props } />
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -1,142 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Icon, category } from '@wordpress/icons';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import Block from './block';
|
||||
|
||||
const blockTypeName = 'woocommerce/products-by-attribute';
|
||||
|
||||
registerBlockType( blockTypeName, {
|
||||
title: __( 'Products by Attribute', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ category }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
|
||||
description: __(
|
||||
'Display a grid of products with selected attributes.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
isPreview: true,
|
||||
},
|
||||
},
|
||||
attributes: {
|
||||
/**
|
||||
* Product attributes, used to display only products with the given attributes.
|
||||
*/
|
||||
attributes: {
|
||||
type: 'array',
|
||||
default: [],
|
||||
},
|
||||
|
||||
/**
|
||||
* Product attribute operator, used to restrict to products in all or any selected attributes.
|
||||
*/
|
||||
attrOperator: {
|
||||
type: 'string',
|
||||
default: 'any',
|
||||
},
|
||||
|
||||
/**
|
||||
* Number of columns.
|
||||
*/
|
||||
columns: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_columns', 3 ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle for edit mode in the block preview.
|
||||
*/
|
||||
editMode: {
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Content visibility setting
|
||||
*/
|
||||
contentVisibility: {
|
||||
type: 'object',
|
||||
default: {
|
||||
image: true,
|
||||
title: true,
|
||||
price: true,
|
||||
rating: true,
|
||||
button: true,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* How to order the products: 'date', 'popularity', 'price_asc', 'price_desc' 'rating', 'title'.
|
||||
*/
|
||||
orderby: {
|
||||
type: 'string',
|
||||
default: 'date',
|
||||
},
|
||||
|
||||
/**
|
||||
* Number of rows.
|
||||
*/
|
||||
rows: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_rows', 3 ),
|
||||
},
|
||||
|
||||
/**
|
||||
* How to align cart buttons.
|
||||
*/
|
||||
alignButtons: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* Are we previewing?
|
||||
*/
|
||||
isPreview: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether to display in stock, out of stock or backorder products.
|
||||
*/
|
||||
stockStatus: {
|
||||
type: 'array',
|
||||
default: Object.keys( getSetting( 'stockStatusOptions', [] ) ),
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*
|
||||
* @param {Object} props Props to pass to block.
|
||||
*/
|
||||
edit( props ) {
|
||||
return <Block { ...props } />;
|
||||
},
|
||||
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Icon, category } from '@wordpress/icons';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import metadata from './block.json';
|
||||
import { Edit } from './edit';
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ category }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
attributes: {
|
||||
...metadata.attributes,
|
||||
columns: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_columns', 3 ),
|
||||
},
|
||||
rows: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_rows', 3 ),
|
||||
},
|
||||
stockStatus: {
|
||||
type: 'array',
|
||||
default: Object.keys( getSetting( 'stockStatusOptions', [] ) ),
|
||||
},
|
||||
},
|
||||
|
||||
edit: Edit,
|
||||
|
||||
save: () => {
|
||||
return null;
|
||||
},
|
||||
} );
|
|
@ -282,6 +282,11 @@ const getMainConfig = ( options = {} ) => {
|
|||
from: './assets/js/blocks/product-tag/block.json',
|
||||
to: './product-tag/block.json',
|
||||
},
|
||||
{
|
||||
from:
|
||||
'./assets/js/blocks/products-by-attribute/block.json',
|
||||
to: './products-by-attribute/block.json',
|
||||
},
|
||||
],
|
||||
} ),
|
||||
],
|
||||
|
|
Loading…
Reference in New Issue