Remove unnecessary focus on block divs in product editor (#41436)

* Add tabIndex -1 to useWooBlockProps

* Add changelog

* Fix property name in test

* Fix test

* Update changelog

* Add ts explanation

* Fix typo

packages/js/block-templates/changelog/fix-focus-block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+New product editor: Disable focus on root blocks, fixing unnecessary tab between fields in new product editor

packages/js/block-templates/src/hooks/use-woo-block-props/test/use-woo-block-props.test.ts

@@ -14,7 +14,7 @@ jest.mock( '@wordpress/block-editor', () => ( {
 } ) );
 
 describe( 'useWooBlockProps', () => {
-	it( 'should return the block props with the block id and block order attributes', () => {
+	it( 'should return the block props with the block id, block order attributes, and tabindex', () => {
 		renderHook( () =>
 			useWooBlockProps(
 				{
@@ -31,6 +31,7 @@ describe( 'useWooBlockProps', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			'data-template-block-id': 'test/block',
 			'data-template-block-order': 30,
+			tabIndex: -1,
 			className: 'test',
 		} );
 	} );

packages/js/block-templates/src/hooks/use-woo-block-props/use-woo-block-props.ts

@@ -17,8 +17,10 @@ export const useWooBlockProps = (
 	const additionalProps = {
 		'data-template-block-id': attributes._templateBlockId,
 		'data-template-block-order': attributes._templateBlockOrder,
+		tabIndex: -1,
 		...props,
 	};
-
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore the type definitions are slighly wrong. It should be possible to pass the tabIndex attribute.
 	return useBlockProps( additionalProps );
 };