From 1f2d735d0c646ad1c4a0427fc4cad8a6532c7932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Fri, 21 Apr 2023 16:26:53 -0400 Subject: [PATCH] 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 --- .../js/product-editor/changelog/add-37704 | 4 +++ .../src/blocks/category/block.json | 5 +-- .../src/blocks/category/editor.scss | 2 +- .../src/blocks/checkbox/block.json | 2 +- .../collapsible}/block.json | 2 +- .../collapsible}/edit.tsx | 0 .../collapsible}/index.ts | 0 .../{components => blocks}/images/block.json | 5 +-- .../{components => blocks}/images/edit.tsx | 0 .../{components => blocks}/images/editor.scss | 2 +- .../images}/index.ts | 0 .../js/product-editor/src/blocks/index.ts | 17 +++++++++ .../src/blocks/inventory-email/block.json | 2 +- .../src/blocks/inventory-email/editor.scss | 3 ++ .../src/blocks/inventory-email/style.scss | 3 -- .../src/blocks/inventory-sku/block.json | 2 +- .../inventory-sku/{style.scss => editor.scss} | 0 .../name}/block.json | 2 +- .../name}/edit.tsx | 2 +- .../style.scss => blocks/name/editor.scss} | 12 +++++++ .../images => blocks/name}/index.ts | 0 .../pricing}/block.json | 2 +- .../pricing-block => blocks/pricing}/edit.tsx | 0 .../style.scss => blocks/pricing/editor.scss} | 0 .../pricing-block => blocks/pricing}/index.ts | 0 .../src/blocks/radio/block.json | 2 +- .../src/blocks/schedule-sale/edit.tsx | 4 +-- .../{components => blocks}/section/block.json | 0 .../{components => blocks}/section/edit.tsx | 2 +- .../section/editor.scss | 0 .../{components => blocks}/section/index.ts | 0 .../{components => blocks}/section/types.ts | 0 .../js/product-editor/src/blocks/style.scss | 13 +++++++ .../summary}/block.json | 5 +-- .../summary}/constants.ts | 0 .../summary}/edit.tsx | 0 .../style.scss => blocks/summary/editor.scss} | 0 .../summary}/index.ts | 0 .../summary}/paragraph-rtl-control/index.ts | 0 .../paragraph-rtl-control.tsx | 0 .../summary}/paragraph-rtl-control/types.ts | 0 .../summary}/types.ts | 0 .../src/{components => blocks}/tab/block.json | 0 .../src/{components => blocks}/tab/edit.tsx | 0 .../{components => blocks}/tab/editor.scss | 0 .../src/{components => blocks}/tab/index.ts | 0 .../{components => blocks}/tab/tab-button.tsx | 4 +-- .../src/blocks/track-inventory/edit.tsx | 4 +-- .../src/components/editor/init-blocks.ts | 36 ++----------------- .../src/components/tabs/test/tabs.spec.tsx | 2 +- packages/js/product-editor/src/style.scss | 29 +++++---------- plugins/woocommerce/changelog/add-37704 | 4 +++ .../includes/class-wc-post-types.php | 32 ++++++++--------- .../ProductBlockEditor/BlockRegistry.php | 17 +++++++-- 54 files changed, 120 insertions(+), 101 deletions(-) create mode 100644 packages/js/product-editor/changelog/add-37704 rename packages/js/product-editor/src/{components/collapsible-block => blocks/collapsible}/block.json (92%) rename packages/js/product-editor/src/{components/collapsible-block => blocks/collapsible}/edit.tsx (100%) rename packages/js/product-editor/src/{components/collapsible-block => blocks/collapsible}/index.ts (100%) rename packages/js/product-editor/src/{components => blocks}/images/block.json (88%) rename packages/js/product-editor/src/{components => blocks}/images/edit.tsx (100%) rename packages/js/product-editor/src/{components => blocks}/images/editor.scss (89%) rename packages/js/product-editor/src/{components/details-name-block => blocks/images}/index.ts (100%) create mode 100644 packages/js/product-editor/src/blocks/index.ts create mode 100644 packages/js/product-editor/src/blocks/inventory-email/editor.scss delete mode 100644 packages/js/product-editor/src/blocks/inventory-email/style.scss rename packages/js/product-editor/src/blocks/inventory-sku/{style.scss => editor.scss} (100%) rename packages/js/product-editor/src/{components/details-name-block => blocks/name}/block.json (92%) rename packages/js/product-editor/src/{components/details-name-block => blocks/name}/edit.tsx (98%) rename packages/js/product-editor/src/{components/details-name-block/style.scss => blocks/name/editor.scss} (62%) rename packages/js/product-editor/src/{components/images => blocks/name}/index.ts (100%) rename packages/js/product-editor/src/{components/pricing-block => blocks/pricing}/block.json (93%) rename packages/js/product-editor/src/{components/pricing-block => blocks/pricing}/edit.tsx (100%) rename packages/js/product-editor/src/{components/pricing-block/style.scss => blocks/pricing/editor.scss} (100%) rename packages/js/product-editor/src/{components/pricing-block => blocks/pricing}/index.ts (100%) rename packages/js/product-editor/src/{components => blocks}/section/block.json (100%) rename packages/js/product-editor/src/{components => blocks}/section/edit.tsx (94%) rename packages/js/product-editor/src/{components => blocks}/section/editor.scss (100%) rename packages/js/product-editor/src/{components => blocks}/section/index.ts (100%) rename packages/js/product-editor/src/{components => blocks}/section/types.ts (100%) create mode 100644 packages/js/product-editor/src/blocks/style.scss rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/block.json (87%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/constants.ts (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/edit.tsx (100%) rename packages/js/product-editor/src/{components/details-summary-block/style.scss => blocks/summary/editor.scss} (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/index.ts (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/paragraph-rtl-control/index.ts (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/paragraph-rtl-control/paragraph-rtl-control.tsx (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/paragraph-rtl-control/types.ts (100%) rename packages/js/product-editor/src/{components/details-summary-block => blocks/summary}/types.ts (100%) rename packages/js/product-editor/src/{components => blocks}/tab/block.json (100%) rename packages/js/product-editor/src/{components => blocks}/tab/edit.tsx (100%) rename packages/js/product-editor/src/{components => blocks}/tab/editor.scss (100%) rename packages/js/product-editor/src/{components => blocks}/tab/index.ts (100%) rename packages/js/product-editor/src/{components => blocks}/tab/tab-button.tsx (88%) create mode 100644 plugins/woocommerce/changelog/add-37704 diff --git a/packages/js/product-editor/changelog/add-37704 b/packages/js/product-editor/changelog/add-37704 new file mode 100644 index 00000000000..4608e3799ff --- /dev/null +++ b/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 diff --git a/packages/js/product-editor/src/blocks/category/block.json b/packages/js/product-editor/src/blocks/category/block.json index f68082aa7f7..c2627d871f3 100644 --- a/packages/js/product-editor/src/blocks/category/block.json +++ b/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" } diff --git a/packages/js/product-editor/src/blocks/category/editor.scss b/packages/js/product-editor/src/blocks/category/editor.scss index 274a755f854..1ca03f91698 100644 --- a/packages/js/product-editor/src/blocks/category/editor.scss +++ b/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; diff --git a/packages/js/product-editor/src/blocks/checkbox/block.json b/packages/js/product-editor/src/blocks/checkbox/block.json index 08b0348a07b..c2b2f4e53b5 100644 --- a/packages/js/product-editor/src/blocks/checkbox/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/components/collapsible-block/block.json b/packages/js/product-editor/src/blocks/collapsible/block.json similarity index 92% rename from packages/js/product-editor/src/components/collapsible-block/block.json rename to packages/js/product-editor/src/blocks/collapsible/block.json index ea246702f8d..8cf084538cf 100644 --- a/packages/js/product-editor/src/components/collapsible-block/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/components/collapsible-block/edit.tsx b/packages/js/product-editor/src/blocks/collapsible/edit.tsx similarity index 100% rename from packages/js/product-editor/src/components/collapsible-block/edit.tsx rename to packages/js/product-editor/src/blocks/collapsible/edit.tsx diff --git a/packages/js/product-editor/src/components/collapsible-block/index.ts b/packages/js/product-editor/src/blocks/collapsible/index.ts similarity index 100% rename from packages/js/product-editor/src/components/collapsible-block/index.ts rename to packages/js/product-editor/src/blocks/collapsible/index.ts diff --git a/packages/js/product-editor/src/components/images/block.json b/packages/js/product-editor/src/blocks/images/block.json similarity index 88% rename from packages/js/product-editor/src/components/images/block.json rename to packages/js/product-editor/src/blocks/images/block.json index 7037005dfa8..758ab2d45a3 100644 --- a/packages/js/product-editor/src/components/images/block.json +++ b/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" } diff --git a/packages/js/product-editor/src/components/images/edit.tsx b/packages/js/product-editor/src/blocks/images/edit.tsx similarity index 100% rename from packages/js/product-editor/src/components/images/edit.tsx rename to packages/js/product-editor/src/blocks/images/edit.tsx diff --git a/packages/js/product-editor/src/components/images/editor.scss b/packages/js/product-editor/src/blocks/images/editor.scss similarity index 89% rename from packages/js/product-editor/src/components/images/editor.scss rename to packages/js/product-editor/src/blocks/images/editor.scss index 29228aec4d6..8c261506bb5 100644 --- a/packages/js/product-editor/src/components/images/editor.scss +++ b/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; } diff --git a/packages/js/product-editor/src/components/details-name-block/index.ts b/packages/js/product-editor/src/blocks/images/index.ts similarity index 100% rename from packages/js/product-editor/src/components/details-name-block/index.ts rename to packages/js/product-editor/src/blocks/images/index.ts diff --git a/packages/js/product-editor/src/blocks/index.ts b/packages/js/product-editor/src/blocks/index.ts new file mode 100644 index 00000000000..8d0b74f0064 --- /dev/null +++ b/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'; diff --git a/packages/js/product-editor/src/blocks/inventory-email/block.json b/packages/js/product-editor/src/blocks/inventory-email/block.json index 1d30df924ef..77459faf963 100644 --- a/packages/js/product-editor/src/blocks/inventory-email/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/blocks/inventory-email/editor.scss b/packages/js/product-editor/src/blocks/inventory-email/editor.scss new file mode 100644 index 00000000000..87affd3aa21 --- /dev/null +++ b/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; +} diff --git a/packages/js/product-editor/src/blocks/inventory-email/style.scss b/packages/js/product-editor/src/blocks/inventory-email/style.scss deleted file mode 100644 index c99ea89374f..00000000000 --- a/packages/js/product-editor/src/blocks/inventory-email/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.wp-block-woocommerce-product-inventory-email { - margin-top: $gap-large; -} diff --git a/packages/js/product-editor/src/blocks/inventory-sku/block.json b/packages/js/product-editor/src/blocks/inventory-sku/block.json index 335c9de9858..9a50ccdf140 100644 --- a/packages/js/product-editor/src/blocks/inventory-sku/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/blocks/inventory-sku/style.scss b/packages/js/product-editor/src/blocks/inventory-sku/editor.scss similarity index 100% rename from packages/js/product-editor/src/blocks/inventory-sku/style.scss rename to packages/js/product-editor/src/blocks/inventory-sku/editor.scss diff --git a/packages/js/product-editor/src/components/details-name-block/block.json b/packages/js/product-editor/src/blocks/name/block.json similarity index 92% rename from packages/js/product-editor/src/components/details-name-block/block.json rename to packages/js/product-editor/src/blocks/name/block.json index ea5aec74c88..284f3da5501 100644 --- a/packages/js/product-editor/src/components/details-name-block/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/components/details-name-block/edit.tsx b/packages/js/product-editor/src/blocks/name/edit.tsx similarity index 98% rename from packages/js/product-editor/src/components/details-name-block/edit.tsx rename to packages/js/product-editor/src/blocks/name/edit.tsx index a575da42b35..75cb5e52b57 100644 --- a/packages/js/product-editor/src/components/details-name-block/edit.tsx +++ b/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() { diff --git a/packages/js/product-editor/src/components/details-name-block/style.scss b/packages/js/product-editor/src/blocks/name/editor.scss similarity index 62% rename from packages/js/product-editor/src/components/details-name-block/style.scss rename to packages/js/product-editor/src/blocks/name/editor.scss index b6e6e66c221..2f1fadc298c 100644 --- a/packages/js/product-editor/src/components/details-name-block/style.scss +++ b/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; + } + } +} diff --git a/packages/js/product-editor/src/components/images/index.ts b/packages/js/product-editor/src/blocks/name/index.ts similarity index 100% rename from packages/js/product-editor/src/components/images/index.ts rename to packages/js/product-editor/src/blocks/name/index.ts diff --git a/packages/js/product-editor/src/components/pricing-block/block.json b/packages/js/product-editor/src/blocks/pricing/block.json similarity index 93% rename from packages/js/product-editor/src/components/pricing-block/block.json rename to packages/js/product-editor/src/blocks/pricing/block.json index 8325750b7ad..d1670827342 100644 --- a/packages/js/product-editor/src/components/pricing-block/block.json +++ b/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", diff --git a/packages/js/product-editor/src/components/pricing-block/edit.tsx b/packages/js/product-editor/src/blocks/pricing/edit.tsx similarity index 100% rename from packages/js/product-editor/src/components/pricing-block/edit.tsx rename to packages/js/product-editor/src/blocks/pricing/edit.tsx diff --git a/packages/js/product-editor/src/components/pricing-block/style.scss b/packages/js/product-editor/src/blocks/pricing/editor.scss similarity index 100% rename from packages/js/product-editor/src/components/pricing-block/style.scss rename to packages/js/product-editor/src/blocks/pricing/editor.scss diff --git a/packages/js/product-editor/src/components/pricing-block/index.ts b/packages/js/product-editor/src/blocks/pricing/index.ts similarity index 100% rename from packages/js/product-editor/src/components/pricing-block/index.ts rename to packages/js/product-editor/src/blocks/pricing/index.ts diff --git a/packages/js/product-editor/src/blocks/radio/block.json b/packages/js/product-editor/src/blocks/radio/block.json index c675ee232b6..234b073c31d 100644 --- a/packages/js/product-editor/src/blocks/radio/block.json +++ b/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.", diff --git a/packages/js/product-editor/src/blocks/schedule-sale/edit.tsx b/packages/js/product-editor/src/blocks/schedule-sale/edit.tsx index 7b50ec530e7..da1686ba1d6 100644 --- a/packages/js/product-editor/src/blocks/schedule-sale/edit.tsx +++ b/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; diff --git a/packages/js/product-editor/src/components/section/block.json b/packages/js/product-editor/src/blocks/section/block.json similarity index 100% rename from packages/js/product-editor/src/components/section/block.json rename to packages/js/product-editor/src/blocks/section/block.json diff --git a/packages/js/product-editor/src/components/section/edit.tsx b/packages/js/product-editor/src/blocks/section/edit.tsx similarity index 94% rename from packages/js/product-editor/src/components/section/edit.tsx rename to packages/js/product-editor/src/blocks/section/edit.tsx index 448303abbe9..5169609191b 100644 --- a/packages/js/product-editor/src/components/section/edit.tsx +++ b/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'; diff --git a/packages/js/product-editor/src/components/section/editor.scss b/packages/js/product-editor/src/blocks/section/editor.scss similarity index 100% rename from packages/js/product-editor/src/components/section/editor.scss rename to packages/js/product-editor/src/blocks/section/editor.scss diff --git a/packages/js/product-editor/src/components/section/index.ts b/packages/js/product-editor/src/blocks/section/index.ts similarity index 100% rename from packages/js/product-editor/src/components/section/index.ts rename to packages/js/product-editor/src/blocks/section/index.ts diff --git a/packages/js/product-editor/src/components/section/types.ts b/packages/js/product-editor/src/blocks/section/types.ts similarity index 100% rename from packages/js/product-editor/src/components/section/types.ts rename to packages/js/product-editor/src/blocks/section/types.ts diff --git a/packages/js/product-editor/src/blocks/style.scss b/packages/js/product-editor/src/blocks/style.scss new file mode 100644 index 00000000000..ffe7e2239d9 --- /dev/null +++ b/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'; diff --git a/packages/js/product-editor/src/components/details-summary-block/block.json b/packages/js/product-editor/src/blocks/summary/block.json similarity index 87% rename from packages/js/product-editor/src/components/details-summary-block/block.json rename to packages/js/product-editor/src/blocks/summary/block.json index dd1fa7f8a89..d401bee03b2 100644 --- a/packages/js/product-editor/src/components/details-summary-block/block.json +++ b/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" } diff --git a/packages/js/product-editor/src/components/details-summary-block/constants.ts b/packages/js/product-editor/src/blocks/summary/constants.ts similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/constants.ts rename to packages/js/product-editor/src/blocks/summary/constants.ts diff --git a/packages/js/product-editor/src/components/details-summary-block/edit.tsx b/packages/js/product-editor/src/blocks/summary/edit.tsx similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/edit.tsx rename to packages/js/product-editor/src/blocks/summary/edit.tsx diff --git a/packages/js/product-editor/src/components/details-summary-block/style.scss b/packages/js/product-editor/src/blocks/summary/editor.scss similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/style.scss rename to packages/js/product-editor/src/blocks/summary/editor.scss diff --git a/packages/js/product-editor/src/components/details-summary-block/index.ts b/packages/js/product-editor/src/blocks/summary/index.ts similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/index.ts rename to packages/js/product-editor/src/blocks/summary/index.ts diff --git a/packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/index.ts b/packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/index.ts similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/index.ts rename to packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/index.ts diff --git a/packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/paragraph-rtl-control.tsx b/packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/paragraph-rtl-control.tsx similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/paragraph-rtl-control.tsx rename to packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/paragraph-rtl-control.tsx diff --git a/packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/types.ts b/packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/types.ts similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/paragraph-rtl-control/types.ts rename to packages/js/product-editor/src/blocks/summary/paragraph-rtl-control/types.ts diff --git a/packages/js/product-editor/src/components/details-summary-block/types.ts b/packages/js/product-editor/src/blocks/summary/types.ts similarity index 100% rename from packages/js/product-editor/src/components/details-summary-block/types.ts rename to packages/js/product-editor/src/blocks/summary/types.ts diff --git a/packages/js/product-editor/src/components/tab/block.json b/packages/js/product-editor/src/blocks/tab/block.json similarity index 100% rename from packages/js/product-editor/src/components/tab/block.json rename to packages/js/product-editor/src/blocks/tab/block.json diff --git a/packages/js/product-editor/src/components/tab/edit.tsx b/packages/js/product-editor/src/blocks/tab/edit.tsx similarity index 100% rename from packages/js/product-editor/src/components/tab/edit.tsx rename to packages/js/product-editor/src/blocks/tab/edit.tsx diff --git a/packages/js/product-editor/src/components/tab/editor.scss b/packages/js/product-editor/src/blocks/tab/editor.scss similarity index 100% rename from packages/js/product-editor/src/components/tab/editor.scss rename to packages/js/product-editor/src/blocks/tab/editor.scss diff --git a/packages/js/product-editor/src/components/tab/index.ts b/packages/js/product-editor/src/blocks/tab/index.ts similarity index 100% rename from packages/js/product-editor/src/components/tab/index.ts rename to packages/js/product-editor/src/blocks/tab/index.ts diff --git a/packages/js/product-editor/src/components/tab/tab-button.tsx b/packages/js/product-editor/src/blocks/tab/tab-button.tsx similarity index 88% rename from packages/js/product-editor/src/components/tab/tab-button.tsx rename to packages/js/product-editor/src/blocks/tab/tab-button.tsx index afd3bebd0ab..91c3b65968d 100644 --- a/packages/js/product-editor/src/components/tab/tab-button.tsx +++ b/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, diff --git a/packages/js/product-editor/src/blocks/track-inventory/edit.tsx b/packages/js/product-editor/src/blocks/track-inventory/edit.tsx index 1daa4ac5209..2658bca55ca 100644 --- a/packages/js/product-editor/src/blocks/track-inventory/edit.tsx +++ b/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', diff --git a/packages/js/product-editor/src/components/editor/init-blocks.ts b/packages/js/product-editor/src/components/editor/init-blocks.ts index 4c0f6dea9b7..d713bf6e16c 100644 --- a/packages/js/product-editor/src/components/editor/init-blocks.ts +++ b/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() ); }; diff --git a/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx b/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx index 615f50cc46a..bcebdcfd431 100644 --- a/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx +++ b/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' ), diff --git a/packages/js/product-editor/src/style.scss b/packages/js/product-editor/src/style.scss index 83f9347dabf..9f502c0a37f 100644 --- a/packages/js/product-editor/src/style.scss +++ b/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' diff --git a/plugins/woocommerce/changelog/add-37704 b/plugins/woocommerce/changelog/add-37704 new file mode 100644 index 00000000000..4608e3799ff --- /dev/null +++ b/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 diff --git a/plugins/woocommerce/includes/class-wc-post-types.php b/plugins/woocommerce/includes/class-wc-post-types.php index 45a5cca8b8e..1df196e940c 100644 --- a/plugins/woocommerce/includes/class-wc-post-types.php +++ b/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', diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php index 473a476982b..34e5990aeba 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php +++ b/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', ]; /**