update Checkout i2 locks to attributes. (https://github.com/woocommerce/woocommerce-blocks/pull/4571)

* update locks to attributes instead

* remove lock from support attribute

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/form-step/form-step-block.tsx

@@ -16,21 +16,24 @@ export interface FormStepBlockProps {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 	className?: string;
 	children?: React.ReactNode;
+	lock?: { move: boolean; remove: boolean };
 }
 
 /**
  * Form Step Block for use in the editor.
  */
 export const FormStepBlock = ( {
-	attributes: { title = '', description = '', showStepNumber = true },
+	attributes,
 	setAttributes,
 	className = '',
 	children,
 }: FormStepBlockProps ): JSX.Element => {
+	const { title = '', description = '', showStepNumber = true } = attributes;
 	const blockProps = useBlockPropsWithLocking( {
 		className: classnames( 'wc-block-components-checkout-step', className, {
 			'wc-block-components-checkout-step--with-step-number': showStepNumber,
 		} ),
+		attributes,
 	} );
 
 	return (

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/hacks.ts

@@ -17,12 +17,11 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { isTextField } from '@wordpress/dom';
-import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect, subscribe, select as _select } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { MutableRefObject } from 'react';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-
+import { hasFilter } from '@wordpress/hooks';
 /**
  * Toggle class on body.
  *
@@ -47,35 +46,31 @@ const toggleBodyClass = ( className: string, add = true ) => {
  * We use a component so we can react to changes in the store.
  */
 export const addClassToBody = (): void => {
-	subscribe( () => {
+	if ( ! hasFilter( 'blocks.registerBlockType', 'core/lock/addAttribute' ) ) {
-		const blockEditorSelect = _select( blockEditorStore );
+		subscribe( () => {
+			const blockEditorSelect = _select( blockEditorStore );
 
-		if ( ! blockEditorSelect ) {
+			if ( ! blockEditorSelect ) {
-			return;
+				return;
-		}
+			}
 
-		const selectedBlock = blockEditorSelect.getSelectedBlock();
+			const selectedBlock = blockEditorSelect.getSelectedBlock();
 
-		if ( ! selectedBlock ) {
+			if ( ! selectedBlock ) {
-			return;
+				return;
-		}
+			}
 
-		const blockSelect = _select( blocksStore );
+			toggleBodyClass(
+				'wc-lock-selected-block--remove',
+				!! selectedBlock?.attributes?.lock?.remove
+			);
 
-		const selectedBlockType = blockSelect.getBlockType(
+			toggleBodyClass(
-			selectedBlock.name
+				'wc-lock-selected-block--move',
-		);
+				!! selectedBlock?.attributes?.lock?.move
-
+			);
-		toggleBodyClass(
+		} );
-			'wc-lock-selected-block--remove',
+	}
-			!! selectedBlockType?.supports?.lock?.remove
-		);
-
-		toggleBodyClass(
-			'wc-lock-selected-block--move',
-			!! selectedBlockType?.supports?.lock?.move
-		);
-	} );
 };
 
 /**
@@ -87,19 +82,22 @@ export const addClassToBody = (): void => {
 const useLockBlock = ( {
 	clientId,
 	ref,
-	type,
+	attributes,
 }: {
 	clientId: string;
-	ref: MutableRefObject< Element >;
+	ref: MutableRefObject< Element | undefined >;
-	type: string;
+	attributes: Record< string, unknown >;
 } ): void => {
-	const { isSelected, blockType } = useSelect(
+	const lockInCore = hasFilter(
+		'blocks.registerBlockType',
+		'core/lock/addAttribute'
+	);
+	const { isSelected } = useSelect(
 		( select ) => {
 			return {
 				isSelected: select( blockEditorStore ).isBlockSelected(
 					clientId
 				),
-				blockType: select( blocksStore ).getBlockType( type ),
 			};
 		},
 		[ clientId ]
@@ -108,7 +106,7 @@ const useLockBlock = ( {
 	const node = ref.current;
 
 	return useEffect( () => {
-		if ( ! isSelected || ! node ) {
+		if ( ! isSelected || ! node || lockInCore ) {
 			return;
 		}
 		function onKeyDown( event: KeyboardEvent ) {
@@ -120,9 +118,8 @@ const useLockBlock = ( {
 			if ( target !== node || isTextField( target ) ) {
 				return;
 			}
-
 			// Prevent the keyboard event from propogating if it supports locking.
-			if ( blockType?.supports?.lock?.remove ) {
+			if ( attributes?.lock?.remove ) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
@@ -133,20 +130,21 @@ const useLockBlock = ( {
 		return () => {
 			node.removeEventListener( 'keydown', onKeyDown, true );
 		};
-	}, [ node, isSelected, blockType ] );
+	}, [ node, isSelected, lockInCore, attributes ] );
 };
 
 /**
  * This hook is a light wrapper to useBlockProps, it wraps that hook plus useLockBlock to pass data between them.
  */
 export const useBlockPropsWithLocking = (
-	props?: Record< string, unknown > = {}
+	props: Record< string, unknown > = {}
 ): Record< string, unknown > => {
 	const ref = useRef< Element >();
+	const { attributes } = props;
 	const blockProps = useBlockProps( { ref, ...props } );
 	useLockBlock( {
 		ref,
-		type: blockProps[ 'data-type' ],
+		attributes,
 		clientId: blockProps[ 'data-block' ],
 	} );
 	return blockProps;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/attributes.tsx

@@ -7,4 +7,11 @@ export default {
 		type: 'boolean',
 		default: true,
 	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/edit.tsx

@@ -23,7 +23,7 @@ export const Edit = ( {
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const blockProps = useBlockPropsWithLocking();
+	const blockProps = useBlockPropsWithLocking( { attributes } );
 	const { cartPageId = 0, showReturnToCart = true } = attributes;
 	const { current: savedCartPageId } = useRef( cartPageId );
 	const currentPostId = useSelect(

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-actions-block/index.tsx

@@ -23,10 +23,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-actions-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-billing-address-block/attributes.tsx

@@ -16,4 +16,11 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-billing-address-block/index.tsx

@@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-billing-address-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-contact-information-block/attributes.tsx

@@ -19,4 +19,11 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	lock: {
+		type: 'object',
+		default: {
+			remove: true,
+			move: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-contact-information-block/index.tsx

@@ -30,10 +30,6 @@ registerFeaturePluginBlockType(
 			multiple: false,
 			reusable: false,
 			inserter: false,
-			lock: {
-				remove: true,
-				move: true,
-			},
 		},
 		parent: [ 'woocommerce/checkout-fields-block' ],
 		attributes,

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

@@ -10,8 +10,17 @@ import Block from './block';
 import './editor.scss';
 import { useBlockPropsWithLocking } from '../../hacks';
 
-export const Edit = (): JSX.Element => {
+export const Edit = ( {
-	const blockProps = useBlockPropsWithLocking();
+	attributes,
+}: {
+	attributes: {
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+} ): JSX.Element => {
+	const blockProps = useBlockPropsWithLocking( { attributes } );
 
 	return (
 		<div { ...blockProps }>

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

@@ -27,13 +27,17 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-express-payment-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
-	attributes: {},
+	attributes: {
+		lock: {
+			type: 'object',
+			default: {
+				remove: true,
+				move: true,
+			},
+		},
+	},
 	apiVersion: 2,
 	edit: Edit,
 	save: Save,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-order-note-block/edit.tsx

@@ -11,8 +11,17 @@ import Block from './block';
 import './editor.scss';
 import { useBlockPropsWithLocking } from '../../hacks';
 
-export const Edit = (): JSX.Element => {
+export const Edit = ( {
-	const blockProps = useBlockPropsWithLocking();
+	attributes,
+}: {
+	attributes: {
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+} ): JSX.Element => {
+	const blockProps = useBlockPropsWithLocking( { attributes } );
 	return (
 		<div { ...blockProps }>
 			<Disabled>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-order-note-block/index.tsx

@@ -28,7 +28,15 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-order-note-block', {
 		reusable: false,
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
-	attributes: {},
+	attributes: {
+		lock: {
+			type: 'object',
+			default: {
+				move: true,
+				remove: true,
+			},
+		},
+	},
 	apiVersion: 2,
 	edit: Edit,
 	save: Save,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-order-summary-block/attributes.tsx

@@ -8,4 +8,11 @@ export default {
 		type: 'boolean',
 		default: getSetting( 'displayCartPricesIncludingTax', false ),
 	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-order-summary-block/edit.tsx

@@ -18,10 +18,14 @@ export const Edit = ( {
 }: {
 	attributes: {
 		showRateAfterTaxName: boolean;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const blockProps = useBlockPropsWithLocking();
+	const blockProps = useBlockPropsWithLocking( { attributes } );
 	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
 	const displayItemizedTaxes = getSetting(
 		'displayItemizedTaxes',

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-order-summary-block/index.tsx

@@ -23,10 +23,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-order-summary-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-totals-block' ],
 	attributes,

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

@@ -16,4 +16,11 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

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

@@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-payment-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-address-block/attributes.tsx

@@ -16,4 +16,11 @@ export default {
 			'woo-gutenberg-products-block'
 		),
 	} ),
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-address-block/index.tsx

@@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-shipping-address-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-methods-block/attributes.tsx

@@ -20,4 +20,11 @@ export default {
 		type: 'boolean',
 		default: false,
 	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
 };

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/inner-blocks/checkout-shipping-methods-block/index.tsx

@@ -28,10 +28,6 @@ registerFeaturePluginBlockType( 'woocommerce/checkout-shipping-methods-block', {
 		multiple: false,
 		reusable: false,
 		inserter: false,
-		lock: {
-			remove: true,
-			move: true,
-		},
 	},
 	parent: [ 'woocommerce/checkout-fields-block' ],
 	attributes,

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout-i2/styles/editor.scss

@@ -27,12 +27,12 @@
 
 body.wc-lock-selected-block--move {
 	.block-editor-block-mover__move-button-container,
-	.block-editor-block-mover,
+	.block-editor-block-mover {
-	.block-editor-block-settings-menu {
 		display: none;
 	}
 }
 
+
 body.wc-lock-selected-block--remove {
 	.block-editor-block-settings-menu__popover {
 		.components-menu-group:last-child {