Update current block names to reflect use case and avoid conflicts (#37851)

* Change woocommerce/product-name to woocommerce/product-name-field

* Change woocommerce/product-summary to woocommerce/product-summary-field

* Change woocommerce/product-pricing to woocommerce/product-pricing-field

* Change woocommerce/product-radio to woocommerce/product-radio-field

* Change woocommerce/product-images to woocommerce/product-images-field

* Fix product name block invalid class name

* Move woocommerce/product-section to blocks folder

* Move woocommerce/product-tab to blocks folder

* Move woocommerce/product-collapsible to blocks folder

* Organize block registration, imports and styles

* Add changelog files

* Change woocommerce/product-category to woocommerce/product-category-field

* Change woocommerce/product-checkbox to woocommerce/product-checkbox-field

* Change woocommerce/product-inventory-email to woocommerce/product-inventory-email-field

* Change woocommerce/product-sku to woocommerce/product-sku-field

* Register woocommerce/product-schedule-sale-fields in server side

* Register woocommerce/product-track-inventory-fields in server side

* Fix invalid reference in tabs tests

packages/js/product-editor/changelog/add-37704

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update current block names to reflect use case and avoid conflicts#37704

packages/js/product-editor/src/blocks/category/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-category",
+	"name": "woocommerce/product-category-field",
 	"title": "Product Category",
 	"category": "widgets",
 	"description": "A field to select product categories.",
@@ -26,7 +26,8 @@
 		"multiple": false,
 		"reusable": false,
 		"inserter": false,
-		"lock": false
+		"lock": false,
+		"__experimentalToolbar": false
 	},
 	"editorStyle": "file:./editor.css"
 }

packages/js/product-editor/src/blocks/category/editor.scss

