All Products block: Migrate to block.json (https://github.com/woocommerce/woocommerce-blocks/pull/6754)
* All Products: Use block.json to register * Simplify edit def * Separate file for save * No more client-side registration * Remove uncommented, now-obsolete code * Add back client-side block registration * Remove stray textdomain from keywords field * Add textdomain field * Set apiVersion to 1
This commit is contained in:
Bernie Reiter
GitHub
parent
488ff13ca9
commit
3858b03aec
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 1,
|
||||
"textdomain": "woo-gutenberg-products-block",
|
||||
"name": "woocommerce/all-products",
|
||||
"title": "All Products",
|
||||
"category": "woocommerce",
|
||||
"keywords": [ "WooCommerce" ],
|
||||
"description": "Display products from your store in a grid layout.",
|
||||
"supports": {
|
||||
"align": [ "wide", "full" ],
|
||||
"html": false,
|
||||
"multiple": false
|
||||
},
|
||||
"example": {
|
||||
"attributes": {
|
||||
"isPreview": true
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"columns": {
|
||||
"type": "number"
|
||||
},
|
||||
"rows": {
|
||||
"type": "number"
|
||||
},
|
||||
"alignButtons": {
|
||||
"type": "boolean"
|
||||
},
|
||||
"contentVisibility": {
|
||||
"type": "object"
|
||||
},
|
||||
"orderby": {
|
||||
"type": "string"
|
||||
},
|
||||
"layoutConfig": {
|
||||
"type": "array"
|
||||
},
|
||||
"isPreview": {
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { DEFAULT_PRODUCT_LIST_LAYOUT } from '../base-utils';
|
||||
|
||||
export default {
|
||||
columns: getSetting( 'default_columns', 3 ),
|
||||
rows: getSetting( 'default_rows', 3 ),
|
||||
alignButtons: false,
|
||||
contentVisibility: {
|
||||
orderBy: true,
|
||||
},
|
||||
orderby: 'date',
|
||||
layoutConfig: DEFAULT_PRODUCT_LIST_LAYOUT,
|
||||
isPreview: false,
|
||||
};
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import metadata from './block.json';
|
||||
import { getBlockClassName } from '../utils.js';
|
||||
|
||||
const { attributes: attributeDefinitions } = metadata;
|
||||
|
||||
const v1 = {
|
||||
attributes: Object.assign( {}, attributeDefinitions, {
|
||||
rows: { type: 'number', default: 1 },
|
||||
} ),
|
||||
save( { attributes } ) {
|
||||
const data = {
|
||||
'data-attributes': JSON.stringify( attributes ),
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={ getBlockClassName(
|
||||
'wc-block-all-products',
|
||||
attributes
|
||||
) }
|
||||
{ ...data }
|
||||
>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default [ v1 ];
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { Icon, grid } from '@wordpress/icons';
|
||||
import '@woocommerce/atomic-blocks';
|
||||
|
|
@ -10,12 +8,16 @@ import '@woocommerce/atomic-blocks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Editor from './edit';
|
||||
import { attributes as sharedAttributes, defaults } from '../attributes';
|
||||
import { getBlockClassName } from '../utils.js';
|
||||
import metadata from './block.json';
|
||||
import deprecated from './deprecated';
|
||||
import edit from './edit';
|
||||
import save from './save';
|
||||
import defaults from './defaults';
|
||||
|
||||
export const blockSettings = {
|
||||
title: __( 'All Products', 'woo-gutenberg-products-block' ),
|
||||
const { name } = metadata;
|
||||
export { metadata, name };
|
||||
|
||||
const settings = {
|
||||
icon: {
|
||||
src: (
|
||||
<Icon
|
||||
|
|
@ -24,86 +26,11 @@ export const blockSettings = {
|
|||
/>
|
||||
),
|
||||
},
|
||||
category: 'woocommerce',
|
||||
keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
|
||||
description: __(
|
||||
'Display products from your store in a grid layout.',
|
||||
'woo-gutenberg-products-block'
|
||||
),
|
||||
supports: {
|
||||
align: [ 'wide', 'full' ],
|
||||
html: false,
|
||||
multiple: false,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
isPreview: true,
|
||||
},
|
||||
},
|
||||
attributes: sharedAttributes,
|
||||
defaults,
|
||||
/**
|
||||
* Renders and manages the block.
|
||||
*
|
||||
* @param {Object} props Props to pass to block.
|
||||
*/
|
||||
edit( props ) {
|
||||
return <Editor { ...props } />;
|
||||
},
|
||||
edit,
|
||||
// Save the props to post content.
|
||||
save( { attributes } ) {
|
||||
const dataAttributes = {};
|
||||
Object.keys( attributes )
|
||||
.sort()
|
||||
.forEach( ( key ) => {
|
||||
dataAttributes[ key ] = attributes[ key ];
|
||||
} );
|
||||
const data = {
|
||||
'data-attributes': JSON.stringify( dataAttributes ),
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={ getBlockClassName(
|
||||
'wc-block-all-products',
|
||||
attributes
|
||||
) }
|
||||
{ ...data }
|
||||
>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save,
|
||||
deprecated,
|
||||
defaults,
|
||||
};
|
||||
|
||||
/**
|
||||
* Register and run the "All Products" block.
|
||||
*/
|
||||
registerBlockType( 'woocommerce/all-products', {
|
||||
...blockSettings,
|
||||
/**
|
||||
* Deprecation rule to handle the previous default rows which was 1 instead of 3.
|
||||
*/
|
||||
deprecated: [
|
||||
{
|
||||
attributes: Object.assign( {}, blockSettings.attributes, {
|
||||
rows: { type: 'number', default: 1 },
|
||||
} ),
|
||||
save( { attributes } ) {
|
||||
const data = {
|
||||
'data-attributes': JSON.stringify( attributes ),
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={ getBlockClassName(
|
||||
'wc-block-all-products',
|
||||
attributes
|
||||
) }
|
||||
{ ...data }
|
||||
>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
} );
|
||||
registerBlockType( name, settings );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { InnerBlocks } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { getBlockClassName } from '../utils.js';
|
||||
|
||||
export default function save( { attributes } ) {
|
||||
const dataAttributes = {};
|
||||
Object.keys( attributes )
|
||||
.sort()
|
||||
.forEach( ( key ) => {
|
||||
dataAttributes[ key ] = attributes[ key ];
|
||||
} );
|
||||
const data = {
|
||||
'data-attributes': JSON.stringify( dataAttributes ),
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={ getBlockClassName(
|
||||
'wc-block-all-products',
|
||||
attributes
|
||||
) }
|
||||
{ ...data }
|
||||
>
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { DEFAULT_PRODUCT_LIST_LAYOUT } from './base-utils';
|
||||
|
||||
export const defaults = {
|
||||
columns: getSetting( 'default_columns', 3 ),
|
||||
rows: getSetting( 'default_rows', 3 ),
|
||||
alignButtons: false,
|
||||
contentVisibility: {
|
||||
orderBy: true,
|
||||
},
|
||||
orderby: 'date',
|
||||
layoutConfig: DEFAULT_PRODUCT_LIST_LAYOUT,
|
||||
isPreview: false,
|
||||
};
|
||||
|
||||
export const attributes = {
|
||||
/**
|
||||
* Number of columns.
|
||||
*/
|
||||
columns: {
|
||||
type: 'number',
|
||||
},
|
||||
/**
|
||||
* Number of rows.
|
||||
*/
|
||||
rows: {
|
||||
type: 'number',
|
||||
},
|
||||
/**
|
||||
* How to align cart buttons.
|
||||
*/
|
||||
alignButtons: {
|
||||
type: 'boolean',
|
||||
},
|
||||
/**
|
||||
* Content visibility setting
|
||||
*/
|
||||
contentVisibility: {
|
||||
type: 'object',
|
||||
},
|
||||
/**
|
||||
* Order to use for the products listing.
|
||||
*/
|
||||
orderby: {
|
||||
type: 'string',
|
||||
},
|
||||
/**
|
||||
* Layout config.
|
||||
*/
|
||||
layoutConfig: {
|
||||
type: 'array',
|
||||
},
|
||||
/**
|
||||
* Are we previewing?
|
||||
*/
|
||||
isPreview: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue