From 3858b03aecd1e4b8106a5396172b2945c280ab4d Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 28 Jul 2022 12:26:36 +0200 Subject: [PATCH] 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 --- .../blocks/products/all-products/block.json | 44 ++++++++ .../blocks/products/all-products/defaults.js | 21 ++++ .../products/all-products/deprecated.js | 36 +++++++ .../js/blocks/products/all-products/index.js | 101 +++--------------- .../js/blocks/products/all-products/save.js | 32 ++++++ .../assets/js/blocks/products/attributes.js | 67 ------------ 6 files changed, 147 insertions(+), 154 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/products/all-products/block.json create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/products/all-products/defaults.js create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/products/all-products/deprecated.js create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/products/all-products/save.js delete mode 100644 plugins/woocommerce-blocks/assets/js/blocks/products/attributes.js diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/block.json b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/block.json new file mode 100644 index 00000000000..f5a37be8a3a --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/block.json @@ -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 + } + } +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/defaults.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/defaults.js new file mode 100644 index 00000000000..a617cb833e0 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/defaults.js @@ -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, +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/deprecated.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/deprecated.js new file mode 100644 index 00000000000..5a5aadbf684 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/deprecated.js @@ -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 ( +
+ +
+ ); + }, +}; + +export default [ v1 ]; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js index 48bb0f742ab..659c21724a9 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/index.js @@ -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: ( ), }, - 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 ; - }, + 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 ( -
- -
- ); - }, + 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 ( -
- -
- ); - }, - }, - ], -} ); +registerBlockType( name, settings ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/save.js b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/save.js new file mode 100644 index 00000000000..108ae322d63 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/products/all-products/save.js @@ -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 ( +
+ +
+ ); +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/attributes.js b/plugins/woocommerce-blocks/assets/js/blocks/products/attributes.js deleted file mode 100644 index c83ea501d70..00000000000 --- a/plugins/woocommerce-blocks/assets/js/blocks/products/attributes.js +++ /dev/null @@ -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, - }, -};