@@ -1,4 +1,4 @@
-.wp-block-woocommerce-product-category {
+.wp-block-woocommerce-product-category-field {
 	.woocommerce-experimental-select-tree-control__menu {
 		.experimental-woocommerce-tree-item {
 			font-size: 13px;

packages/js/product-editor/src/blocks/checkbox/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-checkbox",
+	"name": "woocommerce/product-checkbox-field",
 	"title": "Product checkbox control",
 	"category": "woocommerce",
 	"description": "The product checkbox.",

packages/js/product-editor/src/blocks/collapsible/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/collapsible",
+	"name": "woocommerce/product-collapsible",
 	"title": "Collapsible",
 	"category": "widgets",
 	"description": "Container with collapsible inner blocks.",

packages/js/product-editor/src/blocks/images/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-images",
+	"name": "woocommerce/product-images-field",
 	"title": "Product images",
 	"category": "widgets",
 	"description": "The product images.",
@@ -29,5 +29,6 @@
 		"inserter": false,
 		"lock": false,
 		"__experimentalToolbar": false
-	}
+	},
+	"editorStyle": "file:./editor.css"
 }

packages/js/product-editor/src/blocks/images/editor.scss

@@ -1,4 +1,4 @@
-.wp-block-woocommerce-product-images {
+.wp-block-woocommerce-product-images-field {
     .components-card__body {
         padding: 0 0 40px 0;
     }

packages/js/product-editor/src/blocks/index.ts

@@ -0,0 +1,17 @@
+export { init as initCategory } from './category';
+export { init as initCheckbox } from './checkbox';
+export { init as initCollapsible } from './collapsible';
+export { init as initConditional } from './conditional';
+export { init as initImages } from './images';
+export { init as initLowStockQty } from './inventory-email';
+export { init as initSku } from './inventory-sku';
+export { init as initName } from './name';
+export { init as initPricing } from './pricing';
+export { init as initRadio } from './radio';
+export { init as initScheduleSale } from './schedule-sale';
+export { init as initSection } from './section';
+export { init as initShippingDimensions } from './shipping-dimensions';
+export { init as initShippingFee } from './shipping-fee';
+export { init as initSummary } from './summary';
+export { init as initTab } from './tab';
+export { init as initTrackInventory } from './track-inventory';

packages/js/product-editor/src/blocks/inventory-email/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-inventory-email",
+	"name": "woocommerce/product-inventory-email-field",
 	"title": "Stock level threshold",
 	"category": "widgets",
 	"description": "Stock management minimum quantity.",

packages/js/product-editor/src/blocks/inventory-email/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-woocommerce-product-inventory-email-field {
+	margin-top: $gap-large;
+}

packages/js/product-editor/src/blocks/inventory-email/style.scss

@@ -1,3 +0,0 @@
-.wp-block-woocommerce-product-inventory-email {
-	margin-top: $gap-large;
-}

packages/js/product-editor/src/blocks/inventory-sku/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-sku",
+	"name": "woocommerce/product-sku-field",
 	"title": "Product text control",
 	"category": "woocommerce",
 	"description": "The product sku.",

packages/js/product-editor/src/blocks/name/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-name",
+	"name": "woocommerce/product-name-field",
 	"title": "Product name",
 	"category": "widgets",
 	"description": "The product name.",

packages/js/product-editor/src/blocks/name/edit.tsx

@@ -34,7 +34,7 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { AUTO_DRAFT_NAME } from '../../utils';
-import { EditProductLinkModal } from '../edit-product-link-modal';
+import { EditProductLinkModal } from '../../components/edit-product-link-modal';
 import { useValidation } from '../../hooks/use-validation';
 
 export function Edit() {

packages/js/product-editor/src/blocks/name/editor.scss

@@ -23,3 +23,15 @@
 .woocommerce-product-form__required-input {
 	color: #CC1818;
 }
+
+.wp-block-woocommerce-product-name-field {
+	.has-error {
+		.components-base-control .components-input-control__backdrop {
+			border-color: $studio-red-50;
+		}
+
+		.components-base-control__help {
+			color: $studio-red-50;
+		}
+	}
+}

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

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-pricing",
+	"name": "woocommerce/product-pricing-field",
 	"description": "A product price block with currency display.",
 	"title": "Product pricing",
 	"category": "widgets",

packages/js/product-editor/src/blocks/radio/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-radio",
+	"name": "woocommerce/product-radio-field",
 	"title": "Product radio control",
 	"category": "woocommerce",
 	"description": "The product radio.",

packages/js/product-editor/src/blocks/schedule-sale/edit.tsx

@@ -22,9 +22,7 @@ import { ScheduleSalePricingBlockAttributes } from './types';
 import { useValidation } from '../../hooks/use-validation';
 
 export function Edit( {}: BlockEditProps< ScheduleSalePricingBlockAttributes > ) {
-	const blockProps = useBlockProps( {
-		className: 'wp-block-woocommerce-product-schedule-sale-fields',
-	} );
+	const blockProps = useBlockProps();
 
 	const dateTimeFormat = getSettings().formats.datetime;
 

packages/js/product-editor/src/blocks/section/edit.tsx

@@ -8,7 +8,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { BlockIcon } from '../block-icon';
+import { BlockIcon } from '../../components/block-icon';
 import { SectionBlockAttributes } from './types';
 import { sanitizeHTML } from '../../utils/sanitize-html';
 

packages/js/product-editor/src/blocks/style.scss

@@ -0,0 +1,13 @@
+@import 'category/editor.scss';
+@import 'checkbox/editor.scss';
+@import 'images/editor.scss';
+@import 'inventory-email/editor.scss';
+@import 'inventory-sku/editor.scss';
+@import 'name/editor.scss';
+@import 'pricing/editor.scss';
+@import 'schedule-sale/editor.scss';
+@import 'section/editor.scss';
+@import 'shipping-dimensions/editor.scss';
+@import 'summary/editor.scss';
+@import 'tab/editor.scss';
+@import 'track-inventory/editor.scss';

packages/js/product-editor/src/blocks/summary/block.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"name": "woocommerce/product-summary",
+	"name": "woocommerce/product-summary-field",
 	"title": "Product summary",
 	"category": "widgets",
 	"description": "The product summary.",
@@ -30,5 +30,6 @@
 		"reusable": false,
 		"inserter": false,
 		"lock": false
-	}
+	},
+	"editorStyle": "file:./editor.css"
 }

packages/js/product-editor/src/blocks/tab/tab-button.tsx

@@ -8,8 +8,8 @@ import { createElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { TABS_SLOT_NAME } from '../tabs/constants';
-import { TabsFillProps } from '../tabs';
+import { TABS_SLOT_NAME } from '../../components/tabs/constants';
+import { TabsFillProps } from '../../components/tabs';
 
 export function TabButton( {
 	children,

packages/js/product-editor/src/blocks/track-inventory/edit.tsx

@@ -21,9 +21,7 @@ import { TrackInventoryBlockAttributes } from './types';
 import { useValidation } from '../../hooks/use-validation';
 
 export function Edit( {}: BlockEditProps< TrackInventoryBlockAttributes > ) {
-	const blockProps = useBlockProps( {
-		className: 'wp-block-woocommerce-product-track-inventory-fields',
-	} );
+	const blockProps = useBlockProps();
 
 	const [ manageStock, setManageStock ] = useEntityProp< boolean >(
 		'postType',

packages/js/product-editor/src/components/editor/init-blocks.ts

@@ -12,23 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { init as initImages } from '../images';
-import { init as initName } from '../details-name-block';
-import { init as initRadio } from '../../blocks/radio';
-import { init as initSummary } from '../details-summary-block';
-import { init as initCategory } from '../../blocks/category';
-import { init as initSection } from '../section';
-import { init as initTab } from '../tab';
-import { init as initPricing } from '../pricing-block';
-import { init as initCollapsible } from '../collapsible-block';
-import { init as initScheduleSale } from '../../blocks/schedule-sale';
-import { init as initTrackInventory } from '../../blocks/track-inventory';
-import { init as initSku } from '../../blocks/inventory-sku';
-import { init as initConditional } from '../../blocks/conditional';
-import { init as initLowStockQty } from '../../blocks/inventory-email';
-import { init as initCheckbox } from '../../blocks/checkbox';
-import { init as initShippingDimensions } from '../../blocks/shipping-dimensions';
-import { init as initShippingFee } from '../../blocks/shipping-fee';
+import * as productBlocks from '../../blocks';
 
 export const initBlocks = () => {
 	const coreBlocks = __experimentalGetCoreBlocks();
@@ -39,21 +23,5 @@ export const initBlocks = () => {
 	// @ts-ignore An argument is allowed to specify which blocks to register.
 	registerCoreBlocks( blocks );
 
-	initImages();
-	initCategory();
-	initName();
-	initRadio();
-	initSummary();
-	initSection();
-	initTab();
-	initPricing();
-	initCollapsible();
-	initScheduleSale();
-	initTrackInventory();
-	initSku();
-	initConditional();
-	initLowStockQty();
-	initCheckbox();
-	initShippingDimensions();
-	initShippingFee();
+	Object.values( productBlocks ).forEach( ( init ) => init() );
 };

packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { Tabs } from '../';
-import { Edit as Tab } from '../../tab/edit';
+import { Edit as Tab } from '../../../blocks/tab/edit';
 
 jest.mock( '@wordpress/block-editor', () => ( {
 	...jest.requireActual( '@wordpress/block-editor' ),

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

@@ -1,38 +1,27 @@
 /* Editor */
+
 @import 'components/editor/style.scss';
 @import 'components/block-editor/style.scss';
 
 /* Structural */
 
-@import 'components/section/editor.scss';
-@import 'components/tab/editor.scss';
 @import 'components/tabs/style.scss';
 @import 'components/product-section-layout/style.scss';
 @import 'components/header/style.scss';
 
-/* Generic Blocks */
-
-@import 'blocks/checkbox/editor.scss';
-@import 'components/radio-field/style.scss';
-
-/* Field Blocks */
-
-@import 'blocks/inventory-sku/style.scss';
-@import 'blocks/inventory-email/style.scss';
-@import 'blocks/schedule-sale/editor.scss';
-@import 'blocks/track-inventory/editor.scss';
-@import 'blocks/shipping-dimensions/editor.scss';
-@import 'blocks/category/editor.scss';
-@import 'components/images/editor.scss';
-@import 'components/details-summary-block/style.scss';
-@import 'components/details-name-block/style.scss';
-@import 'components/pricing-block/style.scss';
-
 /* Components */
 
+@import 'components/radio-field/style.scss';
 @import 'components/iframe-editor/style.scss';
 @import 'components/details-categories-field/style.scss';
 @import 'components/details-categories-field/create-category-modal.scss';
 @import 'components/product-mvp-ces-footer/style.scss';
 @import 'components/product-mvp-feedback-modal/style.scss';
 @import 'components/edit-product-link-modal/style.scss';
+@import 'components/edit-product-link-modal/style.scss';
+@import 'components/details-categories-field/style.scss';
+@import 'components/details-categories-field/create-category-modal.scss';
+
+/* Field Blocks */
+
+@import 'blocks/style.scss'

plugins/woocommerce/changelog/add-37704

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update current block names to reflect use case and avoid conflicts#37704

plugins/woocommerce/includes/class-wc-post-types.php

@@ -384,13 +384,13 @@ class WC_Post_Types {
 									),
 									array(
 										array(
-											'woocommerce/product-name',
+											'woocommerce/product-name-field',
 											array(
 												'name' => 'Product name',
 											),
 										),
 										array(
-											'woocommerce/product-summary',
+											'woocommerce/product-summary-field',
 										),
 										array(
 											'core/columns',
@@ -403,7 +403,7 @@ class WC_Post_Types {
 													),
 													array(
 														array(
-															'woocommerce/product-pricing',
+															'woocommerce/product-pricing-field',
 															array(
 																'name' => 'regular_price',
 																'label' => __( 'List price', 'woocommerce' ),
@@ -419,7 +419,7 @@ class WC_Post_Types {
 													),
 													array(
 														array(
-															'woocommerce/product-pricing',
+															'woocommerce/product-pricing-field',
 															array(
 																'name' => 'sale_price',
 																'label' => __( 'Sale price', 'woocommerce' ),
@@ -447,7 +447,7 @@ class WC_Post_Types {
 									),
 									array(
 										array(
-											'woocommerce/product-images',
+											'woocommerce/product-images-field',
 											array(
 												'images' => array(),
 											),
@@ -462,7 +462,7 @@ class WC_Post_Types {
 									),
 									array(
 										array(
-											'woocommerce/product-category',
+											'woocommerce/product-category-field',
 											array(
 												'name' => 'categories',
 											),
@@ -504,7 +504,7 @@ class WC_Post_Types {
 													),
 													array(
 														array(
-															'woocommerce/product-pricing',
+															'woocommerce/product-pricing-field',
 															array(
 																'name' => 'regular_price',
 																'label' => __( 'List price', 'woocommerce' ),
@@ -520,7 +520,7 @@ class WC_Post_Types {
 													),
 													array(
 														array(
-															'woocommerce/product-pricing',
+															'woocommerce/product-pricing-field',
 															array(
 																'name' => 'sale_price',
 																'label' => __( 'Sale price', 'woocommerce' ),
@@ -534,7 +534,7 @@ class WC_Post_Types {
 											'woocommerce/product-schedule-sale-fields',
 										),
 										array(
-											'woocommerce/product-radio',
+											'woocommerce/product-radio-field',
 											array(
 												'title'    => __( 'Charge sales tax on', 'woocommerce' ),
 												'property' => 'tax_status',
@@ -555,7 +555,7 @@ class WC_Post_Types {
 											),
 										),
 										array(
-											'woocommerce/collapsible',
+											'woocommerce/product-collapsible',
 											array(
 												'toggleText'       => __( 'Advanced', 'woocommerce' ),
 												'initialCollapsed' => true,
@@ -563,7 +563,7 @@ class WC_Post_Types {
 											),
 											array(
 												array(
-													'woocommerce/product-radio',
+													'woocommerce/product-radio-field',
 													array(
 														'title'    => __( 'Tax class', 'woocommerce' ),
 														'description' => sprintf(
@@ -618,13 +618,13 @@ class WC_Post_Types {
 									),
 									array(
 										array(
-											'woocommerce/product-sku',
+											'woocommerce/product-sku-field',
 										),
 										array(
 											'woocommerce/product-track-inventory-fields',
 										),
 										array(
-											'woocommerce/collapsible',
+											'woocommerce/product-collapsible',
 											array(
 												'toggleText'       => __( 'Advanced', 'woocommerce' ),
 												'initialCollapsed' => true,
@@ -640,7 +640,7 @@ class WC_Post_Types {
 													),
 													array(
 														array(
-															'woocommerce/product-radio',
+															'woocommerce/product-radio-field',
 															array(
 																'title'    => __( 'When out of stock', 'woocommerce' ),
 																'property' => 'backorders',
@@ -664,12 +664,12 @@ class WC_Post_Types {
 															),
 														),
 														array(
-															'woocommerce/product-inventory-email',
+															'woocommerce/product-inventory-email-field',
 														),
 													),
 												),
 												array(
-													'woocommerce/product-checkbox',
+													'woocommerce/product-checkbox-field',
 													array(
 														'title'    => __(
 															'Restrictions',

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php

@@ -20,10 +20,23 @@ class BlockRegistry {
 	 * Array of all available product blocks.
 	 */
 	const PRODUCT_BLOCKS = [
-		'woocommerce/product-name',
-		'woocommerce/product-pricing',
+		'woocommerce/conditional',
+		'woocommerce/product-category-field',
+		'woocommerce/product-checkbox-field',
+		'woocommerce/product-collapsible',
+		'woocommerce/product-images-field',
+		'woocommerce/product-inventory-email-field',
+		'woocommerce/product-sku-field',
+		'woocommerce/product-name-field',
+		'woocommerce/product-pricing-field',
+		'woocommerce/product-radio-field',
+		'woocommerce/product-schedule-sale-fields',
 		'woocommerce/product-section',
+		'woocommerce/product-shipping-dimensions-fields',
+		'woocommerce/product-shipping-fee-fields',
+		'woocommerce/product-summary-field',
 		'woocommerce/product-tab',
+		'woocommerce/product-track-inventory-fields',
 	];
 
 	/**