Fix: Register Filter Blocks using `block.json` (https://github.com/woocommerce/woocommerce-blocks/pull/6505)
This commit is contained in:
parent
abd5c6afd1
commit
45f48e6b0a
|
@ -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"
|
||||
}
|
|
@ -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: (
|
||||
<Icon
|
||||
|
@ -24,36 +28,12 @@ registerBlockType( 'woocommerce/active-filters', {
|
|||
/>
|
||||
),
|
||||
},
|
||||
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: [
|
||||
|
|
|
@ -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"
|
||||
}
|
|
@ -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: (
|
||||
<Icon
|
||||
|
@ -24,18 +28,8 @@ registerBlockType( 'woocommerce/attribute-filter', {
|
|||
/>
|
||||
),
|
||||
},
|
||||
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: [
|
||||
|
|
|
@ -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"
|
||||
}
|
|
@ -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: (
|
||||
<Icon
|
||||
|
@ -24,19 +28,8 @@ registerBlockType( 'woocommerce/price-filter', {
|
|||
/>
|
||||
),
|
||||
},
|
||||
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: [
|
||||
|
|
|
@ -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"
|
||||
}
|
|
@ -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 (
|
||||
<InspectorControls key="inspector">
|
||||
|
@ -111,12 +115,7 @@ const Edit = ( { attributes, setAttributes } ) => {
|
|||
<>
|
||||
{ getInspectorControls() }
|
||||
{
|
||||
<div
|
||||
className={ classnames(
|
||||
'wc-block-stock-filter',
|
||||
className
|
||||
) }
|
||||
>
|
||||
<div { ...blockProps }>
|
||||
<BlockTitle
|
||||
className="wc-block-stock-filter__title"
|
||||
headingLevel={ headingLevel }
|
||||
|
|
|
@ -5,14 +5,20 @@ import { __ } from '@wordpress/i18n';
|
|||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { Icon, box } from '@wordpress/icons';
|
||||
import classNames from 'classnames';
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import edit from './edit.js';
|
||||
import metadata from './block.json';
|
||||
|
||||
registerBlockType( 'woocommerce/stock-filter', {
|
||||
registerBlockType( metadata, {
|
||||
title: __( 'Filter Products by Stock', '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'
|
||||
),
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
|
@ -21,22 +27,8 @@ registerBlockType( 'woocommerce/stock-filter', {
|
|||
/>
|
||||
),
|
||||
},
|
||||
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 (
|
||||
<div
|
||||
className={ classNames( 'is-loading', className ) }
|
||||
{ ...useBlockProps.save( {
|
||||
className: classNames( 'is-loading', className ),
|
||||
} ) }
|
||||
{ ...data }
|
||||
>
|
||||
<span
|
||||
|
|
|
@ -260,32 +260,16 @@ const getMainConfig = ( options = {} ) => {
|
|||
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/**' ],
|
||||
},
|
||||
},
|
||||
],
|
||||
} ),
|
||||
|
|
Loading…
Reference in New Issue