diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.json b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.json new file mode 100644 index 00000000000..83b791c35eb --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.json @@ -0,0 +1,29 @@ +{ + "name": "woocommerce/active-filters", + "version": "1.0.0", + "title": "Active Product Filters", + "description": "Show the currently active product filters. Works in combination with the All Products and filters blocks.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "supports": { + "html": false, + "multiple": false, + "color": { + "text": true, + "background": false + } + }, + "attributes": { + "displayStyle": { + "type": "string", + "default": "list" + }, + "headingLevel": { + "type": "number", + "default": 3 + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js index d3388f5a72e..2c312b1bd82 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js @@ -12,10 +12,14 @@ import { useBlockProps } from '@wordpress/block-editor'; * Internal dependencies */ import edit from './edit.js'; +import metadata from './block.json'; -registerBlockType( 'woocommerce/active-filters', { - apiVersion: 2, +registerBlockType( metadata, { title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ), + description: __( + 'Show the currently active product filters. Works in combination with the All Products and filters blocks.', + 'woo-gutenberg-products-block' + ), icon: { src: ( ), }, - category: 'woocommerce', - keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ], - description: __( - 'Show the currently active product filters. Works in combination with the All Products and filters blocks.', - 'woo-gutenberg-products-block' - ), - supports: { - html: false, - multiple: false, - color: { - text: true, - background: false, - }, - }, - example: { - attributes: {}, - }, attributes: { - displayStyle: { - type: 'string', - default: 'list', - }, + ...metadata.attributes, heading: { type: 'string', default: __( 'Active filters', 'woo-gutenberg-products-block' ), }, - headingLevel: { - type: 'number', - default: 3, - }, }, transforms: { from: [ diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json new file mode 100644 index 00000000000..61940ba92af --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json @@ -0,0 +1,53 @@ +{ + "name": "woocommerce/attribute-filter", + "version": "1.0.0", + "title": "Filter Products by Attribute", + "description": "Allow customers to filter the grid by product attribute, such as color. Works in combination with the All Products block.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "supports": { + "html": false, + "color": { + "text": true, + "background": false + } + }, + "example": { + "attributes": { + "isPreview": true + } + }, + "attributes": { + "attributeId": { + "type": "number", + "default": 0 + }, + "showCounts": { + "type": "boolean", + "default": true + }, + "queryType": { + "type": "string", + "default": "or" + }, + "headingLevel": { + "type": "number", + "default": 3 + }, + "displayStyle": { + "type": "string", + "default": "list" + }, + "showFilterButton": { + "type": "boolean", + "default": false + }, + "isPreview": { + "type": "boolean", + "default": false + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js index 30a4168f8df..8595b2ff925 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js @@ -12,10 +12,14 @@ import classNames from 'classnames'; * Internal dependencies */ import edit from './edit.js'; +import metadata from './block.json'; -registerBlockType( 'woocommerce/attribute-filter', { - apiVersion: 2, +registerBlockType( metadata, { title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ), + description: __( + 'Allow customers to filter the grid by product attribute, such as color. Works in combination with the All Products block.', + 'woo-gutenberg-products-block' + ), icon: { src: ( ), }, - category: 'woocommerce', - keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ], - description: __( - 'Allow customers to filter the grid by product attribute, such as color. Works in combination with the All Products block.', - 'woo-gutenberg-products-block' - ), supports: { - html: false, - color: { - text: true, - background: false, - }, + ...metadata.supports, ...( isFeaturePluginBuild() && { __experimentalBorder: { radius: true, @@ -44,24 +38,8 @@ registerBlockType( 'woocommerce/attribute-filter', { }, } ), }, - example: { - attributes: { - isPreview: true, - }, - }, attributes: { - attributeId: { - type: 'number', - default: 0, - }, - showCounts: { - type: 'boolean', - default: true, - }, - queryType: { - type: 'string', - default: 'or', - }, + ...metadata.attributes, heading: { type: 'string', default: __( @@ -69,25 +47,6 @@ registerBlockType( 'woocommerce/attribute-filter', { 'woo-gutenberg-products-block' ), }, - headingLevel: { - type: 'number', - default: 3, - }, - displayStyle: { - type: 'string', - default: 'list', - }, - showFilterButton: { - type: 'boolean', - default: false, - }, - /** - * Are we previewing? - */ - isPreview: { - type: 'boolean', - default: false, - }, }, transforms: { from: [ diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.json new file mode 100644 index 00000000000..ccd3ffea25b --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.json @@ -0,0 +1,38 @@ +{ + "name": "woocommerce/price-filter", + "version": "1.0.0", + "title": "Filter Products by Price", + "description": "Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "supports": { + "html": false, + "multiple": false, + "color": { + "text": true, + "background": false + } + }, + "example": { + "attributes": { + "isPreview": true + } + }, + "attributes": { + "showInputFields": { + "type": "boolean", + "default": true + }, + "showFilterButton": { + "type": "boolean", + "default": false + }, + "headingLevel": { + "type": "number", + "default": 3 + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js index 7ec83ea72e4..e1b26ed04fc 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js @@ -12,10 +12,14 @@ import { useBlockProps } from '@wordpress/block-editor'; * Internal dependencies */ import edit from './edit.js'; +import metadata from './block.json'; -registerBlockType( 'woocommerce/price-filter', { - apiVersion: 2, +registerBlockType( metadata, { title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ), + description: __( + 'Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.', + 'woo-gutenberg-products-block' + ), icon: { src: ( ), }, - category: 'woocommerce', - keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ], - description: __( - 'Allow customers to filter the products by choosing a lower or upper price limit. Works in combination with the All Products block.', - 'woo-gutenberg-products-block' - ), supports: { - html: false, - multiple: false, - color: { - text: true, - background: false, - }, + ...metadata.supports, ...( isFeaturePluginBuild() && { __experimentalBorder: { radius: true, @@ -45,24 +38,12 @@ registerBlockType( 'woocommerce/price-filter', { }, } ), }, - example: {}, attributes: { - showInputFields: { - type: 'boolean', - default: true, - }, - showFilterButton: { - type: 'boolean', - default: false, - }, + ...metadata.attributes, heading: { type: 'string', default: __( 'Filter by price', 'woo-gutenberg-products-block' ), }, - headingLevel: { - type: 'number', - default: 3, - }, }, transforms: { from: [ diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.json new file mode 100644 index 00000000000..52dd5e822eb --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.json @@ -0,0 +1,38 @@ +{ + "name": "woocommerce/stock-filter", + "version": "1.0.0", + "title": "Filter Products by Stock", + "description": "Allow customers to filter the grid by products stock status. Works in combination with the All Products block.", + "category": "woocommerce", + "keywords": [ "WooCommerce" ], + "supports": { + "html": false, + "multiple": false + }, + "example": { + "attributes": { + "isPreview": true + } + }, + "attributes": { + "headingLevel": { + "type": "number", + "default": 3 + }, + "showCounts": { + "type": "boolean", + "default": true + }, + "showFilterButton": { + "type": "boolean", + "default": false + }, + "isPreview": { + "type": "boolean", + "default": false + } + }, + "textdomain": "woo-gutenberg-products-block", + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json" +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js index e8241e386c7..3b0a9752622 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; -import { InspectorControls } from '@wordpress/block-editor'; +import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; import { Disabled, PanelBody, @@ -28,6 +28,10 @@ const Edit = ( { attributes, setAttributes } ) => { showFilterButton, } = attributes; + const blockProps = useBlockProps( { + className: classnames( 'wc-block-stock-filter', className ), + } ); + const getInspectorControls = () => { return ( @@ -111,12 +115,7 @@ const Edit = ( { attributes, setAttributes } ) => { <> { getInspectorControls() } { -
+
), }, - category: 'woocommerce', - keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ], - description: __( - 'Allow customers to filter the grid by products stock status. Works in combination with the All Products block.', - 'woo-gutenberg-products-block' - ), - supports: { - html: false, - multiple: false, - }, - example: { - attributes: { - isPreview: true, - }, - }, attributes: { + ...metadata.attributes, heading: { type: 'string', default: __( @@ -44,25 +36,6 @@ registerBlockType( 'woocommerce/stock-filter', { 'woo-gutenberg-products-block' ), }, - headingLevel: { - type: 'number', - default: 3, - }, - showCounts: { - type: 'boolean', - default: true, - }, - showFilterButton: { - type: 'boolean', - default: false, - }, - /** - * Are we previewing? - */ - isPreview: { - type: 'boolean', - default: false, - }, }, edit, // Save the props to post content. @@ -84,7 +57,9 @@ registerBlockType( 'woocommerce/stock-filter', { } return (
{ new CopyWebpackPlugin( { patterns: [ { - from: './assets/js/blocks/checkout/block.json', - to: './checkout/block.json', - }, - { - from: - './assets/js/blocks/featured-items/featured-category/block.json', - to: './featured-category/block.json', - }, - { - from: - './assets/js/blocks/featured-items/featured-product/block.json', - to: './featured-product/block.json', - }, - { - from: - './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', - }, - { - from: - './assets/js/blocks/products-by-attribute/block.json', - to: './products-by-attribute/block.json', + from: './assets/js/blocks/**/block.json', + to( { absoluteFilename } ) { + const blockName = absoluteFilename + .split( '/' ) + .at( -2 ); + return `./${ blockName }/block.json`; + }, + globOptions: { + ignore: [ '**/inner-blocks/**' ], + }, }, ], } ),