Restore block transform for filter blocks (https://github.com/woocommerce/woocommerce-blocks/pull/7401)
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
This commit is contained in:
parent
1a9e5cfe13
commit
53e6a013a7
|
@ -1,8 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
import { createBlock, registerBlockType } from '@wordpress/blocks';
|
|
||||||
import { toggle } from '@woocommerce/icons';
|
import { toggle } from '@woocommerce/icons';
|
||||||
import { Icon } from '@wordpress/icons';
|
import { Icon } from '@wordpress/icons';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -29,29 +28,6 @@ registerBlockType( metadata, {
|
||||||
...metadata.attributes,
|
...metadata.attributes,
|
||||||
...blockAttributes,
|
...blockAttributes,
|
||||||
},
|
},
|
||||||
transforms: {
|
|
||||||
from: [
|
|
||||||
{
|
|
||||||
type: 'block',
|
|
||||||
blocks: [ 'core/legacy-widget' ],
|
|
||||||
// We can't transform if raw instance isn't shown in the REST API.
|
|
||||||
isMatch: ( { idBase, instance } ) =>
|
|
||||||
idBase === 'woocommerce_layered_nav_filters' &&
|
|
||||||
!! instance?.raw,
|
|
||||||
transform: ( { instance } ) =>
|
|
||||||
createBlock( 'woocommerce/active-filters', {
|
|
||||||
displayStyle: 'list',
|
|
||||||
heading:
|
|
||||||
instance?.raw?.title ||
|
|
||||||
__(
|
|
||||||
'Active filters',
|
|
||||||
'woo-gutenberg-products-block'
|
|
||||||
),
|
|
||||||
headingLevel: 3,
|
|
||||||
} ),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
edit,
|
edit,
|
||||||
// Save the props to post content.
|
// Save the props to post content.
|
||||||
save( { attributes }: { attributes: Attributes } ) {
|
save( { attributes }: { attributes: Attributes } ) {
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
import { createBlock, registerBlockType } from '@wordpress/blocks';
|
|
||||||
import { useBlockProps } from '@wordpress/block-editor';
|
import { useBlockProps } from '@wordpress/block-editor';
|
||||||
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||||
import { Icon, category } from '@wordpress/icons';
|
import { Icon, category } from '@wordpress/icons';
|
||||||
|
@ -39,34 +38,6 @@ registerBlockType( metadata, {
|
||||||
...metadata.attributes,
|
...metadata.attributes,
|
||||||
...blockAttributes,
|
...blockAttributes,
|
||||||
},
|
},
|
||||||
transforms: {
|
|
||||||
from: [
|
|
||||||
{
|
|
||||||
type: 'block',
|
|
||||||
blocks: [ 'core/legacy-widget' ],
|
|
||||||
// We can't transform if raw instance isn't shown in the REST API.
|
|
||||||
isMatch: ( { idBase, instance } ) =>
|
|
||||||
idBase === 'woocommerce_layered_nav' && !! instance?.raw,
|
|
||||||
transform: ( { instance } ) =>
|
|
||||||
createBlock( 'woocommerce/attribute-filter', {
|
|
||||||
attributeId: 0,
|
|
||||||
showCounts: true,
|
|
||||||
queryType: instance?.raw?.query_type || 'or',
|
|
||||||
heading:
|
|
||||||
instance?.raw?.title ||
|
|
||||||
__(
|
|
||||||
'Filter by attribute',
|
|
||||||
'woo-gutenberg-products-block'
|
|
||||||
),
|
|
||||||
headingLevel: 3,
|
|
||||||
displayStyle: instance?.raw?.display_type || 'list',
|
|
||||||
showFilterButton: false,
|
|
||||||
selectType: instance?.raw?.select_type || 'multiple',
|
|
||||||
isPreview: false,
|
|
||||||
} ),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
edit,
|
edit,
|
||||||
// Save the props to post content.
|
// Save the props to post content.
|
||||||
save( { attributes }: { attributes: BlockAttributes } ) {
|
save( { attributes }: { attributes: BlockAttributes } ) {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "woocommerce/filter-wrapper",
|
"name": "woocommerce/filter-wrapper",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"title": "Filter Wrapper",
|
"title": "Filter Block",
|
||||||
"category": "woocommerce",
|
"category": "woocommerce",
|
||||||
"keywords": [ "WooCommerce" ],
|
"keywords": [ "WooCommerce" ],
|
||||||
"attributes": {
|
"attributes": {
|
||||||
|
|
|
@ -2,7 +2,8 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
import { registerBlockType } from '@wordpress/blocks';
|
import { createBlock, registerBlockType } from '@wordpress/blocks';
|
||||||
|
import type { BlockInstance } from '@wordpress/blocks';
|
||||||
import { toggle } from '@woocommerce/icons';
|
import { toggle } from '@woocommerce/icons';
|
||||||
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
|
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
|
||||||
import {
|
import {
|
||||||
|
@ -20,6 +21,94 @@ import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||||
import edit from './edit';
|
import edit from './edit';
|
||||||
import metadata from './block.json';
|
import metadata from './block.json';
|
||||||
|
|
||||||
|
const filterBlocksWidgets = [
|
||||||
|
{
|
||||||
|
widgetId: 'woocommerce_layered_nav_filters',
|
||||||
|
name: 'active-filters',
|
||||||
|
heading: __( 'Active filters', 'woo-gutenberg-products-block' ),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widgetId: 'woocommerce_price_filter',
|
||||||
|
name: 'price-filter',
|
||||||
|
heading: __( 'Filter by price', 'woo-gutenberg-products-block' ),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widgetId: 'woocommerce_layered_nav',
|
||||||
|
name: 'attribute-filter',
|
||||||
|
heading: __( 'Filter by attribute', 'woo-gutenberg-products-block' ),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
widgetId: 'woocommerce_rating_filter',
|
||||||
|
name: 'rating-filter',
|
||||||
|
heading: __( 'Filter by rating', 'woo-gutenberg-products-block' ),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getTransformAttributes = ( instance, filterType: string ) => {
|
||||||
|
switch ( filterType ) {
|
||||||
|
case 'attribute-filter':
|
||||||
|
return {
|
||||||
|
attributeId: 0,
|
||||||
|
showCounts: true,
|
||||||
|
queryType: instance?.raw?.query_type || 'or',
|
||||||
|
heading: '',
|
||||||
|
displayStyle: instance?.raw?.display_type || 'list',
|
||||||
|
showFilterButton: false,
|
||||||
|
selectType: instance?.raw?.select_type || 'multiple',
|
||||||
|
isPreview: false,
|
||||||
|
};
|
||||||
|
case 'active-filters':
|
||||||
|
return {
|
||||||
|
displayStyle: 'list',
|
||||||
|
heading: '',
|
||||||
|
};
|
||||||
|
case 'price-filter':
|
||||||
|
return {
|
||||||
|
heading: '',
|
||||||
|
showInputFields: false,
|
||||||
|
showFilterButton: true,
|
||||||
|
inlineInput: false,
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isFilterWidget = ( widgetId: string ) =>
|
||||||
|
filterBlocksWidgets.some( ( item ) => item.widgetId === widgetId );
|
||||||
|
|
||||||
|
const getFilterBlockObject = ( widgetId: string ) => {
|
||||||
|
const filterBlock = filterBlocksWidgets.find(
|
||||||
|
( item ) => item.widgetId === widgetId
|
||||||
|
);
|
||||||
|
return filterBlock;
|
||||||
|
};
|
||||||
|
|
||||||
|
const transformFilterBlock = (
|
||||||
|
filterType: string,
|
||||||
|
attributes: Record< string, unknown >,
|
||||||
|
title: string
|
||||||
|
) => {
|
||||||
|
const filterWrapperInnerBlocks: BlockInstance[] = [
|
||||||
|
createBlock( `woocommerce/${ filterType }`, attributes ),
|
||||||
|
];
|
||||||
|
|
||||||
|
filterWrapperInnerBlocks.unshift(
|
||||||
|
createBlock( 'core/heading', {
|
||||||
|
content: title,
|
||||||
|
level: 3,
|
||||||
|
} )
|
||||||
|
);
|
||||||
|
|
||||||
|
return createBlock(
|
||||||
|
'woocommerce/filter-wrapper',
|
||||||
|
{
|
||||||
|
filterType,
|
||||||
|
},
|
||||||
|
filterWrapperInnerBlocks
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
registerBlockType( metadata, {
|
registerBlockType( metadata, {
|
||||||
edit,
|
edit,
|
||||||
save() {
|
save() {
|
||||||
|
@ -164,4 +253,27 @@ registerBlockType( metadata, {
|
||||||
} ),
|
} ),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
transforms: {
|
||||||
|
from: [
|
||||||
|
{
|
||||||
|
type: 'block',
|
||||||
|
blocks: [ 'core/legacy-widget' ],
|
||||||
|
// We can't transform if raw instance isn't shown in the REST API.
|
||||||
|
isMatch: ( { idBase, instance } ) =>
|
||||||
|
isFilterWidget( idBase ) && !! instance?.raw,
|
||||||
|
transform: ( { idBase, instance } ) => {
|
||||||
|
const filterBlockObject = getFilterBlockObject( idBase );
|
||||||
|
if ( ! filterBlockObject ) return null;
|
||||||
|
return transformFilterBlock(
|
||||||
|
filterBlockObject.name,
|
||||||
|
getTransformAttributes(
|
||||||
|
instance,
|
||||||
|
filterBlockObject.name
|
||||||
|
),
|
||||||
|
instance?.raw?.title || filterBlockObject.heading
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
import { createBlock, registerBlockType } from '@wordpress/blocks';
|
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Icon, currencyDollar } from '@wordpress/icons';
|
import { Icon, currencyDollar } from '@wordpress/icons';
|
||||||
import { useBlockProps } from '@wordpress/block-editor';
|
import { useBlockProps } from '@wordpress/block-editor';
|
||||||
|
@ -27,30 +26,6 @@ registerBlockType( metadata, {
|
||||||
...metadata.attributes,
|
...metadata.attributes,
|
||||||
...blockAttributes,
|
...blockAttributes,
|
||||||
},
|
},
|
||||||
transforms: {
|
|
||||||
from: [
|
|
||||||
{
|
|
||||||
type: 'block',
|
|
||||||
blocks: [ 'core/legacy-widget' ],
|
|
||||||
// We can't transform if raw instance isn't shown in the REST API.
|
|
||||||
isMatch: ( { idBase, instance } ) =>
|
|
||||||
idBase === 'woocommerce_price_filter' && !! instance?.raw,
|
|
||||||
transform: ( { instance } ) =>
|
|
||||||
createBlock( 'woocommerce/price-filter', {
|
|
||||||
showInputFields: false,
|
|
||||||
showFilterButton: true,
|
|
||||||
heading:
|
|
||||||
instance?.raw?.title ||
|
|
||||||
__(
|
|
||||||
'Filter by price',
|
|
||||||
'woo-gutenberg-products-block'
|
|
||||||
),
|
|
||||||
headingLevel: 3,
|
|
||||||
inlineInput: false,
|
|
||||||
} ),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
edit,
|
edit,
|
||||||
save( { attributes } ) {
|
save( { attributes } ) {
|
||||||
const {
|
const {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
|
||||||
import { createBlock, registerBlockType } from '@wordpress/blocks';
|
import { registerBlockType } from '@wordpress/blocks';
|
||||||
import { Icon, starEmpty } from '@wordpress/icons';
|
import { Icon, starEmpty } from '@wordpress/icons';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useBlockProps } from '@wordpress/block-editor';
|
import { useBlockProps } from '@wordpress/block-editor';
|
||||||
|
@ -27,19 +27,6 @@ if ( isFeaturePluginBuild() ) {
|
||||||
attributes: {
|
attributes: {
|
||||||
...metadata.attributes,
|
...metadata.attributes,
|
||||||
},
|
},
|
||||||
transforms: {
|
|
||||||
from: [
|
|
||||||
{
|
|
||||||
type: 'block',
|
|
||||||
blocks: [ 'core/legacy-widget' ],
|
|
||||||
// We can't transform if raw instance isn't shown in the REST API.
|
|
||||||
isMatch: ( { idBase, instance } ) =>
|
|
||||||
idBase === 'woocommerce_rating_filter' &&
|
|
||||||
!! instance?.raw,
|
|
||||||
transform: () => createBlock( 'woocommerce/rating-filter' ),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
edit,
|
edit,
|
||||||
// Save the props to post content.
|
// Save the props to post content.
|
||||||
save( { attributes }: { attributes: Attributes } ) {
|
save( { attributes }: { attributes: Attributes } ) {
|
||||||
|
|
Loading…
Reference in New Issue