Content lock all blocks in the product editor (#37382)

* Lock all blocks in the product editor to content only

* Add changelog entry

* Add content role to summary field to allow editing

* Remove unused BlockControls

packages/js/product-editor/changelog/fix-37209

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Content lock all blocks in the product editor

packages/js/product-editor/src/components/details-name-block/block.json

@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"name": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		}
 	},
 	"supports": {

packages/js/product-editor/src/components/details-summary-block/block.json

@@ -17,6 +17,10 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"__experimentalRole": "content"
 		}
 	},
 	"supports": {

packages/js/product-editor/src/components/pricing-block/block.json

@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"name": {
-			"type": "string"
+			"type": "string",
+			"__experimentalRole": "content"
 		},
 		"label": {
 			"type": "string"

packages/js/product-editor/src/components/tab/block.json

@@ -21,7 +21,10 @@
 		"multiple": true,
 		"reusable": false,
 		"inserter": false,
-		"lock": false
+		"lock": false,
+		"__experimentalToolbar": false
 	},
-	"usesContext": [ "selectedTab" ]
+	"usesContext": [ "selectedTab" ],
+	"editorStyle": "file:./editor.css",
+	"templateLock": "contentOnly"
 }

packages/js/product-editor/src/components/tab/edit.tsx

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import classnames from 'classnames';
 import { createElement } from '@wordpress/element';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import type { BlockAttributes } from '@wordpress/blocks';
 
 /**
@@ -39,7 +39,9 @@ export function Edit( {
 				role="tabpanel"
 				className={ classes }
 			>
-				<InnerBlocks templateLock="all" />
+				{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
+				{ /* @ts-ignore Content only template locking does exist for this property. */ }
+				<InnerBlocks templateLock="contentOnly" />
 			</div>
 		</div>
 	);

packages/js/product-editor/src/components/tab/style.scss

@@ -2,4 +2,9 @@
     &:not(.is-selected) {
         display: none;
     }
+}
+
+// Remove the Gutenberg selected outline.
+.wp-block-woocommerce-product-tab:after {
+    display: none;
 }