Move Checkout block attributes into metadata (`block.json`) (https://github.com/woocommerce/woocommerce-blocks/pull/5594)

* Add block title to AbstractBlock class

* Add block title to Checkout block

* Include all block.json files in tsconfig

* Add get_block_title method to Checkout.php

* Remove redundant block_title field

* Add block.json and remove static attributes from attributes.ts

* Register block using attributes from block.json

* Add metadata_path to AbstractBlock

* Add function to AssetsApi to get the metadata path from the plugin root

* Register the block using metadata if it's set in the block's class

* Remove get_block_title method

* Only add supports and attributes to the block when not registering with metadata

* Change get_block_metadata to get_block_metadata_path

* Change indentation to tabs in block.json

* Update comment to clarify why attributes and supports are set later

* Check if path to metadata is not empty instead of set and not empty

* Move checkout block out of cart-checkout directory

* Update get_block_metadata_path function to find block.json automatically

* Remove metadata path from AbstractBlock

* Check if there's a metadata file and register blocks with metadata if so

* Move deprecated attributes out of metadata and into attributes.ts

* Re-add deprecated attributes to checkout index

* Move order notes test

* Move test for checkout phone number in edito

* Fix indentation in checkout/block.json

* Move checkout terms tests

* Try forcing storefront theme in e2e tests

* Revert "Try forcing storefront theme in e2e tests"

This reverts commit 5b0fd47a2c39aadb0141a4ed28cbc0e6baa89625.

* Try capturing screenshot on test failures

* Try uploading error in try catch

* Try uploading artefacts on error

* Test uploading artefacts

* Screenshot just before looking for edit post layout

* Revert "Screenshot just before looking for edit post layout"

This reverts commit 61dff027789ce13a0d84e7b6f11e431637c5a450.

* Revert "Test uploading artefacts"

This reverts commit adf5cc55bcdb677f889bf5a62803b4150d98e665.

* Revert "Try uploading artefacts on error"

This reverts commit 7441a832a113a95fef89cc1b8db6dc79271be516.

* Revert "Try uploading error in try catch"

This reverts commit ca412ce505d56286b164f588a201a451f6bceeb6.

* Revert "Try capturing screenshot on test failures"

This reverts commit 0de6e97df19b116091a7bb3b8652713867d2d80f.

Co-authored-by: Alex Florisca <alex.florisca@automattic.com>

plugins/woocommerce-blocks/assets/js/blocks/checkout/attributes.ts

@@ -5,40 +5,20 @@ import { getSetting } from '@woocommerce/settings';
 
 export const blockName = 'woocommerce/checkout';
 export const blockAttributes = {
-	isPreview: {
-		type: 'boolean',
-		default: false,
-		save: false,
-	},
 	hasDarkControls: {
 		type: 'boolean',
 		default: getSetting( 'hasDarkEditorStyleSupport', false ),
 	},
-	showCompanyField: {
+	showRateAfterTaxName: {
 		type: 'boolean',
-		default: false,
+		default: getSetting( 'displayCartPricesIncludingTax', false ),
 	},
-	requireCompanyField: {
+};
-		type: 'boolean',
+
-		default: false,
+/**
-	},
+ * @deprecated here for v1 migration support
-	allowCreateAccount: {
+ */
-		type: 'boolean',
+export const deprecatedAttributes = {
-		default: false,
-	},
-	showApartmentField: {
-		type: 'boolean',
-		default: true,
-	},
-	showPhoneField: {
-		type: 'boolean',
-		default: true,
-	},
-	requirePhoneField: {
-		type: 'boolean',
-		default: false,
-	},
-	// Deprecated - here for v1 migration support
 	showOrderNotes: {
 		type: 'boolean',
 		default: true,
@@ -55,8 +35,4 @@ export const blockAttributes = {
 		type: 'number',
 		default: 0,
 	},
-	showRateAfterTaxName: {
-		type: 'boolean',
-		default: getSetting( 'displayCartPricesIncludingTax', false ),
-	},
 };

plugins/woocommerce-blocks/assets/js/blocks/checkout/block.json

@@ -0,0 +1,46 @@
+{
+	"name": "woocommerce/checkout",
+	"version": "1.0.0",
+	"title": "Checkout",
+	"description": "Display a checkout form so your customers can submit orders.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"align": [ "wide" ],
+		"html": false,
+		"multiple": false
+	},
+	"attributes": {
+		"isPreview": {
+			"type": "boolean",
+			"default": false,
+			"save": false
+		},
+		"showCompanyField": {
+			"type": "boolean",
+			"default": false
+		},
+		"requireCompanyField": {
+			"type": "boolean",
+			"default": false
+		},
+		"allowCreateAccount": {
+			"type": "boolean",
+			"default": false
+		},
+		"showApartmentField": {
+			"type": "boolean",
+			"default": true
+		},
+		"showPhoneField": {
+			"type": "boolean",
+			"default": true
+		},
+		"requirePhoneField": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}

plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx

@@ -35,7 +35,10 @@ import type { TemplateArray } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './styles/editor.scss';
-import { addClassToBody, useBlockPropsWithLocking } from '../shared';
+import {
+	addClassToBody,
+	useBlockPropsWithLocking,
+} from '../cart-checkout/shared';
 import { CheckoutBlockContext, CheckoutBlockControlsContext } from './context';
 import type { Attributes } from './types';
 

plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/additional-fields.tsx

@@ -7,7 +7,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import './editor.scss';
-import { useForcedLayout, getAllowedBlocks } from '../../shared';
+import { useForcedLayout, getAllowedBlocks } from '../../cart-checkout/shared';
 
 export const AdditionalFields = ( {
 	block,

plugins/woocommerce-blocks/assets/js/blocks/checkout/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { Icon, fields } from '@woocommerce/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
@@ -11,11 +10,11 @@ import { BlockInstance, createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import { blockName, blockAttributes } from './attributes';
+import { blockAttributes, deprecatedAttributes } from './attributes';
 import './inner-blocks';
+import metadata from './block.json';
 
 const settings = {
-	title: __( 'Checkout', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
 			<Icon
@@ -24,25 +23,21 @@ const settings = {
 			/>
 		),
 	},
-	category: 'woocommerce',
+	attributes: {
-	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+		...metadata.attributes,
-	description: __(
+		...blockAttributes,
-		'Display a checkout form so your customers can submit orders.',
+		...deprecatedAttributes,
-		'woo-gutenberg-products-block'
-	),
-	supports: {
-		align: [ 'wide' ],
-		html: false,
-		multiple: false,
 	},
-	attributes: blockAttributes,
-	apiVersion: 2,
 	edit: Edit,
 	save: Save,
 	// Migrates v1 to v2 checkout.
 	deprecated: [
 		{
-			attributes: blockAttributes,
+			attributes: {
+				...metadata.attributes,
+				...blockAttributes,
+				...deprecatedAttributes,
+			},
 			save( { attributes }: { attributes: { className: string } } ) {
 				return (
 					<div
@@ -143,4 +138,4 @@ const settings = {
 	],
 };
 
-registerFeaturePluginBlockType( blockName, settings );
+registerFeaturePluginBlockType( metadata, settings );

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx

@@ -6,7 +6,7 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 /**
  * Internal dependencies
  */
-import { CheckoutExpressPayment } from '../../../payment-methods';
+import { CheckoutExpressPayment } from '../../../cart-checkout/payment-methods';
 
 const Block = ( { className }: { className?: string } ): JSX.Element | null => {
 	const { cartNeedsPayment } = useStoreCart();

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx

@@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useCheckoutBlockControlsContext } from '../../context';
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 import './style.scss';
 
 export const Edit = ( {

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/block.tsx

@@ -5,7 +5,7 @@
 /**
  * Internal dependencies
  */
-import { PaymentMethods } from '../../../payment-methods';
+import { PaymentMethods } from '../../../cart-checkout/payment-methods';
 
 const Block = (): JSX.Element | null => {
 	return <PaymentMethods />;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx

@@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './style.scss';
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 import { useCheckoutBlockContext } from '../../context';
 
 export const Edit = ( {