All Products block: Migrate to block.json (#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

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

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,
+};

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 (
+			<div
+				className={ getBlockClassName(
+					'wc-block-all-products',
+					attributes
+				) }
+				{ ...data }
+			>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};
+
+export default [ v1 ];

assets/js/blocks/products/all-products/index.js

@@ -1,21 +1,23 @@
 /**
  * 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';
 
 /**
  * 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 );

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 (
+		<div
+			className={ getBlockClassName(
+				'wc-block-all-products',
+				attributes
+			) }
+			{ ...data }
+		>
+			<InnerBlocks.Content />
+		</div>
+	);
+}