Split product editor blocks into separate directory structures (#40571)

* Create 'generic' and 'product-fields' and separate blocks between the two

* Refactor 'BlockRegistry' to include new directory structure

* Increment README

* Add param documentation

* Add changelogs

* Lint markdown

* Add block directory doc

* Fix jest test

* Update handbook reference

docs/product-editor-development/README.md

@@ -10,10 +10,10 @@ The product editor's UI consists of Groups (currently rendered as tabs), Section
 
 The form's structure is defined in PHP using a Template, which is a tree structure of blocks. The template can be modified by using the Template API to add new Groups, Sections, and Fields as well as remove existing ones.
 
-Many extensibility implementations can be done using only the PHP-based Block Template API alongside our library of [reusable blocks](../../packages/js/product-editor/src/blocks/README.md). More complex interactivity can be implemented using JavaScript and React (the same library used to implement the core blocks used in the product editor). [@woocommerce/create-product-editor-block](../../packages/js/create-product-editor-block/README.md) can help scaffold a development environment with JavaScript and React.
+Many extensibility implementations can be done using only the PHP-based Block Template API alongside our library of [generic blocks](../../packages/js/product-editor/src/blocks/generic/README.md). More complex interactivity can be implemented using JavaScript and React (the same library used to implement the core blocks used in the product editor). [@woocommerce/create-product-editor-block](../../packages/js/create-product-editor-block/README.md) can help scaffold a development environment with JavaScript and React.
 
 ## Related documentation
 
 - [Examples on Template API usage](../../plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md)
 - [Related hooks and Template API documentation](../../plugins/woocommerce/src/Admin/BlockTemplates/README.md)
-- [Reusable blocks documentation](../../packages/js/product-editor/src/blocks/README.md)
+- [Generic blocks documentation](../../packages/js/product-editor/src/blocks/generic/README.md)

packages/js/product-editor/changelog/tweak-refactor-blocks-org

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Split product editor blocks into 'generic' and 'product-fields' directories

packages/js/product-editor/src/blocks/README.md

@@ -1,7 +0,0 @@
-# Product Editor Blocks
-
-This directory contains reusable blocks for the product editor.
-
-## Reusable blocks
-
-### [woocommerce/product-checkbox-field](checkbox/README.md)

packages/js/product-editor/src/blocks/generic/README.md

@@ -0,0 +1,19 @@
+# Product Editor Generic Blocks
+
+This directory contains generic blocks for the product editor.
+
+## Blocks list
+
+### [woocommerce/product-checkbox-field](checkbox/README.md)
+
+### [woocommerce/product-collapsible](collapsible/README.md)
+
+### [woocommerce/conditional](conditional/README.md)
+
+### [woocommerce/product-pricing-field](pricing/README.md)
+
+### [woocommerce/product-radio-field](radio/README.md)
+
+### [woocommerce/product-text-field](text/README.md)
+
+### [woocommerce/product-toggle-field](toggle/README.md)

packages/js/product-editor/src/blocks/generic/checkbox/edit.tsx

@@ -11,7 +11,7 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
 /**
  * Internal dependencies
  */
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/generic/collapsible/edit.tsx

@@ -10,7 +10,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/generic/conditional/edit.tsx

@@ -10,7 +10,7 @@ import { DisplayState } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export interface ConditionalBlockAttributes extends BlockAttributes {
 	mustMatch: Record< string, Array< string > >;

packages/js/product-editor/src/blocks/generic/pricing/edit.tsx

@@ -18,9 +18,9 @@ import {
 /**
  * Internal dependencies
  */
-import { useCurrencyInputProps } from '../../hooks/use-currency-input-props';
+import { useCurrencyInputProps } from '../../../hooks/use-currency-input-props';
 import { PricingBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/generic/radio/edit.tsx

@@ -8,9 +8,9 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
 /**
  * Internal dependencies
  */
-import { RadioField } from '../../components/radio-field';
+import { RadioField } from '../../../components/radio-field';
 import { RadioBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

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

@@ -12,9 +12,9 @@ import {
 /**
  * Internal dependencies
  */
-import { sanitizeHTML } from '../../utils/sanitize-html';
+import { sanitizeHTML } from '../../../utils/sanitize-html';
 import { SectionBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/generic/tab/edit.tsx

@@ -11,7 +11,7 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
  * Internal dependencies
  */
 import { TabButton } from './tab-button';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export interface TabBlockAttributes extends BlockAttributes {
 	id: string;

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

@@ -8,8 +8,8 @@ import { createElement, Fragment } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { TABS_SLOT_NAME } from '../../components/tabs/constants';
-import { TabsFillProps } from '../../components/tabs';
+import { TABS_SLOT_NAME } from '../../../components/tabs/constants';
+import { TabsFillProps } from '../../../components/tabs';
 
 export const DEFAULT_TAB_ORDER = 100;
 

packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx

@@ -22,7 +22,7 @@ import { useSelect } from '@wordpress/data';
 import { CreateTaxonomyModal } from './create-taxonomy-modal';
 import { Taxonomy, TaxonomyMetadata } from './types';
 import useTaxonomySearch from './use-taxonomy-search';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 interface TaxonomyBlockAttributes extends BlockAttributes {
 	label: string;

packages/js/product-editor/src/blocks/generic/text/edit.tsx

@@ -16,10 +16,10 @@ import {
 /**
  * Internal dependencies
  */
-import { useValidation } from '../../contexts/validation-context';
-import useProductEntityProp from '../../hooks/use-product-entity-prop';
+import { useValidation } from '../../../contexts/validation-context';
+import useProductEntityProp from '../../../hooks/use-product-entity-prop';
 import { TextBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/generic/toggle/edit.tsx

@@ -10,8 +10,8 @@ import { useWooBlockProps } from '@woocommerce/block-templates';
  * Internal dependencies
  */
 import { ToggleBlockAttributes } from './types';
-import { sanitizeHTML } from '../../utils/sanitize-html';
-import { ProductEditorBlockEditProps } from '../../types';
+import { sanitizeHTML } from '../../../utils/sanitize-html';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

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

@@ -1,30 +1,30 @@
-export { init as initCatalogVisibility } from './catalog-visibility';
-export { init as initCheckbox } from './checkbox';
-export { init as initCollapsible } from './collapsible';
-export { init as initConditional } from './conditional';
-export { init as initDescription } from './description';
-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 initRegularPrice } from './regular-price';
-export { init as initSalePrice } from './sale-price';
-export { init as initScheduleSale } from './schedule-sale';
-export { init as initSection } from './section';
-export { init as initShippingClass } from './shipping-class';
-export { init as initShippingDimensions } from './shipping-dimensions';
-export { init as initSummary } from './summary';
-export { init as initTab } from './tab';
-export { init as initTag } from './tag';
-export { init as initInventoryQuantity } from './inventory-quantity';
-export { init as initToggle } from './toggle';
-export { init as attributesInit } from './attributes';
-export { init as initVariations } from './variations';
-export { init as initRequirePassword } from './password';
-export { init as initVariationItems } from './variation-items';
-export { init as initVariationOptions } from './variation-options';
-export { init as initNotice } from './notice';
-export { init as initTaxonomy } from './taxonomy';
-export { init as initText } from './text';
+export { init as initCatalogVisibility } from './product-fields/catalog-visibility';
+export { init as initCheckbox } from './generic/checkbox';
+export { init as initCollapsible } from './generic/collapsible';
+export { init as initConditional } from './generic/conditional';
+export { init as initDescription } from './product-fields/description';
+export { init as initImages } from './product-fields/images';
+export { init as initLowStockQty } from './product-fields/inventory-email';
+export { init as initSku } from './product-fields/inventory-sku';
+export { init as initName } from './product-fields/name';
+export { init as initPricing } from './generic/pricing';
+export { init as initRadio } from './generic/radio';
+export { init as initRegularPrice } from './product-fields/regular-price';
+export { init as initSalePrice } from './product-fields/sale-price';
+export { init as initScheduleSale } from './product-fields/schedule-sale';
+export { init as initSection } from './generic/section';
+export { init as initShippingClass } from './product-fields/shipping-class';
+export { init as initShippingDimensions } from './product-fields/shipping-dimensions';
+export { init as initSummary } from './product-fields/summary';
+export { init as initTab } from './generic/tab';
+export { init as initTag } from './product-fields/tag';
+export { init as initInventoryQuantity } from './product-fields/inventory-quantity';
+export { init as initToggle } from './generic/toggle';
+export { init as attributesInit } from './product-fields/attributes';
+export { init as initVariations } from './product-fields/variations';
+export { init as initRequirePassword } from './product-fields/password';
+export { init as initVariationItems } from './product-fields/variation-items';
+export { init as initVariationOptions } from './product-fields/variation-options';
+export { init as initNotice } from './product-fields/notice';
+export { init as initTaxonomy } from './generic/taxonomy';
+export { init as initText } from './generic/text';

packages/js/product-editor/src/blocks/product-fields/attributes/edit.tsx

@@ -13,8 +13,8 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { Attributes as AttributesContainer } from '../../components/attributes/attributes';
-import { ProductEditorBlockEditProps } from '../../types';
+import { Attributes as AttributesContainer } from '../../../components/attributes/attributes';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/product-fields/catalog-visibility/edit.tsx

@@ -11,7 +11,7 @@ import { Product } from '@woocommerce/data';
  * Internal dependencies
  */
 import { CatalogVisibilityBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/product-fields/description/edit.tsx

@@ -17,9 +17,9 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { ContentPreview } from '../../components/content-preview';
-import { ModalEditor } from '../../components/modal-editor';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ContentPreview } from '../../../components/content-preview';
+import { ModalEditor } from '../../../components/modal-editor';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 /**
  * Internal dependencies

packages/js/product-editor/src/blocks/product-fields/images/edit.tsx

@@ -23,7 +23,7 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 type Image = MediaItem & {
 	src: string;

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

@@ -25,9 +25,9 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { useValidation } from '../../contexts/validation-context';
+import { useValidation } from '../../../contexts/validation-context';
 import { InventoryEmailBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

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

@@ -17,8 +17,8 @@ import {
  * Internal dependencies
  */
 import { TrackInventoryBlockAttributes } from './types';
-import { useValidation } from '../../contexts/validation-context';
-import { ProductEditorBlockEditProps } from '../../types';
+import { useValidation } from '../../../contexts/validation-context';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

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

@@ -19,7 +19,7 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 /**
  * Internal dependencies

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

@@ -33,12 +33,12 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { AUTO_DRAFT_NAME } from '../../utils';
-import { EditProductLinkModal } from '../../components/edit-product-link-modal';
-import { useValidation } from '../../contexts/validation-context';
+import { AUTO_DRAFT_NAME } from '../../../utils';
+import { EditProductLinkModal } from '../../../components/edit-product-link-modal';
+import { useValidation } from '../../../contexts/validation-context';
 import { NameBlockAttributes } from './types';
-import { useProductEdits } from '../../hooks/use-product-edits';
-import { ProductEditorBlockEditProps } from '../../types';
+import { useProductEdits } from '../../../hooks/use-product-edits';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,

packages/js/product-editor/src/blocks/product-fields/notice/edit.tsx

@@ -12,9 +12,9 @@ import { useEntityProp } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { Notice } from '../../components/notice';
-import { hasAttributesUsedForVariations } from '../../utils';
-import { ProductEditorBlockEditProps } from '../../types';
+import { Notice } from '../../../components/notice';
+import { hasAttributesUsedForVariations } from '../../../utils';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export interface NoticeBlockAttributes extends BlockAttributes {
 	buttonText: string;

packages/js/product-editor/src/blocks/product-fields/password/edit.tsx

@@ -18,7 +18,7 @@ import {
  */
 
 import { RequirePasswordBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../types';
+import { ProductEditorBlockEditProps } from '../../../types';
 
 export function Edit( {
 	attributes,