Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: Register Filter Blocks using `block.json` (https://github.com/woocommerce/woocommerce-blocks/pull/6505)

This commit is contained in:
Tung Du 2022-06-09 21:45:24 +07:00 committed by GitHub
parent abd5c6afd1
commit 45f48e6b0a
10 changed files with 208 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
plugins/woocommerce-blocks/assets/js/blocks/active-filters/block.json Normal file
View File

@ -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"
}

34
plugins/woocommerce-blocks/assets/js/blocks/active-filters/index.js
View File

@ -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: [

53
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/block.json Normal file
View File

@ -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"
}

57
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/index.js
View File

@ -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: [

38
plugins/woocommerce-blocks/assets/js/blocks/price-filter/block.json Normal file
View File

@ -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"
}

35
plugins/woocommerce-blocks/assets/js/blocks/price-filter/index.js
View File

@ -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: [

38
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/block.json Normal file
View File

@ -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"
}

13
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/edit.js
View File

@ -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 }

47
plugins/woocommerce-blocks/assets/js/blocks/stock-filter/index.js
View File

@ -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

36
plugins/woocommerce-blocks/bin/webpack-configs.js
View File

@ -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/**' ],
},
},
],
} ),