Start using the `block.json` metadata file for `Handpicked products` (https://github.com/woocommerce/woocommerce-blocks/pull/6392)
* Start using the `block.json` metadata file for `Handpicked products` * Add the `properties` attribute to properly parse booleans * Remove comment * Add schema, delete version
This commit is contained in:
Alba Rincón
GitHub
parent
07e6878700
commit
42166068b6
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"name": "woocommerce/handpicked-products",
|
||||
"title": "Hand-picked Products",
|
||||
"category": "woocommerce",
|
||||
"keywords": [
|
||||
"Handpicked Products",
|
||||
"WooCommerce"
|
||||
],
|
||||
"description": "Display a selection of hand-picked products in a grid.",
|
||||
"supports": {
|
||||
"align": [
|
||||
"wide",
|
||||
"full"
|
||||
],
|
||||
"html": false
|
||||
},
|
||||
"attributes": {
|
||||
"align": {
|
||||
"type": "string"
|
||||
},
|
||||
"columns": {
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"editMode": {
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"contentVisibility": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"image": {
|
||||
"type": "boolean",
|
||||
"image": true
|
||||
},
|
||||
"title": {
|
||||
"type": "boolean",
|
||||
"title": true
|
||||
},
|
||||
"price": {
|
||||
"type": "boolean",
|
||||
"price": true
|
||||
},
|
||||
"rating": {
|
||||
"type": "boolean",
|
||||
"rating": true
|
||||
},
|
||||
"button": {
|
||||
"type": "boolean",
|
||||
"button": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"orderby": {
|
||||
"type": "string",
|
||||
"default": "date"
|
||||
},
|
||||
"products": {
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"alignButtons": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isPreview": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
},
|
||||
"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,126 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { Icon, stack } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import Block from './block';
|
||||
|
||||
registerBlockType( 'woocommerce/handpicked-products', {
|
||||
title: __( 'Hand-picked Products', 'woo-gutenberg-products-block' ),
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ stack }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [
|
||||
__( 'Handpicked Products', 'woo-gutenberg-products-block' ),
|
||||
__( 'WooCommerce', 'woo-gutenberg-products-block' ),
|
||||
],
|
||||
description: __(
|
||||
'Display a selection of hand-picked products in a grid.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
isPreview: true,
|
||||
},
|
||||
},
|
||||
attributes: {
|
||||
/**
|
||||
* Alignment of product grid
|
||||
*/
|
||||
align: {
|
||||
type: 'string',
|
||||
},
|
||||
|
||||
/**
|
||||
* 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',
|
||||
},
|
||||
|
||||
/**
|
||||
* The list of product IDs to display
|
||||
*/
|
||||
products: {
|
||||
type: 'array',
|
||||
default: [],
|
||||
},
|
||||
|
||||
/**
|
||||
* How to align cart buttons.
|
||||
*/
|
||||
alignButtons: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* Are we previewing?
|
||||
*/
|
||||
isPreview: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*
|
||||
* @param {Object} props Props to pass to block.
|
||||
*/
|
||||
edit( props ) {
|
||||
return <Block { ...props } />;
|
||||
},
|
||||
|
||||
save() {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { Icon, stack } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import metadata from './block.json';
|
||||
import { Edit } from './edit';
|
||||
|
||||
registerBlockType( metadata, {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
icon={ stack }
|
||||
className="wc-block-editor-components-block-icon"
|
||||
/>
|
||||
),
|
||||
},
|
||||
attributes: {
|
||||
...metadata.attributes,
|
||||
columns: {
|
||||
type: 'number',
|
||||
default: getSetting( 'default_columns', 3 ),
|
||||
},
|
||||
},
|
||||
|
||||
edit: Edit,
|
||||
|
||||
save: () => {
|
||||
return null;
|
||||
},
|
||||
} );
|
||||
|
|
@ -271,6 +271,11 @@ const getMainConfig = ( options = {} ) => {
|
|||
from: './assets/js/blocks/featured-product/block.json',
|
||||
to: './featured-product/block.json',
|
||||
},
|
||||
{
|
||||
from:
|
||||
'./assets/js/blocks/handpicked-products/block.json',
|
||||
to: './handpicked-products/block.json',
|
||||
},
|
||||
],
|
||||
} ),
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue