Start using the `block.json` metadata file for `Products by Tag` (https://github.com/woocommerce/woocommerce-blocks/pull/6403)
* Start using the block.json metadata file for `Products by Tag` * Remove comment * Add version, schema, and text domain * Add defaults * Remove wrong keyword * Add tag icon when registering the block
This commit is contained in:
Alba Rincón
GitHub
parent
3b86ff6b39
commit
6e5ebdff85
|
|
@ -28,6 +28,13 @@
|
|||
},
|
||||
"contentVisibility": {
|
||||
"type": "object",
|
||||
"default": {
|
||||
"image": true,
|
||||
"title": true,
|
||||
"price": true,
|
||||
"rating": true,
|
||||
"button": true
|
||||
},
|
||||
"properties": {
|
||||
"image": {
|
||||
"type": "boolean",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"name": "woocommerce/product-tag",
|
||||
"title": "Products by Tag",
|
||||
"category": "woocommerce",
|
||||
"keywords": [
|
||||
"WooCommerce"
|
||||
],
|
||||
"description": "Display a grid of products with selected tags.",
|
||||
"supports": {
|
||||
"align": [
|
||||
"wide",
|
||||
"full"
|
||||
],
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"columns": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"rows": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"alignButtons": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"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
|
||||
}
|
||||
}
|
||||
},
|
||||
"tags": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"tagOperator": {
|
||||
"type": "string",
|
||||
"default": "any"
|
||||
},
|
||||
"orderby": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"isPreview": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"stockStatus": {
|
||||
"type": "array"
|
||||
}
|
||||
},
|
||||
"example": {
|
||||
"attributes": {
|
||||
"isPreview": true
|
||||
}
|
||||
},
|
||||
"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,135 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { Icon, tag } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import Block from './block';
|
||||
|
||||
/**
|
||||
* Register and run the "Products by Tag" block.
|
||||
*/
|
||||
registerBlockType( 'woocommerce/product-tag', {
|
||||
title: __( 'Products by Tag', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ tag }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
|
||||
description: __(
|
||||
'Display a grid of products with selected tags.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
isPreview: true,
|
||||
},
|
||||
},
|
||||
attributes: {
|
||||
/**
|
||||
* Number of columns.
|
||||
*/
|
||||
columns: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_columns', 3 ),
|
||||
},
|
||||
|
||||
/**
|
||||
* Number of rows.
|
||||
*/
|
||||
rows: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_rows', 3 ),
|
||||
},
|
||||
|
||||
/**
|
||||
* How to align cart buttons.
|
||||
*/
|
||||
alignButtons: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* Content visibility setting
|
||||
*/
|
||||
contentVisibility: {
|
||||
type: 'object',
|
||||
default: {
|
||||
image: true,
|
||||
title: true,
|
||||
price: true,
|
||||
rating: true,
|
||||
button: true,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Product tags, used to display only products with the given tags.
|
||||
*/
|
||||
tags: {
|
||||
type: 'array',
|
||||
default: [],
|
||||
},
|
||||
|
||||
/**
|
||||
* Product tags operator, used to restrict to products in all or any selected tags.
|
||||
*/
|
||||
tagOperator: {
|
||||
type: 'string',
|
||||
default: 'any',
|
||||
},
|
||||
|
||||
/**
|
||||
* How to order the products: 'date', 'popularity', 'price_asc', 'price_desc' 'rating', 'title'.
|
||||
*/
|
||||
orderby: {
|
||||
type: 'string',
|
||||
default: 'date',
|
||||
},
|
||||
|
||||
/**
|
||||
* 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,52 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { Icon, tag } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import metadata from './block.json';
|
||||
import { Edit } from './edit';
|
||||
|
||||
/**
|
||||
* Register and run the "Products by Tag" block.
|
||||
*/
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ tag }
|
||||
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 ),
|
||||
},
|
||||
tags: {
|
||||
type: 'array',
|
||||
default: [],
|
||||
},
|
||||
stockStatus: {
|
||||
type: 'array',
|
||||
default: Object.keys( getSetting( 'stockStatusOptions', [] ) ),
|
||||
},
|
||||
},
|
||||
|
||||
edit: Edit,
|
||||
|
||||
save: () => {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
@ -278,6 +278,10 @@ const getMainConfig = ( options = {} ) => {
|
|||
'./assets/js/blocks/handpicked-products/block.json',
|
||||
to: './handpicked-products/block.json',
|
||||
},
|
||||
{
|
||||
from: './assets/js/blocks/product-tag/block.json',
|
||||
to: './product-tag/block.json',
|
||||
},
|
||||
],
|
||||
} ),
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue