Commit 28185322ea9 for woocommerce
commit 28185322ea9171620c21612c94d03cc9dea2f174
Author: Luigi Teschio <gigitux@gmail.com>
Date: Fri Jun 5 14:51:08 2026 +0200
Remove deprecated product block editor (#65500)
* Remove create product editor block package
* refresh pnpm-lock
* Remove deprecated product block editor
* clean up changes
* Add compatibility shim for removed product block editor registry (#65533)
* Add compatibility shim for removed product block editor registry
* add compatibility shims
* Remove strict types declaration from product block editor compatibility shims
* add readme
* fix shim
diff --git a/.github/project-community-pr-assigner.yml b/.github/project-community-pr-assigner.yml
index 6247e26501c..b4e0cdbdc18 100644
--- a/.github/project-community-pr-assigner.yml
+++ b/.github/project-community-pr-assigner.yml
@@ -54,9 +54,6 @@
"packages/js/onboarding/**/*":
- team: rubik
-"packages/js/product-editor/**/*":
- - team: woo-fse
-
"packages/js/tracks/**/*":
- team: flux
diff --git a/.github/workflows/scripts/run-metrics.sh b/.github/workflows/scripts/run-metrics.sh
index 2a73df15227..2ac166faf3b 100755
--- a/.github/workflows/scripts/run-metrics.sh
+++ b/.github/workflows/scripts/run-metrics.sh
@@ -56,7 +56,6 @@ if [ "$GITHUB_EVENT_NAME" == "push" ] || [ "$GITHUB_EVENT_NAME" == "pull_request
title "##[group]Benchmarking head"
pnpm --filter="@woocommerce/plugin-woocommerce" test:e2e:install > /dev/null
RESULTS_ID="editor_${GITHUB_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics editor
- RESULTS_ID="product-editor_${GITHUB_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics product-editor
RESULTS_ID="frontend_${GITHUB_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics frontend
echo '##[endgroup]'
fi
@@ -83,7 +82,6 @@ if [ "$GITHUB_EVENT_NAME" == "push" ] || [ "$GITHUB_EVENT_NAME" == "pull_request
git restore --source $GITHUB_SHA $(realpath $(dirname -- ${BASH_SOURCE[0]})/../../../.github)
pnpm --filter="@woocommerce/plugin-woocommerce" test:e2e:install > /dev/null
RESULTS_ID="editor_${BASE_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics editor
- RESULTS_ID="product-editor_${BASE_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics product-editor
RESULTS_ID="frontend_${BASE_SHA}_round-1" pnpm --filter="@woocommerce/plugin-woocommerce" test:metrics frontend
echo '##[endgroup]'
fi
diff --git a/.syncpackrc b/.syncpackrc
index 39e8a34ad85..7a4692e70e8 100644
--- a/.syncpackrc
+++ b/.syncpackrc
@@ -366,7 +366,6 @@
"@wordpress/icons"
],
"packages": [
- "@woocommerce/product-editor",
"@woocommerce/admin-library"
],
"isIgnored": true
diff --git a/packages/js/admin-layout/README.md b/packages/js/admin-layout/README.md
index c5811c8dad5..0a01e0e7cb2 100644
--- a/packages/js/admin-layout/README.md
+++ b/packages/js/admin-layout/README.md
@@ -7,5 +7,5 @@ A collection of WooCommerce Admin layout components and utilities.
Install the module
```bash
-pnpm install @woocommerce/product-editor --save
+pnpm install @woocommerce/admin-layout --save
```
diff --git a/packages/js/admin-layout/changelog/fix-admin-layout-install-example b/packages/js/admin-layout/changelog/fix-admin-layout-install-example
new file mode 100644
index 00000000000..c7a156c5b83
--- /dev/null
+++ b/packages/js/admin-layout/changelog/fix-admin-layout-install-example
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix the admin layout package installation example.
diff --git a/packages/js/block-templates/changelog/remove-product-block-editor-reference b/packages/js/block-templates/changelog/remove-product-block-editor-reference
new file mode 100644
index 00000000000..f4427d75048
--- /dev/null
+++ b/packages/js/block-templates/changelog/remove-product-block-editor-reference
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove stale product block editor references.
diff --git a/packages/js/block-templates/src/utils/register-woo-block-type.ts b/packages/js/block-templates/src/utils/register-woo-block-type.ts
index da36ca85038..77326aeedfc 100644
--- a/packages/js/block-templates/src/utils/register-woo-block-type.ts
+++ b/packages/js/block-templates/src/utils/register-woo-block-type.ts
@@ -97,8 +97,6 @@ function augmentAttributes<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
T extends Record< string, any > = Record< string, any >
>( attributes: T ) {
- // Note: If you modify this function, also update the server-side
- // Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry::augment_attributes() function.
const augmentedAttributes = {
...attributes,
...{
diff --git a/packages/js/dependency-extraction-webpack-plugin/assets/packages.js b/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
index 385d53937dc..4e42cc2c1cb 100644
--- a/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
+++ b/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
@@ -18,7 +18,6 @@ module.exports = [
'@woocommerce/navigation',
'@woocommerce/notices',
'@woocommerce/number',
- '@woocommerce/product-editor',
'@woocommerce/tracks',
'@woocommerce/remote-logging',
'@woocommerce/sanitize',
diff --git a/packages/js/dependency-extraction-webpack-plugin/changelog/remove-product-editor-package b/packages/js/dependency-extraction-webpack-plugin/changelog/remove-product-editor-package
new file mode 100644
index 00000000000..4c092a30910
--- /dev/null
+++ b/packages/js/dependency-extraction-webpack-plugin/changelog/remove-product-editor-package
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove the product editor package from dependency extraction.
diff --git a/packages/js/product-editor/.eslintrc.js b/packages/js/product-editor/.eslintrc.js
deleted file mode 100644
index 4a257ac229a..00000000000
--- a/packages/js/product-editor/.eslintrc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-module.exports = {
- extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
- root: true,
- overrides: [
- {
- files: [ '**/*.js', '**/*.jsx', '**/*.tsx' ],
- rules: {
- 'react/react-in-jsx-scope': 'off',
- },
- },
- ],
- settings: {
- 'import/core-modules': [
- '@woocommerce/admin-layout',
- '@woocommerce/block-templates',
- '@woocommerce/components',
- '@woocommerce/customer-effort-score',
- '@woocommerce/currency',
- '@woocommerce/data',
- '@woocommerce/experimental',
- '@woocommerce/expression-evaluation',
- '@woocommerce/navigation',
- '@woocommerce/number',
- '@woocommerce/settings',
- '@woocommerce/tracks',
- '@wordpress/blocks',
- '@wordpress/block-editor',
- '@wordpress/components',
- '@wordpress/core-data',
- '@wordpress/date',
- '@wordpress/element',
- '@wordpress/keycodes',
- '@wordpress/media-utils',
- '@testing-library/react',
- 'dompurify',
- 'react-router-dom',
- ],
- 'import/resolver': {
- node: {},
- webpack: {},
- typescript: {},
- },
- },
-};
diff --git a/packages/js/product-editor/.npmrc b/packages/js/product-editor/.npmrc
deleted file mode 100644
index 43c97e719a5..00000000000
--- a/packages/js/product-editor/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/js/product-editor/README.md b/packages/js/product-editor/README.md
deleted file mode 100644
index ecbb246c040..00000000000
--- a/packages/js/product-editor/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Product Editor
-
-A collection of WooCommerce Admin product editor components and utilities.
-
-## Installation
-
-Install the module
-
-```bash
-pnpm install @woocommerce/product-editor --save
-```
diff --git a/packages/js/product-editor/babel.config.js b/packages/js/product-editor/babel.config.js
deleted file mode 100644
index f73e04467aa..00000000000
--- a/packages/js/product-editor/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- extends: '../internal-js-tests/babel.config.js',
-};
diff --git a/packages/js/product-editor/build.mjs b/packages/js/product-editor/build.mjs
deleted file mode 100644
index 781434f810b..00000000000
--- a/packages/js/product-editor/build.mjs
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runPackageBuilder } from '@woocommerce/internal-build';
-
-await runPackageBuilder( {
- entryPoints: 'src/**/*.{ts,tsx,js,jsx}',
- assets: [ 'src/**/block.json' ],
-} );
diff --git a/packages/js/product-editor/changelog.md b/packages/js/product-editor/changelog.md
deleted file mode 100644
index 5d6603d47e6..00000000000
--- a/packages/js/product-editor/changelog.md
+++ /dev/null
@@ -1,463 +0,0 @@
-# Changelog
-
-This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [1.5.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.5.0) - 2024-04-12
-
-- Patch - Always use productTemplateId when available and use editedRecord in useEntityRecord hooks [#46395]
-- Patch - BlockEditor loads global settings itself instead of having them passed in. Handles case where global is set after initial render. [#45490]
-- Minor - Change Tracks event name for Quick variations menu action #45889 [#45889]
-- Minor - Close prepublish panel before creating new product #45397 [#45397]
-- Minor - Enable publish button when product status is draft #45812 [#45812]
-- Minor - Fix double scroll bar in pre-publish panel #45671 [#45671]
-- Minor - Fix publish dropdown visibility in new product after hiding pre-publish modal #45682 [#45682]
-- Minor - Fix section title styles in the pre-publish panel on WP 6.5 #45689 [#45689]
-- Patch - Fix word break inside columns in product editor [#45687]
-- Patch - Header tag Hidden now is aligned with the Visibility: Hidden from the pre publish modal [#45679]
-- Patch - Product Editor: "Upload files" quick update menu for variations does not crash variations list. [#45748]
-- Patch - Product Editor: Fix accessibility of woocommerce/product-text-area-field label. [#45968]
-- Patch - Product Editor: Fixes issue where saves would fail when certain extensions were installed. [#45958]
-- Patch - Product Editor: Prevent description full editor usage if a version of Gutenberg plugin is installed that causes crashes. [#45650]
-- Patch - Product Editor: Show correct Publish/Schedule button label. [#45848]
-- Patch - Product Editor: Workaround a Gutenberg bug that resulted in a crash when clicking in the margin of the editor when the summary or description fields were focused, by reverting the changes that were made in #44166. [#45608]
-- Patch - Redirect to the edit product page after changing the product type and publishing it [#46092]
-- Patch - Remove editable outline for blocks in the product editor. [#45366]
-- Minor - Remove Subsection actions and fix use of SectionActions for both section and subsection. [#44816]
-- Minor - Remove the "Always show pre-publish checks" from pre-publish panel #45672 [#45672]
-- Patch - Replace the Draft tag with a Scheduled tag in the product header [#45685]
-- Minor - Set product status after publishing #45436 [#45436]
-- Patch - [Product Block Editor]: do not include current product in the suggested products list [#44815]
-- Minor - Add Always show pre-publish checks checkbox #44595 [#44595]
-- Minor - Add an image to multiple variations using Quick updates #45774 [#45774]
-- Minor - Add Custom Fields for New Product Editor [#45484]
-- Minor - Add menu item to publish button to schedule product updates [#44783]
-- Minor - Add menu item to publish button with 'Move to trash' [#44940]
-- Minor - Add message after publishing a product to pre-publish panel #44864 [#44864]
-- Minor - Allow using woocommerce icons for product details section description and add gift icon [#45348]
-- Minor - Apply filter to get meta_data to generate variations [#45953]
-- Minor - Create woocommerce/product-custom-fields-toggle-field block [#45291]
-- Minor - Create woocommerce/product-custom-fields block [#45360]
-- Minor - Create woocommerce/product-select-field block [#45531]
-- Minor - Disable the fields that are not required in variable products because they are set in each variation [#45838]
-- Minor - Edit Custom Fields for New Product Editor [#45396]
-- Minor - Product Editor: Add loading state functionality to Schedule Product modal [#45645]
-- Minor - Product Editor: Add support for tooltip attribute for woocommerce/product-select-field block [#46447]
-- Minor - Remove Custom Fields for New Product Editor [#45493]
-- Minor - Use isSelectableByUser product template attribute to show/hide product templates in the list [#46394]
-- Patch - [Product Block Editor]: disable TextArea RichText instance according to `disabled` attribute value [#46089]
-- Patch - [Product Block Editor]: document woocommerce/product-text-area-field field block [#45513]
-- Patch - [Product Block Editor]: introduce `woocommerce/entity-product` binding source handler [#45616]
-- Minor - Match template based on different attributes besides product types [#45454]
-- Patch - Product Block Editor: expose __experimentalSectionActions component [#46515]
-- Minor - Set product editor blocks multiple support to true. [#45283]
-- Patch - Update Woo.com references to WooCommerce.com. [#46259]
-- Patch - [Product Block Editor]: update Name field block name [#45657]
-- Minor - Add menu item to Publish button with copy to draft #46294 [#46294]
-- Minor - Change hidden tag behavior #45766 [#45766]
-- Minor - Exports handlePrompt from @woocommerce/product-editor for use by extensions expanding the variation quick update menu. Also introduces handleConfirm and exposes it also [#44226]
-- Patch - Improve webpack cache-busting version parameter by using file contents hash [#44838]
-- Minor - Modify product header #44711 [#44711]
-- Minor - Update Attributes tooltip copy #45485 [#45485]
-- Minor - Update copy of inventory management fields #45801 [#45801]
-- Minor - [Linked products] - Change number of 'choose products for me' to 4 #46094 [#46094]
-
-## [1.4.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.4.0) - 2024-02-20
-
-- Patch - Add empty state when filtering variations by attribute terms and the response is empty [#44505]
-- Patch - Fix toggle visibility on bach update variations [#44508]
-- Patch - Product Editor loading state now shows until form is displayed. No more blank flash of white. [#43840]
-- Minor - Fix pre-publish modal styles #44562 [#44562]
-- Minor - Add the collapsible Schedule section [#44563]
-- Minor - Add visibility section to pre-publish panel #44434 [#44434]
-- Minor - Export Notice component in package [#44812]
-- Minor - Refactor section and subsection blocks #44502 [#44502]
-- Minor - [Product editor block]: Change visibility label when a password is set #44623 [#44624]
-- Minor - [Product editor block]: Modify pre-publish sidebar title after scheduling a product #44651 [#44652]
-- Minor - [Product editor block]: Rename the Add button to Publish #44461 [#44461]
-
-## [1.3.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.3.0) - 2024-02-09
-
-- Patch - Corrected build configuration for packages that weren't outputting minified code.
-- Patch - Export __experimentalVariationQUickUpdateMenuItem, __experimentalPluginHeaderItemModal, __experimentalPluginHeaderItemPopover
-- Patch - Fix performance issue when modifying product metadata
-- Patch - Fix product editor UI misbehaving in custom adminmenu widths (e.g. Calypso)
-- Patch - Fix typo that broke the CI pipeline and the build process.
-- Patch - Hide the product type selector dropdown when click outside
-- Patch - [Product Block Editor]: fix e2e test that happens in the text-area block
-- Patch - [Product Block Editor]: fix the top area for the dashboard
-- Patch - [Product Block Editor]: add CashRegister image component
-- Patch - [Product Block Editor]: Add Linked Product sections
-- Patch - [Product Block Editor]: add loading for the `Choose products for me` button
-- Patch - [Product Block Editor]: add plain and rich text mode to the Textarea field block
-- Patch - [Product Block Editor]: add Upsell advice
-- Patch - [Product Block Editor]: always show "loading" state when choosing suggested products
-- Patch - [Product Block Editor]: exclude the current product from the suggested ones to use in the Linked Product tab
-- Patch - [Product Block Editor]: implement `Choose products for me` button
-- Patch - [Product Block Editor]: Introduce AdviceCard component
-- Patch - [Product Block Editor]: Introduce ButtonWithDropdownMenuProps component
-- Patch - [Product Block Editor]: introduce note attribute to Label component
-- Patch - [Product Block Editor]: introduce ShoppingBags component
-- Patch - [Product Block Editor]: introduce TextArea field block
-- Patch - [Product Block Editor]: introduce `<SectionActions />` slot
-- Patch - [Product Block Editor]: render empty state for the Cross-sells section
-- Patch - [Product Block Editor]: use Label component to render Textarea field block label
-- Patch - [Product Block Editor]: use text-area block to handle the variation description field
-- Patch - bump php version in packages/js/*/composer.json
-- Patch - [Product Block Editor]: dismiss AdviceCard by clicking close button
-- Patch - [Product Block Editor]: fallback with random products when there isn't related products in the Linked Products tab
-- Patch - [Product Block Editor]: improve getting suggested products from linked product section
-- Patch - [Product Block Editor]: redefine the app dashboard size
-- Patch - [Product Block Editor]: tweak section actions of some blocks #43555
-- Patch - [Product Block Editor]: update advice card instances
-- Patch - [Product Block Editor]: add className prop to ButtonWithDropdownMenu component
-- Patch - [Product Block Editor]: improve and tweak AdviceCard component
-- Patch - [Product Block Editor]: show three products by default in the Linked Products tab
-- Patch - [Product Block Editor]: tweak styles and layout of AdviceCard component
-- Minor - Fix header toolbar in iframe modal editor to have block toolbar render correctly with latest Gutenberg and WP version.
-- Minor - Fix issue when generating variations for the first time in the new editor.
-- Minor - Revert "Show feedback bar only once (#41787)" #43178
-- Minor - Variation quick actions update properly when variation inherits sku of parent; slot fills always deal with arrays
-- Minor - Add a featured product button
-- Minor - Add empty state to the linked product list block
-- Minor - Add HOC to hide inventory collapsible block when nothing is inside it
-- Minor - Add prepublish panel #44331
-- Minor - Add slotFills for header items #43687
-- Minor - Add step buttons for Number block and component
-- Minor - Add tooltip attribute to Pricing field #43144
-- Minor - Allow providing recently updated data for the validate function in the useValidation hook
-- Minor - Always fallback to the standard product template in case the given product type is variable
-- Minor - Create attribute control custom empty state
-- Minor - Create linked product list block
-- Minor - Create variation empty state when no variable attributes are asigned to the product
-- Minor - Expose metadata as object from useProductMetadata hook
-- Minor - Fix margin top for none first child nested sections
-- Minor - Introduce a product type selection within the new experience
-- Minor - Load/save the product template from/to the product meta data
-- Minor - Product Editor: Subsection block #43725
-- Minor - Set the product template id also for unsupported product templates
-- Minor - track Linked Products feature events
-- Minor - Unlink downloads and downloadable product props so they can be managed separately
-- Minor - Add isLoading to useProductMetadata hook
-- Minor - Load layout templates via the REST API. Note that layout template modifications must now be hooked up in an action that is called when REST API endpoints are handled, such as `rest_api_init`.
-- Minor - Use different delays for initial click and hold when incrementing number on NumberControl
-- Minor - Use woocommerce's Tooltip component for Label and checkbox instead of wordpress Tooltip
-- Minor - Add slotFill for variation menus #43441
-- Minor - Modify feedback modal actions #43005
-
-## [1.2.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.2.0) - 2023-12-20
-
-- Patch - Fix menu not being pinned correctly with certain screen widths [#42791]
-- Patch - [Product Block Editor]: fix Input control issue in Manage download limit form [#41796]
-- Patch - [Product Block Editor]: add story for Label component [#42953]
-- Patch - [Product Block Editor]: introduce UI state [#41859]
-- Patch - [Product Block Editor]: expose Label component [#42959]
-- Patch - [Product Block Editor]: move modal editor out of the description block edit component [#41878]
-- Patch - [Product Block Editor]: propagate content from description inner blocks to Modal editor [#42768]
-- Patch - [Product Block Editor]: replace custom preview component by BlockPreview core [#42019]
-- Patch - [Product Block Editor]: replace description button by editable block [#41862]
-- Patch - [Product Block Editor]: minor Summary block enhancements [#41839]
-- Patch - [Product Block editor]: rename component edit function [#41741]
-- Minor - Add ordering support to the product list [#41709]
-- Minor - Add product list block [#41653]
-- Minor - Add step prop to NumberControl [#42928]
-- Minor - Add useProductMetadata hook to perform update in multiple meta entries at same time [#42961]
-- Minor - Allow uploading downloadable products by drag & drop and without the Media Library component [#42702]
-- Minor - Create section description block [#41929]
-- Minor - Move action button ( reorder and add products ) inline with the section header [#42929]
-- Minor - Support HTML in checkbox-control tooltip and Label tooltip [#42926]
-- Minor - Use DisplayState as a direct wrapper of the woocommerce/conditional block [#42909]
-- Minor - Expose Taxonomy and TaxonomyMetadata types [#42962]
-- Minor - Remove deprecated use of position for Dropdown component, using popoverProps.placement instead. [#41845]
-- Minor - Update products list field to add re-order option. [#42766]
-- Minor - Add empty state when no attributes #41679 [#41679]
-- Minor - Add max-width to tooltip #41797 [#41797]
-- Minor - Show feedback bar only once #41787 [#41787]
-
-## [1.1.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.1.0) - 2023-11-28
-
-- Patch - Update internal dependency.
-- Patch - [Product Block Editor]: remove unused block attributes [#41674]
-- Minor - Remove downloads list fixed height #41744 [#41744]
-
-## [1.0.0](https://www.npmjs.com/package/@woocommerce/product-editor/v/1.0.0) - 2023-11-27
-
-- Patch - Add cursor: not-allowed; to the disabled Quick updates button [#40448]
-- Patch - Feedback bar is mis-aligned; transient notices overlap [#39233]
-- Patch - Fix attributes dropdown jumping when focusing on add new attribute modal shown [#39989]
-- Patch - Fix currency breaking lines when 2 or more characters [#41548]
-- Patch - Fix double scroll in General tab and image upload overlapping with other blocks [#40977]
-- Patch - Fix font sizes difference between chips used in the variations options table and variations list [#40447]
-- Patch - Fixing more menu width. [#38053]
-- Patch - Fixing spacing when no images added on image gallery block. [#38151]
-- Patch - Fix issue where scrollbar was not showing up on block inserter panel within IFrame block editor modal. [#39491]
-- Patch - Fix manage limits for downloads in a single variant [#41508]
-- Patch - Fix overlapping TransientNotices with product editor footer [#38698]
-- Patch - Fix product summary field margin. [#38251]
-- Patch - Fix regression setting readOnlyWhenClosed to false by default on attribute term input field [#40519]
-- Patch - Fix scrolling of editor and sidebar in modal editor. [#39212]
-- Patch - Fix selection in currency and number fields to only select if field still has focus. [#41171]
-- Patch - Fix sidebar scroll behavior when using new product editor [#41375]
-- Patch - Fix spacing between pricing fields [#38146]
-- Patch - Fix the position and sizing of the pagination controls in variations table [#40439]
-- Patch - Fix toolbar button text not showing in WP 6.3 [#39572]
-- Patch - Fix visibility and filterable icons [#40419]
-- Patch - Get the exact variation ids of those ones that do not have price [#40876]
-- Patch - Invalidate resolution for paginated variations after removing any from the single variation page [#40900]
-- Patch - Limit 'email me when stock reaches' field to numerical only#38244 [#38353]
-- Patch - List price gets reset on blur when error is shown#38221 [#38414]
-- Patch - Prevent click event when the element is aria-disabled" [#37577]
-- Patch - Prevent theme styles from being used in the product editor. [#38491]
-- Patch - Product route not updated after save initially failed and succeeded after#38319 [#38507]
-- Patch - Remove editor-styles-wrapper from product editor [#38681]
-- Patch - Remove empty values from the shipping class request so slug can be generated server side [#40847]
-- Patch - Removing WritingFlow component which was suppressing tabbing behavior in form. [#38105]
-- Patch - Select the product name block initially if set to autofocus. [#41189]
-- Patch - The Select all and Clear selection buttons are only displayed when at least 1 item is selected [#40434]
-- Patch - Add dialogNameHelpText attribute to product-taxonomy-field block [#40059]
-- Patch - Disable dragging and dropping of images within Product Images block. [#38045]
-- Patch - Rename woocommerce/taxonomy-field to woocommerce/product-taxonomy-field [#40021]
-- Patch - update references to woocommerce.com to now reference woo.com [#41241]
-- Patch - Fixed some i18n related lint rule violations. [#41450]
-- Patch - Lint fixes for @wordpress/i18n lint rule violation [#41450]
-- Patch - Lint fixes [#38523]
-- Patch - Make eslint emit JSON report for annotating PRs. [#39704]
-- Patch - Update eslint to 8.32.0 across the monorepo. [#36700]
-- Patch - Update webpack config to use @woocommerce/internal-style-build's parser config [#37195]
-- Patch - Disable autocomplete for the product name field. [#39211]
-- Patch - Improve Variable product editor tour [#41250]
-- Patch - Product Blocks editor: enable/disable header Update button depending on product content chnages [#41473]
-- Patch - Remove __experimentalDetailsCategoriesField and woocommerce/product-category-field block [#40021]
-- Patch - [Product blocks editor]: Add help text to Shipping toggle [#41590]
-- Patch - [Product Blocks editor]: set max width for the description general field [#41555]
-- Patch - Do not allow to select text in the Paginator component [#41405]
-- Patch - Show feedback bar even after feedback is given. [#38773]
-- Minor - Add editor styles to product editor and iframe editor [#38168]
-- Minor - Adding apifetch middleware to override product api endpoint only for the product editor. [#37621]
-- Minor - Add missing Tracks events to attribute modals #40517 [#40517]
-- Minor - Disable toolbars in all relevant product editor blocks [#37912]
-- Minor - Fix attributes modal incorrect notice #40976 [#40976]
-- Minor - Fix block header style in description modal #41338 [#41338]
-- Minor - Fix blocks product editor variation actions styles [#40220]
-- Minor - Fix bug where the form was dirty still after adding product variations for the first time. [#39938]
-- Minor - Fix CES modal [#38643]
-- Minor - Fix delete variation in block product editor [#40219]
-- Minor - Fix double scrollbars on product editor page [#38281]
-- Minor - Fix dropdown and list behavior in attributes variation modals #40496 [#40496]
-- Minor - Fix empty state for currency inputs in product editor [#38697]
-- Minor - Fix error displaying block after removing variation #40255 [#40255]
-- Minor - Fix infinite category loading state [#40073]
-- Minor - Fix issue with category parent select control clearing search value when typing. [#37574]
-- Minor - Fix positioning of fixed block toolbar in IFrame editor used for product description, to make work with latest WordPress versions. [#39873]
-- Minor - Fix styles for attribute list [#40378]
-- Minor - Fix styles for modals [#38775]
-- Minor - Fix summary toolbar positioning and selection on blur [#38086]
-- Minor - Hide `Switch to draft` button on single variation page #40856 [#40856]
-- Minor - Open variation preview in a new tab #40414 [#40414]
-- Minor - Prevent double debouncing of iframe editor callback [#38087]
-- Minor - Prevent duplicate registration of core blocks in client [#37350]
-- Minor - Remove use of :has() css selector as it is not compatible with FireFox. [#40843]
-- Minor - Remove use of head prop with IFrame component as it has been removed. [#40218]
-- Minor - Remove invalid dev package dependency. [#41712]
-- Minor - Set attributes to visible by default. [#38777]
-- Minor - Show "Save draft" instead of "Saved" on initial product page [#38609]
-- Minor - Show error message when single variation price is empty #40885 [#40885]
-- Minor - Show one help text when user clicks tooltip button #41435 [#41435]
-- Minor - Wait for editor changes to be debounced before closing modal [#38262]
-- Minor - [Individual variation] Fix empty state illustration visibility #41337 [#41337]
-- Minor - Add "Copy all content" menu item to description modal editor. [#39199]
-- Minor - Add 'min' and 'max' attributes to number block [#40715]
-- Minor - Add 'Show in product details' checkbox under Edit attribute modal [#40006]
-- Minor - Add 'tooltip' and 'required' attributes for number and text blocks [#40908]
-- Minor - Add action buttons to the editor header [#37461]
-- Minor - Add a product header component to the blocks interface [#37152]
-- Minor - Add a visibility toggle to the Quick actions list [#40464]
-- Minor - Add block inspector to modal iframe editor [#38011]
-- Minor - Add block related assets entry points to build [#37318]
-- Minor - Add button on product description toolbar to show and hide block inspector [#39090]
-- Minor - Add ContentPreview component for previewing block content [#37990]
-- Minor - Add custom validation hook [#37196]
-- Minor - Add download file list product block [#40526]
-- Minor - Add edit button to each variation to redirect to the single variation page [#40709]
-- Minor - Add editor history and undo/redo toolbar buttons [#38573]
-- Minor - Add empty state to images block #41165 [#41165]
-- Minor - Add error specific messages to product save functionality [#38307]
-- Minor - Add global quick actions dropdown menu to the Variations table header [#39950]
-- Minor - Add iframe block editor [#37570]
-- Minor - Add iframe editor header toolbar and block inserter [#38549]
-- Minor - Add images block to product editor [#37455]
-- Minor - Adding AddNewShippingClass modal and implementing on product block editor. [#37968]
-- Minor - Adding attributes components, block and styles. [#38051]
-- Minor - Adding basic ordering to product tabs slot-fill. [#38081]
-- Minor - Adding Collapsible block with support for flexible rendering. [#37305]
-- Minor - Adding DetailsNameField and associated hooks/components. [#36945]
-- Minor - Adding global styling for product block editor. [#37805]
-- Minor - Adding initial build/package files for brand new package: @woocommere/product-editor. [#36600]
-- Minor - Adding inventory email, conditional and checkbox blocks. [#37646]
-- Minor - Adding LayoutContext support for tracks events context. [#37720]
-- Minor - Adding name field block to product editor. [#37132]
-- Minor - Adding section icons to assets directory. [#37869]
-- Minor - Adding sku block to product editor. [#37623]
-- Minor - Add Inventory item to the global Quick Update dropdown [#39972]
-- Minor - Add isInSelectedTab context to tab blocks for use in nested blocks. [#39673]
-- Minor - Add missing track events to product editing experience [#38728]
-- Minor - Add ModalEditor with nested IframeEditor for use in product description [#37937]
-- Minor - Add more menu to modal editor. [#39178]
-- Minor - Add multiselection to the Variations table under Variations tab [#39937]
-- Minor - Add new action menu item to variations list for managing inventory. [#39935]
-- Minor - Add new attribute modal to variations field and include tests for useProductAttributes hook. [#39522]
-- Minor - Add new file dropdown menu [#40731]
-- Minor - Add new option in attributes control for a delete confirmation modal instead of the window.alert. [#39733]
-- Minor - Add new pricing block to the product editor package. [#37211]
-- Minor - Add new VariationSwitcherFooter component for switching variations on edit variation page. [#40713]
-- Minor - Add notice to variations when variations do not have prices set. [#40281]
-- Minor - Add Pricing item to the Quick Actions menu per Variation item [#39872]
-- Minor - Add pricing section to the pricing tab [#37513]
-- Minor - Add product category block. [#37295]
-- Minor - Add product editor utils [#36730]
-- Minor - Add product radio block and tax class to product blocks editor [#37529]
-- Minor - Add product schedule sale pricing block [#37567]
-- Minor - Add product shipping fee block [#37642]
-- Minor - Add product track inventory block [#37585]
-- Minor - Add product variation items block [#39657]
-- Minor - Add quick actions dropdown menu to variation items [#39816]
-- Minor - Add redirection to product edit page if variations are added before it being saved. [#40225]
-- Minor - Add regular price as default value if available when generating new product variations. [#40343]
-- Minor - Add Sale price validation#37985 [#38078]
-- Minor - Add section block for use in product editor [#37153]
-- Minor - Add set default value checkbox to the edit attribute options modal [#39570]
-- Minor - Add Shipping item to the global Quick Update dropdown [#39973]
-- Minor - Add Shipping item to the Quick Actions menu per Variation item [#39925]
-- Minor - Add sub section and section spacing [#38325]
-- Minor - Add summary block [#37302]
-- Minor - Add suport for context post type to blocks related to the ProductVariationTemplate [#40636]
-- Minor - Add support for context post type to blocks related to the ProductVariationTemplate [#40637]
-- Minor - Add support for custom validation message to the generic text block [#41442]
-- Minor - Add support for disabled state for checkbox, number, pricing, taxonomy, and text blocks [#41307]
-- Minor - Add support for persisting automatically in post_meta for generic blocks [#40600]
-- Minor - Add support to attribute input field for creating global attributes by default and enable this for variation blocks. [#39548]
-- Minor - Add support to downloads block to use the context postType [#40807]
-- Minor - Add tabs block and tabs to product editor [#37174]
-- Minor - Add tags (or general taxonomy ) block [#39966]
-- Minor - Add tests around product block editor tabs [#37225]
-- Minor - Add the columns header to the variations table [#41550]
-- Minor - Add the list view component and button to the modal editor [#38809]
-- Minor - Add the product description block [#37852]
-- Minor - Add tool selector option to iframe editor [#38686]
-- Minor - Add tracking events to add edit and update attribute [#39914]
-- Minor - Add tracks events on product edit and update [#37770]
-- Minor - Add unregister function to the validation provider and trigger this from the useValidation hook. [#40780]
-- Minor - Add useVariationSwitcher hook and make use of it in the VariationSwitcherFooter. [#40780]
-- Minor - Add variation options block [#39256]
-- Minor - Add virtual and downloads related controls to variation management quick actions [#40567]
-- Minor - Add visibility and filter icons to attributes list with tooltip. [#39685]
-- Minor - Add woocommerce/product-number-field block [#40619]
-- Minor - Add woocommerce/product-text-field block [#40337]
-- Minor - Add woocommerce/taxonomy-field block [#39947]
-- Minor - Allow the user to delete the description [#39229]
-- Minor - append a unique string to the filename if the settings are configured to do so [#41621]
-- Minor - Auto select one or more attribute terms when selecting an attribute [#40004]
-- Minor - Check for unsaved changes before leaving product editor [#38430]
-- Minor - Copy over the product slot fill components from @woocommerce/components [#36830]
-- Minor - Create 'woocommerce/product-password-field' block [#39464]
-- Minor - Create ManageDownloadLimitsModal component [#40797]
-- Minor - Create product page skeleton [#40939]
-- Minor - Create product search and catalog visibility blocks [#39477]
-- Minor - Create product variations filter component [#40978]
-- Minor - Create TableEmptyState component [#40940]
-- Minor - Create the product block editor [#37023]
-- Minor - Create woocommerce/product-shipping-dimensions-fields block [#37683]
-- Minor - Create woocommerce/product-variations-fields block [#39038]
-- Minor - Disable attributes used in different sections [#39770]
-- Minor - Display an alert icon for variations that contains "any" values [#41433]
-- Minor - Fix validation behavior#37984 [#38194]
-- Minor - Focus the first attribute field when opening the modal [#39549]
-- Minor - Images block now supports one or multiple images. Checkbox block now supports another property type. [#40633]
-- Minor - Invert the useValidation hook behavior to return an error instead of a boolean value [#37695]
-- Minor - Let the toogle block to use inverted value to be checked [#40809]
-- Minor - Make DateTimePickerControl a ForwardedRef [#38306]
-- Minor - Modify notice for legacy local attributes #41646 [#41646]
-- Minor - Only register blocks when user navigates to the product edit page#38200 [#38303]
-- Minor - Product editor: Add attribute empty state image when no attribute has been added [#40956]
-- Minor - Refactoring inventory tracking fields block and adding toggle block. [#37906]
-- Minor - Refactoring product link modal and adding link to product block editor. [#37612]
-- Minor - Remove attribute dropdown constraint to let the users create more than one attribute with the same name [#39827]
-- Minor - Remove AUTO-DRAFT in product name field on create new product page #37930 [#37982]
-- Minor - Set shipping disabled when the product is virtual [#40735]
-- Minor - Show a summary when adding or removing variation option values [#40470]
-- Minor - Show feedback bar for the product editor. [#38599]
-- Minor - Show post editor Welcome Guide when opening description if it wasn't shown before [#41161]
-- Minor - Show sale price and list price in each variation row when the variation is on sale [#40048]
-- Minor - Store edited product in product editor context. [#40450]
-- Minor - Summary field remove 'inline image' and 'keyboard input' options#37986 [#38012]
-- Minor - The BlockIcon component [#37340]
-- Minor - The variations table should match the height of number of rows selected [#41140]
-- Minor - Track stock quantity for this product should be disabled when Enable stock management within settings is disabled, and enabled otherwise [#37957]
-- Minor - Turn off the product_block_editor feature when user choose to use the classic editor [#38551]
-- Minor - Update List price Pricing link on the general tab to navigate to the Pricing tab [#37961]
-- Minor - Update shipping class block to match new designs#38044 [#38301]
-- Minor - Update the select all behavior in the variations table [#41008]
-- Minor - [Single Variation] Add missing tracks events #40996 [#40996]
-- Minor - Adding header slot fill and more menu to header with slot fill. [#37255]
-- Minor - Adjust styling based on internal styling feedback [#38351]
-- Minor - Allow plugins to access PostTypeContext and blocks (through core/block-editor data store). [#41106]
-- Minor - Bringing in use-product-helper and related hooks. [#37006]
-- Minor - Content lock all blocks in the product editor [#37382]
-- Minor - Deprecate woocommerce/conditional block in favor of general conditional visibility support. [#40883]
-- Minor - Export RemoveConfirmationModal to be used outside of the product editor package [#40672]
-- Minor - Fix issue were template was not re-synced when switching between products. [#37283]
-- Minor - Improve accessibility around product editor tabs [#37217]
-- Minor - Move tabs to header and adjust title position [#37696]
-- Minor - Remove css unrelated to the product block editor. [#38247]
-- Minor - Remove drag and drop handle in product blocks editor [#38127]
-- Minor - Remove SlotFillProvider from Editor component. Needs to be provided higher up in the tree. [#41102]
-- Minor - Remove the product block breadcrumbs and sidebar inspector [#37250]
-- Minor - Remove use of @automattic/interpolate-components using createInterpolateElement instead. [#37453]
-- Minor - Remove visibility toggle from variations table and remove with tooltip icon. [#40150]
-- Minor - Support ordering of more menu items in product editor header. [#41104]
-- Minor - Update blocks to use registerWooBlockType and useWooBlockProps from @woocommerce/block-templates. Deprecates initBlock. [#40263]
-- Minor - Update current block names to reflect use case and avoid conflicts#37704 [#37851]
-- Minor - Update Editor and BlockEditor components to add support for multiple product/post types. [#40605]
-- Minor - Update pagination look of the Pagination table. [#39967]
-- Minor - Update pricing, and schedule field blocks to use postType context value. [#40642]
-- Minor - Update product CES modal design and fields [#38592]
-- Minor - Update shipping dimensions image in new product blocks editor [#38101]
-- Minor - Update styling of block editor to remove highlighting of selected blocks. [#38000]
-- Minor - Update the IframeEditor to use a fixed toolbar [#38031]
-- Minor - Update the variation name, by using the wc_get_formatted_variation. [#40905]
-- Minor - Update use of blocks within block editor to always make use of template. [#37206]
-- Minor - Update variation options block to auto create variations upon options update. [#39673]
-- Minor - Update Variation Switcher to not loop, but hide next/previous buttons if at the end or beginning. [#40901]
-- Minor - Use SelectTree component in product editor's category field [#37479]
-- Minor - Add custom image in downloads editor #41342 [#41342]
-- Minor - Add edit downloads modal #40599 [#40599]
-- Minor - Add error state to variation list #41525 [#41525]
-- Minor - Add header buttons to the description editor modal #39156 [#39156]
-- Minor - Add notice to "track inventory" toggle #40011 [#40011]
-- Minor - Add preview and replace button to downloads edit #40835 [#40835]
-- Minor - Allow users to select multiple items from the media library while adding images #39741 [#39741]
-- Minor - Change the blocks editor header to support variations #40606 [#40606]
-- Minor - Display notice at the top single variations #40679 [#40679]
-- Minor - Fix broken assertion with comma separated list in category select control [#38052]
-- Minor - Fix field label styling in the edit attribute modal #40449 [#40449]
-- Minor - Fix lint issues [#36988]
-- Minor - Improve copy in variation management notifications #40467 [#40467]
-- Minor - Move CES-related components to @woocommerce/product-editor [#37131]
-- Minor - Remove confirmation modal for dismissing unsaved attributes or variation options #40500 [#40500]
-- Minor - Split product editor blocks into 'generic' and 'product-fields' directories [#40571]
-- Minor - Suppress errant TS lint errors. [#37094]
-- Minor - Sync @wordpress package versions via syncpack. [#37034]
-- Minor - Update block registration calls. [#40722]
-- Minor - Update copy in the add variation options modal [#40280]
-- Minor - Update section description design #41251 [#41251]
-- Minor - Update selected item styling dropdown #41217 [#41217]
-- Minor - Upgrade TypeScript to 5.1.6 [#39531]
-- Minor - [Product Block Editor] Disable tabs in parent product page with variations #39459 [#39675]
-- Minor - [Product Block Editor] Remove additional create attribute term modal [#39610]
-- Minor - Change variation option labels cardinality to 3 [#39856]
-- Minor - Export the ProductEditorSettings type. [#37123]
-- Minor - New product block editor modal text enhancements [#39055]
-- Minor - Remove the margin bottom of the checkbox label [#39232]
-- Minor - Update default visibility settings for variation options [#40949]
-- Minor - Use SelectTree in the Parent Category field [#38261]
-
-[See legacy changelogs for previous versions](https://github.com/woocommerce/woocommerce/blob/68581955106947918d2b17607a01bdfdf22288a9/packages/js/product-editor/CHANGELOG.md).
diff --git a/packages/js/product-editor/changelog/.gitkeep b/packages/js/product-editor/changelog/.gitkeep
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/js/product-editor/changelog/47385-dev-update-pnpm9-1 b/packages/js/product-editor/changelog/47385-dev-update-pnpm9-1
deleted file mode 100644
index 92cf23a437f..00000000000
--- a/packages/js/product-editor/changelog/47385-dev-update-pnpm9-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update pnpm to 9.1.0
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/49170-fix-49169 b/packages/js/product-editor/changelog/49170-fix-49169
deleted file mode 100644
index 232e12c268b..00000000000
--- a/packages/js/product-editor/changelog/49170-fix-49169
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Prevent product editor styles loading on non wc-admin pages
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/50993-fix-some-comment-typos b/packages/js/product-editor/changelog/50993-fix-some-comment-typos
deleted file mode 100644
index 3dce9f8d32b..00000000000
--- a/packages/js/product-editor/changelog/50993-fix-some-comment-typos
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Comment: Fix some comment typos.
diff --git a/packages/js/product-editor/changelog/50999-add-slug-control b/packages/js/product-editor/changelog/50999-add-slug-control
deleted file mode 100644
index 312a5077650..00000000000
--- a/packages/js/product-editor/changelog/50999-add-slug-control
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: [DataView]: Add Products View and Product Edit stories.
-
diff --git a/packages/js/product-editor/changelog/52501-add-settings-sidebar b/packages/js/product-editor/changelog/52501-add-settings-sidebar
deleted file mode 100644
index 714550edd2d..00000000000
--- a/packages/js/product-editor/changelog/52501-add-settings-sidebar
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Adds layout to Settings, which is unreleased.
-
diff --git a/packages/js/product-editor/changelog/52655-update-settings-gutenberg-components-edit-site b/packages/js/product-editor/changelog/52655-update-settings-gutenberg-components-edit-site
deleted file mode 100644
index a385fa0a873..00000000000
--- a/packages/js/product-editor/changelog/52655-update-settings-gutenberg-components-edit-site
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Remove exported Gutenberg components from `@woocommerce/product-editor`
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/52815-dev-lock-dependencies b/packages/js/product-editor/changelog/52815-dev-lock-dependencies
deleted file mode 100644
index e7c745f6928..00000000000
--- a/packages/js/product-editor/changelog/52815-dev-lock-dependencies
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Stabilize JS dependency updates
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/52961-update-dompurify b/packages/js/product-editor/changelog/52961-update-dompurify
deleted file mode 100644
index 42a8cb4deba..00000000000
--- a/packages/js/product-editor/changelog/52961-update-dompurify
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: enhancement
-
-Update dompurify to 2.5.7
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/53165-dev-ts-5-7-2 b/packages/js/product-editor/changelog/53165-dev-ts-5-7-2
deleted file mode 100644
index 81738c8709d..00000000000
--- a/packages/js/product-editor/changelog/53165-dev-ts-5-7-2
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Upgraded Typescript in the monorepo to 5.7.2
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/53531-dev-react-18-ghidorah b/packages/js/product-editor/changelog/53531-dev-react-18-ghidorah
deleted file mode 100644
index ce948100616..00000000000
--- a/packages/js/product-editor/changelog/53531-dev-react-18-ghidorah
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: major
-Type: dev
-
-Updated declared dependencies to React 18 and Wordpress 6.6
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/54108-react-18-product-editor-ts-fix b/packages/js/product-editor/changelog/54108-react-18-product-editor-ts-fix
deleted file mode 100644
index 3ef2af0771b..00000000000
--- a/packages/js/product-editor/changelog/54108-react-18-product-editor-ts-fix
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Dev - Fix TS errors after React 18 update
-
diff --git a/packages/js/product-editor/changelog/54146-fix-demo-migrate-onboarding-data b/packages/js/product-editor/changelog/54146-fix-demo-migrate-onboarding-data
deleted file mode 100644
index 333a651d75d..00000000000
--- a/packages/js/product-editor/changelog/54146-fix-demo-migrate-onboarding-data
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Patch \@wordpress/data types to add types for metadata selectors, actions, and resolveSelect. Migrate onboarding store and usages to the new register(storeDescriptor) API
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/54190-react-18-fix-generic-folder b/packages/js/product-editor/changelog/54190-react-18-fix-generic-folder
deleted file mode 100644
index fc34439d72e..00000000000
--- a/packages/js/product-editor/changelog/54190-react-18-fix-generic-folder
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Product Editor: fix generic folder TS errors
-
diff --git a/packages/js/product-editor/changelog/54339-react-18-product-editor-duplicate-ref b/packages/js/product-editor/changelog/54339-react-18-product-editor-duplicate-ref
deleted file mode 100644
index b40b5bc9787..00000000000
--- a/packages/js/product-editor/changelog/54339-react-18-product-editor-duplicate-ref
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Just a follow up fix.
-
diff --git a/packages/js/product-editor/changelog/54996-chore-update-wireit b/packages/js/product-editor/changelog/54996-chore-update-wireit
deleted file mode 100644
index aef524f6c95..00000000000
--- a/packages/js/product-editor/changelog/54996-chore-update-wireit
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update wireit to 0.14.10
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/55095-dev-rewrite-wireit-deps-update b/packages/js/product-editor/changelog/55095-dev-rewrite-wireit-deps-update
deleted file mode 100644
index 6815cebd675..00000000000
--- a/packages/js/product-editor/changelog/55095-dev-rewrite-wireit-deps-update
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: refresh wireit dependencyOutputs configuration synchronization when installing dependencies.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/55495-fix-product-editor-ts-errors-1 b/packages/js/product-editor/changelog/55495-fix-product-editor-ts-errors-1
deleted file mode 100644
index c2f81eb5c19..00000000000
--- a/packages/js/product-editor/changelog/55495-fix-product-editor-ts-errors-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Refining `createCrudDataStore` types.
-
diff --git a/packages/js/product-editor/changelog/55498-fix-product-editor-ts-errors-2 b/packages/js/product-editor/changelog/55498-fix-product-editor-ts-errors-2
deleted file mode 100644
index 4170da56046..00000000000
--- a/packages/js/product-editor/changelog/55498-fix-product-editor-ts-errors-2
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Product Editor: Migrate `productsStore`.
-
diff --git a/packages/js/product-editor/changelog/55621-fix-product-editor-ts-errors-4 b/packages/js/product-editor/changelog/55621-fix-product-editor-ts-errors-4
deleted file mode 100644
index a7b16a543f4..00000000000
--- a/packages/js/product-editor/changelog/55621-fix-product-editor-ts-errors-4
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-`@woocommerce/data`: Fix types and enable TS check.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/55888-fix-remove-wp-6.1-version-checks b/packages/js/product-editor/changelog/55888-fix-remove-wp-6.1-version-checks
deleted file mode 100644
index 7655798815d..00000000000
--- a/packages/js/product-editor/changelog/55888-fix-remove-wp-6.1-version-checks
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Removes check for WP 6.1
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/56246-update-settings-router-calypso-package b/packages/js/product-editor/changelog/56246-update-settings-router-calypso-package
deleted file mode 100644
index 650aea395ac..00000000000
--- a/packages/js/product-editor/changelog/56246-update-settings-router-calypso-package
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Update new Settings to use @automattic/site-admin's router instead of Gutenberg
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/56341-update-register-woo-block-type-util-react-18 b/packages/js/product-editor/changelog/56341-update-register-woo-block-type-util-react-18
deleted file mode 100644
index e949ab303aa..00000000000
--- a/packages/js/product-editor/changelog/56341-update-register-woo-block-type-util-react-18
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Cleanup task: Fix TypeScript error in block templates package from React 18 upgrade.
-
diff --git a/packages/js/product-editor/changelog/56386-update-remove-types-wp-core-data b/packages/js/product-editor/changelog/56386-update-remove-types-wp-core-data
deleted file mode 100644
index 41a66c0eb43..00000000000
--- a/packages/js/product-editor/changelog/56386-update-remove-types-wp-core-data
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Remove deprecated `@types/wordpress__core-data`
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/56398-update-prod-editor-attribute-input-field-test-react-18 b/packages/js/product-editor/changelog/56398-update-prod-editor-attribute-input-field-test-react-18
deleted file mode 100644
index a04a5f558d8..00000000000
--- a/packages/js/product-editor/changelog/56398-update-prod-editor-attribute-input-field-test-react-18
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-Comment: React 18 update cleanup task - enable the `AttributeTermInputField` test and remove related comments.
-
diff --git a/packages/js/product-editor/changelog/56506-remove-wp-components-types b/packages/js/product-editor/changelog/56506-remove-wp-components-types
deleted file mode 100644
index 0ad65cfbb86..00000000000
--- a/packages/js/product-editor/changelog/56506-remove-wp-components-types
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Remove deprecated `@types/wordpress__components`
-
diff --git a/packages/js/product-editor/changelog/56575-dev-bump-babel-deps b/packages/js/product-editor/changelog/56575-dev-bump-babel-deps
deleted file mode 100644
index 510ab9c2a2a..00000000000
--- a/packages/js/product-editor/changelog/56575-dev-bump-babel-deps
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: consolidate @babel/* dependencies versions across the monorepo.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/56594-dev-replace-react-rc b/packages/js/product-editor/changelog/56594-dev-replace-react-rc
deleted file mode 100644
index 2129d5b7a85..00000000000
--- a/packages/js/product-editor/changelog/56594-dev-replace-react-rc
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Migrate from React RC types to direct React Props types with jscodeshift codemod
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/56695-update-react-18-use-variations-ts-error b/packages/js/product-editor/changelog/56695-update-react-18-use-variations-ts-error
deleted file mode 100644
index 0afe90e18f3..00000000000
--- a/packages/js/product-editor/changelog/56695-update-react-18-use-variations-ts-error
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-Comment: React 18 update cleanup task - fix `useVariations` TypeScript errors
-
diff --git a/packages/js/product-editor/changelog/56746-dev-webpack-deps-review b/packages/js/product-editor/changelog/56746-dev-webpack-deps-review
deleted file mode 100644
index b5d0c2d9741..00000000000
--- a/packages/js/product-editor/changelog/56746-dev-webpack-deps-review
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: Webpack deps review and consolidation and a bit of deps grooming
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/57299-fix-wireit-in-ci b/packages/js/product-editor/changelog/57299-fix-wireit-in-ci
deleted file mode 100644
index 10f4279499b..00000000000
--- a/packages/js/product-editor/changelog/57299-fix-wireit-in-ci
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Bump wireit dependency version to latest.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/58263-remove-wp-core-data b/packages/js/product-editor/changelog/58263-remove-wp-core-data
deleted file mode 100644
index 5ab104aa659..00000000000
--- a/packages/js/product-editor/changelog/58263-remove-wp-core-data
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Remove unused '@types/wordpress__data' package as it's no longer needed.
-
diff --git a/packages/js/product-editor/changelog/58765-dev-deps-cleanup-concurrently b/packages/js/product-editor/changelog/58765-dev-deps-cleanup-concurrently
deleted file mode 100644
index 403fe3cc031..00000000000
--- a/packages/js/product-editor/changelog/58765-dev-deps-cleanup-concurrently
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: drop the unused `concurrently` package from dependencies.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/58941-dev-consolidate-packages-license-version b/packages/js/product-editor/changelog/58941-dev-consolidate-packages-license-version
deleted file mode 100644
index 879d15ddabc..00000000000
--- a/packages/js/product-editor/changelog/58941-dev-consolidate-packages-license-version
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: consolidate packages licenses to `GPL-2.0-or-later`.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/59046-dev-build-ram-usage-batch-4 b/packages/js/product-editor/changelog/59046-dev-build-ram-usage-batch-4
deleted file mode 100644
index a9198a4dd78..00000000000
--- a/packages/js/product-editor/changelog/59046-dev-build-ram-usage-batch-4
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: build RAM usage optimization.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/59166-dev-faster-watch-startup-batch-1 b/packages/js/product-editor/changelog/59166-dev-faster-watch-startup-batch-1
deleted file mode 100644
index 12fce504f86..00000000000
--- a/packages/js/product-editor/changelog/59166-dev-faster-watch-startup-batch-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: watch startup time optimization.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/59421-fix-build-warnings-missing-files b/packages/js/product-editor/changelog/59421-fix-build-warnings-missing-files
deleted file mode 100644
index 7679f84329e..00000000000
--- a/packages/js/product-editor/changelog/59421-fix-build-warnings-missing-files
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Remove unused css declarations
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/62037-patch-1 b/packages/js/product-editor/changelog/62037-patch-1
deleted file mode 100644
index 7b0a71ec117..00000000000
--- a/packages/js/product-editor/changelog/62037-patch-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Add global HTML translate attribute to currency so it doesn't get auto translated
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/62428-remove-editor-mode-and-unused-rich-text-components b/packages/js/product-editor/changelog/62428-remove-editor-mode-and-unused-rich-text-components
deleted file mode 100644
index d01699b53b7..00000000000
--- a/packages/js/product-editor/changelog/62428-remove-editor-mode-and-unused-rich-text-components
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Product Editor: Remove editor mode and unused rich text components
-
diff --git a/packages/js/product-editor/changelog/63483-add-62921-shared-monorepo-ts-config b/packages/js/product-editor/changelog/63483-add-62921-shared-monorepo-ts-config
deleted file mode 100644
index 03e468e5a6e..00000000000
--- a/packages/js/product-editor/changelog/63483-add-62921-shared-monorepo-ts-config
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Replaced patched `@wordpress/data` types with opt-in internal package types.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/64111-dev-fix-admin-webpack-cache-misses b/packages/js/product-editor/changelog/64111-dev-fix-admin-webpack-cache-misses
deleted file mode 100644
index 13e547f58b4..00000000000
--- a/packages/js/product-editor/changelog/64111-dev-fix-admin-webpack-cache-misses
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: refresh DependencyExtractionWebpackPlugin for compatibility with filesystem cache, admin build cleanup.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/64161-dev-64111-post-cleanup b/packages/js/product-editor/changelog/64161-dev-64111-post-cleanup
deleted file mode 100644
index b740e6c4df4..00000000000
--- a/packages/js/product-editor/changelog/64161-dev-64111-post-cleanup
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Monorepo: complete migration to @woocommerce/internal-style-build/webpack-rtl-plugin
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/64797-dev-circular-deps-tdz b/packages/js/product-editor/changelog/64797-dev-circular-deps-tdz
deleted file mode 100644
index 8cdedfd5525..00000000000
--- a/packages/js/product-editor/changelog/64797-dev-circular-deps-tdz
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: address circular dependencies surfaced by SWC TDZ.
\ No newline at end of file
diff --git a/packages/js/product-editor/changelog/64838-dev-esbuild-package-builds b/packages/js/product-editor/changelog/64838-dev-esbuild-package-builds
deleted file mode 100644
index 53b9c7cd29c..00000000000
--- a/packages/js/product-editor/changelog/64838-dev-esbuild-package-builds
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Replaced wireit + tsc package build pipeline with a per-package esbuild script.
diff --git a/packages/js/product-editor/changelog/add-40351-image b/packages/js/product-editor/changelog/add-40351-image
deleted file mode 100644
index 36974e079d9..00000000000
--- a/packages/js/product-editor/changelog/add-40351-image
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Enable image inline actions in the variations table
diff --git a/packages/js/product-editor/changelog/add-40351-prices b/packages/js/product-editor/changelog/add-40351-prices
deleted file mode 100644
index 3884b3be14b..00000000000
--- a/packages/js/product-editor/changelog/add-40351-prices
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Enable pricing inline actions in the variations table
diff --git a/packages/js/product-editor/changelog/add-40351-stock b/packages/js/product-editor/changelog/add-40351-stock
deleted file mode 100644
index 1b63d1c3c93..00000000000
--- a/packages/js/product-editor/changelog/add-40351-stock
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Enable manage stock inline actions in the variations table
diff --git a/packages/js/product-editor/changelog/add-46919 b/packages/js/product-editor/changelog/add-46919
deleted file mode 100644
index 61bf7760e06..00000000000
--- a/packages/js/product-editor/changelog/add-46919
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Change the custom field name component to be an autocomplete
diff --git a/packages/js/product-editor/changelog/add-47036 b/packages/js/product-editor/changelog/add-47036
deleted file mode 100644
index 020a089feae..00000000000
--- a/packages/js/product-editor/changelog/add-47036
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Enable inline actions in the variations table for images
diff --git a/packages/js/product-editor/changelog/add-47221_tracks_events_to_publish_dropdown b/packages/js/product-editor/changelog/add-47221_tracks_events_to_publish_dropdown
deleted file mode 100644
index d38db749d15..00000000000
--- a/packages/js/product-editor/changelog/add-47221_tracks_events_to_publish_dropdown
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add Tracks events to Publish dropdown and Save draft button
diff --git a/packages/js/product-editor/changelog/add-48791 b/packages/js/product-editor/changelog/add-48791
deleted file mode 100644
index 143498003e4..00000000000
--- a/packages/js/product-editor/changelog/add-48791
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add tracks to the variation inline editing
diff --git a/packages/js/product-editor/changelog/add-49534 b/packages/js/product-editor/changelog/add-49534
deleted file mode 100644
index f8718cc2089..00000000000
--- a/packages/js/product-editor/changelog/add-49534
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Remove propTypes and defaultProps from react components in TypeScript.
diff --git a/packages/js/product-editor/changelog/add-49721_add_readme_for_validators b/packages/js/product-editor/changelog/add-49721_add_readme_for_validators
deleted file mode 100644
index a954197ddcb..00000000000
--- a/packages/js/product-editor/changelog/add-49721_add_readme_for_validators
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add readme for validations #49723
diff --git a/packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor b/packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor
deleted file mode 100644
index cf675703ffd..00000000000
--- a/packages/js/product-editor/changelog/add-50231_e2e_description_using_block_editor
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-[E2E tests]: Add aria-expanded and rename ToolbarItem label #50232
diff --git a/packages/js/product-editor/changelog/add-core-combobox b/packages/js/product-editor/changelog/add-core-combobox
deleted file mode 100644
index 5b40961683c..00000000000
--- a/packages/js/product-editor/changelog/add-core-combobox
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add a ComboboxControl component
diff --git a/packages/js/product-editor/changelog/add-initial_product_data_views_screen b/packages/js/product-editor/changelog/add-initial_product_data_views_screen
deleted file mode 100644
index 9ad9bd3724f..00000000000
--- a/packages/js/product-editor/changelog/add-initial_product_data_views_screen
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add new product data views component for use on new product data views page.
diff --git a/packages/js/product-editor/changelog/add-keyboard-shortcuts b/packages/js/product-editor/changelog/add-keyboard-shortcuts
deleted file mode 100644
index e09c109e440..00000000000
--- a/packages/js/product-editor/changelog/add-keyboard-shortcuts
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Allow saving a product as a draft when hitting ctrl/cmd + S
diff --git a/packages/js/product-editor/changelog/add-notice-block b/packages/js/product-editor/changelog/add-notice-block
deleted file mode 100644
index 02d34d939e4..00000000000
--- a/packages/js/product-editor/changelog/add-notice-block
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add Notice generic block
diff --git a/packages/js/product-editor/changelog/add-placeholder-taxonomy b/packages/js/product-editor/changelog/add-placeholder-taxonomy
deleted file mode 100644
index a2051572298..00000000000
--- a/packages/js/product-editor/changelog/add-placeholder-taxonomy
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add 'placeholder' attribute to taxonomy block
diff --git a/packages/js/product-editor/changelog/add-product-editor-deprecation-notices b/packages/js/product-editor/changelog/add-product-editor-deprecation-notices
deleted file mode 100644
index d472acf2e2d..00000000000
--- a/packages/js/product-editor/changelog/add-product-editor-deprecation-notices
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add WooCommerce 11.0 removal notices for the deprecated product editor package and extension APIs.
diff --git a/packages/js/product-editor/changelog/add-product-editor-modal-block-editor-more-menu b/packages/js/product-editor/changelog/add-product-editor-modal-block-editor-more-menu
deleted file mode 100644
index 5697e09da79..00000000000
--- a/packages/js/product-editor/changelog/add-product-editor-modal-block-editor-more-menu
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Added support for extension more menu items in modal block editor (description field).
diff --git a/packages/js/product-editor/changelog/add-product-template-url b/packages/js/product-editor/changelog/add-product-template-url
deleted file mode 100644
index 499d19c5e83..00000000000
--- a/packages/js/product-editor/changelog/add-product-template-url
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add template URL parameter to allow choosing template directly
diff --git a/packages/js/product-editor/changelog/add-product_data_forms_to_data_views b/packages/js/product-editor/changelog/add-product_data_forms_to_data_views
deleted file mode 100644
index 2470f0110d2..00000000000
--- a/packages/js/product-editor/changelog/add-product_data_forms_to_data_views
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add DataForms panel to the experimental product data views list.
diff --git a/packages/js/product-editor/changelog/add-product_data_views_list b/packages/js/product-editor/changelog/add-product_data_views_list
deleted file mode 100644
index 548ca3eb055..00000000000
--- a/packages/js/product-editor/changelog/add-product_data_views_list
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add sidebar and dataviews list to the experimental dataviews products page.
diff --git a/packages/js/product-editor/changelog/add-product_form_migration_to_dataforms b/packages/js/product-editor/changelog/add-product_form_migration_to_dataforms
deleted file mode 100644
index dc39e4b2350..00000000000
--- a/packages/js/product-editor/changelog/add-product_form_migration_to_dataforms
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update experimental product dataviews page to render with old navigation.
diff --git a/packages/js/product-editor/changelog/add-toggle-doc b/packages/js/product-editor/changelog/add-toggle-doc
deleted file mode 100644
index e0d652e28aa..00000000000
--- a/packages/js/product-editor/changelog/add-toggle-doc
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: update
-Comment: Add product-toggle-field documentation
-
-
diff --git a/packages/js/product-editor/changelog/add-tracks-unit-tests-improvements-product-editor b/packages/js/product-editor/changelog/add-tracks-unit-tests-improvements-product-editor
deleted file mode 100644
index 587546f4efb..00000000000
--- a/packages/js/product-editor/changelog/add-tracks-unit-tests-improvements-product-editor
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Add tests for some product editor tracks
diff --git a/packages/js/product-editor/changelog/add-upgrade-blocks-to-v3 b/packages/js/product-editor/changelog/add-upgrade-blocks-to-v3
deleted file mode 100644
index def28ee9bcc..00000000000
--- a/packages/js/product-editor/changelog/add-upgrade-blocks-to-v3
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update all blocks to use API Version 3.
diff --git a/packages/js/product-editor/changelog/build-webpack-filesystem-cache b/packages/js/product-editor/changelog/build-webpack-filesystem-cache
deleted file mode 100644
index eee3e465e54..00000000000
--- a/packages/js/product-editor/changelog/build-webpack-filesystem-cache
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Improve build time for product-editor by using webpack filesystem cache.
diff --git a/packages/js/product-editor/changelog/ci-add-workflow-call-event b/packages/js/product-editor/changelog/ci-add-workflow-call-event
deleted file mode 100644
index 4a94d942fe9..00000000000
--- a/packages/js/product-editor/changelog/ci-add-workflow-call-event
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update events that should trigger the test job(s)
diff --git a/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown b/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown
deleted file mode 100644
index 8f1393fc599..00000000000
--- a/packages/js/product-editor/changelog/dev-36283_add_clear_button_to_dropdown
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Add clear button to Categories dropdown #49036
diff --git a/packages/js/product-editor/changelog/dev-39647_update_validation_message_name_field b/packages/js/product-editor/changelog/dev-39647_update_validation_message_name_field
deleted file mode 100644
index 51f14331b49..00000000000
--- a/packages/js/product-editor/changelog/dev-39647_update_validation_message_name_field
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Update product name validation message #47846
diff --git a/packages/js/product-editor/changelog/dev-46765_modify_product_editor_error_snackbar b/packages/js/product-editor/changelog/dev-46765_modify_product_editor_error_snackbar
deleted file mode 100644
index 12f10cacac8..00000000000
--- a/packages/js/product-editor/changelog/dev-46765_modify_product_editor_error_snackbar
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Do not dismiss the error snackbar automatically #48192
diff --git a/packages/js/product-editor/changelog/dev-46768_add_context_to_errors b/packages/js/product-editor/changelog/dev-46768_add_context_to_errors
deleted file mode 100644
index 5b4f15eb7da..00000000000
--- a/packages/js/product-editor/changelog/dev-46768_add_context_to_errors
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Add context to errors #49242
diff --git a/packages/js/product-editor/changelog/dev-46768_add_link b/packages/js/product-editor/changelog/dev-46768_add_link
deleted file mode 100644
index a5ca166965a..00000000000
--- a/packages/js/product-editor/changelog/dev-46768_add_link
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Add link into the error snackbar #49246
diff --git a/packages/js/product-editor/changelog/dev-46768_add_ref_to_number_control b/packages/js/product-editor/changelog/dev-46768_add_ref_to_number_control
deleted file mode 100644
index 4f9650d9d7d..00000000000
--- a/packages/js/product-editor/changelog/dev-46768_add_ref_to_number_control
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Add reference to number control #49357
diff --git a/packages/js/product-editor/changelog/dev-46768_add_tests_for_hooks b/packages/js/product-editor/changelog/dev-46768_add_tests_for_hooks
deleted file mode 100644
index ffca7f43a20..00000000000
--- a/packages/js/product-editor/changelog/dev-46768_add_tests_for_hooks
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Add tests for snackbar error handling hooks #49498
diff --git a/packages/js/product-editor/changelog/dev-46844_remove_not_used_feature_flags b/packages/js/product-editor/changelog/dev-46844_remove_not_used_feature_flags
deleted file mode 100644
index 956690365c6..00000000000
--- a/packages/js/product-editor/changelog/dev-46844_remove_not_used_feature_flags
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Remove not used feature flags #47150
diff --git a/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice b/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice
deleted file mode 100644
index 398d63c773b..00000000000
--- a/packages/js/product-editor/changelog/dev-46890_avoid_request_product_twice
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Avoid duplicated product request #46934
diff --git a/packages/js/product-editor/changelog/dev-46962_request_variations_only_for_variable_products b/packages/js/product-editor/changelog/dev-46962_request_variations_only_for_variable_products
deleted file mode 100644
index 28b5cb09ef1..00000000000
--- a/packages/js/product-editor/changelog/dev-46962_request_variations_only_for_variable_products
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request variations only when the product has variations #46963
diff --git a/packages/js/product-editor/changelog/dev-47035_request_tags_conditionally b/packages/js/product-editor/changelog/dev-47035_request_tags_conditionally
deleted file mode 100644
index 8333c186f28..00000000000
--- a/packages/js/product-editor/changelog/dev-47035_request_tags_conditionally
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request tags only when we need them #47068
diff --git a/packages/js/product-editor/changelog/dev-47053_move_pricing_features_to_general b/packages/js/product-editor/changelog/dev-47053_move_pricing_features_to_general
deleted file mode 100644
index 1b6d7d9b71e..00000000000
--- a/packages/js/product-editor/changelog/dev-47053_move_pricing_features_to_general
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Move pricing features to General tab #47435
diff --git a/packages/js/product-editor/changelog/dev-47189_disable_prepublish_panel b/packages/js/product-editor/changelog/dev-47189_disable_prepublish_panel
deleted file mode 100644
index d7b4881e820..00000000000
--- a/packages/js/product-editor/changelog/dev-47189_disable_prepublish_panel
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Disable pre-publish panel #47430
diff --git a/packages/js/product-editor/changelog/dev-47195_request_shipping_classes_conditionally b/packages/js/product-editor/changelog/dev-47195_request_shipping_classes_conditionally
deleted file mode 100644
index a9a6625989e..00000000000
--- a/packages/js/product-editor/changelog/dev-47195_request_shipping_classes_conditionally
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request shipping classes conditionally #47196
diff --git a/packages/js/product-editor/changelog/dev-47215_request_categories_conditionally b/packages/js/product-editor/changelog/dev-47215_request_categories_conditionally
deleted file mode 100644
index d17ce430fb2..00000000000
--- a/packages/js/product-editor/changelog/dev-47215_request_categories_conditionally
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request categories conditionally #47216
diff --git a/packages/js/product-editor/changelog/dev-47293_modify_attributes_empty_state b/packages/js/product-editor/changelog/dev-47293_modify_attributes_empty_state
deleted file mode 100644
index d2697dbf5b9..00000000000
--- a/packages/js/product-editor/changelog/dev-47293_modify_attributes_empty_state
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Modify components empty state #47487
diff --git a/packages/js/product-editor/changelog/dev-47357_request_terms_conditionally b/packages/js/product-editor/changelog/dev-47357_request_terms_conditionally
deleted file mode 100644
index 9dd17454990..00000000000
--- a/packages/js/product-editor/changelog/dev-47357_request_terms_conditionally
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request attributes conditionally #47361
diff --git a/packages/js/product-editor/changelog/dev-47359_request_variations_conditionally b/packages/js/product-editor/changelog/dev-47359_request_variations_conditionally
deleted file mode 100644
index fc21cfa2b84..00000000000
--- a/packages/js/product-editor/changelog/dev-47359_request_variations_conditionally
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Request variations conditionally #47360
diff --git a/packages/js/product-editor/changelog/dev-47478_product_name_field_adjustments b/packages/js/product-editor/changelog/dev-47478_product_name_field_adjustments
deleted file mode 100644
index cc51169f0b6..00000000000
--- a/packages/js/product-editor/changelog/dev-47478_product_name_field_adjustments
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Override product name height and font-size #47979
diff --git a/packages/js/product-editor/changelog/dev-49581_use_validatorid_instead_of_context b/packages/js/product-editor/changelog/dev-49581_use_validatorid_instead_of_context
deleted file mode 100644
index 985fe8e1e76..00000000000
--- a/packages/js/product-editor/changelog/dev-49581_use_validatorid_instead_of_context
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Use the validatorId to get access to the field instead of the context #50035
diff --git a/packages/js/product-editor/changelog/dev-49582_use_custom_link_for_sku_error b/packages/js/product-editor/changelog/dev-49582_use_custom_link_for_sku_error
deleted file mode 100644
index 23df034c730..00000000000
--- a/packages/js/product-editor/changelog/dev-49582_use_custom_link_for_sku_error
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-[Enhancement]: Change link label for duplicated SKU #49729
diff --git a/packages/js/product-editor/changelog/dev-50276_rename_and_move_error_handler b/packages/js/product-editor/changelog/dev-50276_rename_and_move_error_handler
deleted file mode 100644
index 0951cfcbedc..00000000000
--- a/packages/js/product-editor/changelog/dev-50276_rename_and_move_error_handler
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Rename and move errorHandler method #50277
diff --git a/packages/js/product-editor/changelog/dev-55910-deps-consolidation b/packages/js/product-editor/changelog/dev-55910-deps-consolidation
deleted file mode 100644
index 2b9c4b53b13..00000000000
--- a/packages/js/product-editor/changelog/dev-55910-deps-consolidation
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: consolidate @wordpress/babel-preset-default, @wordpress/browserslist-config, glob packages versions.
diff --git a/packages/js/product-editor/changelog/dev-64837-type-check-only-on-lint b/packages/js/product-editor/changelog/dev-64837-type-check-only-on-lint
deleted file mode 100644
index efdb3bd771a..00000000000
--- a/packages/js/product-editor/changelog/dev-64837-type-check-only-on-lint
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Move TypeScript type-checking from the build to a new `lint:lang:types` script. Builds now emit types and JS without type-checking.
diff --git a/packages/js/product-editor/changelog/dev-build-profiling-tweaks-take-1 b/packages/js/product-editor/changelog/dev-build-profiling-tweaks-take-1
deleted file mode 100644
index bb77f6da5ff..00000000000
--- a/packages/js/product-editor/changelog/dev-build-profiling-tweaks-take-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: consolidate TypeScript config files and JS test directories naming.
diff --git a/packages/js/product-editor/changelog/dev-ci-jobs-clean-up-cascading-keys-config-option b/packages/js/product-editor/changelog/dev-ci-jobs-clean-up-cascading-keys-config-option
deleted file mode 100644
index d36f953d7ba..00000000000
--- a/packages/js/product-editor/changelog/dev-ci-jobs-clean-up-cascading-keys-config-option
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-dev: clean-up ci-job config options - remove unused cascading keys
diff --git a/packages/js/product-editor/changelog/dev-ci-lint-monorepo-job-update b/packages/js/product-editor/changelog/dev-ci-lint-monorepo-job-update
deleted file mode 100644
index 4def83412ad..00000000000
--- a/packages/js/product-editor/changelog/dev-ci-lint-monorepo-job-update
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-CI: liverage composer packages cache in lint monorepo job
diff --git a/packages/js/product-editor/changelog/dev-cjs-prepack-only b/packages/js/product-editor/changelog/dev-cjs-prepack-only
deleted file mode 100644
index 0f64fecf28c..00000000000
--- a/packages/js/product-editor/changelog/dev-cjs-prepack-only
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Move the CommonJS build to prepack so day-to-day development only builds the ESM output.
diff --git a/packages/js/product-editor/changelog/dev-consolidate-syncpack-config b/packages/js/product-editor/changelog/dev-consolidate-syncpack-config
deleted file mode 100644
index 7ab3e6a6116..00000000000
--- a/packages/js/product-editor/changelog/dev-consolidate-syncpack-config
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: consolidate syncpack config around React 17/18 usage.
diff --git a/packages/js/product-editor/changelog/dev-monorepo-internal-packages-linking-fixes b/packages/js/product-editor/changelog/dev-monorepo-internal-packages-linking-fixes
deleted file mode 100644
index 52ec37bc356..00000000000
--- a/packages/js/product-editor/changelog/dev-monorepo-internal-packages-linking-fixes
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: ensure monorepo packages are linked via workspace-version of the dependencies.
diff --git a/packages/js/product-editor/changelog/enhancement-45883 b/packages/js/product-editor/changelog/enhancement-45883
deleted file mode 100644
index b32a3b3401f..00000000000
--- a/packages/js/product-editor/changelog/enhancement-45883
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: enhancement
-
-Replace copy: List Price to Regular Price
diff --git a/packages/js/product-editor/changelog/enhancement-45920 b/packages/js/product-editor/changelog/enhancement-45920
deleted file mode 100644
index 804b379e08b..00000000000
--- a/packages/js/product-editor/changelog/enhancement-45920
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: enhancement
-
-Simplify the product images empty state
diff --git a/packages/js/product-editor/changelog/enhancement-46491 b/packages/js/product-editor/changelog/enhancement-46491
deleted file mode 100644
index bf2258baaa9..00000000000
--- a/packages/js/product-editor/changelog/enhancement-46491
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: enhancement
-
-Enhancement editor loading speed
diff --git a/packages/js/product-editor/changelog/enhancement-47804 b/packages/js/product-editor/changelog/enhancement-47804
deleted file mode 100644
index a1caff25a9c..00000000000
--- a/packages/js/product-editor/changelog/enhancement-47804
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: enhancement
-
-Remove the previous product management experience
diff --git a/packages/js/product-editor/changelog/fix-36773 b/packages/js/product-editor/changelog/fix-36773
deleted file mode 100644
index 23f8a18ece2..00000000000
--- a/packages/js/product-editor/changelog/fix-36773
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix accessibility issues when using the keyboard to navigate/select tabs in the new product editor
diff --git a/packages/js/product-editor/changelog/fix-45401_application_request_product_error b/packages/js/product-editor/changelog/fix-45401_application_request_product_error
deleted file mode 100644
index 7827f247f68..00000000000
--- a/packages/js/product-editor/changelog/fix-45401_application_request_product_error
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Avoid requesting product with id -1 while loading #46769
diff --git a/packages/js/product-editor/changelog/fix-45641 b/packages/js/product-editor/changelog/fix-45641
deleted file mode 100644
index 8556d38b6b2..00000000000
--- a/packages/js/product-editor/changelog/fix-45641
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix cannot create variation options when viewport width is small
diff --git a/packages/js/product-editor/changelog/fix-46540 b/packages/js/product-editor/changelog/fix-46540
deleted file mode 100644
index a43df72cbc5..00000000000
--- a/packages/js/product-editor/changelog/fix-46540
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add custom fields tracking events
diff --git a/packages/js/product-editor/changelog/fix-46608 b/packages/js/product-editor/changelog/fix-46608
deleted file mode 100644
index 4c63e41c9b6..00000000000
--- a/packages/js/product-editor/changelog/fix-46608
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Remove table separator, move field names to table columns and fix the modal growing when there are validation errors
diff --git a/packages/js/product-editor/changelog/fix-46610 b/packages/js/product-editor/changelog/fix-46610
deleted file mode 100644
index 34120a7bfae..00000000000
--- a/packages/js/product-editor/changelog/fix-46610
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix validation for the custom fields
diff --git a/packages/js/product-editor/changelog/fix-46614_edit_modal_width_custom_fields b/packages/js/product-editor/changelog/fix-46614_edit_modal_width_custom_fields
deleted file mode 100644
index b820b472d09..00000000000
--- a/packages/js/product-editor/changelog/fix-46614_edit_modal_width_custom_fields
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Fix edit custom field modal width #46727
diff --git a/packages/js/product-editor/changelog/fix-46615 b/packages/js/product-editor/changelog/fix-46615
deleted file mode 100644
index 45a2e2abf42..00000000000
--- a/packages/js/product-editor/changelog/fix-46615
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Remove block appender below the custom fields block
diff --git a/packages/js/product-editor/changelog/fix-46638 b/packages/js/product-editor/changelog/fix-46638
deleted file mode 100644
index 1ac315d1bd8..00000000000
--- a/packages/js/product-editor/changelog/fix-46638
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix clicking outside of the attribute modal triggers an error
diff --git a/packages/js/product-editor/changelog/fix-46771_core_interface_already_registered b/packages/js/product-editor/changelog/fix-46771_core_interface_already_registered
deleted file mode 100644
index 9eba3801b75..00000000000
--- a/packages/js/product-editor/changelog/fix-46771_core_interface_already_registered
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Fix duplicate interface store warning, by bundling in and lazy loading some @wordpress/interface dependencies.
diff --git a/packages/js/product-editor/changelog/fix-47788 b/packages/js/product-editor/changelog/fix-47788
deleted file mode 100644
index 7d655be14e4..00000000000
--- a/packages/js/product-editor/changelog/fix-47788
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix the variations image block placeholder to show only one image
diff --git a/packages/js/product-editor/changelog/fix-48237 b/packages/js/product-editor/changelog/fix-48237
deleted file mode 100644
index dbf214cc42b..00000000000
--- a/packages/js/product-editor/changelog/fix-48237
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix Product template not updating in the UI when it is changed
diff --git a/packages/js/product-editor/changelog/fix-49155 b/packages/js/product-editor/changelog/fix-49155
deleted file mode 100644
index 4ae5f9ab048..00000000000
--- a/packages/js/product-editor/changelog/fix-49155
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix the image gallery removal conflict now that the image gallery is stateless
diff --git a/packages/js/product-editor/changelog/fix-49345_save_product_check_for_variations b/packages/js/product-editor/changelog/fix-49345_save_product_check_for_variations
deleted file mode 100644
index f4c9f8db914..00000000000
--- a/packages/js/product-editor/changelog/fix-49345_save_product_check_for_variations
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Always count variations without price #50129
diff --git a/packages/js/product-editor/changelog/fix-49402 b/packages/js/product-editor/changelog/fix-49402
deleted file mode 100644
index a5275de5a45..00000000000
--- a/packages/js/product-editor/changelog/fix-49402
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix unhandled promise rejection when creating an attribute term and the create request fails
diff --git a/packages/js/product-editor/changelog/fix-49697_settings_button_on_mobile b/packages/js/product-editor/changelog/fix-49697_settings_button_on_mobile
deleted file mode 100644
index d8052fd8af0..00000000000
--- a/packages/js/product-editor/changelog/fix-49697_settings_button_on_mobile
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Tweak header styling in description modal editor to address issues with smaller viewports.
diff --git a/packages/js/product-editor/changelog/fix-50058_gb_modal_conflict b/packages/js/product-editor/changelog/fix-50058_gb_modal_conflict
deleted file mode 100644
index 7607a7c9737..00000000000
--- a/packages/js/product-editor/changelog/fix-50058_gb_modal_conflict
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Increase specificity of modal styling to avoid Gutenberg styling conflicts.
diff --git a/packages/js/product-editor/changelog/fix-50571 b/packages/js/product-editor/changelog/fix-50571
deleted file mode 100644
index 211254cdb80..00000000000
--- a/packages/js/product-editor/changelog/fix-50571
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix the icon alignment when shown as part of the input label
diff --git a/packages/js/product-editor/changelog/fix-52237_upside_down_tooltip b/packages/js/product-editor/changelog/fix-52237_upside_down_tooltip
deleted file mode 100644
index dbe896a21ee..00000000000
--- a/packages/js/product-editor/changelog/fix-52237_upside_down_tooltip
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Fix upside down tooltip text in variations table.
diff --git a/packages/js/product-editor/changelog/fix-52238_description_toolbar_toggle b/packages/js/product-editor/changelog/fix-52238_description_toolbar_toggle
deleted file mode 100644
index e81c0a6df94..00000000000
--- a/packages/js/product-editor/changelog/fix-52238_description_toolbar_toggle
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Fix toggle state issue within description modal editor when toggling block inserter and document overview.
diff --git a/packages/js/product-editor/changelog/fix-54123 b/packages/js/product-editor/changelog/fix-54123
deleted file mode 100644
index a2ce7d0382c..00000000000
--- a/packages/js/product-editor/changelog/fix-54123
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Typescript types update
diff --git a/packages/js/product-editor/changelog/fix-add-template-data b/packages/js/product-editor/changelog/fix-add-template-data
deleted file mode 100644
index d3e68834e9d..00000000000
--- a/packages/js/product-editor/changelog/fix-add-template-data
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Add data from the template to the product when it is selected via URL query parameter
-
-
diff --git a/packages/js/product-editor/changelog/fix-beta-tester-ts-errors b/packages/js/product-editor/changelog/fix-beta-tester-ts-errors
deleted file mode 100644
index d2126ac472f..00000000000
--- a/packages/js/product-editor/changelog/fix-beta-tester-ts-errors
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Remove unused ts-expect-error
-
-
diff --git a/packages/js/product-editor/changelog/fix-build-warnings-WEBPACK_DEPRECATION_ARRAY_TO_SET_PUSH b/packages/js/product-editor/changelog/fix-build-warnings-WEBPACK_DEPRECATION_ARRAY_TO_SET_PUSH
deleted file mode 100644
index 6ed44b069d6..00000000000
--- a/packages/js/product-editor/changelog/fix-build-warnings-WEBPACK_DEPRECATION_ARRAY_TO_SET_PUSH
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Update @automattic/webpack-rtl-plugin version
diff --git a/packages/js/product-editor/changelog/fix-create-variations-crash-react-18 b/packages/js/product-editor/changelog/fix-create-variations-crash-react-18
deleted file mode 100644
index b652e339b8d..00000000000
--- a/packages/js/product-editor/changelog/fix-create-variations-crash-react-18
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Addressed issues causing variations tab to crash when generating variations with React 18.
diff --git a/packages/js/product-editor/changelog/fix-create-variations-tab-switch b/packages/js/product-editor/changelog/fix-create-variations-tab-switch
deleted file mode 100644
index 378c853bf17..00000000000
--- a/packages/js/product-editor/changelog/fix-create-variations-tab-switch
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixes a React 18 concurrency-related issue with tab switching.
diff --git a/packages/js/product-editor/changelog/fix-description-block-collapse b/packages/js/product-editor/changelog/fix-description-block-collapse
deleted file mode 100644
index d32014bc77d..00000000000
--- a/packages/js/product-editor/changelog/fix-description-block-collapse
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix description block collapsing when unfocused
diff --git a/packages/js/product-editor/changelog/fix-experimental_role_warning b/packages/js/product-editor/changelog/fix-experimental_role_warning
deleted file mode 100644
index 6f2532f63ef..00000000000
--- a/packages/js/product-editor/changelog/fix-experimental_role_warning
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Removing the use of __experimentalRole and using role instead.
diff --git a/packages/js/product-editor/changelog/fix-hide-variation-notice b/packages/js/product-editor/changelog/fix-hide-variation-notice
deleted file mode 100644
index b317b318d5b..00000000000
--- a/packages/js/product-editor/changelog/fix-hide-variation-notice
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Hide variation related notices when product type is not variable
diff --git a/packages/js/product-editor/changelog/fix-high-number-currency-round b/packages/js/product-editor/changelog/fix-high-number-currency-round
deleted file mode 100644
index 710258afc09..00000000000
--- a/packages/js/product-editor/changelog/fix-high-number-currency-round
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Prevent high numbers from breaking currency inputs
-
-
diff --git a/packages/js/product-editor/changelog/fix-linked-product-timing-issue b/packages/js/product-editor/changelog/fix-linked-product-timing-issue
deleted file mode 100644
index 55bbba0285f..00000000000
--- a/packages/js/product-editor/changelog/fix-linked-product-timing-issue
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update linked product search to use GB Combobox for easier async usage.
diff --git a/packages/js/product-editor/changelog/fix-links-toolbar b/packages/js/product-editor/changelog/fix-links-toolbar
deleted file mode 100644
index 5cdbd8f2c24..00000000000
--- a/packages/js/product-editor/changelog/fix-links-toolbar
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix links popover disappearing rapidly after appearing
diff --git a/packages/js/product-editor/changelog/fix-loading-layout-template b/packages/js/product-editor/changelog/fix-loading-layout-template
deleted file mode 100644
index 28f1f105580..00000000000
--- a/packages/js/product-editor/changelog/fix-loading-layout-template
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Tweak useProductTemplate logic and avoid loading layout template before product is loaded
diff --git a/packages/js/product-editor/changelog/fix-migrate-option-store b/packages/js/product-editor/changelog/fix-migrate-option-store
deleted file mode 100644
index e2545955538..00000000000
--- a/packages/js/product-editor/changelog/fix-migrate-option-store
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Replace OPTIONS_STORE_NAME with optionsStore
diff --git a/packages/js/product-editor/changelog/fix-migrate-user-store b/packages/js/product-editor/changelog/fix-migrate-user-store
deleted file mode 100644
index fe85b88c85a..00000000000
--- a/packages/js/product-editor/changelog/fix-migrate-user-store
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update user store imports and type references
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-AligmentToolbarButton-func-name b/packages/js/product-editor/changelog/fix-misspelling-in-AligmentToolbarButton-func-name
deleted file mode 100644
index 3cc637e471c..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-AligmentToolbarButton-func-name
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typo in AligmentToolbarButton function name
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-getProductStockStatusClass-test b/packages/js/product-editor/changelog/fix-misspelling-in-getProductStockStatusClass-test
deleted file mode 100644
index c09c6462e96..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-getProductStockStatusClass-test
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typo in getProductStockStatusClass test
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-handleAdviceCardDismiss-func-name b/packages/js/product-editor/changelog/fix-misspelling-in-handleAdviceCardDismiss-func-name
deleted file mode 100644
index 2f54b48b2f0..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-handleAdviceCardDismiss-func-name
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typo in handleAdviceCardDissmiss function name
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-initCustomFieldsToogle-variable b/packages/js/product-editor/changelog/fix-misspelling-in-initCustomFieldsToogle-variable
deleted file mode 100644
index 81ef2df71bd..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-initCustomFieldsToogle-variable
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typo in initCustomFieldsToogle variable name
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-inline-doc-packages-js b/packages/js/product-editor/changelog/fix-misspelling-in-inline-doc-packages-js
deleted file mode 100644
index 4b374755cb3..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-inline-doc-packages-js
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typos in inline documentation
diff --git a/packages/js/product-editor/changelog/fix-misspelling-in-noticeDimissed-ref b/packages/js/product-editor/changelog/fix-misspelling-in-noticeDimissed-ref
deleted file mode 100644
index f9fda3b1ea1..00000000000
--- a/packages/js/product-editor/changelog/fix-misspelling-in-noticeDimissed-ref
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix typo in noticeDismissed ref
diff --git a/packages/js/product-editor/changelog/fix-old_product_editor_component_cleanup b/packages/js/product-editor/changelog/fix-old_product_editor_component_cleanup
deleted file mode 100644
index a69b4b3f292..00000000000
--- a/packages/js/product-editor/changelog/fix-old_product_editor_component_cleanup
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Remove use of __experimentalWooProductFieldItem from @woocommerce/components
diff --git a/packages/js/product-editor/changelog/fix-product-editor-images-drop-error b/packages/js/product-editor/changelog/fix-product-editor-images-drop-error
deleted file mode 100644
index 96a48b0692c..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-images-drop-error
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Show error notice when unable to upload an image.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-length-label b/packages/js/product-editor/changelog/fix-product-editor-length-label
deleted file mode 100644
index e1226d261d9..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-length-label
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Correct label of shipping dimensions length field.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-max-upload-size b/packages/js/product-editor/changelog/fix-product-editor-max-upload-size
deleted file mode 100644
index b174553d0a8..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-max-upload-size
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Respect system setting for maximum image upload file size.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-1st-block b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-1st-block
deleted file mode 100644
index 1a23740e518..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-1st-block
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Handle description properly when it contains a single non-paragraph block
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-add-crash b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-add-crash
deleted file mode 100644
index c30b702b592..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-add-crash
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixes a crash in the modal block editor when the Add button is clicked with Gutenberg 18.3.0 and later
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-header-toolbars b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-header-toolbars
deleted file mode 100644
index cb435088821..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-header-toolbars
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Updated modal block editor header implementation to get rid of deprecation warnings.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-keyboard-undo b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-keyboard-undo
deleted file mode 100644
index f1bb02e870d..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-keyboard-undo
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add keyboard shortcut support to the modal block editor (description field).
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo
deleted file mode 100644
index 7f680447cd1..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixes undo/redo in the modal block editor (description field).
diff --git a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo-granularity b/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo-granularity
deleted file mode 100644
index 1a70bab683d..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-modal-block-editor-undo-granularity
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Make editor history in modal block editor less granular to match post editor behavior.
diff --git a/packages/js/product-editor/changelog/fix-product-editor-ts-errors-3 b/packages/js/product-editor/changelog/fix-product-editor-ts-errors-3
deleted file mode 100644
index 2a1cbc78a92..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-ts-errors-3
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Migrate `Countries` and `Payments Gateways` stores to improve type definitions
diff --git a/packages/js/product-editor/changelog/fix-product-editor-variations-remove-sizes-and-colors-buttons b/packages/js/product-editor/changelog/fix-product-editor-variations-remove-sizes-and-colors-buttons
deleted file mode 100644
index a0435ca92a9..00000000000
--- a/packages/js/product-editor/changelog/fix-product-editor-variations-remove-sizes-and-colors-buttons
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Temporarily remove Add Sizes and Add Colors buttons from Variations tab until they are fixed in a future release.
diff --git a/packages/js/product-editor/changelog/fix-product-has-resolved b/packages/js/product-editor/changelog/fix-product-has-resolved
deleted file mode 100644
index d983478f1e7..00000000000
--- a/packages/js/product-editor/changelog/fix-product-has-resolved
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Only run effect when product is resolved
diff --git a/packages/js/product-editor/changelog/fix-responsive-tabs b/packages/js/product-editor/changelog/fix-responsive-tabs
deleted file mode 100644
index 789e23dcb80..00000000000
--- a/packages/js/product-editor/changelog/fix-responsive-tabs
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix tabs overflowing when viewport is small
diff --git a/packages/js/product-editor/changelog/fix-style_conflicts b/packages/js/product-editor/changelog/fix-style_conflicts
deleted file mode 100644
index bd5d3c6d81c..00000000000
--- a/packages/js/product-editor/changelog/fix-style_conflicts
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Increase specificity of product data views styles to avoid conflicts.
diff --git a/packages/js/product-editor/changelog/fix-toggle-misspelling-in-class-names b/packages/js/product-editor/changelog/fix-toggle-misspelling-in-class-names
deleted file mode 100644
index cdef9bd7270..00000000000
--- a/packages/js/product-editor/changelog/fix-toggle-misspelling-in-class-names
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: tweak
-
-Fix toogle typo in class names
diff --git a/packages/js/product-editor/changelog/fix-variation-changes b/packages/js/product-editor/changelog/fix-variation-changes
deleted file mode 100644
index f296d11735c..00000000000
--- a/packages/js/product-editor/changelog/fix-variation-changes
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix crash when switching between product variations
diff --git a/packages/js/product-editor/changelog/performance-47602-use-clx b/packages/js/product-editor/changelog/performance-47602-use-clx
deleted file mode 100644
index 4626c19db89..00000000000
--- a/packages/js/product-editor/changelog/performance-47602-use-clx
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Monorepo: complete migration from `classnames` package to `clsx`.
diff --git a/packages/js/product-editor/changelog/poc-unique_id_field b/packages/js/product-editor/changelog/poc-unique_id_field
deleted file mode 100644
index f73a1290bad..00000000000
--- a/packages/js/product-editor/changelog/poc-unique_id_field
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Handle unique id error message
diff --git a/packages/js/product-editor/changelog/remove-product-editor-template-system-flag b/packages/js/product-editor/changelog/remove-product-editor-template-system-flag
deleted file mode 100644
index a960a747e60..00000000000
--- a/packages/js/product-editor/changelog/remove-product-editor-template-system-flag
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Remove the disabled product editor template system feature flag.
diff --git a/packages/js/product-editor/changelog/remove-product-pre-publish-modal-flag b/packages/js/product-editor/changelog/remove-product-pre-publish-modal-flag
deleted file mode 100644
index 7ca7b50eac6..00000000000
--- a/packages/js/product-editor/changelog/remove-product-pre-publish-modal-flag
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Remove the disabled product pre-publish modal feature flag.
diff --git a/packages/js/product-editor/changelog/task-update-eslint-config b/packages/js/product-editor/changelog/task-update-eslint-config
deleted file mode 100644
index 8ae14600452..00000000000
--- a/packages/js/product-editor/changelog/task-update-eslint-config
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Remove unused React imports
diff --git a/packages/js/product-editor/changelog/try-detect-save-via-product-editor b/packages/js/product-editor/changelog/try-detect-save-via-product-editor
deleted file mode 100644
index 4384e10fbde..00000000000
--- a/packages/js/product-editor/changelog/try-detect-save-via-product-editor
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add X-Wc-From-Product-Editor HTTP header for REST requests made by the product editor.
diff --git a/packages/js/product-editor/changelog/tweak-number-control b/packages/js/product-editor/changelog/tweak-number-control
deleted file mode 100644
index 5a688653bea..00000000000
--- a/packages/js/product-editor/changelog/tweak-number-control
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Add improvements to NumberControl, using it in Shipping numbers and manage download limits
diff --git a/packages/js/product-editor/changelog/tweak-select-tree-2 b/packages/js/product-editor/changelog/tweak-select-tree-2
deleted file mode 100644
index 82314a6b4f2..00000000000
--- a/packages/js/product-editor/changelog/tweak-select-tree-2
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Add 'help' to taxonomy block and to SelectTree
diff --git a/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align b/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align
deleted file mode 100644
index bdd528b8632..00000000000
--- a/packages/js/product-editor/changelog/tweak-variations-checkbox-border-wp7-align
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Remove redundant variations table checkbox border-color override; inherit Gutenberg's WP 7.0 CheckboxControl default ($gray-900).
diff --git a/packages/js/product-editor/changelog/tweak-variations-notice-styling b/packages/js/product-editor/changelog/tweak-variations-notice-styling
deleted file mode 100644
index 60cb1c5becc..00000000000
--- a/packages/js/product-editor/changelog/tweak-variations-notice-styling
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: tweak
-Comment: Adjust spacings for variations table notice
-
-
diff --git a/packages/js/product-editor/changelog/update-59804 b/packages/js/product-editor/changelog/update-59804
deleted file mode 100644
index 5a1702a76a3..00000000000
--- a/packages/js/product-editor/changelog/update-59804
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Bump jest package dependency to 29.5.x
diff --git a/packages/js/product-editor/changelog/update-abrev-global-unique-id b/packages/js/product-editor/changelog/update-abrev-global-unique-id
deleted file mode 100644
index f79328e4f97..00000000000
--- a/packages/js/product-editor/changelog/update-abrev-global-unique-id
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Allow abbr tags and title attributes in sanitized HTML
diff --git a/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically b/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically
deleted file mode 100644
index 93ba465aaea..00000000000
--- a/packages/js/product-editor/changelog/update-create-shipping-classes-optimistically
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: load and create shipping classes optimistically
diff --git a/packages/js/product-editor/changelog/update-dataviews_package b/packages/js/product-editor/changelog/update-dataviews_package
deleted file mode 100644
index c1eb32092ed..00000000000
--- a/packages/js/product-editor/changelog/update-dataviews_package
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update @wordpress/dataviews package and fix class names for products dataviews app.
diff --git a/packages/js/product-editor/changelog/update-e2e-product-editor-create-simple-product b/packages/js/product-editor/changelog/update-e2e-product-editor-create-simple-product
deleted file mode 100644
index 6b01942f83b..00000000000
--- a/packages/js/product-editor/changelog/update-e2e-product-editor-create-simple-product
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix association of label and input for SKU field.
diff --git a/packages/js/product-editor/changelog/update-export-product-edits b/packages/js/product-editor/changelog/update-export-product-edits
deleted file mode 100644
index e1a5f90bffd..00000000000
--- a/packages/js/product-editor/changelog/update-export-product-edits
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Export useProductEdits hook
diff --git a/packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal b/packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal
deleted file mode 100644
index 76eaae0adb8..00000000000
--- a/packages/js/product-editor/changelog/update-fix-performance-issues-in-attributes-modal
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Product Block Editor: fix perfomance issue when rendering thousands of attributes in the attributes modal
diff --git a/packages/js/product-editor/changelog/update-introduce-attributes-combobox-control b/packages/js/product-editor/changelog/update-introduce-attributes-combobox-control
deleted file mode 100644
index e923ac2e4b7..00000000000
--- a/packages/js/product-editor/changelog/update-introduce-attributes-combobox-control
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: add
-
-Product Block Editor: introduce AttributesComboboxControl component
diff --git a/packages/js/product-editor/changelog/update-introduce-optimistc-query-update b/packages/js/product-editor/changelog/update-introduce-optimistc-query-update
deleted file mode 100644
index 13ffdeb95e5..00000000000
--- a/packages/js/product-editor/changelog/update-introduce-optimistc-query-update
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: add
-
-Data: introduce optimisticQueryUpdate create item option
diff --git a/packages/js/product-editor/changelog/update-move-logic-to-add-new-attribute b/packages/js/product-editor/changelog/update-move-logic-to-add-new-attribute
deleted file mode 100644
index b27fea0fb10..00000000000
--- a/packages/js/product-editor/changelog/update-move-logic-to-add-new-attribute
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: move logic to add new attributes to modal component
diff --git a/packages/js/product-editor/changelog/update-navigation-while-on-input b/packages/js/product-editor/changelog/update-navigation-while-on-input
deleted file mode 100644
index f1e08a7c3ae..00000000000
--- a/packages/js/product-editor/changelog/update-navigation-while-on-input
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Allow popovers to exceed modal's limits in taxonomy
diff --git a/packages/js/product-editor/changelog/update-number-control-improvements b/packages/js/product-editor/changelog/update-number-control-improvements
deleted file mode 100644
index feb0626ac77..00000000000
--- a/packages/js/product-editor/changelog/update-number-control-improvements
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update number control to not allow invalid values through arrow keys or buttons
diff --git a/packages/js/product-editor/changelog/update-pft-populate-template-selector b/packages/js/product-editor/changelog/update-pft-populate-template-selector
deleted file mode 100644
index 7748ac24d1d..00000000000
--- a/packages/js/product-editor/changelog/update-pft-populate-template-selector
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: populate the template selector with the product form templates
diff --git a/packages/js/product-editor/changelog/update-pnpm-10-upgrade b/packages/js/product-editor/changelog/update-pnpm-10-upgrade
deleted file mode 100644
index 06fa4b8bf68..00000000000
--- a/packages/js/product-editor/changelog/update-pnpm-10-upgrade
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update @wordpress/* peerDependencies from dist-tags to semver ranges for pnpm 10 compatibility.
diff --git a/packages/js/product-editor/changelog/update-populate-attribute-terms-optimistically b/packages/js/product-editor/changelog/update-populate-attribute-terms-optimistically
deleted file mode 100644
index 3d68d397411..00000000000
--- a/packages/js/product-editor/changelog/update-populate-attribute-terms-optimistically
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: polish the UX when adding new attribute options (terms) from the Variations section
diff --git a/packages/js/product-editor/changelog/update-product-attribute-types b/packages/js/product-editor/changelog/update-product-attribute-types
deleted file mode 100644
index 7fd0dd3220c..00000000000
--- a/packages/js/product-editor/changelog/update-product-attribute-types
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: update code to data TS changes
diff --git a/packages/js/product-editor/changelog/update-product-description-mobile b/packages/js/product-editor/changelog/update-product-description-mobile
deleted file mode 100644
index 41242c52c19..00000000000
--- a/packages/js/product-editor/changelog/update-product-description-mobile
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update description editing for mobile
diff --git a/packages/js/product-editor/changelog/update-product-editor-add-new-attribute-iteration b/packages/js/product-editor/changelog/update-product-editor-add-new-attribute-iteration
deleted file mode 100644
index fd1aa9e6244..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-add-new-attribute-iteration
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: improve the process when creating a new attribute
diff --git a/packages/js/product-editor/changelog/update-product-editor-attribute-types b/packages/js/product-editor/changelog/update-product-editor-attribute-types
deleted file mode 100644
index 72609e884ac..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-attribute-types
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: tidy product attribute types
diff --git a/packages/js/product-editor/changelog/update-product-editor-creating-shipping-class-a11y-enhancements b/packages/js/product-editor/changelog/update-product-editor-creating-shipping-class-a11y-enhancements
deleted file mode 100644
index 2a64e2cc95d..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-creating-shipping-class-a11y-enhancements
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Product Block Editor: improve a11y when creating a new Shipping class
diff --git a/packages/js/product-editor/changelog/update-product-editor-description-editor-skeleton b/packages/js/product-editor/changelog/update-product-editor-description-editor-skeleton
deleted file mode 100644
index 86528811021..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-description-editor-skeleton
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Added support for extension sidebars in modal block editor (description field).
diff --git a/packages/js/product-editor/changelog/update-product-editor-disable-add-button-when-no-attributes b/packages/js/product-editor/changelog/update-product-editor-disable-add-button-when-no-attributes
deleted file mode 100644
index 66f0660cb2e..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-disable-add-button-when-no-attributes
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Editor: disable `Add` button when no terms or options when creating variations
diff --git a/packages/js/product-editor/changelog/update-product-editor-doc-more-menu-slotfill b/packages/js/product-editor/changelog/update-product-editor-doc-more-menu-slotfill
deleted file mode 100644
index 70e42b82a27..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-doc-more-menu-slotfill
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: add
-
-Product Editor: document WooProductMoreMenuItem slotFill component
diff --git a/packages/js/product-editor/changelog/update-product-editor-dont-invalidate-when-creating-new-attribute b/packages/js/product-editor/changelog/update-product-editor-dont-invalidate-when-creating-new-attribute
deleted file mode 100644
index 5d6b4244c6b..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-dont-invalidate-when-creating-new-attribute
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-[Product Block Editor]: update the attributes list optimistically when a new attribute is created
diff --git a/packages/js/product-editor/changelog/update-product-editor-filter-linked-products-only-when-tab-selected b/packages/js/product-editor/changelog/update-product-editor-filter-linked-products-only-when-tab-selected
deleted file mode 100644
index 4e4f6f6dd7b..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-filter-linked-products-only-when-tab-selected
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: request initil linked-products request only when tab is selected
diff --git a/packages/js/product-editor/changelog/update-product-editor-fix-requesting-terms-issue b/packages/js/product-editor/changelog/update-product-editor-fix-requesting-terms-issue
deleted file mode 100644
index ed81022e9d5..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-fix-requesting-terms-issue
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Product Editor: fix issue when requesting attribute terms in the New Attributes modal
diff --git a/packages/js/product-editor/changelog/update-product-editor-generic-blocks-doc b/packages/js/product-editor/changelog/update-product-editor-generic-blocks-doc
deleted file mode 100644
index b493b72669b..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-generic-blocks-doc
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Just a minor change to the doc
-
-
diff --git a/packages/js/product-editor/changelog/update-product-editor-handle-shipping-classes-slug b/packages/js/product-editor/changelog/update-product-editor-handle-shipping-classes-slug
deleted file mode 100644
index e643e4fd648..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-handle-shipping-classes-slug
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: add
-
-Product Block Editor: populate shipping class slug automatically
diff --git a/packages/js/product-editor/changelog/update-product-editor-increase-attribute-row-according-to-options b/packages/js/product-editor/changelog/update-product-editor-increase-attribute-row-according-to-options
deleted file mode 100644
index 54fc686ef71..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-increase-attribute-row-according-to-options
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: change attribute row based on the form token field component
diff --git a/packages/js/product-editor/changelog/update-product-editor-increase-loading-terms-number-per-request b/packages/js/product-editor/changelog/update-product-editor-increase-loading-terms-number-per-request
deleted file mode 100644
index f6d78cbaa3a..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-increase-loading-terms-number-per-request
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Editor: Increase the number of terms per request to 100
diff --git a/packages/js/product-editor/changelog/update-product-editor-render-new-attribute-right-after-selected b/packages/js/product-editor/changelog/update-product-editor-render-new-attribute-right-after-selected
deleted file mode 100644
index cea7433f058..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-render-new-attribute-right-after-selected
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-[Product Block Editor]: when adding a new attribute, show selected item right after user clicks on it
diff --git a/packages/js/product-editor/changelog/update-product-editor-reorganize-attributes-data b/packages/js/product-editor/changelog/update-product-editor-reorganize-attributes-data
deleted file mode 100644
index d1c4acbb599..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-reorganize-attributes-data
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-[Product Block Editor]: move logic to pull product attributes from Selector to Modal component
diff --git a/packages/js/product-editor/changelog/update-product-editor-retrieves-templates-from-cpt b/packages/js/product-editor/changelog/update-product-editor-retrieves-templates-from-cpt
deleted file mode 100644
index 11c4e3c4310..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-retrieves-templates-from-cpt
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-PFT: retrieve and render the product form templates
diff --git a/packages/js/product-editor/changelog/update-product-editor-show-help-in-the-terms-component b/packages/js/product-editor/changelog/update-product-editor-show-help-in-the-terms-component
deleted file mode 100644
index 3e64bb36345..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-show-help-in-the-terms-component
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Show and locate help for the attribute terms component
diff --git a/packages/js/product-editor/changelog/update-product-editor-tweak-attributes-layout b/packages/js/product-editor/changelog/update-product-editor-tweak-attributes-layout
deleted file mode 100644
index 976c90a6289..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-tweak-attributes-layout
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: tweak styles/layout of attribute modal implementation
diff --git a/packages/js/product-editor/changelog/update-product-editor-tweak-form-fields-gap b/packages/js/product-editor/changelog/update-product-editor-tweak-form-fields-gap
deleted file mode 100644
index 9632466212e..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-tweak-form-fields-gap
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Product Block Editor: tweak the gap between the form field blocks
diff --git a/packages/js/product-editor/changelog/update-product-editor-use-token-field-for-terms b/packages/js/product-editor/changelog/update-product-editor-use-token-field-for-terms
deleted file mode 100644
index f47caba6517..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-use-token-field-for-terms
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: use FormTokenField component for the attribute terms
diff --git a/packages/js/product-editor/changelog/update-product-editor-validate-term-tokens b/packages/js/product-editor/changelog/update-product-editor-validate-term-tokens
deleted file mode 100644
index 8b3c77267ad..00000000000
--- a/packages/js/product-editor/changelog/update-product-editor-validate-term-tokens
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Product Editor: fix issue when trying to create same terms with different cases
diff --git a/packages/js/product-editor/changelog/update-product_editor_naming b/packages/js/product-editor/changelog/update-product_editor_naming
deleted file mode 100644
index 49730420ecd..00000000000
--- a/packages/js/product-editor/changelog/update-product_editor_naming
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Update copy from 'form' to 'editor' to match documentation.
diff --git a/packages/js/product-editor/changelog/update-remove-media-library b/packages/js/product-editor/changelog/update-remove-media-library
deleted file mode 100644
index dcfe9bf404c..00000000000
--- a/packages/js/product-editor/changelog/update-remove-media-library
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Remove Media Library menu item from Downloads section
diff --git a/packages/js/product-editor/changelog/update-replace-with-combobox b/packages/js/product-editor/changelog/update-replace-with-combobox
deleted file mode 100644
index b77824b7358..00000000000
--- a/packages/js/product-editor/changelog/update-replace-with-combobox
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Product Block Editor: replace custom select with the combobox control core component in the product attributes
diff --git a/packages/js/product-editor/changelog/update-storybook_documentation b/packages/js/product-editor/changelog/update-storybook_documentation
deleted file mode 100644
index 05f67e6a3de..00000000000
--- a/packages/js/product-editor/changelog/update-storybook_documentation
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Update storybook stories name prefixes for consistency.
diff --git a/packages/js/product-editor/changelog/update-stricter-global-unique-id b/packages/js/product-editor/changelog/update-stricter-global-unique-id
deleted file mode 100644
index 02752f58d56..00000000000
--- a/packages/js/product-editor/changelog/update-stricter-global-unique-id
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix an issue in the text block where the validation was not being run due to missing dependencies in the parameters
diff --git a/packages/js/product-editor/changelog/update-wp-68-context-types b/packages/js/product-editor/changelog/update-wp-68-context-types
deleted file mode 100644
index 32bd1219d85..00000000000
--- a/packages/js/product-editor/changelog/update-wp-68-context-types
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: major
-Type: update
-
-ProductEditorContext now extends Record<string, unknown> to satisfy BlockEditProps.context in @types/wordpress__blocks@12.5.18.
diff --git a/packages/js/product-editor/changelog/update-wp-68-media-types b/packages/js/product-editor/changelog/update-wp-68-media-types
deleted file mode 100644
index 12877613431..00000000000
--- a/packages/js/product-editor/changelog/update-wp-68-media-types
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: major
-Type: update
-
-Replace MediaItem with native Attachment from @wordpress/media-utils throughout media and image components.
diff --git a/packages/js/product-editor/changelog/update-wp-68-packages b/packages/js/product-editor/changelog/update-wp-68-packages
deleted file mode 100644
index b767224f371..00000000000
--- a/packages/js/product-editor/changelog/update-wp-68-packages
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: major
-Type: update
-
-Update @wordpress/* dependencies to wp-6.8 minimum. Remove @types/wordpress__date, @types/wordpress__editor, @types/wordpress__keycodes, @types/wordpress__media-utils, and @types/wordpress__rich-text (native types at wp-6.8).
diff --git a/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow b/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow
deleted file mode 100644
index 579b91e0c80..00000000000
--- a/packages/js/product-editor/changelog/upgrade-storybook_and_add_pages_workflow
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Update storybook file format in support with Storybook 7 story indexer.
diff --git a/packages/js/product-editor/composer.json b/packages/js/product-editor/composer.json
deleted file mode 100644
index 77b1501f42a..00000000000
--- a/packages/js/product-editor/composer.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "name": "woocommerce/product-editor",
- "description": "WooCommerce Admin product editor component library",
- "type": "library",
- "license": "GPL-2.0-or-later",
- "minimum-stability": "dev",
- "require-dev": {
- "automattic/jetpack-changelogger": "3.3.0"
- },
- "config": {
- "platform": {
- "php": "7.4"
- }
- },
- "extra": {
- "changelogger": {
- "formatter": {
- "filename": "../../../tools/changelogger/class-package-formatter.php"
- },
- "types": {
- "fix": "Fixes an existing bug",
- "add": "Adds functionality",
- "update": "Update existing functionality",
- "dev": "Development related task",
- "tweak": "A minor adjustment to the codebase",
- "performance": "Address performance issues",
- "enhancement": "Improve existing functionality"
- },
- "changelog": "CHANGELOG.md"
- }
- }
-}
diff --git a/packages/js/product-editor/composer.lock b/packages/js/product-editor/composer.lock
deleted file mode 100644
index 5e556e964b2..00000000000
--- a/packages/js/product-editor/composer.lock
+++ /dev/null
@@ -1,1084 +0,0 @@
-{
- "_readme": [
- "This file locks the dependencies of your project to a known state",
- "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
- "This file is @generated automatically"
- ],
- "content-hash": "5e38beafcf5f4591a92b3fa8c03137df",
- "packages": [],
- "packages-dev": [
- {
- "name": "automattic/jetpack-changelogger",
- "version": "v3.3.0",
- "source": {
- "type": "git",
- "url": "https://github.com/Automattic/jetpack-changelogger.git",
- "reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/Automattic/jetpack-changelogger/zipball/8f63c829b8d1b0d7b1d5de93510d78523ed18959",
- "reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959",
- "shasum": ""
- },
- "require": {
- "php": ">=5.6",
- "symfony/console": "^3.4 || ^5.2 || ^6.0",
- "symfony/process": "^3.4 || ^5.2 || ^6.0",
- "wikimedia/at-ease": "^1.2 || ^2.0"
- },
- "require-dev": {
- "wikimedia/testing-access-wrapper": "^1.0 || ^2.0",
- "yoast/phpunit-polyfills": "1.0.4"
- },
- "bin": [
- "bin/changelogger"
- ],
- "type": "project",
- "extra": {
- "autotagger": true,
- "mirror-repo": "Automattic/jetpack-changelogger",
- "branch-alias": {
- "dev-trunk": "3.3.x-dev"
- },
- "changelogger": {
- "link-template": "https://github.com/Automattic/jetpack-changelogger/compare/${old}...${new}"
- },
- "version-constants": {
- "::VERSION": "src/Application.php"
- }
- },
- "autoload": {
- "psr-4": {
- "Automattic\\Jetpack\\Changelog\\": "lib",
- "Automattic\\Jetpack\\Changelogger\\": "src"
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "GPL-2.0-or-later"
- ],
- "description": "Jetpack Changelogger tool. Allows for managing changelogs by dropping change files into a changelog directory with each PR.",
- "support": {
- "source": "https://github.com/Automattic/jetpack-changelogger/tree/v3.3.0"
- },
- "time": "2022-12-26T13:49:01+00:00"
- },
- {
- "name": "psr/container",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/php-fig/container.git",
- "reference": "513e0666f7216c7459170d56df27dfcefe1689ea"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/php-fig/container/zipball/513e0666f7216c7459170d56df27dfcefe1689ea",
- "reference": "513e0666f7216c7459170d56df27dfcefe1689ea",
- "shasum": ""
- },
- "require": {
- "php": ">=7.4.0"
- },
- "type": "library",
- "autoload": {
- "psr-4": {
- "Psr\\Container\\": "src/"
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "PHP-FIG",
- "homepage": "https://www.php-fig.org/"
- }
- ],
- "description": "Common Container Interface (PHP FIG PSR-11)",
- "homepage": "https://github.com/php-fig/container",
- "keywords": [
- "PSR-11",
- "container",
- "container-interface",
- "container-interop",
- "psr"
- ],
- "support": {
- "issues": "https://github.com/php-fig/container/issues",
- "source": "https://github.com/php-fig/container/tree/1.1.2"
- },
- "time": "2021-11-05T16:50:12+00:00"
- },
- {
- "name": "symfony/console",
- "version": "5.4.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/console.git",
- "reference": "c4ba980ca61a9eb18ee6bcc73f28e475852bb1ed"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/console/zipball/c4ba980ca61a9eb18ee6bcc73f28e475852bb1ed",
- "reference": "c4ba980ca61a9eb18ee6bcc73f28e475852bb1ed",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2.5",
- "symfony/deprecation-contracts": "^2.1|^3",
- "symfony/polyfill-mbstring": "~1.0",
- "symfony/polyfill-php73": "^1.9",
- "symfony/polyfill-php80": "^1.16",
- "symfony/service-contracts": "^1.1|^2|^3",
- "symfony/string": "^5.1|^6.0"
- },
- "conflict": {
- "psr/log": ">=3",
- "symfony/dependency-injection": "<4.4",
- "symfony/dotenv": "<5.1",
- "symfony/event-dispatcher": "<4.4",
- "symfony/lock": "<4.4",
- "symfony/process": "<4.4"
- },
- "provide": {
- "psr/log-implementation": "1.0|2.0"
- },
- "require-dev": {
- "psr/log": "^1|^2",
- "symfony/config": "^4.4|^5.0|^6.0",
- "symfony/dependency-injection": "^4.4|^5.0|^6.0",
- "symfony/event-dispatcher": "^4.4|^5.0|^6.0",
- "symfony/lock": "^4.4|^5.0|^6.0",
- "symfony/process": "^4.4|^5.0|^6.0",
- "symfony/var-dumper": "^4.4|^5.0|^6.0"
- },
- "suggest": {
- "psr/log": "For using the console logger",
- "symfony/event-dispatcher": "",
- "symfony/lock": "",
- "symfony/process": ""
- },
- "type": "library",
- "autoload": {
- "psr-4": {
- "Symfony\\Component\\Console\\": ""
- },
- "exclude-from-classmap": [
- "/Tests/"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Fabien Potencier",
- "email": "fabien@symfony.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Eases the creation of beautiful and testable command line interfaces",
- "homepage": "https://symfony.com",
- "keywords": [
- "cli",
- "command-line",
- "console",
- "terminal"
- ],
- "support": {
- "source": "https://github.com/symfony/console/tree/5.4"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-11-06T11:30:55+00:00"
- },
- {
- "name": "symfony/deprecation-contracts",
- "version": "2.5.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/deprecation-contracts.git",
- "reference": "605389f2a7e5625f273b53960dc46aeaf9c62918"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/605389f2a7e5625f273b53960dc46aeaf9c62918",
- "reference": "605389f2a7e5625f273b53960dc46aeaf9c62918",
- "shasum": ""
- },
- "require": {
- "php": ">=7.1"
- },
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/contracts",
- "name": "symfony/contracts"
- },
- "branch-alias": {
- "dev-main": "2.5-dev"
- }
- },
- "autoload": {
- "files": [
- "function.php"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "A generic function and convention to trigger deprecation notices",
- "homepage": "https://symfony.com",
- "support": {
- "source": "https://github.com/symfony/deprecation-contracts/tree/2.5"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-09-25T14:11:13+00:00"
- },
- {
- "name": "symfony/polyfill-ctype",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-ctype.git",
- "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/a3cc8b044a6ea513310cbd48ef7333b384945638",
- "reference": "a3cc8b044a6ea513310cbd48ef7333b384945638",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2"
- },
- "provide": {
- "ext-ctype": "*"
- },
- "suggest": {
- "ext-ctype": "For best performance"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Ctype\\": ""
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Gert de Pagter",
- "email": "BackEndTea@gmail.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill for ctype functions",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "ctype",
- "polyfill",
- "portable"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-ctype/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-09-09T11:45:10+00:00"
- },
- {
- "name": "symfony/polyfill-intl-grapheme",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-intl-grapheme.git",
- "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/380872130d3a5dd3ace2f4010d95125fde5d5c70",
- "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2"
- },
- "suggest": {
- "ext-intl": "For best performance"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Intl\\Grapheme\\": ""
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill for intl's grapheme_* functions",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "grapheme",
- "intl",
- "polyfill",
- "portable",
- "shim"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2025-06-27T09:58:17+00:00"
- },
- {
- "name": "symfony/polyfill-intl-normalizer",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-intl-normalizer.git",
- "reference": "3833d7255cc303546435cb650316bff708a1c75c"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-intl-normalizer/zipball/3833d7255cc303546435cb650316bff708a1c75c",
- "reference": "3833d7255cc303546435cb650316bff708a1c75c",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2"
- },
- "suggest": {
- "ext-intl": "For best performance"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Intl\\Normalizer\\": ""
- },
- "classmap": [
- "Resources/stubs"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill for intl's Normalizer class and related functions",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "intl",
- "normalizer",
- "polyfill",
- "portable",
- "shim"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-09-09T11:45:10+00:00"
- },
- {
- "name": "symfony/polyfill-mbstring",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-mbstring.git",
- "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/6d857f4d76bd4b343eac26d6b539585d2bc56493",
- "reference": "6d857f4d76bd4b343eac26d6b539585d2bc56493",
- "shasum": ""
- },
- "require": {
- "ext-iconv": "*",
- "php": ">=7.2"
- },
- "provide": {
- "ext-mbstring": "*"
- },
- "suggest": {
- "ext-mbstring": "For best performance"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Mbstring\\": ""
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill for the Mbstring extension",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "mbstring",
- "polyfill",
- "portable",
- "shim"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-12-23T08:48:59+00:00"
- },
- {
- "name": "symfony/polyfill-php73",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-php73.git",
- "reference": "0f68c03565dcaaf25a890667542e8bd75fe7e5bb"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-php73/zipball/0f68c03565dcaaf25a890667542e8bd75fe7e5bb",
- "reference": "0f68c03565dcaaf25a890667542e8bd75fe7e5bb",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Php73\\": ""
- },
- "classmap": [
- "Resources/stubs"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "polyfill",
- "portable",
- "shim"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-php73/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-09-09T11:45:10+00:00"
- },
- {
- "name": "symfony/polyfill-php80",
- "version": "1.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/polyfill-php80.git",
- "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
- "reference": "0cc9dd0f17f61d8131e7df6b84bd344899fe2608",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2"
- },
- "default-branch": true,
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/polyfill",
- "name": "symfony/polyfill"
- }
- },
- "autoload": {
- "files": [
- "bootstrap.php"
- ],
- "psr-4": {
- "Symfony\\Polyfill\\Php80\\": ""
- },
- "classmap": [
- "Resources/stubs"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Ion Bazan",
- "email": "ion.bazan@gmail.com"
- },
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
- "homepage": "https://symfony.com",
- "keywords": [
- "compatibility",
- "polyfill",
- "portable",
- "shim"
- ],
- "support": {
- "source": "https://github.com/symfony/polyfill-php80/tree/v1.33.0"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://github.com/nicolas-grekas",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2025-01-02T08:10:11+00:00"
- },
- {
- "name": "symfony/process",
- "version": "5.4.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/process.git",
- "reference": "5d1662fb32ebc94f17ddb8d635454a776066733d"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/process/zipball/5d1662fb32ebc94f17ddb8d635454a776066733d",
- "reference": "5d1662fb32ebc94f17ddb8d635454a776066733d",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2.5",
- "symfony/polyfill-php80": "^1.16"
- },
- "type": "library",
- "autoload": {
- "psr-4": {
- "Symfony\\Component\\Process\\": ""
- },
- "exclude-from-classmap": [
- "/Tests/"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Fabien Potencier",
- "email": "fabien@symfony.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Executes commands in sub-processes",
- "homepage": "https://symfony.com",
- "support": {
- "source": "https://github.com/symfony/process/tree/5.4"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-11-06T11:36:42+00:00"
- },
- {
- "name": "symfony/service-contracts",
- "version": "2.5.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/service-contracts.git",
- "reference": "f37b419f7aea2e9abf10abd261832cace12e3300"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/service-contracts/zipball/f37b419f7aea2e9abf10abd261832cace12e3300",
- "reference": "f37b419f7aea2e9abf10abd261832cace12e3300",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2.5",
- "psr/container": "^1.1",
- "symfony/deprecation-contracts": "^2.1|^3"
- },
- "conflict": {
- "ext-psr": "<1.1|>=2"
- },
- "suggest": {
- "symfony/service-implementation": ""
- },
- "type": "library",
- "extra": {
- "thanks": {
- "url": "https://github.com/symfony/contracts",
- "name": "symfony/contracts"
- },
- "branch-alias": {
- "dev-main": "2.5-dev"
- }
- },
- "autoload": {
- "psr-4": {
- "Symfony\\Contracts\\Service\\": ""
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Generic abstractions related to writing services",
- "homepage": "https://symfony.com",
- "keywords": [
- "abstractions",
- "contracts",
- "decoupling",
- "interfaces",
- "interoperability",
- "standards"
- ],
- "support": {
- "source": "https://github.com/symfony/service-contracts/tree/2.5"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-09-25T14:11:13+00:00"
- },
- {
- "name": "symfony/string",
- "version": "5.4.x-dev",
- "source": {
- "type": "git",
- "url": "https://github.com/symfony/string.git",
- "reference": "136ca7d72f72b599f2631aca474a4f8e26719799"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/symfony/string/zipball/136ca7d72f72b599f2631aca474a4f8e26719799",
- "reference": "136ca7d72f72b599f2631aca474a4f8e26719799",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2.5",
- "symfony/polyfill-ctype": "~1.8",
- "symfony/polyfill-intl-grapheme": "~1.0",
- "symfony/polyfill-intl-normalizer": "~1.0",
- "symfony/polyfill-mbstring": "~1.0",
- "symfony/polyfill-php80": "~1.15"
- },
- "conflict": {
- "symfony/translation-contracts": ">=3.0"
- },
- "require-dev": {
- "symfony/error-handler": "^4.4|^5.0|^6.0",
- "symfony/http-client": "^4.4|^5.0|^6.0",
- "symfony/translation-contracts": "^1.1|^2",
- "symfony/var-exporter": "^4.4|^5.0|^6.0"
- },
- "type": "library",
- "autoload": {
- "files": [
- "Resources/functions.php"
- ],
- "psr-4": {
- "Symfony\\Component\\String\\": ""
- },
- "exclude-from-classmap": [
- "/Tests/"
- ]
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "MIT"
- ],
- "authors": [
- {
- "name": "Nicolas Grekas",
- "email": "p@tchwork.com"
- },
- {
- "name": "Symfony Community",
- "homepage": "https://symfony.com/contributors"
- }
- ],
- "description": "Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way",
- "homepage": "https://symfony.com",
- "keywords": [
- "grapheme",
- "i18n",
- "string",
- "unicode",
- "utf-8",
- "utf8"
- ],
- "support": {
- "source": "https://github.com/symfony/string/tree/5.4"
- },
- "funding": [
- {
- "url": "https://symfony.com/sponsor",
- "type": "custom"
- },
- {
- "url": "https://github.com/fabpot",
- "type": "github"
- },
- {
- "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
- "type": "tidelift"
- }
- ],
- "time": "2024-11-10T20:33:58+00:00"
- },
- {
- "name": "wikimedia/at-ease",
- "version": "v2.1.0",
- "source": {
- "type": "git",
- "url": "https://github.com/wikimedia/at-ease.git",
- "reference": "e8ebaa7bb7c8a8395481a05f6dc4deaceab11c33"
- },
- "dist": {
- "type": "zip",
- "url": "https://api.github.com/repos/wikimedia/at-ease/zipball/e8ebaa7bb7c8a8395481a05f6dc4deaceab11c33",
- "reference": "e8ebaa7bb7c8a8395481a05f6dc4deaceab11c33",
- "shasum": ""
- },
- "require": {
- "php": ">=7.2.9"
- },
- "require-dev": {
- "mediawiki/mediawiki-codesniffer": "35.0.0",
- "mediawiki/minus-x": "1.1.1",
- "ockcyp/covers-validator": "1.3.3",
- "php-parallel-lint/php-console-highlighter": "0.5.0",
- "php-parallel-lint/php-parallel-lint": "1.2.0",
- "phpunit/phpunit": "^8.5"
- },
- "type": "library",
- "autoload": {
- "files": [
- "src/Wikimedia/Functions.php"
- ],
- "psr-4": {
- "Wikimedia\\AtEase\\": "src/Wikimedia/AtEase/"
- }
- },
- "notification-url": "https://packagist.org/downloads/",
- "license": [
- "GPL-2.0-or-later"
- ],
- "authors": [
- {
- "name": "Tim Starling",
- "email": "tstarling@wikimedia.org"
- },
- {
- "name": "MediaWiki developers",
- "email": "wikitech-l@lists.wikimedia.org"
- }
- ],
- "description": "Safe replacement to @ for suppressing warnings.",
- "homepage": "https://www.mediawiki.org/wiki/at-ease",
- "support": {
- "source": "https://github.com/wikimedia/at-ease/tree/v2.1.0"
- },
- "time": "2021-02-27T15:53:37+00:00"
- }
- ],
- "aliases": [],
- "minimum-stability": "dev",
- "stability-flags": {},
- "prefer-stable": false,
- "prefer-lowest": false,
- "platform": {},
- "platform-dev": {},
- "platform-overrides": {
- "php": "7.4"
- },
- "plugin-api-version": "2.6.0"
-}
diff --git a/packages/js/product-editor/config/block-entry-points.js b/packages/js/product-editor/config/block-entry-points.js
deleted file mode 100644
index f54cfb58ba8..00000000000
--- a/packages/js/product-editor/config/block-entry-points.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' );
-const path = require( 'path' );
-const { sync: glob } = require( 'fast-glob' );
-
-const srcDir = path.resolve( __dirname, '..', 'src' );
-const blocksBuildDir = '/build/blocks';
-
-/**
- * Get all the block meta data files in the src directory.
- *
- * @return {string[]} Block file paths.
- */
-const getBlockMetaDataFiles = () => {
- return glob( `${ srcDir.replace( /\\/g, '/' ) }/**/block.json`, {
- absolute: true,
- } );
-};
-
-/**
- * Get the block meta data from a block.json file.
- *
- * @param {string} filePath File path to block.json file.
- * @return {Object} Block meta data.
- */
-const getBlockMetaData = ( filePath ) => {
- return JSON.parse( fs.readFileSync( filePath ) );
-};
-
-/**
- * Get the block file assets with raw file paths.
- *
- * @param {Object} blockMetaData
- * @return {string[]} Asset file paths.
- */
-const getBlockFileAssets = ( blockMetaData ) => {
- const { editorScript, script, viewScript, style, editorStyle } =
- blockMetaData;
-
- return [ editorScript, script, viewScript, style, editorStyle ]
- .flat()
- .filter(
- ( rawFilepath ) => rawFilepath && rawFilepath.startsWith( 'file:' )
- );
-};
-
-/**
- * Get the block name from the meta data, removing the `woocommerce/` namespace.
- *
- * @param {Object} blockMetaData
- * @return {string} Block name.
- */
-const getBlockName = ( blockMetaData ) => {
- return blockMetaData.name.split( '/' ).at( 1 );
-};
-
-/**
- * Get the entry point name.
- *
- * @param {string} entryFilePath
- * @param {Object} blockMetaData
- * @return {string} The entry point name.
- */
-const getEntryPointName = ( entryFilePath, blockMetaData ) => {
- const filePathParts = entryFilePath
- .split( '/' )
- .filter( ( dir ) => dir !== 'blocks' );
- filePathParts[ filePathParts.length - 2 ] = getBlockName( blockMetaData );
- return filePathParts
- .join( '/' )
- .replace( srcDir, blocksBuildDir )
- .replace( '/components', '' );
-};
-
-/**
- * Get the entry file path.
- *
- * @param {string} rawFilepath Raw file path from the block.json file.
- * @param {*} dir The directory the block exists in.
- * @return {string} Entry file path.
- */
-const getEntryFilePath = ( rawFilepath, dir ) => {
- const filepath = path.join( dir, rawFilepath.replace( 'file:', '' ) );
-
- return filepath
- .replace( path.extname( filepath ), '' )
- .replace( /\\/g, '/' );
-};
-
-/**
- * Gets the absolute file path based on the entry file path, including the extension.
- *
- * @param {string} entryFilePath Entry file path.
- * @return {string} Absolute file path.
- */
-const getAbsoluteEntryFilePath = ( entryFilePath ) => {
- const [ absoluteEntryFilepath ] = glob(
- `${ entryFilePath }.([jt]s?(x)|?(s)css)`,
- {
- absolute: true,
- }
- );
- return absoluteEntryFilepath;
-};
-
-/**
- * Find all directories with block.json files and get entry points for block related assets.
- */
-const blockEntryPoints = getBlockMetaDataFiles().reduce(
- ( accumulator, blockMetadataFile ) => {
- const blockMetaData = getBlockMetaData( blockMetadataFile );
-
- getBlockFileAssets( blockMetaData ).forEach( ( rawFilePath ) => {
- const entryFilePath = getEntryFilePath(
- rawFilePath,
- path.dirname( blockMetadataFile )
- );
-
- const absoluteEntryFilepath =
- getAbsoluteEntryFilePath( entryFilePath );
-
- if ( ! absoluteEntryFilepath ) {
- // eslint-disable-next-line no-console
- console.warn( 'Block asset file not found.', entryFilePath );
- return;
- }
-
- const entryPointName = getEntryPointName(
- entryFilePath,
- blockMetaData
- );
-
- accumulator[ entryPointName ] = absoluteEntryFilepath;
- } );
- return accumulator;
- },
- {}
-);
-
-module.exports = {
- blocksBuildDir,
- blockEntryPoints,
- getBlockMetaData,
- getEntryPointName,
-};
diff --git a/packages/js/product-editor/jest.config.json b/packages/js/product-editor/jest.config.json
deleted file mode 100644
index fa3347efcc7..00000000000
--- a/packages/js/product-editor/jest.config.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "rootDir": "./",
- "roots": [
- "<rootDir>/src"
- ],
- "preset": "./node_modules/@woocommerce/internal-js-tests/jest-preset.js"
-}
diff --git a/packages/js/product-editor/package.json b/packages/js/product-editor/package.json
deleted file mode 100644
index 8bec8697ab8..00000000000
--- a/packages/js/product-editor/package.json
+++ /dev/null
@@ -1,194 +0,0 @@
-{
- "name": "@woocommerce/product-editor",
- "version": "1.5.0",
- "description": "React components for the WooCommerce admin product editor.",
- "author": "Automattic",
- "license": "GPL-2.0-or-later",
- "keywords": [
- "wordpress",
- "woocommerce"
- ],
- "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/product-editor/README.md",
- "repository": {
- "type": "git",
- "url": "https://github.com/woocommerce/woocommerce.git"
- },
- "bugs": {
- "url": "https://github.com/woocommerce/woocommerce/issues"
- },
- "exports": {
- ".": {
- "wc-source": "./src/index.ts",
- "types": "./build-types/index.d.ts",
- "import": "./build-module/index.js",
- "require": "./build/index.js"
- }
- },
- "main": "build/index.js",
- "module": "build-module/index.js",
- "types": "build-types/index.d.ts",
- "react-native": "src/index",
- "files": [
- "build",
- "build-module",
- "build-style",
- "build-types"
- ],
- "sideEffects": [
- "build-style/**",
- "src/**/*.scss"
- ],
- "publishConfig": {
- "access": "public",
- "exports": {
- ".": {
- "types": "./build-types/index.d.ts",
- "import": "./build-module/index.js",
- "require": "./build/index.js"
- }
- }
- },
- "dependencies": {
- "@types/lodash": "^4.14.202",
- "@types/prop-types": "^15.7.11",
- "@types/wordpress__blocks": "catalog:wp-min",
- "@woocommerce/admin-layout": "workspace:*",
- "@woocommerce/block-templates": "workspace:*",
- "@woocommerce/components": "workspace:*",
- "@woocommerce/currency": "workspace:*",
- "@woocommerce/customer-effort-score": "workspace:*",
- "@woocommerce/data": "workspace:*",
- "@woocommerce/experimental": "workspace:*",
- "@woocommerce/expression-evaluation": "workspace:*",
- "@woocommerce/navigation": "workspace:*",
- "@woocommerce/number": "workspace:*",
- "@woocommerce/settings": "1.0.0",
- "@woocommerce/tracks": "workspace:*",
- "@wordpress/api-fetch": "catalog:wp-min",
- "@wordpress/block-editor": "catalog:wp-min",
- "@wordpress/blocks": "catalog:wp-min",
- "@wordpress/components": "catalog:wp-min",
- "@wordpress/compose": "catalog:wp-min",
- "@wordpress/core-data": "catalog:wp-min",
- "@wordpress/dataviews": "^4.4.1",
- "@wordpress/date": "catalog:wp-min",
- "@wordpress/deprecated": "catalog:wp-min",
- "@wordpress/edit-post": "catalog:wp-min",
- "@wordpress/editor": "catalog:wp-min",
- "@wordpress/element": "catalog:wp-min",
- "@wordpress/hooks": "catalog:wp-min",
- "@wordpress/html-entities": "catalog:wp-min",
- "@wordpress/i18n": "catalog:wp-min",
- "@wordpress/icons": "10.6.0",
- "@wordpress/interface": "catalog:wp-min",
- "@wordpress/keyboard-shortcuts": "catalog:wp-min",
- "@wordpress/keycodes": "catalog:wp-min",
- "@wordpress/media-utils": "catalog:wp-min",
- "@wordpress/plugins": "catalog:wp-min",
- "@wordpress/preferences": "catalog:wp-min",
- "@wordpress/private-apis": "catalog:wp-min",
- "@wordpress/url": "catalog:wp-min",
- "clsx": "2.1.x",
- "@woocommerce/sanitize": "workspace:*",
- "lodash": "^4.17.21",
- "moment": "^2.29.4",
- "prop-types": "^15.8.1",
- "react-router-dom": "~6.3.0"
- },
- "devDependencies": {
- "@babel/core": "7.25.7",
- "@babel/runtime": "7.25.7",
- "@testing-library/dom": "^10.4.x",
- "@testing-library/jest-dom": "^6.x.x",
- "@testing-library/react": "^16.x.x",
- "@testing-library/react-hooks": "8.0.1",
- "@testing-library/user-event": "13.5.0",
- "@types/jest": "29.5.x",
- "@types/react": "18.3.x",
- "@types/testing-library__jest-dom": "^5.14.9",
- "@types/wordpress__block-editor": "catalog:wp-min",
- "@types/wordpress__block-library": "catalog:wp-min",
- "@types/wordpress__blocks": "catalog:wp-min",
- "@types/wordpress__edit-post": "catalog:wp-min",
- "@woocommerce/eslint-plugin": "workspace:*",
- "@woocommerce/internal-build": "workspace:*",
- "@woocommerce/internal-js-tests": "workspace:*",
- "@wordpress/block-editor": "catalog:wp-min",
- "@wordpress/browserslist-config": "next",
- "copy-webpack-plugin": "13.0.x",
- "css-loader": "6.11.x",
- "eslint": "^8.55.0",
- "jest": "29.5.x",
- "jest-cli": "29.5.x",
- "jest-environment-jsdom": "29.5.x",
- "mini-css-extract-plugin": "2.9.x",
- "postcss": "8.4.x",
- "postcss-loader": "4.3.x",
- "react": "18.3.x",
- "react-dom": "18.3.x",
- "react-test-renderer": "18.3.x",
- "rimraf": "5.0.5",
- "sass-loader": "10.5.x",
- "ts-jest": "29.1.x",
- "typescript": "5.7.x",
- "webpack": "5.97.x",
- "webpack-cli": "5.1.x",
- "webpack-remove-empty-scripts": "1.0.x"
- },
- "scripts": {
- "build": "pnpm build:project",
- "build:project": "pnpm --stream '/^build:project:.*$/'",
- "build:project:bundle": "NODE_ENV=production webpack",
- "build:project:cjs": "node build.mjs --commonjs",
- "build:project:esm": "node build.mjs",
- "changelog": "XDEBUG_MODE=off composer install --quiet && composer exec -- changelogger",
- "lint": "pnpm --if-present '/^lint:lang:.*$/'",
- "lint:fix": "pnpm --if-present '/^lint:fix:lang:.*$/'",
- "lint:fix:lang:js": "eslint src --fix",
- "lint:lang:js": "eslint src",
- "lint:lang:types": "tsc --build --emitDeclarationOnly",
- "build:publish:project": "pnpm --stream '/^build:publish:project:.*$/'",
- "build:publish:project:types": "tsc --build --emitDeclarationOnly",
- "build:publish:project:runtime": "pnpm build:project",
- "prepack": "pnpm build:publish:project",
- "test:js": "jest --config ./jest.config.json --passWithNoTests",
- "update:php": "XDEBUG_MODE=off composer update --quiet",
- "watch:build": "pnpm watch:build:project",
- "watch:build:project": "pnpm --stream '/^watch:build:project:.*$/'",
- "watch:build:project:bundle": "NODE_ENV=development webpack --watch",
- "watch:build:project:cjs": "node build.mjs --commonjs --watch",
- "watch:build:project:esm": "node build.mjs --watch"
- },
- "peerDependencies": {
- "@types/react": "18.3.x",
- "@wordpress/data": "^10.0.2",
- "react": "18.3.x",
- "react-dom": "18.3.x"
- },
- "config": {
- "ci": {
- "lint": {
- "command": "lint",
- "changes": "src/**/*.{js,jsx,ts,tsx}"
- },
- "tests": [
- {
- "name": "JavaScript",
- "command": "test:js",
- "changes": [
- "webpack.config.js",
- "jest.config.js",
- "babel.config.js",
- "tsconfig.json",
- "src/**/*.{js,jsx,ts,tsx}",
- "typings/**/*.ts"
- ],
- "events": [
- "pull_request",
- "push"
- ]
- }
- ]
- }
- }
-}
diff --git a/packages/js/product-editor/src/bindings-sources/entity/product/index.ts b/packages/js/product-editor/src/bindings-sources/entity/product/index.ts
deleted file mode 100644
index cfb6e0dd93a..00000000000
--- a/packages/js/product-editor/src/bindings-sources/entity/product/index.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type {
- BindingSourceHandlerProps,
- BindingUseSourceProps,
- BlockProps,
-} from '../../../bindings/types';
-import type { WooCommerceEntityProductSourceArgs } from './types';
-
-/**
- * React custom hook to bind a source to a block.
- *
- * @param {BlockProps} blockProps - The block props.
- * @param {WooCommerceEntityProductSourceArgs} sourceArgs - The source args.
- * @return {BindingUseSourceProps} The source value and setter.
- */
-const useSource = (
- blockProps: BlockProps,
- sourceArgs: WooCommerceEntityProductSourceArgs
-): BindingUseSourceProps => {
- if ( typeof sourceArgs === 'undefined' ) {
- throw new Error( 'The "args" argument is required.' );
- }
-
- if ( ! sourceArgs?.prop ) {
- throw new Error( 'The "prop" argument is required.' );
- }
-
- const { prop, id } = sourceArgs;
-
- const [ value, updateValue ] = useEntityProp(
- 'postType',
- 'product',
- prop,
- id
- );
-
- const updateValueHandler = useCallback(
- ( nextEntityPropValue: string ) => {
- updateValue( nextEntityPropValue );
- },
- [ updateValue ]
- );
-
- return {
- placeholder: null,
- value,
- updateValue: updateValueHandler,
- };
-};
-
-/*
- * Create the product-entity
- * block binding source handler.
- *
- * source ID: `woocommerce/entity-product`
- * args:
- * - prop: The name of the entity property to bind.
- *
- * In the example below,
- * the `content` attribute is bound to the `short_description` property.
- * `product` entity and `postType` kind are defined by the context.
- *
- * ```
- * metadata: {
- * bindings: {
- * content: {
- * source: 'woocommerce/entity-product',
- * args: {
- * prop: 'short_description',
- * },
- * },
- * },
- * ```
- */
-export default {
- name: 'woocommerce/entity-product',
- label: __( 'Product Entity', 'woocommerce' ),
- useSource,
- lockAttributesEditing: true,
-} as BindingSourceHandlerProps< WooCommerceEntityProductSourceArgs >;
diff --git a/packages/js/product-editor/src/bindings-sources/entity/product/test/test-use-source.js b/packages/js/product-editor/src/bindings-sources/entity/product/test/test-use-source.js
deleted file mode 100644
index 848342d105e..00000000000
--- a/packages/js/product-editor/src/bindings-sources/entity/product/test/test-use-source.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import productEntitySourceHandler from '..';
-
-let mockState;
-
-jest.mock( '@wordpress/core-data', () => ( {
- useEntityProp: jest.fn().mockImplementation( ( kind, name, key ) => {
- return mockState?.[ key ] ? mockState[ key ] : [];
- } ),
-} ) );
-
-describe( 'useSource', () => {
- let blockInstance;
-
- mockState = {
- external_property_name: [ 'External source property Value' ],
- };
-
- beforeEach( () => {
- blockInstance = {
- name: 'woocommerce/block-with-entity',
- attributes: {
- prop: 'value',
- },
- className: 'wp-block-woocommerce-block-with-entity',
- context: {},
- clientId: '<client-id-instance>',
- isSelected: false,
- setAttributes: jest.fn(),
- };
- } );
-
- it( 'throws an error if sourceArgs is undefined', () => {
- const { useSource } = productEntitySourceHandler;
- const { result } = renderHook( () =>
- useSource( blockInstance, undefined )
- );
-
- expect( result.error ).toEqual(
- new Error( 'The "args" argument is required.' )
- );
- } );
-
- it( 'throws an error if prop in sourceArgs is undefined', () => {
- const { useSource } = productEntitySourceHandler;
- const { result } = renderHook( () =>
- useSource( blockInstance, { prop: undefined } )
- );
-
- expect( result.error ).toEqual(
- new Error( 'The "prop" argument is required.' )
- );
- } );
-
- it( 'return the value of the product entity property', () => {
- const { useSource } = productEntitySourceHandler;
- const { result } = renderHook( () =>
- useSource( blockInstance, {
- prop: 'external_property_name',
- } )
- );
-
- expect( result.current.value ).toEqual(
- 'External source property Value'
- );
- } );
-} );
diff --git a/packages/js/product-editor/src/bindings-sources/entity/product/types.ts b/packages/js/product-editor/src/bindings-sources/entity/product/types.ts
deleted file mode 100644
index 99b28b82198..00000000000
--- a/packages/js/product-editor/src/bindings-sources/entity/product/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type WooCommerceEntityProductSourceArgs = {
- /*
- * The name of the entity property to bind.
- */
- prop: string;
-
- /*
- * The ID of the entity to bind.
- */
- id?: string;
-};
diff --git a/packages/js/product-editor/src/bindings/types.ts b/packages/js/product-editor/src/bindings/types.ts
deleted file mode 100644
index db6f77d0f11..00000000000
--- a/packages/js/product-editor/src/bindings/types.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
-
-export type AttributeBindingProps = {
- source: string;
- args: { prop: string };
-};
-
-export type MetadataBindingsProps = Record< string, AttributeBindingProps >;
-
-export type BoundBlockAttributes = BlockAttributes & {
- metadata?: {
- bindings: MetadataBindingsProps;
- };
-};
-
-export type BoundBlockEditInstance = CoreBlockEditProps< BoundBlockAttributes >;
-export type BoundBlockEditComponent =
- React.ComponentType< BoundBlockEditInstance >;
-
-/*
- * Block Binding API
- */
-export type BindingUseSourceProps = {
- /*
- * The placeholder value for the source.
- */
- placeholder: string | null;
- /*
- * The value of the source.
- */
- value: any; // eslint-disable-line @typescript-eslint/no-explicit-any
- /*
- * Callback function to set the source value.
- */
- updateValue: ( newValue: any ) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
-};
-
-export interface BindingSourceHandlerProps< T > {
- /*
- * The name of the binding source handler.
- */
- name: string;
-
- /*
- * The human-readable label for the binding source handler.
- */
- label: string;
-
- /*
- * React custom hook to bind a source to a block.
- */
- useSource: (
- blockProps: CoreBlockEditProps< BlockAttributes >,
- sourceArgs: T
- ) => BindingUseSourceProps;
-
- lockAttributesEditing: boolean;
-}
-
-/*
- * Core Types
- */
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface CoreBlockEditProps< T extends Record< string, any > >
- extends BlockEditProps< T > {
- readonly name: string;
- readonly context: Record< string, string >;
-}
-
-export type BlockProps = CoreBlockEditProps< BlockAttributes >;
diff --git a/packages/js/product-editor/src/blocks/generic/README.md b/packages/js/product-editor/src/blocks/generic/README.md
deleted file mode 100644
index ce051843ddb..00000000000
--- a/packages/js/product-editor/src/blocks/generic/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Product Editor Generic Blocks
-
-This directory contains generic blocks for the product editor.
-
-See [Product Editor Development Handbook](../../../../../../docs/product-editor-development/README.md)
-for more information on how to use these blocks.
-
-## Blocks list
-
-### [woocommerce/conditional](conditional/README.md)
-
-> ⚠️ **Note:** `woocommerce/conditional` is deprecated. Use conditional visibility
-support in the Block Template API instead, through the `hideConditions` attribute on
-any block and the `BlockInterface::add_hide_condition()` method.
-
-See [Block Template API usage examples](../../../../../../plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md) for more information.
-
-### [woocommerce/product-checkbox-field](checkbox/README.md)
-
-### [woocommerce/product-collapsible](collapsible/README.md)
-
-### [woocommerce/product-number-field](number/README.md)
-
-### [woocommerce/product-pricing-field](pricing/README.md)
-
-### [woocommerce/product-radio-field](radio/README.md)
-
-### [woocommerce/product-select-field](select/README.md)
-
-### [woocommerce/product-taxonomy-field](taxonomy/README.md)
-
-### [woocommerce/product-text-field](text/README.md)
-
-### [woocommerce/product-textarea-field](textarea/README.md)
-
-### [woocommerce/product-toggle-field](toggle/README.md)
-
-
diff --git a/packages/js/product-editor/src/blocks/generic/checkbox/README.md b/packages/js/product-editor/src/blocks/generic/checkbox/README.md
deleted file mode 100644
index 9ce91ec7a54..00000000000
--- a/packages/js/product-editor/src/blocks/generic/checkbox/README.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# woocommerce/product-checkbox-field
-
-A reusable checkbox for the product editor.
-
-
-
-_Please note that to persist a custom field in the product it also needs to be added to the WooCommerce REST API._
-
-## Attributes
-
-### title
-
-- **Type:** `String`
-- **Required:** `No`
-
-Header that appears above the checkbox.
-
-### label
-
-- **Type:** `String`
-- **Required:** `No`
-
-Label that appears at the side of the checkbox.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property in which the checkbox value is stored.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-Tooltip text that is shown when hovering the icon at the side of the label.
-
-### checkedValue
-
-- **Type:** `String`
-- **Required:** `No`
-
-If it is set, the checked state will be `property` === `checkedValue`. When `onChange` is fired with the checked value set to `true` then the `property` value will be set to the one stored in `checkedValue`.
-
-This is needed for cases where the `property` type is not a `boolean`.
-
-### uncheckedValue
-
-- **Type:** `String`
-- **Required:** `No`
-
-If it is set, the unchecked state will be `property` !== `checkedValue`. When `onChange` is fired with the checked value set to `false` then the `property` value will be set to the one stored in `uncheckedValue`.
-
-This is needed for cases where the `property` type is not a `boolean`.
-
-## Usage
-
-Here's an example on the code that is used for the `sold_individually` field in the Inventory section:
-
-```php
-$parent_container->add_block(
- [
- 'id' => 'product-limit-purchase',
- 'blockName' => 'woocommerce/product-checkbox-field',
- 'order' => 20,
- 'attributes' => [
- 'title' => __(
- 'Restrictions',
- 'woocommerce'
- ),
- 'label' => __(
- 'Limit purchases to 1 item per order',
- 'woocommerce'
- ),
- 'property' => 'sold_individually',
- 'tooltip' => __(
- 'When checked, customers will be able to purchase only 1 item in a single order. This is particularly useful for items that have limited quantity, like art or handmade goods.',
- 'woocommerce'
- ),
- ],
- ]
-);
-```
-
----
-
-Here's an example that is used to toggle the product variation `status` from `publish` to `private`:
-
-> In this case the checkbox will be checked when the variation `status === 'private'`, changing the checked state of the checkbox will toggle the `status` value from `private` to `publish` and not from `true` to `false` like in the previous example:
-
-```php
-$parent_container->add_block(
- [
- 'id' => 'product-variation-visibility',
- 'blockName' => 'woocommerce/product-checkbox-field',
- 'order' => 30,
- 'attributes' => [
- 'property' => 'status',
- 'label' => __( 'Hide in product catalog', 'woocommerce' ),
- 'checkedValue' => 'private',
- 'uncheckedValue' => 'publish',
- ],
- ]
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/checkbox/block.json b/packages/js/product-editor/src/blocks/generic/checkbox/block.json
deleted file mode 100644
index b0e13a8aa53..00000000000
--- a/packages/js/product-editor/src/blocks/generic/checkbox/block.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-checkbox-field",
- "title": "Product checkbox control",
- "category": "woocommerce",
- "description": "A reusable checkbox for the product editor.",
- "keywords": [ "products", "checkbox", "input" ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string",
- "role": "content"
- },
- "label": {
- "type": "string"
- },
- "property": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- },
- "checkedValue": {
- "type": "string"
- },
- "uncheckedValue": {
- "type": "string"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [ "postType" ]
-}
diff --git a/packages/js/product-editor/src/blocks/generic/checkbox/edit.tsx b/packages/js/product-editor/src/blocks/generic/checkbox/edit.tsx
deleted file mode 100644
index 2d3507434c3..00000000000
--- a/packages/js/product-editor/src/blocks/generic/checkbox/edit.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { CheckboxBlockAttributes } from './types';
-import { Checkbox } from '../../../components/checkbox-control';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< CheckboxBlockAttributes > ) {
- const {
- property,
- title,
- label,
- tooltip,
- checkedValue,
- uncheckedValue,
- disabled,
- } = attributes;
-
- const blockProps = useWooBlockProps( attributes );
-
- const [ value, setValue ] = useProductEntityProp< boolean | string | null >(
- property,
- {
- postType,
- fallbackValue: false,
- }
- );
-
- return (
- <div { ...blockProps }>
- <Checkbox
- value={ value || false }
- onChange={ setValue }
- label={ label || '' }
- title={ title }
- tooltip={ tooltip }
- checkedValue={ checkedValue }
- uncheckedValue={ uncheckedValue }
- disabled={ disabled }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/checkbox/index.ts b/packages/js/product-editor/src/blocks/generic/checkbox/index.ts
deleted file mode 100644
index f13707204e3..00000000000
--- a/packages/js/product-editor/src/blocks/generic/checkbox/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/checkbox/types.ts b/packages/js/product-editor/src/blocks/generic/checkbox/types.ts
deleted file mode 100644
index 1830073f674..00000000000
--- a/packages/js/product-editor/src/blocks/generic/checkbox/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-
-export interface CheckboxBlockAttributes extends BlockAttributes {
- property: string;
- title?: string;
- label?: string;
- tooltip?: string;
- checkedValue?: string | null;
- uncheckedValue?: string | null;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/collapsible/README.md b/packages/js/product-editor/src/blocks/generic/collapsible/README.md
deleted file mode 100644
index c1e5ff276fc..00000000000
--- a/packages/js/product-editor/src/blocks/generic/collapsible/README.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# woocommerce/product-collapsible
-
-Container with collapsible inner blocks.
-
-
-
-## Attributes
-
-### toggleText
-
-- **Type**: `string`
-- **Required**: ` Yes`
-
-The text to display on the toggle button.
-
-### initialCollapsed
-
-- **Type**: `boolean`
-- **Required**: ` Yes`
-
-Controls if the content is collapsed by default.
-
-### persistRender
-
-- **Type**: `boolean`
-- **Required**: ` Yes`
-
-Controls if content is rendered to the DOM even when collapsed.
-
-## Usage
-
-Here's the code that was used to create the example in the screenshot above:
-
-```php
-$product_inventory_advanced = $product_inventory_section->add_block(
- [
- 'id' => 'product-inventory-advanced',
- 'blockName' => 'woocommerce/product-collapsible',
- 'attributes' => [
- 'toggleText' => __( 'Advanced', 'woocommerce' ),
- 'initialCollapsed' => true,
- 'persistRender' => true,
- ],
- ]
-);
-$product_inventory_advanced->add_block(
- [
- // add block information here
- ]
-)
-```
diff --git a/packages/js/product-editor/src/blocks/generic/collapsible/block.json b/packages/js/product-editor/src/blocks/generic/collapsible/block.json
deleted file mode 100644
index 2f34dcf1926..00000000000
--- a/packages/js/product-editor/src/blocks/generic/collapsible/block.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-collapsible",
- "title": "Collapsible",
- "category": "widgets",
- "description": "Container with collapsible inner blocks.",
- "textdomain": "default",
- "attributes": {
- "toggleText": {
- "type": "string",
- "role": "content"
- },
- "initialCollapsed": {
- "type": "boolean"
- },
- "persistRender": {
- "type": "boolean"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/collapsible/edit.tsx b/packages/js/product-editor/src/blocks/generic/collapsible/edit.tsx
deleted file mode 100644
index 2e0107011f5..00000000000
--- a/packages/js/product-editor/src/blocks/generic/collapsible/edit.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { CollapsibleContent } from '@woocommerce/components';
-import type { BlockAttributes } from '@wordpress/blocks';
-import { createElement } from '@wordpress/element';
-import { InnerBlocks } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { toggleText, initialCollapsed, persistRender = true } = attributes;
-
- return (
- <div { ...blockProps }>
- <CollapsibleContent
- toggleText={ toggleText }
- initialCollapsed={ initialCollapsed }
- persistRender={ persistRender }
- >
- <InnerBlocks templateLock="all" />
- </CollapsibleContent>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/collapsible/index.ts b/packages/js/product-editor/src/blocks/generic/collapsible/index.ts
deleted file mode 100644
index 76e14eaecea..00000000000
--- a/packages/js/product-editor/src/blocks/generic/collapsible/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { Edit } from './edit';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/conditional/README.md b/packages/js/product-editor/src/blocks/generic/conditional/README.md
deleted file mode 100644
index 7886a7b625a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/conditional/README.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# woocommerce/conditional
-
-> ⚠️ **Note:** `woocommerce/conditional` is deprecated. Use conditional visibility
-support in the Block Template API instead, through the `hideConditions` attribute on
-any block and the `BlockInterface::add_hide_condition()` method.
-
-Container to only conditionally render inner blocks.
-
-<video src="https://github.com/woocommerce/woocommerce/assets/13437655/ccf6888d-59bd-4f7c-9487-105e5e0d8166"></video>
-
-## Attributes
-
-### mustMatch
-
-- **Type**: `Record< string, Array< string > >`
-- **Required**: `Yes`
-
-A list of requirements that must be met for the inner blocks to be rendered. The keys should reference properties from the product, and the values are possible values for that property so that the inner blocks are rendered.
-
-## Usage
-
-Here's the code that was used to create the example in the video above:
-
-```php
-$wrapper = $product_summary_field->get_parent()->add_block(
- [
- 'id' => 'example-conditional-wrapper',
- 'blockName' => 'woocommerce/conditional',
- 'order' => $product_summary_field->get_order() + 5,
- 'attributes' => [
- 'mustMatch' => [
- 'name' => [ 'Car', 'Bike' ]
- ],
- ],
- ]
-);
-$wrapper->add_block(
- [
- 'id' => 'example-pricing-field',
- 'blockName' => 'woocommerce/product-pricing-field',
- 'order' => $product_summary_field->get_order() + 5,
- 'attributes' => [
- 'label' => __( 'Example price field', 'woocommerce'),
- 'property' => 'custom_price',
- 'help' => 'This is a help text',
- ],
- ]
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/conditional/block.json b/packages/js/product-editor/src/blocks/generic/conditional/block.json
deleted file mode 100644
index 8f3a9fcae78..00000000000
--- a/packages/js/product-editor/src/blocks/generic/conditional/block.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/conditional",
- "title": "Conditional",
- "category": "widgets",
- "description": "Container to only conditionally render inner blocks.",
- "textdomain": "default",
- "attributes": {
- "mustMatch": {
- "role": "content",
- "type": "array",
- "items": {
- "type": "object"
- },
- "default": []
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/conditional/edit.tsx b/packages/js/product-editor/src/blocks/generic/conditional/edit.tsx
deleted file mode 100644
index 6eed8c72b28..00000000000
--- a/packages/js/product-editor/src/blocks/generic/conditional/edit.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import deprecated from '@wordpress/deprecated';
-import { createElement } from '@wordpress/element';
-import { InnerBlocks } from '@wordpress/block-editor';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { DisplayState } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export interface ConditionalBlockAttributes extends BlockAttributes {
- mustMatch: Record< string, Array< string > >;
-}
-
-export function Edit( {
- attributes,
- context,
-}: ProductEditorBlockEditProps< ConditionalBlockAttributes > ) {
- deprecated( '`woocommerce/conditional` block', {
- alternative: '`hideConditions` attribute on any block',
- } );
-
- const { postType } = context;
- const blockProps = useWooBlockProps( attributes );
- const { mustMatch } = attributes;
-
- const productId = useEntityId( 'postType', postType );
-
- const displayBlocks = useSelect(
- ( select ) => {
- // @ts-expect-error getEditedEntityRecord's curried form strips its generic, returning a wide entity union; Product is the correct narrow type.
- const product: Product = select( 'core' ).getEditedEntityRecord(
- 'postType',
- postType,
- productId
- );
-
- for ( const [ prop, values ] of Object.entries( mustMatch ) ) {
- // @ts-expect-error Indexing Product with a dynamic string key is not supported until @woocommerce/data's Product type adds an index signature.
- if ( ! values.includes( product[ prop ] ) ) {
- return false;
- }
- }
- return true;
- },
- [ postType, productId, mustMatch ]
- );
-
- return (
- <DisplayState
- { ...blockProps }
- state={ displayBlocks ? 'visible' : 'visually-hidden' }
- >
- <InnerBlocks templateLock="all" />
- </DisplayState>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/conditional/index.ts b/packages/js/product-editor/src/blocks/generic/conditional/index.ts
deleted file mode 100644
index 76e14eaecea..00000000000
--- a/packages/js/product-editor/src/blocks/generic/conditional/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { Edit } from './edit';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/block.json b/packages/js/product-editor/src/blocks/generic/linked-product-list/block.json
deleted file mode 100644
index a8c9045ebb4..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/block.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-linked-list-field",
- "title": "Linked product list",
- "category": "widgets",
- "description": "The linked product list.",
- "keywords": [
- "products",
- "linked",
- "list"
- ],
- "textdomain": "default",
- "attributes": {
- "property": {
- "type": "string",
- "role": "content"
- },
- "emptyState": {
- "type": "object",
- "default": {}
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType",
- "isInSelectedTab"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/edit.tsx b/packages/js/product-editor/src/blocks/generic/linked-product-list/edit.tsx
deleted file mode 100644
index 7e8de94fd71..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/edit.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- useCallback,
- useEffect,
- useReducer,
- useRef,
- useState,
-} from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { resolveSelect } from '@wordpress/data';
-import { Product, productsStore } from '@woocommerce/data';
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { reusableBlock } from '@wordpress/icons';
-import { recordEvent } from '@woocommerce/tracks';
-import { useDebounce } from '@wordpress/compose';
-import { useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { ProductList, Skeleton } from '../../../components/product-list';
-import { ProductSelect } from '../../../components/product-select';
-import { AdviceCard } from '../../../components/advice-card';
-import { TRACKS_SOURCE } from '../../../constants';
-import { ShoppingBags } from '../../../images/shopping-bags';
-import { CashRegister } from '../../../images/cash-register';
-import { ProductEditorBlockEditProps } from '../../../types';
-import {
- getLoadLinkedProductsDispatcher,
- getRemoveLinkedProductDispatcher,
- getSelectSearchedProductDispatcher,
- reducer,
-} from './reducer';
-import {
- LinkedProductListBlockAttributes,
- LinkedProductListBlockEmptyState,
-} from './types';
-import { getSuggestedProductsFor } from '../../../utils/get-related-products';
-import { SectionActions } from '../../../components/block-slot-fill';
-
-export function EmptyStateImage( {
- image,
- tip: description,
-}: LinkedProductListBlockEmptyState ) {
- switch ( image ) {
- case 'CashRegister':
- return <CashRegister />;
- case 'ShoppingBags':
- return <ShoppingBags />;
- default:
- if ( /^https?:\/\//.test( image ) ) {
- return (
- <img
- src={ image }
- alt={ description }
- height={ 88 }
- width={ 88 }
- />
- );
- }
- return null;
- }
-}
-
-async function getProductsBySearchValue(
- searchValue = '',
- excludedIds: number[] = []
-): Promise< Product[] > {
- return resolveSelect( productsStore ).getProducts( {
- search: searchValue,
- orderby: 'title',
- order: 'asc',
- per_page: 5,
- exclude: excludedIds,
- } );
-}
-
-export function LinkedProductListBlockEdit( {
- attributes,
- context: { postType, isInSelectedTab },
-}: ProductEditorBlockEditProps< LinkedProductListBlockAttributes > ) {
- const { property, emptyState } = attributes;
- const loadInitialSearchResults = useRef( false );
- const [ , setSearchValue ] = useState( '' );
- const [ searchedProducts, setSearchedProducts ] = useState< Product[] >(
- []
- );
- const [ isSearching, setIsSearching ] = useState( false );
- const blockProps = useWooBlockProps( attributes );
- const [ state, dispatch ] = useReducer( reducer, {
- linkedProducts: [],
- } );
-
- const productId = useEntityId( 'postType', postType );
-
- const loadLinkedProductsDispatcher =
- getLoadLinkedProductsDispatcher( dispatch );
- const selectSearchedProductDispatcher =
- getSelectSearchedProductDispatcher( dispatch );
- const removeLinkedProductDispatcher =
- getRemoveLinkedProductDispatcher( dispatch );
- const [ linkedProductIds, setLinkedProductIds ] = useProductEntityProp<
- number[]
- >( property, { postType } );
-
- useEffect( () => {
- if (
- ! state.selectedProduct &&
- linkedProductIds &&
- linkedProductIds.length > 0
- ) {
- loadLinkedProductsDispatcher( linkedProductIds );
- }
- }, [ linkedProductIds, state.selectedProduct ] );
-
- function searchProducts( search = '', excludedIds: number[] = [] ) {
- setSearchValue( search );
- setIsSearching( true );
- return getProductsBySearchValue( search, excludedIds )
- .then( ( products ) => {
- setSearchedProducts( products );
- } )
- .finally( () => {
- setIsSearching( false );
- } );
- }
-
- const debouncedFilter = useDebounce( function filter( search = '' ) {
- searchProducts( search, [ ...( linkedProductIds || [] ), productId ] );
- }, 300 );
-
- useEffect( () => {
- // Only filter when the tab is selected and initial search results haven't been loaded yet.
- if ( ! isInSelectedTab || loadInitialSearchResults.current ) {
- return;
- }
-
- loadInitialSearchResults.current = true;
- searchProducts( '', [ ...( linkedProductIds || [] ), productId ] );
- }, [
- isInSelectedTab,
- loadInitialSearchResults,
- linkedProductIds,
- productId,
- ] );
-
- const handleSelect = useCallback(
- ( product: Product ) => {
- const isAlreadySelected = ( linkedProductIds || [] ).includes(
- product.id
- );
- if ( isAlreadySelected ) {
- return;
- }
- const newLinkedProductIds = selectSearchedProductDispatcher(
- product,
- state.linkedProducts
- );
-
- setLinkedProductIds( newLinkedProductIds );
- searchProducts( '', [
- ...( newLinkedProductIds || [] ),
- productId,
- ] );
-
- recordEvent( 'linked_products_product_add', {
- source: TRACKS_SOURCE,
- field: property,
- product_id: productId,
- linked_product_id: product.id,
- } );
- },
- [ linkedProductIds, state.linkedProducts ]
- );
-
- function handleProductListRemove( product: Product ) {
- const newLinkedProductIds = removeLinkedProductDispatcher(
- product,
- state.linkedProducts
- );
-
- setLinkedProductIds( newLinkedProductIds );
- searchProducts( '', [ ...( newLinkedProductIds || [] ), productId ] );
-
- recordEvent( 'linked_products_product_remove', {
- source: TRACKS_SOURCE,
- field: property,
- product_id: productId,
- linked_product_id: product.id,
- } );
- }
-
- function handleProductListEdit( product: Product ) {
- recordEvent( 'linked_products_product_select', {
- source: TRACKS_SOURCE,
- field: property,
- product_id: productId,
- linked_product_id: product.id,
- } );
- }
-
- function handleProductListPreview( product: Product ) {
- recordEvent( 'linked_products_product_preview_click', {
- source: TRACKS_SOURCE,
- field: property,
- product_id: productId,
- linked_product_id: product.id,
- } );
- }
-
- const [ isChoosingProducts, setIsChoosingProducts ] = useState( false );
-
- async function chooseProductsForMe() {
- recordEvent( 'linked_products_choose_related_click', {
- source: TRACKS_SOURCE,
- field: property,
- } );
-
- dispatch( {
- type: 'LOADING_LINKED_PRODUCTS',
- payload: {
- isLoading: true,
- },
- } );
-
- setIsChoosingProducts( true );
-
- const linkedProducts = ( await getSuggestedProductsFor( {
- postId: productId,
- forceRequest: true,
- } ) ) as Product[];
-
- dispatch( {
- type: 'LOADING_LINKED_PRODUCTS',
- payload: {
- isLoading: false,
- },
- } );
-
- setIsChoosingProducts( false );
-
- if ( ! linkedProducts ) {
- return;
- }
-
- const newLinkedProducts = selectSearchedProductDispatcher(
- linkedProducts,
- []
- );
-
- setLinkedProductIds( newLinkedProducts );
- }
-
- function handleAdviceCardDismiss() {
- recordEvent( 'linked_products_placeholder_dismiss', {
- source: TRACKS_SOURCE,
- field: property,
- } );
- }
-
- return (
- <div { ...blockProps }>
- <SectionActions>
- <Button
- variant="tertiary"
- icon={ reusableBlock }
- onClick={ chooseProductsForMe }
- isBusy={ isChoosingProducts }
- disabled={ isChoosingProducts }
- >
- { __( 'Choose products for me', 'woocommerce' ) }
- </Button>
- </SectionActions>
-
- <div className="wp-block-woocommerce-product-linked-list-field__form-group-content">
- <ProductSelect
- items={ searchedProducts }
- filter={ debouncedFilter }
- onSelect={ handleSelect }
- isLoading={ isSearching }
- selected={ null }
- />
- </div>
-
- { state.isLoading && <Skeleton /> }
-
- { ! state.isLoading && state.linkedProducts.length === 0 && (
- <AdviceCard
- tip={ emptyState.tip }
- dismissPreferenceId={ `woocommerce-product-${ property }-advice-card-dismissed` }
- isDismissible={ emptyState.isDismissible }
- onDismiss={ handleAdviceCardDismiss }
- >
- <EmptyStateImage { ...emptyState } />
- </AdviceCard>
- ) }
-
- { ! state.isLoading && state.linkedProducts.length > 0 && (
- <ProductList
- products={ state.linkedProducts }
- onRemove={ handleProductListRemove }
- onEdit={ handleProductListEdit }
- onPreview={ handleProductListPreview }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/editor.scss b/packages/js/product-editor/src/blocks/generic/linked-product-list/editor.scss
deleted file mode 100644
index 19ad8df80a5..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/editor.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.wp-block-woocommerce-product-linked-list-field {
- display: flex;
- flex-direction: column;
- gap: $grid-unit-30;
-
- .woocommerce-advice-card {
- min-height: 233px; // min height to cover the min rows rendered in the table on its back
-
- &__footer {
- padding: 0 calc( $gap * 6 ) $gap;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/index.ts b/packages/js/product-editor/src/blocks/generic/linked-product-list/index.ts
deleted file mode 100644
index 1350b099d35..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { LinkedProductListBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: LinkedProductListBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/reducer.ts b/packages/js/product-editor/src/blocks/generic/linked-product-list/reducer.ts
deleted file mode 100644
index fcdb48d41b1..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/reducer.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * External dependencies
- */
-import { resolveSelect } from '@wordpress/data';
-import { productsStore, Product } from '@woocommerce/data';
-
-export type State = {
- linkedProducts: Product[];
- isLoading?: boolean;
- selectedProduct?: Product | Product[];
-};
-
-export type ActionType =
- | 'LOADING_LINKED_PRODUCTS'
- | 'SET_LINKED_PRODUCTS'
- | 'SELECT_SEARCHED_PRODUCT'
- | 'REMOVE_LINKED_PRODUCT';
-
-export type Action = {
- type: ActionType;
- payload: Partial< State >;
-};
-
-export function reducer( state: State, action: Action ): State {
- switch ( action.type ) {
- case 'SELECT_SEARCHED_PRODUCT':
- case 'REMOVE_LINKED_PRODUCT':
- if ( action.payload.selectedProduct ) {
- return {
- ...state,
- ...action.payload,
- };
- }
- return state;
- default:
- return {
- ...state,
- ...action.payload,
- };
- }
-}
-
-export function getLoadLinkedProductsDispatcher(
- dispatch: ( value: Action ) => void
-) {
- return async function loadLinkedProductsDispatcher(
- linkedProductIds: number[]
- ) {
- if ( linkedProductIds.length === 0 ) {
- dispatch( {
- type: 'SET_LINKED_PRODUCTS',
- payload: {
- linkedProducts: [],
- },
- } );
- return Promise.resolve( [] );
- }
-
- dispatch( {
- type: 'LOADING_LINKED_PRODUCTS',
- payload: {
- isLoading: true,
- },
- } );
- return resolveSelect( productsStore )
- .getProducts( {
- include: linkedProductIds,
- } )
- .then( ( response: Product[] ) => {
- dispatch( {
- type: 'SET_LINKED_PRODUCTS',
- payload: {
- linkedProducts: response,
- },
- } );
- return response;
- } )
- .finally( () => {
- dispatch( {
- type: 'LOADING_LINKED_PRODUCTS',
- payload: {
- isLoading: false,
- },
- } );
- } );
- };
-}
-
-export function getSelectSearchedProductDispatcher(
- dispatch: ( value: Action ) => void
-) {
- return function selectSearchedProductDispatcher(
- selectedProduct: Product | Product[],
- linkedProducts: Product[]
- ) {
- if ( ! Array.isArray( selectedProduct ) ) {
- selectedProduct = [ selectedProduct ];
- }
-
- const newLinkedProducts = [ ...linkedProducts, ...selectedProduct ];
-
- dispatch( {
- type: 'SELECT_SEARCHED_PRODUCT',
- payload: { selectedProduct, linkedProducts: newLinkedProducts },
- } );
-
- return newLinkedProducts.map( ( product ) => product.id );
- };
-}
-
-export function getRemoveLinkedProductDispatcher(
- dispatch: ( value: Action ) => void
-) {
- return function removeLinkedProductDispatcher(
- selectedProduct: Product,
- linkedProducts: Product[]
- ) {
- const newLinkedProducts = linkedProducts.reduce< Product[] >(
- ( list, current ) => {
- if ( current.id === selectedProduct.id ) {
- return list;
- }
- return [ ...list, current ];
- },
- []
- );
-
- dispatch( {
- type: 'REMOVE_LINKED_PRODUCT',
- payload: { selectedProduct, linkedProducts: newLinkedProducts },
- } );
-
- return newLinkedProducts.map( ( product ) => product.id );
- };
-}
diff --git a/packages/js/product-editor/src/blocks/generic/linked-product-list/types.ts b/packages/js/product-editor/src/blocks/generic/linked-product-list/types.ts
deleted file mode 100644
index db68eaa6e8c..00000000000
--- a/packages/js/product-editor/src/blocks/generic/linked-product-list/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export type LinkedProductListBlockEmptyState = {
- image: string | 'CashRegister' | 'ShoppingBags';
- tip: string;
- isDismissible: boolean;
-};
-
-export interface LinkedProductListBlockAttributes extends BlockAttributes {
- property: string;
- emptyState: LinkedProductListBlockEmptyState;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/notice/README.md b/packages/js/product-editor/src/blocks/generic/notice/README.md
deleted file mode 100644
index 1061f799d4b..00000000000
--- a/packages/js/product-editor/src/blocks/generic/notice/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# woocommerce/product-notice-field
-
-A reusable notice field for the product editor.
-
-## Attributes
-
-### message
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Message to display on the notice.
-
-Here's a snippet:
-
-```php
-$section->add_block(
- array(
- 'id' => 'wc-bis-notices',
- 'blockName' => 'woocommerce/product-notice-field',
- 'attributes' => array(
- 'message' => __(
- 'Back In Stock Notifications are disabled. Enable them in the settings.',
- 'woocommerce-back-in-stock-notifications'
- ),
- ),
- )
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/notice/block.json b/packages/js/product-editor/src/blocks/generic/notice/block.json
deleted file mode 100644
index 631e044413d..00000000000
--- a/packages/js/product-editor/src/blocks/generic/notice/block.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-notice-field",
- "title": "Product notice field",
- "category": "woocommerce",
- "description": "A notice field for use in the product editor.",
- "keywords": [ "products", "notice" ],
- "textdomain": "default",
- "attributes": {
- "message": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [ "postType" ]
-}
diff --git a/packages/js/product-editor/src/blocks/generic/notice/edit.tsx b/packages/js/product-editor/src/blocks/generic/notice/edit.tsx
deleted file mode 100644
index 29e9d6e6ccf..00000000000
--- a/packages/js/product-editor/src/blocks/generic/notice/edit.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-import { NoticeBlockAttributes } from './types';
-import { Notice } from '../../../components/notice';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< NoticeBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- return (
- <div { ...blockProps }>
- <Notice
- content={
- <div
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( attributes.message ),
- } }
- ></div>
- }
- ></Notice>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/notice/index.ts b/packages/js/product-editor/src/blocks/generic/notice/index.ts
deleted file mode 100644
index 0ad7d038659..00000000000
--- a/packages/js/product-editor/src/blocks/generic/notice/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockConfiguration } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { NoticeBlockAttributes } from './types';
-
-const { name, ...metadata } =
- blockConfiguration as BlockConfiguration< NoticeBlockAttributes >;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/notice/types.ts b/packages/js/product-editor/src/blocks/generic/notice/types.ts
deleted file mode 100644
index dd8ecd84680..00000000000
--- a/packages/js/product-editor/src/blocks/generic/notice/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-
-export interface NoticeBlockAttributes extends BlockAttributes {
- message: string;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/number/README.md b/packages/js/product-editor/src/blocks/generic/number/README.md
deleted file mode 100644
index 8b01ac83442..00000000000
--- a/packages/js/product-editor/src/blocks/generic/number/README.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# woocommerce/product-number-field
-
-A reusable number field for the product editor.
-
-
-
-## Attributes
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Label that appears on top of the field.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property in which the value is stored.
-
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field.
-
-### required
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-Indicates and enforces that the field is required.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-If provided, shows a tooltip next to the label with additional information.
-
-### suffix
-
-- **Type:** `String`
-- **Required:** `No`
-
-Suffix that can be used for a unit of measure, as an example.
-
-
-### placeholder
-
-- **Type:** `String`
-- **Required:** `No`
-
-Placeholder text that appears in the field when it's empty.
-
-### min
-
-- **Type:** `Number`
-- **Required:** `No`
-
-The minimum numeric value that can be entered in the field.
-
-### max
-
-- **Type:** `Number`
-- **Required:** `No`
-
-The maximum numeric value that can be entered in the field.
-
-### step
-
-- **Type:** `Number`
-- **Required:** `No`
-- **Default:** `1`
-
-The amount that is incremented or decremented when using the up/down arrows.
-
-## Usage
-
-Here's a snippet that adds a field similar to the previous screenshot:
-
-```php
-$section->add_block(
- [
- 'id' => 'example-number-meta',
- 'blockName' => 'woocommerce/product-number-field',
- 'attributes' => [
- 'label' => 'Label',
- 'property' => 'meta_data.number',
- 'suffix' => 'suffix',
- 'placeholder' => 'Placeholder',
- 'required' => true,
- 'help' => 'Add additional information here',
- 'tooltip' => 'Tooltip information here'
- ]
- ],
-);
-```
-
diff --git a/packages/js/product-editor/src/blocks/generic/number/block.json b/packages/js/product-editor/src/blocks/generic/number/block.json
deleted file mode 100644
index f7478ee7dc4..00000000000
--- a/packages/js/product-editor/src/blocks/generic/number/block.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-number-field",
- "title": "Product number control",
- "category": "woocommerce",
- "description": "A reusable number field for the product editor.",
- "keywords": [
- "products",
- "number",
- "input"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "property": {
- "type": "string"
- },
- "suffix": {
- "type": "string"
- },
- "help": {
- "type": "string"
- },
- "placeholder": {
- "type": "string"
- },
- "min": {
- "type": "number"
- },
- "max": {
- "type": "number"
- },
- "tooltip": {
- "type": "string"
- },
- "required": {
- "type": "boolean",
- "default": false
- },
- "step": {
- "type": "number",
- "default": 1
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/number/edit.tsx b/packages/js/product-editor/src/blocks/generic/number/edit.tsx
deleted file mode 100644
index 68c72a1996a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/number/edit.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-import { __, sprintf } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { NumberBlockAttributes } from './types';
-import { useValidation } from '../../../contexts/validation-context';
-import { NumberControl } from '../../../components/number-control';
-import { useProductEdits } from '../../../hooks/use-product-edits';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< NumberBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const {
- label,
- property,
- suffix,
- placeholder,
- help,
- min,
- max,
- required,
- tooltip,
- disabled,
- step,
- } = attributes;
- const [ value, setValue ] = useProductEntityProp( property, {
- postType,
- fallbackValue: '',
- } );
- const { hasEdit } = useProductEdits();
-
- const { error, validate } = useValidation< Product >(
- property,
- async function validator() {
- if (
- typeof min === 'number' &&
- value &&
- parseFloat( value ) < min
- ) {
- return {
- message: sprintf(
- // translators: %d is the minimum value of the number input.
- __(
- 'Value must be greater than or equal to %d',
- 'woocommerce'
- ),
- min
- ),
- };
- }
- if (
- typeof max === 'number' &&
- value &&
- parseFloat( value ) > max
- ) {
- return {
- message: sprintf(
- // translators: %d is the minimum value of the number input.
- __(
- 'Value must be less than or equal to %d',
- 'woocommerce'
- ),
- min
- ),
- };
- }
- if ( required && ! value ) {
- return {
- message: __( 'This field is required.', 'woocommerce' ),
- };
- }
- },
- [ value ]
- );
- return (
- <div { ...blockProps }>
- <NumberControl
- label={ label }
- onChange={ setValue }
- value={ value || '' }
- help={ help }
- suffix={ suffix }
- placeholder={ placeholder }
- error={ error }
- onBlur={ () => {
- if ( hasEdit( property ) ) {
- validate();
- }
- } }
- required={ required }
- tooltip={ tooltip }
- disabled={ disabled }
- step={ step }
- min={ min }
- max={ max }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/number/editor.scss b/packages/js/product-editor/src/blocks/generic/number/editor.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/js/product-editor/src/blocks/generic/number/index.ts b/packages/js/product-editor/src/blocks/generic/number/index.ts
deleted file mode 100644
index b020ce0d32a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/number/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/number/types.ts b/packages/js/product-editor/src/blocks/generic/number/types.ts
deleted file mode 100644
index 7872fded7c5..00000000000
--- a/packages/js/product-editor/src/blocks/generic/number/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface NumberBlockAttributes extends BlockAttributes {
- label: string;
- property: string;
- help?: string;
- suffix?: string;
- placeholder?: string;
- min?: number;
- max?: number;
- required?: boolean;
- tooltip?: string;
- step?: number;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/README.md b/packages/js/product-editor/src/blocks/generic/pricing/README.md
deleted file mode 100644
index b74a550b982..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# woocommerce/product-pricing-field
-
-A product price block with currency display.
-
-
-
-## Attributes
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property in which the price value is stored.
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Label that appears on top of the price field.
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the price field.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-Tooltip text that is shown when hovering the icon at the side of the label.
-
-## Usage
-
-Here's the code that adds the field from the screenshot after the Summary field:
-
-```php
-<?php
-
-if ( ! function_exists( 'add_pricing_field' ) ) {
- function add_pricing_field( $product_summary_field ) {
- $product_summary_field->get_parent()->add_block(
- [
- 'id' => 'example-pricing-field',
- 'blockName' => 'woocommerce/product-pricing-field',
- 'order' => $product_summary_field->get_order() + 5,
- 'attributes' => [
- 'label' => __( 'Example price field', 'woocommerce'),
- 'property' => 'custom_price',
- 'help' => 'This is a help text',
- 'tooltip' => 'This is a tooltip',
- ],
- ]
- );
- }
-}
-
-if ( ! function_exists( 'example_hook_up_block_template_modifications_pricing' ) ) {
- function example_hook_up_block_template_modifications_pricing() {
- add_action(
- 'woocommerce_block_template_area_product-form_after_add_block_product-summary',
- 'add_pricing_field'
- );
- }
-}
-
-add_action( 'init', 'example_hook_up_block_template_modifications_pricing', 0 );
-```
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/block.json b/packages/js/product-editor/src/blocks/generic/pricing/block.json
deleted file mode 100644
index a5bb05d3f3b..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/block.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-pricing-field",
- "description": "A product price block with currency display.",
- "title": "Product pricing",
- "category": "widgets",
- "keywords": [
- "products",
- "price"
- ],
- "textdomain": "default",
- "attributes": {
- "property": {
- "type": "string",
- "role": "content"
- },
- "label": {
- "type": "string"
- },
- "help": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/edit.tsx b/packages/js/product-editor/src/blocks/generic/pricing/edit.tsx
deleted file mode 100644
index ace4117e558..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/edit.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Link } from '@woocommerce/components';
-import { getNewPath } from '@woocommerce/navigation';
-import { recordEvent } from '@woocommerce/tracks';
-import { useInstanceId } from '@wordpress/compose';
-import { createElement, createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useCurrencyInputProps } from '../../../hooks/use-currency-input-props';
-import { PricingBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { Label } from '../../../components/label/label';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< PricingBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const {
- property,
- label = __( 'Price', 'woocommerce' ),
- help,
- disabled,
- tooltip,
- } = attributes;
- const [ price, setPrice ] = useProductEntityProp< string >( property, {
- postType,
- fallbackValue: '',
- } );
- const inputProps = useCurrencyInputProps( {
- value: price || '',
- onChange: setPrice,
- } );
-
- const interpolatedHelp = help
- ? createInterpolateElement( help, {
- PricingTab: (
- <Link
- href={ getNewPath( { tab: 'pricing' } ) }
- onClick={ () => {
- recordEvent( 'product_pricing_help_click' );
- } }
- />
- ),
- } )
- : null;
-
- const priceId = useInstanceId(
- BaseControl,
- 'wp-block-woocommerce-product-pricing-field'
- ) as string;
-
- return (
- <div { ...blockProps }>
- <BaseControl id={ priceId } help={ interpolatedHelp }>
- <InputControl
- { ...inputProps }
- disabled={ disabled }
- id={ priceId }
- name={ property }
- label={
- tooltip ? (
- <Label label={ label } tooltip={ tooltip } />
- ) : (
- label
- )
- }
- />
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/editor.scss b/packages/js/product-editor/src/blocks/generic/pricing/editor.scss
deleted file mode 100644
index 402bc2e86ec..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/editor.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.components-currency-control {
- .components-input-control__prefix {
- color: $gray-700;
- word-break: normal;
- }
-
- .components-input-control__input {
- text-align: right;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/index.ts b/packages/js/product-editor/src/blocks/generic/pricing/index.ts
deleted file mode 100644
index f14f7f719b0..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/pricing/types.ts b/packages/js/product-editor/src/blocks/generic/pricing/types.ts
deleted file mode 100644
index a02e7b3c1dc..00000000000
--- a/packages/js/product-editor/src/blocks/generic/pricing/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface PricingBlockAttributes extends BlockAttributes {
- property: string;
- label: string;
- help?: string;
- tooltip?: string;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/radio/README.md b/packages/js/product-editor/src/blocks/generic/radio/README.md
deleted file mode 100644
index 6b91be995b0..00000000000
--- a/packages/js/product-editor/src/blocks/generic/radio/README.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# woocommerce/product-radio-field block
-
-Radio button field for the product editor.
-
-
-
-## Attributes
-
-### title
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-### description
-
-- **Type:** `String`
-- **Required:** `No`
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-### options
-
-- **Type:** `Array`
-- **Required:** `Yes`
-
-### disabled
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-## Usage
-
-Here's an example of the usage on the "Charge sales tax on" field in the Pricing section:
-
-```php
-$product_pricing_section->add_block(
- [
- 'id' => 'product-sale-tax',
- 'blockName' => 'woocommerce/product-radio-field',
- 'order' => 30,
- 'attributes' => [
- 'title' => __( 'Charge sales tax on', 'woocommerce' ),
- 'property' => 'tax_status',
- 'options' => [
- [
- 'label' => __( 'Product and shipping', 'woocommerce' ),
- 'value' => 'taxable',
- ],
- [
- 'label' => __( 'Only shipping', 'woocommerce' ),
- 'value' => 'shipping',
- ],
- [
- 'label' => __( "Don't charge tax", 'woocommerce' ),
- 'value' => 'none',
- ],
- ],
- ],
- ]
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/radio/block.json b/packages/js/product-editor/src/blocks/generic/radio/block.json
deleted file mode 100644
index 6f86d6b6d9a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/radio/block.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-radio-field",
- "title": "Product radio control",
- "category": "woocommerce",
- "description": "The product radio.",
- "keywords": [
- "products",
- "radio",
- "input"
- ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string"
- },
- "description": {
- "type": "string"
- },
- "property": {
- "type": "string"
- },
- "options": {
- "type": "array",
- "items": {
- "type": "object"
- },
- "default": [],
- "role": "content"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/radio/edit.tsx b/packages/js/product-editor/src/blocks/generic/radio/edit.tsx
deleted file mode 100644
index e781b217e43..00000000000
--- a/packages/js/product-editor/src/blocks/generic/radio/edit.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-import { RadioField } from '../../../components/radio-field';
-import { RadioBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< RadioBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { description, options, property, title, disabled } = attributes;
- const [ value, setValue ] = useProductEntityProp< string >( property, {
- postType,
- fallbackValue: '',
- } );
-
- return (
- <div { ...blockProps }>
- <RadioField
- title={ title }
- description={ description }
- selected={ value }
- options={ options }
- onChange={ ( selected: string ) => setValue( selected || '' ) }
- disabled={ disabled }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/radio/index.ts b/packages/js/product-editor/src/blocks/generic/radio/index.ts
deleted file mode 100644
index f14f7f719b0..00000000000
--- a/packages/js/product-editor/src/blocks/generic/radio/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/radio/types.ts b/packages/js/product-editor/src/blocks/generic/radio/types.ts
deleted file mode 100644
index b984f0b5d9a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/radio/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface RadioBlockAttributes extends BlockAttributes {
- title: string;
- description: string;
- property: string;
- options: [];
- disabled?: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section-description/block.json b/packages/js/product-editor/src/blocks/generic/section-description/block.json
deleted file mode 100644
index 1ce0038b870..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section-description/block.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-section-description",
- "title": "Product section description",
- "category": "woocommerce",
- "description": "The product section description.",
- "keywords": [
- "products",
- "section",
- "description"
- ],
- "textdomain": "default",
- "attributes": {
- "content": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/section-description/edit.tsx b/packages/js/product-editor/src/blocks/generic/section-description/edit.tsx
deleted file mode 100644
index 34973fe34c9..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section-description/edit.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-import { BlockFill } from '../../../components/block-slot-fill';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { SectionDescriptionBlockAttributes } from './types';
-
-export function SectionDescriptionBlockEdit( {
- attributes,
-}: ProductEditorBlockEditProps< SectionDescriptionBlockAttributes > ) {
- const { content } = attributes;
- const blockProps = useWooBlockProps( attributes );
-
- return (
- <BlockFill
- { ...blockProps }
- name="section-description"
- slotContainerBlockName="woocommerce/product-section"
- >
- <div>{ content }</div>
- </BlockFill>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section-description/index.ts b/packages/js/product-editor/src/blocks/generic/section-description/index.ts
deleted file mode 100644
index 257a737a345..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section-description/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { SectionDescriptionBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: SectionDescriptionBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section-description/types.ts b/packages/js/product-editor/src/blocks/generic/section-description/types.ts
deleted file mode 100644
index fb5216c8b55..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section-description/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SectionDescriptionBlockAttributes extends BlockAttributes {
- content: string;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section/block.json b/packages/js/product-editor/src/blocks/generic/section/block.json
deleted file mode 100644
index e4b25ea8d99..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section/block.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-section",
- "title": "Product section",
- "category": "woocommerce",
- "description": "The product section.",
- "keywords": [
- "products",
- "section",
- "group"
- ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string"
- },
- "description": {
- "type": "string",
- "role": "content"
- },
- "blockGap": {
- "type": "string",
- "enum": [
- "unit-20",
- "unit-30",
- "unit-40"
- ],
- "default": "unit-20"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/section/edit.tsx b/packages/js/product-editor/src/blocks/generic/section/edit.tsx
deleted file mode 100644
index 1876d89c5f4..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section/edit.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { SectionBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { SectionHeader } from '../../../components/section-header';
-
-export function SectionBlockEdit( {
- attributes,
-}: ProductEditorBlockEditProps< SectionBlockAttributes > ) {
- const { description, title, blockGap } = attributes;
-
- const blockProps = useWooBlockProps( attributes );
- const innerBlockProps = useInnerBlocksProps(
- {
- className: clsx(
- 'wp-block-woocommerce-product-section-header__content',
- `wp-block-woocommerce-product-section-header__content--block-gap-${ blockGap }`
- ),
- },
- { templateLock: 'all' }
- );
- const SectionTagName = title ? 'fieldset' : 'div';
-
- return (
- <SectionTagName { ...blockProps }>
- { title && (
- <SectionHeader
- description={ description }
- sectionTagName={ SectionTagName }
- title={ title }
- />
- ) }
-
- <div { ...innerBlockProps } />
- </SectionTagName>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section/editor.scss b/packages/js/product-editor/src/blocks/generic/section/editor.scss
deleted file mode 100644
index 24de8efee28..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section/editor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.wp-block-woocommerce-product-section-header__content {
- .wp-block-woocommerce-product-section {
- &:first-child {
- margin-top: 0;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section/index.ts b/packages/js/product-editor/src/blocks/generic/section/index.ts
deleted file mode 100644
index 2dd7ff371ce..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { SectionBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: SectionBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/section/types.ts b/packages/js/product-editor/src/blocks/generic/section/types.ts
deleted file mode 100644
index 402141a2f3a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/section/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SectionBlockAttributes extends BlockAttributes {
- title?: string;
- description?: string;
- blockGap: 'lg' | '2xlg';
-}
diff --git a/packages/js/product-editor/src/blocks/generic/select/README.md b/packages/js/product-editor/src/blocks/generic/select/README.md
deleted file mode 100644
index 8de8272181b..00000000000
--- a/packages/js/product-editor/src/blocks/generic/select/README.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# woocommerce/product-select-field
-
-A reusable select field for the product editor.
-
-## Attributes
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Label that appears on top of the field.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property in which the value is stored.
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-If provided, shows a tooltip next to the label with additional information.
-
-### multiple
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-Indicates where the select is of multiple choices or not.
-
-### disabled
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-Indicates and enforces that the field is disabled.
-
-### options
-
-- **Type:** `Array`
-- **Items:** `Object`
- - `value`
- - **Type:** `String`
- - **Required:** `Yes`
- - `label`
- - **Type:** `String`
- - **Required:** `Yes`
- - `disabled`
- - **Type:** `Boolean`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the options of the select field.
-
-## Usage
-
-Here's a snippet that adds tax classes as options to the
-single selection field:
-
-```php
-$section->add_block(
- array(
- 'id' => 'unique-block-id',
- 'blockName' => 'woocommerce/product-select-field',
- 'order' => 13,
- 'attributes' => array(
- 'label' => 'Tax class',
- 'property' => 'tax_class',
- 'help' => 'Apply a tax rate if this product qualifies for tax reduction or exemption.',
- 'options' => array(
- array(
- 'value' => 'Standard rate',
- 'label' => '',
- ),
- array(
- 'value' => 'Reduced rate',
- 'label' => 'reduced-rate',
- ),
- array(
- 'value' => 'Zero rate',
- 'label' => 'zero-rate',
- ),
- ),
- ),
- )
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/select/block.json b/packages/js/product-editor/src/blocks/generic/select/block.json
deleted file mode 100644
index 35025bcb8a4..00000000000
--- a/packages/js/product-editor/src/blocks/generic/select/block.json
+++ /dev/null
@@ -1,61 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-select-field",
- "title": "Product select field",
- "category": "woocommerce",
- "description": "A select field for use in the product editor.",
- "keywords": [ "products", "select" ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "property": {
- "type": "string"
- },
- "help": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean"
- },
- "multiple": {
- "type": "boolean",
- "default": false
- },
- "options": {
- "type": "array",
- "items": {
- "type": "object",
- "properties": {
- "label": {
- "type": "string"
- },
- "value": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- }
- },
- "default": []
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [ "postType" ]
-}
diff --git a/packages/js/product-editor/src/blocks/generic/select/edit.tsx b/packages/js/product-editor/src/blocks/generic/select/edit.tsx
deleted file mode 100644
index 04fad89ab05..00000000000
--- a/packages/js/product-editor/src/blocks/generic/select/edit.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { SelectControl } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import type { ProductEditorBlockEditProps } from '../../../types';
-import type { SelectBlockAttributes } from './types';
-import { Label } from '../../../components/label/label';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< SelectBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const {
- property,
- label,
- note,
- help,
- tooltip,
- disabled,
- options,
- multiple,
- } = attributes;
-
- const [ value, setValue ] = useProductEntityProp< string | string[] >(
- property,
- {
- postType,
- fallbackValue: '',
- }
- );
-
- function renderHelp() {
- if ( help ) {
- return (
- <span
- dangerouslySetInnerHTML={ { __html: sanitizeHTML( help ) } }
- />
- );
- }
- }
-
- // This check is necessary to fix the issue with the SelectControl component types.
- // The SelectControl component does not handle the value prop correctly when it is an array or a string.
- if ( Array.isArray( value ) ) {
- return (
- <div { ...blockProps }>
- <SelectControl
- value={ value }
- disabled={ disabled }
- label={
- <Label
- label={ label }
- note={ note }
- tooltip={ tooltip }
- />
- }
- onChange={ setValue }
- help={ renderHelp() }
- options={ options }
- multiple={ multiple as never }
- />
- </div>
- );
- }
-
- return (
- <div { ...blockProps }>
- <SelectControl
- value={ value }
- disabled={ disabled }
- label={
- <Label label={ label } note={ note } tooltip={ tooltip } />
- }
- onChange={ setValue }
- help={ renderHelp() }
- options={ options }
- multiple={ multiple as never }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/select/index.ts b/packages/js/product-editor/src/blocks/generic/select/index.ts
deleted file mode 100644
index 9a4bc680ef9..00000000000
--- a/packages/js/product-editor/src/blocks/generic/select/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockConfiguration } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { SelectBlockAttributes } from './types';
-
-const { name, ...metadata } =
- blockConfiguration as BlockConfiguration< SelectBlockAttributes >;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/select/types.ts b/packages/js/product-editor/src/blocks/generic/select/types.ts
deleted file mode 100644
index cd194b84719..00000000000
--- a/packages/js/product-editor/src/blocks/generic/select/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-
-export interface SelectBlockAttributes extends BlockAttributes {
- property: string;
- label: string;
- note?: string;
- help?: string;
- tooltip?: string;
- placeholder?: string;
- disabled?: boolean;
- multiple?: boolean;
- options?: Array< { label: string; value: string } >;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection-description/block.json b/packages/js/product-editor/src/blocks/generic/subsection-description/block.json
deleted file mode 100644
index 04f921b9539..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection-description/block.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-subsection-description",
- "title": "Product subsection description",
- "category": "woocommerce",
- "description": "The product subsection description.",
- "keywords": [
- "products",
- "subsection",
- "description"
- ],
- "textdomain": "default",
- "attributes": {
- "content": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/subsection-description/edit.tsx b/packages/js/product-editor/src/blocks/generic/subsection-description/edit.tsx
deleted file mode 100644
index c7b89005ec4..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection-description/edit.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-import { BlockFill } from '../../../components/block-slot-fill';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { SubsectionDescriptionBlockAttributes } from './types';
-
-export function SubsectionDescriptionBlockEdit( {
- attributes,
-}: ProductEditorBlockEditProps< SubsectionDescriptionBlockAttributes > ) {
- const { content } = attributes;
- const blockProps = useWooBlockProps( attributes );
-
- return (
- <BlockFill
- { ...blockProps }
- name="section-description"
- slotContainerBlockName="woocommerce/product-subsection"
- >
- <div>{ content }</div>
- </BlockFill>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection-description/index.ts b/packages/js/product-editor/src/blocks/generic/subsection-description/index.ts
deleted file mode 100644
index e10bb556455..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection-description/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { SubsectionDescriptionBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: SubsectionDescriptionBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection-description/types.ts b/packages/js/product-editor/src/blocks/generic/subsection-description/types.ts
deleted file mode 100644
index e3f351fef5c..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection-description/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SubsectionDescriptionBlockAttributes extends BlockAttributes {
- content: string;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection/block.json b/packages/js/product-editor/src/blocks/generic/subsection/block.json
deleted file mode 100644
index c444bbb89e6..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection/block.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-subsection",
- "title": "Product subsection",
- "category": "woocommerce",
- "description": "The product subsection.",
- "keywords": [ "products", "subsection", "group" ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string"
- },
- "description": {
- "type": "string",
- "role": "content"
- },
- "blockGap": {
- "type": "string",
- "enum": [ "unit-20", "unit-30", "unit-40" ],
- "default": "unit-20"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection/edit.tsx b/packages/js/product-editor/src/blocks/generic/subsection/edit.tsx
deleted file mode 100644
index 816a52372eb..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection/edit.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { SubsectionBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { SectionHeader } from '../../../components/section-header';
-
-export function SubsectionBlockEdit( {
- attributes,
-}: ProductEditorBlockEditProps< SubsectionBlockAttributes > ) {
- const { description, title, blockGap } = attributes;
-
- const blockProps = useWooBlockProps( attributes );
- const innerBlockProps = useInnerBlocksProps(
- {
- className: clsx(
- 'wp-block-woocommerce-product-section-header__content',
- `wp-block-woocommerce-product-section-header__content--block-gap-${ blockGap }`
- ),
- },
- { templateLock: 'all' }
- );
- const SubsectionTagName = title ? 'fieldset' : 'div';
-
- return (
- <SubsectionTagName { ...blockProps }>
- { title && (
- <SectionHeader
- description={ description }
- sectionTagName={ SubsectionTagName }
- title={ title }
- />
- ) }
-
- <div { ...innerBlockProps } />
- </SubsectionTagName>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection/index.ts b/packages/js/product-editor/src/blocks/generic/subsection/index.ts
deleted file mode 100644
index 3a0a9d16cc3..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { SubsectionBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: SubsectionBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/subsection/types.ts b/packages/js/product-editor/src/blocks/generic/subsection/types.ts
deleted file mode 100644
index 86a2886e9d1..00000000000
--- a/packages/js/product-editor/src/blocks/generic/subsection/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SubsectionBlockAttributes extends BlockAttributes {
- title?: string;
- description?: string;
- blockGap: 'lg' | '2xlg';
-}
diff --git a/packages/js/product-editor/src/blocks/generic/tab/block.json b/packages/js/product-editor/src/blocks/generic/tab/block.json
deleted file mode 100644
index 20c1e649166..00000000000
--- a/packages/js/product-editor/src/blocks/generic/tab/block.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-tab",
- "title": "Product tab",
- "category": "woocommerce",
- "description": "The product tab.",
- "keywords": [
- "products",
- "tab",
- "group"
- ],
- "textdomain": "default",
- "attributes": {
- "id": {
- "type": "string"
- },
- "title": {
- "type": "string"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "providesContext": {
- "isInSelectedTab": "isSelected"
- },
- "usesContext": [
- "selectedTab"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/tab/edit.tsx b/packages/js/product-editor/src/blocks/generic/tab/edit.tsx
deleted file mode 100644
index 6bb662ab016..00000000000
--- a/packages/js/product-editor/src/blocks/generic/tab/edit.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { InnerBlocks } from '@wordpress/block-editor';
-import clsx from 'clsx';
-import { createElement, useEffect, useState } from '@wordpress/element';
-import type { BlockAttributes } from '@wordpress/blocks';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { __experimentalErrorBoundary as ErrorBoundary } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { TabButton } from './tab-button';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export interface TabBlockAttributes extends BlockAttributes {
- id: string;
- title: string;
- isSelected?: boolean;
-}
-
-export function TabBlockEdit( {
- setAttributes,
- attributes,
- context,
-}: ProductEditorBlockEditProps< TabBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { id, title, _templateBlockOrder: order, isSelected } = attributes;
-
- const classes = clsx( 'wp-block-woocommerce-product-tab__content', {
- 'is-selected': isSelected,
- } );
-
- const [ canRenderChildren, setCanRenderChildren ] = useState( false );
-
- useEffect( () => {
- if ( ! context.selectedTab ) return;
-
- const isSelectedInContext = context.selectedTab === id;
-
- setAttributes( { isSelected: isSelectedInContext } );
-
- if ( isSelectedInContext ) {
- setCanRenderChildren( true );
- return;
- }
-
- const timeoutId = setTimeout( setCanRenderChildren, 300, true );
- return () => clearTimeout( timeoutId );
- }, [ context.selectedTab, id, setAttributes ] );
-
- return (
- <div { ...blockProps }>
- <TabButton id={ id } selected={ isSelected } order={ order }>
- { title }
- </TabButton>
- <div
- id={ `woocommerce-product-tab__${ id }-content` }
- aria-labelledby={ `woocommerce-product-tab__${ id }` }
- role="tabpanel"
- className={ classes }
- >
- <ErrorBoundary
- errorMessage={ __(
- 'An unexpected error occurred in this tab. Make sure any unsaved changes are saved and then try reloading the page to see if the error recurs.',
- 'woocommerce'
- ) }
- onError={ ( error, errorInfo ) => {
- // eslint-disable-next-line no-console
- console.error(
- `Error caught in tab '${ id }'`,
- error,
- errorInfo
- );
- } }
- >
- { canRenderChildren && (
- <InnerBlocks templateLock="contentOnly" />
- ) }
- </ErrorBoundary>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/tab/editor.scss b/packages/js/product-editor/src/blocks/generic/tab/editor.scss
deleted file mode 100644
index e42f1592fec..00000000000
--- a/packages/js/product-editor/src/blocks/generic/tab/editor.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.wp-block-woocommerce-product-tab__content {
- &:not(.is-selected) {
- display: none;
- }
-
- .woocommerce-error-boundary {
- margin-top: $gap-largest;
- }
-}
-
-// Remove the Gutenberg selected outline.
-.wp-block-woocommerce-product-tab:after {
- display: none;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/tab/index.ts b/packages/js/product-editor/src/blocks/generic/tab/index.ts
deleted file mode 100644
index 2b7a711433c..00000000000
--- a/packages/js/product-editor/src/blocks/generic/tab/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { TabBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: TabBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/tab/tab-button.tsx b/packages/js/product-editor/src/blocks/generic/tab/tab-button.tsx
deleted file mode 100644
index ab4386393c6..00000000000
--- a/packages/js/product-editor/src/blocks/generic/tab/tab-button.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Fill } from '@wordpress/components';
-import clsx from 'clsx';
-import { createElement, Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { TABS_SLOT_NAME } from '../../../components/tabs/constants';
-
-export const DEFAULT_TAB_ORDER = 100;
-
-const OrderedWrapper = ( {
- children,
-}: {
- order: number;
- children: JSX.Element | JSX.Element[];
-} ) => <>{ children }</>;
-
-export function TabButton( {
- children,
- className,
- id,
- order = DEFAULT_TAB_ORDER,
- selected = false,
-}: {
- children: string | JSX.Element;
- className?: string;
- id: string;
- selected?: boolean;
- order?: number;
-} ) {
- const classes = clsx(
- 'wp-block-woocommerce-product-tab__button',
- className,
- { 'is-selected': selected }
- );
-
- return (
- <Fill name={ TABS_SLOT_NAME }>
- { ( fillProps ) => {
- const { onClick } = fillProps;
- return (
- <OrderedWrapper order={ order }>
- <Button
- key={ id }
- className={ classes }
- onClick={ () => onClick( id ) }
- id={ `woocommerce-product-tab__${ id }` }
- aria-controls={ `woocommerce-product-tab__${ id }-content` }
- aria-selected={ selected }
- tabIndex={ selected ? undefined : -1 }
- role="tab"
- >
- { children }
- </Button>
- </OrderedWrapper>
- );
- } }
- </Fill>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md b/packages/js/product-editor/src/blocks/generic/taxonomy/README.md
deleted file mode 100644
index 652a6314340..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/README.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# woocommerce/product-taxonomy-field block
-
-This is a block that displays a taxonomy field, allowing searching, selection, and creation of new items, to be used in a product context.
-
-
-
-## Attributes
-
-### slug
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-The taxonomy slug.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property name in which the taxonomy value is stored in the product.
-
-### label
-
-- **Type:** `String`
-- **Required:** `No`
-
-Label that appears on top of the field.
-
-### createTitle
-
-- **Type:** `String`
-- **Required:** `No`
-
-Title of the dialog that appears when creating a new taxonomy.
-
-### dialogNameHelpText
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears for the name field in the dialog that appears when creating a new taxonomy.
-
-### parentTaxonomyText
-
-- **Type:** `String`
-- **Required:** `No`
-
-Label for the parent taxonomy field in the dialog that appears when creating a new taxonomy.
-
-## Usage
-
-Please note that to use this block you need to have the custom taxonomy registered in the backend, attached to the products post type and added to the REST API. Here's a snippet that shows how to add an already registered taxonomy to the REST API:
-
-```php
-function YOUR_PREFIX_rest_api_prepare_custom1_to_product( $response, $post ) {
- $post_id = $post->get_id();
-
- if ( empty( $response->data[ 'custom1' ] ) ) {
- $terms = [];
-
- foreach ( wp_get_post_terms( $post_id, 'custom-taxonomy' ) as $term ) {
- $terms[] = [
- 'id' => $term->term_id,
- 'name' => $term->name,
- 'slug' => $term->slug,
- ];
- }
-
- $response->data[ 'custom1' ] = $terms;
- }
-
- return $response;
-}
-
-add_filter( 'woocommerce_rest_prepare_product_object', 'YOUR_PREFIX_rest_api_prepare_custom1_to_product', 10, 2 );
-
-function YOUR_PREFIX_rest_api_add_custom1_to_product( $product, $request, $creating = true ) {
- $product_id = $product->get_id();
- $params = $request->get_params();
- $custom1s = isset( $params['custom1'] ) ? $params['custom1'] : array();
-
- if ( ! empty( $custom1s ) ) {
- if ( $custom1s[0]['id'] ) {
- $custom1s = array_map(
- function ( $custom1 ) {
- return absint( $custom1['id'] );
- },
- $custom1s
- );
- } else {
- $custom1s = array_map( 'absint', $custom1s );
- }
- wp_set_object_terms( $product_id, $custom1s, 'custom-taxonomy' );
- }
-}
-
-add_filter( 'woocommerce_rest_insert_product_object', 'YOUR_PREFIX_rest_api_add_custom1_to_product', 10, 3 );
-```
-
-Here's a snippet that shows how it is used for the Categories field:
-
-```php
-$product_catalog_section->add_block(
- [
- 'id' => 'product-categories',
- 'blockName' => 'woocommerce/product-taxonomy-field',
- 'order' => 10,
- 'attributes' => [
- 'slug' => 'product_cat',
- 'property' => 'categories',
- 'label' => __( 'Categories', 'woocommerce' ),
- 'createTitle' => __( 'Create new category', 'woocommerce' ),
- 'dialogNameHelpText' => __( 'Shown to customers on the product page.', 'woocommerce' ),
- 'parentTaxonomyText' => __( 'Parent category', 'woocommerce' ),
- ],
- ]
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json b/packages/js/product-editor/src/blocks/generic/taxonomy/block.json
deleted file mode 100644
index 10abd0a534f..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/block.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-taxonomy-field",
- "title": "Taxonomy",
- "category": "widgets",
- "description": "A block that displays a taxonomy field, allowing searching, selection, and creation of new items",
- "keywords": [ "taxonomy" ],
- "textdomain": "default",
- "attributes": {
- "slug": {
- "type": "string",
- "role": "content"
- },
- "property": {
- "type": "string",
- "role": "content"
- },
- "label": {
- "type": "string",
- "role": "content"
- },
- "createTitle": {
- "type": "string",
- "role": "content"
- },
- "dialogNameHelpText": {
- "type": "string",
- "role": "content"
- },
- "parentTaxonomyText": {
- "type": "string",
- "role": "content"
- },
- "help": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [ "postType", "isInSelectedTab" ]
-}
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/create-taxonomy-modal.tsx b/packages/js/product-editor/src/blocks/generic/taxonomy/create-taxonomy-modal.tsx
deleted file mode 100644
index 520c155cbeb..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/create-taxonomy-modal.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { BaseControl, Button, Modal, TextControl } from '@wordpress/components';
-import {
- useState,
- useEffect,
- createElement,
- createInterpolateElement,
- useCallback,
-} from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
- __experimentalSelectTreeControl as SelectTree,
- TreeItemType as Item,
-} from '@woocommerce/components';
-import { useDebounce, useInstanceId } from '@wordpress/compose';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import type { Taxonomy } from '../../../types';
-import useTaxonomySearch from './use-taxonomy-search';
-
-type CreateTaxonomyModalProps = {
- initialName?: string;
- dialogNameHelpText?: string;
- parentTaxonomyText?: string;
- hierarchical: boolean;
- slug: string;
- title: string;
- onCancel: () => void;
- onCreate: ( taxonomy: Taxonomy ) => void;
-};
-
-export const CreateTaxonomyModal = ( {
- onCancel,
- onCreate,
- initialName,
- slug,
- hierarchical,
- dialogNameHelpText,
- parentTaxonomyText,
- title,
-}: CreateTaxonomyModalProps ) => {
- const [ categoryParentTypedValue, setCategoryParentTypedValue ] =
- useState( '' );
- const [ allEntries, setAllEntries ] = useState< Taxonomy[] >( [] );
-
- const { searchEntity, isResolving } = useTaxonomySearch( slug );
-
- const searchDelayed = useDebounce(
- useCallback(
- ( val ) => searchEntity( val || '' ).then( setAllEntries ),
- []
- ),
- 150
- );
-
- useEffect( () => {
- searchDelayed( '' );
- }, [] );
-
- const { saveEntityRecord } = useDispatch( 'core' );
- const [ isCreating, setIsCreating ] = useState( false );
- const [ errorMessage, setErrorMessage ] = useState< string | null >( null );
- const [ name, setName ] = useState( initialName || '' );
- const [ parent, setParent ] = useState< Taxonomy | null >( null );
-
- const onSave = async () => {
- setErrorMessage( null );
- setIsCreating( true );
- try {
- const newTaxonomy: Taxonomy = await saveEntityRecord(
- 'taxonomy',
- slug,
- {
- name,
- parent: parent ? parent.id : null,
- },
- {
- throwOnError: true,
- }
- );
- setIsCreating( false );
- onCreate( newTaxonomy );
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- } catch ( e: any ) {
- setIsCreating( false );
- if ( e.message ) {
- setErrorMessage( e.message );
- } else {
- setErrorMessage(
- __( `Failed to create taxonomy`, 'woocommerce' )
- );
- throw e;
- }
- }
- };
-
- const id = useInstanceId( BaseControl, 'taxonomy_name' ) as string;
-
- const selectId = useInstanceId(
- SelectTree,
- 'parent-taxonomy-select'
- ) as string;
-
- return (
- <Modal
- title={ title }
- onRequestClose={ onCancel }
- className="woocommerce-create-new-taxonomy-modal"
- >
- <div className="woocommerce-create-new-taxonomy-modal__wrapper">
- <BaseControl
- id={ id }
- label={ __( 'Name', 'woocommerce' ) }
- help={ errorMessage || dialogNameHelpText }
- className={ clsx( {
- 'has-error': errorMessage,
- } ) }
- >
- <TextControl
- id={ id }
- value={ name }
- onChange={ setName }
- />
- </BaseControl>
- { hierarchical && (
- <SelectTree
- isLoading={ isResolving }
- label={ createInterpolateElement(
- `${
- parentTaxonomyText ||
- __( 'Parent', 'woocommerce' )
- } <optional/>`,
- {
- optional: (
- <span className="woocommerce-create-new-taxonomy-modal__optional">
- { __( '(optional)', 'woocommerce' ) }
- </span>
- ),
- }
- ) }
- id={ selectId }
- items={ allEntries.map( ( taxonomy ) => ( {
- label: taxonomy.name,
- value: String( taxonomy.id ),
- parent:
- taxonomy.parent > 0
- ? String( taxonomy.parent )
- : undefined,
- } ) ) }
- shouldNotRecursivelySelect
- selected={
- parent
- ? {
- value: String( parent.id ),
- label: parent.name,
- }
- : undefined
- }
- onSelect={ ( item: Item ) =>
- item &&
- setParent( {
- id: +item.value,
- name: item.label,
- parent: item.parent ? +item.parent : 0,
- } )
- }
- onRemove={ () => setParent( null ) }
- onInputChange={ ( value ) => {
- searchDelayed( value );
- setCategoryParentTypedValue( value || '' );
- } }
- createValue={ categoryParentTypedValue }
- />
- ) }
- <div className="woocommerce-create-new-taxonomy-modal__buttons">
- <Button
- variant="tertiary"
- onClick={ onCancel }
- disabled={ isCreating }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- variant="primary"
- disabled={ name.length === 0 || isCreating }
- isBusy={ isCreating }
- onClick={ onSave }
- >
- { __( 'Create', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- </Modal>
- );
-};
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx b/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
deleted file mode 100644
index 58ffd67055a..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/edit.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockAttributes } from '@wordpress/blocks';
-import {
- createElement,
- useState,
- Fragment,
- useCallback,
- useEffect,
-} from '@wordpress/element';
-import '@woocommerce/settings';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { __experimentalSelectTreeControl as SelectTreeControl } from '@woocommerce/components';
-import { useDebounce, useInstanceId } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { CreateTaxonomyModal } from './create-taxonomy-modal';
-import useTaxonomySearch from './use-taxonomy-search';
-import type {
- ProductEditorBlockEditProps,
- Taxonomy,
- TaxonomyMetadata,
-} from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { Label } from '../../../components/label/label';
-
-interface TaxonomyBlockAttributes extends BlockAttributes {
- label: string;
- help?: string;
- slug: string;
- property: string;
- createTitle: string;
- dialogNameHelpText?: string;
- parentTaxonomyText?: string;
- placeholder?: string;
-}
-
-export function Edit( {
- attributes,
- context: { postType, isInSelectedTab },
-}: ProductEditorBlockEditProps< TaxonomyBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { hierarchical }: TaxonomyMetadata = useSelect(
- ( select ) =>
- select( 'core' ).getTaxonomy( attributes.slug ) || {
- hierarchical: false,
- },
- [ attributes.slug ]
- );
- const {
- label,
- help,
- slug,
- property,
- createTitle,
- dialogNameHelpText,
- parentTaxonomyText,
- disabled,
- } = attributes;
- const [ searchValue, setSearchValue ] = useState( '' );
- const [ allEntries, setAllEntries ] = useState< Taxonomy[] >( [] );
-
- const { searchEntity, isResolving } = useTaxonomySearch( slug, {
- fetchParents: hierarchical,
- } );
- const searchDelayed = useDebounce(
- useCallback(
- ( val ) => {
- setSearchValue( val );
- searchEntity( val || '' ).then( setAllEntries );
- },
- [ hierarchical ]
- ),
- 150
- );
-
- useEffect( () => {
- if ( isInSelectedTab ) {
- searchDelayed( '' );
- }
- }, [ isInSelectedTab ] );
-
- const [ selectedEntries, setSelectedEntries ] = useProductEntityProp<
- Taxonomy[]
- >( property, { postType, fallbackValue: [] } );
-
- const mappedEntries = ( selectedEntries || [] ).map( ( b ) => ( {
- value: String( b.id ),
- label: b.name,
- } ) );
-
- const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
-
- const mappedAllEntries = allEntries.map( ( taxonomy ) => ( {
- parent:
- hierarchical && taxonomy.parent && taxonomy.parent > 0
- ? String( taxonomy.parent )
- : undefined,
- label: taxonomy.name,
- value: String( taxonomy.id ),
- } ) );
-
- function handleClear() {
- setSelectedEntries( [] );
- }
-
- return (
- <div { ...blockProps }>
- <>
- <SelectTreeControl
- id={
- useInstanceId(
- SelectTreeControl,
- 'woocommerce-taxonomy-select'
- ) as string
- }
- label={ <Label label={ label } tooltip={ help } /> }
- isLoading={ isResolving }
- disabled={ disabled }
- multiple
- createValue={ searchValue }
- onInputChange={ searchDelayed }
- shouldNotRecursivelySelect
- shouldShowCreateButton={ ( typedValue ) =>
- ! typedValue ||
- mappedAllEntries.findIndex(
- ( taxonomy ) =>
- taxonomy.label.toLowerCase() ===
- typedValue.toLowerCase()
- ) === -1
- }
- onCreateNew={ () => setShowCreateNewModal( true ) }
- items={ mappedAllEntries }
- selected={ mappedEntries }
- onSelect={ ( selectedItems ) => {
- if ( Array.isArray( selectedItems ) ) {
- setSelectedEntries( [
- ...selectedItems.map( ( i ) => ( {
- id: +i.value,
- name: i.label,
- parent: +( i.parent || 0 ),
- } ) ),
- ...( selectedEntries || [] ),
- ] );
- } else {
- setSelectedEntries( [
- {
- id: +selectedItems.value,
- name: selectedItems.label,
- parent: +( selectedItems.parent || 0 ),
- },
- ...( selectedEntries || [] ),
- ] );
- }
- } }
- onRemove={ ( removedItems ) => {
- if ( Array.isArray( removedItems ) ) {
- setSelectedEntries(
- ( selectedEntries || [] ).filter(
- ( taxonomy ) =>
- ! removedItems.find(
- ( item ) =>
- item.value ===
- String( taxonomy.id )
- )
- )
- );
- } else {
- setSelectedEntries(
- ( selectedEntries || [] ).filter(
- ( taxonomy ) =>
- String( taxonomy.id ) !==
- removedItems.value
- )
- );
- }
- } }
- onClear={ handleClear }
- isClearingAllowed={ ( selectedEntries || [] ).length > 0 }
- ></SelectTreeControl>
- { showCreateNewModal && (
- <CreateTaxonomyModal
- slug={ slug }
- hierarchical={ hierarchical }
- title={ createTitle }
- dialogNameHelpText={ dialogNameHelpText }
- parentTaxonomyText={ parentTaxonomyText }
- onCancel={ () => setShowCreateNewModal( false ) }
- onCreate={ ( taxonomy ) => {
- setShowCreateNewModal( false );
- setSearchValue( '' );
- setSelectedEntries( [
- {
- id: taxonomy.id,
- name: taxonomy.name,
- parent: taxonomy.parent,
- },
- ...( selectedEntries || [] ),
- ] );
- } }
- initialName={ searchValue }
- />
- ) }
- </>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/editor.scss b/packages/js/product-editor/src/blocks/generic/taxonomy/editor.scss
deleted file mode 100644
index cc6dea2051c..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/editor.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.components-modal__screen-overlay {
- .woocommerce-create-new-taxonomy-modal {
- min-width: 650px;
- overflow: visible;
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: $gap-smaller;
- justify-content: flex-end;
- }
-
- &__optional {
- color: $gray-700;
- }
- .components-modal__content { // make sure that inline popovers can exceed the dialog's limits
- overflow: visible;
- }
- }
-
- .components-base-control {
- margin-bottom: $gap;
- &__field {
- .components-base-control {
- margin-bottom: 0;
- }
- }
- }
-
- .has-error {
- .components-text-control__input {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
-}
-
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/index.ts b/packages/js/product-editor/src/blocks/generic/taxonomy/index.ts
deleted file mode 100644
index 76e14eaecea..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { Edit } from './edit';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/taxonomy/use-taxonomy-search.ts b/packages/js/product-editor/src/blocks/generic/taxonomy/use-taxonomy-search.ts
deleted file mode 100644
index 4f36f4cb921..00000000000
--- a/packages/js/product-editor/src/blocks/generic/taxonomy/use-taxonomy-search.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from '@wordpress/element';
-import { resolveSelect } from '@wordpress/data';
-import { escapeHTML } from '@woocommerce/components';
-/**
- * Internal dependencies
- */
-import type { Taxonomy } from '../../../types';
-
-async function getTaxonomiesMissingParents(
- taxonomies: Taxonomy[],
- taxonomyName: string
-): Promise< Taxonomy[] > {
- // Retrieve the missing parent objects incase not all of them were included.
- const missingParentIds: number[] = [];
-
- const taxonomiesLookup: Record< number, Taxonomy > = {};
- taxonomies.forEach( ( taxonomy ) => {
- taxonomiesLookup[ taxonomy.id ] = taxonomy;
- } );
- taxonomies.forEach( ( taxonomy ) => {
- if ( taxonomy.parent > 0 && ! taxonomiesLookup[ taxonomy.parent ] ) {
- missingParentIds.push( taxonomy.parent );
- }
- } );
- if ( missingParentIds.length > 0 ) {
- const parentTaxonomies = ( await resolveSelect(
- 'core'
- ).getEntityRecords( 'taxonomy', taxonomyName, {
- include: missingParentIds,
- } ) ) as Taxonomy[];
- if ( parentTaxonomies ) {
- return getTaxonomiesMissingParents(
- [ ...parentTaxonomies, ...taxonomies ],
- taxonomyName
- );
- }
- }
- return taxonomies;
-}
-
-const PAGINATION_SIZE = 30;
-
-interface UseTaxonomySearchOptions {
- fetchParents?: boolean;
-}
-
-const useTaxonomySearch = (
- taxonomyName: string,
- options: UseTaxonomySearchOptions = { fetchParents: true }
-): {
- searchEntity: ( search: string ) => Promise< Taxonomy[] >;
- isResolving: boolean;
-} => {
- const [ isSearching, setIsSearching ] = useState( false );
- async function searchEntity( search: string ): Promise< Taxonomy[] > {
- setIsSearching( true );
- let taxonomies: Taxonomy[] = [];
- try {
- const results = ( await resolveSelect( 'core' ).getEntityRecords(
- 'taxonomy',
- taxonomyName,
- {
- per_page: PAGINATION_SIZE,
- search: escapeHTML( search ),
- }
- ) ) as Taxonomy[];
- if ( results ) {
- taxonomies = results;
- if ( options?.fetchParents ) {
- taxonomies = await getTaxonomiesMissingParents(
- taxonomies,
- taxonomyName
- );
- }
- }
- } finally {
- setIsSearching( false );
- }
- return taxonomies;
- }
-
- return {
- searchEntity,
- isResolving: isSearching,
- };
-};
-
-export default useTaxonomySearch;
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/README.md b/packages/js/product-editor/src/blocks/generic/text-area/README.md
deleted file mode 100644
index 27d18c9688e..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/README.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# woocommerce/product-text-area-field
-
-A reusable text area field for the product editor, enhancing product data input with a multiline text area suitable for detailed information, descriptions, and more.
-
-## Attributes
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-The label appears above the textarea field.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-The product entity property where the value is stored.
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field, providing additional guidance to the user.
-
-### required
-
-- **Type:** `Boolean`|`String`
-- **Required:** `No`
-
-Indicates that the field is required.
-
-### disabled
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-Indicates that the field is not editable.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-Shows a tooltip next to the label with additional information when provided.
-
-### placeholder
-
-- **Type:** `String`
-- **Required:** `No`
-
-Placeholder text that appears within the textarea when it is empty.
-
-### mode
-
-- **Type:** `String`
-- **Required:** `No`
-- **Default:** `'rich-text'`
-
-Defines the editing mode of the textarea. Options are `'plain-text'` or `'rich-text'`.
-
-### allowedFormats
-
-- **Type:** `Array`
-- **Required:** `No`
-- **Default:** `['core/bold', 'core/italic', 'core/link', etc.]`
-
-Specifies the allowed formatting options when in 'rich-text' mode.
-
-### direction
-
-- **Type:** `String`
-- **Required:** `No`
-- **Default:** `'ltr'`
-- **Options:** `'ltr'`, `'rtl'`
-
-The text directionality for the textarea, supporting left-to-right (ltr) or right-to-left (rtl) content.
-
-### align
-
-- **Type:** `String`
-- **Required:** `No`
-- **Options:** `'left'`, `'center'`, `'right'`, `'justify'`
-
-Aligns the text within the text area field according to the specified value.
-
-## Usage
-
-Here's a snippet that adds a text area field to the product editor, similar to the screenshot:
-
-```php
-$section->add_block(
- array(
- 'id' => 'example-text-area-meta',
- 'blockName' => 'woocommerce/product-text-area-field',
- 'order' => 15,
- 'attributes' => array(
- 'label' => 'Detailed Description',
- 'property' => 'short_description',
- 'placeholder' => 'Enter a short product information here',
- 'required' => false,
- 'help' => 'Add any additional details or information that customers should know.',
- 'mode' => 'rich-text',
- 'allowedFormats' => [ 'core/bold', 'core/italic', 'core/link' ],
- ),
- )
-);
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/block.json b/packages/js/product-editor/src/blocks/generic/text-area/block.json
deleted file mode 100644
index 26f9384f48e..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/block.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-text-area-field",
- "title": "Product textarea block",
- "category": "woocommerce",
- "description": "A text-area field for use in the product editor.",
- "keywords": [
- "textarea",
- "rich-text"
- ],
- "textdomain": "default",
- "attributes": {
- "property": {
- "type": "string"
- },
- "label": {
- "type": "string",
- "role": "content"
- },
- "placeholder": {
- "type": "string"
- },
- "help": {
- "type": "string"
- },
- "required": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean"
- },
- "align": {
- "type": "string",
- "enum": [
- "left",
- "center",
- "right",
- "justify"
- ]
- },
- "mode": {
- "type": "string",
- "enum": [
- "plain-text",
- "rich-text"
- ],
- "default": "rich-text"
- },
- "allowedFormats": {
- "type": "array",
- "default": [
- "core/bold",
- "core/code",
- "core/italic",
- "core/link",
- "core/strikethrough",
- "core/underline",
- "core/text-color",
- "core/subscript",
- "core/superscript",
- "core/unknown"
- ]
- },
- "direction": {
- "type": "string",
- "enum": [
- "ltr",
- "rtl"
- ]
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": true
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx b/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx
deleted file mode 100644
index 0a2c61dacf6..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/edit.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import { LegacyRef } from 'react';
-import { __ } from '@wordpress/i18n';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { createElement, useRef } from '@wordpress/element';
-import { BaseControl, TextareaControl } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { BlockControls, RichText } from '@wordpress/block-editor';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { RTLToolbarButton } from './toolbar/toolbar-button-rtl';
-import type {
- TextAreaBlockEditAttributes,
- TextAreaBlockEditProps,
-} from './types';
-import AlignmentToolbarButton from './toolbar/toolbar-button-alignment';
-import { useClearSelectedBlockOnBlur } from '../../../hooks/use-clear-selected-block-on-blur';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { Label } from '../../../components/label/label';
-
-export function TextAreaBlockEdit( {
- attributes,
- setAttributes,
- context: { postType },
-}: TextAreaBlockEditProps ) {
- const {
- property,
- label,
- placeholder,
- help,
- required,
- note,
- tooltip,
- disabled = false,
- align,
- allowedFormats,
- direction,
- mode = 'rich-text',
- } = attributes;
- const blockProps = useWooBlockProps( attributes, {
- className: 'wp-block-woocommerce-product-text-area-field',
- style: { direction },
- } );
-
- const contentId = useInstanceId(
- TextAreaBlockEdit,
- 'wp-block-woocommerce-product-content-field__content'
- );
-
- const labelId = contentId.toString() + '__label';
-
- // `property` attribute is required.
- if ( ! property ) {
- throw new Error(
- __( 'Property attribute is required.', 'woocommerce' )
- );
- }
-
- const [ content, setContent ] = useProductEntityProp< string >( property, {
- postType,
- } );
-
- // This is a workaround to hide the toolbar when the block is blurred.
- // This is a temporary solution until using Gutenberg 18 with the
- // fix from https://github.com/WordPress/gutenberg/pull/59800
- const { handleBlur: hideToolbar } = useClearSelectedBlockOnBlur();
-
- function setAlignment( value: TextAreaBlockEditAttributes[ 'align' ] ) {
- setAttributes( { align: value } );
- }
-
- function changeDirection(
- value: TextAreaBlockEditAttributes[ 'direction' ]
- ) {
- setAttributes( { direction: value } );
- }
-
- const richTextRef = useRef< HTMLParagraphElement >( null );
- const textAreaRef = useRef< HTMLTextAreaElement >( null );
-
- function focusRichText() {
- richTextRef.current?.focus();
- }
-
- function focusTextArea() {
- textAreaRef.current?.focus();
- }
-
- const blockControlsBlockProps = { group: 'block' as const };
-
- const isRichTextMode = mode === 'rich-text';
- const isPlainTextMode = mode === 'plain-text';
-
- return (
- <div { ...blockProps }>
- { isRichTextMode && (
- <BlockControls { ...blockControlsBlockProps }>
- <AlignmentToolbarButton
- align={ align }
- setAlignment={ setAlignment }
- />
-
- <RTLToolbarButton
- direction={ direction }
- onChange={ changeDirection }
- />
- </BlockControls>
- ) }
-
- <BaseControl
- id={ contentId.toString() }
- label={
- <Label
- label={ label || '' }
- labelId={ labelId }
- required={ required }
- note={ note }
- tooltip={ tooltip }
- onClick={
- isRichTextMode ? focusRichText : focusTextArea
- }
- />
- }
- help={ help }
- >
- { isRichTextMode && (
- <RichText
- ref={ richTextRef as unknown as LegacyRef< 'p' > }
- id={ contentId.toString() }
- aria-labelledby={ labelId }
- identifier="content"
- tagName="p"
- value={ content || '' }
- onChange={ setContent }
- data-empty={ Boolean( content ) }
- className={ clsx( 'components-summary-control', {
- [ `has-text-align-${ align }` ]: align,
- } ) }
- dir={ direction }
- allowedFormats={ allowedFormats }
- placeholder={ placeholder }
- required={ required }
- aria-required={ required }
- readOnly={ disabled }
- onBlur={ hideToolbar }
- />
- ) }
-
- { isPlainTextMode && (
- <TextareaControl
- ref={ textAreaRef }
- aria-labelledby={ labelId }
- value={ content || '' }
- onChange={ setContent }
- placeholder={ placeholder }
- required={ required }
- disabled={ disabled }
- onBlur={ hideToolbar }
- />
- ) }
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/editor.scss b/packages/js/product-editor/src/blocks/generic/text-area/editor.scss
deleted file mode 100644
index eca577a10e0..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/editor.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.wp-block-woocommerce-product-text-area-field {
- .rich-text {
- width: 100%;
- min-height: calc( $gap-larger * 3 );
- background-color: $white;
- box-sizing: border-box;
- border: 1px solid $gray-700;
- border-radius: 2px;
- padding: $gap-smaller;
- margin: 0;
- appearance: textarea;
- resize: vertical;
- overflow: hidden;
-
- &.rich-text [data-rich-text-placeholder]:after {
- color: $gray-700;
- opacity: 1;
- }
-
- &:focus {
- box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color-darker-10, --wp-admin-theme-color );
- border-color: var( --wp-admin-theme-color-darker-10, --wp-admin-theme-color );
- }
- }
-
- // This alignment class does not exists in
- // https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/common.scss
- .has-text-align-justify {
- /*rtl:ignore*/
- text-align: justify;
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/index.ts b/packages/js/product-editor/src/blocks/generic/text-area/index.ts
deleted file mode 100644
index 58f17cde62c..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { postContent } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { TextAreaBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: TextAreaBlockEdit,
- icon: postContent,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-alignment/index.tsx b/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-alignment/index.tsx
deleted file mode 100644
index 04563050c60..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-alignment/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- alignCenter,
- alignJustify,
- alignLeft,
- alignRight,
-} from '@wordpress/icons';
-import { AlignmentControl } from '@wordpress/block-editor';
-
-export const ALIGNMENT_CONTROLS = [
- {
- icon: alignLeft,
- title: __( 'Align text left', 'woocommerce' ),
- align: 'left',
- },
- {
- icon: alignCenter,
- title: __( 'Align text center', 'woocommerce' ),
- align: 'center',
- },
- {
- icon: alignRight,
- title: __( 'Align text right', 'woocommerce' ),
- align: 'right',
- },
- {
- icon: alignJustify,
- title: __( 'Align text justify', 'woocommerce' ),
- align: 'justify',
- },
-];
-
-export default function AlignmentToolbarButton( {
- align,
- setAlignment,
-}: {
- align?: string;
- setAlignment: (
- alignment: 'left' | 'center' | 'right' | 'justify' | undefined
- ) => void;
-} ) {
- return (
- <AlignmentControl
- alignmentControls={ ALIGNMENT_CONTROLS }
- value={ align }
- onChange={ setAlignment }
- />
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/index.tsx b/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/index.tsx
deleted file mode 100644
index 21574adeada..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { ToolbarButton } from '@wordpress/components';
-import { _x, isRTL } from '@wordpress/i18n';
-import { formatLtr } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import type { RTLToolbarButtonProps } from './types';
-
-export function RTLToolbarButton( {
- direction,
- onChange,
-}: RTLToolbarButtonProps ) {
- if ( ! isRTL() ) {
- return null;
- }
-
- return (
- <ToolbarButton
- icon={ formatLtr }
- title={ _x( 'Left to right', 'editor button', 'woocommerce' ) }
- isActive={ direction === 'ltr' }
- onClick={ () =>
- onChange?.( direction === 'ltr' ? undefined : 'ltr' )
- }
- />
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/types.ts b/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/types.ts
deleted file mode 100644
index 5c19b64eae2..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/toolbar/toolbar-button-rtl/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { TextAreaBlockEditAttributes } from '../../types';
-
-type DirectionProp = TextAreaBlockEditAttributes[ 'direction' ];
-
-export type RTLToolbarButtonProps = {
- /**
- * Current direction.
- */
- direction: DirectionProp;
-
- /**
- * Callback to update the direction.
- */
- onChange( direction?: DirectionProp ): void;
-};
diff --git a/packages/js/product-editor/src/blocks/generic/text-area/types.ts b/packages/js/product-editor/src/blocks/generic/text-area/types.ts
deleted file mode 100644
index b977433583b..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text-area/types.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
- ProductEditorBlockAttributes,
- ProductEditorBlockEditProps,
-} from '../../../types';
-
-type AllowedFormat =
- | 'core/bold'
- | 'core/code'
- | 'core/italic'
- | 'core/link'
- | 'core/strikethrough'
- | 'core/underline'
- | 'core/text-color'
- | 'core/subscript'
- | 'core/superscript'
- | 'core/unknown';
-
-export type TextAreaBlockEditAttributes = ProductEditorBlockAttributes & {
- property: string;
- label?: string;
- placeholder?: string;
- help?: string;
- required?: boolean;
- disabled?: boolean;
- align?: 'left' | 'center' | 'right' | 'justify';
- allowedFormats?: AllowedFormat[];
- direction?: 'ltr' | 'rtl';
- mode: 'plain-text' | 'rich-text';
-};
-
-export type TextAreaBlockEditProps =
- ProductEditorBlockEditProps< TextAreaBlockEditAttributes >;
diff --git a/packages/js/product-editor/src/blocks/generic/text/README.md b/packages/js/product-editor/src/blocks/generic/text/README.md
deleted file mode 100644
index 4c24c83889e..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/README.md
+++ /dev/null
@@ -1,178 +0,0 @@
-# woocommerce/product-text-field
-
-A reusable text field for the product editor.
-
-
-
-## Attributes
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Label that appears on top of the field.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-Property in which the value is stored.
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field.
-
-### required
-
-- **Type:** `Boolean`|`String`
-- **Required:** `No`
-
-Indicates and enforces that the field is required.
-If the value is string it will be used as the custom error message.
-
-### tooltip
-
-- **Type:** `String`
-- **Required:** `No`
-
-If provided, shows a tooltip next to the label with additional information.
-
-### placeholder
-
-- **Type:** `String`
-- **Required:** `No`
-
-Placeholder text that appears in the field when it's empty.
-
-### type
-
-- **Type:** `Object`
- - `value`
- - **Type:** `String`
- - **Required:** `No`
- - **Default:** `'text'`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the type of the input. The `value` can be [any valid input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types). The message is used as a custom error `message` for the [typeMismatch](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch) validity.
-
-### pattern
-
-- **Type:** `Object`
- - `value`
- - **Type:** `String`
- - **Required:** `Yes`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the validation pattern of the input. The `value` can be [any valid regular expression](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern). The `message` is used as a custom error message for the [patternMismatch](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch) validity.
-
-### minLength
-
-- **Type:** `Object`
- - `value`
- - **Type:** `Number`
- - **Required:** `Yes`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the minimum string length constraint of the input. The `value` can be [any positive integer](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minLength). The `message` is used as a custom error message for the [tooShort](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort) validity.
-
-### maxLength
-
-- **Type:** `Object`
- - `value`
- - **Type:** `Number`
- - **Required:** `Yes`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the maximum string length constraint of the input. The `value` can be [any positive integer](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxLength). The `message` is used as a custom error message for the [tooLong](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong) validity.
-
-### min
-
-- **Type:** `Object`
- - `value`
- - **Type:** `Number`
- - **Required:** `Yes`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is acceptable and valid for the input containing the attribute. The `value` must be less than or equal to the value of the `max` attribute. The `message` is used as a custom error message for the [rangeUnderflow](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow) validity.
-
-### max
-
-- **Type:** `Object`
- - `value`
- - **Type:** `Number`
- - **Required:** `Yes`
- - `message`
- - **Type:** `String`
- - **Required:** `No`
-- **Required:** `No`
-
-Refers to the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is acceptable and valid for the input containing the attribute. The `value` must be greater than or equal to the value of the `min` attribute. The `message` is used as a custom error message for the [rangeOverflow](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow) validity.
-
-## Usage
-
-Here's a snippet that adds a field similar to the previous screenshot:
-
-```php
-$section->add_block(
- array(
- 'id' => 'example-text-meta',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 13,
- 'attributes' => array(
- 'label' => 'Text',
- 'property' => 'meta_data.text',
- 'placeholder' => 'Placeholder',
- 'required' => true,
- 'help' => 'Add additional information here',
- 'tooltip' => 'My tooltip',
- ),
- )
-);
-```
-
-Here's a snippet that adds fields validations:
-
-```php
-$section->add_block(
- array(
- 'id' => 'product-external-url',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'external_url',
- 'label' => __( 'Link to the external product', 'woocommerce' ),
- 'placeholder' => __( 'Enter the external URL to the product', 'woocommerce' ),
- 'suffix' => true,
- 'type' => array(
- 'value' => 'url',
- 'message' => __( 'Link to the external product is an invalid URL.', 'woocommerce' ),
- ),
- 'minLength' => array(
- 'value' => 8,
- 'message' => __( 'The link must be longer than %d.', 'woocommerce' ),
- ),
- 'required' => __( 'Link to the external product is required.', 'woocommerce' ),
- ),
- )
-);
-```
diff --git a/packages/js/product-editor/src/blocks/generic/text/block.json b/packages/js/product-editor/src/blocks/generic/text/block.json
deleted file mode 100644
index 3d882bb9538..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/block.json
+++ /dev/null
@@ -1,68 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-text-field",
- "title": "Product text field",
- "category": "woocommerce",
- "description": "A text field for use in the product editor.",
- "keywords": [
- "products",
- "text"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "property": {
- "type": "string"
- },
- "placeholder": {
- "type": "string"
- },
- "help": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- },
- "suffix": {
- "type": "object"
- },
- "type": {
- "type": "object"
- },
- "required": {
- "type": "object"
- },
- "pattern": {
- "type": "object"
- },
- "minLength": {
- "type": "object"
- },
- "maxLength": {
- "type": "object"
- },
- "min": {
- "type": "object"
- },
- "max": {
- "type": "object"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/text/edit.tsx b/packages/js/product-editor/src/blocks/generic/text/edit.tsx
deleted file mode 100644
index 3a8fb948376..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/edit.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { useMergeRefs } from '@wordpress/compose';
-import { Link } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { createElement, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, external } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { TextControl } from '../../../components/text-control';
-import { useValidation } from '../../../contexts/validation-context';
-import { useProductEdits } from '../../../hooks/use-product-edits';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { TextBlockAttributes } from './types';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< TextBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const {
- property,
- label,
- placeholder,
- required,
- pattern,
- minLength,
- maxLength,
- min,
- max,
- help,
- tooltip,
- disabled,
- type,
- suffix,
- } = attributes;
-
- const [ value, setValue ] = useProductEntityProp< string >( property, {
- postType,
- fallbackValue: '',
- } );
-
- const { hasEdit } = useProductEdits();
-
- const inputRef = useRef< HTMLInputElement >( null );
-
- const {
- error,
- validate,
- ref: inputValidatorRef,
- } = useValidation< Product >(
- property,
- async function validator() {
- if ( ! inputRef.current ) return;
-
- const input = inputRef.current;
-
- let customErrorMessage = '';
-
- if ( input.validity.typeMismatch ) {
- customErrorMessage =
- type?.message ??
- __( 'Invalid value for the field.', 'woocommerce' );
- }
- if ( input.validity.valueMissing ) {
- customErrorMessage =
- typeof required === 'string'
- ? required
- : __( 'This field is required.', 'woocommerce' );
- }
- if ( input.validity.patternMismatch ) {
- customErrorMessage =
- pattern?.message ??
- __( 'Invalid value for the field.', 'woocommerce' );
- }
- if ( input.validity.tooShort ) {
- // eslint-disable-next-line @wordpress/valid-sprintf
- customErrorMessage = sprintf(
- minLength?.message ??
- /* translators: %d: minimum length */
- __(
- 'The minimum length of the field is %d',
- 'woocommerce'
- ),
- minLength?.value
- );
- }
- if ( input.validity.tooLong ) {
- // eslint-disable-next-line @wordpress/valid-sprintf
- customErrorMessage = sprintf(
- maxLength?.message ??
- /* translators: %d: maximum length */
- __(
- 'The maximum length of the field is %d',
- 'woocommerce'
- ),
- maxLength?.value
- );
- }
- if ( input.validity.rangeUnderflow ) {
- // eslint-disable-next-line @wordpress/valid-sprintf
- customErrorMessage = sprintf(
- min?.message ??
- /* translators: %d: minimum length */
- __(
- 'The minimum value of the field is %d',
- 'woocommerce'
- ),
- min?.value
- );
- }
- if ( input.validity.rangeOverflow ) {
- // eslint-disable-next-line @wordpress/valid-sprintf
- customErrorMessage = sprintf(
- max?.message ??
- /* translators: %d: maximum length */
- __(
- 'The maximum value of the field is %d',
- 'woocommerce'
- ),
- max?.value
- );
- }
-
- input.setCustomValidity( customErrorMessage );
-
- if ( ! input.validity.valid ) {
- return {
- message: customErrorMessage,
- };
- }
- },
- [ type, required, pattern, minLength, maxLength, min, max, value ]
- );
-
- function getSuffix() {
- if ( ! suffix || ! value || ! inputRef.current ) return;
-
- const isValidUrl =
- inputRef.current.type === 'url' &&
- ! inputRef.current.validity.typeMismatch;
-
- if ( suffix === true && isValidUrl ) {
- return (
- <Link
- type="external"
- href={ value }
- target="_blank"
- rel="noreferrer"
- className="wp-block-woocommerce-product-text-field__suffix-link"
- >
- <Icon icon={ external } size={ 20 } />
- </Link>
- );
- }
-
- return typeof suffix === 'string' ? suffix : undefined;
- }
-
- return (
- <div { ...blockProps }>
- <TextControl
- ref={ useMergeRefs( [ inputRef, inputValidatorRef ] ) }
- type={ type?.value ?? 'text' }
- value={ value }
- disabled={ disabled }
- label={ label }
- onChange={ setValue }
- onBlur={ () => {
- if ( hasEdit( property ) ) {
- validate();
- }
- } }
- error={ error }
- help={ help }
- placeholder={ placeholder }
- tooltip={ tooltip }
- suffix={ getSuffix() }
- required={ Boolean( required ) }
- pattern={ pattern?.value }
- minLength={ minLength?.value }
- maxLength={ maxLength?.value }
- min={ min?.value }
- max={ max?.value }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/text/editor.scss b/packages/js/product-editor/src/blocks/generic/text/editor.scss
deleted file mode 100644
index 8dee0e91fe6..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/editor.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.wp-block-woocommerce-product-text-field {
- &__suffix-link {
- display: flex;
- align-items: center;
- justify-content: center;
- width: $grid-unit-30;
- height: $grid-unit-30;
- fill: $gray-700;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/generic/text/index.ts b/packages/js/product-editor/src/blocks/generic/text/index.ts
deleted file mode 100644
index c73719cf900..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockConfiguration } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { TextBlockAttributes } from './types';
-
-const { name, ...metadata } =
- blockConfiguration as BlockConfiguration< TextBlockAttributes >;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/generic/text/types.ts b/packages/js/product-editor/src/blocks/generic/text/types.ts
deleted file mode 100644
index 3ecb84d1f9e..00000000000
--- a/packages/js/product-editor/src/blocks/generic/text/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import type { HTMLInputTypeAttribute } from 'react';
-import type { BlockAttributes } from '@wordpress/blocks';
-
-export interface TextBlockAttributes extends BlockAttributes {
- property: string;
- label: string;
- help?: string;
- tooltip?: string;
- placeholder?: string;
- suffix?: boolean | string;
- required?: boolean | string;
- type?: { value?: HTMLInputTypeAttribute; message?: string };
- pattern?: { value: string; message?: string };
- minLength?: { value: number; message?: string };
- maxLength?: { value: number; message?: string };
- min?: { value: number; message?: string };
- max?: { value: number; message?: string };
-}
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/README.md b/packages/js/product-editor/src/blocks/generic/toggle/README.md
deleted file mode 100644
index 8898aebbb3f..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/README.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# woocommerce/product-text-area-field
-
-A reusable toggle field for the product editor.
-
-## Attributes
-
-### label
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-The label appears above the field.
-
-### property
-
-- **Type:** `String`
-- **Required:** `Yes`
-
-The product entity property where the value is stored.
-
-### help
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field, providing additional guidance to the user.
-
-### checkedHelp
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field when the value is checked. Overrides the `help` attribute when the field is checked.
-
-### uncheckedHelp
-
-- **Type:** `String`
-- **Required:** `No`
-
-Help text that appears below the field when the value is unchecked. Overrides the `help` attribute when the field is unchecked.
-
-### required
-
-- **Type:** `Boolean`|`String`
-- **Required:** `No`
-
-Indicates that the field is required.
-
-### disabled
-
-- **Type:** `Boolean`
-- **Required:** `No`
-
-Indicates that the field is not editable.
-
-### disabledCopy
-
-- **Type:** `String`
-- **Required:** `No`
-
-Text that appears when the field is disabled.
-
-### checkedValue
-
-- **Type:** `Object`
-- **Required:** `No`
-
-The value that is stored when the field is checked.
-
-### uncheckedValue
-
-- **Type:** `Object`
-- **Required:** `No`
-
-The value that is stored when the field is unchecked.
-
-
-## Usage
-
-Here's a snippet that adds a text area field to the product editor:
-
-```php
-$section->add_block(
- array(
- 'id' => 'example-toggle-meta',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 15,
- 'attributes' => array(
- 'property' => 'virtual',
- 'checkedValue' => false,
- 'uncheckedValue' => true,
- 'label' => __( 'This variation requires shipping or pickup', 'woocommerce' ),
- 'uncheckedHelp' => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. <a href="https://woocommerce.com/document/managing-products/#adding-a-virtual-product" target="_blank" rel="noreferrer">Read more about virtual products</a>.', 'woocommerce' ),
- ),
- )
-);
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/block.json b/packages/js/product-editor/src/blocks/generic/toggle/block.json
deleted file mode 100644
index 9d3b016bbcf..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/block.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-toggle-field",
- "title": "Product toggle control",
- "category": "woocommerce",
- "description": "The product toggle.",
- "keywords": [
- "products",
- "radio",
- "input"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "help": {
- "type": "string"
- },
- "checkedHelp": {
- "type": "string"
- },
- "uncheckedHelp": {
- "type": "string"
- },
- "property": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- },
- "disabledCopy": {
- "type": "string",
- "role": "content"
- },
- "checkedValue": {
- "type": "object"
- },
- "uncheckedValue": {
- "type": "object"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": true,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx b/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx
deleted file mode 100644
index df3eca10a28..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/edit.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { recordEvent } from '@woocommerce/tracks';
-import { ReactNode } from 'react';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { ToggleBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { TRACKS_SOURCE } from '../../../constants';
-
-export function Edit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< ToggleBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const {
- _templateBlockId,
- label,
- property,
- disabled,
- disabledCopy,
- checkedValue,
- uncheckedValue,
- } = attributes;
- const [ value, setValue ] = useProductEntityProp< boolean >( property, {
- postType,
- fallbackValue: false,
- } );
- const productId = useEntityId( 'postType', postType );
- const [ parentId ] = useEntityProp< number >(
- 'postType',
- postType,
- 'parent_id'
- );
-
- function isChecked() {
- if ( checkedValue !== undefined ) {
- return checkedValue === value;
- }
- return value as boolean;
- }
-
- function handleChange( checked: boolean ) {
- recordEvent( 'product_toggle_click', {
- block_id: _templateBlockId,
- source: TRACKS_SOURCE,
- product_id: parentId > 0 ? parentId : productId,
- } );
- if ( checked ) {
- setValue( checkedValue !== undefined ? checkedValue : checked );
- } else {
- setValue( uncheckedValue !== undefined ? uncheckedValue : checked );
- }
- }
-
- let help: ReactNode = null;
-
- // Default help text.
- if ( attributes?.help ) {
- help = createElement( 'div', {
- dangerouslySetInnerHTML: {
- __html: sanitizeHTML( attributes.help ),
- },
- } );
- }
-
- /*
- * Redefine the help text when:
- * - The checked help text is defined
- * - The toggle is checked
- */
- if ( attributes?.checkedHelp && isChecked() ) {
- help = createElement( 'div', {
- dangerouslySetInnerHTML: {
- __html: sanitizeHTML( attributes.checkedHelp ),
- },
- } );
- }
-
- /*
- * Redefine the help text when:
- * - The unchecked help text is defined
- * - The toggle is unchecked
- */
- if ( attributes?.uncheckedHelp && ! isChecked() ) {
- help = createElement( 'div', {
- dangerouslySetInnerHTML: {
- __html: sanitizeHTML( attributes.uncheckedHelp ),
- },
- } );
- }
-
- return (
- <div { ...blockProps }>
- <ToggleControl
- label={ label }
- checked={ isChecked() }
- disabled={ disabled }
- onChange={ handleChange }
- help={ help }
- />
- { disabled && (
- <p
- className="wp-block-woocommerce-product-toggle__disable-copy"
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( disabledCopy ),
- } }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/editor.scss b/packages/js/product-editor/src/blocks/generic/toggle/editor.scss
deleted file mode 100644
index ba4daf61767..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/editor.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wp-block-woocommerce-product-toggle__disable-copy {
- margin: $gap-small 0 0;
- font-size: 12px;
- color: $gray-700;
- line-height: 1.5;
-}
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/index.ts b/packages/js/product-editor/src/blocks/generic/toggle/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/generic/toggle/types.ts b/packages/js/product-editor/src/blocks/generic/toggle/types.ts
deleted file mode 100644
index 83450b2461f..00000000000
--- a/packages/js/product-editor/src/blocks/generic/toggle/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface ToggleBlockAttributes extends BlockAttributes {
- label: string;
- property: string;
- disabled?: boolean;
- checkedValue?: never;
- uncheckedValue?: never;
-}
diff --git a/packages/js/product-editor/src/blocks/index.ts b/packages/js/product-editor/src/blocks/index.ts
deleted file mode 100644
index cf3e8c5ee85..00000000000
--- a/packages/js/product-editor/src/blocks/index.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export { init as initCatalogVisibility } from './product-fields/catalog-visibility';
-export { init as initCustomFields } from './product-fields/custom-fields';
-export { init as initCustomFieldsToggle } from './product-fields/custom-fields-toggle';
-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 initDownloads } from './product-fields/downloads';
-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 initSectionDescription } from './generic/section-description';
-export { init as initSubsection } from './generic/subsection';
-export { init as initSubsectionDescription } from './generic/subsection-description';
-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 initRequirePassword } from './product-fields/password';
-export { init as initProductDetailsSectionDescription } from './product-fields/product-details-section-description';
-export { init as initProductList } from './product-fields/product-list';
-export { init as initVariationItems } from './product-fields/variation-items';
-export { init as initVariationOptions } from './product-fields/variation-options';
-export { init as initNoticeSingleVariation } from './product-fields/notice-edit-single-variation';
-export { init as initNoticeHasVariations } from './product-fields/notice-has-variations';
-export { init as initTaxonomy } from './generic/taxonomy';
-export { init as initText } from './generic/text';
-export { init as initNumber } from './generic/number';
-export { init as initLinkedProductList } from './generic/linked-product-list';
-export { init as initTextArea } from './generic/text-area';
-export { init as initSelect } from './generic/select';
-export { init as initNotice } from './generic/notice';
diff --git a/packages/js/product-editor/src/blocks/product-fields/attributes/block.json b/packages/js/product-editor/src/blocks/product-fields/attributes/block.json
deleted file mode 100644
index d1747b01178..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/attributes/block.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-attributes-field",
- "title": "Product attributes",
- "category": "widgets",
- "description": "The product attributes.",
- "keywords": [
- "products",
- "attributes"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "isInSelectedTab"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/attributes/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/attributes/edit.tsx
deleted file mode 100644
index e1588c94625..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/attributes/edit.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-import { createElement, useEffect } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { ProductProductAttribute } from '@woocommerce/data';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { AttributeControl } from '../../../components/attribute-control';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { useProductAttributes } from '../../../hooks/use-product-attributes';
-
-export function AttributesBlockEdit( {
- attributes,
- context: { isInSelectedTab },
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const [ entityAttributes, setEntityAttributes ] = useEntityProp<
- ProductProductAttribute[]
- >( 'postType', 'product', 'attributes' );
-
- const productId = useEntityId( 'postType', 'product' );
-
- const blockProps = useWooBlockProps( attributes );
-
- const {
- attributes: attributeList,
- fetchAttributes,
- handleChange,
- } = useProductAttributes( {
- allAttributes: entityAttributes,
- onChange: setEntityAttributes,
- productId,
- } );
-
- useEffect( () => {
- if ( isInSelectedTab ) {
- fetchAttributes();
- }
- }, [ entityAttributes, isInSelectedTab ] );
-
- return (
- <div { ...blockProps }>
- <AttributeControl
- value={ attributeList }
- disabledAttributeIds={ entityAttributes
- .filter( ( attr ) => !! attr.variation )
- .map( ( attr ) => attr.id ) }
- uiStrings={ {
- disabledAttributeMessage: __(
- 'Already used in Variations',
- 'woocommerce'
- ),
- } }
- onAdd={ () => {
- recordEvent(
- 'product_add_attributes_modal_add_button_click'
- );
- } }
- onChange={ handleChange }
- onNewModalCancel={ () => {
- recordEvent(
- 'product_add_attributes_modal_cancel_button_click'
- );
- } }
- onNewModalOpen={ () => {
- if ( ! attributeList.length ) {
- recordEvent(
- 'product_add_first_attribute_button_click'
- );
- return;
- }
- recordEvent( 'product_add_attribute_button' );
- } }
- onAddAnother={ () => {
- recordEvent(
- 'product_add_attributes_modal_add_another_attribute_button_click'
- );
- } }
- onRemoveItem={ () => {
- recordEvent(
- 'product_add_attributes_modal_remove_attribute_button_click'
- );
- } }
- onRemove={ () =>
- recordEvent(
- 'product_remove_attribute_confirmation_confirm_click'
- )
- }
- onRemoveCancel={ () =>
- recordEvent(
- 'product_remove_attribute_confirmation_cancel_click'
- )
- }
- termsAutoSelection="first"
- defaultVisibility={ true }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/attributes/editor.scss b/packages/js/product-editor/src/blocks/product-fields/attributes/editor.scss
deleted file mode 100644
index dc7ce37571f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/attributes/editor.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.wp-block-woocommerce-product-attributes-field {
- .woocommerce-sortable {
- padding: 0;
- }
-
- .woocommerce-sortable__handle {
- display: none;
- }
-
- .components-button.has-icon {
- svg {
- fill: $gray-700;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/attributes/index.ts b/packages/js/product-editor/src/blocks/product-fields/attributes/index.ts
deleted file mode 100644
index f5e6c8b184c..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/attributes/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { AttributesBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: AttributesBlockEdit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/block.json b/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/block.json
deleted file mode 100644
index 03200b1e01b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/block.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-catalog-visibility-field",
- "description": "A checkbox to manage the catalog visibility of the product.",
- "title": "Product catalog visibility",
- "category": "widgets",
- "keywords": [
- "products",
- "catalog"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "visibility": {
- "type": "string",
- "enum": [
- "visible",
- "catalog",
- "search",
- "hidden"
- ],
- "default": "visible"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/edit.tsx
deleted file mode 100644
index ca0aab06dbd..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/edit.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { CatalogVisibilityBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { CatalogVisibility } from '../../../components/catalog-visibility';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< CatalogVisibilityBlockAttributes > ) {
- const { label, visibility } = attributes;
-
- const blockProps = useWooBlockProps( attributes );
-
- const [ catalogVisibility, setCatalogVisibility ] = useEntityProp<
- Product[ 'catalog_visibility' ]
- >( 'postType', 'product', 'catalog_visibility' );
-
- return (
- <div { ...blockProps }>
- <CatalogVisibility
- catalogVisibility={ catalogVisibility }
- label={ label }
- visibility={ visibility }
- onCheckboxChange={ setCatalogVisibility }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/editor.scss b/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/editor.scss
deleted file mode 100644
index e6a48fecac9..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.wp-block-woocommerce-product-catalog-visibility-fields {
- > div {
- margin-top: $gap-large;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/index.ts b/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/types.ts b/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/types.ts
deleted file mode 100644
index f3041e25b0d..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/catalog-visibility/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface CatalogVisibilityBlockAttributes extends BlockAttributes {
- label: string;
- visibility: Product[ 'catalog_visibility' ];
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json
deleted file mode 100644
index 42294f7c891..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-custom-fields-toggle-field",
- "title": "Product custom fields toggle control",
- "category": "woocommerce",
- "description": "The product custom fields toggle.",
- "keywords": [
- "products",
- "custom",
- "fields"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": true,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx
deleted file mode 100644
index 3a29c3b61d1..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { recordEvent } from '@woocommerce/tracks';
-import { Spinner, ToggleControl } from '@wordpress/components';
-import { createElement, useMemo } from '@wordpress/element';
-import { useInnerBlocksProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { useMetaboxHiddenProduct } from '../../../hooks/use-metabox-hidden-product';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { CustomFieldsToggleBlockAttributes } from './types';
-
-const METABOX_HIDDEN_VALUE = 'postcustom';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< CustomFieldsToggleBlockAttributes > ) {
- const { label, _templateBlockId } = attributes;
- const blockProps = useWooBlockProps( attributes );
- const innerBlockProps = useInnerBlocksProps(
- {
- className:
- 'wp-block-woocommerce-product-custom-fields-toggle-field__inner-blocks',
- },
- {
- templateLock: 'all',
- // @ts-expect-error WordPress accepts false for renderAppender but DT types don't model it.
- renderAppender: false,
- }
- );
-
- const { isLoading, metaboxhiddenProduct, saveMetaboxhiddenProduct } =
- useMetaboxHiddenProduct();
-
- const isChecked = useMemo( () => {
- return (
- metaboxhiddenProduct &&
- ! metaboxhiddenProduct.some(
- ( value ) => value === METABOX_HIDDEN_VALUE
- )
- );
- }, [ metaboxhiddenProduct ] );
-
- async function handleChange( checked: boolean ) {
- const values = checked
- ? metaboxhiddenProduct.filter(
- ( value ) => value !== METABOX_HIDDEN_VALUE
- )
- : [ ...metaboxhiddenProduct, METABOX_HIDDEN_VALUE ];
-
- recordEvent( 'product_custom_fields_toggle_click', {
- block_id: _templateBlockId,
- source: TRACKS_SOURCE,
- metaboxhidden_product: values,
- } );
-
- await saveMetaboxhiddenProduct( values );
- }
-
- return (
- <div { ...blockProps }>
- <div className="wp-block-woocommerce-product-custom-fields-toggle-field__content">
- <ToggleControl
- label={ label }
- checked={ isChecked }
- disabled={ isLoading }
- onChange={ handleChange }
- />
-
- { isLoading && <Spinner /> }
- </div>
-
- { isChecked && <div { ...innerBlockProps } /> }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss
deleted file mode 100644
index 8ee7f0cfe3b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.wp-block-woocommerce-product-custom-fields-toggle-field {
- &__content {
- display: flex;
- gap: $grid-unit;
- align-items: center;
-
- .components-spinner {
- margin: 0;
- }
- }
-
- &__inner-blocks {
- margin-top: $grid-unit-60;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/index.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/types.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/types.ts
deleted file mode 100644
index bea81832e36..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface CustomFieldsToggleBlockAttributes extends BlockAttributes {
- label: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json b/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json
deleted file mode 100644
index a911d06438a..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-custom-fields",
- "title": "Product custom fields control",
- "category": "woocommerce",
- "description": "The product custom fields.",
- "keywords": [
- "products",
- "custom",
- "fields"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": true,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx
deleted file mode 100644
index 70ea36584cd..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-import { SectionActions } from '../../../components/block-slot-fill';
-import { CustomFields } from '../../../components/custom-fields';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { CustomFieldsBlockAttributes } from './types';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< CustomFieldsBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- return (
- <div { ...blockProps }>
- <CustomFields
- renderActionButtonsWrapper={ ( buttons ) => (
- <SectionActions>{ buttons }</SectionActions>
- ) }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts
deleted file mode 100644
index c0c79b28a49..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface CustomFieldsBlockAttributes extends BlockAttributes {
- label: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/block.json b/packages/js/product-editor/src/blocks/product-fields/description/block.json
deleted file mode 100644
index f37f69d159f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/block.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-description-field",
- "title": "Product description",
- "category": "woocommerce",
- "description": "The product description.",
- "keywords": [
- "products",
- "description"
- ],
- "textdomain": "default",
- "attributes": {
- "__contentEditable": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": true
- }
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
deleted file mode 100644
index 23f7ca0633b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { dispatch } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { parse, rawHandler } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { wooProductEditorUiStore } from '../../../../store/product-editor-ui';
-import { getContentFromFreeform } from '../edit';
-import { getGutenbergVersion } from '../../../../utils/get-gutenberg-version';
-
-// There is a bug in Gutenberg 17.9 that causes a crash in the full editor.
-// This should be fixed in Gutenberg 18.0 (see https://github.com/WordPress/gutenberg/pull/59800).
-// Once we only support Gutenberg 18.0 and above, we can remove this check.
-function isGutenbergVersionWithCrashInFullEditor() {
- const gutenbergVersion = getGutenbergVersion();
- return gutenbergVersion >= 17.9 && gutenbergVersion < 18.0;
-}
-
-function shouldForceFullEditor() {
- return (
- localStorage
- .getItem(
- '__unsupported_force_product_editor_description_full_editor'
- )
- ?.trim()
- .toLowerCase() === 'true'
- );
-}
-
-export default function FullEditorToolbarButton( {
- label = __( 'Edit Product description', 'woocommerce' ),
- text = __( 'Full editor', 'woocommerce' ),
-} ) {
- const { openModalEditor, setModalEditorBlocks } = dispatch(
- wooProductEditorUiStore
- );
- const [ description ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'description'
- );
-
- return (
- <ToolbarButton
- label={ label }
- onClick={ () => {
- if ( isGutenbergVersionWithCrashInFullEditor() ) {
- if ( shouldForceFullEditor() ) {
- // eslint-disable-next-line no-alert
- alert(
- __(
- 'The version of the Gutenberg plugin installed causes a crash in the full editor. You are proceeding at your own risk and may experience crashes.',
- 'woocommerce'
- )
- );
- } else {
- // eslint-disable-next-line no-alert
- alert(
- __(
- 'The version of the Gutenberg plugin installed causes a crash in the full editor. To prevent this, the full editor has been disabled.',
- 'woocommerce'
- )
- );
- return;
- }
- }
-
- let parsedBlocks = parse( description );
- const freeformContent = getContentFromFreeform( parsedBlocks );
-
- // replace the freeform block with a paragraph block
- if ( freeformContent ) {
- parsedBlocks = rawHandler( { HTML: freeformContent } );
- }
-
- setModalEditorBlocks( parsedBlocks );
- recordEvent( 'product_add_description_click' );
- openModalEditor();
- } }
- >
- { text }
- </ToolbarButton>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx b/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
deleted file mode 100644
index 7bc156e446b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { BlockControls } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import type {
- DescriptionBlockEditComponent,
- DescriptionBlockEditProps,
-} from '../types';
-import FullEditorToolbarButton from './full-editor-toolbar-button';
-
-const wooBlockwithFullEditorToolbarButton = createHigherOrderComponent(
- ( BlockEdit: DescriptionBlockEditComponent ) => {
- return ( props: DescriptionBlockEditProps ) => {
- // Only extend summary field block instances
- if ( props?.name !== 'woocommerce/product-summary-field' ) {
- return <BlockEdit { ...props } />;
- }
-
- /*
- * Extend the toolbar only to the summary field block instance
- * that has the `woocommerce/product-description-field__content` template block ID.
- */
- if (
- props?.attributes?._templateBlockId !==
- 'product-description__content'
- ) {
- return <BlockEdit { ...props } />;
- }
-
- const blockControlProps = { group: 'other' as const };
-
- return (
- <>
- <BlockControls { ...blockControlProps }>
- <FullEditorToolbarButton />
- </BlockControls>
- <BlockEdit { ...props } />
- </>
- );
- };
- },
- 'wooBlockwithFullEditorToolbarButton'
-);
-
-export default wooBlockwithFullEditorToolbarButton;
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
deleted file mode 100644
index 074a0fdf415..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- useEffect,
- useState,
- Fragment,
-} from '@wordpress/element';
-import { BlockInstance, parse, serialize } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import clsx from 'clsx';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import {
- BlockControls,
- useInnerBlocksProps,
- // @ts-expect-error BlockPreview is not exported from @wordpress/block-editor's public types.
- BlockPreview,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
-import type { DescriptionBlockEditComponent } from './types';
-import FullEditorToolbarButton from './components/full-editor-toolbar-button';
-import { wooProductEditorUiStore } from '../../../store/product-editor-ui';
-
-/**
- * Check whether the parsed blocks become from the summary block.
- *
- * @param {BlockInstance[]} blocks - The block list
- * @return {string|false} The content of the freeform block if it's a freeform block, false otherwise.
- */
-export function getContentFromFreeform(
- blocks: BlockInstance[]
-): false | string {
- // Check whether the parsed blocks become from the summary block:
- const isCoreFreeformBlock =
- blocks.length === 1 && blocks[ 0 ].name === 'core/freeform';
-
- if ( isCoreFreeformBlock ) {
- return blocks[ 0 ].attributes.content;
- }
-
- return false;
-}
-
-export function DescriptionBlockEdit( {
- attributes,
-}: DescriptionBlockEditComponent ) {
- const [ description, setDescription ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'description'
- );
-
- const [ descriptionBlocks, setDescriptionBlocks ] = useState<
- BlockInstance[]
- >( [] );
-
- // Pick Modal editor data from the store.
- const { isModalEditorOpen, modalEditorBlocks, hasChanged } = useSelect(
- ( select ) => {
- return {
- isModalEditorOpen: select(
- wooProductEditorUiStore
- ).isModalEditorOpen(),
- modalEditorBlocks: select(
- wooProductEditorUiStore
- ).getModalEditorBlocks(),
- hasChanged: select(
- wooProductEditorUiStore
- ).getModalEditorContentHasChanged(),
- };
- },
- []
- );
-
- // Parse the description into blocks.
- useEffect( () => {
- if ( ! description ) {
- setDescriptionBlocks( [] );
- return;
- }
-
- /*
- * First quick check to avoid parsing process,
- * since it's an expensive operation.
- */
- if ( description.indexOf( '<!-- wp:' ) === -1 ) {
- return;
- }
-
- const parsedBlocks = parse( description );
- // Check whether the parsed blocks become from the summary block:
- if ( getContentFromFreeform( parsedBlocks ) ) {
- return;
- }
-
- setDescriptionBlocks( parsedBlocks );
- }, [ description ] );
-
- /*
- * From Modal Editor -> Description entity.
- * Update the description when the modal editor blocks change.
- */
- useEffect( () => {
- if ( ! hasChanged ) {
- return;
- }
-
- const html = serialize( modalEditorBlocks );
- setDescription( html );
- }, [ modalEditorBlocks, setDescription, hasChanged ] );
-
- const blockProps = useWooBlockProps( attributes, {
- className: clsx( { 'has-blocks': !! description.length } ),
- tabIndex: 0,
- } );
-
- const innerBlockProps = useInnerBlocksProps(
- {},
- {
- templateLock: 'contentOnly',
- allowedBlocks: [ 'woocommerce/product-summary-field' ],
- }
- );
-
- return (
- <div { ...blockProps }>
- { !! descriptionBlocks?.length ? (
- <>
- <BlockControls>
- <FullEditorToolbarButton
- text={ __( 'Edit in full editor', 'woocommerce' ) }
- />
- </BlockControls>
-
- <BlockPreview
- blocks={ descriptionBlocks }
- viewportWidth={ 800 }
- additionalStyles={ [
- { css: 'body { padding: 32px; height: 10000px }' }, // hack: setting height to 10000px to ensure the preview is not cut off.
- ] }
- />
- </>
- ) : (
- <div { ...innerBlockProps } />
- ) }
-
- { isModalEditorOpen && <ModalEditorWelcomeGuide /> }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss b/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
deleted file mode 100644
index 1af51493bce..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/editor.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.wp-block-woocommerce-product-description-field {
- &:focus {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
- outline: 3px solid transparent;
- }
-
- .block-editor-block-preview__container {
- resize: vertical;
- height: 320px;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/index.ts b/packages/js/product-editor/src/blocks/product-fields/description/index.ts
deleted file mode 100644
index 59eda68e201..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { postContent } from '@wordpress/icons';
-import { addFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { DescriptionBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-import wooDescriptionBlockWithFullEditorButton from './components/with-full-editor-toolbar-button';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: DescriptionBlockEdit,
- icon: postContent,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-
-addFilter(
- 'editor.BlockEdit',
- 'woocommerce/summary-block-with-full-editor-button',
- wooDescriptionBlockWithFullEditorButton
-);
diff --git a/packages/js/product-editor/src/blocks/product-fields/description/types.ts b/packages/js/product-editor/src/blocks/product-fields/description/types.ts
deleted file mode 100644
index c85f7adeca8..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/description/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
- ProductEditorBlockAttributes,
- ProductEditorBlockEditProps,
-} from '../../../types';
-
-export type DescriptionBlockEditProps =
- ProductEditorBlockEditProps< ProductEditorBlockAttributes >;
-
-export type DescriptionBlockEditComponent =
- React.ComponentType< DescriptionBlockEditProps > & {
- attributes: Record< string, unknown >;
- };
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/block.json b/packages/js/product-editor/src/blocks/product-fields/downloads/block.json
deleted file mode 100644
index 164de822a57..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/block.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-downloads-field",
- "title": "Product downloads",
- "category": "widgets",
- "description": "The product downloads.",
- "keywords": [
- "products",
- "downloads"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx
deleted file mode 100644
index ba686036d8b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Dropdown, MenuGroup } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { DownloadsMenuProps } from './types';
-import { InsertUrlMenuItem } from '../insert-url-menu-item';
-import { UploadFilesMenuItem } from '../upload-files-menu-item';
-
-export function DownloadsMenu( {
- allowedTypes,
- maxUploadFileSize,
- onUploadSuccess,
- onUploadError,
- onLinkError,
-}: DownloadsMenuProps ) {
- return (
- <Dropdown
- popoverProps={ {
- placement: 'bottom-end',
- } }
- contentClassName="woocommerce-downloads-menu__menu-content"
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- aria-expanded={ isOpen }
- icon={ isOpen ? chevronUp : chevronDown }
- variant="secondary"
- onClick={ onToggle }
- className="woocommerce-downloads-menu__toggle"
- >
- <span>{ __( 'Add new', 'woocommerce' ) }</span>
- </Button>
- ) }
- renderContent={ ( { onClose } ) => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup>
- <UploadFilesMenuItem
- allowedTypes={ allowedTypes }
- maxUploadFileSize={ maxUploadFileSize }
- onUploadSuccess={ ( files ) => {
- onUploadSuccess( files );
- onClose();
- } }
- onUploadError={ ( error ) => {
- onUploadError( error );
- onClose();
- } }
- />
-
- <InsertUrlMenuItem
- onLinkSuccess={ ( files ) => {
- onUploadSuccess( files );
- onClose();
- } }
- onLinkError={ ( error ) => {
- onLinkError( error );
- onClose();
- } }
- />
- </MenuGroup>
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/index.ts
deleted file mode 100644
index 0e59caf644f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './downloads-menu';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/style.scss b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/style.scss
deleted file mode 100644
index 0cec19b4642..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/style.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.woocommerce-downloads-menu {
- &__toggle {
- flex-direction: row-reverse;
-
- > span {
- margin: 0 6px;
- }
- }
-
- &__menu-content {
- .components-menu-item__item {
- min-width: 172px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/types.ts
deleted file mode 100644
index 60ae49c774b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import type { Attachment } from '@wordpress/media-utils';
-import { MediaUploaderErrorCallback } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { InsertUrlLinkErrorCallback } from '../insert-url-menu-item';
-
-export type DownloadsMenuProps = {
- allowedTypes?: string[];
- maxUploadFileSize?: number;
- onUploadSuccess( files: Attachment[] ): void;
- onUploadError: MediaUploaderErrorCallback;
- onLinkError: InsertUrlLinkErrorCallback;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
deleted file mode 100644
index 55af2d2c5ed..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { createElement, useState } from '@wordpress/element';
-import { trash } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { ImageGallery, ImageGalleryItem } from '@woocommerce/components';
-import {
- Button,
- Modal,
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { EditDownloadsModalProps } from './types';
-import { UnionIcon } from './images/union-icon';
-import { DownloadsCustomImage } from './images/downloads-custom-image';
-
-export interface Image {
- id: number;
- src: string;
- name: string;
- alt: string;
-}
-
-export const EditDownloadsModal = ( {
- downloadableItem,
- onCancel,
- onChange,
- onRemove,
- onSave,
-}: EditDownloadsModalProps ) => {
- const { createNotice } = useDispatch( 'core/notices' );
- const [ isCopingToClipboard, setIsCopingToClipboard ] =
- useState< boolean >( false );
-
- const { id = 0, file = '', name = '' } = downloadableItem;
-
- const onCopySuccess = () => {
- createNotice(
- 'success',
- __( 'URL copied successfully.', 'woocommerce' )
- );
- };
-
- const isImage = ( filename = '' ) => {
- if ( ! filename ) return;
- const imageExtensions = [ 'jpg', 'jpeg', 'png', 'gif', 'webp' ];
- const fileExtension = (
- filename.split( '.' ).pop() || ''
- ).toLowerCase();
- return imageExtensions.includes( fileExtension );
- };
-
- async function copyTextToClipboard( text: string ) {
- if ( 'clipboard' in navigator ) {
- await navigator.clipboard.writeText( text );
- } else {
- const textArea = document.createElement( 'textarea' );
- textArea.value = text;
- document.body.appendChild( textArea );
- textArea.select();
- document.execCommand( 'copy' );
- document.body.removeChild( textArea );
- }
- await onCopySuccess();
- }
-
- async function handleCopyToClipboard() {
- recordEvent( 'product_downloads_modal_copy_url_to_clipboard' );
- setIsCopingToClipboard( true );
- await copyTextToClipboard( file );
- setIsCopingToClipboard( false );
- }
-
- return (
- <Modal
- title={ sprintf(
- /* translators: %s is the attribute name */
- __( 'Edit %s', 'woocommerce' ),
- name
- ) }
- onRequestClose={ ( event ) => {
- if (
- event &&
- ! event.isPropagationStopped() &&
- ! isCopingToClipboard
- ) {
- recordEvent( 'product_downloads_modal_cancel' );
- onCancel();
- }
- } }
- className="woocommerce-edit-downloads-modal"
- >
- <div className="woocommerce-edit-downloads-modal__preview">
- <ImageGallery allowDragging={ false } columns={ 1 }>
- { isImage( file ) ? (
- <ImageGalleryItem
- key={ id }
- alt={ name }
- src={ file }
- id={ `${ id }` }
- isCover={ false }
- />
- ) : (
- <DownloadsCustomImage />
- ) }
- </ImageGallery>
-
- <div className="components-form-file-upload">
- <p>{ name }</p>
- </div>
- </div>
- <BaseControl
- id={ 'file-name-help' }
- className="woocommerce-edit-downloads-modal__file-name"
- help={ __(
- 'Your customers will see this on the thank-you page and in their order confirmation email.',
- 'woocommerce'
- ) }
- >
- <InputControl
- id={ 'file-name' }
- label={ __( 'FILE NAME', 'woocommerce' ) }
- name={ 'file-name' }
- value={ name || '' }
- onChange={ ( value ) => {
- onChange( value ?? '' );
- } }
- />
- </BaseControl>
-
- <div className="woocommerce-edit-downloads-modal__file-url">
- <InputControl
- disabled
- id={ 'file-url' }
- label={ __( 'FILE URL', 'woocommerce' ) }
- name={ 'file-url' }
- value={ file || '' }
- suffix={
- <Button
- icon={ <UnionIcon /> }
- onClick={ handleCopyToClipboard }
- />
- }
- />
- </div>
- <div className="woocommerce-edit-downloads-modal__buttons">
- <div className="woocommerce-edit-downloads-modal__buttons-left">
- <Button
- icon={ trash }
- isDestructive
- variant="tertiary"
- label={ __( 'Delete', 'woocommerce' ) }
- onClick={ () => {
- recordEvent( 'product_downloads_modal_delete' );
- onRemove();
- } }
- >
- { __( 'Delete file', 'woocommerce' ) }
- </Button>
- </div>
- <div className="woocommerce-edit-downloads-modal__buttons-right">
- <Button
- label={ __( 'Cancel', 'woocommerce' ) }
- onClick={ () => {
- recordEvent( 'product_downloads_modal_cancel' );
- onCancel();
- } }
- variant="tertiary"
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- label={ __( 'Update', 'woocommerce' ) }
- onClick={ () => {
- recordEvent( 'product_downloads_modal_update' );
- onSave();
- } }
- variant="primary"
- >
- { __( 'Update', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- </Modal>
- );
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/downloads-custom-image.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/downloads-custom-image.tsx
deleted file mode 100644
index 1445c71f4f0..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/downloads-custom-image.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export const DownloadsCustomImage = () => (
- <svg
- width="56"
- height="72"
- viewBox="0 0 56 72"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M37.9551 0H1.41177C0.63207 0 0 0.632067 0 1.41176V70.5882C0 71.3679 0.632067 72 1.41176 72H54.5882C55.3679 72 56 71.3679 56 70.5882V17.9261L37.9551 0Z"
- fill="#F0F0F0"
- />
- <rect
- x="28.6191"
- y="40.6892"
- width="13.3101"
- height="13.3107"
- rx="2.85325"
- fill="#DDDDDD"
- />
- <ellipse
- cx="18.1551"
- cy="47.3446"
- rx="6.65505"
- ry="6.65537"
- fill="#DDDDDD"
- />
- <path
- d="M25.9557 24.1401C26.5048 23.1889 27.8776 23.1889 28.4267 24.1401L34.6041 34.84C35.1531 35.7911 34.4668 36.9799 33.3686 36.9799H21.0139C19.9157 36.9799 19.2293 35.7911 19.7784 34.84L25.9557 24.1401Z"
- fill="#DDDDDD"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M38.0005 9.53674e-05L56 17.9995H40.824C39.2646 17.9995 38.0005 16.7354 38.0005 15.176V9.53674e-05Z"
- fill="#DDDDDD"
- />
- </svg>
-);
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/union-icon.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/union-icon.tsx
deleted file mode 100644
index 0816113bafe..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/images/union-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export const UnionIcon = () => (
- <svg
- width="14"
- height="16"
- viewBox="0 0 14 16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M0.25 6C0.25 5.0335 1.0335 4.25 2 4.25L3 4.25L3 5.75L2 5.75C1.86193 5.75 1.75 5.86193 1.75 6L1.75 14C1.75 14.1381 1.86193 14.25 2 14.25L8 14.25C8.13807 14.25 8.25 14.1381 8.25 14L8.25 13L9.75 13L9.75 14C9.75 14.9665 8.9665 15.75 8 15.75L2 15.75C1.0335 15.75 0.25 14.9665 0.25 14L0.25 6ZM6 0.25C5.0335 0.25 4.25 1.0335 4.25 2L4.25 10C4.25 10.9665 5.0335 11.75 6 11.75L12 11.75C12.9665 11.75 13.75 10.9665 13.75 10L13.75 2C13.75 1.0335 12.9665 0.249999 12 0.249999L6 0.25ZM5.75 2C5.75 1.86193 5.86193 1.75 6 1.75L12 1.75C12.1381 1.75 12.25 1.86193 12.25 2L12.25 10C12.25 10.1381 12.1381 10.25 12 10.25L6 10.25C5.86193 10.25 5.75 10.1381 5.75 10L5.75 2Z"
- fill="#007CBA"
- />
- </svg>
-);
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/index.ts
deleted file mode 100644
index 913cab1acc9..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './edit-downloads-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/style.scss b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/style.scss
deleted file mode 100644
index ae9887ab0ee..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-$gutenberg-blue: var(--wp-admin-theme-color);
-
-.woocommerce-edit-downloads-modal {
- &__buttons {
- display: flex;
- justify-content: space-between;
- padding-top: $gap + $gap-large;
- button:not(.is-destructive) {
- flex-grow: 1;
- &:not(:first-child) {
- margin-left: 10px;
- }
- }
- }
-
- &__file-url {
- padding-bottom: $gap-large;
- }
-
- &__preview {
- margin-bottom: $gap;
- }
-
- .components-input-control__suffix {
- cursor: pointer;
- }
-
- .woocommerce-image-gallery,
- .components-form-file-upload {
- display: inline-block;
- vertical-align: middle;
- padding-right: $gap;
- p {
- margin-bottom: $gap-smallest;
- }
- button {
- color: $gutenberg-blue;
- padding: 0;
- }
- button:hover:not(.is-busy) {
- background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
- }
- .woocommerce-image-gallery__item {
- width: $gap-larger * 2;
- height: $gap-larger * 2;
- img {
- width: $gap-larger * 2;
- height: $gap-larger * 2;
- border-color: #fff;
- }
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/types.ts
deleted file mode 100644
index 15f20219967..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductDownload } from '@woocommerce/data';
-
-export type EditDownloadsModalProps = {
- downloadableItem: ProductDownload;
- onCancel: () => void;
- onRemove: () => void;
- onSave: () => void;
- onChange: ( name: string ) => void;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit.tsx
deleted file mode 100644
index def40b136c6..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, Spinner } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
- createElement,
- Fragment,
- createInterpolateElement,
- useState,
-} from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-import type { Attachment } from '@wordpress/media-utils';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import {
- ListItem,
- MediaUploader,
- MediaUploaderErrorCallback,
- Sortable,
-} from '@woocommerce/components';
-import { Product, ProductDownload } from '@woocommerce/data';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { UploadsBlockAttributes } from './types';
-import { DownloadsMenu } from './downloads-menu';
-import { ProductEditorBlockEditProps } from '../../../types';
-import {
- ManageDownloadLimitsModal,
- ManageDownloadLimitsModalProps,
-} from '../../../components/manage-download-limits-modal';
-import { EditDownloadsModal } from './edit-downloads-modal';
-import { UploadImage } from './upload-image';
-import { SectionActions } from '../../../components/block-slot-fill';
-import { InsertUrlLinkErrorCallback } from './insert-url-menu-item';
-
-function getFileName( url?: string ) {
- const [ name ] = url?.split( '/' ).reverse() ?? [];
- return name;
-}
-
-function stringifyId< ID >( id?: ID ): string {
- return id ? String( id ) : '';
-}
-
-function stringifyEntityId< ID, T extends { id?: ID } >( entity: T ): T {
- return { ...entity, id: stringifyId( entity.id ) };
-}
-
-export function DownloadBlockEdit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< UploadsBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const [ downloads, setDownloads ] = useEntityProp< Product[ 'downloads' ] >(
- 'postType',
- postType,
- 'downloads'
- );
- const [ downloadLimit, setDownloadLimit ] = useEntityProp<
- Product[ 'download_limit' ]
- >( 'postType', postType, 'download_limit' );
- const [ downloadExpiry, setDownloadExpiry ] = useEntityProp<
- Product[ 'download_expiry' ]
- >( 'postType', postType, 'download_expiry' );
-
- const [ selectedDownload, setSelectedDownload ] =
- useState< ProductDownload | null >();
-
- const { allowedMimeTypes } = useSelect( ( select ) => {
- return select( 'core/editor' ).getEditorSettings() as Record<
- string,
- unknown
- >;
- }, [] );
-
- const allowedTypes = allowedMimeTypes
- ? Object.values( allowedMimeTypes )
- : [];
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
-
- const [ showManageDownloadLimitsModal, setShowManageDownloadLimitsModal ] =
- useState( false );
-
- function handleManageLimitsClick() {
- setShowManageDownloadLimitsModal( true );
- }
-
- function handleManageDownloadLimitsModalClose() {
- setShowManageDownloadLimitsModal( false );
- }
-
- function handleManageDownloadLimitsModalSubmit(
- value: ManageDownloadLimitsModalProps[ 'initialValue' ]
- ) {
- setDownloadLimit( value.downloadLimit as number );
- setDownloadExpiry( value.downloadExpiry as number );
- setShowManageDownloadLimitsModal( false );
- }
-
- function handleFileUpload( files: Attachment | Attachment[] ) {
- if ( ! Array.isArray( files ) ) return;
-
- const newFiles = files.filter(
- ( file ) =>
- ! downloads.some( ( download ) => download.file === file.url )
- );
-
- if ( newFiles.length !== files.length ) {
- createErrorNotice(
- files.length === 1
- ? __( 'This file has already been added', 'woocommerce' )
- : __(
- 'Some of these files have already been added',
- 'woocommerce'
- )
- );
- }
-
- if ( newFiles.length ) {
- const uploadedFiles = newFiles.map( ( file ) => ( {
- id: stringifyId( file.id ),
- file: file.url,
- name:
- file.title ||
- file.alt ||
- file.caption ||
- getFileName( file.url ),
- } ) );
-
- const stringifyIds = downloads.map( stringifyEntityId );
-
- stringifyIds.push( ...uploadedFiles );
-
- setDownloads( stringifyIds );
- }
- }
-
- function removeDownload( download: ProductDownload ) {
- const otherDownloads = downloads.reduce< ProductDownload[] >(
- function removeDownloadElement(
- others: ProductDownload[],
- current: ProductDownload
- ) {
- if ( current.file === download.file ) {
- return others;
- }
- return [ ...others, stringifyEntityId( current ) ];
- },
- []
- );
-
- setDownloads( otherDownloads );
- }
-
- function removeHandler( download: ProductDownload ) {
- return function handleRemoveClick() {
- removeDownload( download );
- };
- }
-
- function editHandler( download: ProductDownload ) {
- return function handleEditClick() {
- setSelectedDownload( stringifyEntityId( download ) );
- };
- }
-
- const handleUploadError: MediaUploaderErrorCallback = function ( error ) {
- createErrorNotice(
- sprintf(
- /* translators: %1$s is a line break, %2$s is the detailed error message */
- __( 'Error uploading file:%1$s%2$s', 'woocommerce' ),
- '\n',
- error.message
- )
- );
- };
-
- const handleLinkError: InsertUrlLinkErrorCallback = function (
- error: string
- ) {
- createErrorNotice(
- sprintf(
- /* translators: %1$s is a line break, %2$s is the detailed error message */
- __( 'Error linking file:%1$s%2$s', 'woocommerce' ),
- '\n',
- error
- )
- );
- };
- function editDownloadsModalSaveHandler( value: ProductDownload ) {
- return function handleEditDownloadsModalSave() {
- const newDownloads = downloads
- .map( stringifyEntityId )
- .map( ( obj: ProductDownload ) =>
- obj.id === value.id ? value : obj
- );
-
- setDownloads( newDownloads );
- setSelectedDownload( null );
- };
- }
-
- return (
- <div { ...blockProps }>
- <SectionActions>
- { Boolean( downloads.length ) && (
- <Button
- variant="tertiary"
- onClick={ handleManageLimitsClick }
- >
- { __( 'Manage limits', 'woocommerce' ) }
- </Button>
- ) }
-
- <DownloadsMenu
- allowedTypes={ allowedTypes }
- onUploadSuccess={ handleFileUpload }
- onUploadError={ handleUploadError }
- onLinkError={ handleLinkError }
- />
- </SectionActions>
-
- <div className="wp-block-woocommerce-product-downloads-field__body">
- <MediaUploader
- label={
- ! Boolean( downloads.length ) ? (
- <div className="wp-block-woocommerce-product-downloads-field__drop-zone-content">
- <UploadImage />
- <p className="wp-block-woocommerce-product-downloads-field__drop-zone-label">
- { createInterpolateElement(
- __(
- 'Supported file types: <Types /> and more. <link>View all</link>',
- 'woocommerce'
- ),
- {
- Types: (
- <Fragment>
- PNG, JPG, PDF, PPT, DOC,
- MP3, MP4
- </Fragment>
- ),
- link: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
- <a
- href="https://codex.wordpress.org/Uploading_Files"
- target="_blank"
- rel="noreferrer"
- onClick={ ( event ) =>
- event.stopPropagation()
- }
- />
- ),
- }
- ) }
- </p>
- </div>
- ) : (
- ''
- )
- }
- buttonText=""
- allowedMediaTypes={ allowedTypes }
- multipleSelect={ 'add' }
- maxUploadFileSize={
- window.productBlockEditorSettings?.maxUploadFileSize
- }
- onUpload={ handleFileUpload }
- onFileUploadChange={ handleFileUpload }
- onError={ handleUploadError }
- additionalData={ {
- type: 'downloadable_product',
- } }
- />
-
- { Boolean( downloads.length ) && (
- <Sortable className="wp-block-woocommerce-product-downloads-field__table">
- { downloads.map( ( download: ProductDownload ) => {
- const nameFromUrl = getFileName( download.file );
- const isUploading =
- download.file.startsWith( 'blob' );
-
- return (
- <ListItem
- key={ download.file }
- className="wp-block-woocommerce-product-downloads-field__table-row"
- >
- <div className="wp-block-woocommerce-product-downloads-field__table-filename">
- <span>{ download.name }</span>
- { download.name !== nameFromUrl && (
- <span className="wp-block-woocommerce-product-downloads-field__table-filename-description">
- { nameFromUrl }
- </span>
- ) }
- </div>
-
- <div className="wp-block-woocommerce-product-downloads-field__table-actions">
- { isUploading && (
- <Spinner
- aria-label={ __(
- 'Uploading file',
- 'woocommerce'
- ) }
- />
- ) }
- { ! isUploading && (
- <Button
- onClick={ editHandler(
- download
- ) }
- variant="tertiary"
- >
- { __( 'Edit', 'woocommerce' ) }
- </Button>
- ) }
- <Button
- icon={ closeSmall }
- label={ __(
- 'Remove file',
- 'woocommerce'
- ) }
- disabled={ isUploading }
- onClick={ removeHandler(
- download
- ) }
- />
- </div>
- </ListItem>
- );
- } ) }
- </Sortable>
- ) }
- </div>
-
- { showManageDownloadLimitsModal && (
- <ManageDownloadLimitsModal
- initialValue={ { downloadLimit, downloadExpiry } }
- onSubmit={ handleManageDownloadLimitsModalSubmit }
- onClose={ handleManageDownloadLimitsModalClose }
- />
- ) }
- { selectedDownload && (
- <EditDownloadsModal
- downloadableItem={ { ...selectedDownload } }
- onCancel={ () => setSelectedDownload( null ) }
- onRemove={ () => {
- removeDownload( selectedDownload );
- setSelectedDownload( null );
- } }
- onChange={ ( text: string ) => {
- setSelectedDownload( {
- ...selectedDownload,
- name: text,
- } );
- } }
- onSave={ editDownloadsModalSaveHandler( selectedDownload ) }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/editor.scss b/packages/js/product-editor/src/blocks/product-fields/downloads/editor.scss
deleted file mode 100644
index c754ccf8fda..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/editor.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import "./downloads-menu/style.scss";
-@import "./insert-url-menu-item/style.scss";
-@import "./edit-downloads-modal/style.scss";
-
-$fixed-section-height: 224px;
-
-.wp-block-woocommerce-product-downloads-field {
- &__body {
- position: relative;
-
- .woocommerce-media-uploader .woocommerce-media-uploader__label {
- margin-bottom: 0;
- }
- }
-
- &__table {
- overflow: auto;
- margin: 0;
- flex: 1 0 auto;
- }
-
- &__table-row {
- display: grid;
- grid-template-columns: 1fr 88px;
- padding: 0;
- min-height: $grid-unit-80 + $grid-unit-05;
- border: none;
-
- &:not(:last-child) {
- border-bottom: 1px solid $gray-200;
- }
-
- .woocommerce-sortable__handle {
- display: none;
- }
- }
-
- &__table-filename {
- display: flex;
- flex-direction: column;
- gap: 2px;
- }
-
- &__table-filename-description {
- color: $gray-700;
- }
-
- &__table-actions {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- gap: $grid-unit;
- padding-right: 2px;
-
- .components-button.has-icon {
- color: $gray-700;
- width: $grid-unit-30;
- height: $grid-unit-30;
- min-width: inherit;
- padding: 0;
- }
- }
-
- &__drop-zone-content {
- border: 1px dashed $gray-400;
- height: $fixed-section-height;
- border-radius: 2px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- gap: $grid-unit-30;
- }
-
- &__drop-zone-label {
- color: $gray-700;
- font-weight: normal;
- margin: 0;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/index.ts
deleted file mode 100644
index 96745f875b1..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { DownloadBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: DownloadBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/index.ts
deleted file mode 100644
index 5451dae9cc7..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './insert-url-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/insert-url-menu-item.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/insert-url-menu-item.tsx
deleted file mode 100644
index 1ea62a4d637..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/insert-url-menu-item.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { FocusEvent, FormEvent } from 'react';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { customLink, keyboardReturn } from '@wordpress/icons';
-import type { Attachment } from '@wordpress/media-utils';
-import {
- Button,
- Dropdown,
- MenuItem,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { InsertUrlMenuItemProps } from './types';
-
-function validateInput( input: HTMLInputElement ) {
- input.required = true;
- input.setCustomValidity( '' );
-
- if ( input.validity.valueMissing ) {
- input.setCustomValidity( __( 'The URL is required', 'woocommerce' ) );
- }
-
- if ( input.validity.typeMismatch ) {
- input.setCustomValidity( __( 'Insert a valid URL', 'woocommerce' ) );
- }
-}
-
-export function InsertUrlMenuItem( {
- onLinkSuccess,
- onLinkError,
-}: InsertUrlMenuItemProps ) {
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- const form = event.currentTarget;
-
- const urlInput: HTMLInputElement = form.url;
- validateInput( urlInput );
-
- if ( form.checkValidity() ) {
- const url = form.url.value;
- const mediaItem = {
- url,
- } as Attachment;
-
- onLinkSuccess( [ mediaItem ] );
- } else {
- onLinkError( urlInput.validationMessage );
- }
- }
-
- function handleInput( event: FormEvent< HTMLInputElement > ) {
- const urlInput = event.target as HTMLInputElement;
-
- validateInput( urlInput );
- }
-
- function handleBlur( event: FocusEvent< HTMLInputElement > ) {
- const urlInput = event.target;
-
- validateInput( urlInput );
- }
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'left',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <MenuItem
- aria-expanded={ isOpen }
- icon={ customLink }
- iconPosition="left"
- onClick={ onToggle }
- info={ __(
- 'Link to a file hosted elsewhere',
- 'woocommerce'
- ) }
- >
- { __( 'Insert from URL', 'woocommerce' ) }
- </MenuItem>
- ) }
- renderContent={ () => (
- <form
- className="components-dropdown-menu__menu"
- noValidate
- onSubmit={ handleSubmit }
- >
- <InputControl
- name="url"
- type="url"
- placeholder={ __( 'Insert URL', 'woocommerce' ) }
- suffix={
- <Button icon={ keyboardReturn } type="submit" />
- }
- className="woocommerce-inert-url-menu-item__input"
- aria-label={ __( 'Insert URL', 'woocommerce' ) }
- onInput={ handleInput }
- onBlur={ handleBlur }
- />
- </form>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/style.scss b/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/style.scss
deleted file mode 100644
index d0d456e0b16..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/style.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.woocommerce-inert-url-menu-item {
- &__input {
- min-width: 300px;
-
- .components-base-control__field
- .components-input-control__container
- > .components-input-control__input:invalid
- + .components-input-control__suffix
- + .components-input-control__backdrop {
- border-color: red;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/types.ts
deleted file mode 100644
index 702038f05fd..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/insert-url-menu-item/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import type { Attachment } from '@wordpress/media-utils';
-
-export type InsertUrlLinkErrorCallback = ( error: string ) => void;
-
-export type InsertUrlMenuItemProps = {
- onLinkSuccess( files: Attachment[] ): void;
- onLinkError: InsertUrlLinkErrorCallback;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts
deleted file mode 100644
index 1849032dd77..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './media-library';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx
deleted file mode 100644
index 5c013d5c73d..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/media-library.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { MediaLibraryProps } from './types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const wp: any;
-
-export function MediaLibrary( {
- allowedTypes,
- modalTitle,
- modalButtonText,
- multiple,
- className,
- uploaderParams,
- children,
- onSelect,
-}: MediaLibraryProps ) {
- const mediaLibraryModal = useMemo(
- function createMediaLibraryModal() {
- const media = wp.media( {
- title: modalTitle,
- library: {
- type: allowedTypes,
- },
- button: {
- text: modalButtonText,
- },
- multiple,
- states: [
- new wp.media.controller.Library( {
- title: modalTitle,
- library: wp.media.query(),
- multiple,
- priority: 20,
- filterable: 'all',
- } ),
- ],
- } );
-
- return media;
- },
- [ allowedTypes, modalTitle, modalButtonText, multiple ]
- );
-
- useEffect(
- function initializeEvents() {
- function handleSelect() {
- const mediaItems = mediaLibraryModal
- .state()
- .get( 'selection' )
- .toJSON();
-
- onSelect( mediaItems );
- }
-
- function handleReady() {
- mediaLibraryModal.uploader.options.uploader.params =
- uploaderParams;
- }
-
- mediaLibraryModal.on( 'select', handleSelect );
- mediaLibraryModal.on( 'ready', handleReady );
-
- return function unmountMediaLibraryModal() {
- mediaLibraryModal.off( 'select', handleSelect );
- mediaLibraryModal.off( 'ready', handleReady );
- };
- },
- [ mediaLibraryModal, uploaderParams, onSelect ]
- );
-
- useEffect(
- () =>
- function unmountMediaLibraryModal() {
- mediaLibraryModal.remove();
- },
- [ mediaLibraryModal ]
- );
-
- function openMediaLibraryModal() {
- mediaLibraryModal.$el.addClass( className );
- mediaLibraryModal.open();
- }
-
- return children( {
- open: openMediaLibraryModal,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts
deleted file mode 100644
index 67bce313fd1..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import type { Attachment } from '@wordpress/media-utils';
-
-export type ChildrenProps = {
- open(): void;
-};
-
-export type MediaLibraryProps = {
- allowedTypes?: string[];
- modalTitle?: string;
- modalButtonText?: string;
- multiple?: boolean | 'add';
- className?: string;
- uploaderParams?: Record< string, string >;
- children( props: ChildrenProps ): JSX.Element;
- onSelect( selection: Attachment[] ): void;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/types.ts
deleted file mode 100644
index 04f462d8372..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductDownload } from '@woocommerce/data';
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface UploadsBlockAttributes extends BlockAttributes {
- name: string;
-}
-
-export type DownloadableFileItem = {
- key: string;
- download: ProductDownload;
- uploading?: boolean;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/index.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/index.ts
deleted file mode 100644
index 022460cde79..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './upload-files-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/types.ts b/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/types.ts
deleted file mode 100644
index 2ba69c34736..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import type { Attachment } from '@wordpress/media-utils';
-import { MediaUploaderErrorCallback } from '@woocommerce/components';
-
-export type UploadFilesMenuItemProps = {
- allowedTypes?: string[];
- maxUploadFileSize?: number;
- onUploadSuccess( files: Attachment[] ): void;
- onUploadError: MediaUploaderErrorCallback;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/upload-files-menu-item.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/upload-files-menu-item.tsx
deleted file mode 100644
index 0e60b541134..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-files-menu-item/upload-files-menu-item.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { ChangeEvent } from 'react';
-import { FormFileUpload, MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { upload } from '@wordpress/icons';
-import { uploadMedia } from '@wordpress/media-utils';
-
-/**
- * Internal dependencies
- */
-import { UploadFilesMenuItemProps } from './types';
-
-export function UploadFilesMenuItem( {
- allowedTypes,
- maxUploadFileSize,
- onUploadSuccess,
- onUploadError,
-}: UploadFilesMenuItemProps ) {
- const resolvedMaxUploadFileSize =
- maxUploadFileSize ||
- window.productBlockEditorSettings?.maxUploadFileSize ||
- 10 * 1024 * 1024; // 10 MB by default if not set and not provided by the settings
-
- function handleFormFileUploadChange(
- event: ChangeEvent< HTMLInputElement >
- ) {
- const filesList = Array.from( event.currentTarget.files ?? [] );
-
- uploadMedia( {
- allowedTypes,
- filesList,
- maxUploadFileSize: resolvedMaxUploadFileSize,
- // onFileChange expects Partial<Attachment>[] but our callback uses Attachment[].
- onFileChange: onUploadSuccess as unknown as (
- attachments: Partial<
- import('@wordpress/media-utils').Attachment
- >[]
- ) => void,
- // Native OnErrorHandler expects (error: Error) => void, but our callback uses a richer type.
- onError: onUploadError as unknown as ( error: Error ) => void,
- } );
- }
-
- return (
- <FormFileUpload
- multiple
- onChange={ handleFormFileUploadChange }
- render={ ( { openFileDialog } ) => (
- <MenuItem
- icon={ upload }
- iconPosition="left"
- onClick={ openFileDialog }
- info={ __(
- 'Select files from your device',
- 'woocommerce'
- ) }
- >
- { __( 'Upload', 'woocommerce' ) }
- </MenuItem>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-image.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/upload-image.tsx
deleted file mode 100644
index 35ad6ca0289..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/upload-image.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function UploadImage() {
- return (
- <svg
- width="104"
- height="64"
- viewBox="0 0 104 64"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M88.129 64C87.9065 64 87.6851 63.9941 87.4649 63.9823V64H61.888L56.6463 48.9818L68.2211 51.8173L51.9999 35.5945L35.7787 51.8173L47.3535 48.9818L42.1118 64H17.972V63.985C8.36383 63.5505 0.682007 53.7386 0.682007 41.6982C0.682007 29.3812 8.72077 19.3963 18.6371 19.3963C22.011 19.3963 25.1676 20.5522 27.8642 22.5626C32.3286 9.21729 41.8544 0 52.8848 0C65.7239 0 76.5246 12.4881 79.6776 29.4383C82.0937 27.4239 85.001 26.2488 88.129 26.2488C96.5176 26.2488 103.318 34.6997 103.318 45.1244C103.318 55.5491 96.5176 64 88.129 64Z"
- fill="#F0F0F0"
- />
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/block.json b/packages/js/product-editor/src/blocks/product-fields/images/block.json
deleted file mode 100644
index b49e77623c2..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/block.json
+++ /dev/null
@@ -1,49 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-images-field",
- "title": "Product images",
- "category": "widgets",
- "description": "The product images.",
- "keywords": [
- "products",
- "image",
- "images",
- "gallery"
- ],
- "textdomain": "default",
- "attributes": {
- "mediaId": {
- "type": "number",
- "role": "content"
- },
- "property": {
- "type": "string"
- },
- "multiple": {
- "type": "boolean",
- "default": true
- },
- "images": {
- "role": "content",
- "type": "array",
- "items": {
- "type": "number"
- },
- "default": []
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
deleted file mode 100644
index a7d6472ba02..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-/**
- * External dependencies
- */
-import { DragEvent } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
-import { BlockAttributes } from '@wordpress/blocks';
-import { DropZone } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import clsx from 'clsx';
-import { createElement, useState } from '@wordpress/element';
-import { Icon, trash } from '@wordpress/icons';
-import type { Attachment } from '@wordpress/media-utils';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import {
- MediaUploader,
- MediaUploaderErrorCallback,
- ImageGallery,
- ImageGalleryItem,
-} from '@woocommerce/components';
-import { recordEvent } from '@woocommerce/tracks';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-import { PlaceHolder } from './place-holder';
-import { SectionActions } from '../../../components/block-slot-fill';
-import { mapUploadImageToImage } from '../../../utils/map-upload-image-to-image';
-
-type UploadImage = {
- id?: number;
-} & Record< string, string >;
-
-export interface Image {
- id: number;
- src: string;
- name: string;
- alt: string;
-}
-
-export function ImageBlockEdit( {
- attributes,
- context,
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const { property, multiple } = attributes;
- const [ propertyValue, setPropertyValue ] = useEntityProp<
- Image | Image[] | null
- >( 'postType', context.postType, property );
- const [ isRemovingZoneVisible, setIsRemovingZoneVisible ] =
- useState< boolean >( false );
- const [ isRemoving, setIsRemoving ] = useState< boolean >( false );
- const [ draggedImageId, setDraggedImageId ] = useState< number | null >(
- null
- );
-
- const blockProps = useWooBlockProps( attributes, {
- className: clsx( {
- 'has-images': Array.isArray( propertyValue )
- ? propertyValue.length > 0
- : Boolean( propertyValue ),
- } ),
- } );
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
-
- function orderImages( newOrder: JSX.Element[] ) {
- if ( Array.isArray( propertyValue ) ) {
- const memoIds = propertyValue.reduce< Record< string, Image > >(
- ( current, item ) => ( {
- ...current,
- [ `${ item.id }` ]: item,
- } ),
- {}
- );
- const orderedImages = newOrder
- .filter( ( image ) => image?.props?.id in memoIds )
- .map( ( image ) => memoIds[ image?.props?.id ] );
-
- recordEvent(
- 'product_images_change_image_order_via_image_gallery'
- );
- setPropertyValue( orderedImages );
- }
- }
-
- function uploadHandler( eventName: string ) {
- return function handleFileUpload( upload: Attachment | Attachment[] ) {
- recordEvent( eventName );
-
- if ( Array.isArray( upload ) ) {
- const images: Image[] = upload
- .filter( ( image ) => image.id )
- .map( ( image ) => ( {
- id: image.id,
- name: image.title ?? '',
- src: image.url,
- alt: image.alt,
- } ) );
- if ( upload[ 0 ]?.id ) {
- setPropertyValue( [
- ...( propertyValue as Image[] ),
- ...images,
- ] );
- }
- } else if ( upload.id ) {
- setPropertyValue(
- mapUploadImageToImage( upload as unknown as UploadImage )
- );
- }
- };
- }
-
- function handleSelect( selection: Attachment | Attachment[] ) {
- recordEvent( 'product_images_add_via_media_library' );
-
- if ( Array.isArray( selection ) ) {
- const images = selection
- .map( ( media ) =>
- mapUploadImageToImage( media as unknown as UploadImage )
- )
- .filter( ( image ) => image !== null );
-
- setPropertyValue( images as Image[] );
- } else {
- setPropertyValue(
- mapUploadImageToImage( selection as unknown as UploadImage )
- );
- }
- }
-
- function handleDragStart( event: DragEvent< HTMLDivElement > ) {
- if ( Array.isArray( propertyValue ) ) {
- const { id: imageId, dataset } = event.target as HTMLElement;
- if ( imageId ) {
- setDraggedImageId( parseInt( imageId, 10 ) );
- } else if ( dataset?.index ) {
- const index = parseInt( dataset.index, 10 );
- setDraggedImageId( propertyValue[ index ]?.id ?? null );
- }
- setIsRemovingZoneVisible( ( current ) => ! current );
- }
- }
-
- function handleDragEnd() {
- if ( Array.isArray( propertyValue ) ) {
- if ( isRemoving && draggedImageId ) {
- recordEvent( 'product_images_remove_image_button_click' );
- setPropertyValue(
- propertyValue.filter( ( img ) => img.id !== draggedImageId )
- );
- setIsRemoving( false );
- setDraggedImageId( null );
- }
- setIsRemovingZoneVisible( ( current ) => ! current );
- }
- }
-
- function handleReplace( {
- replaceIndex,
- media,
- }: {
- replaceIndex: number;
- media: Attachment;
- } ) {
- recordEvent( 'product_images_replace_image_button_click' );
-
- if ( Array.isArray( propertyValue ) ) {
- // Ignore the media if it is replaced by itseft.
- if ( propertyValue.some( ( img ) => media.id === img.id ) ) {
- return;
- }
-
- const image = mapUploadImageToImage(
- media as unknown as UploadImage
- );
- if ( image ) {
- const newImages = [ ...propertyValue ];
- newImages[ replaceIndex ] = image;
- setPropertyValue( newImages );
- }
- } else {
- setPropertyValue(
- mapUploadImageToImage( media as unknown as UploadImage )
- );
- }
- }
-
- function handleRemove( { removedItem }: { removedItem: JSX.Element } ) {
- recordEvent( 'product_images_remove_image_button_click' );
-
- if ( Array.isArray( propertyValue ) ) {
- const remainingImages = propertyValue.filter(
- ( image ) => String( image.id ) !== removedItem.props.id
- );
- setPropertyValue( remainingImages );
- } else {
- setPropertyValue( null );
- }
- }
-
- const handleMediaUploaderError: MediaUploaderErrorCallback = function (
- error
- ) {
- createErrorNotice(
- sprintf(
- /* translators: %1$s is a line break, %2$s is the detailed error message */
- __( 'Error uploading image:%1$s%2$s', 'woocommerce' ),
- '\n',
- error.message
- )
- );
- };
-
- const isImageGalleryVisible =
- propertyValue !== null &&
- ( ! Array.isArray( propertyValue ) || propertyValue.length > 0 );
-
- return (
- <div { ...blockProps }>
- <div className="woocommerce-product-form__image-drop-zone">
- { isRemovingZoneVisible ? (
- <div className="woocommerce-product-form__remove-image-drop-zone">
- <span>
- <Icon
- icon={ trash }
- size={ 20 }
- className="icon-control"
- />
- { __( 'Drop here to remove', 'woocommerce' ) }
- </span>
- <DropZone
- onHTMLDrop={ () => setIsRemoving( true ) }
- onDrop={ () => setIsRemoving( true ) }
- label={ __( 'Drop here to remove', 'woocommerce' ) }
- />
- </div>
- ) : (
- <SectionActions>
- <div className="woocommerce-product-form__media-uploader">
- <MediaUploader
- value={
- Array.isArray( propertyValue )
- ? propertyValue.map( ( { id } ) => id )
- : propertyValue?.id ?? undefined
- }
- multipleSelect={ multiple ? 'add' : false }
- maxUploadFileSize={
- window.productBlockEditorSettings
- ?.maxUploadFileSize
- }
- onError={ handleMediaUploaderError }
- onFileUploadChange={ uploadHandler(
- 'product_images_add_via_file_upload_area'
- ) }
- onMediaGalleryOpen={ () => {
- recordEvent(
- 'product_images_media_gallery_open'
- );
- } }
- onSelect={
- ( ( value: unknown ) =>
- handleSelect(
- value as Attachment | Attachment[]
- ) ) as ( value: unknown ) => void
- }
- onUpload={ uploadHandler(
- 'product_images_add_via_drag_and_drop_upload'
- ) }
- label={ '' }
- buttonText={ __(
- 'Choose an image',
- 'woocommerce'
- ) }
- />
- </div>
- </SectionActions>
- ) }
- </div>
- { isImageGalleryVisible ? (
- <ImageGallery
- allowDragging={ false }
- onDragStart={ handleDragStart }
- onDragEnd={ handleDragEnd }
- onOrderChange={ orderImages }
- onReplace={ handleReplace }
- onRemove={ handleRemove }
- onSelectAsCover={ () =>
- recordEvent(
- 'product_images_select_image_as_cover_button_click'
- )
- }
- >
- { ( Array.isArray( propertyValue )
- ? propertyValue
- : [ propertyValue ]
- ).map( ( image, index ) => (
- <ImageGalleryItem
- key={ image.id }
- alt={ image.alt }
- src={ image.src }
- id={ `${ image.id }` }
- isCover={ multiple && index === 0 }
- />
- ) ) }
- </ImageGallery>
- ) : (
- <PlaceHolder multiple={ multiple } />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/editor.scss b/packages/js/product-editor/src/blocks/product-fields/images/editor.scss
deleted file mode 100644
index 882be4d082a..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/editor.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import "./place-holder/style.scss";
-
-.wp-block-woocommerce-product-images-field {
- .woocommerce-sortable {
- margin-top: 0;
- padding: 0;
- }
-
- &.has-images {
- .woocommerce-image-gallery {
- margin-top: $gap-largest;
- }
- }
-
- &:not(.has-images) {
- .woocommerce-sortable {
- display: none;
- }
- }
-}
-
-.woocommerce-product-form__media-uploader {
- .woocommerce-media-uploader {
- .components-drop-zone {
- // This height cannot be higher than this, otherwise it will invade the area from the block below.
- min-height: 84px;
- }
-
- &__label {
- display: none;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/index.ts b/packages/js/product-editor/src/blocks/product-fields/images/index.ts
deleted file mode 100644
index 470ed93bf31..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { ImageBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: ImageBlockEdit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
deleted file mode 100644
index 7321644cee7..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function Product( { ...props }: React.SVGProps< SVGSVGElement > ) {
- return (
- <svg
- aria-hidden="true"
- width="118"
- height="90"
- { ...props }
- viewBox="0 0 118 90"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <rect width="118" height="90" fill="white" />
- <path
- d="M87.3178 20.5954C81.3245 20.5954 77.8536 21.6433 75.8743 23.9767C77.1554 19.4609 79.5226 16.0706 83.8469 13.0001C78.7224 13.6617 75.748 15.6088 74.3073 18.3952C72.8666 15.6111 69.8921 13.664 64.7677 13.0001C69.092 16.0706 71.4591 19.4586 72.7403 23.9767C70.761 21.6433 67.29 20.5954 61.2968 20.5954C68.4404 23.9501 71.1732 26.6498 73.5005 31.4876H75.1119C77.4391 26.6498 80.1742 23.9501 87.3156 20.5954H87.3178Z"
- fill="#E0E0E0"
- />
- <path
- d="M79.1522 73.2086C81.4767 72.3472 89.9997 70.4556 89.9997 62.1995C89.9997 57.2958 85.5649 53.5969 80.53 52.7385C82.7701 52.0066 86.0412 48.7475 86.0412 45.0908C86.0412 40.3799 81.7782 38.5004 78.293 37.7715C78.293 36.6961 82.1671 31.1479 82.1671 31.1479H66.1521C66.1521 31.1479 70.0262 36.6961 70.0262 37.7715C66.538 38.5034 62.278 40.3799 62.278 45.0908C62.278 48.7475 65.5491 52.0066 67.7892 52.7385C62.7513 53.6 58.3195 57.2988 58.3195 62.1995C58.3195 70.4586 66.8425 72.3502 69.167 73.2086C63.6558 73.7237 60.9002 75.8743 60.4721 77.5942H87.8501C87.419 75.8743 84.6634 73.7237 79.1552 73.2086H79.1522Z"
- fill="#F0F0F0"
- />
- <path
- d="M46.2238 74.2966C48.1078 73.5972 55.012 72.0608 55.012 65.3537C55.012 61.3706 51.4192 58.3667 47.3387 57.6674C49.1518 57.0746 51.8026 54.4259 51.8026 51.4553C51.8026 47.6299 48.3494 46.1024 45.5256 45.5096C45.5256 44.6371 48.6641 40.1301 48.6641 40.1301H35.6913C35.6913 40.1301 38.8298 44.6371 38.8298 45.5096C36.0038 46.1024 32.5528 47.6299 32.5528 51.4553C32.5528 54.4237 35.2037 57.0724 37.0167 57.6674C32.9362 58.3667 29.3434 61.3706 29.3434 65.3537C29.3434 72.0608 36.2476 73.5972 38.1316 74.2966C33.6677 74.7162 31.4357 76.4635 31.0877 77.86H53.2677C52.9197 76.4635 50.6877 74.7162 46.2238 74.2966Z"
- fill="white"
- />
- <path
- d="M42.7052 42.1675C44.3669 32.7344 42.7487 24.8174 37.5744 22.5889C32.5593 20.4293 29.8663 22.9533 30.8901 25.0079C32.118 27.4704 35.8707 25.5778 39.1746 28.6657C42.2669 31.5556 42.3479 42.5139 42.3479 42.5139L42.7067 42.166L42.7052 42.1675Z"
- fill="#E0E0E0"
- />
- <path
- d="M42.6524 39.8413C42.6524 39.8413 43.8097 32.2258 48.5682 28.928C53.2741 25.6661 57.914 27.5152 58.0851 29.3569C58.2562 31.1985 56.9968 32.3983 53.1886 32.3983C47.4889 32.3983 45.0782 34.8848 43.0997 39.9283C42.5458 41.341 42.6524 39.8413 42.6524 39.8413Z"
- fill="#E0E0E0"
- />
- <path
- d="M43.4499 42.3579C43.4499 42.3579 42.2926 34.7424 37.5341 31.4446C32.8282 28.1827 28.1883 30.0319 28.0172 31.8735C27.8461 33.7151 28.9179 35.0424 34.0621 34.9149C39.5321 34.7784 42.1215 42.6159 42.1215 42.6159L43.4499 42.3594V42.3579Z"
- fill="#E0E0E0"
- />
- <path
- d="M46.2243 74.2967C48.1083 73.5973 55.0125 72.061 55.0125 65.3538C55.0125 61.3708 51.4197 58.3668 47.3392 57.6675C49.1522 57.0747 51.8031 54.426 51.8031 51.4554C51.8031 47.63 48.3499 46.1025 45.5261 45.5097C45.5261 44.6372 48.6646 40.1302 48.6646 40.1302H35.6918C35.6918 40.1302 38.8303 44.6372 38.8303 45.5097C36.0043 46.1025 32.5533 47.63 32.5533 51.4554C32.5533 54.4238 35.2042 57.0725 37.0172 57.6675C32.9367 58.3668 29.3439 61.3708 29.3439 65.3538C29.3439 72.061 36.2481 73.5973 38.1321 74.2967C33.6682 74.7163 31.4362 76.4636 31.0882 77.8601H53.2682C52.9202 76.4636 50.6882 74.7163 46.2243 74.2967Z"
- fill="#F0F0F0"
- />
- <path
- d="M42.1795 62.7139C37.4341 62.7139 33.8368 61.8391 30.889 61.1065C29.927 62.3054 29.3463 63.7485 29.3463 65.3515C29.3463 66.8035 29.6699 68.0113 30.1974 69.0215C33.6351 70.1893 36.9177 70.771 42.1817 70.771C47.4458 70.771 50.7284 70.1893 54.1661 69.0215C54.6914 68.0113 55.0172 66.8013 55.0172 65.3515C55.0172 63.7485 54.4342 62.3054 53.4745 61.1065C50.5267 61.8391 46.9294 62.7139 42.184 62.7139H42.1795Z"
- fill="#E0E0E0"
- />
- <path
- d="M51.4907 53.2537C51.6901 52.6786 51.8054 52.0747 51.8054 51.4575C51.8054 50.4696 51.5727 49.6348 51.1826 48.9287C49.7308 49.597 45.9163 50.5894 42.1794 50.5894C38.4424 50.5894 34.6279 49.597 33.1762 48.9287C32.7861 49.6348 32.5533 50.4673 32.5533 51.4575C32.5533 52.077 32.6686 52.6809 32.8681 53.2537C35.2907 54.1417 38.735 54.8566 42.1794 54.8566C45.6237 54.8566 49.0659 54.1417 51.4907 53.2537Z"
- fill="#E0E0E0"
- />
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/products.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/products.tsx
deleted file mode 100644
index ab6e7702e57..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/products.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-
-export function Products( { ...props }: React.SVGProps< SVGSVGElement > ) {
- const clipPathId0 = useInstanceId( Products, 'clip-path' ) as string;
- const clipPathId1 = useInstanceId( Products, 'clip-path' ) as string;
- const clipPathId2 = useInstanceId( Products, 'clip-path' ) as string;
- const clipPathId3 = useInstanceId( Products, 'clip-path' ) as string;
- const filterId0 = useInstanceId( Products, 'filter' ) as string;
-
- return (
- <svg
- aria-hidden="true"
- width="330"
- height="179"
- { ...props }
- viewBox="0 0 330 179"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <g clipPath={ `url(#${ clipPathId0 })` }>
- <rect
- y="34.9561"
- width="115.163"
- height="115.163"
- rx="8"
- transform="rotate(-9.4741 0 34.9561)"
- fill="white"
- />
- <rect
- width="118"
- height="90"
- transform="translate(0.671875 47.5995) rotate(-9.4741)"
- fill="white"
- />
- <path
- d="M75.235 56.0601C69.3054 57.0496 66.0444 58.6594 64.4714 61.2948C64.9933 56.6155 66.7756 52.8705 70.5469 49.1187C65.5862 50.6193 62.9649 53.0368 61.9995 56.0314C60.1145 53.5147 56.8502 52.0794 51.6706 52.2687C56.4559 54.5926 59.3572 57.5538 61.3707 61.8123C59.0272 59.8305 55.4201 59.3667 49.4906 60.3563C57.1121 62.4959 60.2617 64.7157 63.3629 69.1178L64.9571 68.8517C66.4609 63.6812 68.7212 60.5585 75.2328 56.0605L75.235 56.0601Z"
- fill="#DDDDDD"
- />
- <path
- d="M75.7883 109.541C77.9458 108.305 86.066 105.026 84.7028 96.8581C83.8932 92.0066 78.8948 89.0793 73.7718 89.0612C75.8672 87.9672 78.5654 84.2027 77.9617 80.585C77.1839 75.9242 72.6559 74.7684 69.0874 74.6227C68.9099 73.5588 71.8268 67.4299 71.8268 67.4299L55.982 70.0741C55.982 70.0741 60.731 74.9237 60.9085 75.9876C57.5783 77.2876 53.6734 79.8476 54.4511 84.5084C55.0549 88.1261 58.8293 90.8105 61.1664 91.1648C56.3243 92.8489 52.5503 97.2401 53.3594 102.089C54.723 110.26 63.4677 110.724 65.9092 111.19C60.5417 112.609 58.1704 115.192 58.0308 116.964L85.1178 112.444C84.4073 110.814 81.3259 109.141 75.7913 109.541L75.7883 109.541Z"
- fill="#F0F0F0"
- />
- </g>
- <rect
- x="0.575481"
- y="35.3669"
- width="114.163"
- height="114.163"
- rx="7.5"
- transform="rotate(-9.4741 0.575481 35.3669)"
- stroke="#CCCCCC"
- />
- <g clipPath={ `url(#${ clipPathId1 })` }>
- <rect
- x="106"
- y="71"
- width="108"
- height="108"
- rx="8"
- fill="white"
- />
- <g
- clipPath={ `url(#${ clipPathId3 })` }
- filter={ `url(#${ filterId0 })` }
- >
- <rect
- width="148"
- height="113"
- transform="translate(86 68.5)"
- fill="white"
- />
- <path
- d="M190.129 99.2362C176.411 99.2362 168.467 101.637 163.937 106.983C166.869 96.6368 172.287 88.8691 182.185 81.8339C170.456 83.3498 163.648 87.811 160.35 94.1951C157.053 87.8161 150.245 83.3549 138.516 81.8339C148.414 88.8691 153.832 96.6317 156.764 106.983C152.234 101.637 144.289 99.2362 130.572 99.2362C146.922 106.922 153.177 113.108 158.504 124.192H162.192C167.519 113.108 173.779 106.922 190.124 99.2362H190.129Z"
- fill="#DDDDDD"
- />
- <path
- d="M171.287 219.941C176.607 217.968 196.115 213.634 196.115 194.717C196.115 183.482 185.964 175.007 174.44 173.04C179.567 171.363 187.054 163.896 187.054 155.518C187.054 144.724 177.297 140.418 169.32 138.748C169.32 136.284 178.187 123.572 178.187 123.572H141.532C141.532 123.572 150.399 136.284 150.399 138.748C142.416 140.425 132.665 144.724 132.665 155.518C132.665 163.896 140.152 171.363 145.279 173.04C133.749 175.014 123.605 183.489 123.605 194.717C123.605 213.64 143.112 217.974 148.433 219.941C135.819 221.121 129.512 226.049 128.532 229.99H191.195C190.208 226.049 183.901 221.121 171.294 219.941H171.287Z"
- fill="#F0F0F0"
- />
- </g>
- </g>
- <rect
- x="106.5"
- y="71.5"
- width="107"
- height="107"
- rx="7.5"
- stroke="#CCCCCC"
- />
- <g clipPath={ `url(#${ clipPathId2 })` }>
- <rect
- x="213.602"
- width="117.576"
- height="117.576"
- rx="8"
- transform="rotate(9.10319 213.602 0)"
- fill="white"
- />
- <rect
- width="118"
- height="90"
- transform="translate(211.211 13.5808) rotate(9.10319)"
- fill="white"
- />
- <path
- d="M279.072 45.3017C273.162 44.3548 269.574 44.8397 267.254 46.8279C269.231 42.5774 272.1 39.6085 276.85 37.264C271.692 37.1068 268.451 38.5568 266.591 41.0766C265.61 38.1037 262.985 35.7138 258.037 34.2496C261.815 37.9605 263.614 41.6752 264.164 46.3327C262.581 43.7191 259.324 42.1374 253.414 41.1905C259.928 45.6271 262.196 48.7209 263.727 53.8589L265.315 54.1135C268.375 49.7109 271.498 47.481 279.07 45.3014L279.072 45.3017Z"
- fill="#E0E0E0"
- />
- <path
- d="M262.631 95.9482C265.059 95.466 273.762 94.9474 275.067 86.8065C275.842 81.9713 272.053 77.6233 267.224 75.9814C269.549 75.6136 273.289 72.9168 273.867 69.3112C274.611 64.666 270.704 62.1391 267.383 60.8697C267.553 59.8094 272.25 54.9507 272.25 54.9507L256.458 52.4204C256.458 52.4204 259.401 58.5033 259.232 59.5636C255.676 59.7342 251.179 60.9115 250.435 65.5567C249.857 69.1623 252.568 72.8927 254.661 73.9684C249.557 74.0219 244.603 76.9689 243.829 81.8012C242.524 89.945 250.629 93.1569 252.785 94.3706C247.27 94.0077 244.213 95.693 243.519 97.3212L270.515 101.647C270.362 99.8828 267.984 97.3268 262.634 95.9487L262.631 95.9482Z"
- fill="#F0F0F0"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M239.562 96.9769C238.554 94.0517 238.285 89.8732 239.007 85.3673C239.729 80.8615 241.29 76.9762 243.162 74.5126L232.691 72.8348C233.7 75.76 233.969 79.9386 233.247 84.4444C232.525 88.9502 230.964 92.8356 229.091 95.2991L239.562 96.9769Z"
- fill="#F0F0F0"
- />
- <path
- d="M241.466 51.1999L235.767 50.2867L218.224 70.9461L233.092 73.3285L242.508 74.8372L257.376 77.2196L247.166 52.1132L241.466 51.1999Z"
- fill="#E0E0E0"
- />
- <path
- d="M253.979 68.868L224.06 64.0739L218.224 70.9461L253.979 68.868Z"
- fill="#F0F0F0"
- />
- <path
- d="M250.583 60.513L229.897 57.1984L224.06 64.074L250.583 60.513Z"
- fill="#F0F0F0"
- />
- <path
- d="M247.166 52.1131L235.767 50.2866L229.896 57.1984L247.166 52.1131Z"
- fill="#F0F0F0"
- />
- <path
- d="M278.485 84.1128L296.917 87.0663L292.88 105.325L276.616 102.719L278.485 84.1128Z"
- fill="#F0F0F0"
- />
- <path
- d="M290.23 80.8727C289.873 83.0995 287.856 84.6278 287.856 84.6278C287.856 84.6278 286.417 82.5457 286.774 80.3189C287.13 78.0921 289.148 76.5637 289.148 76.5637C289.148 76.5637 290.586 78.6458 290.23 80.8727Z"
- fill="#E0E0E0"
- />
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M295.836 91.9567L277.984 89.0963L278.485 84.1128L296.917 87.0662L295.836 91.9567Z"
- fill="#E0E0E0"
- />
- </g>
- <rect
- x="214.017"
- y="0.572809"
- width="116.576"
- height="116.576"
- rx="7.5"
- transform="rotate(9.10319 214.017 0.572809)"
- stroke="#CCCCCC"
- />
- <defs>
- <filter
- id={ filterId0 }
- x="86"
- y="52.5"
- width="148"
- height="129"
- filterUnits="userSpaceOnUse"
- colorInterpolationFilters="sRGB"
- >
- <feFlood floodOpacity="0" result="BackgroundImageFix" />
- <feBlend
- mode="normal"
- in="SourceGraphic"
- in2="BackgroundImageFix"
- result="shape"
- />
- <feColorMatrix
- in="SourceAlpha"
- type="matrix"
- values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
- result="hardAlpha"
- />
- <feOffset dy="-16" />
- <feGaussianBlur stdDeviation="15" />
- <feComposite
- in2="hardAlpha"
- operator="arithmetic"
- k2="-1"
- k3="1"
- />
- <feColorMatrix
- type="matrix"
- values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
- />
- <feBlend
- mode="normal"
- in2="shape"
- result="effect1_innerShadow_853_49189"
- />
- </filter>
- <clipPath id={ clipPathId0 }>
- <rect
- y="34.9561"
- width="115.163"
- height="115.163"
- rx="8"
- transform="rotate(-9.4741 0 34.9561)"
- fill="white"
- />
- </clipPath>
- <clipPath id={ clipPathId1 }>
- <rect
- x="106"
- y="71"
- width="108"
- height="108"
- rx="8"
- fill="white"
- />
- </clipPath>
- <clipPath id={ clipPathId3 }>
- <rect
- width="148"
- height="113"
- fill="white"
- transform="translate(86 68.5)"
- />
- </clipPath>
- <clipPath id={ clipPathId2 }>
- <rect
- x="213.602"
- width="117.576"
- height="117.576"
- rx="8"
- transform="rotate(9.10319 213.602 0)"
- fill="white"
- />
- </clipPath>
- </defs>
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
deleted file mode 100644
index dbe529f76d9..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './place-holder';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
deleted file mode 100644
index 1e744ea3b98..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Products } from './imgs/products';
-import { Product } from './imgs/product';
-import { PlaceHolderProps } from './types';
-
-export function PlaceHolder( { multiple = true }: PlaceHolderProps ) {
- return (
- <div className="woocommerce-image-placeholder__wrapper">
- { multiple ? <Products /> : <Product /> }
- <p>
- { multiple
- ? __(
- 'For best results, offer a variety of product images, like close-up details, lifestyle scenes, and color variations.',
- 'woocommerce'
- )
- : __(
- 'Add an image which displays the unique characteristics of this variation.',
- 'woocommerce'
- ) }
- </p>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/style.scss b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/style.scss
deleted file mode 100644
index d0b004d1919..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.woocommerce-image-placeholder {
- &__wrapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: column;
- padding: $grid-unit-60;
- border-radius: 2px;
- border: 1px dashed $gray-400;
- gap: $grid-unit-30;
-
- p {
- margin: 0;
- text-align: center;
- color: $gray-700;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
deleted file mode 100644
index 8a0e7e9901c..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type PlaceHolderProps = {
- multiple?: boolean;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-email/block.json b/packages/js/product-editor/src/blocks/product-fields/inventory-email/block.json
deleted file mode 100644
index 3e775fe49f3..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-email/block.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-inventory-email-field",
- "title": "Stock level threshold",
- "category": "widgets",
- "description": "Stock management minimum quantity.",
- "keywords": [ "products", "inventory", "email", "minimum" ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-email/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/inventory-email/edit.tsx
deleted file mode 100644
index a2c04fd6c3a..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-email/edit.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Link } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import {
- createElement,
- Fragment,
- createInterpolateElement,
-} from '@wordpress/element';
-import { getSetting } from '@woocommerce/settings';
-import { useInstanceId } from '@wordpress/compose';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useValidation } from '../../../contexts/validation-context';
-import { InventoryEmailBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export function Edit( {
- attributes,
- clientId,
-}: ProductEditorBlockEditProps< InventoryEmailBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const notifyLowStockAmount = getSetting( 'notifyLowStockAmount', 2 );
-
- const [ lowStockAmount, setLowStockAmount ] = useEntityProp< number >(
- 'postType',
- 'product',
- 'low_stock_amount'
- );
-
- const id = useInstanceId( BaseControl, 'low_stock_amount' ) as string;
-
- const {
- ref: lowStockAmountRef,
- error: lowStockAmountValidationError,
- validate: validateLowStockAmount,
- } = useValidation< Product >(
- `low_stock_amount-${ clientId }`,
- async function stockQuantityValidator() {
- if ( lowStockAmount && lowStockAmount < 0 ) {
- return {
- message: __(
- 'This field must be a positive number.',
- 'woocommerce'
- ),
- };
- }
- },
- [ lowStockAmount ]
- );
-
- return (
- <>
- <div { ...blockProps }>
- <div className="wp-block-columns">
- <div className="wp-block-column">
- <BaseControl
- id={ id }
- label={ __(
- 'Email me when stock reaches',
- 'woocommerce'
- ) }
- help={
- lowStockAmountValidationError ||
- createInterpolateElement(
- __(
- 'Make sure to enable notifications in <link>store settings.</link>',
- 'woocommerce'
- ),
- {
- link: (
- <Link
- href={ `${ getSetting(
- 'adminUrl'
- ) }admin.php?page=wc-settings&tab=products§ion=inventory` }
- target="_blank"
- type="external"
- ></Link>
- ),
- }
- )
- }
- className={
- lowStockAmountValidationError && 'has-error'
- }
- >
- <InputControl
- id={ id }
- ref={ lowStockAmountRef }
- name={ 'low_stock_amount' }
- placeholder={ sprintf(
- // translators: Default quantity to notify merchants of low stock.
- __( '%d (store default)', 'woocommerce' ),
- notifyLowStockAmount
- ) }
- onChange={ ( nextValue ) => {
- setLowStockAmount(
- parseInt( nextValue ?? '', 10 )
- );
- } }
- onBlur={ async () =>
- await validateLowStockAmount()
- }
- value={ lowStockAmount?.toString() }
- type="number"
- min={ 0 }
- />
- </BaseControl>
- </div>
- <div className="wp-block-column"></div>
- </div>
- </div>
- </>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-email/index.ts b/packages/js/product-editor/src/blocks/product-fields/inventory-email/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-email/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-email/types.ts b/packages/js/product-editor/src/blocks/product-fields/inventory-email/types.ts
deleted file mode 100644
index a34d55343f5..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-email/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface InventoryEmailBlockAttributes extends BlockAttributes {
- name: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/block.json b/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/block.json
deleted file mode 100644
index 137e3ca58c7..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/block.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-inventory-quantity-field",
- "title": "Product inventory quantity available",
- "category": "woocommerce",
- "description": "The product available quantity.",
- "keywords": [
- "products",
- "quantity",
- "inventory"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/edit.tsx
deleted file mode 100644
index 4d97287aa5a..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/edit.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-import { useInstanceId } from '@wordpress/compose';
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { TrackInventoryBlockAttributes } from './types';
-import { useValidation } from '../../../contexts/validation-context';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export function Edit( {
- attributes,
- clientId,
- context,
-}: ProductEditorBlockEditProps< TrackInventoryBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const [ manageStock ] = useEntityProp< boolean >(
- 'postType',
- context.postType,
- 'manage_stock'
- );
-
- const [ stockQuantity, setStockQuantity ] = useEntityProp< number | null >(
- 'postType',
- context.postType,
- 'stock_quantity'
- );
-
- const stockQuantityId = useInstanceId(
- BaseControl,
- 'product_stock_quantity'
- ) as string;
-
- const {
- ref: stockQuantityRef,
- error: stockQuantityValidationError,
- validate: validateStockQuantity,
- } = useValidation< Product >(
- `stock_quantity-${ clientId }`,
- async function stockQuantityValidator() {
- if ( manageStock && stockQuantity && stockQuantity < 0 ) {
- return {
- message: __(
- 'Stock quantity must be a positive number.',
- 'woocommerce'
- ),
- };
- }
- },
- [ manageStock, stockQuantity ]
- );
-
- useEffect( () => {
- if ( manageStock && stockQuantity === null ) {
- setStockQuantity( 1 );
- }
- }, [ manageStock, stockQuantity ] );
-
- return (
- <div { ...blockProps }>
- <div className="wp-block-columns">
- <div className="wp-block-column">
- <BaseControl
- id={ stockQuantityId }
- className={
- stockQuantityValidationError && 'has-error'
- }
- help={ stockQuantityValidationError ?? '' }
- >
- <InputControl
- id={ stockQuantityId }
- name="stock_quantity"
- ref={
- stockQuantityRef as React.RefObject< HTMLInputElement >
- }
- label={ __( 'Available stock', 'woocommerce' ) }
- value={ stockQuantity?.toString() }
- onChange={ ( value ) => {
- setStockQuantity( parseInt( value ?? '', 10 ) );
- } }
- onBlur={ () => validateStockQuantity() }
- type="number"
- min={ 0 }
- />
- </BaseControl>
- </div>
-
- <div className="wp-block-column" />
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/index.ts b/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/types.ts b/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/types.ts
deleted file mode 100644
index 9e39fa898e3..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-quantity/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface TrackInventoryBlockAttributes extends BlockAttributes {
- name: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json
deleted file mode 100644
index 72aeb0a5f10..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/block.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-sku-field",
- "title": "Product text control",
- "category": "woocommerce",
- "description": "The product sku.",
- "keywords": [
- "products",
- "sku"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx
deleted file mode 100644
index 0689e2d26d0..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/edit.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { BlockAttributes } from '@wordpress/blocks';
-import { useInstanceId } from '@wordpress/compose';
-import { createElement, createInterpolateElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorBlockEditProps } from '../../../types';
-import { useValidation } from '../../../contexts/validation-context';
-
-/**
- * Internal dependencies
- */
-
-export function Edit( {
- attributes,
- context,
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const [ sku, setSku ] = useEntityProp< string >(
- 'postType',
- context.postType,
- 'sku'
- );
-
- const { ref: skuRef } = useValidation< Product >(
- 'sku',
- async function skuValidator() {
- return undefined;
- },
- [ sku ]
- );
-
- const inputControlId = useInstanceId(
- BaseControl,
- 'product_sku'
- ) as string;
-
- return (
- <div { ...blockProps }>
- <BaseControl
- id={ inputControlId }
- className="woocommerce-product-form_inventory-sku"
- label={ createInterpolateElement(
- __( 'Sku <description />', 'woocommerce' ),
- {
- description: (
- <span className="woocommerce-product-form__optional-input">
- { __( '(STOCK KEEPING UNIT)', 'woocommerce' ) }
- </span>
- ),
- }
- ) }
- >
- <InputControl
- ref={ skuRef }
- id={ inputControlId }
- name={ 'woocommerce-product-sku' }
- onChange={ ( nextValue ) => {
- setSku( nextValue ?? '' );
- } }
- value={ sku || '' }
- disabled={ attributes.disabled }
- />
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/editor.scss b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/editor.scss
deleted file mode 100644
index 32372ce5b82..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/editor.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-.woocommerce-product-form_inventory-sku {
- .components-base-control__label {
- display: flex;
- align-items: center;
- }
- .woocommerce-product-form__optional-input {
- margin-left: $gap-smallest;
- }
- .woocommerce-tooltip__button {
- padding: 0 0 0 $gap-smallest;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/index.ts b/packages/js/product-editor/src/blocks/product-fields/inventory-sku/index.ts
deleted file mode 100644
index f13707204e3..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/inventory-sku/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/product-fields/name/block.json b/packages/js/product-editor/src/blocks/product-fields/name/block.json
deleted file mode 100644
index e7edebedf2d..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/name/block.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-name-field",
- "title": "Product name",
- "category": "widgets",
- "description": "The product name.",
- "keywords": [
- "products",
- "name",
- "title"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- },
- "autoFocus": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx
deleted file mode 100644
index 032cbb08ba6..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/name/edit.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-/**
- * External dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
- createElement,
- Fragment,
- useEffect,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { starEmpty, starFilled } from '@wordpress/icons';
-import { cleanForSlug } from '@wordpress/url';
-import { Product } from '@woocommerce/data';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import clsx from 'clsx';
-import {
- Button,
- BaseControl,
- Tooltip,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-import {
- useEntityProp,
- useEntityId,
- store as coreStore,
-} from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { EditProductLinkModal } from '../../../components/edit-product-link-modal';
-import { Label } from '../../../components/label/label';
-import { useValidation } from '../../../contexts/validation-context';
-import { useProductEdits } from '../../../hooks/use-product-edits';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { AUTO_DRAFT_NAME, getPermalinkParts } from '../../../utils';
-import { NameBlockAttributes } from './types';
-
-export function NameBlockEdit( {
- attributes,
- clientId,
-}: ProductEditorBlockEditProps< NameBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const { editEntityRecord, saveEntityRecord } = useDispatch( 'core' );
-
- const { hasEdit } = useProductEdits();
-
- const [ showProductLinkEditModal, setShowProductLinkEditModal ] =
- useState( false );
-
- const productId = useEntityId( 'postType', 'product' );
- // @ts-expect-error getEditedEntityRecord's curried form strips its generic, returning a wide entity union; Product is the correct narrow type.
- const product: Product = useSelect(
- ( select ) =>
- select( coreStore ).getEditedEntityRecord(
- 'postType',
- 'product',
- productId
- ),
- [ productId ]
- );
-
- const [ sku, setSku ] = useEntityProp( 'postType', 'product', 'sku' );
- const [ name, setName ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'name'
- );
-
- const { prefix: permalinkPrefix, suffix: permalinkSuffix } =
- getPermalinkParts( product );
-
- const {
- ref: nameRef,
- error: nameValidationError,
- validate: validateName,
- } = useValidation< Product >(
- 'name',
- async function nameValidator() {
- if ( ! name || name === AUTO_DRAFT_NAME ) {
- return {
- message: __( 'Product name is required.', 'woocommerce' ),
- };
- }
-
- if ( name.length > 120 ) {
- return {
- message: __(
- 'Please enter a product name shorter than 120 characters.',
- 'woocommerce'
- ),
- };
- }
- },
- [ name ]
- );
-
- const setSkuIfEmpty = () => {
- if ( sku || nameValidationError ) {
- return;
- }
- setSku( cleanForSlug( name ) );
- };
-
- const help =
- nameValidationError ??
- ( productId &&
- [ 'publish', 'draft' ].includes( product.status ) &&
- permalinkPrefix && (
- <span className="woocommerce-product-form__secondary-text product-details-section__product-link">
- { __( 'Product link', 'woocommerce' ) }
- :
- <a
- href={ product.permalink }
- target="_blank"
- rel="noreferrer"
- >
- { permalinkPrefix }
- { product.slug || cleanForSlug( name ) }
- { permalinkSuffix }
- </a>
- <Button
- variant="link"
- onClick={ () => setShowProductLinkEditModal( true ) }
- >
- { __( 'Edit', 'woocommerce' ) }
- </Button>
- </span>
- ) );
-
- const nameControlId = useInstanceId(
- BaseControl,
- 'product_name'
- ) as string;
-
- // Select the block initially if it is set to autofocus.
- // (this does not get done automatically by focusing the input)
- const { selectBlock } = useDispatch( 'core/block-editor' );
- useEffect( () => {
- if ( attributes.autoFocus ) {
- selectBlock( clientId );
- }
- }, [] );
-
- const [ featured, setFeatured ] =
- useProductEntityProp< boolean >( 'featured' );
-
- function handleSuffixClick() {
- setFeatured( ! featured );
- }
-
- function renderFeaturedSuffix() {
- const markedText = __( 'Mark as featured', 'woocommerce' );
- const unmarkedText = __( 'Unmark as featured', 'woocommerce' );
- const tooltipText = featured ? unmarkedText : markedText;
-
- return (
- <Tooltip text={ tooltipText } placement="top">
- { featured ? (
- <Button
- icon={ starFilled }
- aria-label={ unmarkedText }
- onClick={ handleSuffixClick }
- />
- ) : (
- <Button
- icon={ starEmpty }
- aria-label={ markedText }
- onClick={ handleSuffixClick }
- />
- ) }
- </Tooltip>
- );
- }
-
- return (
- <>
- <div { ...blockProps }>
- <BaseControl
- id={ nameControlId }
- label={
- <Label label={ __( 'Name', 'woocommerce' ) } required />
- }
- className={ clsx( {
- 'has-error': nameValidationError,
- } ) }
- help={ help }
- >
- <InputControl
- id={ nameControlId }
- ref={ nameRef }
- name="name"
- // eslint-disable-next-line jsx-a11y/no-autofocus
- autoFocus={ attributes.autoFocus }
- placeholder={ __(
- 'e.g. 12 oz Coffee Mug',
- 'woocommerce'
- ) }
- onChange={ ( nextValue ) => {
- setName( nextValue ?? '' );
- } }
- value={ name && name !== AUTO_DRAFT_NAME ? name : '' }
- autoComplete="off"
- data-1p-ignore
- onBlur={ () => {
- if ( hasEdit( 'name' ) ) {
- setSkuIfEmpty();
- validateName();
- }
- } }
- suffix={ renderFeaturedSuffix() }
- />
- </BaseControl>
-
- { showProductLinkEditModal && (
- <EditProductLinkModal
- permalinkPrefix={ permalinkPrefix || '' }
- permalinkSuffix={ permalinkSuffix || '' }
- product={ product }
- onCancel={ () => setShowProductLinkEditModal( false ) }
- onSaved={ () => setShowProductLinkEditModal( false ) }
- saveHandler={ async ( updatedSlug ) => {
- const { slug, permalink }: Product =
- await saveEntityRecord( 'postType', 'product', {
- id: product.id,
- slug: updatedSlug,
- } );
-
- if ( slug && permalink ) {
- editEntityRecord(
- 'postType',
- 'product',
- product.id,
- {
- slug,
- permalink,
- }
- );
-
- return {
- slug,
- permalink,
- };
- }
- } }
- />
- ) }
- </div>
- </>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/name/editor.scss b/packages/js/product-editor/src/blocks/product-fields/name/editor.scss
deleted file mode 100644
index 83e9088e365..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/name/editor.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.product-details-section {
- &__product-link {
- color: #757575;
- font-size: 12px;
- display: block;
- margin-top: $gap-smaller;
-
- > a {
- color: inherit;
- text-decoration: none;
- font-weight: 600;
- }
-
- .components-button.is-link {
- font-size: 12px;
- text-decoration: none;
- margin-left: $gap-smaller;
- }
- }
-}
-
-.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;
- }
- }
-
- .components-base-control .components-input-control__container {
- .components-input-control {
- &__input {
- font-size: $grid-unit-20;
- min-height: $grid-unit-60;
- }
- &__suffix {
- margin-right: 0;
- }
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/name/index.ts b/packages/js/product-editor/src/blocks/product-fields/name/index.ts
deleted file mode 100644
index f1a7de646a0..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/name/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { NameBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: NameBlockEdit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/product-fields/name/types.ts b/packages/js/product-editor/src/blocks/product-fields/name/types.ts
deleted file mode 100644
index 534124d89b4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/name/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface NameBlockAttributes extends BlockAttributes {
- autoFocus: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/block.json b/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/block.json
deleted file mode 100644
index 1704cb9762b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/block.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-single-variation-notice",
- "title": "Notice",
- "category": "woocommerce",
- "description": "Notice description",
- "keywords": [
- "products",
- "notice"
- ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string"
- },
- "content": {
- "type": "string"
- },
- "isDismissible": {
- "type": "boolean"
- },
- "type": {
- "type": "string"
- }
- },
- "supports": {
- "align": false,
- "html": true,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/edit.tsx
deleted file mode 100644
index 24deb5d2c48..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/edit.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, createInterpolateElement } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { Product } from '@woocommerce/data';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { recordEvent } from '@woocommerce/tracks';
-import { Link } from '@woocommerce/components';
-import { getNewPath } from '@woocommerce/navigation';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { Notice } from '../../../components/notice';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { NoticeBlockAttributes } from './types';
-import { useNotice } from '../../../hooks/use-notice';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< NoticeBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { content, isDismissible, title, type = 'info' } = attributes;
- const [ parentId ] = useEntityProp< number >(
- 'postType',
- 'product_variation',
- 'parent_id'
- );
- const { dismissedNotices, dismissNotice, isResolving } = useNotice();
- const {
- parentName,
- isParentResolving,
- }: { parentName: string; isParentResolving: boolean } = useSelect(
- ( select ) => {
- const { getEditedEntityRecord, hasFinishedResolution } =
- select( coreStore );
-
- // @ts-expect-error getEditedEntityRecord's curried form strips its generic, returning a wide entity union; Product is the correct narrow type.
- const { name }: Product = getEditedEntityRecord(
- 'postType',
- 'product',
- parentId
- );
- const isResolutionFinished = ! hasFinishedResolution(
- 'getEditedEntityRecord',
- [ 'postType', 'product', parentId ]
- );
-
- return {
- parentName: name || '',
- isParentResolving: isResolutionFinished,
- };
- },
- [ parentId ]
- );
-
- if (
- dismissedNotices.includes( parentId ) ||
- isResolving ||
- isParentResolving ||
- parentName === ''
- ) {
- return null;
- }
-
- return (
- <div { ...blockProps }>
- <Notice
- title={ title }
- type={ type }
- isDismissible={ isDismissible }
- handleDismiss={ () => {
- recordEvent( 'product_single_variation_notice_dismissed' );
- dismissNotice( parentId );
- } }
- >
- { createInterpolateElement( content, {
- strong: <strong />,
- noticeLink: (
- <Link
- href={ getNewPath(
- { tab: 'variations' },
- `/product/${ parentId }`
- ) }
- onClick={ () => {
- recordEvent(
- 'product_single_variation_notice_click'
- );
- } }
- />
- ),
- parentProductName: <span>{ parentName }</span>,
- } ) }
- </Notice>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/editor.scss b/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/editor.scss
deleted file mode 100644
index 63cc877065d..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/editor.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.woocommerce-product-notice {
- margin-top: $gap + $gap-large * 2;
- a {
- pointer-events: all;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/index.ts b/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/index.ts
deleted file mode 100644
index d1112229a3b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = { example: {}, edit: Edit };
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/types.ts b/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/types.ts
deleted file mode 100644
index cfc280a0d00..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-edit-single-variation/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface NoticeBlockAttributes extends BlockAttributes {
- id: string;
- content: string;
- title: string;
- type: 'error-type' | 'success' | 'warning' | 'info';
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/block.json b/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/block.json
deleted file mode 100644
index 655557e52ed..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/block.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-has-variations-notice",
- "title": "Notice",
- "category": "woocommerce",
- "description": "Notice description",
- "keywords": [
- "products",
- "notice"
- ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string"
- },
- "content": {
- "type": "string"
- },
- "buttonText": {
- "type": "string"
- },
- "type": {
- "type": "string"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/edit.tsx
deleted file mode 100644
index b9cca64f679..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/edit.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import type { BlockAttributes } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { Product } from '@woocommerce/data';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { Notice } from '../../../components/notice';
-import { hasAttributesUsedForVariations } from '../../../utils';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export interface NoticeBlockAttributes extends BlockAttributes {
- buttonText: string;
- content: string;
- title: string;
- type: 'error-type' | 'success' | 'warning' | 'info';
-}
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< NoticeBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { buttonText, content, title, type = 'info' } = attributes;
-
- const [ productAttributes ] = useEntityProp< Product[ 'attributes' ] >(
- 'postType',
- 'product',
- 'attributes'
- );
-
- const [ productType ] = useEntityProp( 'postType', 'product', 'type' );
-
- const isOptionsNoticeVisible =
- hasAttributesUsedForVariations( productAttributes ) &&
- productType === 'variable';
-
- return (
- <div { ...blockProps }>
- { isOptionsNoticeVisible && (
- <Notice content={ content } title={ title } type={ type }>
- <Button
- isSecondary={ true }
- onClick={ () =>
- navigateTo( {
- url: getNewPath( { tab: 'variations' } ),
- } )
- }
- >
- { buttonText }
- </Button>
- </Notice>
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/editor.scss b/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/editor.scss
deleted file mode 100644
index c1a7b474759..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/editor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.woocommerce-product-notice {
- margin-top: $gap + $gap-large * 2;
- button {
- pointer-events: all;
- cursor: pointer;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/index.ts b/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/index.ts
deleted file mode 100644
index d1112229a3b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/notice-has-variations/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = { example: {}, edit: Edit };
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/password/block.json b/packages/js/product-editor/src/blocks/product-fields/password/block.json
deleted file mode 100644
index 19b009e21fc..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/password/block.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-password-field",
- "description": "A checkbox and an input to type a password to view a product.",
- "title": "Product password",
- "category": "widgets",
- "keywords": [ "products", "password" ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/password/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/password/edit.tsx
deleted file mode 100644
index 865ec9578a9..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/password/edit.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement } from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-
-/**
- * Internal dependencies
- */
-
-import { RequirePasswordBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { RequirePassword } from '../../../components/require-password';
-
-export function Edit( {
- attributes,
-}: ProductEditorBlockEditProps< RequirePasswordBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { label } = attributes;
-
- const [ postPassword, setPostPassword ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'post_password'
- );
-
- return (
- <div { ...blockProps }>
- <RequirePassword
- label={ label }
- postPassword={ postPassword }
- onInputChange={ setPostPassword }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/password/index.ts b/packages/js/product-editor/src/blocks/product-fields/password/index.ts
deleted file mode 100644
index de7b9c48944..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/password/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/password/types.ts b/packages/js/product-editor/src/blocks/product-fields/password/types.ts
deleted file mode 100644
index bf9294b120b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/password/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface RequirePasswordBlockAttributes extends BlockAttributes {
- label: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/block.json b/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/block.json
deleted file mode 100644
index 3c8db709f90..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/block.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-details-section-description",
- "title": "Product details section description",
- "category": "woocommerce",
- "description": "The product details section description.",
- "keywords": [
- "products",
- "section",
- "description"
- ],
- "textdomain": "default",
- "attributes": {
- "content": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [ "selectedTab" ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/edit.tsx
deleted file mode 100644
index b48643482df..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/edit.tsx
+++ /dev/null
@@ -1,461 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import {
- Button,
- Dropdown,
- MenuGroup,
- MenuItem,
- Modal,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
- createElement,
- createInterpolateElement,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import * as icons from '@wordpress/icons';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import type { ProductStatus, Product } from '@woocommerce/data';
-import { getNewPath } from '@woocommerce/navigation';
-import { recordEvent } from '@woocommerce/tracks';
-import { useEntityId, useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { BlockFill } from '../../../components/block-slot-fill';
-import { useValidations } from '../../../contexts/validation-context';
-import { TRACKS_SOURCE } from '../../../constants';
-import { WPError, useErrorHandler } from '../../../hooks/use-error-handler';
-import type {
- ProductEditorBlockEditProps,
- ProductTemplate,
-} from '../../../types';
-import { ProductDetailsSectionDescriptionBlockAttributes } from './types';
-import * as wooIcons from '../../../icons';
-import { formatProductError } from '../../../utils/format-product-error';
-
-export function ProductDetailsSectionDescriptionBlockEdit( {
- attributes,
- clientId,
- context: { selectedTab },
-}: ProductEditorBlockEditProps< ProductDetailsSectionDescriptionBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const { getProductErrorMessageAndProps } = useErrorHandler();
-
- // @ts-expect-error getEditorSettings's return type is the generic Object; productTemplates/productTemplate are WooCommerce additions injected at runtime.
- const { productTemplates, productTemplate: selectedProductTemplate } =
- useSelect( ( select ) => {
- const { getEditorSettings } = select( 'core/editor' );
- return getEditorSettings();
- }, [] );
-
- // eslint-disable-next-line @wordpress/no-unused-vars-before-return
- const [ supportedProductTemplates, unsupportedProductTemplates ] =
- productTemplates.reduce(
- (
- [ supported, unsupported ]: ProductTemplate[][],
- productTemplate: ProductTemplate
- ) => {
- if ( productTemplate.isSelectableByUser ) {
- if ( productTemplate.layoutTemplateId ) {
- supported.push( productTemplate );
- } else {
- unsupported.push( productTemplate );
- }
- }
- return [ supported, unsupported ];
- },
- [ [], [] ]
- );
-
- const productId = useEntityId( 'postType', 'product' );
-
- const [ productStatus ] = useEntityProp< ProductStatus >(
- 'postType',
- 'product',
- 'status'
- );
-
- const { validate } = useValidations< Product >();
- const { editEntityRecord, saveEditedEntityRecord, saveEntityRecord } =
- useDispatch( 'core' );
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( 'core/notices' );
-
- const rootClientId = useSelect(
- ( select ) => {
- const { getBlockRootClientId } = select( 'core/block-editor' );
- return getBlockRootClientId( clientId );
- },
- [ clientId ]
- );
-
- const [ unsupportedProductTemplate, setUnsupportedProductTemplate ] =
- useState< ProductTemplate >();
-
- const { isSaving } = useSelect(
- ( select ) => {
- const { isSavingEntityRecord } = select( 'core' );
-
- return {
- isSaving: isSavingEntityRecord(
- 'postType',
- 'product',
- productId
- ),
- };
- },
- [ productId ]
- );
-
- if ( ! rootClientId ) return;
-
- function menuItemClickHandler(
- productTemplate: ProductTemplate,
- onClose: () => void
- ) {
- return async function handleMenuItemClick() {
- try {
- recordEvent( 'product_template_selector_selected', {
- source: TRACKS_SOURCE,
- selected_template: productTemplate.id,
- unsupported_template: ! productTemplate.layoutTemplateId,
- } );
-
- if ( ! productTemplate.layoutTemplateId ) {
- setUnsupportedProductTemplate( productTemplate );
- onClose();
- return;
- }
-
- await validate( productTemplate.productData );
-
- const productMetaData =
- productTemplate.productData.meta_data ?? [];
-
- await editEntityRecord( 'postType', 'product', productId, {
- ...productTemplate.productData,
- meta_data: [
- ...productMetaData,
- {
- key: '_product_template_id',
- value: productTemplate.id,
- },
- ],
- } );
-
- await saveEditedEntityRecord(
- 'postType',
- 'product',
- productId,
- {
- throwOnError: true,
- }
- );
-
- createSuccessNotice(
- __( 'Product type changed.', 'woocommerce' )
- );
-
- recordEvent( 'product_template_changed', {
- source: TRACKS_SOURCE,
- template: productTemplate.id,
- } );
- } catch ( error ) {
- const { message, errorProps } =
- await getProductErrorMessageAndProps(
- formatProductError(
- error as WPError,
- productStatus
- ) as WPError,
- selectedTab
- );
- createErrorNotice( message, errorProps );
- }
-
- onClose();
- };
- }
-
- function resolveIcon( iconId?: string | null, alt?: string ) {
- if ( ! iconId ) return undefined;
-
- const { Icon } = icons;
- let icon: JSX.Element;
-
- if ( /^https?:\/\//.test( iconId ) ) {
- icon = <img src={ iconId } alt={ alt } />;
- } else {
- if ( ! ( iconId in icons || iconId in wooIcons ) ) return undefined;
-
- icon = icons[ iconId as never ] || wooIcons[ iconId as never ];
- }
-
- return <Icon icon={ icon } size={ 24 } />;
- }
-
- /**
- * Returns a function that renders a MenuItem component.
- *
- * @param {Function} onClose - Function to close the dropdown.
- * @return {Function} Function that renders a MenuItem component.
- */
- function getMenuItem( onClose: () => void ) {
- return function renderMenuItem( productTemplate: ProductTemplate ) {
- const isSelected =
- selectedProductTemplate?.id === productTemplate.id;
- return (
- <MenuItem
- key={ productTemplate.id }
- info={ productTemplate.description ?? undefined }
- isSelected={ isSelected }
- icon={
- isSelected
- ? resolveIcon( 'check' )
- : resolveIcon(
- productTemplate.icon,
- productTemplate.title
- )
- }
- iconPosition="left"
- role="menuitemradio"
- onClick={ menuItemClickHandler( productTemplate, onClose ) }
- className={ clsx( {
- 'components-menu-item__button--selected': isSelected,
- } ) }
- >
- { productTemplate.title }
- </MenuItem>
- );
- };
- }
-
- async function handleModalChangeClick() {
- try {
- if ( isSaving ) return;
-
- const { id: productTemplateId, productData } =
- unsupportedProductTemplate as ProductTemplate;
-
- await validate( productData );
-
- const product = ( await saveEditedEntityRecord(
- 'postType',
- 'product',
- productId,
- {
- throwOnError: true,
- }
- ) ) ?? { id: productId };
-
- const productMetaData = productData?.meta_data ?? [];
-
- // Avoiding to save some changes that are not supported by the current product template.
- // So in this case those changes are saved directly to the server.
- await saveEntityRecord(
- 'postType',
- 'product',
- {
- ...product,
- ...productData,
- meta_data: [
- ...productMetaData,
- {
- key: '_product_template_id',
- value: productTemplateId,
- },
- ],
- },
- {
- throwOnError: true,
- }
- );
-
- createSuccessNotice( __( 'Product type changed.', 'woocommerce' ) );
-
- recordEvent( 'product_template_changed', {
- source: TRACKS_SOURCE,
- template: productTemplateId,
- } );
-
- // Let the server manage the redirection when the product is not supported
- // by the product editor.
- window.location.href = getNewPath( {}, `/product/${ productId }` );
- } catch ( error ) {
- const { message, errorProps } =
- await getProductErrorMessageAndProps(
- formatProductError(
- error as WPError,
- productStatus
- ) as WPError,
- selectedTab
- );
- createErrorNotice( message, errorProps );
- }
- }
-
- function toggleButtonClickHandler( isOpen: boolean, onToggle: () => void ) {
- return function onClick() {
- onToggle();
-
- if ( ! isOpen ) {
- recordEvent( 'product_template_selector_open', {
- source: TRACKS_SOURCE,
- supported_templates: supportedProductTemplates.map(
- ( productTemplate: ProductTemplate ) =>
- productTemplate.id
- ),
- unsupported_template: unsupportedProductTemplates.map(
- ( productTemplate: ProductTemplate ) =>
- productTemplate.id
- ),
- } );
- }
- };
- }
-
- return (
- <BlockFill
- name="section-description"
- slotContainerBlockName="woocommerce/product-section"
- >
- <div { ...blockProps }>
- <p>
- { createInterpolateElement(
- /* translators: <ProductTemplate />: the product template. */
- __( 'This is a <ProductTemplate />.', 'woocommerce' ),
- {
- ProductTemplate: (
- <span>
- { selectedProductTemplate?.title?.toLowerCase() }
- </span>
- ),
- }
- ) }
- </p>
-
- <Dropdown
- focusOnMount={ true }
- popoverProps={ {
- placement: 'bottom-start',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- aria-expanded={ isOpen }
- variant="link"
- onClick={ toggleButtonClickHandler(
- isOpen,
- onToggle
- ) }
- >
- <span>
- { __( 'Change product type', 'woocommerce' ) }
- </span>
- </Button>
- ) }
- renderContent={ ( { onClose } ) => (
- <div className="wp-block-woocommerce-product-details-section-description__dropdown components-dropdown-menu__menu">
- <MenuGroup>
- { supportedProductTemplates.map(
- getMenuItem( onClose )
- ) }
- </MenuGroup>
-
- { unsupportedProductTemplates.length > 0 && (
- <MenuGroup>
- <Dropdown
- popoverProps={ {
- placement: 'right-start',
- } }
- renderToggle={ ( {
- isOpen,
- onToggle,
- } ) => (
- <MenuItem
- aria-expanded={ isOpen }
- icon={ resolveIcon(
- 'chevronRight'
- ) }
- iconPosition="right"
- onClick={ onToggle }
- >
- <span>
- { __(
- 'More',
- 'woocommerce'
- ) }
- </span>
- </MenuItem>
- ) }
- renderContent={ () => (
- <div className="wp-block-woocommerce-product-details-section-description__dropdown components-dropdown-menu__menu">
- <MenuGroup>
- { unsupportedProductTemplates.map(
- getMenuItem( onClose )
- ) }
- </MenuGroup>
- </div>
- ) }
- />
- </MenuGroup>
- ) }
- </div>
- ) }
- />
-
- { Boolean( unsupportedProductTemplate ) && (
- <Modal
- title={ __( 'Change product type?', 'woocommerce' ) }
- className="wp-block-woocommerce-product-details-section-description__modal"
- onRequestClose={ () => {
- setUnsupportedProductTemplate( undefined );
- } }
- >
- <p>
- <b>
- { __(
- 'This product type isn’t supported by the updated product editing experience yet.',
- 'woocommerce'
- ) }
- </b>
- </p>
-
- <p>
- { __(
- 'You’ll be taken to the classic editing screen that isn’t optimized for commerce but offers advanced functionality and supports all extensions.',
- 'woocommerce'
- ) }
- </p>
-
- <div className="wp-block-woocommerce-product-details-section-description__modal-actions">
- <Button
- variant="secondary"
- aria-disabled={ isSaving }
- onClick={ () => {
- if ( isSaving ) return;
- setUnsupportedProductTemplate( undefined );
- } }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
-
- <Button
- variant="primary"
- isBusy={ isSaving }
- aria-disabled={ isSaving }
- onClick={ handleModalChangeClick }
- >
- { __( 'Change', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- ) }
- </div>
- </BlockFill>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/editor.scss b/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/editor.scss
deleted file mode 100644
index 7d7b8eec33f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/editor.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.wp-block-woocommerce-product-details-section-description {
- margin-top: $grid-unit;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: wrap;
- gap: $grid-unit-05;
-
- p {
- margin: 0;
- }
-
- &__dropdown .components-button.components-menu-item__button {
- border-radius: 2px;
- padding: $grid-unit $grid-unit + 2;
- padding-inline-start: $grid-unit-30 + $grid-unit-05;
-
- &:hover {
- background-color: $gray-100;
- color: inherit;
- }
-
- &.has-icon {
- gap: $grid-unit-05;
- padding-inline-start: 0;
-
- svg {
- flex-shrink: 0;
- align-self: flex-start;
- }
- }
-
- &--selected {
- svg,
- .components-menu-item__item {
- color: var(--wp-admin-theme-color);
- }
- }
- }
-
- &__modal {
- max-width: 650px;
-
- &-actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: $grid-unit;
- padding-top: $grid-unit-40;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/index.ts b/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/index.ts
deleted file mode 100644
index 3c398ab9080..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from '../../../utils';
-
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { ProductDetailsSectionDescriptionBlockEdit } from './edit';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: ProductDetailsSectionDescriptionBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/types.ts b/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/types.ts
deleted file mode 100644
index 4a8bc39680d..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-details-section-description/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface ProductDetailsSectionDescriptionBlockAttributes
- extends BlockAttributes {
- content: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/block.json b/packages/js/product-editor/src/blocks/product-fields/product-list/block.json
deleted file mode 100644
index f714b4822e5..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/block.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-list-field",
- "title": "Product list",
- "category": "widgets",
- "description": "The product list.",
- "keywords": [
- "products"
- ],
- "textdomain": "default",
- "attributes": {
- "property": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
deleted file mode 100644
index b64c10fc5a4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/edit.tsx
+++ /dev/null
@@ -1,330 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { resolveSelect } from '@wordpress/data';
-import {
- createElement,
- useContext,
- useEffect,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { external, closeSmall } from '@wordpress/icons';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { CurrencyContext } from '@woocommerce/currency';
-import { productsStore, Product } from '@woocommerce/data';
-import { getNewPath } from '@woocommerce/navigation';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import {
- AddProductsModal,
- getProductImageStyle,
- ReorderProductsModal,
-} from '../../../components/add-products-modal';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { UploadsBlockAttributes } from './types';
-import {
- getProductStockStatus,
- getProductStockStatusClass,
-} from '../../../utils';
-import { Shirt } from '../../../images/shirt';
-import { Pants } from '../../../images/pants';
-import { Glasses } from '../../../images/glasses';
-import { AdviceCard } from '../../../components/advice-card';
-import { SectionActions } from '../../../components/block-slot-fill';
-
-export function ProductListBlockEdit( {
- attributes,
- context: { postType },
-}: ProductEditorBlockEditProps< UploadsBlockAttributes > ) {
- const { property } = attributes;
- const blockProps = useWooBlockProps( attributes );
- const [ openAddProductsModal, setOpenAddProductsModal ] = useState( false );
- const [ openReorderProductsModal, setOpenReorderProductsModal ] =
- useState( false );
- const [ isLoading, setIsLoading ] = useState( false );
- const [ preventFetch, setPreventFetch ] = useState( false );
- const [ groupedProductIds, setGroupedProductIds ] = useEntityProp<
- number[]
- >( 'postType', postType, property );
- const [ groupedProducts, setGroupedProducts ] = useState< Product[] >( [] );
- const { formatAmount } = useContext( CurrencyContext );
-
- useEffect(
- function loadGroupedProducts() {
- if ( preventFetch ) return;
-
- if ( groupedProductIds.length ) {
- setIsLoading( false );
- resolveSelect( productsStore )
- .getProducts( {
- include: groupedProductIds,
- orderby: 'include',
- } )
- .then( setGroupedProducts )
- .finally( () => setIsLoading( false ) );
- } else {
- setGroupedProducts( [] );
- }
- },
- [ groupedProductIds, preventFetch ]
- );
-
- function handleAddProductsButtonClick() {
- setOpenAddProductsModal( true );
- }
-
- function handleReorderProductsButtonClick() {
- setOpenReorderProductsModal( true );
- }
-
- function handleAddProductsModalSubmit( value: Product[] ) {
- const newGroupedProducts = [ ...groupedProducts, ...value ];
- setPreventFetch( true );
- setGroupedProducts( newGroupedProducts );
- setGroupedProductIds(
- newGroupedProducts.map( ( product ) => product.id )
- );
- setOpenAddProductsModal( false );
- }
-
- function handleReorderProductsModalSubmit( value: Product[] ) {
- setGroupedProducts( value );
- setGroupedProductIds( value.map( ( product ) => product.id ) );
- setOpenReorderProductsModal( false );
- }
-
- function handleAddProductsModalClose() {
- setOpenAddProductsModal( false );
- }
-
- function handleReorderProductsModalClose() {
- setOpenReorderProductsModal( false );
- }
-
- function removeProductHandler( product: Product ) {
- return function handleRemoveClick() {
- const newGroupedProducts = groupedProducts.filter(
- ( groupedProduct ) => groupedProduct.id !== product.id
- );
- setPreventFetch( true );
- setGroupedProducts( newGroupedProducts );
- setGroupedProductIds(
- newGroupedProducts.map(
- ( groupedProduct ) => groupedProduct.id
- )
- );
- };
- }
-
- return (
- <div { ...blockProps }>
- <SectionActions>
- { ! isLoading && groupedProducts.length > 0 && (
- <Button
- onClick={ handleReorderProductsButtonClick }
- variant="tertiary"
- >
- { __( 'Reorder', 'woocommerce' ) }
- </Button>
- ) }
- <Button
- onClick={ handleAddProductsButtonClick }
- variant="secondary"
- >
- { __( 'Add products', 'woocommerce' ) }
- </Button>
- </SectionActions>
-
- <div className="wp-block-woocommerce-product-list-field__body">
- { ! isLoading && groupedProducts.length === 0 && (
- <AdviceCard
- tip={ __(
- 'Tip: Group together items that have a clear relationship or compliment each other well, e.g., garment bundles, camera kits, or skincare product sets.',
- 'woocommerce'
- ) }
- isDismissible={ false }
- >
- <Shirt />
- <Pants />
- <Glasses />
- </AdviceCard>
- ) }
-
- { ! isLoading && groupedProducts.length > 0 && (
- <div
- className="wp-block-woocommerce-product-list-field__table"
- role="table"
- >
- <div className="wp-block-woocommerce-product-list-field__table-header">
- <div
- className="wp-block-woocommerce-product-list-field__table-row"
- role="rowheader"
- >
- <div
- className="wp-block-woocommerce-product-list-field__table-header-column"
- role="columnheader"
- >
- { __( 'Product', 'woocommerce' ) }
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-header-column"
- role="columnheader"
- >
- { __( 'Price', 'woocommerce' ) }
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-header-column"
- role="columnheader"
- >
- { __( 'Stock', 'woocommerce' ) }
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-header-column"
- role="columnheader"
- />
- </div>
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-body"
- role="rowgroup"
- >
- { groupedProducts.map( ( product ) => (
- <div
- key={ product.id }
- className="wp-block-woocommerce-product-list-field__table-row"
- role="row"
- >
- <div
- className="wp-block-woocommerce-product-list-field__table-cell"
- role="cell"
- >
- <div
- className="wp-block-woocommerce-product-list-field__product-image"
- style={ getProductImageStyle(
- product
- ) }
- />
-
- <div className="wp-block-woocommerce-product-list-field__product-info">
- <div className="wp-block-woocommerce-product-list-field__product-name">
- <Button
- variant="link"
- href={ getNewPath(
- {},
- `/product/${ product.id }`
- ) }
- target="_blank"
- >
- { product.name }
- </Button>
- </div>
-
- <div className="wp-block-woocommerce-product-list-field__product-sku">
- { product.sku }
- </div>
- </div>
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-cell"
- role="cell"
- >
- { product.on_sale && (
- <span>
- { product.sale_price
- ? formatAmount(
- product.sale_price
- )
- : formatAmount(
- product.price
- ) }
- </span>
- ) }
-
- { product.regular_price && (
- <span
- className={ clsx( {
- 'wp-block-woocommerce-product-list-field__price--on-sale':
- product.on_sale,
- } ) }
- >
- { formatAmount(
- product.regular_price
- ) }
- </span>
- ) }
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-cell"
- role="cell"
- >
- <span
- className={ clsx(
- 'woocommerce-product-variations__status-dot',
- getProductStockStatusClass(
- product
- )
- ) }
- >
- ●
- </span>
- <span>
- { getProductStockStatus( product ) }
- </span>
- </div>
- <div
- className="wp-block-woocommerce-product-list-field__table-cell"
- role="cell"
- >
- <Button
- variant="tertiary"
- icon={ external }
- aria-label={ __(
- 'Preview the product',
- 'woocommerce'
- ) }
- href={ product.permalink }
- target="_blank"
- />
-
- <Button
- type="button"
- variant="tertiary"
- icon={ closeSmall }
- aria-label={ __(
- 'Remove product',
- 'woocommerce'
- ) }
- onClick={ removeProductHandler(
- product
- ) }
- />
- </div>
- </div>
- ) ) }
- </div>
- </div>
- ) }
- </div>
- { openAddProductsModal && (
- <AddProductsModal
- initialValue={ groupedProducts }
- onSubmit={ handleAddProductsModalSubmit }
- onClose={ handleAddProductsModalClose }
- />
- ) }
- { openReorderProductsModal && (
- <ReorderProductsModal
- products={ groupedProducts }
- onSubmit={ handleReorderProductsModalSubmit }
- onClose={ handleReorderProductsModalClose }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss b/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss
deleted file mode 100644
index f47892e3930..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/editor.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.wp-block-woocommerce-product-list-field {
- display: flex;
- flex-direction: column;
- gap: $grid-unit-30;
-
- &__body {
- .woocommerce-advice-card {
- padding: $grid-unit-60;
- gap: $grid-unit-40;
- min-height: 233px; // min height to cover the min rows rendered in the table on its back
-
- &__body {
- gap: $grid-unit-40;
- }
- }
- }
-
- &__table {
- &-header {
- color: $gray-700;
- font-size: 11px;
- text-transform: uppercase;
- border-bottom: 1px solid $gray-200;
- }
-
- &-row {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: $grid-unit-30;
- padding: $grid-unit-20 2px;
-
- &:not(:last-child) {
- border-bottom: 1px solid $gray-200;
- }
- }
-
- &-header-column,
- &-cell {
- display: flex;
- align-items: center;
-
- &:first-child {
- grid-column: 1 / span 2;
- gap: $grid-unit + $grid-unit-05;
- }
-
- &:nth-child(2),
- &:last-child {
- justify-content: end;
- gap: $grid-unit;
- }
- }
- }
-
- &__product-image {
- width: $grid-unit-40;
- height: $grid-unit-40;
- border-radius: $grid-unit-05;
- background-color: $gray-200;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- flex-shrink: 0;
- }
-
- &__product-info {
- display: flex;
- flex-direction: column;
- gap: 2px;
- flex: 1 1 auto;
- overflow: hidden;
- }
-
- &__product-name {
- color: $gray-900;
-
- .is-link {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
-
- &__product-sku {
- color: $gray-700;
- font-size: 11px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- &__price--on-sale {
- color: $gray-600;
- text-decoration: line-through;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts b/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts
deleted file mode 100644
index d3ffb62fb06..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { ProductListBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: ProductListBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/product-list/types.ts b/packages/js/product-editor/src/blocks/product-fields/product-list/types.ts
deleted file mode 100644
index 4161d57f36f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/product-list/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface UploadsBlockAttributes extends BlockAttributes {
- property: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json b/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json
deleted file mode 100644
index 89457a76172..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/regular-price/block.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-regular-price-field",
- "description": "A product price block with currency display.",
- "title": "Product regular price",
- "category": "widgets",
- "keywords": [
- "products",
- "price"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "help": {
- "type": "string"
- },
- "isRequired": {
- "type": "boolean",
- "default": false
- },
- "tooltip": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx
deleted file mode 100644
index e2b9dd924a3..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/regular-price/edit.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-import { useInstanceId } from '@wordpress/compose';
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement, useEffect } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-import { Label } from '../../../components/label/label';
-import { useValidation } from '../../../contexts/validation-context';
-import { useCurrencyInputProps } from '../../../hooks/use-currency-input-props';
-import type { ProductEditorBlockEditProps } from '../../../types';
-import type { SalePriceBlockAttributes } from './types';
-
-export function Edit( {
- attributes,
- clientId,
- context,
-}: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { label, help, isRequired, tooltip, disabled } = attributes;
- const [ regularPrice, setRegularPrice ] = useEntityProp< string >(
- 'postType',
- context.postType || 'product',
- 'regular_price'
- );
- const [ salePrice ] = useEntityProp< string >(
- 'postType',
- context.postType || 'product',
- 'sale_price'
- );
- const inputProps = useCurrencyInputProps( {
- value: regularPrice,
- onChange: setRegularPrice,
- } );
-
- function renderHelp() {
- if ( help ) {
- return (
- <span
- dangerouslySetInnerHTML={ { __html: sanitizeHTML( help ) } }
- />
- );
- }
- }
-
- const regularPriceId = useInstanceId(
- BaseControl,
- 'wp-block-woocommerce-product-regular-price-field'
- ) as string;
-
- const {
- ref: regularPriceRef,
- error: regularPriceValidationError,
- validate: validateRegularPrice,
- } = useValidation< Product >(
- `regular_price-${ clientId }`,
- async function regularPriceValidator() {
- const listPrice = Number.parseFloat( regularPrice );
- if ( listPrice ) {
- if ( listPrice < 0 ) {
- return {
- message: __(
- 'Regular price must be greater than or equals to zero.',
- 'woocommerce'
- ),
- };
- }
- if (
- salePrice &&
- listPrice <= Number.parseFloat( salePrice )
- ) {
- return {
- message: __(
- 'Regular price must be greater than the sale price.',
- 'woocommerce'
- ),
- };
- }
- } else if ( isRequired ) {
- return {
- message: sprintf(
- /* translators: label of required field. */
- __( '%s is required.', 'woocommerce' ),
- label
- ),
- };
- }
- },
- [ regularPrice, salePrice ]
- );
-
- useEffect( () => {
- if ( isRequired ) {
- validateRegularPrice();
- }
- }, [] );
-
- return (
- <div { ...blockProps }>
- <BaseControl
- id={ regularPriceId }
- help={
- regularPriceValidationError
- ? regularPriceValidationError
- : renderHelp()
- }
- className={ clsx( {
- 'has-error': regularPriceValidationError,
- } ) }
- >
- <InputControl
- { ...inputProps }
- id={ regularPriceId }
- name={ 'regular_price' }
- inputMode="decimal"
- ref={ regularPriceRef }
- label={
- tooltip ? (
- <Label label={ label } tooltip={ tooltip } />
- ) : (
- label
- )
- }
- disabled={ disabled }
- onBlur={ () => validateRegularPrice() }
- />
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/editor.scss b/packages/js/product-editor/src/blocks/product-fields/regular-price/editor.scss
deleted file mode 100644
index b318e14ba8a..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/regular-price/editor.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.wp-block-woocommerce-product-regular-price-field {
- .components-currency-control {
- .components-input-control__prefix {
- color: $gray-700;
- word-break: normal;
- }
-
- .components-input-control__input {
- text-align: right;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/index.ts b/packages/js/product-editor/src/blocks/product-fields/regular-price/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/regular-price/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts b/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts
deleted file mode 100644
index 32b3c598730..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/regular-price/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SalePriceBlockAttributes extends BlockAttributes {
- label: string;
- help?: string;
- isRequired?: boolean;
- disabled?: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json b/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json
deleted file mode 100644
index ae74a87f7cd..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/sale-price/block.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-sale-price-field",
- "description": "A product price block with currency display.",
- "title": "Product sale price",
- "category": "widgets",
- "keywords": [
- "products",
- "price"
- ],
- "textdomain": "default",
- "attributes": {
- "label": {
- "type": "string",
- "role": "content"
- },
- "help": {
- "type": "string"
- },
- "tooltip": {
- "type": "string"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx
deleted file mode 100644
index d909c617abc..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/sale-price/edit.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Product } from '@woocommerce/data';
-import { useInstanceId } from '@wordpress/compose';
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- BaseControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useValidation } from '../../../contexts/validation-context';
-import { useCurrencyInputProps } from '../../../hooks/use-currency-input-props';
-import { SalePriceBlockAttributes } from './types';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { Label } from '../../../components/label/label';
-
-export function Edit( {
- attributes,
- clientId,
- context,
-}: ProductEditorBlockEditProps< SalePriceBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { label, help, tooltip, disabled } = attributes;
- const [ regularPrice ] = useEntityProp< string >(
- 'postType',
- context.postType || 'product',
- 'regular_price'
- );
- const [ salePrice, setSalePrice ] = useEntityProp< string >(
- 'postType',
- context.postType || 'product',
- 'sale_price'
- );
- const inputProps = useCurrencyInputProps( {
- value: salePrice,
- onChange: setSalePrice,
- } );
-
- const salePriceId = useInstanceId(
- BaseControl,
- 'wp-block-woocommerce-product-sale-price-field'
- ) as string;
-
- const {
- ref: salePriceRef,
- error: salePriceValidationError,
- validate: validateSalePrice,
- } = useValidation< Product >(
- `sale-price-${ clientId }`,
- async function salePriceValidator() {
- if ( salePrice ) {
- if ( Number.parseFloat( salePrice ) < 0 ) {
- return {
- message: __(
- 'Sale price must be greater than or equals to zero.',
- 'woocommerce'
- ),
- };
- }
- const listPrice = Number.parseFloat( regularPrice );
- if (
- ! listPrice ||
- listPrice <= Number.parseFloat( salePrice )
- ) {
- return {
- message: __(
- 'Sale price must be lower than the regular price.',
- 'woocommerce'
- ),
- };
- }
- }
- },
- [ regularPrice, salePrice ]
- );
-
- return (
- <div { ...blockProps }>
- <BaseControl
- id={ salePriceId }
- help={
- salePriceValidationError ? salePriceValidationError : help
- }
- className={ clsx( {
- 'has-error': salePriceValidationError,
- } ) }
- >
- <InputControl
- { ...inputProps }
- id={ salePriceId }
- name={ 'sale_price' }
- inputMode="decimal"
- ref={ salePriceRef }
- label={
- tooltip ? (
- <Label label={ label } tooltip={ tooltip } />
- ) : (
- label
- )
- }
- disabled={ disabled }
- onBlur={ () => validateSalePrice() }
- />
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/editor.scss b/packages/js/product-editor/src/blocks/product-fields/sale-price/editor.scss
deleted file mode 100644
index 7a260124b06..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/sale-price/editor.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.wp-block-woocommerce-product-sale-price-field {
- .components-currency-control {
- .components-input-control__prefix {
- color: $gray-700;
- word-break: normal;
- }
-
- .components-input-control__input {
- text-align: right;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/index.ts b/packages/js/product-editor/src/blocks/product-fields/sale-price/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/sale-price/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts b/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts
deleted file mode 100644
index 391724f162f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/sale-price/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface SalePriceBlockAttributes extends BlockAttributes {
- label: string;
- help?: string;
- disabled?: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/block.json b/packages/js/product-editor/src/blocks/product-fields/schedule-sale/block.json
deleted file mode 100644
index d23d12916f3..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/block.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-schedule-sale-fields",
- "title": "Product schedule sale fields",
- "category": "woocommerce",
- "description": "The product schedule sale fields.",
- "keywords": [
- "products",
- "schedule",
- "sale"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/schedule-sale/edit.tsx
deleted file mode 100644
index 5148d092669..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/edit.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { DateTimePickerControl } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { ToggleControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { createElement, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import moment from 'moment';
-import { getSettings } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
-import { ScheduleSalePricingBlockAttributes } from './types';
-import { useProductEdits } from '../../../hooks/use-product-edits';
-import { useValidation } from '../../../contexts/validation-context';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export function Edit( {
- attributes,
- clientId,
- context,
-}: ProductEditorBlockEditProps< ScheduleSalePricingBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { hasEdit } = useProductEdits();
-
- const dateTimeFormat = getSettings().formats.datetime;
-
- const [ showScheduleSale, setShowScheduleSale ] = useState( false );
-
- const [ salePrice ] = useEntityProp< string | null >(
- 'postType',
- context.postType || 'product',
- 'sale_price'
- );
-
- const isSalePriceGreaterThanZero =
- Number.parseFloat( salePrice || '0' ) > 0;
-
- const [ dateOnSaleFromGmt, setDateOnSaleFromGmt ] = useEntityProp<
- string | null
- >( 'postType', context.postType || 'product', 'date_on_sale_from_gmt' );
-
- const [ dateOnSaleToGmt, setDateOnSaleToGmt ] = useEntityProp<
- string | null
- >( 'postType', context.postType || 'product', 'date_on_sale_to_gmt' );
-
- const today = moment().startOf( 'minute' ).toISOString();
-
- function handleToggleChange( value: boolean ) {
- recordEvent( 'product_pricing_schedule_sale_toggle_click', {
- enabled: value,
- } );
-
- setShowScheduleSale( value );
-
- if ( value ) {
- setDateOnSaleFromGmt( today );
- setDateOnSaleToGmt( '' );
- } else {
- setDateOnSaleFromGmt( '' );
- setDateOnSaleToGmt( '' );
- }
- }
-
- // Hide and clean date fields if the user manually changes
- // the sale price to zero or less.
- useEffect( () => {
- if ( hasEdit( 'sale_price' ) && ! isSalePriceGreaterThanZero ) {
- setShowScheduleSale( false );
- setDateOnSaleFromGmt( '' );
- setDateOnSaleToGmt( '' );
- }
- }, [ isSalePriceGreaterThanZero ] );
-
- // Automatically show date fields if `from` or `to` dates have
- // any value.
- useEffect( () => {
- if ( dateOnSaleFromGmt || dateOnSaleToGmt ) {
- setShowScheduleSale( true );
- }
- }, [ dateOnSaleFromGmt, dateOnSaleToGmt ] );
-
- const _dateOnSaleFrom = moment( dateOnSaleFromGmt, moment.ISO_8601, true );
- const _dateOnSaleTo = moment( dateOnSaleToGmt, moment.ISO_8601, true );
-
- const {
- ref: dateOnSaleFromGmtRef,
- error: dateOnSaleFromGmtValidationError,
- validate: validateDateOnSaleFromGmt,
- } = useValidation< Product >(
- `date_on_sale_from_gmt-${ clientId }`,
- async function dateOnSaleFromValidator() {
- if ( showScheduleSale && dateOnSaleFromGmt ) {
- if ( ! _dateOnSaleFrom.isValid() ) {
- return {
- message: __(
- 'Please enter a valid date.',
- 'woocommerce'
- ),
- };
- }
-
- if ( _dateOnSaleFrom.isAfter( _dateOnSaleTo ) ) {
- return {
- message: __(
- 'The start date of the sale must be before the end date.',
- 'woocommerce'
- ),
- };
- }
- }
- },
- [ showScheduleSale, dateOnSaleFromGmt, _dateOnSaleFrom, _dateOnSaleTo ]
- );
-
- const {
- ref: dateOnSaleToGmtRef,
- error: dateOnSaleToGmtValidationError,
- validate: validateDateOnSaleToGmt,
- } = useValidation< Product >(
- `date_on_sale_to_gmt-${ clientId }`,
- async function dateOnSaleToValidator() {
- if ( showScheduleSale && dateOnSaleToGmt ) {
- if ( ! _dateOnSaleTo.isValid() ) {
- return {
- message: __(
- 'Please enter a valid date.',
- 'woocommerce'
- ),
- };
- }
-
- if ( _dateOnSaleTo.isBefore( _dateOnSaleFrom ) ) {
- return {
- message: __(
- 'The end date of the sale must be after the start date.',
- 'woocommerce'
- ),
- };
- }
- }
- },
- [ showScheduleSale, dateOnSaleFromGmt, _dateOnSaleFrom, _dateOnSaleTo ]
- );
-
- return (
- <div { ...blockProps }>
- <ToggleControl
- label={ __( 'Schedule sale', 'woocommerce' ) }
- checked={ showScheduleSale }
- onChange={ handleToggleChange }
- disabled={ ! isSalePriceGreaterThanZero }
- />
-
- { showScheduleSale && (
- <div className="wp-block-columns wp-block-woocommerce-product-schedule-sale-fields__content">
- <div className="wp-block-column">
- <DateTimePickerControl
- ref={
- dateOnSaleFromGmtRef as React.Ref< HTMLInputElement >
- }
- label={ __( 'From', 'woocommerce' ) }
- placeholder={ __(
- 'Sale start date and time (optional)',
- 'woocommerce'
- ) }
- dateTimeFormat={ dateTimeFormat }
- currentDate={ dateOnSaleFromGmt }
- onChange={ setDateOnSaleFromGmt }
- className={
- dateOnSaleFromGmtValidationError && 'has-error'
- }
- help={ dateOnSaleFromGmtValidationError as string }
- onBlur={ () => validateDateOnSaleFromGmt() }
- />
- </div>
-
- <div className="wp-block-column">
- <DateTimePickerControl
- ref={
- dateOnSaleToGmtRef as React.Ref< HTMLInputElement >
- }
- label={ __( 'To', 'woocommerce' ) }
- placeholder={ __(
- 'Sale end date and time (optional)',
- 'woocommerce'
- ) }
- dateTimeFormat={ dateTimeFormat }
- currentDate={ dateOnSaleToGmt }
- onChange={ ( value ) =>
- setDateOnSaleToGmt(
- moment( value )
- .startOf( 'minute' )
- .toISOString()
- )
- }
- onBlur={ () => validateDateOnSaleToGmt() }
- className={
- dateOnSaleToGmtValidationError && 'has-error'
- }
- help={ dateOnSaleToGmtValidationError as string }
- />
- </div>
- </div>
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/editor.scss b/packages/js/product-editor/src/blocks/product-fields/schedule-sale/editor.scss
deleted file mode 100644
index a662f9f79d4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.wp-block-woocommerce-product-schedule-sale-fields {
- &__content {
- margin-top: $gap-large;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/index.ts b/packages/js/product-editor/src/blocks/product-fields/schedule-sale/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/types.ts b/packages/js/product-editor/src/blocks/product-fields/schedule-sale/types.ts
deleted file mode 100644
index e8c038493c0..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/schedule-sale/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface ScheduleSalePricingBlockAttributes extends BlockAttributes {
- name: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json b/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json
deleted file mode 100644
index fb59fb50d8c..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/block.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-shipping-class-field",
- "title": "Product shipping class field",
- "category": "woocommerce",
- "description": "The product shipping class field.",
- "keywords": [
- "products",
- "shipping",
- "class"
- ],
- "textdomain": "default",
- "attributes": {
- "title": {
- "type": "string",
- "role": "content"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType",
- "isInSelectedTab"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
deleted file mode 100644
index ff7c674c1ab..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/edit.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { Link } from '@woocommerce/components';
-import {
- experimentalProductShippingClassesStore,
- ProductShippingClass,
- PartialProduct,
-} from '@woocommerce/data';
-import { getNewPath } from '@woocommerce/navigation';
-import { recordEvent } from '@woocommerce/tracks';
-import { BaseControl, SelectControl } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
- Fragment,
- createElement,
- createInterpolateElement,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { ShippingClassBlockAttributes } from './types';
-import { AddNewShippingClassModal } from '../../../components';
-import { ADD_NEW_SHIPPING_CLASS_OPTION_VALUE } from '../../../constants';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-type ServerErrorResponse = {
- code: string;
-};
-
-type Select = {
- label: string;
- value: string;
-};
-
-export const DEFAULT_SHIPPING_CLASS_OPTIONS: Array< Select > = [
- { value: '', label: __( 'No shipping class', 'woocommerce' ) },
- {
- value: ADD_NEW_SHIPPING_CLASS_OPTION_VALUE,
- label: __( 'Add new shipping class', 'woocommerce' ),
- },
-];
-
-function mapShippingClassToSelectOption(
- shippingClasses: ProductShippingClass[]
-): Array< Select > {
- return shippingClasses.map( ( { slug, name } ) => ( {
- value: slug,
- label: name,
- } ) );
-}
-
-/*
- * Query to fetch shipping classes.
- */
-const shippingClassRequestQuery: Partial< ProductShippingClass > = {};
-
-function extractDefaultShippingClassFromProduct(
- categories?: PartialProduct[ 'categories' ],
- shippingClasses?: ProductShippingClass[]
-): Partial< ProductShippingClass > | undefined {
- const category = categories?.find(
- ( { slug } ) => slug !== 'uncategorized'
- );
- if (
- category &&
- ! shippingClasses?.some( ( { slug } ) => slug === category.slug )
- ) {
- return {
- name: category.name,
- slug: category.slug,
- };
- }
-}
-
-export function Edit( {
- attributes,
- context: { postType, isInSelectedTab },
-}: ProductEditorBlockEditProps< ShippingClassBlockAttributes > ) {
- const [ showShippingClassModal, setShowShippingClassModal ] =
- useState( false );
-
- const blockProps = useWooBlockProps( attributes );
-
- const { createProductShippingClass } = useDispatch(
- experimentalProductShippingClassesStore
- );
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
-
- const [ categories ] = useEntityProp< PartialProduct[ 'categories' ] >(
- 'postType',
- postType,
- 'categories'
- );
- const [ shippingClass, setShippingClass ] = useEntityProp< string >(
- 'postType',
- postType,
- 'shipping_class'
- );
- const [ virtual ] = useEntityProp< boolean >(
- 'postType',
- postType,
- 'virtual'
- );
-
- function handleShippingClassServerError(
- error: ServerErrorResponse
- ): Promise< ProductShippingClass > {
- let message = __(
- 'We couldn’t add this shipping class. Try again in a few seconds.',
- 'woocommerce'
- );
-
- if ( error.code === 'term_exists' ) {
- message = __(
- 'A shipping class with that slug already exists.',
- 'woocommerce'
- );
- }
-
- createErrorNotice( message, {
- explicitDismiss: true,
- } );
-
- throw error;
- }
-
- const { shippingClasses } = useSelect(
- ( select ) => {
- const { getProductShippingClasses } = select(
- experimentalProductShippingClassesStore
- );
- return {
- shippingClasses:
- ( isInSelectedTab &&
- getProductShippingClasses(
- shippingClassRequestQuery
- ) ) ||
- [],
- };
- },
- [ isInSelectedTab ]
- );
-
- const shippingClassControlId = useInstanceId(
- BaseControl,
- 'wp-block-woocommerce-product-shipping-class-field'
- ) as string;
-
- return (
- <div { ...blockProps }>
- <div className="wp-block-columns">
- <div className="wp-block-column">
- <SelectControl
- id={ shippingClassControlId }
- name="shipping_class"
- value={ shippingClass }
- onChange={ ( value: string ) => {
- if (
- value === ADD_NEW_SHIPPING_CLASS_OPTION_VALUE
- ) {
- setShowShippingClassModal( true );
- return;
- }
- setShippingClass( value );
- } }
- label={ __( 'Shipping class', 'woocommerce' ) }
- options={ [
- ...DEFAULT_SHIPPING_CLASS_OPTIONS,
- ...mapShippingClassToSelectOption(
- shippingClasses ?? []
- ),
- ] }
- disabled={ attributes.disabled || virtual }
- help={ createInterpolateElement(
- __(
- 'Manage shipping classes and rates in <Link>global settings</Link>.',
- 'woocommerce'
- ),
- {
- Link: (
- <Link
- href={ getNewPath(
- {
- tab: 'shipping',
- section: 'classes',
- },
- '',
- {},
- 'wc-settings'
- ) }
- target="_blank"
- type="external"
- onClick={ () => {
- recordEvent(
- 'product_shipping_global_settings_link_click'
- );
- } }
- >
- <Fragment />
- </Link>
- ),
- }
- ) }
- />
- </div>
-
- <div className="wp-block-column"></div>
- </div>
-
- { showShippingClassModal && (
- <AddNewShippingClassModal
- shippingClass={ extractDefaultShippingClassFromProduct(
- categories,
- shippingClasses
- ) }
- onAdd={ ( shippingClassValues ) =>
- createProductShippingClass( shippingClassValues, {
- optimisticQueryUpdate: shippingClassRequestQuery,
- } )
- .then( ( value: ProductShippingClass ) => {
- recordEvent(
- 'product_new_shipping_class_modal_add_button_click'
- );
- setShippingClass( value.slug );
- return value;
- } )
- .catch( handleShippingClassServerError )
- }
- onCancel={ () => setShowShippingClassModal( false ) }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/index.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-class/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts
deleted file mode 100644
index 324c034e729..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-class/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface ShippingClassBlockAttributes extends BlockAttributes {
- title: string;
- disabled?: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json
deleted file mode 100644
index 03cf7c3838e..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/block.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-shipping-dimensions-fields",
- "title": "Product shipping dimensions fields",
- "category": "woocommerce",
- "description": "The product shipping dimensions fields.",
- "keywords": [
- "products",
- "shipping",
- "dimensions"
- ],
- "textdomain": "default",
- "attributes": {
- "__contentEditable": {
- "type": "string",
- "role": "content"
- },
- "disabled": {
- "type": "boolean",
- "default": false
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx
deleted file mode 100644
index cf1a6bbf75f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/edit.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-/**
- * External dependencies
- */
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { optionsStore, Product, ProductDimensions } from '@woocommerce/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import {
- createElement,
- createInterpolateElement,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { ShippingDimensionsBlockAttributes } from './types';
-import {
- HighlightSides,
- ShippingDimensionsImage,
-} from '../../../components/shipping-dimensions-image';
-import { useValidation } from '../../../contexts/validation-context';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { NumberControl } from '../../../components/number-control';
-
-const SHIPPING_AND_WEIGHT_MIN_VALUE = 0;
-const SHIPPING_AND_WEIGHT_MAX_VALUE = 100_000_000_000_000;
-
-export function Edit( {
- attributes,
- clientId,
- context,
-}: ProductEditorBlockEditProps< ShippingDimensionsBlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
-
- const [ dimensions, setDimensions ] =
- useEntityProp< Partial< ProductDimensions > | null >(
- 'postType',
- context.postType,
- 'dimensions'
- );
-
- const [ weight, setWeight ] = useEntityProp< string | null >(
- 'postType',
- context.postType,
- 'weight'
- );
-
- const [ virtual ] = useEntityProp< boolean >(
- 'postType',
- context.postType,
- 'virtual'
- );
-
- const [ highlightSide, setHighlightSide ] = useState< HighlightSides >();
-
- const { dimensionUnit, weightUnit } = useSelect( ( select ) => {
- const { getOption } = select( optionsStore );
- return {
- dimensionUnit: getOption( 'woocommerce_dimension_unit' ) as string,
- weightUnit: getOption( 'woocommerce_weight_unit' ) as string,
- };
- }, [] );
-
- function getDimensionsControlProps(
- name: keyof ProductDimensions,
- side: HighlightSides
- ) {
- return {
- name: `dimensions.${ name }`,
- value: ( dimensions && dimensions[ name ] ) ?? '',
- onChange: ( value: string ) =>
- setDimensions( {
- ...( dimensions ?? {} ),
- [ name ]: value,
- } ),
- onFocus: () => setHighlightSide( side ),
- onBlur: () => setHighlightSide( undefined ),
- suffix: dimensionUnit,
- disabled: attributes.disabled || virtual,
- min: SHIPPING_AND_WEIGHT_MIN_VALUE,
- max: SHIPPING_AND_WEIGHT_MAX_VALUE,
- };
- }
-
- const widthFieldId = `dimensions_width-${ clientId }`;
-
- const {
- ref: dimensionsWidthRef,
- error: dimensionsWidthValidationError,
- validate: validateDimensionsWidth,
- } = useValidation< Product >(
- widthFieldId,
- async function dimensionsWidthValidator() {
- if ( dimensions?.width && +dimensions.width <= 0 ) {
- return {
- message: __(
- 'Width must be greater than zero.',
- 'woocommerce'
- ),
- };
- }
- },
- [ dimensions?.width ]
- );
-
- const lengthFieldId = `dimensions_length-${ clientId }`;
-
- const {
- ref: dimensionsLengthRef,
- error: dimensionsLengthValidationError,
- validate: validateDimensionsLength,
- } = useValidation< Product >(
- lengthFieldId,
- async function dimensionsLengthValidator() {
- if ( dimensions?.length && +dimensions.length <= 0 ) {
- return {
- message: __(
- 'Length must be greater than zero.',
- 'woocommerce'
- ),
- };
- }
- },
- [ dimensions?.length ]
- );
-
- const heightFieldId = `dimensions_height-${ clientId }`;
-
- const {
- ref: dimensionsHeightRef,
- error: dimensionsHeightValidationError,
- validate: validateDimensionsHeight,
- } = useValidation< Product >(
- heightFieldId,
- async function dimensionsHeightValidator() {
- if ( dimensions?.height && +dimensions.height <= 0 ) {
- return {
- message: __(
- 'Height must be greater than zero.',
- 'woocommerce'
- ),
- };
- }
- },
- [ dimensions?.height ]
- );
-
- const weightFieldId = `weight-${ clientId }`;
-
- const {
- ref: weightRef,
- error: weightValidationError,
- validate: validateWeight,
- } = useValidation< Product >(
- weightFieldId,
- async function weightValidator() {
- if ( weight && +weight <= 0 ) {
- return {
- message: __(
- 'Weight must be greater than zero.',
- 'woocommerce'
- ),
- };
- }
- },
- [ weight ]
- );
-
- const dimensionsWidthProps = {
- ...getDimensionsControlProps( 'width', 'A' ),
- ref: dimensionsWidthRef,
- onBlur: validateDimensionsWidth,
- id: widthFieldId,
- };
- const dimensionsLengthProps = {
- ...getDimensionsControlProps( 'length', 'B' ),
- ref: dimensionsLengthRef,
- onBlur: validateDimensionsLength,
- id: lengthFieldId,
- };
- const dimensionsHeightProps = {
- ...getDimensionsControlProps( 'height', 'C' ),
- ref: dimensionsHeightRef,
- onBlur: validateDimensionsHeight,
- id: heightFieldId,
- };
- const weightProps = {
- id: weightFieldId,
- name: 'weight',
- value: weight ?? '',
- onChange: setWeight,
- suffix: weightUnit,
- ref: weightRef,
- onBlur: validateWeight,
- disabled: attributes.disabled || virtual,
- min: SHIPPING_AND_WEIGHT_MIN_VALUE,
- max: SHIPPING_AND_WEIGHT_MAX_VALUE,
- };
-
- return (
- <div { ...blockProps }>
- <h4>{ __( 'Dimensions', 'woocommerce' ) }</h4>
-
- <div className="wp-block-columns">
- <div className="wp-block-column">
- <NumberControl
- label={ createInterpolateElement(
- __( 'Width <Side />', 'woocommerce' ),
- { Side: <span>A</span> }
- ) }
- error={ dimensionsWidthValidationError }
- { ...dimensionsWidthProps }
- />
- <NumberControl
- label={ createInterpolateElement(
- __( 'Length <Side />', 'woocommerce' ),
- { Side: <span>B</span> }
- ) }
- error={ dimensionsLengthValidationError }
- { ...dimensionsLengthProps }
- />
- <NumberControl
- label={ createInterpolateElement(
- __( 'Height <Side />', 'woocommerce' ),
- { Side: <span>C</span> }
- ) }
- error={ dimensionsHeightValidationError }
- { ...dimensionsHeightProps }
- />
- <NumberControl
- label={ __( 'Weight', 'woocommerce' ) }
- error={ weightValidationError }
- { ...weightProps }
- />
- </div>
-
- <div className="wp-block-column">
- <ShippingDimensionsImage
- highlight={ highlightSide }
- className="wp-block-woocommerce-product-shipping-dimensions-fields__dimensions-image"
- labels={ {
- A: dimensionsWidthProps.value?.length
- ? dimensionsWidthProps.value
- : undefined,
- B: dimensionsLengthProps.value?.length
- ? dimensionsLengthProps.value
- : undefined,
- C: dimensionsHeightProps.value?.length
- ? dimensionsHeightProps.value
- : undefined,
- } }
- />
- </div>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/editor.scss b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/editor.scss
deleted file mode 100644
index 668f03a6f9e..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/editor.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.wp-block-woocommerce-product-shipping-dimensions-fields {
- .components-base-control {
- margin-bottom: $gap;
-
- &__field {
- .components-base-control__label > span {
- color: $gray-700;
- }
-
- .components-input-control__suffix {
- flex-shrink: 0;
- color: $gray-700;
- }
- }
- }
-
- &__dimensions-image {
- width: 100%;
- height: 100%;
- padding: $gap;
- overflow: visible;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/index.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts b/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts
deleted file mode 100644
index a919208f079..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/shipping-dimensions/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface ShippingDimensionsBlockAttributes extends BlockAttributes {
- __contentEditable: string;
- disabled?: boolean;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/block.json b/packages/js/product-editor/src/blocks/product-fields/summary/block.json
deleted file mode 100644
index 57923413b0f..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/block.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-summary-field",
- "title": "Product summary",
- "category": "widgets",
- "description": "The product summary.",
- "keywords": [
- "products",
- "summary",
- "excerpt"
- ],
- "textdomain": "default",
- "attributes": {
- "property": {
- "type": "string"
- },
- "align": {
- "type": "string"
- },
- "allowedFormats": {
- "type": "array",
- "default": [
- "core/bold",
- "core/code",
- "core/italic",
- "core/link",
- "core/strikethrough",
- "core/underline",
- "core/text-color",
- "core/subscript",
- "core/superscript",
- "core/unknown"
- ]
- },
- "direction": {
- "type": "string",
- "enum": [
- "ltr",
- "rtl"
- ]
- },
- "label": {
- "type": "string"
- },
- "helpText": {
- "type": "string"
- },
- "content": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false
- },
- "editorStyle": "file:./editor.css",
- "usesContext": [
- "postType"
- ]
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/constants.ts b/packages/js/product-editor/src/blocks/product-fields/summary/constants.ts
deleted file mode 100644
index 68dcf773353..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/constants.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- alignCenter,
- alignJustify,
- alignLeft,
- alignRight,
-} from '@wordpress/icons';
-
-export const ALIGNMENT_CONTROLS = [
- {
- icon: alignLeft,
- title: __( 'Align text left', 'woocommerce' ),
- align: 'left',
- },
- {
- icon: alignCenter,
- title: __( 'Align text center', 'woocommerce' ),
- align: 'center',
- },
- {
- icon: alignRight,
- title: __( 'Align text right', 'woocommerce' ),
- align: 'right',
- },
- {
- icon: alignJustify,
- title: __( 'Align text justify', 'woocommerce' ),
- align: 'justify',
- },
-];
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/summary/edit.tsx
deleted file mode 100644
index 26de94be2cb..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/edit.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { createElement, createInterpolateElement } from '@wordpress/element';
-import { BaseControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useInstanceId } from '@wordpress/compose';
-import clsx from 'clsx';
-import {
- AlignmentControl,
- BlockControls,
- RichText,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { ParagraphRTLControl } from './paragraph-rtl-control';
-import { SummaryAttributes } from './types';
-import { ALIGNMENT_CONTROLS } from './constants';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { useClearSelectedBlockOnBlur } from '../../../hooks/use-clear-selected-block-on-blur';
-
-export function SummaryBlockEdit( {
- attributes,
- setAttributes,
- context,
-}: ProductEditorBlockEditProps< SummaryAttributes > ) {
- const { align, allowedFormats, direction, label, helpText } = attributes;
- const blockProps = useWooBlockProps( attributes, {
- style: { direction },
- } );
-
- const contentId = useInstanceId(
- SummaryBlockEdit,
- 'wp-block-woocommerce-product-summary-field__content'
- );
- const [ summary, setSummary ] = useEntityProp< string >(
- 'postType',
- context.postType || 'product',
- attributes.property
- );
-
- // This is a workaround to hide the toolbar when the block is blurred.
- // This is a temporary solution until using Gutenberg 18 with the
- // fix from https://github.com/WordPress/gutenberg/pull/59800
- const { handleBlur: hideToolbar } = useClearSelectedBlockOnBlur();
-
- function handleAlignmentChange( value: SummaryAttributes[ 'align' ] ) {
- setAttributes( { align: value } );
- }
-
- function handleDirectionChange( value: SummaryAttributes[ 'direction' ] ) {
- setAttributes( { direction: value } );
- }
-
- return (
- <div
- className={
- 'wp-block wp-block-woocommerce-product-summary-field-wrapper'
- }
- >
- <BlockControls group="block">
- <AlignmentControl
- alignmentControls={ ALIGNMENT_CONTROLS }
- value={ align }
- onChange={ handleAlignmentChange }
- />
-
- <ParagraphRTLControl
- direction={ direction }
- onChange={ handleDirectionChange }
- />
- </BlockControls>
-
- <BaseControl
- id={ contentId.toString() }
- label={
- typeof label === 'undefined'
- ? createInterpolateElement(
- __( 'Summary', 'woocommerce' ),
- {
- optional: (
- <span className="woocommerce-product-form__optional-input">
- { __(
- '(OPTIONAL)',
- 'woocommerce'
- ) }
- </span>
- ),
- }
- )
- : label
- }
- help={
- typeof helpText === 'undefined'
- ? __(
- "Summarize this product in 1-2 short sentences. We'll show it at the top of the page.",
- 'woocommerce'
- )
- : helpText
- }
- >
- <div { ...blockProps }>
- <RichText
- id={ contentId.toString() }
- identifier="content"
- tagName="p"
- value={ summary }
- onChange={ setSummary }
- data-empty={ Boolean( summary ) }
- className={ clsx( 'components-summary-control', {
- [ `has-text-align-${ align }` ]: align,
- } ) }
- dir={ direction }
- allowedFormats={ allowedFormats }
- onBlur={ hideToolbar }
- />
- </div>
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/editor.scss b/packages/js/product-editor/src/blocks/product-fields/summary/editor.scss
deleted file mode 100644
index f09008a0386..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/editor.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.wp-block-woocommerce-product-summary-field-wrapper {
- & .wp-block-woocommerce-product-summary-field {
- margin-top: 0;
- margin-bottom: 0;
- }
-}
-
-.components-summary-control {
- width: 100%;
- min-height: calc($gap-larger * 3);
- background-color: $white;
- box-sizing: border-box;
- border: 1px solid #757575;
- border-radius: 2px;
- padding: $gap-smaller;
- margin: 0;
- appearance: textarea;
- resize: vertical;
- overflow: hidden;
-
- &.rich-text [data-rich-text-placeholder]:after {
- color: $gray-700;
- opacity: 1;
- }
-
- &:focus {
- box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10, --wp-admin-theme-color);
- border-color: var(--wp-admin-theme-color-darker-10, --wp-admin-theme-color);
- }
-}
-
-// This alignment class does not exists in
-// https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/common.scss
-.has-text-align-justify {
- /*rtl:ignore*/
- text-align: justify;
-}
-
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/index.ts b/packages/js/product-editor/src/blocks/product-fields/summary/index.ts
deleted file mode 100644
index 765b6911a19..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { SummaryBlockEdit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { name, metadata };
-
-export const settings = {
- example: {},
- edit: SummaryBlockEdit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/index.ts b/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/index.ts
deleted file mode 100644
index 122d0571e26..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './paragraph-rtl-control';
-export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/paragraph-rtl-control.tsx b/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/paragraph-rtl-control.tsx
deleted file mode 100644
index 40a731244f4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/paragraph-rtl-control.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { ToolbarButton } from '@wordpress/components';
-import { _x, isRTL } from '@wordpress/i18n';
-import { formatLtr } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { ParagraphRTLControlProps } from './types';
-
-export function ParagraphRTLControl( {
- direction,
- onChange,
-}: ParagraphRTLControlProps ) {
- function handleClick() {
- if ( typeof onChange === 'function' ) {
- onChange( direction === 'ltr' ? undefined : 'ltr' );
- }
- }
-
- return (
- <>
- { isRTL() && (
- <ToolbarButton
- icon={ formatLtr }
- title={ _x(
- 'Left to right',
- 'editor button',
- 'woocommerce'
- ) }
- isActive={ direction === 'ltr' }
- onClick={ handleClick }
- />
- ) }
- </>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/types.ts b/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/types.ts
deleted file mode 100644
index 4a5f8bf0fa2..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/paragraph-rtl-control/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { SummaryAttributes } from '../types';
-
-export type ParagraphRTLControlProps = Pick<
- SummaryAttributes,
- 'direction'
-> & {
- onChange( direction?: SummaryAttributes[ 'direction' ] ): void;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/summary/types.ts b/packages/js/product-editor/src/blocks/product-fields/summary/types.ts
deleted file mode 100644
index 0a7842f6afd..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/summary/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type SummaryAttributes = {
- align: 'left' | 'center' | 'right' | 'justify';
- allowedFormats?: string[];
- direction: 'ltr' | 'rtl';
- label: string;
- property: string;
- helpText?: string;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/tag/block.json b/packages/js/product-editor/src/blocks/product-fields/tag/block.json
deleted file mode 100644
index 461a4faff36..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/tag/block.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-tag-field",
- "title": "Product Tag",
- "category": "widgets",
- "description": "A field to select product tags.",
- "keywords": [
- "products",
- "tag"
- ],
- "textdomain": "default",
- "attributes": {
- "name": {
- "type": "string",
- "role": "content"
- },
- "label": {
- "type": "string"
- },
- "placeholder": {
- "type": "string"
- }
- },
- "usesContext": [
- "postType",
- "isInSelectedTab"
- ],
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/tag/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/tag/edit.tsx
deleted file mode 100644
index f04aebf9002..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/tag/edit.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { createElement } from '@wordpress/element';
-import { BlockAttributes } from '@wordpress/blocks';
-import { BaseControl } from '@wordpress/components';
-import { ProductTag } from '@woocommerce/data';
-import { useInstanceId } from '@wordpress/compose';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { TagField } from '../../../components/tags-field';
-import { ProductEditorBlockEditProps } from '../../../types';
-
-export function Edit( {
- attributes,
- context: { postType, isInSelectedTab },
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const blockProps = useWooBlockProps( attributes );
- const { name, label, placeholder } = attributes;
- const [ tags, setTags ] = useEntityProp<
- Pick< ProductTag, 'id' | 'name' >[]
- >( 'postType', postType || 'product', name || 'tags' );
-
- const tagFieldId = useInstanceId( BaseControl, 'tag-field' ) as string;
-
- return (
- <div { ...blockProps }>
- {
- <TagField
- id={ tagFieldId }
- isVisible={ isInSelectedTab }
- label={ label || __( 'Tags', 'woocommerce' ) }
- placeholder={
- placeholder ||
- __( 'Search or create tags…', 'woocommerce' )
- }
- onChange={ setTags }
- value={ tags || [] }
- />
- }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/tag/editor.scss b/packages/js/product-editor/src/blocks/product-fields/tag/editor.scss
deleted file mode 100644
index 693795b1f72..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/tag/editor.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.wp-block-woocommerce-product-tag-field {
- .woocommerce-experimental-select-tree-control__menu {
- .experimental-woocommerce-tree-item {
- font-size: 13px;
- .components-checkbox-control__input-container,
- input[type="checkbox"],
- .components-checkbox-control__checked {
- width: 20px;
- height: 20px;
- }
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/tag/index.ts b/packages/js/product-editor/src/blocks/product-fields/tag/index.ts
deleted file mode 100644
index 84d6d885707..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/tag/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name } = metadata;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export const init = () =>
- registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/block.json b/packages/js/product-editor/src/blocks/product-fields/variation-items/block.json
deleted file mode 100644
index 2e6ea0ec5e4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/block.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-variation-items-field",
- "title": "Product variations items",
- "category": "woocommerce",
- "description": "The product variations items.",
- "keywords": [
- "products",
- "variations"
- ],
- "textdomain": "default",
- "attributes": {
- "description": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "isInSelectedTab"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/variation-items/edit.tsx
deleted file mode 100644
index 2bc499e53a4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/edit.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-/**
- * External dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import {
- PartialProductVariation,
- ProductVariation,
- Product,
- useUserPreferences,
- experimentalProductVariationsStore,
-} from '@woocommerce/data';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import { recordEvent } from '@woocommerce/tracks';
-import { createElement, useMemo, useRef } from '@wordpress/element';
-import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
-import { useEntityId, useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { VariationsTable } from '../../../components/variations-table';
-import { useValidation } from '../../../contexts/validation-context';
-import useProductEntityProp from '../../../hooks/use-product-entity-prop';
-import { VariationOptionsBlockAttributes } from './types';
-import { VariableProductTour } from './variable-product-tour';
-import { TRACKS_SOURCE } from '../../../constants';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { EmptyState } from '../../../components/empty-state';
-
-export function Edit( {
- attributes,
- context: { isInSelectedTab },
-}: ProductEditorBlockEditProps< VariationOptionsBlockAttributes > ) {
- const noticeDismissed = useRef( false );
- const { invalidateResolution } = useDispatch(
- experimentalProductVariationsStore
- );
- const productId = useEntityId( 'postType', 'product' );
- const blockProps = useWooBlockProps( attributes );
- const [ productStatus ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'status'
- );
- const [ productHasOptions ] = useEntityProp< string >(
- 'postType',
- 'product',
- 'has_options'
- );
- const [ productAttributes ] =
- useProductEntityProp< Product[ 'attributes' ] >( 'attributes' );
-
- const hasVariationOptions = useMemo(
- function hasAttributesUsedForVariations() {
- return productAttributes?.some(
- ( productAttribute ) => productAttribute.variation
- );
- },
- [ productAttributes ]
- );
-
- const totalCountWithoutPriceRequestParams = useMemo(
- () => ( {
- product_id: productId,
- order: 'asc' as const,
- orderby: 'menu_order' as const,
- has_price: false,
- } ),
- [ productId ]
- );
-
- const { totalCountWithoutPrice } = useSelect(
- ( select ) => {
- const { getProductVariationsTotalCount } = select(
- experimentalProductVariationsStore
- );
-
- return {
- totalCountWithoutPrice: productHasOptions
- ? getProductVariationsTotalCount(
- totalCountWithoutPriceRequestParams
- )
- : 0,
- };
- },
- [ productHasOptions, totalCountWithoutPriceRequestParams ]
- );
-
- const {
- updateUserPreferences,
- variable_items_without_price_notice_dismissed:
- itemsWithoutPriceNoticeDismissed,
- } = useUserPreferences();
-
- const { ref: variationTableRef } = useValidation< Product >(
- `variations`,
- async function regularPriceValidator( defaultValue, newData ) {
- /**
- * We cause a validation error if there is:
- * - more then one variation without a price.
- * - the notice hasn't been dismissed.
- * - The product hasn't already been published.
- * - We are publishing the product.
- */
- if (
- totalCountWithoutPrice > 0 &&
- ! noticeDismissed.current &&
- productStatus !== 'publish' &&
- // New status.
- newData?.status === 'publish'
- ) {
- if ( itemsWithoutPriceNoticeDismissed !== 'yes' ) {
- updateUserPreferences( {
- variable_items_without_price_notice_dismissed: {
- ...( itemsWithoutPriceNoticeDismissed || {} ),
- [ productId ]: 'no',
- },
- } );
- }
- return {
- message: __(
- 'Set variation prices before adding this product.',
- 'woocommerce'
- ),
- };
- }
- },
- [ totalCountWithoutPrice ]
- );
-
- function onSetPrices(
- handleUpdateAll: ( update: PartialProductVariation[] ) => void
- ) {
- recordEvent( 'product_variations_set_prices_select', {
- source: TRACKS_SOURCE,
- } );
- const productVariationsListPromise = resolveSelect(
- experimentalProductVariationsStore
- ).getProductVariations( {
- product_id: productId,
- order: 'asc' as const,
- orderby: 'menu_order' as const,
- has_price: false,
- _fields: [ 'id' ],
- per_page: totalCountWithoutPrice,
- } );
- handlePrompt( {
- onOk( value ) {
- recordEvent( 'product_variations_set_prices_update', {
- source: TRACKS_SOURCE,
- } );
- productVariationsListPromise.then(
- ( variations: ProductVariation[] ) => {
- handleUpdateAll(
- variations.map( ( { id } ) => ( {
- id,
- regular_price: value,
- } ) )
- );
- }
- );
- },
- } );
- }
-
- const hasNotDismissedNotice =
- ! itemsWithoutPriceNoticeDismissed ||
- itemsWithoutPriceNoticeDismissed[ productId ] !== 'yes';
- const noticeText =
- totalCountWithoutPrice > 0 && hasNotDismissedNotice
- ? sprintf(
- /** Translators: Number of variations without price */
- __(
- '%d variations do not have prices. Variations that do not have prices will not be visible to customers.',
- 'woocommerce'
- ),
- totalCountWithoutPrice
- )
- : '';
-
- if ( ! hasVariationOptions ) {
- return (
- <EmptyState
- names={ [
- __( 'Variation', 'woocommerce' ),
- __( 'Colors', 'woocommerce' ),
- __( 'Sizes', 'woocommerce' ),
- ] }
- />
- );
- }
-
- return (
- <div { ...blockProps }>
- <VariationsTable
- isVisible={ isInSelectedTab }
- ref={ variationTableRef as React.Ref< HTMLDivElement > }
- noticeText={ noticeText }
- onNoticeDismiss={ () => {
- noticeDismissed.current = true;
- updateUserPreferences( {
- variable_items_without_price_notice_dismissed: {
- ...( itemsWithoutPriceNoticeDismissed || {} ),
- [ productId ]: 'yes',
- },
- } );
- } }
- noticeActions={ [
- {
- label: __( 'Set prices', 'woocommerce' ),
- onClick: onSetPrices,
- className: 'is-destructive',
- },
- ] }
- onVariationTableChange={ ( type, update ) => {
- if (
- type === 'delete' ||
- ( type === 'update' &&
- update &&
- update.find(
- ( variation ) =>
- 'regular_price' in variation ||
- 'sale_price' in variation
- ) )
- ) {
- invalidateResolution(
- 'getProductVariationsTotalCount',
- [ totalCountWithoutPriceRequestParams ]
- );
- }
- } }
- />
- { isInSelectedTab && <VariableProductTour /> }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/editor.scss b/packages/js/product-editor/src/blocks/product-fields/variation-items/editor.scss
deleted file mode 100644
index 3a9d56fa964..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/editor.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.wp-block-woocommerce-product-variation-items-field {
- @media ( min-width: #{ ($break-medium) } ) {
- min-height: 420px;
- }
-}
-
-@keyframes fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-.variation-items-product-tour {
- .tour-kit-spotlight {
- border-radius: $gap-smaller;
- padding: $gap-large;
- animation: fade-in 0.6s;
- }
- .tour-kit-frame__container,
- .woocommerce-tour-kit-step {
- border-radius: $gap-smaller;
- animation: fade-in 0.6s;
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/index.ts b/packages/js/product-editor/src/blocks/product-fields/variation-items/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/types.ts b/packages/js/product-editor/src/blocks/product-fields/variation-items/types.ts
deleted file mode 100644
index 243a8fafc43..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface VariationOptionsBlockAttributes extends BlockAttributes {
- description: string;
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-items/variable-product-tour.tsx b/packages/js/product-editor/src/blocks/product-fields/variation-items/variable-product-tour.tsx
deleted file mode 100644
index 807345cce6b..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-items/variable-product-tour.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { TourKit, TourKitTypes } from '@woocommerce/components';
-import {
- experimentalProductVariationsStore,
- optionsStore,
- useUserPreferences,
-} from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { useSelect } from '@wordpress/data';
-import { useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { DEFAULT_VARIATION_PER_PAGE_OPTION } from '../../../constants';
-
-export const VariableProductTour = () => {
- const [ isTourOpen, setIsTourOpen ] = useState( false );
- const productId = useEntityId( 'postType', 'product' );
- const prevTotalCount = useRef< undefined | number >();
- const requestParams = useMemo(
- () => ( {
- product_id: productId,
- page: 1,
- per_page: DEFAULT_VARIATION_PER_PAGE_OPTION,
- order: 'asc' as const,
- orderby: 'menu_order' as const,
- } ),
- [ productId ]
- );
-
- const { totalCount } = useSelect(
- ( select ) => {
- const { getProductVariationsTotalCount } = select(
- experimentalProductVariationsStore
- );
- return {
- totalCount: getProductVariationsTotalCount( requestParams ),
- };
- },
- [ productId ]
- );
-
- const {
- updateUserPreferences,
- variable_product_block_tour_shown: hasShownTour,
- } = useUserPreferences();
-
- const config: TourKitTypes.WooConfig = {
- placement: 'top',
- steps: [
- {
- referenceElements: {
- desktop:
- '.wp-block-woocommerce-product-variation-items-field',
- },
- focusElement: {
- desktop:
- '.wp-block-woocommerce-product-variation-items-field',
- },
- meta: {
- name: 'product-variations-2',
- heading: __(
- '⚡️ This product now has variations',
- 'woocommerce'
- ),
- descriptions: {
- desktop: __(
- 'From now on, you’ll manage pricing, shipping, and inventory for each variation individually—just like any other product in your store.',
- 'woocommerce'
- ),
- },
- primaryButton: {
- text: __( 'Got it', 'woocommerce' ),
- },
- },
- },
- ],
- options: {
- classNames: [ 'variation-items-product-tour' ],
- // WooTourKit does not handle merging of default options properly,
- // so we need to duplicate the effects options here.
- effects: {
- arrowIndicator: true,
- spotlight: {
- interactivity: {
- enabled: true,
- },
- },
- },
- callbacks: {
- onStepViewOnce: () => {
- recordEvent( 'variable_product_block_tour_shown', {
- variable_count: totalCount,
- } );
- },
- },
- popperModifiers: [
- {
- name: 'offset',
- options: {
- // 24px for additional padding and 8px for arrow.
- offset: [ 0, 32 ],
- },
- },
- ],
- },
- closeHandler: () => {
- updateUserPreferences( {
- variable_product_block_tour_shown: 'yes',
- } );
- setIsTourOpen( false );
-
- recordEvent( 'variable_product_block_tour_dismissed' );
- },
- };
-
- useEffect( () => {
- const isFirstVariation =
- prevTotalCount.current !== totalCount &&
- totalCount > 0 &&
- prevTotalCount.current === 0;
- prevTotalCount.current = totalCount;
- if ( isFirstVariation && ! isTourOpen ) {
- setIsTourOpen( true );
- }
- }, [ totalCount ] );
-
- const { hasShownProductEditorTour } = useSelect( ( select ) => {
- const { getOption } = select( optionsStore );
- return {
- hasShownProductEditorTour:
- getOption( 'woocommerce_block_product_tour_shown' ) === 'yes',
- };
- }, [] );
-
- if (
- hasShownTour === 'yes' ||
- ! isTourOpen ||
- ! hasShownProductEditorTour
- ) {
- return null;
- }
-
- return <TourKit config={ config } />;
-};
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/block.json b/packages/js/product-editor/src/blocks/product-fields/variation-options/block.json
deleted file mode 100644
index fefe6f4f6db..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/block.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce/product-variations-options-field",
- "title": "Product variations options",
- "category": "woocommerce",
- "description": "The product variations options.",
- "keywords": [
- "products",
- "variations"
- ],
- "textdomain": "default",
- "attributes": {
- "description": {
- "type": "string",
- "role": "content"
- }
- },
- "supports": {
- "align": false,
- "html": false,
- "multiple": true,
- "reusable": false,
- "inserter": false,
- "lock": false,
- "__experimentalToolbar": false
- },
- "usesContext": [
- "postType",
- "isInSelectedTab"
- ],
- "editorStyle": "file:./editor.css"
-}
\ No newline at end of file
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/variation-options/edit.tsx
deleted file mode 100644
index c7e66ac91bf..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/edit.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { BlockAttributes } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
-import {
- createElement,
- createInterpolateElement,
- useEffect,
- useMemo,
-} from '@wordpress/element';
-import { useWooBlockProps } from '@woocommerce/block-templates';
-import {
- Product,
- ProductProductAttribute,
- useUserPreferences,
-} from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { Link } from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/settings';
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useProductAttributes } from '../../../hooks/use-product-attributes';
-import {
- AttributeControl,
- AttributeControlEmptyStateProps,
-} from '../../../components/attribute-control';
-import { useProductVariationsHelper } from '../../../hooks/use-product-variations-helper';
-import { ProductEditorBlockEditProps } from '../../../types';
-import { ProductTShirt } from './images';
-
-export function Edit( {
- attributes: blockAttributes,
- context: { postType, isInSelectedTab },
-}: ProductEditorBlockEditProps< BlockAttributes > ) {
- const blockProps = useWooBlockProps( blockAttributes );
- const { generateProductVariations } = useProductVariationsHelper();
- const {
- updateUserPreferences,
- local_attributes_notice_dismissed_ids: dismissedNoticesIds = [],
- } = useUserPreferences();
-
- const [ entityAttributes, setEntityAttributes ] = useEntityProp<
- ProductProductAttribute[]
- >( 'postType', 'product', 'attributes' );
-
- const [ entityDefaultAttributes, setEntityDefaultAttributes ] =
- useEntityProp< Product[ 'default_attributes' ] >(
- 'postType',
- 'product',
- 'default_attributes'
- );
-
- const productId = useEntityId( 'postType', postType );
-
- const { attributes, fetchAttributes, handleChange } = useProductAttributes(
- {
- allAttributes: entityAttributes,
- isVariationAttributes: true,
- productId,
- onChange( values, defaultAttributes ) {
- setEntityAttributes( values );
- setEntityDefaultAttributes( defaultAttributes );
- generateProductVariations( values, defaultAttributes );
- },
- }
- );
-
- useEffect( () => {
- if ( isInSelectedTab ) {
- fetchAttributes();
- }
- }, [ isInSelectedTab, entityAttributes ] );
-
- const localAttributeNames = attributes
- .filter( ( attr ) => attr.id === 0 )
- .map( ( attr ) => attr.name );
- let notice: string | React.ReactElement = '';
- if (
- localAttributeNames.length > 0 &&
- ! dismissedNoticesIds?.includes( productId )
- ) {
- notice = createInterpolateElement(
- __(
- 'Buyers can’t search or filter by <attributeNames /> to find the variations. Consider adding them again as <globalAttributeLink>global attributes</globalAttributeLink> to make them easier to discover.',
- 'woocommerce'
- ),
- {
- attributeNames: (
- <span>
- { localAttributeNames.length === 2
- ? localAttributeNames.join(
- __( ' and ', 'woocommerce' )
- )
- : localAttributeNames.join( ', ' ) }
- </span>
- ),
- globalAttributeLink: (
- <Link
- href={ getAdminLink(
- 'edit.php?post_type=product&page=product_attributes'
- ) }
- type="external"
- target="_blank"
- />
- ),
- }
- );
- }
-
- function mapDefaultAttributes() {
- return attributes.map( ( attribute ) => ( {
- ...attribute,
- isDefault: entityDefaultAttributes.some(
- ( defaultAttribute ) =>
- defaultAttribute.id === attribute.id ||
- defaultAttribute.name === attribute.name
- ),
- } ) );
- }
-
- function renderCustomEmptyState( {
- addAttribute,
- }: AttributeControlEmptyStateProps ) {
- return (
- <div className="wp-block-woocommerce-product-variations-options-field__empty-state">
- <div className="wp-block-woocommerce-product-variations-options-field__empty-state-image">
- <ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
- <ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
- <ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
- </div>
-
- <p className="wp-block-woocommerce-product-variations-options-field__empty-state-description">
- { __(
- 'Sell your product in multiple variations like size or color.',
- 'woocommerce'
- ) }
- </p>
-
- <div className="wp-block-woocommerce-product-variations-options-field__empty-state-actions">
- <Button variant="primary" onClick={ () => addAttribute() }>
- { __( 'Add options', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- );
- }
-
- return (
- <div { ...blockProps }>
- <AttributeControl
- value={ useMemo( mapDefaultAttributes, [
- attributes,
- entityDefaultAttributes,
- ] ) }
- onAdd={ () => {
- recordEvent( 'product_options_modal_add_button_click' );
- } }
- onChange={ handleChange }
- createNewAttributesAsGlobal={ true }
- useRemoveConfirmationModal={ true }
- onNoticeDismiss={ () =>
- updateUserPreferences( {
- local_attributes_notice_dismissed_ids: [
- ...dismissedNoticesIds,
- productId,
- ],
- } )
- }
- onAddAnother={ () => {
- recordEvent(
- 'product_add_options_modal_add_another_option_button_click'
- );
- } }
- onNewModalCancel={ () => {
- recordEvent( 'product_options_modal_cancel_button_click' );
- } }
- onNewModalOpen={ () => {
- recordEvent( 'product_options_add_option' );
- } }
- onRemoveItem={ () => {
- recordEvent(
- 'product_add_options_modal_remove_option_button_click'
- );
- } }
- onRemove={ () =>
- recordEvent(
- 'product_remove_option_confirmation_confirm_click'
- )
- }
- onRemoveCancel={ () =>
- recordEvent(
- 'product_remove_option_confirmation_cancel_click'
- )
- }
- renderCustomEmptyState={ renderCustomEmptyState }
- disabledAttributeIds={ entityAttributes
- .filter( ( attr ) => ! attr.variation )
- .map( ( attr ) => attr.id ) }
- termsAutoSelection="all"
- uiStrings={ {
- notice,
- globalAttributeHelperMessage: '',
- customAttributeHelperMessage: '',
- newAttributeModalNotice: '',
- newAttributeModalTitle: __(
- 'Add variation options',
- 'woocommerce'
- ),
- newAttributeModalDescription: __(
- 'Select from existing attributes or create new ones to add new variations for your product. You can change the order later.',
- 'woocommerce'
- ),
- attributeRemoveLabel: __(
- 'Remove variation option',
- 'woocommerce'
- ),
- attributeRemoveConfirmationModalMessage: __(
- 'If you continue, some variations of this product will be deleted and customers will no longer be able to purchase them.',
- 'woocommerce'
- ),
- } }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/editor.scss b/packages/js/product-editor/src/blocks/product-fields/variation-options/editor.scss
deleted file mode 100644
index ee754a446d8..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/editor.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.wp-block-woocommerce-product-variations-options-field {
- &__empty-state {
- border: 1px dashed $gray-400;
- border-radius: 2px;
- padding: $grid-unit-60 $grid-unit-20;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: $grid-unit-30;
-
- &-image {
- display: inline-flex;
- gap: $grid-unit-05;
-
- &-product {
- height: 66px;
- aspect-ratio: 1 / 1;
- color: $gray-100;
-
- &:first-child {
- height: $grid-unit-70;
- color: $gray-200;
- }
-
- &:last-child {
- height: 50px;
- color: $gray-300;
- }
- }
- }
-
- &-description {
- margin: 0;
- }
-
- &-actions {
- display: inline-flex;
- gap: 12px;
- }
- }
-
- .woocommerce-sortable {
- padding: 0;
- }
-
- .woocommerce-sortable__handle {
- display: none;
- }
-
- .components-button.has-icon {
- svg {
- fill: $gray-700;
- }
- }
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/images/ProductTShirt.tsx b/packages/js/product-editor/src/blocks/product-fields/variation-options/images/ProductTShirt.tsx
deleted file mode 100644
index 37220081ca4..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/images/ProductTShirt.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { createElement } from '@wordpress/element';
-
-export function ProductTShirt( props: React.SVGProps< SVGSVGElement > ) {
- const clipPathId = useInstanceId( ProductTShirt, 'clip-path' ) as string;
-
- return (
- <svg
- { ...props }
- viewBox="0 0 56 56"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true"
- focusable={ false }
- >
- <g clipPath={ `url(#${ clipPathId })` }>
- <path
- d="M18.7261 9.37008H26.8168V5.47626H28.4106C29.4938 5.47626 29.9499 4.92889 29.9499 3.91198C29.9499 2.89508 29.4938 2.34771 28.4106 2.34771C27.8689 2.34771 25.6325 2.32955 25.6325 2.32955V0L28.9263 0.0181591C31.2664 0.0181591 32.6244 1.59022 32.6244 3.91198C32.6244 6.23375 31.339 7.72539 29.1206 7.811V9.37008H37.2761C37.2761 9.37008 46.6289 13.7438 46.6289 14.0136H9.31112C9.31112 13.7438 18.7287 9.37008 18.7287 9.37008H18.7261Z"
- fill="#F0F0F0"
- />
- <path
- d="M0 21.0152C0 21.0152 9.19987 12.1613 10.6356 11.0484C11.8717 10.0912 13.3826 9.34668 16.3213 9.34668H18.7263C19.0943 14.2315 23.023 18.076 28.0013 18.076C32.9796 18.076 36.9083 14.2315 37.2763 9.34668H39.6812C42.62 9.34668 44.1309 10.0886 45.367 11.0484C46.8001 12.1613 56 21.0152 56 21.0152L52.8202 30.3541H44.3822L44.39 56.0025H11.6074L11.6152 30.3541H3.17719L-0.00259399 21.0152H0Z"
- fill="currentColor"
- />
- </g>
- <defs>
- <clipPath id={ clipPathId }>
- <rect
- width="56"
- height="56"
- fill="white"
- transform="matrix(-1 0 0 1 56 0)"
- />
- </clipPath>
- </defs>
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/images/index.ts b/packages/js/product-editor/src/blocks/product-fields/variation-options/images/index.ts
deleted file mode 100644
index 2002c05faec..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/images/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ProductTShirt';
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/index.ts b/packages/js/product-editor/src/blocks/product-fields/variation-options/index.ts
deleted file mode 100644
index f5e901e8288..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import blockConfiguration from './block.json';
-import { Edit } from './edit';
-import { registerProductEditorBlockType } from '../../../utils';
-
-const { name, ...metadata } = blockConfiguration;
-
-export { metadata, name };
-
-export const settings = {
- example: {},
- edit: Edit,
-};
-
-export function init() {
- return registerProductEditorBlockType( {
- name,
- metadata: metadata as never,
- settings: settings as never,
- } );
-}
diff --git a/packages/js/product-editor/src/blocks/product-fields/variation-options/types.ts b/packages/js/product-editor/src/blocks/product-fields/variation-options/types.ts
deleted file mode 100644
index 243a8fafc43..00000000000
--- a/packages/js/product-editor/src/blocks/product-fields/variation-options/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes } from '@wordpress/blocks';
-
-export interface VariationOptionsBlockAttributes extends BlockAttributes {
- description: string;
-}
diff --git a/packages/js/product-editor/src/blocks/style.scss b/packages/js/product-editor/src/blocks/style.scss
deleted file mode 100644
index 29502c134b0..00000000000
--- a/packages/js/product-editor/src/blocks/style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "product-fields/attributes/editor.scss";
-@import "product-fields/description/editor.scss";
-@import "product-fields/catalog-visibility/editor.scss";
-@import "product-fields/custom-fields-toggle/editor.scss";
-@import "product-fields/downloads/editor.scss";
-@import "product-fields/images/editor.scss";
-@import "product-fields/inventory-sku/editor.scss";
-@import "product-fields/name/editor.scss";
-@import "product-fields/notice-has-variations/editor.scss";
-@import "product-fields/notice-edit-single-variation/editor.scss";
-@import "generic/pricing/editor.scss";
-@import "product-fields/regular-price/editor.scss";
-@import "product-fields/sale-price/editor.scss";
-@import "product-fields/schedule-sale/editor.scss";
-@import "generic/section/editor.scss";
-@import "product-fields/shipping-dimensions/editor.scss";
-@import "product-fields/summary/editor.scss";
-@import "generic/tab/editor.scss";
-@import "product-fields/product-list/editor.scss";
-@import "product-fields/product-details-section-description/editor.scss";
-@import "product-fields/variation-items/editor.scss";
-@import "product-fields/variation-options/editor.scss";
-@import "generic/taxonomy/editor.scss";
-@import "generic/toggle/editor.scss";
-@import "generic/number/editor.scss";
-@import "generic/linked-product-list/editor.scss";
-@import "generic/text-area/editor.scss";
diff --git a/packages/js/product-editor/src/components/add-new-shipping-class-modal/add-new-shipping-class-modal.tsx b/packages/js/product-editor/src/components/add-new-shipping-class-modal/add-new-shipping-class-modal.tsx
deleted file mode 100644
index afc817a075b..00000000000
--- a/packages/js/product-editor/src/components/add-new-shipping-class-modal/add-new-shipping-class-modal.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-/**
- * External dependencies
- */
-import {
- useState,
- createElement,
- createInterpolateElement,
- useRef,
- useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Form, FormErrors, useFormContext } from '@woocommerce/components';
-import { ProductShippingClass } from '@woocommerce/data';
-import { addQueryArgs } from '@wordpress/url';
-import apiFetch from '@wordpress/api-fetch';
-import {
- Button,
- Modal,
- TextControl,
- __experimentalInputControl as InputControl,
- __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-} from '@wordpress/components';
-
-export type ShippingClassFormProps = {
- onAdd: () => Promise< void >;
- onCancel: () => void;
-};
-
-function ShippingClassForm( { onAdd, onCancel }: ShippingClassFormProps ) {
- const { errors, getInputProps, isValidForm } =
- useFormContext< ProductShippingClass >();
- const [ isLoading, setIsLoading ] = useState( false );
-
- function handleAdd() {
- setIsLoading( true );
- onAdd()
- .then( () => {
- setIsLoading( false );
- onCancel();
- } )
- .catch( () => {
- setIsLoading( false );
- } );
- }
-
- // State to control the automatic slug generation.
- const [ isRequestingSlug, setIsRequestingSlug ] = useState( false );
-
- // Get the shipping class name value.
- const shippingNameInputValue = String( getInputProps( 'name' ).value );
-
- const [ prevNameValue, setPrevNameValue ] = useState(
- shippingNameInputValue
- );
-
- // Get the reference of the name field
- const nameRef = useRef< HTMLInputElement | null >( null );
-
- // Focus in the name field when the component is mounted.
- useEffect( () => {
- nameRef.current?.focus();
- }, [] );
-
- /**
- * Pull the slug suggestion from the server,
- * and update the slug input field.
- */
- async function pullAndUpdateSlugInputField() {
- setIsRequestingSlug( true );
-
- // Avoid making the request if the name has not changed.
- if ( prevNameValue === shippingNameInputValue ) {
- return;
- }
-
- setIsRequestingSlug( true );
-
- setPrevNameValue( shippingNameInputValue );
-
- const url = `/wc/v3/products/shipping_classes/slug-suggestion`;
- const slug: string = await apiFetch( {
- path: addQueryArgs( url, { name: shippingNameInputValue } ),
- method: 'GET',
- } );
-
- setIsRequestingSlug( false );
-
- getInputProps( 'slug' ).onChange( slug );
- }
-
- const isGenerateButtonDisabled =
- isRequestingSlug ||
- ! shippingNameInputValue?.length ||
- prevNameValue === shippingNameInputValue;
-
- /**
- * Get a slug suggestion based on the shipping class name.
- * This function is called when the name field is blurred.
- */
- function getSlugSuggestion() {
- if ( ! isRequestingSlug ) {
- return;
- }
-
- pullAndUpdateSlugInputField();
- }
-
- return (
- <div className="woocommerce-add-new-shipping-class-modal__wrapper">
- <TextControl
- { ...getInputProps( 'name' ) }
- placeholder={ __( 'e.g. Fragile products', 'woocommerce' ) }
- label={ createInterpolateElement(
- __( 'Name <required />', 'woocommerce' ),
- {
- required: (
- <span className="woocommerce-add-new-shipping-class-modal__optional-input">
- { __( '(required)', 'woocommerce' ) }
- </span>
- ),
- }
- ) }
- onBlur={ getSlugSuggestion }
- ref={ nameRef }
- />
-
- <InputControl
- { ...getInputProps( 'slug' ) }
- label={ __( 'Slug', 'woocommerce' ) }
- onChange={ ( value ) => {
- setPrevNameValue( '' ); // clean the previous name value.
- getInputProps( 'slug' ).onChange( value ?? '' );
- } }
- disabled={ isRequestingSlug }
- help={ __(
- 'Set a custom slug or generate it by clicking the button.',
- 'woocommerce'
- ) }
- prefix={
- <InputControlPrefixWrapper>
- <Button
- disabled={ isGenerateButtonDisabled }
- variant="secondary"
- onClick={ pullAndUpdateSlugInputField }
- isBusy={ isRequestingSlug }
- isSmall
- >
- { __( 'Generate', 'woocommerce' ) }
- </Button>
- </InputControlPrefixWrapper>
- }
- />
-
- <TextControl
- { ...getInputProps( 'description' ) }
- label={ __( 'Description', 'woocommerce' ) }
- help={
- errors?.description ??
- __(
- 'Describe how you and other store administrators can use this shipping class.',
- 'woocommerce'
- )
- }
- />
-
- <div className="woocommerce-add-new-shipping-class-modal__buttons">
- <Button variant="secondary" onClick={ onCancel }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- variant="primary"
- isBusy={ isLoading }
- disabled={ ! isValidForm || isLoading }
- onClick={ handleAdd }
- >
- { __( 'Add', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- );
-}
-
-function validateForm(
- values: Partial< ProductShippingClass >
-): FormErrors< ProductShippingClass > {
- const errors: FormErrors< ProductShippingClass > = {};
-
- if ( ! values.name?.length ) {
- errors.name = __(
- 'The shipping class name is required.',
- 'woocommerce'
- );
- }
-
- return errors;
-}
-
-export type AddNewShippingClassModalProps = {
- shippingClass?: Partial< ProductShippingClass >;
- onAdd: (
- shippingClass: Partial< ProductShippingClass >
- ) => Promise< ProductShippingClass >;
- onCancel: () => void;
-};
-
-const INITIAL_VALUES = { name: '', slug: '', description: '' };
-
-export function AddNewShippingClassModal( {
- shippingClass,
- onAdd,
- onCancel,
-}: AddNewShippingClassModalProps ) {
- function handleSubmit( values: Partial< ProductShippingClass > ) {
- return onAdd(
- Object.entries( values ).reduce( function removeEmptyValue(
- current,
- [ name, value ]
- ) {
- return {
- ...current,
- [ name ]: value === '' ? undefined : value,
- };
- },
- {} )
- );
- }
-
- return (
- <Modal
- title={ __( 'New shipping class', 'woocommerce' ) }
- className="woocommerce-add-new-shipping-class-modal"
- onRequestClose={ onCancel }
- >
- <Form< Partial< ProductShippingClass > >
- initialValues={ shippingClass ?? INITIAL_VALUES }
- validate={ validateForm }
- errors={ {} }
- onSubmit={ handleSubmit }
- >
- { ( childrenProps ) => (
- <ShippingClassForm
- onAdd={ childrenProps.handleSubmit }
- onCancel={ onCancel }
- />
- ) }
- </Form>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/add-new-shipping-class-modal/index.ts b/packages/js/product-editor/src/components/add-new-shipping-class-modal/index.ts
deleted file mode 100644
index 3d143c44ae1..00000000000
--- a/packages/js/product-editor/src/components/add-new-shipping-class-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './add-new-shipping-class-modal';
diff --git a/packages/js/product-editor/src/components/add-new-shipping-class-modal/style.scss b/packages/js/product-editor/src/components/add-new-shipping-class-modal/style.scss
deleted file mode 100644
index ced0dcfaf0e..00000000000
--- a/packages/js/product-editor/src/components/add-new-shipping-class-modal/style.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.woocommerce-add-new-shipping-class-modal {
- min-width: 650px;
- &__optional-input {
- color: $gray-700;
- }
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
-
- .has-error {
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
-
- .components-input-control__container {
- min-height: 36px;
- }
-}
diff --git a/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx b/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx
deleted file mode 100644
index 90f0fdb2ffd..00000000000
--- a/packages/js/product-editor/src/components/add-products-modal/add-products-modal.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * External dependencies
- */
-import { FormEvent, useEffect } from 'react';
-import { Button, Modal, Spinner } from '@wordpress/components';
-import { resolveSelect } from '@wordpress/data';
-import {
- createElement,
- Fragment,
- useContext,
- useCallback,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import {
- __experimentalSelectControl as SelectControl,
- __experimentalSelectControlMenu as Menu,
- __experimentalSelectControlMenuItem as MenuItem,
- useAsyncFilter,
-} from '@woocommerce/components';
-import { CurrencyContext } from '@woocommerce/currency';
-import { productsStore, Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { AddProductsModalProps } from './types';
-
-export function getProductImageStyle( product: Product ) {
- // @ts-expect-error @woocommerce/data's Product type is missing the `images` field (see products/types.ts).
- return product.images.length > 0
- ? {
- // @ts-expect-error @woocommerce/data's Product type is missing the `images` field (see products/types.ts).
- backgroundImage: `url(${ product.images[ 0 ].src })`,
- }
- : undefined;
-}
-
-export function AddProductsModal( {
- initialValue,
- onSubmit,
- onClose,
-}: AddProductsModalProps ) {
- const [ products, setProducts ] = useState< Product[] >( [] );
- const [ selectedProducts, setSelectedProducts ] = useState< Product[] >(
- []
- );
-
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- onSubmit( [ ...selectedProducts ] );
- }
-
- function handleCancelClick() {
- onClose();
- }
-
- const filter = useCallback(
- async ( search = '' ) => {
- setProducts( [] );
-
- return resolveSelect( productsStore )
- .getProducts( {
- search,
- orderby: 'title',
- order: 'asc',
- exclude: [ ...initialValue, ...selectedProducts ].map(
- ( product ) => product.id
- ),
- } )
- .then( ( response: Product[] ) => {
- setProducts( response );
- return response;
- } );
- },
- [ selectedProducts ]
- );
-
- const { isFetching, ...selectProps } = useAsyncFilter< Product >( {
- filter,
- } );
-
- useEffect(
- function preloadProducts() {
- filter();
- },
- [ initialValue, selectedProducts ]
- );
-
- function handleSelect( value: Product ) {
- setSelectedProducts( ( current ) => [ ...current, value ] );
- }
-
- const { formatAmount } = useContext( CurrencyContext );
-
- function removeProductHandler( product: Product ) {
- return function handleRemoveClick() {
- setSelectedProducts( ( current ) =>
- current.filter( ( item ) => item.id !== product.id )
- );
- };
- }
-
- return (
- <Modal
- title={ __( 'Add products to this group', 'woocommerce' ) }
- className="woocommerce-add-products-modal"
- onRequestClose={ onClose }
- >
- <form
- noValidate
- onSubmit={ handleSubmit }
- className="woocommerce-add-products-modal__form"
- >
- <fieldset className="woocommerce-add-products-modal__form-group">
- <legend className="woocommerce-add-products-modal__form-group-title">
- { __(
- 'Add and manage products in this group to let customers purchase them all in one go.',
- 'woocommerce'
- ) }
- </legend>
-
- <div className="woocommerce-add-products-modal__form-group-content">
- <SelectControl< Product >
- { ...selectProps }
- items={ products }
- placeholder={ __(
- 'Search for products',
- 'woocommerce'
- ) }
- label=""
- selected={ null }
- onSelect={ handleSelect }
- __experimentalOpenMenuOnFocus
- >
- { ( {
- items,
- isOpen,
- highlightedIndex,
- getMenuProps,
- getItemProps,
- } ) => (
- <Menu
- isOpen={ isOpen }
- getMenuProps={ getMenuProps }
- className="woocommerce-add-products-modal__menu"
- >
- { isFetching ? (
- <div className="woocommerce-add-products-modal__menu-loading">
- <Spinner />
- </div>
- ) : (
- items.map( ( item, index ) => (
- <MenuItem< Product >
- key={ item.id }
- index={ index }
- isActive={
- highlightedIndex === index
- }
- item={ item }
- getItemProps={ (
- options
- ) => ( {
- ...getItemProps( options ),
- className:
- 'woocommerce-add-products-modal__menu-item',
- } ) }
- >
- <>
- <div
- className="woocommerce-add-products-modal__menu-item-image"
- style={ getProductImageStyle(
- item
- ) }
- />
- <div className="woocommerce-add-products-modal__menu-item-content">
- <div className="woocommerce-add-products-modal__menu-item-title">
- { item.name }
- </div>
-
- { Boolean(
- item.price
- ) && (
- <div className="woocommerce-add-products-modal__menu-item-description">
- { formatAmount(
- item.price
- ) }
- </div>
- ) }
- </div>
- </>
- </MenuItem>
- ) )
- ) }
- </Menu>
- ) }
- </SelectControl>
- </div>
-
- { Boolean( selectedProducts.length ) && (
- <ul className="woocommerce-add-products-modal__list">
- { selectedProducts.map( ( item ) => (
- <li
- key={ item.id }
- className="woocommerce-add-products-modal__list-item"
- >
- <div
- className="woocommerce-add-products-modal__list-item-image"
- style={ getProductImageStyle( item ) }
- />
- <div className="woocommerce-add-products-modal__list-item-content">
- <div className="woocommerce-add-products-modal__list-item-title">
- { item.name }
- </div>
-
- <div className="woocommerce-add-products-modal__list-item-description">
- { item.sku }
- </div>
- </div>
-
- <div className="woocommerce-add-products-modal__list-item-actions">
- <Button
- type="button"
- variant="tertiary"
- icon={ closeSmall }
- aria-label={ __(
- 'Remove product',
- 'woocommerce'
- ) }
- onClick={ removeProductHandler(
- item
- ) }
- />
- </div>
- </li>
- ) ) }
- </ul>
- ) }
- </fieldset>
-
- <div className="woocommerce-add-products-modal__actions">
- <Button
- variant="tertiary"
- type="button"
- onClick={ handleCancelClick }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button variant="primary" type="submit">
- { __( 'Add', 'woocommerce' ) }
- </Button>
- </div>
- </form>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/add-products-modal/index.ts b/packages/js/product-editor/src/components/add-products-modal/index.ts
deleted file mode 100644
index 0670224e58c..00000000000
--- a/packages/js/product-editor/src/components/add-products-modal/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './add-products-modal';
-export * from './reorder-products-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/add-products-modal/reorder-products-modal.tsx b/packages/js/product-editor/src/components/add-products-modal/reorder-products-modal.tsx
deleted file mode 100644
index 07329809bb2..00000000000
--- a/packages/js/product-editor/src/components/add-products-modal/reorder-products-modal.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * External dependencies
- */
-import { FormEvent } from 'react';
-import { Button, Modal } from '@wordpress/components';
-import { createElement, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { dragHandle } from '@wordpress/icons';
-import { Product } from '@woocommerce/data';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { ReorderProductsModalProps } from './types';
-import { useDraggable } from '../../hooks/use-draggable';
-import { getProductImageStyle } from './add-products-modal';
-
-export function ReorderProductsModal( {
- products,
- onSubmit,
- onClose,
-}: ReorderProductsModalProps ) {
- const [ selectedProducts, setSelectedProducts ] = useState< Product[] >( [
- ...products,
- ] );
-
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- onSubmit( [ ...selectedProducts ] );
- }
-
- function handleCancelClick() {
- onClose();
- }
-
- const { container, draggable, handler } = useDraggable( {
- onSort: setSelectedProducts,
- } );
-
- return (
- <Modal
- title={ __( 'Reorder products in this group', 'woocommerce' ) }
- className="woocommerce-reorder-products-modal"
- onRequestClose={ onClose }
- >
- <form
- noValidate
- onSubmit={ handleSubmit }
- className="woocommerce-add-products-modal__form"
- >
- <fieldset className="woocommerce-add-products-modal__form-group">
- <legend className="woocommerce-add-products-modal__form-group-title">
- { __(
- 'Click and drag to reorder on the product page.',
- 'woocommerce'
- ) }
- </legend>
-
- { Boolean( selectedProducts.length ) && (
- <ul
- { ...container }
- className={ clsx(
- 'woocommerce-add-products-modal__list',
- container.className
- ) }
- >
- { selectedProducts.map( ( item ) => (
- <li
- { ...draggable }
- key={ item.id }
- className="woocommerce-add-products-modal__list-item"
- >
- <Button
- { ...handler }
- icon={ dragHandle }
- variant="tertiary"
- type="button"
- aria-label={ __(
- 'Sortable handler',
- 'woocommerce'
- ) }
- />
- <div
- className="woocommerce-add-products-modal__list-item-image"
- style={ getProductImageStyle( item ) }
- />
- <div className="woocommerce-add-products-modal__list-item-content">
- <div className="woocommerce-add-products-modal__list-item-title">
- { item.name }
- </div>
-
- <div className="woocommerce-add-products-modal__list-item-description">
- { item.sku }
- </div>
- </div>
- </li>
- ) ) }
- </ul>
- ) }
- </fieldset>
-
- <div className="woocommerce-add-products-modal__actions">
- <Button
- variant="tertiary"
- type="button"
- onClick={ handleCancelClick }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button variant="primary" type="submit">
- { __( 'Done', 'woocommerce' ) }
- </Button>
- </div>
- </form>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/add-products-modal/style.scss b/packages/js/product-editor/src/components/add-products-modal/style.scss
deleted file mode 100644
index 048ffbe09d7..00000000000
--- a/packages/js/product-editor/src/components/add-products-modal/style.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-.components-modal__frame.woocommerce-add-products-modal,
-.components-modal__frame.woocommerce-reorder-products-modal {
- @include breakpoint(">600px") {
- width: calc(100% - 32px);
- }
-
- @include breakpoint(">782px") {
- width: 640px;
-
- .components-input-control__container {
- width: 50%;
- }
- }
-}
-.woocommerce-add-products-modal,
-.woocommerce-reorder-products-modal {
- &__input-suffix {
- margin-right: $grid-unit-15;
- }
-
- &__form {
- &-group {
- &-title {
- padding: 0;
- width: 100%;
- margin-bottom: $grid-unit-40;
- }
-
- &-content {
- display: flex;
- flex-direction: column;
- gap: $grid-unit + $grid-unit-05;
-
- .components-base-control {
- .components-input-control__container {
- .components-input-control__input {
- min-height: 36px;
- }
- }
- }
-
- .components-base-control.has-error {
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
- }
- }
- }
-
- &__actions {
- margin-top: $grid-unit-30;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
-
- &__menu {
- &-loading {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: $grid-unit;
- height: $grid-unit-60 + 2px;
- }
-
- &-item {
- display: flex;
- align-items: center;
- padding: $grid-unit;
- gap: $grid-unit + $grid-unit-05;
-
- &-image {
- width: $grid-unit-40;
- height: $grid-unit-40;
- border-radius: $grid-unit-05;
- background-color: $gray-200;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- flex-shrink: 0;
- }
-
- &-content {
- display: flex;
- flex-direction: column;
- gap: 2px;
- }
-
- &-title {
- color: $gray-900;
- }
-
- &-description {
- color: $gray-700;
- font-size: 11px;
- }
- }
- }
-
- &__list {
- &-item {
- display: flex;
- align-items: center;
- padding: $grid-unit-20 0;
- gap: $grid-unit + $grid-unit-05;
- margin: 0;
-
- &:not(:last-child) {
- border-bottom: 1px solid $gray-100;
- }
-
- &-image {
- width: $grid-unit-40;
- height: $grid-unit-40;
- border-radius: $grid-unit-05;
- background-color: $gray-200;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- flex-shrink: 0;
- }
-
- &-content {
- display: flex;
- flex-direction: column;
- gap: 2px;
- flex: 1 1 auto;
- }
-
- &-title {
- color: $gray-900;
- }
-
- &-description {
- color: $gray-700;
- font-size: 11px;
- }
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/add-products-modal/types.ts b/packages/js/product-editor/src/components/add-products-modal/types.ts
deleted file mode 100644
index 77bb8c25d1c..00000000000
--- a/packages/js/product-editor/src/components/add-products-modal/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import type { Product } from '@woocommerce/data';
-
-export type AddProductsModalProps = {
- initialValue: Product[];
- onSubmit( value: Product[] ): void;
- onClose(): void;
-};
-
-export type ReorderProductsModalProps = {
- products: Product[];
- onSubmit( value: Product[] ): void;
- onClose(): void;
-};
diff --git a/packages/js/product-editor/src/components/advice-card/advice-card.tsx b/packages/js/product-editor/src/components/advice-card/advice-card.tsx
deleted file mode 100644
index 7e537de4001..00000000000
--- a/packages/js/product-editor/src/components/advice-card/advice-card.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { close } from '@wordpress/icons';
-import { useUserPreferences } from '@woocommerce/data';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { AdviceCardProps } from './types';
-
-export function AdviceCard( {
- tip,
- isDismissible = true,
- dismissPreferenceId,
- className,
- children,
- onDismiss,
- ...props
-}: AdviceCardProps ) {
- const [ isDismissed, setIsDismissed ] = useState( false );
- const { updateUserPreferences, product_advice_card_dismissed } =
- useUserPreferences();
-
- function handleDismissButtonClick() {
- if ( dismissPreferenceId ) {
- updateUserPreferences( {
- product_advice_card_dismissed: {
- ...product_advice_card_dismissed,
- [ dismissPreferenceId ]: 'yes',
- },
- } );
- } else {
- setIsDismissed( ( current ) => ! current );
- }
-
- if ( onDismiss ) {
- onDismiss();
- }
- }
-
- // Check if the advice card has been dismissed.
- if ( isDismissible ) {
- if (
- dismissPreferenceId &&
- product_advice_card_dismissed &&
- product_advice_card_dismissed?.[ dismissPreferenceId ] === 'yes'
- ) {
- return null;
- }
-
- if ( isDismissed ) {
- return null;
- }
- }
-
- return (
- <div
- role="group"
- { ...props }
- className={ clsx( className, 'woocommerce-advice-card', {
- 'is-dismissible': isDismissible,
- } ) }
- >
- { isDismissible && (
- <div className="woocommerce-advice-card__header">
- <Button
- className="woocommerce-advice-card__dismiss-button"
- onClick={ handleDismissButtonClick }
- icon={ close }
- label={ __( 'Dismiss', 'woocommerce' ) }
- isSmall={ true }
- />
- </div>
- ) }
- <div className="woocommerce-advice-card__body">{ children }</div>
- { tip && tip.length > 0 && (
- <div className="woocommerce-advice-card__footer">{ tip }</div>
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/advice-card/index.tsx b/packages/js/product-editor/src/components/advice-card/index.tsx
deleted file mode 100644
index b394a26c31d..00000000000
--- a/packages/js/product-editor/src/components/advice-card/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './advice-card';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/advice-card/stories/advice-card.story.tsx b/packages/js/product-editor/src/components/advice-card/stories/advice-card.story.tsx
deleted file mode 100644
index 5ac19e09ba2..00000000000
--- a/packages/js/product-editor/src/components/advice-card/stories/advice-card.story.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Flex } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { AdviceCard, AdviceCardProps } from '..';
-import { ShoppingBags } from '../../../images/shopping-bags';
-import { Shirt } from '../../../images/shirt';
-import { Pants } from '../../../images/pants';
-import { Glasses } from '../../../images/glasses';
-
-export default {
- title: 'Product Editor/components/AdviceCard',
- component: AdviceCard,
-};
-
-export const Default = ( args: AdviceCardProps ) => <AdviceCard { ...args } />;
-
-Default.args = {
- // @todo: use an addon
- onDismiss: console.log, // eslint-disable-line no-console
-
- tip: __(
- 'Tip: Upsells are typically products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
- 'woocommerce'
- ),
- children: <ShoppingBags />,
- isDismissible: true,
-};
-
-export const MultipleChildren = ( args: AdviceCardProps ) => (
- <AdviceCard { ...args } />
-);
-
-MultipleChildren.args = {
- tip: __(
- 'Tip: Group together items that have a clear relationship or compliment each other well, e.g., garment bundles, camera kits, or skincare product sets.',
- 'woocommerce'
- ),
-
- children: (
- <Flex justify="center" style={ { gap: '16px ' } }>
- <Shirt />
- <Pants />
- <Glasses />
- </Flex>
- ),
- isDismissible: false,
- onDismiss: console.log, // eslint-disable-line no-console
-};
diff --git a/packages/js/product-editor/src/components/advice-card/style.scss b/packages/js/product-editor/src/components/advice-card/style.scss
deleted file mode 100644
index 09a635256d6..00000000000
--- a/packages/js/product-editor/src/components/advice-card/style.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-$card-border-color: $gray-400;
-$card-border-width: 2px;
-
-.woocommerce-advice-card {
- background-image: url( "data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23" + str-slice( '#{ $card-border-color }', 2 ) + "' stroke-width='#{ $card-border-width }' stroke-dasharray='4 4' stroke-dashoffset='46' stroke-linecap='butt'/%3e%3c/svg%3e" );
- background-color: $white;
- border-radius: 4px;
- padding: calc( 2 * $gap );
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: $gap;
-
- &__header {
- display: flex;
- justify-content: right;
- }
-
- &__body {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- &__footer {
- text-align: center;
- font-weight: 400;
- color: $gray-700;
- }
-
- &.is-dismissible {
- padding: $gap;
- }
-
- .woocommerce-advice-card__dismiss-button {
- color: $gray-700;
- &.is-small.has-icon:not(.has-text) {
- padding: 0;
- min-width: 24px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/advice-card/types.ts b/packages/js/product-editor/src/components/advice-card/types.ts
deleted file mode 100644
index b5151318e42..00000000000
--- a/packages/js/product-editor/src/components/advice-card/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type AdviceCardProps = React.DetailedHTMLProps<
- React.HTMLAttributes< HTMLDivElement >,
- HTMLDivElement
-> & {
- tip?: string;
- isDismissible?: boolean;
- dismissPreferenceId?: string;
- onDismiss?: () => void;
-};
diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/index.tsx b/packages/js/product-editor/src/components/attribute-combobox-field/index.tsx
deleted file mode 100644
index 26ccf3bb1f9..00000000000
--- a/packages/js/product-editor/src/components/attribute-combobox-field/index.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
- BaseControl,
- ComboboxControl as CoreComboboxControl,
- Spinner,
-} from '@wordpress/components';
-import {
- createElement,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from '@wordpress/element';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import type {
- AttributesComboboxControlItem,
- AttributesComboboxControlComponent,
- ComboboxControlOption,
-} from './types';
-
-/*
- * Create an interface that includes
- * the `__experimentalRenderItem` property.
- */
-interface ComboboxControlProps
- extends Omit<
- React.ComponentProps< typeof CoreComboboxControl >,
- 'label' | 'help'
- > {
- __experimentalRenderItem?: ( args: {
- item: ComboboxControlOption;
- } ) => string | JSX.Element;
- className?: string;
-}
-/*
- * Create an alias for the ComboboxControl core component,
- * but with the custom ComboboxControlProps interface.
- */
-const ComboboxControl =
- CoreComboboxControl as React.ComponentType< ComboboxControlProps >;
-
-type ComboboxControlOptionProps = {
- item: ComboboxControlOption;
-};
-
-/**
- * Map the product attribute item to the Combobox core option.
- *
- * @param {AttributesComboboxControlItem} attr - Product attribute item.
- * @return {ComboboxControlOption} Combobox option.
- */
-function mapItemToOption(
- attr: AttributesComboboxControlItem
-): ComboboxControlOption {
- return {
- label: attr.name,
- value: `attr-${ attr.id }`,
- disabled: !! attr.isDisabled,
- };
-}
-
-const createNewAttributeOptionDefault: ComboboxControlOption = {
- label: '',
- value: '',
- state: 'draft',
-};
-
-/**
- * ComboboxControlOption component.
- *
- * @param {ComboboxControlOptionProps} props - props.
- * @return {JSX.Element} Component item.
- */
-function ComboboxControlOption(
- props: ComboboxControlOptionProps
-): JSX.Element {
- const { item } = props;
- if ( item.disabled ) {
- return <div className="item-wrapper is-disabled">{ item.label }</div>;
- }
-
- return <div className="item-wrapper">{ item.label }</div>;
-}
-
-const AttributesComboboxControl = ( {
- label,
- help,
- current = null,
- items = [],
- instanceNumber = 0,
- isLoading = false,
- onAddNew,
- onChange,
-}: AttributesComboboxControlComponent ) => {
- const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
- useState< ComboboxControlOption >( createNewAttributeOptionDefault );
-
- /**
- * Map the items to the Combobox options.
- * Each option is an object with a label and value.
- * Both are strings.
- */
- const attributeOptions: ComboboxControlOption[] =
- items?.map( mapItemToOption );
-
- const options = useMemo( () => {
- if ( ! createNewAttributeOption.label.length ) {
- return attributeOptions;
- }
-
- return [
- ...attributeOptions,
- {
- label:
- createNewAttributeOption.state === 'draft'
- ? sprintf(
- /* translators: The name of the new attribute term to be created */
- __( 'Create "%s"', 'woocommerce' ),
- createNewAttributeOption.label
- )
- : createNewAttributeOption.label,
- value: createNewAttributeOption.value,
- },
- ];
- }, [ attributeOptions, createNewAttributeOption ] );
-
- // Get current of the selected item.
- let currentValue = current ? `attr-${ current.id }` : '';
- if ( createNewAttributeOption.state === 'creating' ) {
- currentValue = 'create-attribute';
- }
-
- const comboRef = useRef< HTMLDivElement | null >( null );
-
- // Label to link the input with the label.
- const [ labelFor, setLabelFor ] = useState< string >( '' );
-
- useEffect( () => {
- if ( ! comboRef?.current ) {
- return;
- }
-
- /*
- * Hack to set the base control ID,
- * to link the label with the input,
- * picking the input ID from the ComboboxControl.
- */
- const inputElement = comboRef.current.querySelector(
- 'input.components-combobox-control__input'
- );
-
- const id = inputElement?.getAttribute( 'id' );
- if ( inputElement && typeof id === 'string' ) {
- setLabelFor( id );
- }
-
- /*
- * Hack to handle AttributesComboboxControl instances z index,
- * avoiding to overlap the dropdown instances list.
- * Todo: this is a temporary/not-ideal solution.
- * It should be handled by the core ComboboxControl component.
- */
- const listContainerElement = comboRef.current.querySelector(
- '.components-combobox-control__suggestions-container'
- ) as HTMLElement;
- const style = { zIndex: 1000 - instanceNumber };
-
- if ( listContainerElement ) {
- Object.assign( listContainerElement.style, style );
- }
- }, [ instanceNumber ] );
-
- if ( ! help ) {
- help = (
- <div className="woocommerce-attributes-combobox-help">
- { __(
- 'Select an attribute or type to create.',
- 'woocommerce'
- ) }
- </div>
- );
-
- if ( isLoading ) {
- help = (
- <div className="woocommerce-attributes-combobox-help">
- <Spinner />
- { __( 'Loading…', 'woocommerce' ) }
- </div>
- );
- } else if ( ! items.length ) {
- help = (
- <div className="woocommerce-attributes-combobox-help">
- { __(
- 'No attributes yet. Type to create.',
- 'woocommerce'
- ) }
- </div>
- );
- }
- }
-
- return (
- <div
- className={ clsx( 'woocommerce-attributes-combobox-container', {
- 'no-items': ! options.length,
- } ) }
- ref={ comboRef }
- >
- <BaseControl label={ label } help={ help } id={ labelFor }>
- <ComboboxControl
- className="woocommerce-attributes-combobox"
- allowReset={ false }
- options={ options }
- value={ currentValue }
- onChange={ ( newValue ) => {
- if ( ! newValue ) {
- return;
- }
-
- if ( newValue === 'create-attribute' ) {
- updateCreateNewAttributeOption( {
- ...createNewAttributeOption,
- state: 'creating',
- } );
-
- return onAddNew?.( createNewAttributeOption.label );
- }
-
- const selectedAttribute = items?.find(
- ( item ) =>
- item.id ===
- Number( newValue.replace( 'attr-', '' ) )
- );
-
- /*
- * Do not select when it is disabled.
- * `disabled` item option should be
- * handled by the core ComboboxControl component.
- */
- if (
- ! selectedAttribute ||
- selectedAttribute.isDisabled
- ) {
- return;
- }
-
- onChange( selectedAttribute );
- } }
- onFilterValueChange={ ( filterValue: string ) => {
- updateCreateNewAttributeOption( {
- label: filterValue,
- value: 'create-attribute',
- state: 'draft',
- } );
- } }
- __experimentalRenderItem={ ComboboxControlOption }
- />
- </BaseControl>
- </div>
- );
-};
-
-export default AttributesComboboxControl;
diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx b/packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx
deleted file mode 100644
index e0cea9f5b11..00000000000
--- a/packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from 'react';
-import type { ProductAttribute } from '@woocommerce/data';
-import '@wordpress/interface/src/style.scss';
-
-/**
- * Internal dependencies
- */
-import AttributesComboboxControl from '../';
-import type {
- AttributesComboboxControlComponent,
- AttributesComboboxControlItem,
-} from '../types';
-
-export default {
- title: 'Product Editor/components/AttributesComboboxControl',
- component: AttributesComboboxControl,
-};
-
-const items: AttributesComboboxControlItem[] = [
- {
- id: 1,
- name: 'Color',
- },
- {
- id: 2,
- name: 'Size',
- },
- {
- id: 3,
- name: 'Material',
- isDisabled: true,
- },
- {
- id: 4,
- name: 'Style',
- },
- {
- id: 5,
- name: 'Brand',
- },
- {
- id: 6,
- name: 'Pattern',
- },
- {
- id: 7,
- name: 'Theme',
- isDisabled: true,
- },
- {
- id: 8,
- name: 'Collection',
- isDisabled: true,
- },
- {
- id: 9,
- name: 'Occasion',
- },
- {
- id: 10,
- name: 'Season',
- },
-];
-
-export const Default = ( args: AttributesComboboxControlComponent ) => {
- const [ selectedAttribute, setSelectedAttribute ] =
- useState< AttributesComboboxControlItem | null >( null );
-
- function selectAttribute( item: AttributesComboboxControlItem ) {
- if ( typeof item === 'string' ) {
- return;
- }
-
- setSelectedAttribute( item );
- args.onChange( item );
- }
-
- return (
- <AttributesComboboxControl
- { ...args }
- label={ __( 'Attributes', 'woocommerce' ) }
- items={ items }
- help={ __(
- 'Select or create attributes for this product.',
- 'woocommerce'
- ) }
- onChange={ selectAttribute }
- current={ selectedAttribute }
- />
- );
-};
-
-Default.args = {
- onChange: ( newValue: ProductAttribute ) => {
- console.log( '(onChange) newValue:', newValue ); // eslint-disable-line no-console
- },
-};
-
-export const MultipleInstances = (
- args: AttributesComboboxControlComponent
-) => {
- return (
- <>
- <AttributesComboboxControl
- { ...args }
- label={ __( 'Attributes 1', 'woocommerce' ) }
- items={ items }
- instanceNumber={ 1 }
- />
-
- <AttributesComboboxControl
- { ...args }
- label={ __( 'Attributes 2', 'woocommerce' ) }
- items={ items }
- instanceNumber={ 2 }
- />
- </>
- );
-};
-
-MultipleInstances.args = Default.args;
diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/styles.scss b/packages/js/product-editor/src/components/attribute-combobox-field/styles.scss
deleted file mode 100644
index 4e2519e30d3..00000000000
--- a/packages/js/product-editor/src/components/attribute-combobox-field/styles.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.woocommerce-attributes-combobox {
- position: relative;
- background-color: white;
-
- .components-base-control__field {
- height: 36px;
- }
-
- .components-combobox-control__suggestions-container {
- position: absolute;
- padding: 0;
- background-color: white;
-
- > .components-flex {
- height: 34px;
- }
- }
-
- .components-form-token-field__suggestion {
- padding: 0;
- min-height: 32px;
- display: flex;
- align-items: center;
-
- .item-wrapper {
- padding: 0 12px;
- height: 36px;
- line-height: 36px;
- width: 100%;
-
- &.is-disabled {
- background-color: #fafafa;
- color: #949494;
- cursor: default;
- }
- }
-
- &.is-selected .item-wrapper .is-disabled {
- background-color: #fafafa;
- }
- }
-}
-
-.woocommerce-attributes-combobox-help {
- display: flex;
- align-items: center;
-
- > svg {
- fill: #949494;
- }
-
- .components-spinner {
- margin: 0 4px 0 0;
- padding: 2px;
- width: 18px;
- height: 18px;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-combobox-field/types.ts b/packages/js/product-editor/src/components/attribute-combobox-field/types.ts
deleted file mode 100644
index ade9ee963c2..00000000000
--- a/packages/js/product-editor/src/components/attribute-combobox-field/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import type { ProductAttribute } from '@woocommerce/data';
-
-/*
- * Define the attributes combobox control item type,
- * which is a combination of the product attribute and
- * additional properties.
- */
-export type AttributesComboboxControlItem = Pick<
- ProductAttribute,
- 'id' | 'name'
-> & {
- isDisabled?: boolean;
- takenBy?: number;
-};
-
-export type AttributesComboboxControlComponent = {
- label?: string;
- help?: JSX.Element | string | null;
- isLoading: boolean;
- placeholder?: string;
- disabled?: boolean;
- instanceNumber?: number;
-
- current: AttributesComboboxControlItem | null;
- items: AttributesComboboxControlItem[];
-
- disabledAttributeMessage?: string;
- createNewAttributesAsGlobal?: boolean;
-
- onAddNew?: ( value: string ) => void;
- onChange: ( value: AttributesComboboxControlItem ) => void;
-};
-
-export type ComboboxControlOption = {
- label: string;
- value: string;
- state?: 'draft' | 'creating' | 'justCreated';
- disabled?: boolean;
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/attribute-control.tsx b/packages/js/product-editor/src/components/attribute-control/attribute-control.tsx
deleted file mode 100644
index f87f4740509..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/attribute-control.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
- useState,
- createElement,
- Fragment,
- createInterpolateElement,
-} from '@wordpress/element';
-import { Button, Notice } from '@wordpress/components';
-import { ProductProductAttribute } from '@woocommerce/data';
-import {
- Sortable,
- __experimentalSelectControlMenuSlot as SelectControlMenuSlot,
- Link,
-} from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/settings';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { EditAttributeModal } from './edit-attribute-modal';
-import { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-import {
- getAttributeId,
- getAttributeKey,
- reorderSortableProductAttributePositions,
-} from './utils';
-import { AttributeListItem } from '../attribute-list-item';
-import { NewAttributeModal } from './new-attribute-modal';
-import { RemoveConfirmationModal } from '../remove-confirmation-modal';
-import { TRACKS_SOURCE } from '../../constants';
-import { EmptyState } from '../empty-state';
-import { SectionActions } from '../block-slot-fill';
-import { AttributeControlProps } from './types';
-import { getEmptyStateSequentialNames } from '../../utils';
-
-export const AttributeControl = ( {
- value,
- onAdd = () => {},
- onAddAnother = () => {},
- onRemoveItem = () => {},
- onChange,
- onEdit = () => {},
- onNewModalCancel = () => {},
- onNewModalClose = () => {},
- onNewModalOpen = () => {},
- onEditModalCancel = () => {},
- onEditModalClose = () => {},
- onEditModalOpen = () => {},
- onRemove = () => {},
- onRemoveCancel = () => {},
- onNoticeDismiss = () => {},
- renderCustomEmptyState,
- uiStrings,
- createNewAttributesAsGlobal = false,
- useRemoveConfirmationModal = false,
- disabledAttributeIds = [],
- termsAutoSelection,
- defaultVisibility = false,
-}: AttributeControlProps ) => {
- uiStrings = {
- newAttributeListItemLabel: __( 'Add new', 'woocommerce' ),
- globalAttributeHelperMessage: __(
- `You can change the attribute's name in <link>Attributes</link>.`,
- 'woocommerce'
- ),
- attributeRemoveConfirmationMessage: __(
- 'Remove this attribute?',
- 'woocommerce'
- ),
- ...uiStrings,
- };
- const [ isNewModalVisible, setIsNewModalVisible ] = useState( false );
- const [ defaultAttributeSearch, setDefaultAttributeSearch ] =
- useState< string >();
- const [ removingAttribute, setRemovingAttribute ] =
- useState< null | ProductProductAttribute >();
- const [ currentAttributeId, setCurrentAttributeId ] = useState<
- null | string
- >( null );
-
- const handleChange = ( newAttributes: EnhancedProductAttribute[] ) => {
- onChange(
- newAttributes.map( ( attr ) => {
- return {
- ...attr,
- options: attr.terms
- ? attr.terms.map( ( term ) => term.name )
- : ( attr.options as string[] ),
- terms: undefined,
- visible: attr.visible || false,
- };
- } )
- );
- };
-
- const handleRemove = ( attribute: ProductProductAttribute ) => {
- handleChange(
- value.filter(
- ( attr ) =>
- getAttributeId( attr ) !== getAttributeId( attribute )
- )
- );
- onRemove( attribute );
- setRemovingAttribute( null );
- };
-
- const showRemoveConfirmation = ( attribute: ProductProductAttribute ) => {
- if ( useRemoveConfirmationModal ) {
- setRemovingAttribute( attribute );
- return;
- }
- // eslint-disable-next-line no-alert
- if ( window.confirm( uiStrings?.attributeRemoveConfirmationMessage ) ) {
- handleRemove( attribute );
- return;
- }
- onRemoveCancel( attribute );
- };
-
- const openNewModal = () => {
- setIsNewModalVisible( true );
- onNewModalOpen();
- };
-
- const closeNewModal = () => {
- setIsNewModalVisible( false );
- setDefaultAttributeSearch( undefined );
- onNewModalClose();
- };
-
- const openEditModal = ( attribute: ProductProductAttribute ) => {
- recordEvent( 'product_options_edit', {
- source: TRACKS_SOURCE,
- attribute: attribute.name,
- } );
- setCurrentAttributeId( getAttributeId( attribute ) );
- onEditModalOpen( attribute );
- };
-
- const closeEditModal = ( attribute: ProductProductAttribute ) => {
- setCurrentAttributeId( null );
- onEditModalClose( attribute );
- };
-
- const handleAdd = ( newAttributes: EnhancedProductAttribute[] ) => {
- const addedAttributesOnly = newAttributes.filter(
- ( newAttr ) =>
- ! value.some(
- ( current: ProductProductAttribute ) =>
- getAttributeId( newAttr ) === getAttributeId( current )
- )
- );
- handleChange( [ ...value, ...addedAttributesOnly ] );
- onAdd( newAttributes );
- closeNewModal();
- };
-
- const handleEdit = ( updatedAttribute: EnhancedProductAttribute ) => {
- recordEvent( 'product_options_update', {
- source: TRACKS_SOURCE,
- attribute: updatedAttribute.name,
- values: updatedAttribute.terms?.map( ( term ) => term.name ),
- default: updatedAttribute.isDefault,
- visible: updatedAttribute.visible,
- filter: true, // default true until attribute filter gets implemented
- } );
-
- const updatedAttributes = value.map( ( attr ) => {
- if (
- getAttributeId( attr ) === getAttributeId( updatedAttribute )
- ) {
- return updatedAttribute;
- }
-
- return attr;
- } );
-
- onEdit( updatedAttribute );
- handleChange( updatedAttributes );
- closeEditModal( updatedAttribute );
- };
-
- const sortedAttributes = value.sort( ( a, b ) => a.position - b.position );
-
- const attributeKeyValues = value.reduce(
- (
- keyValue: Record< number | string, ProductProductAttribute >,
- attribute: ProductProductAttribute
- ) => {
- keyValue[ getAttributeKey( attribute ) ] = attribute;
- return keyValue;
- },
- {} as Record< number | string, ProductProductAttribute >
- );
-
- const currentAttribute = value.find(
- ( attr ) => getAttributeId( attr ) === currentAttributeId
- );
-
- function renderEmptyState() {
- if ( value.length ) return null;
-
- if ( renderCustomEmptyState ) {
- return renderCustomEmptyState( {
- addAttribute( search ) {
- setDefaultAttributeSearch( search );
- openNewModal();
- },
- } );
- }
-
- return (
- <EmptyState
- names={ getEmptyStateSequentialNames(
- __( 'Attribute', 'woocommerce' ),
- 3
- ) }
- />
- );
- }
-
- function renderSectionActions() {
- if ( renderCustomEmptyState && value.length === 0 ) return null;
-
- return (
- <SectionActions>
- { uiStrings?.newAttributeListItemLabel && (
- <Button
- variant="secondary"
- className="woocommerce-add-attribute-list-item__add-button"
- onClick={ openNewModal }
- >
- { uiStrings.newAttributeListItemLabel }
- </Button>
- ) }
- </SectionActions>
- );
- }
-
- return (
- <div className="woocommerce-attribute-field">
- { renderSectionActions() }
-
- { uiStrings.notice && (
- <Notice
- isDismissible={ true }
- status="warning"
- className="woocommerce-attribute-field__notice"
- onRemove={ onNoticeDismiss }
- >
- <p>{ uiStrings.notice }</p>
- </Notice>
- ) }
- { Boolean( value.length ) && (
- <Sortable
- onOrderChange={ ( items ) => {
- const itemPositions = items.reduce(
- ( positions, { props }, index ) => {
- positions[
- getAttributeKey( props.attribute )
- ] = index;
- return positions;
- },
- {} as Record< number | string, number >
- );
- onChange(
- reorderSortableProductAttributePositions(
- itemPositions,
- attributeKeyValues
- )
- );
- } }
- >
- { sortedAttributes.map( ( attr ) => (
- <AttributeListItem
- attribute={ attr }
- removeLabel={ uiStrings?.attributeRemoveLabel }
- key={ getAttributeId( attr ) }
- onEditClick={ () => openEditModal( attr ) }
- onRemoveClick={ () =>
- showRemoveConfirmation( attr )
- }
- />
- ) ) }
- </Sortable>
- ) }
-
- { isNewModalVisible && (
- <NewAttributeModal
- title={ uiStrings.newAttributeModalTitle }
- description={ uiStrings.newAttributeModalDescription }
- onCancel={ () => {
- closeNewModal();
- onNewModalCancel();
- } }
- onAdd={ handleAdd }
- onAddAnother={ onAddAnother }
- onRemoveItem={ onRemoveItem }
- selectedAttributeIds={ value.map( ( attr ) => attr.id ) }
- createNewAttributesAsGlobal={ createNewAttributesAsGlobal }
- disabledAttributeIds={ disabledAttributeIds }
- disabledAttributeMessage={
- uiStrings.disabledAttributeMessage
- }
- termsAutoSelection={ termsAutoSelection }
- defaultVisibility={ defaultVisibility }
- defaultSearch={ defaultAttributeSearch }
- />
- ) }
- <SelectControlMenuSlot />
- { currentAttribute && (
- <EditAttributeModal
- title={ sprintf(
- /* translators: %s is the attribute name */
- __( 'Edit %s', 'woocommerce' ),
- currentAttribute.name
- ) }
- customAttributeHelperMessage={
- uiStrings.customAttributeHelperMessage
- }
- globalAttributeHelperMessage={
- uiStrings.globalAttributeHelperMessage
- ? createInterpolateElement(
- uiStrings.globalAttributeHelperMessage,
- {
- link: (
- <Link
- href={ getAdminLink(
- 'edit.php?post_type=product&page=product_attributes'
- ) }
- target="_blank"
- type="wp-admin"
- >
- <></>
- </Link>
- ),
- }
- )
- : undefined
- }
- onCancel={ () => {
- closeEditModal( currentAttribute );
- onEditModalCancel( currentAttribute );
- } }
- onEdit={ ( updatedAttribute ) => {
- handleEdit( updatedAttribute );
- } }
- attribute={ currentAttribute }
- attributes={ value }
- />
- ) }
- { removingAttribute && (
- <RemoveConfirmationModal
- title={ sprintf(
- /* translators: %s is the attribute name that is being removed */
- __( 'Delete %(attributeName)s', 'woocommerce' ),
- { attributeName: removingAttribute.name }
- ) }
- description={
- <p>
- {
- uiStrings.attributeRemoveConfirmationModalMessage
- }
- </p>
- }
- onRemove={ () => handleRemove( removingAttribute ) }
- onCancel={ () => {
- onRemoveCancel( removingAttribute );
- setRemovingAttribute( null );
- } }
- />
- ) }
- { renderEmptyState() }
- </div>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/attribute-field.scss b/packages/js/product-editor/src/components/attribute-control/attribute-field.scss
deleted file mode 100644
index 45986a6bbe1..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/attribute-field.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.woocommerce-attribute-field {
- width: 100%;
- font-size: 13px;
-
- .woocommerce-sortable {
- margin: 0;
- }
-
- .woocommerce-sortable__item:not(:first-child) {
- margin-top: -1px;
- }
- .woocommerce-sortable__item:focus-visible:not(:active) + .woocommerce-sortable__item .woocommerce-attribute-list-item {
- background: none;
- border-top: 0;
- }
-
- .woocommerce-add-attribute-list-item__add-button {
- margin-bottom: $gap;
- }
-
- &__notice.components-notice {
- margin: 0px;
- padding-right: $gap-small;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx b/packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx
deleted file mode 100644
index 8c93def0c76..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx
+++ /dev/null
@@ -1,507 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
- createElement,
- useEffect,
- useMemo,
- useState,
-} from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-import {
- Button,
- FormTokenField as CoreFormTokenField,
-} from '@wordpress/components';
-import {
- useSelect,
- useDispatch,
- select as sel,
- dispatch,
-} from '@wordpress/data';
-import { cleanForSlug } from '@wordpress/url';
-import {
- experimentalProductAttributeTermsStore,
- type ProductAttributeTerm,
-} from '@woocommerce/data';
-import type { MouseEventHandler } from 'react';
-
-/**
- * Internal dependencies
- */
-import AttributesComboboxControl from '../attribute-combobox-field';
-import type { AttributeTableRowProps } from './types';
-
-interface FormTokenFieldProps
- extends React.ComponentProps< typeof CoreFormTokenField > {
- __experimentalExpandOnFocus: boolean;
- __experimentalAutoSelectFirstMatch: boolean;
- __experimentalShowHowTo?: boolean;
- placeholder: string;
- label?: string;
-}
-const FormTokenField =
- CoreFormTokenField as React.ComponentType< FormTokenFieldProps >;
-
-/*
- * Type copied from core FormTokenField component.
- * Todo: move to a shared location.
- */
-interface TokenItem {
- /*
- * `title` is used to set the `title` property
- * of the main wrapper element of the token.
- */
- title?: string;
-
- /*
- * `value` is used to set the token text.
- */
- value: string;
-
- /*
- * `slug` is used internally to identify the token.
- */
- slug: string;
- status?: 'error' | 'success' | 'validating';
- isBorderless?: boolean;
- onMouseEnter?: MouseEventHandler< HTMLSpanElement >;
- onMouseLeave?: MouseEventHandler< HTMLSpanElement >;
-}
-
-/**
- * Convert a string or a TokenItem to a TokenItem.
- *
- * @param {string | TokenItem} v - The value to convert.
- * @return {TokenItem} The TokenItem.
- */
-const stringToTokenItem = ( v: string | TokenItem ): TokenItem => ( {
- value: typeof v === 'string' ? v : v.value,
- slug: typeof v === 'string' ? cleanForSlug( v ) : cleanForSlug( v.value ),
-} );
-
-/**
- * Convert a string or a TokenItem to a string.
- *
- * @param {string | TokenItem} item - The item to convert.
- * @return {string} The string.
- */
-const tokenItemToString = (
- item: string | Omit< TokenItem, 'slug' >
-): string => ( typeof item === 'string' ? item : item.value );
-
-const INITIAL_MAX_TOKENS_TO_SHOW = 20;
-const MAX_TERMS_TO_LOAD = 100;
-
-export const AttributeTableRow = ( {
- index,
- attribute,
- attributePlaceholder,
- disabledAttributeMessage,
- isLoadingAttributes,
- attributes,
- onNewAttributeAdd,
- onAttributeSelect,
- termPlaceholder,
- onTermsSelect,
- termsAutoSelection,
- clearButtonDisabled,
- removeLabel,
- onRemove,
-}: AttributeTableRowProps ) => {
- const attributeId = attribute ? attribute.id : undefined;
- const { createProductAttributeTerm } = useDispatch(
- experimentalProductAttributeTermsStore
- );
- const selectItemsQuery = useMemo(
- () => ( {
- search: '',
- attribute_id: attributeId,
- per_page: MAX_TERMS_TO_LOAD, // @todo: handle this by using `search` arg
- } ),
- [ attributeId ]
- );
-
- /*
- * Get the global terms from the current attribute,
- * used in the token field suggestions and values.
- */
- const globalAttributeTerms = useSelect(
- ( select ) => {
- const { getProductAttributeTerms } = select(
- experimentalProductAttributeTermsStore
- );
-
- return attributeId
- ? ( getProductAttributeTerms(
- selectItemsQuery
- ) as ProductAttributeTerm[] )
- : [];
- },
- [ attributeId, selectItemsQuery ]
- );
-
- /*
- * Local terms to handle not global (local) attributes.
- * Set initially with the attribute options.
- */
- const [ localTerms, setLocalTerms ] = useState< TokenItem[] >(
- attribute?.options?.map( stringToTokenItem ) || []
- );
-
- /**
- * Use the temporary terms to store and show
- * the new terms on the fly,
- * before they are created by hitting the API.
- */
- const [ temporaryTerms, setTemporaryTerms ] = useState< TokenItem[] >( [] );
-
- /*
- * By convention, it's a local attribute when the id is 0.
- * Local attributes are store as part of the product data.
- */
- const isLocalAttribute = attribute?.id === 0;
-
- /*
- * When isLocalAttribute is true, allTerms is the localTerms,
- * otherwise, it is the attribute terms (mapped to their names)
- */
- const allTerms =
- ( isLocalAttribute
- ? localTerms.map( tokenItemToString )
- : globalAttributeTerms?.map(
- ( term: ProductAttributeTerm ) => term.name
- ) ) || [];
-
- /*
- * For `suggestions` (the values of the FormTokenField component),
- * combine the temporary terms with the attribute options or terms,
- * removing duplicates.
- */
- const tokenFieldSuggestions = [
- ...( allTerms || [] ),
- ...temporaryTerms.map( tokenItemToString ),
- ].filter( ( value, i, self ) => self.indexOf( value ) === i );
-
- /*
- * Build attribute terms object from the attribute,
- * used to populate the token field.
- * When the attribute is global, uses straight the attribute options.
- * Otherwise, uses the (mapped) attribute terms.
- */
- const attributeTerms =
- ( isLocalAttribute
- ? attribute.options?.map( stringToTokenItem )
- : attribute?.terms?.map( ( { name } ) =>
- stringToTokenItem( name )
- ) ) || [];
-
- // Combine the temporary terms with the selected values.
- const tokenFieldValues: TokenItem[] = [
- ...( attributeTerms || [] ),
- ...temporaryTerms,
- ];
-
- // Flag to track if the terms are initially populated.
- const [ initiallyPopulated, setInitiallyPopulated ] = useState( false );
-
- // Auto select terms based on the termsAutoSelection prop.
- useEffect( () => {
- // If the terms are not set, bail early.
- if ( ! termsAutoSelection ) {
- return;
- }
-
- // If the terms are already populated, bail early.
- if ( initiallyPopulated ) {
- return;
- }
-
- // If the attribute is not set, bail early.
- if ( ! attribute ) {
- return;
- }
-
- // If the terms are not loaded, bail early.
- if ( ! globalAttributeTerms?.length ) {
- return;
- }
-
- // Set the flag to true.
- setInitiallyPopulated( true );
-
- /*
- * If terms auto selection is set to 'first',
- * and there are terms, select the first term,
- * and bail early.
- */
- if ( termsAutoSelection === 'first' ) {
- return onTermsSelect(
- [ globalAttributeTerms[ 0 ] ],
- index,
- attribute
- );
- }
-
- // auto select the first INITIAL_MAX_TOKENS_TO_SHOW terms
- onTermsSelect(
- globalAttributeTerms.slice( 0, INITIAL_MAX_TOKENS_TO_SHOW ),
- index,
- attribute
- );
- }, [
- termsAutoSelection,
- initiallyPopulated,
- attribute,
- globalAttributeTerms,
- onTermsSelect,
- index,
- ] );
-
- /*
- * Filter the attributes to exclude
- * attributes that are already taken,
- * less the current attribute.
- */
- const filteredAttributes = attributes?.filter( ( item ) => {
- return (
- item.id === attributeId ||
- ( typeof item?.takenBy !== 'undefined' ? item.takenBy < 0 : true )
- );
- } );
-
- async function addNewTerms( newTokens: TokenItem[] ) {
- if ( ! attribute ) {
- return;
- }
-
- /*
- * Create the temporary terms.
- * It will show the tokens in the token field
- * optimistically, before the terms are created.
- */
- setTemporaryTerms( ( prevTerms ) => [ ...prevTerms, ...newTokens ] );
-
- // Create the new terms.
- const promises = newTokens.map( async ( token ) => {
- try {
- const newTerm = await createProductAttributeTerm(
- {
- name: token.value,
- slug: token.slug,
- attribute_id: attributeId,
- },
- {
- optimisticQueryUpdate: selectItemsQuery,
- optimisticUrlParameters: attributeId
- ? [ attributeId ]
- : [],
- }
- );
-
- return newTerm;
- } catch ( error ) {
- dispatch( 'core/notices' ).createErrorNotice(
- sprintf(
- /* translators: %s: the attribute term */
- __(
- 'There was an error trying to create the attribute term "%s".',
- 'woocommerce'
- ),
- token.value
- )
- );
- return undefined;
- }
- } );
-
- const newTerms = await Promise.all( promises );
- const storedTerms = newTerms.filter(
- ( term ) => term !== undefined
- ) as ProductAttributeTerm[];
-
- // Remove the recently created terms from the temporary state,
- setTemporaryTerms( ( prevTerms ) =>
- prevTerms.filter( ( term ) => ! newTokens.includes( term ) )
- );
-
- /*
- * Pull the recent terms list from the store
- * to get the terms that were just created.
- * @Todo: using this `sel` alias is a workaround.
- * The optimistic rendering should be implemented in the store.
- */
- const recentTermsList = sel(
- experimentalProductAttributeTermsStore
- ).getProductAttributeTerms( selectItemsQuery );
-
- /*
- * New selected terms are the ones that are in the recent terms list
- * and also in the token field values.
- */
- const newSelectedTerms =
- recentTermsList?.filter( ( term ) =>
- tokenFieldValues
- .map( ( item ) => item.value )
- .includes( term.name )
- ) ?? [];
-
- // Call the callback to update the Form terms.
- onTermsSelect(
- [ ...newSelectedTerms, ...storedTerms ],
- index,
- attribute
- );
- }
-
- /*
- * Check if there are available suggestions
- * to show the values column,
- * comparing the suggestions length with the selected values length.
- */
- const hasAvailableSuggestions =
- tokenFieldSuggestions?.length &&
- tokenFieldSuggestions.length > ( tokenFieldValues?.length || 0 );
-
- return (
- <tr
- key={ index }
- className={ `woocommerce-new-attribute-modal__table-row woocommerce-new-attribute-modal__table-row-${ index }` }
- >
- <td className="woocommerce-new-attribute-modal__table-attribute-column">
- <AttributesComboboxControl
- instanceNumber={ index }
- placeholder={ attributePlaceholder }
- current={ attribute }
- items={ filteredAttributes }
- isLoading={ isLoadingAttributes }
- onAddNew={ ( newValue ) =>
- onNewAttributeAdd?.( newValue, index )
- }
- onChange={ ( nextAttribute ) => {
- if ( nextAttribute.id === attributeId ) {
- return;
- }
-
- onAttributeSelect( nextAttribute, index );
- setInitiallyPopulated( false );
- } }
- disabledAttributeMessage={ disabledAttributeMessage }
- />
- </td>
-
- <td
- className={ `woocommerce-new-attribute-modal__table-attribute-value-column${
- hasAvailableSuggestions ? ' has-values' : ''
- }` }
- >
- <FormTokenField
- placeholder={ termPlaceholder }
- disabled={ ! attribute }
- suggestions={ tokenFieldSuggestions }
- value={ tokenFieldValues }
- onChange={ ( nextTokens ) => {
- // If there is no attribute, exit.
- if ( ! attribute ) {
- return;
- }
-
- /*
- * Pick the new tokens from the nextTokens array.
- * (all string are considered new tokens)
- * and map them to a new TermItem[] array.
- */
- const newTokens = nextTokens
- .filter(
- ( token ): token is string =>
- typeof token === 'string'
- )
- .map( stringToTokenItem );
-
- // Create a string list of the next string tokens.
- const nextStringTokens = nextTokens.map( ( value ) =>
- tokenItemToString( value )
- );
-
- // *** LOCAL Attributes ***
- if ( isLocalAttribute ) {
- // Update the local terms with the new tokens.
- setLocalTerms( ( prevTerms ) => [
- ...prevTerms,
- ...newTokens.map( stringToTokenItem ),
- ] );
-
- // Update the form terms using the callback function.
- onTermsSelect( nextStringTokens, index, attribute );
-
- return;
- }
-
- // *** GLOBAL Attributes ***
-
- /*
- * Convert the current suggestions (tokenFieldSuggestions)
- * to slugs[] using the cleanForSlug helper.
- * It's used to compare the new tokens with the suggestions,
- * to avoid creating duplicate terms.
- *
- * @todo: this should be handled by the API,
- * probably allowing to create terms with the same name,
- * but different slugs.
- */
- const slugSuggestions =
- tokenFieldSuggestions.map( cleanForSlug );
-
- /*
- * Identify new tokens that are not found
- * in the (slugged) suggestions.
- *
- * This helps prevent creating duplicate terms
- * with different cases, for example.
- */
- const newTermsToAdd = newTokens.filter(
- ( itemToken ) =>
- ! slugSuggestions.includes( itemToken.slug )
- );
-
- /*
- * Determine the selected terms to pass to the form,
- * filtering the terms by the new string tokens.
- */
- const selectedTerms = globalAttributeTerms?.filter(
- ( globalTerm ) =>
- nextStringTokens.includes( globalTerm.name )
- );
-
- // Update the form terms using the callback function.
- onTermsSelect( selectedTerms, index, attribute );
-
- /*
- * Create new terms if there are any new tokens.
- * Set the status of new terms to 'validating'.
- */
- if ( newTermsToAdd.length ) {
- addNewTerms(
- newTermsToAdd.map( ( item ) => ( {
- ...item,
- status: 'validating',
- } ) )
- );
- }
- } }
- __experimentalExpandOnFocus={ true }
- __experimentalAutoSelectFirstMatch={ true }
- __experimentalShowHowTo={ true }
- />
- </td>
- <td className="woocommerce-new-attribute-modal__table-attribute-trash-column">
- <Button
- icon={ closeSmall }
- disabled={ clearButtonDisabled }
- label={ removeLabel }
- onClick={ () => onRemove( index ) }
- ></Button>
- </td>
- </tr>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.scss b/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.scss
deleted file mode 100644
index c0c61cb9808..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.woocommerce-edit-attribute-modal {
- overflow: visible;
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: $gap-smaller;
- justify-content: flex-end;
- }
-}
-
-.woocommerce-edit-attribute-modal__body {
- width: 500px;
- max-width: 100%;
-
- .woocommerce-experimental-select-control
- + .woocommerce-experimental-select-control {
- margin-top: 1.3em;
- }
-
- .woocommerce-experimental-select-control__label,
- .components-base-control__label {
- font-size: 14px;
- color: #757575;
- font-weight: bold;
- text-transform: none;
- }
-
- .woocommerce-edit-attribute-modal__option-container {
- display: flex;
- flex-direction: row;
- align-items: center;
-
- .components-base-control, .components-base-control__field {
- margin-bottom: 0;
- }
- }
-
- .woocommerce-attribute-term-field {
- margin-bottom: 1.5em;
- }
-
- .woocommerce-edit-attribute-modal__helper-text {
- color: #757575;
- margin: 0.5em 0 1.5em 0;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.tsx b/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.tsx
deleted file mode 100644
index d0b68dc856f..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/edit-attribute-modal.tsx
+++ /dev/null
@@ -1,305 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
- Button,
- Modal,
- CheckboxControl,
- TextControl,
-} from '@wordpress/components';
-import { useState, createElement, Fragment, useMemo } from '@wordpress/element';
-import {
- __experimentalTooltip as Tooltip,
- __experimentalSelectControlMenuSlot as SelectControlMenuSlot,
-} from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import {
- AttributeTermInputField,
- CustomAttributeTermInputField,
-} from '../attribute-term-input-field';
-import { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-import { Notice } from '../notice';
-import { getAttributeId } from './utils';
-
-type EditAttributeModalProps = {
- title?: string;
- nameLabel?: string;
- globalAttributeHelperMessage?: JSX.Element;
- customAttributeHelperMessage?: string;
- termsLabel?: string;
- termsPlaceholder?: string;
- isDefaultLabel?: string;
- isDefaultTooltip?: string;
- useAsFilterLabel?: string;
- useAsFilterTooltip?: string;
- visibleLabel?: string;
- visibleTooltip?: string;
- cancelAccessibleLabel?: string;
- cancelLabel?: string;
- updateAccessibleLabel?: string;
- updateLabel?: string;
- onCancel: () => void;
- onEdit: ( alteredAttribute: EnhancedProductAttribute ) => void;
- attribute: EnhancedProductAttribute;
- attributes: EnhancedProductAttribute[];
-};
-
-export const EditAttributeModal = ( {
- title = __( 'Edit attribute', 'woocommerce' ),
- nameLabel = __( 'Name', 'woocommerce' ),
- globalAttributeHelperMessage,
- customAttributeHelperMessage = __(
- 'Your customers will see this on the product page',
- 'woocommerce'
- ),
- termsLabel = __( 'Values', 'woocommerce' ),
- termsPlaceholder = __( 'Search or create value', 'woocommerce' ),
- isDefaultLabel = __( 'Set default value', 'woocommerce' ),
- isDefaultTooltip = __(
- 'Check to preselect the first choice when customers enter the product page.',
- 'woocommerce'
- ),
- useAsFilterLabel = __( 'Use as filter', 'woocommerce' ),
- useAsFilterTooltip = __(
- 'Check to allow customers to search and filter by this option in your store.',
- 'woocommerce'
- ),
- visibleLabel = __( 'Show in product details', 'woocommerce' ),
- visibleTooltip = __(
- 'Check to show this option and its values in the product details section on the product page.',
- 'woocommerce'
- ),
- cancelAccessibleLabel = __( 'Cancel', 'woocommerce' ),
- cancelLabel = __( 'Cancel', 'woocommerce' ),
- updateAccessibleLabel = __( 'Edit attribute', 'woocommerce' ),
- updateLabel = __( 'Update', 'woocommerce' ),
- onCancel,
- onEdit,
- attribute,
- attributes,
-}: EditAttributeModalProps ) => {
- const [ editableAttribute, setEditableAttribute ] = useState<
- EnhancedProductAttribute | undefined
- >( { ...attribute } );
-
- const isCustomAttribute = editableAttribute?.id === 0;
-
- const { additions, deletions } = useMemo( () => {
- if ( ! attribute.variation ) {
- return {};
- }
-
- const variationsSubTotal = attributes
- .filter(
- ( otherAttribute ) =>
- getAttributeId( otherAttribute ) !==
- getAttributeId( attribute )
- )
- .reduce(
- ( subTotal, { terms } ) => subTotal * ( terms?.length ?? 1 ),
- 1
- );
-
- const currentAttributeTermsCount = attribute.terms?.length ?? 0;
- const variationsTotal = variationsSubTotal * currentAttributeTermsCount;
-
- const addedTermsCount =
- editableAttribute?.terms?.filter(
- ( editedTerm ) =>
- ! attribute.terms?.some(
- ( currentTerm ) => currentTerm.id === editedTerm.id
- )
- )?.length ?? 0;
- const addedTermsTotal =
- currentAttributeTermsCount + addedTermsCount || 1;
-
- const remainedTermsCount =
- attribute.terms?.filter( ( currentTerm ) =>
- editableAttribute?.terms?.some(
- ( editedTerm ) => currentTerm.id === editedTerm.id
- )
- )?.length ?? 0;
-
- return {
- additions: Math.abs(
- variationsTotal - variationsSubTotal * addedTermsTotal
- ),
- deletions: Math.abs(
- variationsTotal - variationsSubTotal * remainedTermsCount
- ),
- };
- }, [ attributes, attribute, editableAttribute ] );
-
- function getNoticeMessage() {
- const additionsMessage = sprintf(
- // translators: %d is the amount of variations to be added
- __( '%d variations will be added', 'woocommerce' ),
- additions
- );
- const deletionsMessage = sprintf(
- // translators: %d is the amount of variations to be removed
- __( '%d variations will be removed', 'woocommerce' ),
- deletions
- );
- if ( additions && deletions ) {
- return sprintf( '%1$s, %2$s.', additionsMessage, deletionsMessage );
- } else if ( additions ) {
- return sprintf( '%s.', additionsMessage );
- }
- return sprintf( '%s.', deletionsMessage );
- }
-
- return (
- <>
- <Modal
- title={ title }
- onRequestClose={ () => onCancel() }
- className="woocommerce-edit-attribute-modal"
- >
- <div className="woocommerce-edit-attribute-modal__body">
- <TextControl
- label={ nameLabel }
- disabled={ ! isCustomAttribute }
- value={
- editableAttribute?.name
- ? editableAttribute?.name
- : ''
- }
- onChange={ ( val ) =>
- setEditableAttribute( {
- ...( editableAttribute as EnhancedProductAttribute ),
- name: val,
- } )
- }
- />
- <p className="woocommerce-edit-attribute-modal__helper-text">
- { ! isCustomAttribute
- ? globalAttributeHelperMessage
- : customAttributeHelperMessage }
- </p>
- { attribute.terms ? (
- <AttributeTermInputField
- label={ termsLabel }
- placeholder={
- editableAttribute?.terms &&
- editableAttribute?.terms.length > 0
- ? ''
- : termsPlaceholder
- }
- value={ editableAttribute?.terms }
- attributeId={ editableAttribute?.id }
- onChange={ ( val ) => {
- setEditableAttribute( {
- ...( editableAttribute as EnhancedProductAttribute ),
- terms: val,
- } );
- } }
- />
- ) : (
- <CustomAttributeTermInputField
- label={ termsLabel }
- placeholder={
- editableAttribute?.options &&
- editableAttribute?.options.length > 0
- ? ''
- : termsPlaceholder
- }
- disabled={ ! attribute?.name }
- value={ editableAttribute?.options }
- onChange={ ( val ) => {
- setEditableAttribute( {
- ...( editableAttribute as EnhancedProductAttribute ),
- options: val,
- } );
- } }
- />
- ) }
-
- <div className="woocommerce-edit-attribute-modal__options">
- { attribute.variation && (
- <div className="woocommerce-edit-attribute-modal__option-container">
- <CheckboxControl
- onChange={ ( checked ) =>
- setEditableAttribute( {
- ...( editableAttribute as EnhancedProductAttribute ),
- isDefault: checked,
- } )
- }
- checked={ editableAttribute?.isDefault }
- label={ isDefaultLabel }
- />
- <Tooltip
- className="woocommerce-edit-attribute-modal__tooltip-set-default-value"
- text={ isDefaultTooltip }
- />
- </div>
- ) }
-
- <div className="woocommerce-edit-attribute-modal__option-container">
- <CheckboxControl
- onChange={ ( val ) =>
- setEditableAttribute( {
- ...( editableAttribute as EnhancedProductAttribute ),
- visible: val,
- } )
- }
- checked={ editableAttribute?.visible }
- label={ visibleLabel }
- />
- <Tooltip
- className="woocommerce-edit-attribute-modal__tooltip-show-in-product-details"
- text={ visibleTooltip }
- />
- </div>
- { attribute.id !== 0 && (
- /* Only supported for global attributes, and disabled for now as the 'Filter by Attributes' block does not support this yet. */
- <div className="woocommerce-edit-attribute-modal__option-container">
- <CheckboxControl
- disabled={ true }
- onChange={ () => {
- // Disabled.
- } }
- checked={ true }
- label={ useAsFilterLabel }
- />
- <Tooltip
- className="woocommerce-edit-attribute-modal__tooltip-use-as-filter"
- text={ useAsFilterTooltip }
- />
- </div>
- ) }
- </div>
-
- { Boolean( additions || deletions ) && (
- <Notice>{ getNoticeMessage() }</Notice>
- ) }
- </div>
- <div className="woocommerce-edit-attribute-modal__buttons">
- <Button
- isSecondary
- label={ cancelAccessibleLabel }
- onClick={ () => onCancel() }
- >
- { cancelLabel }
- </Button>
- <Button
- isPrimary
- label={ updateAccessibleLabel }
- onClick={ () => {
- onEdit(
- editableAttribute as EnhancedProductAttribute
- );
- } }
- >
- { updateLabel }
- </Button>
- </div>
- </Modal>
- <SelectControlMenuSlot />
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/index.ts b/packages/js/product-editor/src/components/attribute-control/index.ts
deleted file mode 100644
index f2f7ebfbbbb..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './attribute-control';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss b/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss
deleted file mode 100644
index b4b1795aa27..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-.components-modal__frame.woocommerce-new-attribute-modal {
- min-width: 75%;
-}
-.woocommerce-new-attribute-modal {
- .components-notice.is-info {
- margin-left: 0;
- margin-right: 0;
- background-color: #f0f6fc;
- }
-
- &__add-attribute {
- margin-top: $gap-small;
- }
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
-
- .components-modal__content {
- display: flex;
- flex-direction: column;
- }
-
- &__body {
- min-height: 200px;
- flex: 1 1 auto;
-
- .woocommerce-new-attribute-modal__table-row {
- min-height: 80px;
-
- .components-form-token-field__input-container .components-form-token-field__suggestions-list {
- position: absolute;
- z-index: 10;
- }
-
- .components-form-token-field__token.is-validating {
- animation: components-button__busy-animation 2s linear infinite;
- background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0);
- background-size: 100px 100%;
- box-shadow: 0 0 1px black inset;
- opacity: 1;
-
- .components-form-token-field__token-text,
- .components-form-token-field__remove-token {
- background-color:transparent;
- pointer-events: none;
- }
- }
- }
- }
-
- &__table {
- width: 100%;
- margin-top: $gap-large;
-
- @include breakpoint( '<782px' ) {
- thead {
- @include screen-reader-only();
- }
- }
-
- th {
- text-align: left;
- color: $gray-700;
- font-weight: normal;
- text-transform: uppercase;
- }
- }
- &__table-header {
- padding: 0 0 $gap;
- }
- &__table-header,
- &__table-row {
- display: grid;
- grid-template-columns: 40% 55% 5%;
- border-bottom: 1px solid $gray-300;
-
- padding: $gap-large 0;
- td:not(:last-child) {
- margin-right: $gap;
- }
-
- .components-form-token-field {
- position: relative;
- }
-
- .components-form-token-field__help {
- position: absolute;
- top: 36px;
- z-index: 0;
- }
-
- .components-form-token-field__label {
- display: none;
- }
-
- .components-form-token-field__input-container {
- position: relative;
- z-index: 10;
-
- > .components-flex {
- min-height: 34px;
- }
-
- &.is-disabled {
- border-color: $gray-600;
- }
-
- &.is-active {
- z-index: 10;
- }
-
- &:not(.is-disabled) {
- background-color: white;
- }
-
- &:focus-within {
- outline: none;
- box-shadow: none;
- }
- }
-
- .components-form-token-field__input {
- margin: 1px 0;
- }
-
- .components-form-token-field__suggestion {
- min-height: 36px;
- padding: 10px 12px;
- }
-
- @include breakpoint( '<782px' ) {
- position: relative;
- grid-template-columns: 1fr;
- // Added the width of the trash icon as padding
- // so that it can be displayed correctly
- padding-right: 42px;
- }
-
- @include breakpoint( '>782px' ) {
- .woocommerce-experimental-select-control__label {
- @include screen-reader-only();
- }
- .woocommerce-experimental-select-control__combo-box-wrapper {
- margin-bottom: 0;
- }
- }
- }
-
- &__table-attribute-trash-column {
- display: flex;
- justify-content: center;
- align-items:flex-start;
-
- @include breakpoint( '<782px' ) {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- }
-
- .components-button.has-icon {
- padding: 8px;
- }
- }
-}
-
-.woocommerce-new-attribute-modal__table-attribute-value-column.has-values {
- .components-form-token-field__suggestions-list {
- border: 1px solid var( --wp-admin-theme-color );
- border-top: 0;
- width: calc(100% + 2px);
- margin-left: -1px;
- margin-top: -1px;
- background-color: white;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx b/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx
deleted file mode 100644
index f7438acb398..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createElement, Fragment, useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
- Form,
- __experimentalSelectControlMenuSlot as SelectControlMenuSlot,
-} from '@woocommerce/components';
-import {
- EXPERIMENTAL_PRODUCT_ATTRIBUTES_STORE_NAME,
- type ProductAttributeTerm,
- type ProductAttribute,
- experimentalProductAttributesStore,
-} from '@woocommerce/data';
-import { Button, Modal, Notice, Tooltip } from '@wordpress/components';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-import { AttributeTableRow } from './attribute-table-row';
-import type { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-import type { AttributesComboboxControlItem } from '../attribute-combobox-field/types';
-import { isAttributeFilledOut } from './utils';
-
-type NewAttributeModalProps = {
- title?: string;
- description?: string | React.ReactElement;
- notice?: string;
- attributeLabel?: string;
- valueLabel?: string;
- attributePlaceholder?: string;
- termPlaceholder?: string;
- removeLabel?: string;
- addAnotherAccessibleLabel?: string;
- addAnotherLabel?: string;
- cancelLabel?: string;
- addAccessibleLabel?: string;
- addLabel?: string;
- onCancel: () => void;
- onAdd: ( newCategories: EnhancedProductAttribute[] ) => void;
- onAddAnother?: () => void;
- onRemoveItem?: () => void;
- selectedAttributeIds?: number[];
- createNewAttributesAsGlobal?: boolean;
- disabledAttributeIds?: number[];
- disabledAttributeMessage?: string;
- termsAutoSelection?: 'first' | 'all';
- defaultVisibility?: boolean;
- defaultSearch?: string;
-};
-
-type AttributeForm = {
- attributes: Array< EnhancedProductAttribute | null >;
-};
-
-/*
- * Sort criteria for the attributes.
- */
-const attributeSortCriteria = { order_by: 'name' };
-
-export const NewAttributeModal = ( {
- title = __( 'Add attributes', 'woocommerce' ),
- description = '',
- notice,
- attributeLabel = __( 'Attribute', 'woocommerce' ),
- valueLabel = __( 'Values', 'woocommerce' ),
- attributePlaceholder = __( 'Search or create attribute', 'woocommerce' ),
- termPlaceholder = __( 'Search or create value', 'woocommerce' ),
- removeLabel = __( 'Remove attribute', 'woocommerce' ),
- addAnotherAccessibleLabel = __( 'Add another attribute', 'woocommerce' ),
- addAnotherLabel = __( '+ Add another', 'woocommerce' ),
- cancelLabel = __( 'Cancel', 'woocommerce' ),
- addAccessibleLabel = __( 'Add attributes', 'woocommerce' ),
- addLabel = __( 'Add', 'woocommerce' ),
- onCancel,
- onAdd,
- onAddAnother = () => {},
- onRemoveItem = () => {},
- selectedAttributeIds = [],
- createNewAttributesAsGlobal = false,
- disabledAttributeIds = [],
- disabledAttributeMessage = __(
- 'Already used in Attributes',
- 'woocommerce'
- ),
- termsAutoSelection,
- defaultVisibility = false,
- defaultSearch,
-}: NewAttributeModalProps ) => {
- const scrollAttributeIntoView = ( index: number ) => {
- setTimeout( () => {
- const attributeRow = document.querySelector(
- `.woocommerce-new-attribute-modal__table-row-${ index }`
- );
- attributeRow?.scrollIntoView( { behavior: 'smooth' } );
- }, 0 );
- };
- const addAnother = (
- values: AttributeForm,
- setValue: (
- name: string,
- value: AttributeForm[ keyof AttributeForm ]
- ) => void
- ) => {
- setValue( 'attributes', [ ...values.attributes, null ] );
- scrollAttributeIntoView( values.attributes.length );
- onAddAnother();
- };
-
- const isGlobalAttribute = (
- attribute: EnhancedProductAttribute
- ): boolean => {
- return attribute.id !== 0;
- };
-
- const mapTermsToOptions = ( terms: ProductAttributeTerm[] | undefined ) => {
- if ( ! terms ) {
- return [];
- }
-
- return terms.map( ( term ) => term.name );
- };
-
- const getOptions = ( attribute: EnhancedProductAttribute ) => {
- return isGlobalAttribute( attribute )
- ? mapTermsToOptions( attribute.terms )
- : attribute.options;
- };
-
- const getVisibleOrTrue = ( attribute: EnhancedProductAttribute ) =>
- attribute.visible !== undefined ? attribute.visible : defaultVisibility;
-
- const onAddingAttributes = ( values: AttributeForm ) => {
- const newAttributesToAdd: EnhancedProductAttribute[] = [];
- values.attributes.forEach( ( attr ) => {
- if ( isAttributeFilledOut( attr ) ) {
- newAttributesToAdd.push( {
- ...attr,
- visible: getVisibleOrTrue( attr ),
- options: getOptions( attr ),
- } );
- }
- } );
- onAdd( newAttributesToAdd );
- };
-
- const onRemove = (
- index: number,
- values: AttributeForm,
- setValue: (
- name: string,
- value: AttributeForm[ keyof AttributeForm ] | null
- ) => void
- ) => {
- onRemoveItem();
- if ( values.attributes.length > 1 ) {
- setValue(
- 'attributes',
- values.attributes.filter( ( val, i ) => i !== index )
- );
- } else {
- setValue( `attributes[${ index }]`, null );
- }
- };
-
- useEffect( function focusFirstAttributeField() {
- const firstAttributeFieldLabel =
- document.querySelector< HTMLLabelElement >(
- '.woocommerce-new-attribute-modal__table-row .woocommerce-attribute-input-field label'
- );
- const timeoutId = setTimeout( () => {
- firstAttributeFieldLabel?.focus();
- }, 100 );
-
- return () => clearTimeout( timeoutId );
- }, [] );
-
- const initialAttribute = {
- name: defaultSearch,
- } as EnhancedProductAttribute;
-
- const { attributes, isLoadingAttributes } = useSelect( ( select ) => {
- const {
- getProductAttributes: getAttributes,
- hasFinishedResolution: hasLoadedAttributes,
- } = select( EXPERIMENTAL_PRODUCT_ATTRIBUTES_STORE_NAME );
-
- return {
- isLoadingAttributes: ! hasLoadedAttributes(
- 'getProductAttributes',
- [ attributeSortCriteria ]
- ),
- attributes: getAttributes( attributeSortCriteria ),
- };
- }, [] );
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
- const { createProductAttribute } = useDispatch(
- experimentalProductAttributesStore
- );
-
- return (
- <>
- <Form< AttributeForm >
- initialValues={ {
- attributes: [ defaultSearch ? initialAttribute : null ],
- } }
- >
- { ( {
- values,
- setValue,
- }: {
- values: AttributeForm;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- setValue: ( name: string, value: any ) => void;
- } ) => {
- const isAddButtonDisabled = ! values.attributes.every(
- ( attr ) => isAttributeFilledOut( attr )
- );
-
- /**
- * Select the attribute in the form field.
- * If the attribute does not exist, create it.
- * ToDo: Improve Id. Adding a attribute with id -99
- * does not seem a good idea.
- *
- * @param {AttributesComboboxControlItem} nextAttribute - The attribute to select.
- * @param { number } index - The index of the attribute in the form field.
- * @return { void }
- */
- function selectAttribute(
- nextAttribute: AttributesComboboxControlItem,
- index: number
- ): void {
- recordEvent( 'product_attribute_add_custom_attribute', {
- source: TRACKS_SOURCE,
- } );
-
- return setValue(
- `attributes[${ index }]`,
- nextAttribute
- );
- }
-
- /**
- * Create a new attribute and fill the form field with it.
- * If the attribute is not global, create it locally.
- *
- * @param {string} newAttributeName - The name of the new attribute.
- * @param {number} index - The index of the attribute in the form field.
- * @return {void}
- */
- function addNewAttribute(
- newAttributeName: string,
- index: number
- ): void {
- if ( ! createNewAttributesAsGlobal ) {
- return setValue( `attributes[${ index }]`, {
- id: 0,
- name: newAttributeName,
- slug: newAttributeName,
- } );
- }
-
- createProductAttribute(
- {
- name: newAttributeName,
- generate_slug: true,
- },
- {
- optimisticQueryUpdate: attributeSortCriteria,
- }
- )
- .then( ( newAttribute ) => {
- setValue(
- `attributes[${ index }]`,
- newAttribute
- );
- } )
- .catch( ( error ) => {
- let message = __(
- 'Failed to create new attribute.',
- 'woocommerce'
- );
- if (
- error.code ===
- 'woocommerce_rest_cannot_create'
- ) {
- message = error.message;
- }
-
- createErrorNotice( message, {
- explicitDismiss: true,
- } );
- } );
- }
-
- /**
- * Set the attribute terms in the form field.
- *
- * @param {ProductAttributeTerm[] | string[]} terms - The terms to set.
- * @param {number} index - The index of the attribute in the form field.
- * @param {EnhancedProductAttribute} attribute - The attribute to set the terms.
- */
- function selectTerms(
- terms: ProductAttributeTerm[] | string[],
- index: number,
- attribute?: EnhancedProductAttribute
- ) {
- const attributeTermPropName =
- attribute && isGlobalAttribute( attribute )
- ? 'terms'
- : 'options';
-
- const fieldName = `attributes[${ index }].${ attributeTermPropName }`;
-
- setValue( fieldName, terms );
- }
-
- /*
- * Get the attribute ids that are already selected
- * by other form fields.
- */
- const attributeBelongTo = values.attributes
- .map( ( attr ) => ( attr ? attr.id : null ) )
- .filter( ( id ) => typeof id === 'number' );
-
- /*
- * Compute the available attributes to show in the attribute input field,
- * filtering out the ignored attributes,
- * marking the disabled ones,
- * and setting the `takenBy` property.
- */
- const availableAttributes = attributes
- ?.filter(
- ( attribute: ProductAttribute ) =>
- ! selectedAttributeIds.includes( attribute.id )
- )
- ?.map( ( attribute: ProductAttribute ) => ( {
- ...attribute,
- isDisabled: disabledAttributeIds.includes(
- attribute.id
- ),
- takenBy: attributeBelongTo.indexOf( attribute.id ),
- } ) ) as AttributesComboboxControlItem[];
-
- return (
- <Modal
- title={ title }
- onRequestClose={ ( event ) => {
- if ( ! event?.isPropagationStopped() ) {
- onCancel();
- }
- } }
- className="woocommerce-new-attribute-modal"
- size="medium"
- >
- { notice && (
- <Notice isDismissible={ false }>
- <p>{ notice }</p>
- </Notice>
- ) }
-
- { description && <p>{ description }</p> }
-
- <div className="woocommerce-new-attribute-modal__body">
- <table className="woocommerce-new-attribute-modal__table">
- <thead>
- <tr className="woocommerce-new-attribute-modal__table-header">
- <th>{ attributeLabel }</th>
- <th>{ valueLabel }</th>
- </tr>
- </thead>
- <tbody>
- { values.attributes.map(
- ( attribute, index ) => (
- <AttributeTableRow
- key={ index }
- index={ index }
- attribute={ attribute }
- attributePlaceholder={
- attributePlaceholder
- }
- disabledAttributeMessage={
- disabledAttributeMessage
- }
- isLoadingAttributes={
- isLoadingAttributes
- }
- attributes={
- availableAttributes
- }
- onNewAttributeAdd={
- addNewAttribute
- }
- onAttributeSelect={
- selectAttribute
- }
- termPlaceholder={
- termPlaceholder
- }
- removeLabel={ removeLabel }
- onTermsSelect={
- selectTerms
- }
- onRemove={ (
- removedIndex
- ) =>
- onRemove(
- removedIndex,
- values,
- setValue
- )
- }
- termsAutoSelection={
- termsAutoSelection
- }
- />
- )
- ) }
- </tbody>
- </table>
- </div>
- <div>
- <Button
- className="woocommerce-new-attribute-modal__add-attribute"
- variant="tertiary"
- label={ addAnotherAccessibleLabel }
- onClick={ () => {
- addAnother( values, setValue );
- } }
- >
- { addAnotherLabel }
- </Button>
- </div>
- <div className="woocommerce-new-attribute-modal__buttons">
- <Button
- isSecondary
- label={ cancelLabel }
- onClick={ () => onCancel() }
- >
- { cancelLabel }
- </Button>
- <Tooltip
- text={
- isAddButtonDisabled
- ? __(
- 'Add at least one attribute and one value. Press Enter to select.',
- 'woocommerce'
- )
- : ''
- }
- >
- { /*
- * we need to wrap the button in a div to make the tooltip work,
- * since when the button is disabled, the tooltip is not shown.
- */ }
- <div>
- <Button
- variant="primary"
- label={ addAccessibleLabel }
- showTooltip={ true }
- disabled={ isAddButtonDisabled }
- onClick={ () =>
- onAddingAttributes( values )
- }
- >
- { addLabel }
- </Button>
- </div>
- </Tooltip>
- </div>
- </Modal>
- );
- } }
- </Form>
- { /* Add slot so select control menu renders correctly within Modal */ }
- <SelectControlMenuSlot />
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/test/attribute-field.spec.tsx b/packages/js/product-editor/src/components/attribute-control/test/attribute-field.spec.tsx
deleted file mode 100644
index db604ecc299..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/test/attribute-field.spec.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-/**
- * External dependencies
- */
-import { render, act, screen } from '@testing-library/react';
-import {
- useState,
- useEffect,
- createElement,
- Fragment,
-} from '@wordpress/element';
-import { ProductProductAttribute } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { AttributeControl } from '../attribute-control';
-
-const attributeList: ProductProductAttribute[] = [
- {
- id: 15,
- name: 'Automotive',
- slug: 'Automotive',
- position: 0,
- visible: true,
- variation: false,
- options: [ 'test' ],
- },
- {
- id: 1,
- name: 'Color',
- slug: 'Color',
- position: 2,
- visible: true,
- variation: true,
- options: [
- 'beige',
- 'black',
- 'Blue',
- 'brown',
- 'Gray',
- 'Green',
- 'mint',
- 'orange',
- 'pink',
- 'Red',
- 'white',
- 'Yellow',
- ],
- },
-];
-
-let triggerDrag: ( items: Array< { key: string } > ) => void;
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- resolveSelect: jest.fn().mockReturnValue( {
- getProductAttributeTerms: ( {
- attribute_id,
- }: {
- attribute_id: number;
- } ) =>
- new Promise( ( resolve ) => {
- const attr = attributeList.find(
- ( item ) => item.id === attribute_id
- );
- resolve(
- attr?.options.map( ( itemName, index ) => ( {
- id: ++index,
- slug: itemName.toLowerCase(),
- name: itemName,
- description: '',
- menu_order: ++index,
- count: ++index,
- } ) )
- );
- } ),
- } ),
-} ) );
-
-jest.mock( '@woocommerce/components', () => ( {
- __esModule: true,
- __experimentalSelectControlMenuSlot: () => <div></div>,
- ListItem: ( { children }: { children: JSX.Element } ) => children,
- Tag: ( { label }: { label: string } ) => <span>{ label }</span>,
- Sortable: ( {
- onOrderChange,
- children,
- }: {
- onOrderChange: ( items: Array< { key: string } > ) => void;
- children: JSX.Element[];
- } ) => {
- const [ items, setItems ] = useState< JSX.Element[] >( [] );
- useEffect( () => {
- if ( ! children ) {
- return;
- }
- setItems( Array.isArray( children ) ? children : [ children ] );
- }, [ children ] );
-
- triggerDrag = ( newItems: Array< { key: string } > ) => {
- onOrderChange( newItems );
- };
- return (
- <>
- { items.map( ( child, index ) => (
- <div key={ index }>{ child }</div>
- ) ) }
- </>
- );
- },
-} ) );
-
-describe( 'AttributeControl', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should render the list of all attributes', async () => {
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ () => {} }
- />
- );
- } );
-
- expect(
- await screen.queryByText( 'No attributes yet' )
- ).not.toBeInTheDocument();
- expect(
- await screen.queryByText( attributeList[ 0 ].name )
- ).toBeInTheDocument();
- expect(
- await screen.queryByText( attributeList[ 1 ].name )
- ).toBeInTheDocument();
- } );
-
- it( 'should render the first two terms of each option, and show "+ n more" for the rest', async () => {
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ () => {} }
- />
- );
- } );
-
- expect(
- await screen.findByText( attributeList[ 1 ].options[ 0 ] )
- ).toBeInTheDocument();
- expect(
- await screen.findByText( attributeList[ 1 ].options[ 1 ] )
- ).toBeInTheDocument();
- expect(
- await screen.queryByText( attributeList[ 1 ].options[ 2 ] )
- ).not.toBeInTheDocument();
- expect(
- await screen.queryByText(
- `+ ${ attributeList[ 1 ].options.length - 2 } more`
- )
- ).not.toBeInTheDocument();
- } );
-
- describe( 'deleting', () => {
- it( 'should show a window confirm when trash icon is clicked', async () => {
- jest.spyOn( globalThis, 'confirm' ).mockReturnValueOnce( false );
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ () => {} }
- />
- );
- } );
- (
- await screen.findAllByLabelText( 'Remove attribute' )
- )[ 0 ].click();
- expect( globalThis.confirm ).toHaveBeenCalled();
- } );
-
- it( 'should trigger onChange with removed item when user clicks ok on alert', async () => {
- jest.spyOn( globalThis, 'confirm' ).mockReturnValueOnce( true );
- const onChange = jest.fn();
-
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ onChange }
- />
- );
- } );
-
- (
- await screen.findAllByLabelText( 'Remove attribute' )
- )[ 0 ].click();
-
- expect( globalThis.confirm ).toHaveBeenCalled();
- expect( onChange ).toHaveBeenCalledWith( [ attributeList[ 1 ] ] );
- } );
-
- it( 'should not trigger onChange with removed item when user cancel', async () => {
- jest.spyOn( globalThis, 'confirm' ).mockReturnValueOnce( false );
- const onChange = jest.fn();
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ onChange }
- />
- );
- } );
- (
- await screen.findAllByLabelText( 'Remove attribute' )
- )[ 0 ].click();
- expect( globalThis.confirm ).toHaveBeenCalled();
- expect( onChange ).not.toHaveBeenCalled();
- } );
- } );
-
- describe( 'dragging', () => {
- it.skip( 'should trigger onChange with new order when onOrderChange triggered', async () => {
- jest.spyOn( globalThis, 'confirm' ).mockReturnValueOnce( true );
- const onChange = jest.fn();
-
- act( () => {
- render(
- <AttributeControl
- value={ [ ...attributeList ] }
- onChange={ onChange }
- />
- );
- } );
-
- if ( triggerDrag ) {
- triggerDrag( [
- { key: attributeList[ 1 ].id.toString() },
- { key: attributeList[ 0 ].id.toString() },
- ] );
- }
-
- (
- await screen.findAllByLabelText( 'Remove attribute' )
- )[ 0 ].click();
-
- expect( onChange ).toHaveBeenCalledWith( [
- { ...attributeList[ 1 ], position: 0 },
- { ...attributeList[ 0 ], position: 1 },
- ] );
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/attribute-control/test/utils.spec.ts b/packages/js/product-editor/src/components/attribute-control/test/utils.spec.ts
deleted file mode 100644
index 5551612e87e..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/test/utils.spec.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-/**
- * External dependencies
- */
-import {
- ProductAttributeTerm,
- ProductProductAttribute,
-} from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import {
- getAttributeKey,
- hasTermsOrOptions,
- isAttributeFilledOut,
- reorderSortableProductAttributePositions,
-} from '../utils';
-import { EnhancedProductAttribute } from '../../../hooks/use-product-attributes';
-
-const attributeList: Record< number | string, ProductProductAttribute > = {
- 15: {
- id: 15,
- name: 'Automotive',
- slug: 'Automotive',
- position: 0,
- visible: true,
- variation: false,
- options: [ 'test' ],
- },
- 1: {
- id: 1,
- name: 'Color',
- slug: 'Color',
- position: 1,
- visible: true,
- variation: true,
- options: [ 'Beige', 'black', 'Blue' ],
- },
- Quality: {
- id: 0,
- name: 'Quality',
- slug: 'Quality',
- position: 2,
- visible: true,
- variation: false,
- options: [ 'low', 'high' ],
- },
- 3: {
- id: 3,
- name: 'Random',
- slug: 'Random',
- position: 3,
- visible: true,
- variation: true,
- options: [ 'Beige', 'black', 'Blue' ],
- },
-};
-
-describe( 'reorderSortableProductAttributePositions', () => {
- it( 'should update product attribute positions depending on JSX.Element order', () => {
- const elements = { 1: 0, 15: 1, 3: 2, Quality: 3 };
- const newList = reorderSortableProductAttributePositions(
- elements,
- attributeList
- );
- expect( newList[ 0 ].position ).toEqual( 0 );
- expect( newList[ 0 ].id ).toEqual( 1 );
- expect( newList[ 1 ].position ).toEqual( 2 );
- expect( newList[ 1 ].id ).toEqual( 3 );
- expect( newList[ 2 ].position ).toEqual( 1 );
- expect( newList[ 2 ].id ).toEqual( 15 );
- expect( newList[ 3 ].position ).toEqual( 3 );
- expect( newList[ 3 ].id ).toEqual( 0 );
- } );
-} );
-
-describe( 'getAttributeKey', () => {
- it( 'should return the attribute key', () => {
- expect( getAttributeKey( attributeList[ '15' ] ) ).toEqual( 15 );
- expect( getAttributeKey( attributeList.Quality ) ).toEqual( 'Quality' );
- } );
-} );
-
-describe( 'hasTermsOrOptions', () => {
- it( 'should return true if the attribute has local terms (options)', () => {
- const attribute: EnhancedProductAttribute = {
- name: 'Color',
- id: 0,
- slug: 'color',
- position: 0,
- visible: true,
- variation: true,
- options: [ 'Beige', 'black', 'Blue' ],
- };
-
- expect( hasTermsOrOptions( attribute ) ).toBe( true );
- } );
-
- it( 'should return true if the attribute has global terms', () => {
- const terms: ProductAttributeTerm[] = [
- {
- id: 1,
- name: 'red',
- slug: 'red',
- description: 'red color',
- count: 1,
- menu_order: 0,
- },
- {
- id: 2,
- name: 'blue',
- slug: 'blue',
- description: 'blue color',
- count: 1,
- menu_order: 1,
- },
- {
- id: 3,
- name: 'green',
- slug: 'green',
- description: 'green color',
- count: 1,
- menu_order: 2,
- },
- ];
-
- const attribute: EnhancedProductAttribute = {
- name: 'Color',
- id: 123,
- slug: 'color',
- position: 0,
- visible: true,
- variation: true,
- terms,
- options: [],
- };
-
- expect( hasTermsOrOptions( attribute ) ).toBe( true );
- } );
-
- it( 'should return false if the attribute has neither terms nor options', () => {
- const attribute: EnhancedProductAttribute = {
- name: 'Empty',
- id: 999,
- slug: 'empty',
- position: 0,
- visible: true,
- variation: true,
- options: [],
- };
- expect( hasTermsOrOptions( attribute ) ).toBe( false );
- } );
-
- it( 'should return false if the attribute is null', () => {
- const attribute = null;
- expect( hasTermsOrOptions( attribute ) ).toBe( false );
- } );
-} );
-
-describe( 'isAttributeFilledOut', () => {
- it( 'should return true if the attribute has a name and local terms (options)', () => {
- const attribute: EnhancedProductAttribute = {
- name: 'Color',
- id: 0,
- slug: 'color',
- position: 0,
- visible: true,
- variation: true,
- options: [ 'Beige', 'black', 'Blue' ],
- };
-
- expect( isAttributeFilledOut( attribute ) ).toBe( true );
- } );
-
- it( 'should return true if the attribute has a name and global terms', () => {
- const terms: ProductAttributeTerm[] = [
- {
- id: 1,
- name: 'red',
- slug: 'red',
- description: 'red color',
- count: 1,
- menu_order: 0,
- },
- {
- id: 2,
- name: 'blue',
- slug: 'blue',
- description: 'blue color',
- count: 1,
- menu_order: 1,
- },
- {
- id: 3,
- name: 'green',
- slug: 'green',
- description: 'green color',
- count: 1,
- menu_order: 2,
- },
- ];
-
- const attribute: EnhancedProductAttribute = {
- name: 'Color',
- id: 123,
- slug: 'color',
- position: 0,
- visible: true,
- variation: true,
- terms,
- options: [],
- };
-
- expect( isAttributeFilledOut( attribute ) ).toBe( true );
- } );
-
- it( 'should return false if the attribute has a name but no terms or options', () => {
- const attribute: EnhancedProductAttribute = {
- name: 'Empty',
- id: 999,
- slug: 'empty',
- position: 0,
- visible: true,
- variation: true,
- options: [],
- };
-
- expect( isAttributeFilledOut( attribute ) ).toBe( false );
- } );
-
- it( 'should return false if the attribute is null', () => {
- const attribute = null;
- expect( isAttributeFilledOut( attribute ) ).toBe( false );
- } );
-
- it( 'should return false if the attribute has no name', () => {
- const attribute: EnhancedProductAttribute = {
- name: '',
- id: 0,
- slug: 'color',
- position: 0,
- visible: true,
- variation: true,
- options: [ 'Beige', 'black', 'Blue' ],
- };
-
- expect( isAttributeFilledOut( attribute ) ).toBe( false );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/attribute-control/types.ts b/packages/js/product-editor/src/components/attribute-control/types.ts
deleted file mode 100644
index e037743cc08..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/types.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import {
- ProductAttributeTerm,
- ProductProductAttribute,
-} from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-import { AttributesComboboxControlItem } from '../attribute-combobox-field/types';
-
-export type AttributeControlEmptyStateProps = {
- addAttribute: ( search?: string ) => void;
-};
-
-export type AttributeControlProps = {
- value: EnhancedProductAttribute[];
- onAdd?: ( attribute: EnhancedProductAttribute[] ) => void;
- onAddAnother?: () => void;
- onRemoveItem?: () => void;
- onChange: ( value: ProductProductAttribute[] ) => void;
- onEdit?: ( attribute: ProductProductAttribute ) => void;
- onRemove?: ( attribute: ProductProductAttribute ) => void;
- onRemoveCancel?: ( attribute: ProductProductAttribute ) => void;
- onNewModalCancel?: () => void;
- onNewModalClose?: () => void;
- onNewModalOpen?: () => void;
- onEditModalCancel?: ( attribute?: ProductProductAttribute ) => void;
- onEditModalClose?: ( attribute?: ProductProductAttribute ) => void;
- onEditModalOpen?: ( attribute?: ProductProductAttribute ) => void;
- onNoticeDismiss?: () => void;
- renderCustomEmptyState?: (
- props: AttributeControlEmptyStateProps
- ) => undefined | JSX.Element;
- createNewAttributesAsGlobal?: boolean;
- useRemoveConfirmationModal?: boolean;
- disabledAttributeIds?: number[];
- termsAutoSelection?: 'first' | 'all';
- defaultVisibility?: boolean;
- uiStrings?: {
- notice?: string | React.ReactElement;
- emptyStateSubtitle?: string;
- newAttributeListItemLabel?: string;
- newAttributeModalTitle?: string;
- newAttributeModalDescription?: string | React.ReactElement;
- newAttributeModalNotice?: string;
- customAttributeHelperMessage?: string;
- attributeRemoveLabel?: string;
- attributeRemoveConfirmationMessage?: string;
- attributeRemoveConfirmationModalMessage?: string;
- globalAttributeHelperMessage?: string;
- disabledAttributeMessage?: string;
- };
-};
-
-export type AttributeTableRowProps = {
- index: number;
- attribute: EnhancedProductAttribute | null;
- attributePlaceholder: string;
- disabledAttributeMessage: string;
-
- isLoadingAttributes: boolean;
- attributes: AttributesComboboxControlItem[];
-
- termPlaceholder: string;
- termLabel?: string;
- termsAutoSelection?: 'first' | 'all';
-
- clearButtonDisabled?: boolean;
- removeLabel: string;
-
- onNewAttributeAdd?: ( value: string, index: number ) => void;
- onAttributeSelect: (
- attribute: AttributesComboboxControlItem,
- index: number
- ) => void;
-
- onTermsSelect: (
- terms: ProductAttributeTerm[] | string[],
- index: number,
- attribute: EnhancedProductAttribute
- ) => void;
-
- onRemove: ( index: number ) => void;
-};
diff --git a/packages/js/product-editor/src/components/attribute-control/utils.ts b/packages/js/product-editor/src/components/attribute-control/utils.ts
deleted file mode 100644
index 6856f73c5aa..00000000000
--- a/packages/js/product-editor/src/components/attribute-control/utils.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import type { ProductProductAttribute } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import type { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-
-/**
- * Returns the attribute key. The key will be the `id` or the `name` when the id is 0.
- *
- * @param { ProductProductAttribute } attribute product attribute.
- * @return string|number
- */
-export function getAttributeKey(
- attribute: ProductProductAttribute
-): number | string {
- return attribute.id !== 0 ? attribute.id : attribute.name;
-}
-
-/**
- * Get an attribute ID that works universally across global and local attributes.
- *
- * @param attribute Product attribute.
- * @return string
- */
-export const getAttributeId = ( attribute: ProductProductAttribute ) =>
- `${ attribute.id }-${ attribute.name }`;
-
-/**
- * Updates the position of a product attribute from the new items list.
- *
- * @param { Object } items key value pair of list items positions.
- * @param { Object } attributeKeyValues key value pair of product attributes.
- */
-export function reorderSortableProductAttributePositions(
- items: Record< number | string, number >,
- attributeKeyValues: Record< number | string, ProductProductAttribute >
-): ProductProductAttribute[] {
- return Object.keys( attributeKeyValues ).map(
- ( attributeKey: number | string ): ProductProductAttribute => {
- if ( ! isNaN( items[ attributeKey ] ) ) {
- return {
- ...attributeKeyValues[ attributeKey ],
- position: items[ attributeKey ],
- };
- }
- return {
- ...attributeKeyValues[ attributeKey ],
- };
- }
- );
-}
-
-/**
- * Checks if the given attribute has
- * either terms (global attributes) or options (local attributes).
- *
- * @param {EnhancedProductAttribute} attribute - The attribute to check.
- * @return {boolean} True if the attribute has terms or options, false otherwise.
- */
-export const hasTermsOrOptions = (
- attribute: EnhancedProductAttribute | null
-): boolean => !! ( attribute?.terms?.length || attribute?.options?.length );
-
-/**
- * Checks if the given attribute is filled out,
- * meaning it has a name and either terms or options.
- *
- * @param {EnhancedProductAttribute | null} attribute - The attribute to check.
- * @return {attribute is EnhancedProductAttribute} - True if the attribute is filled out, otherwise false.
- */
-export const isAttributeFilledOut = (
- attribute: EnhancedProductAttribute | null
-): attribute is EnhancedProductAttribute =>
- !! attribute?.name.length && hasTermsOrOptions( attribute );
diff --git a/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.scss b/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.scss
deleted file mode 100644
index 67e51af0f07..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.woocommerce-attribute-input-field {
- &__add-new {
- display: flex;
- align-items: center;
- font-weight: 600;
- }
- &__add-new-icon {
- margin-right: $gap-small;
- }
- &__no-results {
- padding: $gap-small;
- }
-}
-
-.woocommerce-experimental-select-control__popover-menu-container {
- .woocommerce-experimental-select-control__menu-item[disabled] {
- pointer-events: none;
- color: $gray-600;
- }
- .disabled-element-wrapper {
- cursor: not-allowed;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.tsx b/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.tsx
deleted file mode 100644
index de06ff4ce0b..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/attribute-input-field.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import { Spinner } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import {
- __experimentalSelectControl as SelectControl,
- __experimentalSelectControlMenu as Menu,
-} from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { MenuAttributeList } from './menu-attribute-list';
-import {
- AttributeInputFieldProps,
- getItemPropsType,
- getMenuPropsType,
- AttributeInputFieldItemProps,
- UseComboboxGetItemPropsOptions,
- UseComboboxGetMenuPropsOptions,
-} from './types';
-
-export const AttributeInputField = ( {
- value = null,
- items = [],
- isLoading,
- onChange,
- placeholder,
- label,
- disabled,
- disabledAttributeMessage,
- createNewAttributesAsGlobal = false,
-}: AttributeInputFieldProps ) => {
- const getFilteredItems = (
- allItems: AttributeInputFieldItemProps[],
- inputValue: string
- ) => {
- const filteredItems = allItems.filter( ( item ) =>
- ( item.name || '' )
- .toLowerCase()
- .startsWith( inputValue.toLowerCase() )
- );
-
- if (
- inputValue.length > 0 &&
- ( createNewAttributesAsGlobal ||
- ! allItems.find(
- ( item ) =>
- item.name.toLowerCase() === inputValue.toLowerCase()
- ) )
- ) {
- return [
- ...filteredItems,
- {
- id: -99,
- name: inputValue,
- },
- ];
- }
-
- return filteredItems;
- };
-
- return (
- <SelectControl< AttributeInputFieldItemProps >
- className="woocommerce-attribute-input-field"
- items={ items }
- label={ label || '' }
- disabled={ disabled }
- getFilteredItems={ getFilteredItems }
- placeholder={ placeholder }
- getItemLabel={ ( item ) => item?.name || '' }
- getItemValue={ ( item ) => item?.id || '' }
- selected={ value }
- onSelect={ onChange }
- __experimentalOpenMenuOnFocus
- >
- { ( {
- items: renderItems,
- highlightedIndex,
- getItemProps,
- getMenuProps,
- isOpen,
- }: {
- items: AttributeInputFieldItemProps[];
- highlightedIndex: number;
- getItemProps: (
- options: UseComboboxGetItemPropsOptions< AttributeInputFieldItemProps >
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- ) => any;
- getMenuProps: getMenuPropsType;
- isOpen: boolean;
- } ) => {
- return (
- <Menu getMenuProps={ getMenuProps } isOpen={ isOpen }>
- { isLoading ? (
- <Spinner />
- ) : (
- <MenuAttributeList
- renderItems={ renderItems }
- highlightedIndex={ highlightedIndex }
- disabledAttributeMessage={
- disabledAttributeMessage
- }
- getItemProps={
- getItemProps as (
- options: UseComboboxGetMenuPropsOptions
- ) => getItemPropsType< AttributeInputFieldItemProps >
- }
- />
- ) }
- </Menu>
- );
- } }
- </SelectControl>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-input-field/index.ts b/packages/js/product-editor/src/components/attribute-input-field/index.ts
deleted file mode 100644
index 6000ad95f49..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './attribute-input-field';
diff --git a/packages/js/product-editor/src/components/attribute-input-field/menu-attribute-list.tsx b/packages/js/product-editor/src/components/attribute-input-field/menu-attribute-list.tsx
deleted file mode 100644
index 8fd7c37e4a1..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/menu-attribute-list.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import { plus } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
-import { __experimentalSelectControlMenuItem as MenuItem } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import type {
- MenuAttributeListProps,
- AttributeInputFieldItemProps,
- UseComboboxGetMenuPropsOptions,
-} from './types';
-
-function isNewAttributeListItem(
- attribute: AttributeInputFieldItemProps
-): boolean {
- return attribute.id === -99;
-}
-
-function sanitizeSlugName( slug: string | undefined ): string {
- return slug && slug.startsWith( 'pa_' ) ? slug.substring( 3 ) : '';
-}
-
-export const MenuAttributeList = ( {
- disabledAttributeMessage = '',
- renderItems,
- highlightedIndex,
- getItemProps,
-}: MenuAttributeListProps ) => {
- if ( renderItems.length > 0 ) {
- return (
- <Fragment>
- { renderItems.map( ( item, index: number ) => (
- <MenuItem
- key={ item.id }
- index={ index }
- isActive={ highlightedIndex === index }
- item={ item }
- getItemProps={ (
- options: UseComboboxGetMenuPropsOptions
- ) => ( {
- ...getItemProps( options ),
- disabled: item.isDisabled || undefined,
- } ) }
- tooltipText={
- item.isDisabled
- ? disabledAttributeMessage
- : sanitizeSlugName( item.slug )
- }
- >
- { isNewAttributeListItem( item ) ? (
- <div className="woocommerce-attribute-input-field__add-new">
- <Icon
- icon={ plus }
- size={ 20 }
- className="woocommerce-attribute-input-field__add-new-icon"
- />
- <span>
- { sprintf(
- /* translators: The name of the new attribute term to be created */
- __( 'Create "%s"', 'woocommerce' ),
- item.name
- ) }
- </span>
- </div>
- ) : (
- item.name
- ) }
- </MenuItem>
- ) ) }
- </Fragment>
- );
- }
- return (
- <div className="woocommerce-attribute-input-field__no-results">
- { __( 'Nothing yet. Type to create.', 'woocommerce' ) }
- </div>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-input-field/test/attribute-input-field.spec.tsx b/packages/js/product-editor/src/components/attribute-input-field/test/attribute-input-field.spec.tsx
deleted file mode 100644
index 77f47ebb480..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/test/attribute-input-field.spec.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useState, createElement } from '@wordpress/element';
-import type {
- ProductProductAttribute,
- QueryProductAttribute,
-} from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { AttributeInputField } from '../attribute-input-field';
-import type { AttributeInputFieldItemProps } from '../types';
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- useDispatch: jest.fn().mockReturnValue( {
- createErrorNotice: jest.fn(),
- createProductAttribute: jest.fn(),
- } ),
-} ) );
-
-jest.mock( '@wordpress/components', () => ( {
- __esModule: true,
- Spinner: () => <div>spinner</div>,
- Icon: () => <div>icon</div>,
-} ) );
-
-jest.mock( '@woocommerce/components', () => {
- return {
- __esModule: true,
- __experimentalSelectControlMenu: ( {
- children,
- }: {
- children: JSX.Element;
- } ) => children,
- __experimentalSelectControlMenuItem: ( {
- children,
- getItemProps,
- item,
- }: {
- children: JSX.Element;
- getItemProps: ( options: { item: QueryProductAttribute } ) => {
- onClick: () => void;
- };
- item: QueryProductAttribute;
- } ) => (
- <button onClick={ () => getItemProps( { item } ).onClick() }>
- { children }
- </button>
- ),
- __experimentalSelectControl: ( {
- children,
- items,
- getFilteredItems,
- onSelect,
- onRemove,
- }: {
- children: ( options: {
- isOpen: boolean;
- items: QueryProductAttribute[];
- getMenuProps: () => Record< string, string >;
- getItemProps: ( options: { item: QueryProductAttribute } ) => {
- onClick: () => void;
- };
- } ) => JSX.Element;
- items: QueryProductAttribute[];
- onSelect: ( item: QueryProductAttribute ) => void;
- onRemove: ( item: QueryProductAttribute ) => void;
- getFilteredItems: (
- allItems: QueryProductAttribute[],
- inputValue: string,
- selectedItems: QueryProductAttribute[]
- ) => QueryProductAttribute[];
- } ) => {
- const [ input, setInput ] = useState( '' );
- return (
- <div>
- attribute_input_field
- <button onClick={ () => setInput( 'Co' ) }>
- Update Input
- </button>
- <button onClick={ () => onRemove( items[ 0 ] ) }>
- remove attribute
- </button>
- <div>
- { children( {
- isOpen: true,
- items: getFilteredItems( items, input, [] ),
- getMenuProps: () => ( {} ),
- getItemProps: ( {
- item,
- }: {
- item: QueryProductAttribute;
- } ) => ( {
- onClick: () => onSelect( item ),
- } ),
- } ) }
- </div>
- </div>
- );
- },
- };
-} );
-
-const attributeList: ProductProductAttribute[] = [
- {
- id: 15,
- name: 'Automotive',
- slug: 'Automotive',
- position: 0,
- visible: true,
- variation: false,
- options: [ 'test' ],
- },
- {
- id: 1,
- name: 'Color',
- slug: 'Color',
- position: 2,
- visible: true,
- variation: true,
- options: [
- 'Beige',
- 'black',
- 'Blue',
- 'brown',
- 'Gray',
- 'Green',
- 'mint',
- 'orange',
- 'pink',
- 'Red',
- 'white',
- 'Yellow',
- ],
- },
-];
-
-const items: AttributeInputFieldItemProps[] = attributeList.map(
- ( attribute, i ) => ( {
- id: attribute.id,
- name: attribute.name,
- slug: attribute.slug,
- isDisabled: ! Boolean( i % 2 ),
- } )
-);
-
-describe( 'AttributeInputField', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should show spinner while attributes are loading', () => {
- const { queryByText } = render(
- <AttributeInputField isLoading={ true } onChange={ jest.fn() } />
- );
- expect( queryByText( 'spinner' ) ).toBeInTheDocument();
- } );
-
- it( 'should render attributes when finished loading', () => {
- const { queryByText } = render(
- <AttributeInputField
- items={ items }
- isLoading={ false }
- onChange={ jest.fn() }
- />
- );
- expect( queryByText( 'spinner' ) ).not.toBeInTheDocument();
- expect( queryByText( items[ 0 ].name ) ).toBeInTheDocument();
- expect( queryByText( items[ 1 ].name ) ).toBeInTheDocument();
- } );
-
- it( 'should filter attributes by name case insensitive', () => {
- const { queryByText } = render(
- <AttributeInputField
- items={ items }
- isLoading={ false }
- onChange={ jest.fn() }
- />
- );
- userEvent.click( queryByText( 'Update Input' )! );
- expect(
- queryByText( attributeList[ 0 ].name )
- ).not.toBeInTheDocument();
- expect( queryByText( attributeList[ 1 ].name ) ).toBeInTheDocument();
- } );
-
- it( 'should trigger onChange when onSelect is triggered with attribute value', () => {
- const onChangeMock = jest.fn();
-
- const { queryByText } = render(
- <AttributeInputField
- items={ items }
- isLoading={ false }
- onChange={ onChangeMock }
- />
- );
-
- queryByText( items[ 0 ].name )?.click();
-
- expect( onChangeMock ).toHaveBeenCalledWith( items[ 0 ] );
- } );
-
- it( 'should show the create option when the search value does not match any attributes', () => {
- const { queryByText } = render(
- <AttributeInputField onChange={ jest.fn() } />
- );
- userEvent.click( queryByText( 'Update Input' ) as HTMLElement );
- expect( queryByText( 'Create "Co"' ) ).toBeInTheDocument();
- } );
-} );
diff --git a/packages/js/product-editor/src/components/attribute-input-field/types.ts b/packages/js/product-editor/src/components/attribute-input-field/types.ts
deleted file mode 100644
index e681df2d006..00000000000
--- a/packages/js/product-editor/src/components/attribute-input-field/types.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductAttribute } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { EnhancedProductAttribute } from '../../hooks/use-product-attributes';
-
-/*
- * AttributeInputField item props.
- */
-export type AttributeInputFieldItemProps = Pick<
- ProductAttribute,
- 'id' | 'name'
-> & {
- slug?: string;
- isDisabled?: boolean;
-};
-
-export type AttributeInputFieldProps = {
- value?: EnhancedProductAttribute | null;
- onChange: ( value: AttributeInputFieldItemProps ) => void;
- label?: string;
- items?: AttributeInputFieldItemProps[];
- isLoading?: boolean;
- placeholder?: string;
- disabled?: boolean;
- disabledAttributeIds?: number[];
- disabledAttributeMessage?: string;
- ignoredAttributeIds?: number[];
- createNewAttributesAsGlobal?: boolean;
-};
-
-export type MenuAttributeListProps = {
- renderItems: AttributeInputFieldItemProps[];
- highlightedIndex: number;
- disabledAttributeMessage?: string;
- getItemProps: (
- options: UseComboboxGetMenuPropsOptions
- ) => getItemPropsType< AttributeInputFieldItemProps >;
-};
-
-export interface GetPropsWithRefKey {
- refKey?: string;
-}
-export interface GetMenuPropsOptions
- extends React.HTMLProps< HTMLElement >,
- GetPropsWithRefKey {
- [ 'aria-label' ]?: string;
-}
-
-export interface UseComboboxGetMenuPropsOptions
- extends GetPropsWithRefKey,
- GetMenuPropsOptions {}
-
-export interface GetPropsCommonOptions {
- suppressRefError?: boolean;
-}
-
-export interface GetItemPropsOptions< Item >
- extends React.HTMLProps< HTMLElement > {
- index?: number;
- item: Item;
- isSelected?: boolean;
- disabled?: boolean;
-}
-
-export interface UseComboboxGetItemPropsOptions< Item >
- extends GetItemPropsOptions< Item >,
- GetPropsWithRefKey {}
-
-export type getMenuPropsType = (
- options?: UseComboboxGetMenuPropsOptions,
- otherOptions?: GetPropsCommonOptions
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
-) => any;
-
-export type getItemPropsType< ItemType > = (
- options: UseComboboxGetItemPropsOptions< ItemType >
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
-) => any;
diff --git a/packages/js/product-editor/src/components/attribute-list-item/add-attribute-list-item.tsx b/packages/js/product-editor/src/components/attribute-list-item/add-attribute-list-item.tsx
deleted file mode 100644
index a146c0008a8..00000000000
--- a/packages/js/product-editor/src/components/attribute-list-item/add-attribute-list-item.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { ListItem } from '@woocommerce/components';
-import { createElement } from '@wordpress/element';
-
-type NewAttributeListItemProps = {
- label?: string;
- onClick?: () => void;
-};
-
-export const NewAttributeListItem = ( {
- label = __( 'Add attribute', 'woocommerce' ),
- onClick,
-}: NewAttributeListItemProps ) => {
- return (
- <ListItem className="woocommerce-add-attribute-list-item">
- <Button
- variant="secondary"
- className="woocommerce-add-attribute-list-item__add-button"
- onClick={ onClick }
- >
- { label }
- </Button>
- </ListItem>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss b/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss
deleted file mode 100644
index 65f0cf0d79f..00000000000
--- a/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.woocommerce-add-attribute-list-item {
- min-height: 82px;
- padding: 0 $gap-large;
-
- &:last-child {
- margin-bottom: -1px;
- }
-}
-
-.woocommerce-list-item.woocommerce-attribute-list-item {
- display: grid;
- background: none;
- border: none;
- padding: 0;
- grid-template-columns: 1fr 2fr 16 * $grid-unit;
- min-height: 9 * $grid-unit;
- padding: $grid-unit + $grid-unit-05 0;
-}
-
-.woocommerce-attribute-list-item {
- &:not(:last-child) {
- border-bottom: 1px solid $gray-200;
- }
-
- &__actions {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-end;
- gap: $gap-smaller;
- }
-
- &__actions-tooltip.components-tooltip.components-popover
- .components-popover__content {
- width: 100%;
- max-width: 150px;
- white-space: normal;
- }
-
- &__actions-icon-wrapper {
- display: flex;
- align-items: center;
- position: relative;
-
- &-icon {
- color: $gray-600;
- cursor: help;
- }
-
- &-help-icon {
- position: absolute;
- right: -2px;
- bottom: 0px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx b/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx
deleted file mode 100644
index 291aeb73455..00000000000
--- a/packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * External dependencies
- */
-import { DragEventHandler } from 'react';
-import { ListItem, Tag } from '@woocommerce/components';
-import { ProductProductAttribute } from '@woocommerce/data';
-import { sprintf, __ } from '@wordpress/i18n';
-import { Button, Tooltip } from '@wordpress/components';
-import { closeSmall } from '@wordpress/icons';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import NotFilterableIcon from './not-filterable-icon';
-import SeenIcon from '../../icons/seen-icon';
-
-type AttributeListItemProps = {
- attribute: ProductProductAttribute;
- editLabel?: string;
- removeLabel?: string;
- onDragStart?: DragEventHandler< HTMLDivElement >;
- onDragEnd?: DragEventHandler< HTMLDivElement >;
- onEditClick?: ( attribute: ProductProductAttribute ) => void;
- onRemoveClick?: ( attribute: ProductProductAttribute ) => void;
-};
-
-const VISIBLE_TEXT = __( 'Visible in product details', 'woocommerce' );
-const NOT_FILTERABLE_CUSTOM_ATTR_TEXT = __(
- 'Custom attribute. Customers can’t filter or search by it to find this product',
- 'woocommerce'
-);
-
-export const AttributeListItem = ( {
- attribute,
- editLabel = __( 'Edit', 'woocommerce' ),
- removeLabel = __( 'Remove attribute', 'woocommerce' ),
- onDragStart,
- onDragEnd,
- onEditClick,
- onRemoveClick,
-}: AttributeListItemProps ) => {
- return (
- <ListItem
- className="woocommerce-attribute-list-item"
- onDragStart={ onDragStart }
- onDragEnd={ onDragEnd }
- >
- <div>{ attribute.name }</div>
- <div>
- { attribute.options
- .slice( 0, attribute.options.length > 3 ? 2 : 3 )
- .map( ( option ) => (
- <Tag key={ option } label={ option } />
- ) ) }
- { attribute.options.length > 3 && (
- <Tag
- label={ sprintf(
- /* translators: %i: number of additional attribute values that are hidden */
- __( '+ %d more', 'woocommerce' ),
- attribute.options.length - 2
- ) }
- />
- ) }
- </div>
- <div className="woocommerce-attribute-list-item__actions">
- { attribute.id === 0 && (
- <Tooltip
- className="woocommerce-attribute-list-item__actions-tooltip"
- position="top center"
- text={ NOT_FILTERABLE_CUSTOM_ATTR_TEXT }
- >
- <div className="woocommerce-attribute-list-item__actions-icon-wrapper">
- <NotFilterableIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
- </div>
- </Tooltip>
- ) }
- { attribute.visible && (
- <Tooltip
- className="woocommerce-attribute-list-item__actions-tooltip"
- placement="top"
- text={ VISIBLE_TEXT }
- >
- <div className="woocommerce-attribute-list-item__actions-icon-wrapper">
- <SeenIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
- </div>
- </Tooltip>
- ) }
- { typeof onEditClick === 'function' && (
- <Button
- variant="tertiary"
- onClick={ () => onEditClick( attribute ) }
- >
- { editLabel }
- </Button>
- ) }
- { typeof onRemoveClick === 'function' && (
- <Button
- icon={ closeSmall }
- label={ removeLabel }
- onClick={ () => onRemoveClick( attribute ) }
- ></Button>
- ) }
- </div>
- </ListItem>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-list-item/index.ts b/packages/js/product-editor/src/components/attribute-list-item/index.ts
deleted file mode 100644
index 018701d9d73..00000000000
--- a/packages/js/product-editor/src/components/attribute-list-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './add-attribute-list-item';
-export * from './attribute-list-item';
diff --git a/packages/js/product-editor/src/components/attribute-list-item/not-filterable-icon.tsx b/packages/js/product-editor/src/components/attribute-list-item/not-filterable-icon.tsx
deleted file mode 100644
index 92b66921647..00000000000
--- a/packages/js/product-editor/src/components/attribute-list-item/not-filterable-icon.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export default function NotFilterableIcon( {
- width = 24,
- height = 24,
- ...props
-}: React.SVGProps< SVGSVGElement > ) {
- return (
- <svg
- { ...props }
- width={ width }
- height={ height }
- viewBox={ `0 0 ${ width } ${ height }` }
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <g>
- <path
- d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
- fill="#949494"
- />
- <rect
- x="16.7734"
- y="4"
- width="1.22727"
- height="16"
- transform="rotate(30 16.7734 4)"
- fill="#949494"
- />
- <rect
- x="16"
- y="3"
- width="1.22727"
- height="16"
- transform="rotate(30 16 3)"
- fill="white"
- />
- </g>
- <defs>
- <clipPath id="clip0_4951_450432">
- <rect width="24" height="24" fill="white" />
- </clipPath>
- </defs>
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.scss b/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.scss
deleted file mode 100644
index 1bc3b232ed4..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.woocommerce-attribute-term-field {
- &__loading-spinner {
- padding: 12px 0;
- }
- &__add-new {
- display: flex;
- align-items: center;
- font-weight: 600;
- }
- &__add-new-icon {
- margin-right: $gap-small;
- }
-}
-
-.woocommerce-attribute-term-field__add-new {
- display: flex;
- align-items: center;
-}
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.tsx b/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.tsx
deleted file mode 100644
index b8038b7edd5..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-/**
- * External dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import { CheckboxControl, Icon, Spinner } from '@wordpress/components';
-import { resolveSelect, useDispatch } from '@wordpress/data';
-import {
- useCallback,
- useEffect,
- useRef,
- useState,
- createElement,
- Fragment,
-} from '@wordpress/element';
-import { recordEvent } from '@woocommerce/tracks';
-import { useDebounce } from '@wordpress/compose';
-import { plus } from '@wordpress/icons';
-import {
- ProductAttributeTerm,
- experimentalProductAttributeTermsStore,
-} from '@woocommerce/data';
-import {
- selectControlStateChangeTypes,
- __experimentalSelectControl as SelectControl,
- __experimentalSelectControlMenu as Menu,
- __experimentalSelectControlMenuItem as MenuItem,
-} from '@woocommerce/components';
-import { cleanForSlug } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { CreateAttributeTermModal } from './create-attribute-term-modal';
-import { TRACKS_SOURCE } from '../../constants';
-
-type AttributeTermInputFieldProps = {
- value?: ProductAttributeTerm[];
- onChange: ( value: ProductAttributeTerm[] ) => void;
- attributeId?: number;
- placeholder?: string;
- disabled?: boolean;
- label?: string;
- autoCreateOnSelect?: boolean;
- readOnlyWhenClosed?: boolean;
-};
-
-interface customError extends Error {
- code: string;
- message: string;
-}
-
-let uniqueId = 0;
-
-export const AttributeTermInputField = ( {
- value = [],
- onChange,
- placeholder,
- disabled,
- attributeId,
- label = '',
- autoCreateOnSelect = true,
- readOnlyWhenClosed = false,
-}: AttributeTermInputFieldProps ) => {
- const attributeTermInputId = useRef(
- `woocommerce-attribute-term-field-${ ++uniqueId }`
- );
- const [ fetchedItems, setFetchedItems ] = useState<
- ProductAttributeTerm[]
- >( [] );
- const [ isFetching, setIsFetching ] = useState( false );
- const [ isCreatingTerm, setIsCreatingTerm ] = useState( false );
- const [ addNewAttributeTermName, setAddNewAttributeTermName ] =
- useState< string >();
- const { createNotice } = useDispatch( 'core/notices' );
- const { createProductAttributeTerm, invalidateResolutionForStoreSelector } =
- useDispatch( experimentalProductAttributeTermsStore );
-
- const fetchItems = useCallback(
- ( searchString?: string | undefined ) => {
- setIsFetching( true );
- return resolveSelect( experimentalProductAttributeTermsStore )
- .getProductAttributeTerms( {
- search: searchString || '',
- attribute_id: attributeId,
- } )
- .then(
- ( attributeTerms ) => {
- setFetchedItems( attributeTerms || [] );
- setIsFetching( false );
- return attributeTerms;
- },
- ( error: string ) => {
- setIsFetching( false );
- return error;
- }
- );
- },
- [ attributeId ]
- );
-
- const debouncedSearch = useDebounce( fetchItems, 250 );
-
- useEffect( () => {
- if (
- ! disabled &&
- attributeId !== undefined &&
- ! fetchedItems.length
- ) {
- fetchItems();
- }
- }, [ disabled, attributeId ] );
-
- const onRemove = ( item: ProductAttributeTerm ) => {
- onChange( value.filter( ( opt ) => opt.slug !== item.slug ) );
- };
-
- const focusSelectControl = () => {
- const selectControlInputField: HTMLInputElement | null =
- document.querySelector(
- '.' +
- attributeTermInputId.current +
- ' .woocommerce-experimental-select-control__input'
- );
- if ( selectControlInputField ) {
- setTimeout( () => {
- selectControlInputField.focus();
- }, 0 );
- }
- };
-
- const createAttributeTerm = async (
- attribute: Partial< ProductAttributeTerm >
- ) => {
- recordEvent( 'product_attribute_term_add', {
- source: TRACKS_SOURCE,
- } );
- setIsCreatingTerm( true );
- try {
- const newAttribute = await createProductAttributeTerm( {
- ...attribute,
- attribute_id: attributeId,
- } );
- recordEvent( 'product_attribute_term_add_success', {
- source: TRACKS_SOURCE,
- } );
- onChange( [ ...value, newAttribute ] );
- invalidateResolutionForStoreSelector( 'getProductAttributeTerms' );
- setIsCreatingTerm( false );
- } catch ( err: unknown ) {
- let error = {
- source: TRACKS_SOURCE,
- code: 'Unknown error.',
- message: 'An unknown error occurred.',
- };
- let noticeMessage = __(
- 'Failed to create attribute term.',
- 'woocommerce'
- );
- const errorResponse = err as customError;
- if ( errorResponse?.code && errorResponse?.message ) {
- error = {
- ...error,
- code: errorResponse.code,
- message: errorResponse.message,
- };
- if ( errorResponse.code === 'term_exists' ) {
- noticeMessage = __(
- 'Attribute term already exists.',
- 'woocommerce'
- );
- }
- }
- recordEvent( 'product_attribute_term_add_failed', error );
- createNotice( 'error', noticeMessage );
- setIsCreatingTerm( false );
- }
- };
-
- const onSelect = ( item: ProductAttributeTerm ) => {
- // Add new item.
- if ( item.id === -99 ) {
- if ( autoCreateOnSelect ) {
- createAttributeTerm( {
- name: item.name,
- slug: cleanForSlug( item.name ),
- } );
- focusSelectControl();
- } else {
- setAddNewAttributeTermName( item.name );
- }
- return;
- }
- const isSelected = value.find( ( i ) => i.slug === item.slug );
- if ( isSelected ) {
- onRemove( item );
- return;
- }
- onChange( [ ...value, item ] );
- };
-
- const selectedTermSlugs = ( value || [] ).map( ( term ) => term.slug );
-
- return (
- <>
- <SelectControl< ProductAttributeTerm >
- items={ fetchedItems }
- multiple
- disabled={ disabled || ! attributeId }
- label={ label }
- getFilteredItems={ ( allItems, inputValue ) => {
- if (
- inputValue.length > 0 &&
- ! allItems.find(
- ( item ) =>
- item.name.toLowerCase() ===
- inputValue.toLowerCase()
- )
- ) {
- return [
- ...allItems,
- {
- id: -99,
- name: inputValue,
- } as ProductAttributeTerm,
- ];
- }
- return allItems;
- } }
- onInputChange={ debouncedSearch }
- placeholder={ placeholder || '' }
- getItemLabel={ ( item ) => item?.name || '' }
- getItemValue={ ( item ) => item?.slug || '' }
- stateReducer={ ( state, actionAndChanges ) => {
- const { changes, type } = actionAndChanges;
- switch ( type ) {
- case selectControlStateChangeTypes.ControlledPropUpdatedSelectedItem:
- const listIsOpen = isCreatingTerm
- ? { isOpen: isCreatingTerm }
- : {};
- return {
- ...changes,
- ...listIsOpen,
- inputValue: state.inputValue,
- };
- case selectControlStateChangeTypes.ItemClick:
- if (
- changes.selectedItem &&
- changes.selectedItem.id === -99
- ) {
- return changes;
- }
- return {
- ...changes,
- isOpen: true,
- inputValue: state.inputValue,
- highlightedIndex: state.highlightedIndex,
- };
- default:
- return changes;
- }
- } }
- selected={ value }
- onSelect={ onSelect }
- onRemove={ onRemove }
- readOnlyWhenClosed={ readOnlyWhenClosed }
- className={
- 'woocommerce-attribute-term-field ' +
- attributeTermInputId.current
- }
- __experimentalOpenMenuOnFocus
- >
- { ( {
- items,
- highlightedIndex,
- getItemProps,
- getMenuProps,
- isOpen,
- } ) => {
- return (
- <Menu isOpen={ isOpen } getMenuProps={ getMenuProps }>
- { [
- isFetching || isCreatingTerm ? (
- <div
- key="loading-spinner"
- className="woocommerce-attribute-term-field__loading-spinner"
- >
- <Spinner />
- </div>
- ) : null,
- ...items.map( ( item, menuIndex ) => {
- const isSelected =
- selectedTermSlugs.includes( item.slug );
-
- return (
- <MenuItem
- key={ `${ item.slug }` }
- index={ menuIndex }
- isActive={
- highlightedIndex === menuIndex
- }
- item={ item }
- getItemProps={ getItemProps }
- >
- { item.id !== -99 ? (
- <CheckboxControl
- onChange={ () => null }
- checked={ isSelected }
- // @ts-expect-error The label prop can be a string, however, the final consumer of this prop accepts ReactNode.
- label={
- <span>
- { item.name }
- </span>
- }
- />
- ) : (
- <div className="woocommerce-attribute-term-field__add-new">
- <Icon
- icon={ plus }
- size={ 20 }
- className="woocommerce-attribute-term-field__add-new-icon"
- />
- <span>
- { sprintf(
- /* translators: The name of the new attribute term to be created */
- __(
- 'Create "%s"',
- 'woocommerce'
- ),
- item.name
- ) }
- </span>
- </div>
- ) }
- </MenuItem>
- );
- } ),
- ].filter(
- ( child ): child is JSX.Element =>
- child !== null
- ) }
- </Menu>
- );
- } }
- </SelectControl>
- { ! autoCreateOnSelect &&
- addNewAttributeTermName &&
- attributeId !== undefined && (
- <CreateAttributeTermModal
- initialAttributeTermName={ addNewAttributeTermName }
- onCancel={ () => {
- setAddNewAttributeTermName( undefined );
- focusSelectControl();
- } }
- attributeId={ attributeId }
- onCreated={ ( newAttribute ) => {
- onSelect( newAttribute );
- setAddNewAttributeTermName( undefined );
- invalidateResolutionForStoreSelector(
- 'getProductAttributeTerms'
- );
- focusSelectControl();
- } }
- />
- ) }
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.scss b/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.scss
deleted file mode 100644
index 87c014b3880..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.woocommerce-create-attribute-term-modal {
- @mixin break-medium {
- min-width: 650px;
- }
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
- .has-error {
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
- .components-base-control:not(:first-child) {
- margin-top: 16px;
- margin-bottom: 0;
- }
-}
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.tsx b/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.tsx
deleted file mode 100644
index b2071036ec4..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/create-attribute-term-modal.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- Button,
- Modal,
- TextareaControl,
- TextControl,
-} from '@wordpress/components';
-import { useState, createElement, Fragment } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { cleanForSlug } from '@wordpress/url';
-import { Form, FormErrors } from '@woocommerce/components';
-import { recordEvent } from '@woocommerce/tracks';
-import {
- ProductAttributeTerm,
- experimentalProductAttributeTermsStore,
-} from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-
-type CreateAttributeTermModalProps = {
- initialAttributeTermName: string;
- attributeId: number;
- onCancel?: () => void;
- onCreated?: ( newAttribute: ProductAttributeTerm ) => void;
-};
-
-export const CreateAttributeTermModal = ( {
- initialAttributeTermName,
- attributeId,
- onCancel = () => {},
- onCreated = () => {},
-}: CreateAttributeTermModalProps ) => {
- const { createNotice } = useDispatch( 'core/notices' );
- const [ isCreating, setIsCreating ] = useState( false );
- const { createProductAttributeTerm } = useDispatch(
- experimentalProductAttributeTermsStore
- );
-
- const onAdd = async ( attribute: Partial< ProductAttributeTerm > ) => {
- recordEvent( 'product_attribute_term_add', {
- source: TRACKS_SOURCE,
- } );
- setIsCreating( true );
- try {
- const newAttribute = await createProductAttributeTerm( {
- ...attribute,
- attribute_id: attributeId,
- } );
- recordEvent( 'product_attribute_term_add_success', {
- source: TRACKS_SOURCE,
- } );
- setIsCreating( false );
- onCreated( newAttribute );
- } catch ( e ) {
- recordEvent( 'product_attribute_term_add_failed', {
- source: TRACKS_SOURCE,
- } );
- createNotice(
- 'error',
- __( 'Failed to create attribute term.', 'woocommerce' )
- );
- setIsCreating( false );
- onCancel();
- }
- };
-
- function validateForm(
- values: Partial< ProductAttributeTerm >
- ): FormErrors< ProductAttributeTerm > {
- const errors: FormErrors< ProductAttributeTerm > = {};
-
- if ( ! values.name?.length ) {
- errors.name = __(
- 'The attribute term name is required.',
- 'woocommerce'
- );
- }
-
- return errors;
- }
-
- return (
- <Modal
- title={ __( 'Create attribute', 'woocommerce' ) }
- onRequestClose={ ( event ) => {
- event?.stopPropagation();
- onCancel();
- } }
- className="woocommerce-create-attribute-term-modal"
- >
- <Form<
- Pick< ProductAttributeTerm, 'name' | 'slug' | 'description' >
- >
- initialValues={ {
- name: initialAttributeTermName,
- slug: cleanForSlug( initialAttributeTermName ),
- description: '',
- } }
- validate={ validateForm }
- errors={ {} }
- onSubmit={ onAdd }
- >
- { ( {
- getInputProps,
- handleSubmit,
- isValidForm,
- setValue,
- values,
- } ) => {
- const nameInputProps = getInputProps( 'name' );
- return (
- <>
- <TextControl
- label={ __( 'Name', 'woocommerce' ) }
- { ...nameInputProps }
- onBlur={ () => {
- nameInputProps.onBlur();
- setValue(
- 'slug',
- cleanForSlug( values.name )
- );
- } }
- />
- <TextControl
- label={ __( 'Slug', 'woocommerce' ) }
- { ...getInputProps( 'slug' ) }
- help={ __(
- 'The “slug” is the URL-friendly version of the name. It is usually all lowercase and contains only letters, numbers, and hyphens.',
- 'woocommerce'
- ) }
- />
- <TextareaControl
- label={ __( 'Description', 'woocommerce' ) }
- { ...getInputProps( 'description' ) }
- />
- <div className="woocommerce-create-attribute-term-modal__buttons">
- <Button
- isSecondary
- label={ __( 'Cancel', 'woocommerce' ) }
- onClick={ () => onCancel() }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- isPrimary
- isBusy={ isCreating }
- label={ __(
- 'Add attribute',
- 'woocommerce'
- ) }
- disabled={ ! isValidForm || isCreating }
- onClick={ handleSubmit }
- >
- { __( 'Add', 'woocommerce' ) }
- </Button>
- </div>
- </>
- );
- } }
- </Form>
- </Modal>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/custom-attribute-term-input-field.tsx b/packages/js/product-editor/src/components/attribute-term-input-field/custom-attribute-term-input-field.tsx
deleted file mode 100644
index c7e6ca1df5c..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/custom-attribute-term-input-field.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * External dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import { CheckboxControl, Icon } from '@wordpress/components';
-import { useState, createElement, Fragment } from '@wordpress/element';
-import { plus } from '@wordpress/icons';
-import {
- __experimentalSelectControl as SelectControl,
- __experimentalSelectControlMenu as Menu,
- __experimentalSelectControlMenuItem as MenuItem,
-} from '@woocommerce/components';
-
-type CustomAttributeTermInputFieldProps = {
- value?: string[];
- onChange: ( value: string[] ) => void;
- placeholder?: string;
- label?: string;
- disabled?: boolean;
-};
-
-type NewTermItem = {
- id: string;
- label: string;
-};
-
-function isNewTermItem(
- item: NewTermItem | string | null
-): item is NewTermItem {
- return item !== null && typeof item === 'object' && !! item.label;
-}
-
-export const CustomAttributeTermInputField = ( {
- value = [],
- onChange,
- placeholder,
- disabled,
- label,
-}: CustomAttributeTermInputFieldProps ) => {
- const [ listItems, setListItems ] =
- useState< Array< string | NewTermItem > >( value );
-
- const onRemove = ( item: string | NewTermItem ) => {
- onChange( value.filter( ( opt ) => opt !== item ) );
- };
-
- const onSelect = ( item: string | NewTermItem ) => {
- // Add new item.
- if ( isNewTermItem( item ) ) {
- setListItems( [ ...listItems, item.label ] );
- onChange( [ ...value, item.label ] );
- return;
- }
- const isSelected = value.includes( item );
- if ( isSelected ) {
- onRemove( item );
- return;
- }
- onChange( [ ...value, item ] );
- };
-
- return (
- <>
- <SelectControl< string | NewTermItem >
- items={ listItems }
- multiple
- disabled={ disabled }
- label={ label || '' }
- placeholder={ placeholder || '' }
- getItemLabel={ ( item ) =>
- isNewTermItem( item ) ? item.label : item || ''
- }
- getItemValue={ ( item ) =>
- isNewTermItem( item ) ? item.id : item || ''
- }
- getFilteredItems={ ( allItems, inputValue ) => {
- const filteredItems = allItems.filter(
- ( item ) =>
- ! inputValue.length ||
- ( ! isNewTermItem( item ) &&
- item
- .toLowerCase()
- .includes( inputValue.toLowerCase() ) )
- );
- if (
- inputValue.length > 0 &&
- ! filteredItems.find(
- ( item ) =>
- ! isNewTermItem( item ) &&
- item.toLowerCase() === inputValue.toLowerCase()
- )
- ) {
- return [
- ...filteredItems,
- {
- id: 'is-new',
- label: inputValue,
- },
- ];
- }
- return filteredItems;
- } }
- selected={ value }
- onSelect={ onSelect }
- onRemove={ onRemove }
- className="woocommerce-attribute-term-field"
- >
- { ( {
- items,
- highlightedIndex,
- getItemProps,
- getMenuProps,
- isOpen,
- } ) => {
- return (
- <Menu isOpen={ isOpen } getMenuProps={ getMenuProps }>
- { items.map( ( item, menuIndex ) => {
- return (
- <MenuItem
- key={ `${
- isNewTermItem( item )
- ? item.id
- : item
- }` }
- index={ menuIndex }
- isActive={
- highlightedIndex === menuIndex
- }
- item={ item }
- getItemProps={ getItemProps }
- >
- { isNewTermItem( item ) ? (
- <div className="woocommerce-attribute-term-field__add-new">
- <Icon
- icon={ plus }
- size={ 20 }
- className="woocommerce-attribute-term-field__add-new-icon"
- />
- <span>
- { sprintf(
- /* translators: The name of the new attribute term to be created */
- __(
- 'Create "%s"',
- 'woocommerce'
- ),
- item.label
- ) }
- </span>
- </div>
- ) : (
- <CheckboxControl
- onChange={ () => null }
- checked={ value.includes(
- item
- ) }
- // @ts-expect-error The label prop can be a string, however, the final consumer of this prop accepts ReactNode.
- label={
- <span> { item } </span>
- }
- />
- ) }
- </MenuItem>
- );
- } ) }
- </Menu>
- );
- } }
- </SelectControl>
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/index.ts b/packages/js/product-editor/src/components/attribute-term-input-field/index.ts
deleted file mode 100644
index f7a35f4a1e1..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './attribute-term-input-field';
-export * from './custom-attribute-term-input-field';
diff --git a/packages/js/product-editor/src/components/attribute-term-input-field/test/attribute-term-input-field.spec.tsx b/packages/js/product-editor/src/components/attribute-term-input-field/test/attribute-term-input-field.spec.tsx
deleted file mode 100644
index 09cfa3ac0e2..00000000000
--- a/packages/js/product-editor/src/components/attribute-term-input-field/test/attribute-term-input-field.spec.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, waitFor, screen } from '@testing-library/react';
-import { useState, createElement } from '@wordpress/element';
-import { resolveSelect } from '@wordpress/data';
-import { ProductAttributeTerm } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { AttributeTermInputField } from '../attribute-term-input-field';
-
-jest.mock( '@wordpress/core-data', () => ( {
- registerStore: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- resolveSelect: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/components', () => {
- return {
- __esModule: true,
- Spinner: () => <div>spinner</div>,
- };
-} );
-
-jest.mock( '@woocommerce/components', () => {
- return {
- __esModule: true,
- __experimentalSelectControlMenu: ( {
- children,
- }: {
- children: JSX.Element;
- } ) => children,
- __experimentalSelectControlMenuItem: ( {
- children,
- }: {
- children: JSX.Element;
- } ) => <div>{ children }</div>,
- __experimentalSelectControl: ( {
- children,
- items,
- getFilteredItems,
- }: {
- children: ( options: {
- isOpen: boolean;
- items: ProductAttributeTerm[];
- getMenuProps: () => Record< string, string >;
- getItemProps: () => Record< string, string >;
- } ) => JSX.Element;
- items: ProductAttributeTerm[];
- getFilteredItems: (
- allItems: ProductAttributeTerm[],
- inputValue: string,
- selectedItems: ProductAttributeTerm[]
- ) => ProductAttributeTerm[];
- } ) => {
- const [ input, setInput ] = useState( '' );
- return (
- <div>
- attribute_input_field
- <button onClick={ () => setInput( 'Co' ) }>
- Update Input
- </button>
- <div>
- { children( {
- isOpen: true,
- items: getFilteredItems( items, input, [] ),
- getMenuProps: () => ( {} ),
- getItemProps: () => ( {} ),
- } ) }
- </div>
- </div>
- );
- },
- };
-} );
-
-describe( 'AttributeTermInputField', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should not trigger resolveSelect if attributeId is not defined', () => {
- render( <AttributeTermInputField onChange={ jest.fn() } /> );
- expect( resolveSelect ).not.toHaveBeenCalled();
- } );
-
- it( 'should not trigger resolveSelect if attributeId is defined but field disabled', () => {
- render(
- <AttributeTermInputField
- onChange={ jest.fn() }
- attributeId={ 2 }
- disabled={ true }
- />
- );
- expect( resolveSelect ).not.toHaveBeenCalled();
- } );
-
- it( 'should trigger resolveSelect if attributeId is defined and field not disabled', () => {
- const getProductAttributesMock = jest.fn().mockResolvedValue( [] );
- ( resolveSelect as jest.Mock ).mockReturnValue( {
- getProductAttributeTerms: getProductAttributesMock,
- } );
- render(
- <AttributeTermInputField onChange={ jest.fn() } attributeId={ 2 } />
- );
- expect( getProductAttributesMock ).toHaveBeenCalledWith( {
- search: '',
- attribute_id: 2,
- } );
- } );
-
- it( 'should render spinner while retrieving products', async () => {
- const getProductAttributesMock = jest
- .fn()
- .mockReturnValue( { then: () => {} } );
- ( resolveSelect as jest.Mock ).mockReturnValue( {
- getProductAttributeTerms: getProductAttributesMock,
- } );
- await act( async () => {
- render(
- <AttributeTermInputField
- onChange={ jest.fn() }
- attributeId={ 2 }
- />
- );
- } );
- await waitFor( () => {
- expect( screen.queryByText( 'spinner' ) ).toBeInTheDocument();
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/attributes/attributes.tsx b/packages/js/product-editor/src/components/attributes/attributes.tsx
deleted file mode 100644
index 1ee1d832384..00000000000
--- a/packages/js/product-editor/src/components/attributes/attributes.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { ProductProductAttribute } from '@woocommerce/data';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { AttributeControl } from '../attribute-control';
-
-type AttributesProps = {
- attributeList?: ProductProductAttribute[];
- value: ProductProductAttribute[];
- onChange: ( value: ProductProductAttribute[] ) => void;
-};
-
-/**
- * This component is no longer in active use.
- * It is kept here for backward compatibility because is being used in the `AttributesField` component, under
- * `plugins/woocommerce-admin/client/products/fills/attributes-section/attributes-field.tsx`.
- */
-export const Attributes = ( {
- value,
- onChange,
- attributeList = [],
-}: AttributesProps ) => {
- return (
- <AttributeControl
- value={ attributeList }
- disabledAttributeIds={ value
- .filter( ( attr ) => !! attr.variation )
- .map( ( attr ) => attr.id ) }
- uiStrings={ {
- disabledAttributeMessage: __(
- 'Already used in Variations',
- 'woocommerce'
- ),
- } }
- onAdd={ () => {
- recordEvent( 'product_add_attributes_modal_add_button_click' );
- } }
- onChange={ onChange }
- onNewModalCancel={ () => {
- recordEvent(
- 'product_add_attributes_modal_cancel_button_click'
- );
- } }
- onNewModalOpen={ () => {
- if ( ! attributeList.length ) {
- recordEvent( 'product_add_first_attribute_button_click' );
- return;
- }
- recordEvent( 'product_add_attribute_button' );
- } }
- onAddAnother={ () => {
- recordEvent(
- 'product_add_attributes_modal_add_another_attribute_button_click'
- );
- } }
- onRemoveItem={ () => {
- recordEvent(
- 'product_add_attributes_modal_remove_attribute_button_click'
- );
- } }
- onRemove={ () =>
- recordEvent(
- 'product_remove_attribute_confirmation_confirm_click'
- )
- }
- onRemoveCancel={ () =>
- recordEvent(
- 'product_remove_attribute_confirmation_cancel_click'
- )
- }
- termsAutoSelection="first"
- defaultVisibility={ true }
- />
- );
-};
diff --git a/packages/js/product-editor/src/components/attributes/index.ts b/packages/js/product-editor/src/components/attributes/index.ts
deleted file mode 100644
index b17fcda94ec..00000000000
--- a/packages/js/product-editor/src/components/attributes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './attributes';
diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx
deleted file mode 100644
index 61a26166346..00000000000
--- a/packages/js/product-editor/src/components/block-editor/block-editor.tsx
+++ /dev/null
@@ -1,433 +0,0 @@
-/**
- * External dependencies
- */
-import {
- BlockInstance,
- synchronizeBlocksWithTemplate,
-} from '@wordpress/blocks';
-import {
- createElement,
- useMemo,
- useLayoutEffect,
- useEffect,
- useState,
- lazy,
- Suspense,
-} from '@wordpress/element';
-import { dispatch, select, useDispatch, useSelect } from '@wordpress/data';
-import { uploadMedia } from '@wordpress/media-utils';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import apiFetch from '@wordpress/api-fetch';
-import { useLayoutTemplate } from '@woocommerce/block-templates';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { Product } from '@woocommerce/data';
-import { getPath, getQuery } from '@woocommerce/navigation';
-import { getAdminLink, getSetting } from '@woocommerce/settings';
-import {
- BlockContextProvider,
- BlockEditorKeyboardShortcuts,
- BlockEditorProvider,
- BlockList,
- // @ts-expect-error BlockTools is not exported from @wordpress/block-editor's public types.
- BlockTools,
- ObserveTyping,
-} from '@wordpress/block-editor';
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useEntityBlockEditor, useEntityRecord } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useConfirmUnsavedProductChanges } from '../../hooks/use-confirm-unsaved-product-changes';
-import { useProductTemplate } from '../../hooks/use-product-template';
-import { PostTypeContext } from '../../contexts/post-type-context';
-import { wooProductEditorUiStore } from '../../store/product-editor-ui';
-import { ProductEditorSettings } from '../editor';
-import { Notice } from '../notice';
-import { BlockEditorProps } from './types';
-import { LoadingState } from './loading-state';
-import type { ProductTemplate } from '../../types';
-
-const PRODUCT_BLOCK_EDITOR_FEATURE_OPTION =
- 'woocommerce_feature_product_block_editor_enabled';
-
-const PluginArea = lazy( () =>
- import( '@wordpress/plugins' ).then( ( module ) => ( {
- default: module.PluginArea,
- } ) )
-);
-
-const ModalEditor = lazy( () =>
- import( '../modal-editor' ).then( ( module ) => ( {
- default: module.ModalEditor,
- } ) )
-);
-
-function getLayoutTemplateId(
- productTemplate: ProductTemplate | undefined | null,
- postType: string
-) {
- if ( productTemplate?.layoutTemplateId ) {
- return productTemplate.layoutTemplateId;
- }
-
- if ( postType === 'product_variation' ) {
- return 'product-variation';
- }
-
- // Fallback to simple product if no layout template is set.
- return 'simple-product';
-}
-
-function getClassicProductEditorUrl(
- productId: number,
- postType: string,
- product: Partial< Product > | undefined
-) {
- const parentProductId =
- postType === 'product_variation' &&
- product &&
- 'parent_id' in product &&
- typeof product.parent_id === 'number'
- ? product.parent_id
- : productId;
-
- if ( parentProductId > 0 ) {
- return getAdminLink( `post.php?post=${ parentProductId }&action=edit` );
- }
-
- return getAdminLink( 'post-new.php?post_type=product' );
-}
-
-export function BlockEditor( {
- context,
- postType,
- productId,
- setIsEditorLoading,
-}: BlockEditorProps ) {
- useConfirmUnsavedProductChanges( postType );
-
- /**
- * Fire wp-pin-menu event once to trigger the pinning of the menu.
- * That can be necessary since wpwrap's height wasn't being recalculated after the skeleton
- * is switched to the real content, which is usually larger
- */
- useEffect( () => {
- const wpPinMenuEvent = () => {
- document.dispatchEvent( new Event( 'wp-pin-menu' ) );
- };
- window.addEventListener( 'scroll', wpPinMenuEvent, { once: true } );
- return () => window.removeEventListener( 'scroll', wpPinMenuEvent );
- }, [] );
-
- useEffect( () => {
- // @ts-expect-error @wordpress/keyboard-shortcuts store is not fully typed.
- const { registerShortcut } = dispatch( keyboardShortcutsStore );
- if ( registerShortcut ) {
- registerShortcut( {
- name: 'core/editor/save',
- category: 'global',
- description: __( 'Save your changes.', 'woocommerce' ),
- keyCombination: {
- modifier: 'primary',
- character: 's',
- },
- } );
- }
- }, [] );
-
- const [ settingsGlobal, setSettingsGlobal ] = useState<
- Partial< ProductEditorSettings > | undefined
- >( undefined );
-
- useEffect( () => {
- let timeoutId: number;
-
- const checkSettingsGlobal = () => {
- if ( window.productBlockEditorSettings !== undefined ) {
- setSettingsGlobal( window.productBlockEditorSettings );
- } else {
- timeoutId = setTimeout( checkSettingsGlobal, 100 );
- }
- };
-
- checkSettingsGlobal();
-
- return () => {
- clearTimeout( timeoutId );
- };
- }, [] );
-
- const settings = useMemo<
- Partial< ProductEditorSettings > | undefined
- >( () => {
- if ( settingsGlobal === undefined ) {
- return undefined;
- }
-
- const canUserCreateMedia =
- select( 'core' ).canUser( 'create', 'media', '' ) !== false;
-
- const mediaSettings = canUserCreateMedia
- ? {
- mediaUpload( {
- onError,
- ...rest
- }: {
- onError: ( message: string ) => void;
- } ) {
- // @ts-expect-error uploadMedia's upstream UploadMediaArgs type rejects undefined for wpAllowedMimeTypes, but the runtime accepts it.
- uploadMedia( {
- wpAllowedMimeTypes:
- settingsGlobal.allowedMimeTypes || undefined,
- onError: ( { message } ) => onError( message ),
- ...rest,
- } );
- },
- }
- : {};
-
- return {
- ...settingsGlobal,
- ...mediaSettings,
- templateLock: 'all',
- };
- }, [ settingsGlobal ] );
-
- const { editedRecord: product, hasResolved } = useEntityRecord< Product >(
- 'postType',
- postType,
- productId,
- // Only perform the query when the productId is valid.
- { enabled: productId !== -1 }
- );
-
- const { _feature_nonce: featureNonce = '' } = getSetting< {
- _feature_nonce?: string;
- } >( 'admin', {} );
- const classicProductEditorUrl = getClassicProductEditorUrl(
- productId,
- postType,
- product
- );
- const disableProductBlockEditorUrl = new URL( classicProductEditorUrl );
- disableProductBlockEditorUrl.searchParams.set(
- 'product_block_editor',
- '0'
- );
- disableProductBlockEditorUrl.searchParams.set(
- '_feature_nonce',
- featureNonce
- );
- const [ isDisablingProductBlockEditor, setIsDisablingProductBlockEditor ] =
- useState( false );
-
- const disableProductBlockEditor = async (
- event: React.MouseEvent< HTMLAnchorElement >
- ) => {
- event.preventDefault();
-
- if ( isDisablingProductBlockEditor ) {
- return;
- }
-
- setIsDisablingProductBlockEditor( true );
-
- try {
- await apiFetch( {
- path: `/wc/v3/settings/advanced/${ PRODUCT_BLOCK_EDITOR_FEATURE_OPTION }`,
- method: 'POST',
- data: {
- value: 'no',
- },
- } );
-
- window.location.href = classicProductEditorUrl;
- } catch {
- window.location.href = disableProductBlockEditorUrl.toString();
- }
- };
-
- const productTemplateId = useMemo(
- () =>
- product?.meta_data?.find(
- ( metaEntry: { key: string } ) =>
- metaEntry.key === '_product_template_id'
- )?.value,
- [ product?.meta_data ]
- );
-
- const { productTemplate } = useProductTemplate(
- productTemplateId,
- hasResolved ? product : null
- );
-
- const { layoutTemplate } = useLayoutTemplate(
- hasResolved ? getLayoutTemplateId( productTemplate, postType ) : null
- );
-
- type BlockChangeHandler = (
- blocks: BlockInstance[],
- options?: Record< string, unknown >
- ) => void;
- const [ blocks, onInput, onChange ] = useEntityBlockEditor(
- 'postType',
- postType,
- // useEntityBlockEditor will not try to fetch the product if productId is falsy.
- // @ts-expect-error useEntityBlockEditor's upstream types declare id as string, but the REST API uses number.
- { id: productId !== -1 ? productId : 0 }
- ) as [ BlockInstance[], BlockChangeHandler, BlockChangeHandler ];
-
- const isEditorLoading =
- ! settings ||
- ! layoutTemplate ||
- // variations don't have a product template
- ( postType !== 'product_variation' && ! productTemplate ) ||
- productId === -1 ||
- ! hasResolved;
-
- useLayoutEffect(
- function setupEditor() {
- if ( isEditorLoading ) {
- return;
- }
-
- const blockInstances = synchronizeBlocksWithTemplate(
- [],
- // @ts-expect-error layoutTemplate is not typed - it's a custom entity from useEntityRecord
- layoutTemplate.blockTemplates
- );
-
- onChange( blockInstances, {} );
-
- dispatch( 'core/editor' ).updateEditorSettings( {
- ...settings,
- productTemplate,
- } as Partial< ProductEditorSettings > );
-
- // We don't need to include onChange in the dependencies, since we get new
- // instances of it on every render, which would cause an infinite loop.
- // eslint-disable-next-line react-hooks/exhaustive-deps
- },
- [
- isEditorLoading,
- layoutTemplate,
- settings,
- productTemplate,
- productId,
- ]
- );
-
- useEffect( () => {
- setIsEditorLoading( isEditorLoading );
- }, [ isEditorLoading, setIsEditorLoading ] );
-
- const { editEntityRecord } = useDispatch( 'core' );
-
- useEffect( function maybeSetProductTemplateFromURL() {
- const query: { template?: string } = getQuery();
- const isAddProduct = getPath().endsWith( 'add-product' );
- if ( isAddProduct && query.template ) {
- const productTemplates =
- window.productBlockEditorSettings?.productTemplates ?? [];
- const selectedProductTemplate = productTemplates.find(
- ( t ) => t.id === query.template
- );
- if ( selectedProductTemplate ) {
- editEntityRecord( 'postType', postType, productId, {
- ...selectedProductTemplate.productData,
- meta_data: [
- ...( selectedProductTemplate.productData.meta_data ??
- [] ),
- {
- key: '_product_template_id',
- value: selectedProductTemplate.id,
- },
- ],
- } );
- }
- }
- }, [] );
-
- // Check if the Modal editor is open from the store.
- const isModalEditorOpen = useSelect( ( selectCore ) => {
- return selectCore( wooProductEditorUiStore ).isModalEditorOpen();
- }, [] );
-
- if ( isEditorLoading ) {
- return (
- <div className="woocommerce-product-block-editor">
- <LoadingState />
- </div>
- );
- }
-
- if ( isModalEditorOpen ) {
- return (
- <Suspense fallback={ null }>
- <ModalEditor
- onClose={
- dispatch( wooProductEditorUiStore ).closeModalEditor
- }
- title={ __( 'Edit description', 'woocommerce' ) }
- name={
- ! product?.name || product.name === 'AUTO-DRAFT'
- ? __( '(no product name)', 'woocommerce' )
- : product.name
- }
- />
- </Suspense>
- );
- }
-
- return (
- <div className="woocommerce-product-block-editor">
- <Notice
- className="woocommerce-product-block-editor__deprecation-notice"
- type="warning"
- title={ __(
- 'Switch to the classic editor before WooCommerce 11.0',
- 'woocommerce'
- ) }
- content={ __(
- "We're removing this version of the product editor in WooCommerce 11.0. The classic editor has the same features and your products won't change, so we recommend switching now.",
- 'woocommerce'
- ) }
- >
- <Button
- className="woocommerce-product-block-editor__deprecation-notice-action"
- href={ disableProductBlockEditorUrl.toString() }
- isBusy={ isDisablingProductBlockEditor }
- onClick={ disableProductBlockEditor }
- variant="secondary"
- >
- { __( 'Switch to classic editor', 'woocommerce' ) }
- </Button>
- </Notice>
- <BlockContextProvider value={ context }>
- <BlockEditorProvider
- value={ blocks }
- onInput={ onInput }
- onChange={ onChange }
- settings={ settings }
- useSubRegistry={ false }
- >
- { /* @ts-expect-error BlockEditorKeyboardShortcuts.Register is not exposed on the component's public types. */ }
- <BlockEditorKeyboardShortcuts.Register />
- <BlockTools>
- <ObserveTyping>
- <BlockList className="woocommerce-product-block-editor__block-list" />
- </ObserveTyping>
- </BlockTools>
- { /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ }
- <PostTypeContext.Provider value={ context.postType! }>
- <Suspense fallback={ null }>
- <PluginArea scope="woocommerce-product-block-editor" />
- </Suspense>
- </PostTypeContext.Provider>
- </BlockEditorProvider>
- </BlockContextProvider>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/block-editor/index.ts b/packages/js/product-editor/src/components/block-editor/index.ts
deleted file mode 100644
index c3d81d4a015..00000000000
--- a/packages/js/product-editor/src/components/block-editor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './block-editor';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/block-editor/loading-state/index.ts b/packages/js/product-editor/src/components/block-editor/loading-state/index.ts
deleted file mode 100644
index b9af07b0b02..00000000000
--- a/packages/js/product-editor/src/components/block-editor/loading-state/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './loading-state';
diff --git a/packages/js/product-editor/src/components/block-editor/loading-state/loading-state.tsx b/packages/js/product-editor/src/components/block-editor/loading-state/loading-state.tsx
deleted file mode 100644
index 59658b107b2..00000000000
--- a/packages/js/product-editor/src/components/block-editor/loading-state/loading-state.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function LoadingState() {
- return (
- <div
- className="woocommerce-product-block-editor__block-list block-editor-block-list__layout is-root-container is-loading"
- aria-hidden="true"
- >
- <div className="wp-block-woocommerce-product-tab">
- <div className="wp-block-woocommerce-product-section">
- <div className="wp-block-woocommerce-product-section__heading-title-wrapper">
- <div className="wp-block-woocommerce-product-section__heading-title" />
- </div>
-
- <div className="wp-block-woocommerce-product-section__content wp-block-woocommerce-product-section-header__content--block-gap-unit-30">
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-input" />
- </div>
-
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-textarea" />
- </div>
-
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-textarea" />
- </div>
- </div>
- </div>
-
- <div className="wp-block-woocommerce-product-section">
- <div className="wp-block-woocommerce-product-section__heading-title-wrapper">
- <div className="wp-block-woocommerce-product-section__heading-title" />
- </div>
-
- <div className="wp-block-woocommerce-product-section__content wp-block-woocommerce-product-section__content--block-gap-unit-30">
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-input" />
- </div>
-
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-textarea" />
- </div>
-
- <div className="block-editor-block-list__block">
- <div className="woocommerce-product-form-label__label" />
- <div className="woocommerce-product-form-textarea" />
- </div>
- </div>
- </div>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/block-editor/style.scss b/packages/js/product-editor/src/components/block-editor/style.scss
deleted file mode 100644
index 94f915d3988..00000000000
--- a/packages/js/product-editor/src/components/block-editor/style.scss
+++ /dev/null
@@ -1,254 +0,0 @@
-.woocommerce-product-block-editor {
- padding-top: 108px; // required space to locate the dashboard just below the admin bar. @todo: find a better way to do this.
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- button,
- span,
- label,
- div,
- input {
- font-family: var(--wp--preset--font-family--system-font);
- }
-
- h4 {
- font-size: 16px;
- }
-
- label {
- color: $gray-900;
- }
-
- a {
- text-decoration: none;
- }
-
- &__deprecation-notice {
- box-sizing: border-box;
- max-width: 650px;
- margin: 0 calc(2 * $gap) $gap-large;
- background-color: #fff8e5;
- border-left: 4px solid #b26200;
-
- @include breakpoint(">782px") {
- margin-left: auto;
- margin-right: auto;
- }
- }
-
- &__deprecation-notice-action {
- margin-top: $gap-small;
- }
-
- /*
- * Override default block margins and layout applied for themes without a theme.json file.
- *
- * If we no longer call `is_block_editor( true )` in the future for the product editor,
- * we can remove this.
- *
- * See: `wp_add_editor_classic_theme_styles()`
- */
- :where(.wp-block) {
- margin-bottom: 0;
- margin-top: 0;
- max-width: unset;
- }
-
- .components-base-control {
- &.has-error {
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
-
- .components-input-control__container .components-input-control__input {
- min-height: $grid-unit-40 + $grid-unit-05;
- }
- }
-
- // This is wrong for @wordpress/components/InputControl since it is
- // wrapped within the BaseControl by default. So it does not need
- // to be wrapped again.
- .has-error {
- .components-base-control {
- margin-bottom: 0;
-
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
-
- .components-base-control {
- .components-base-control__field {
- margin-bottom: 0;
- }
-
- .components-base-control__help {
- margin-bottom: 0;
- }
- }
-
- .components-toggle-control {
- margin-bottom: 0;
-
- .components-form-toggle {
- display: flex;
- align-items: center;
- }
-
- .components-toggle-control__label {
- display: flex;
- align-items: center;
- }
- }
-
- .woocommerce-collapsible-content .woocommerce-collapsible-content__content {
- margin-top: calc(2 * $gap);
- }
-
- .components-input-control {
- &__input::placeholder {
- color: $gray-700;
- }
-
- &__prefix {
- margin-left: $gap-smaller;
- }
-
- &__suffix {
- margin-right: $gap-smaller;
- }
- }
-
- .woocommerce-product-form {
- &__custom-label-input {
- display: flex;
- flex-direction: column;
-
- label {
- display: block;
- margin-bottom: $gap-smaller;
- }
- }
-
- &__optional-input {
- color: $gray-700;
- }
- }
-
- .wp-block-columns {
- gap: $gap-large;
- margin-bottom: 0;
- }
-
- .wp-block-column {
- word-break: normal;
- }
-
- .woocommerce-experimental-select-control__label {
- text-transform: uppercase;
- font-size: 11px;
- color: $gray-900;
- font-weight: 500;
- }
-
- .block-editor-block-list__layout {
- &.is-root-container {
- padding-left: 0;
- padding-right: 0;
- padding-bottom: 128px;
- margin-left: calc(2 * $gap);
- margin-right: calc(2 * $gap);
-
- @include breakpoint(">782px") {
- max-width: 650px;
- margin-left: auto;
- margin-right: auto;
- }
- }
-
- .block-editor-block-list__block {
- /* Remove the outline for the block when it is focused */
- &:not([contenteditable]):focus {
- &::after {
- display: none;
- }
- }
-
- /* Address overflow issue */
- fieldset {
- min-width: 0;
- }
-
- /* Remove the outline for the block when it is editable */
- &.has-editable-outline {
- &::after {
- display: none;
- }
- }
- }
- }
-}
-
-.woocommerce-product-block-editor {
- .block-editor-block-list__layout.is-root-container.is-loading {
- .wp-block-woocommerce-product-section__heading-title {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: 300px;
- height: 28px;
- margin-bottom: $gap-smaller;
- }
-
- .woocommerce-product-form-label__label {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: $grid-unit-80;
- height: 28px;
- margin-bottom: $gap-smaller;
- }
-
- .woocommerce-product-form-input {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: 100%;
- height: 36px;
- }
-
- .woocommerce-product-form-textarea {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: 100%;
- height: 108px;
- }
- }
-}
-
-.wp-admin.woocommerce-feature-enabled-product-block-editor {
- .components-modal {
- &__frame {
- border-radius: $gap-smaller;
- }
- &__header {
- border: none;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/block-editor/types.ts b/packages/js/product-editor/src/components/block-editor/types.ts
deleted file mode 100644
index f311430668c..00000000000
--- a/packages/js/product-editor/src/components/block-editor/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-import { ProductEditorContext } from '../../types';
-
-export type BlockEditorProps = {
- context: Partial< ProductEditorContext >;
- postType: string;
- productId: number;
- setIsEditorLoading: ( isEditorLoading: boolean ) => void;
-};
diff --git a/packages/js/product-editor/src/components/block-icon/README.md b/packages/js/product-editor/src/components/block-icon/README.md
deleted file mode 100644
index c224a38b0ba..00000000000
--- a/packages/js/product-editor/src/components/block-icon/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# BlockIcon
-
-This component uses the icon defined as a block attribute or metadata and renders it.
-
-It looks first within the block's `attributes` and if there is no icon defined there, then looks at the block's `metadata`.
-
-## Usage
-
-### Icon configuration
-
-1. As a block attribute
-
- In the block configuration file `./block.json`
-
- ```json
- "attributes": {
- "icon": {
- "type": "object"
- }
- }
- ```
-
- In the server during the template configuration
-
- ```php
- array(
- 'woocommerce/product-section', // Block name
- array(
- // Block attributes
- 'icon' => array(
- // It's possible to pass a valid html string
- 'src' => '<svg ... />',
-
- // Or an absolute url
- 'src' => 'https://...',
- 'alt' => 'The alt name for the icon',
-
- // Or a Dashicon icon-key
- 'src' => 'default-block',
- ),
- ),
- array(
- // Inner blocks
- ),
- ),
- ```
-
-2. As part of the block's metadata
-
- See [the official blocks icon documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#icon).
-
-### Rendering the Icon
-
-```javascript
-import { __experimentalBlockIcon as BlockIcon } from '@woocommerce/product-editor';
-
-export function BlockEdit( { clientId } ) {
- const blockProps = useBlockProps();
-
- return (
- <div { ...blockProps }>
- <h2>
- <BlockIcon clientId={ clientId } />
-
- <span>{ title }</span>
- </h2>
-
- <InnerBlocks />
- </div>
- );
-}
-```
diff --git a/packages/js/product-editor/src/components/block-icon/block-icon.tsx b/packages/js/product-editor/src/components/block-icon/block-icon.tsx
deleted file mode 100644
index 69498791f83..00000000000
--- a/packages/js/product-editor/src/components/block-icon/block-icon.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockIcon as BaseBlockIcon } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { createElement, RawHTML } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BlockIconProps } from './types';
-
-export function BlockIcon( { clientId }: BlockIconProps ) {
- const icon = useSelect(
- ( select ) => {
- // Try to get the icon from the block's attributes
- const { getBlockAttributes, getBlockName } =
- select( 'core/block-editor' );
- const attributes = getBlockAttributes( clientId );
- if ( attributes?.icon ) {
- return attributes.icon;
- }
-
- // If there is no icon defined in attributes
- // Then try to get icon from block's metadata
- const { getBlockType } = select( 'core/blocks' );
- const blockName = getBlockName( clientId );
- const block = getBlockType( blockName ?? undefined );
- return block?.icon;
- },
- [ clientId ]
- );
-
- if ( ! icon ) {
- return null;
- }
-
- if ( typeof icon === 'object' ) {
- const { src, ...iconProps } = icon;
-
- if ( /^<(.)+>$/.test( src ) ) {
- const iconComponent = (
- <RawHTML aria-hidden="true" { ...iconProps }>
- { src }
- </RawHTML>
- );
- return <BaseBlockIcon icon={ iconComponent } showColors />;
- }
-
- if ( /^https?:\/\/(.)+/.test( src ) ) {
- const iconImage = (
- <img
- src={ src }
- alt=""
- aria-hidden="true"
- { ...iconProps }
- height={ 24 }
- width={ 24 }
- />
- );
- return <BaseBlockIcon icon={ iconImage } showColors />;
- }
- }
-
- return <BaseBlockIcon icon={ icon } showColors />;
-}
diff --git a/packages/js/product-editor/src/components/block-icon/index.ts b/packages/js/product-editor/src/components/block-icon/index.ts
deleted file mode 100644
index 9e20e38d3cf..00000000000
--- a/packages/js/product-editor/src/components/block-icon/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './block-icon';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/block-icon/types.ts b/packages/js/product-editor/src/components/block-icon/types.ts
deleted file mode 100644
index b1e47017faf..00000000000
--- a/packages/js/product-editor/src/components/block-icon/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type BlockIconProps = {
- clientId: string;
-};
diff --git a/packages/js/product-editor/src/components/block-slot-fill/Readme.md b/packages/js/product-editor/src/components/block-slot-fill/Readme.md
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx b/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx
deleted file mode 100644
index 036ecebdbfb..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/block-fill.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { Fill } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
-import { useBlockEditContext } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { getName } from './utils/get-name';
-import { BlockFillProps } from './types';
-
-export function BlockFill( {
- name,
- slotContainerBlockName,
- ...props
-}: BlockFillProps ) {
- const { clientId } = useBlockEditContext();
-
- const closestAncestorClientId = useSelect(
- ( select ) => {
- const { getBlockParentsByBlockName } =
- select( 'core/block-editor' );
-
- const [ closestParentClientId ] = getBlockParentsByBlockName(
- clientId,
- slotContainerBlockName,
- true
- );
-
- return closestParentClientId;
- },
- [ clientId, slotContainerBlockName ]
- );
-
- if ( ! closestAncestorClientId ) {
- // eslint-disable-next-line no-console
- console.warn( 'No closest ancestor client ID found for block fill.' );
- return null;
- }
-
- return (
- <Fill { ...props } name={ getName( name, closestAncestorClientId ) } />
- );
-}
diff --git a/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx b/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx
deleted file mode 100644
index a66b41bce25..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/block-slot.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { Slot } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { useBlockEditContext } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { getName } from './utils/get-name';
-import { BlockSlotProps } from './types';
-
-export function BlockSlot( { name, ...props }: BlockSlotProps ) {
- const { clientId } = useBlockEditContext();
- return <Slot { ...props } name={ getName( name, clientId ) } />;
-}
diff --git a/packages/js/product-editor/src/components/block-slot-fill/index.ts b/packages/js/product-editor/src/components/block-slot-fill/index.ts
deleted file mode 100644
index 5c1dc08b338..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './block-fill';
-export * from './block-slot';
-export * from './section-actions';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/block-slot-fill/section-actions/Readme.md b/packages/js/product-editor/src/components/block-slot-fill/section-actions/Readme.md
deleted file mode 100644
index eef630547d9..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/section-actions/Readme.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# SectionActions
-
-`<SectionActions />` is a React component designed to be used within blocks in WooCommerce Product Editor,
-providing a slot for specific actions related to the section in which it is included.
-
-## Example
-
-```jsx
-import { __experimentalSectionActions as SectionActions } from '@woocommerce/product-editor'
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-function CustomProductBlockEdit() {
- return (
- <>
- <SectionActions>
- <Button
- onClick={ handleProductAction }
- variant="secondary"
- >
- { __( 'Product action!', 'woocommerce' ) }
- </Button>
- </SectionActions>
-
- <OtherBlockComponents { ...other} />
- </>
- );
-}
-```
diff --git a/packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx b/packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx
deleted file mode 100644
index 0d17d7256d3..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/section-actions/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BlockFill } from '../block-fill';
-import { BlockFillProps } from '../types';
-
-export type SectionActionsProps = Omit<
- BlockFillProps,
- 'name' | 'slotContainerBlockName'
-> & {
- containerBlockName?: string | string[];
-};
-
-const DEFAULT_SECTION_BLOCKS = [
- 'woocommerce/product-section',
- 'woocommerce/product-subsection',
-];
-
-export function SectionActions( {
- containerBlockName = DEFAULT_SECTION_BLOCKS,
- ...restProps
-}: SectionActionsProps ) {
- return (
- <BlockFill
- { ...restProps }
- name="section-actions"
- slotContainerBlockName={ containerBlockName }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/block-slot-fill/types.ts b/packages/js/product-editor/src/components/block-slot-fill/types.ts
deleted file mode 100644
index a9ecd753e30..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import { Fill, Slot } from '@wordpress/components';
-
-export type BlockSlotFillProps = {
- name:
- | 'section-actions'
- | 'section-description'
- | 'subsection-actions'
- | 'subsection-description';
-};
-
-export type BlockSlotProps = BlockSlotFillProps &
- React.ComponentProps< typeof Slot >;
-
-export type BlockFillProps = BlockSlotFillProps &
- React.ComponentProps< typeof Fill > & {
- slotContainerBlockName: string | string[];
- };
diff --git a/packages/js/product-editor/src/components/block-slot-fill/utils/get-name.ts b/packages/js/product-editor/src/components/block-slot-fill/utils/get-name.ts
deleted file mode 100644
index c1de4b37f80..00000000000
--- a/packages/js/product-editor/src/components/block-slot-fill/utils/get-name.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function getName( name: string, clientId: string ) {
- return `${ name }-${ clientId }`;
-}
diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/Readme.md b/packages/js/product-editor/src/components/button-with-dropdown-menu/Readme.md
deleted file mode 100644
index 33cabbdcbbe..00000000000
--- a/packages/js/product-editor/src/components/button-with-dropdown-menu/Readme.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# ButtonWithDropdownMenu Component
-
-## Description
-
-The `ButtonWithDropdownMenu` is a React component that renders a button with an associated dropdown menu. It provides flexibility in configuring the dropdown's content, appearance, and behavior.
-
-## Usage
-
-```jsx
-import { ButtonWithDropdownMenu } from 'path_to_component';
-
-<ButtonWithDropdownMenu
- variant="secondary"
- onClick={() => console.log( 'Button clicked' ) }
- controls={ [
- {
- title: 'First Menu Item Label',
- onClick: () => console.log( 'First option clicked' ).
- },
- {
- title: 'Second Menu Item Label',
- onClick: () => console.log( 'Second option clicked' ).
- },
- ] }
->
- Add to store
-</ButtonWithDropdownMenu>
-```
diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/index.tsx b/packages/js/product-editor/src/components/button-with-dropdown-menu/index.tsx
deleted file mode 100644
index 63a432b3f0c..00000000000
--- a/packages/js/product-editor/src/components/button-with-dropdown-menu/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { chevronDown } from '@wordpress/icons';
-import { Button, DropdownMenu, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import type { ButtonWithDropdownMenuProps } from './types';
-
-export * from './types';
-
-export function ButtonWithDropdownMenu( {
- dropdownButtonLabel = __( 'More options', 'woocommerce' ),
- controls,
- defaultOpen = false,
- popoverProps: {
- placement = 'bottom-end',
- position = 'bottom left left',
- offset = 0,
- } = {
- placement: 'bottom-end',
- position: 'bottom left left',
- offset: 0,
- },
- className,
- renderMenu,
- onToggle,
- ...props
-}: ButtonWithDropdownMenuProps ) {
- return (
- <Flex
- className={ `woocommerce-button-with-dropdown-menu${
- className?.length ? ' ' + className : ''
- }` }
- justify="left"
- gap={ 0 }
- expanded={ false }
- role="group"
- >
- <FlexItem role="none">
- <Button
- { ...props }
- className="woocommerce-button-with-dropdown-menu__main-button"
- />
- </FlexItem>
-
- <FlexItem role="none">
- <DropdownMenu
- toggleProps={ {
- className:
- 'woocommerce-button-with-dropdown-menu__dropdown-button',
- variant: props.variant,
- } }
- controls={ controls }
- icon={ chevronDown }
- label={ dropdownButtonLabel }
- popoverProps={ {
- placement,
- position,
- offset,
- } }
- defaultOpen={ defaultOpen }
- onToggle={ onToggle }
- >
- { renderMenu }
- </DropdownMenu>
- </FlexItem>
- </Flex>
- );
-}
diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/stories/button-with-dropdown-menu.story.tsx b/packages/js/product-editor/src/components/button-with-dropdown-menu/stories/button-with-dropdown-menu.story.tsx
deleted file mode 100644
index 3085fd940d2..00000000000
--- a/packages/js/product-editor/src/components/button-with-dropdown-menu/stories/button-with-dropdown-menu.story.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ButtonWithDropdownMenu } from '../';
-import type { ButtonWithDropdownMenuProps } from '../types';
-
-export default {
- title: 'Product Editor/components/ButtonWithDropdownMenu',
- component: ButtonWithDropdownMenu,
-};
-
-export const Default = ( args: ButtonWithDropdownMenuProps ) => {
- return (
- <div
- style={ {
- display: 'flex',
- justifyContent: 'center',
- minHeight: '300px',
- } }
- >
- <ButtonWithDropdownMenu { ...args } />
- </div>
- );
-};
-
-Default.args = {
- children: 'Add to store',
- dropdownButtonLabel: 'More options',
- variant: 'secondary',
- defaultOpen: false,
- popoverProps: {
- placement: 'bottom-end',
- position: 'bottom left left',
- offset: 0,
- },
- controls: [
- {
- title: 'First Menu Item Label',
- onClick: function noRefCheck() {},
- },
- {
- onClick: function noRefCheck() {},
- title: 'Second Menu Item Label',
- },
- ],
- className: 'my-custom-classname',
- onClick: console.log, // eslint-disable-line no-console
-};
diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/style.scss b/packages/js/product-editor/src/components/button-with-dropdown-menu/style.scss
deleted file mode 100644
index ce23eda6738..00000000000
--- a/packages/js/product-editor/src/components/button-with-dropdown-menu/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.woocommerce-button-with-dropdown-menu {
- &__main-button {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- &__dropdown-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-
- &.is-opened svg {
- transform: rotate( 180deg ); // @todo: consider to set the is-opened in the local state
- }
- }
-}
-
-.woocommerce-button-with-dropdown-menu.components-flex {
- gap: 1px;
-}
diff --git a/packages/js/product-editor/src/components/button-with-dropdown-menu/types.ts b/packages/js/product-editor/src/components/button-with-dropdown-menu/types.ts
deleted file mode 100644
index cd0c6ab1a0a..00000000000
--- a/packages/js/product-editor/src/components/button-with-dropdown-menu/types.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import type {
- // @ts-expect-error no exported member.
- DropdownOption,
-} from '@wordpress/components';
-
-type PositionYAxis = 'top' | 'middle' | 'bottom';
-type PositionXAxis = 'left' | 'center' | 'right';
-type PositionCorner = 'top' | 'right' | 'bottom' | 'left';
-
-export type PopoverPlacement =
- | 'left'
- | 'right'
- | 'bottom'
- | 'top'
- | 'left-end'
- | 'left-start'
- | 'right-end'
- | 'right-start'
- | 'bottom-end'
- | 'bottom-start'
- | 'top-end'
- | 'top-start'; // @todo: pick from core
-
-export type PopoverPosition =
- | `${ PositionYAxis }`
- | `${ PositionYAxis } ${ PositionXAxis }`
- | `${ PositionYAxis } ${ PositionXAxis } ${ PositionCorner }`;
-
-export type PopoverProps = {
- placement?: PopoverPlacement;
- position?: PopoverPosition;
- offset?: number;
-};
-
-export type ButtonWithDropdownMenuProps = {
- className?: string;
- href?: string;
- dropdownButtonLabel?: string;
- defaultOpen?: boolean;
- controls?: DropdownOption[];
- popoverProps?: PopoverProps;
- renderMenu?: ( props: { onClose: () => void } ) => React.ReactNode;
- onToggle?: ( isOpen: boolean ) => void;
-} & Extract< React.ComponentProps< typeof Button >, { disabled?: boolean } >;
diff --git a/packages/js/product-editor/src/components/catalog-visibility/catalog-visibility.tsx b/packages/js/product-editor/src/components/catalog-visibility/catalog-visibility.tsx
deleted file mode 100644
index 4d69e530940..00000000000
--- a/packages/js/product-editor/src/components/catalog-visibility/catalog-visibility.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { recordEvent } from '@woocommerce/tracks';
-import { CheckboxControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { CatalogVisibilityProps } from './types';
-import { TRACKS_SOURCE } from '../../constants';
-
-export function CatalogVisibility( {
- catalogVisibility,
- label,
- visibility,
- onCheckboxChange,
-}: CatalogVisibilityProps ) {
- function handleVisibilityChange( selected: boolean ) {
- if ( selected ) {
- if ( catalogVisibility === 'visible' ) {
- onCheckboxChange( visibility );
- recordEvent( 'product_catalog_visibility', {
- source: TRACKS_SOURCE,
- visibility: catalogVisibility,
- } );
- return;
- }
- onCheckboxChange( 'hidden' );
- } else {
- if ( catalogVisibility === 'hidden' ) {
- if ( visibility === 'catalog' ) {
- onCheckboxChange( 'search' );
- recordEvent( 'product_catalog_visibility', {
- source: TRACKS_SOURCE,
- visibility: catalogVisibility,
- } );
- return;
- }
- if ( visibility === 'search' ) {
- onCheckboxChange( 'catalog' );
- recordEvent( 'product_catalog_visibility', {
- source: TRACKS_SOURCE,
- visibility: catalogVisibility,
- } );
- return;
- }
- return;
- }
- onCheckboxChange( 'visible' );
- recordEvent( 'product_catalog_visibility', {
- source: TRACKS_SOURCE,
- visibility: catalogVisibility,
- } );
- }
- }
-
- return (
- <>
- <CheckboxControl
- label={ label }
- checked={
- catalogVisibility === visibility ||
- catalogVisibility === 'hidden'
- }
- onChange={ ( selected ) => handleVisibilityChange( selected ) }
- />
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/catalog-visibility/index.ts b/packages/js/product-editor/src/components/catalog-visibility/index.ts
deleted file mode 100644
index 24133501051..00000000000
--- a/packages/js/product-editor/src/components/catalog-visibility/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './catalog-visibility';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/catalog-visibility/types.ts b/packages/js/product-editor/src/components/catalog-visibility/types.ts
deleted file mode 100644
index 0c02add8645..00000000000
--- a/packages/js/product-editor/src/components/catalog-visibility/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductCatalogVisibility } from '@woocommerce/data';
-
-export type CatalogVisibilityProps = {
- catalogVisibility: string;
- label: string;
- visibility: ProductCatalogVisibility;
- onCheckboxChange: ( value: ProductCatalogVisibility ) => void;
-};
diff --git a/packages/js/product-editor/src/components/checkbox-control/checkbox-control.tsx b/packages/js/product-editor/src/components/checkbox-control/checkbox-control.tsx
deleted file mode 100644
index 5232ba1e8c8..00000000000
--- a/packages/js/product-editor/src/components/checkbox-control/checkbox-control.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { CheckboxControl } from '@wordpress/components';
-import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
-import { Icon, help } from '@wordpress/icons';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-
-export type CheckboxProps = {
- label: string;
- value: boolean | string | null;
- tooltip?: string;
- title?: string;
- onChange: ( selected: boolean | string | null ) => void;
- checkedValue?: string | null;
- uncheckedValue?: string | null;
- disabled?: boolean;
-};
-
-export const Checkbox = ( {
- value,
- label,
- onChange,
- tooltip,
- title,
- checkedValue,
- uncheckedValue,
- disabled,
-}: CheckboxProps ) => {
- function isChecked() {
- if ( checkedValue !== undefined ) {
- return checkedValue === value;
- }
- return value as boolean;
- }
-
- function handleChange( checked: boolean ) {
- if ( checked ) {
- onChange( checkedValue !== undefined ? checkedValue : checked );
- } else {
- onChange( uncheckedValue !== undefined ? uncheckedValue : checked );
- }
- }
- return (
- <div className="woocommerce-product-form__checkbox">
- { title && <h4>{ title }</h4> }
- <div className="woocommerce-product-form__checkbox-wrapper">
- <CheckboxControl
- label={ label }
- checked={ isChecked() }
- onChange={ handleChange }
- disabled={ disabled }
- />
- { tooltip && (
- <Tooltip
- text={
- <span
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( tooltip ),
- } }
- ></span>
- }
- position="top center"
- className={
- 'woocommerce-product-form__checkbox-tooltip'
- }
- >
- <span className="woocommerce-product-form__checkbox-tooltip-icon">
- <Icon icon={ help } size={ 21.94 } fill="#949494" />
- </span>
- </Tooltip>
- ) }
- </div>
- </div>
- );
-};
diff --git a/packages/js/product-editor/src/components/checkbox-control/index.tsx b/packages/js/product-editor/src/components/checkbox-control/index.tsx
deleted file mode 100644
index 23e40838329..00000000000
--- a/packages/js/product-editor/src/components/checkbox-control/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './checkbox-control';
diff --git a/packages/js/product-editor/src/components/checkbox-control/style.scss b/packages/js/product-editor/src/components/checkbox-control/style.scss
deleted file mode 100644
index 24e4bdc8b49..00000000000
--- a/packages/js/product-editor/src/components/checkbox-control/style.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.woocommerce-product-form__checkbox {
- .components-checkbox-control__input:disabled {
- opacity: 1;
- background-color: $gray-100;
- border-color: $gray-400;
- }
- .components-checkbox-control__input:disabled + svg {
- fill: $gray-400;
- }
- .components-base-control__field,
- .components-checkbox-control__label,
- &-wrapper,
- &-tooltip-icon {
- display: flex;
- align-items: center;
- }
-
- .components-base-control__field {
- display: flex;
- align-items: center;
- margin-bottom: 0;
- }
-
- .components-checkbox-control__label {
- margin-bottom: 0;
- }
-}
-
-.woocommerce-product-form__checkbox-wrapper {
- gap: $gap-smallest;
-}
-
-.woocommerce-product-form__checkbox-tooltip {
- .components-popover__content {
- width: 200px;
- min-width: auto;
- white-space: normal !important;
- }
-}
-
-.components-tooltip {
- max-width: 300px;
-}
diff --git a/packages/js/product-editor/src/components/combobox-control/combobox-control.tsx b/packages/js/product-editor/src/components/combobox-control/combobox-control.tsx
deleted file mode 100644
index 19408665e36..00000000000
--- a/packages/js/product-editor/src/components/combobox-control/combobox-control.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-import { ComboboxControl as CoreCombobox } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import {
- createElement,
- forwardRef,
- useEffect,
- useLayoutEffect,
- useRef,
-} from '@wordpress/element';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import type { ComboboxControlProps } from './types';
-
-/*
- * Create an alias for the ComboboxControl core component,
- * but with the custom ComboboxControlProps interface.
- */
-const Combobox = CoreCombobox as React.ComponentType< ComboboxControlProps >;
-
-/**
- * This is a wrapper + a work around the Combobox to
- * expose important properties and events from the
- * internal input element that are required when
- * validating the field in the context of a form
- */
-export const ComboboxControl = forwardRef( function ForwardedComboboxControl(
- {
- id,
- name,
- allowReset,
- className,
- help,
- hideLabelFromVision,
- label,
- messages,
- value,
- options,
- onFilterValueChange,
- onChange,
- onBlur,
- __experimentalRenderItem,
- }: ComboboxControlProps,
- ref: ForwardedRef< HTMLInputElement >
-) {
- const inputElementRef = useRef< HTMLInputElement >();
- const generatedId = useInstanceId(
- ComboboxControl,
- 'woocommerce-combobox-control'
- ) as string;
- const currentId = id ?? generatedId;
-
- useLayoutEffect(
- /**
- * The Combobox component does not expose the ref to the
- * internal native input element removing the ability to
- * focus the element when validating it in the context
- * of a form
- */
- function initializeRefs() {
- inputElementRef.current = document.querySelector(
- `.${ currentId } [role="combobox"]`
- ) as HTMLInputElement;
-
- if ( name ) {
- inputElementRef.current?.setAttribute( 'name', name );
- }
-
- if ( ref ) {
- if ( typeof ref === 'function' ) {
- ref( inputElementRef.current );
- } else {
- ref.current = inputElementRef.current;
- }
- }
- },
- [ currentId, name, ref ]
- );
-
- useEffect(
- function overrideBlur() {
- /**
- * The Combobox component clear the value of its internal
- * input control when losing the focus, even when the
- * selected value is set, affecting the validation behavior
- * on bluring
- */
- function handleBlur( event: FocusEvent ) {
- onBlur?.( {
- ...event,
- target: {
- ...event.target,
- value,
- },
- } as never );
- }
-
- inputElementRef.current?.addEventListener( 'blur', handleBlur );
-
- return () => {
- inputElementRef.current?.removeEventListener(
- 'blur',
- handleBlur
- );
- };
- },
- [ value, onBlur ]
- );
-
- return (
- <Combobox
- allowReset={ allowReset }
- help={ help }
- hideLabelFromVision={ hideLabelFromVision }
- label={ label }
- messages={ messages }
- value={ value }
- options={ options }
- onChange={ onChange }
- onFilterValueChange={ onFilterValueChange }
- className={ clsx(
- 'woocommerce-combobox-control',
- currentId,
- className
- ) }
- __experimentalRenderItem={ __experimentalRenderItem }
- />
- );
-} );
diff --git a/packages/js/product-editor/src/components/combobox-control/index.ts b/packages/js/product-editor/src/components/combobox-control/index.ts
deleted file mode 100644
index 0c5d351e22e..00000000000
--- a/packages/js/product-editor/src/components/combobox-control/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './combobox-control';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/combobox-control/style.scss b/packages/js/product-editor/src/components/combobox-control/style.scss
deleted file mode 100644
index 030b9bfda3b..00000000000
--- a/packages/js/product-editor/src/components/combobox-control/style.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.woocommerce-combobox-control {
- background-color: #fff;
-
- &.has-error {
- .components-combobox-control__suggestions-container {
- &:focus-within > .components-flex,
- > .components-flex,
- > .components-form-token-field__suggestions-list {
- border-color: $studio-red-50;
- }
- }
- }
-
- .components-combobox-control__suggestions-container {
- position: relative;
- border: none;
-
- &:focus-within {
- > .components-flex {
- border-color: var(--wp-admin-theme-color);
- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
- }
- }
-
- > .components-flex {
- height: 36px;
- border: 1px solid $gray-600;
- box-shadow: none;
- border-radius: 2px;
- }
-
- > .components-form-token-field__suggestions-list {
- position: absolute;
- z-index: 1;
- background-color: #fff;
- border: 1px solid var(--wp-admin-theme-color);
- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
- outline: 2px solid #0000;
- top: calc(100% - 1px);
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/combobox-control/types.ts b/packages/js/product-editor/src/components/combobox-control/types.ts
deleted file mode 100644
index 8d160ad9cc6..00000000000
--- a/packages/js/product-editor/src/components/combobox-control/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { ComboboxControl as Combobox } from '@wordpress/components';
-
-export type ComboboxControlOption = {
- label: string;
- value: string;
-};
-
-export type ComboboxControlProps = React.ComponentProps< typeof Combobox > &
- Pick<
- React.DetailedHTMLProps<
- React.InputHTMLAttributes< HTMLInputElement >,
- HTMLInputElement
- >,
- 'id' | 'name' | 'onBlur'
- >;
diff --git a/packages/js/product-editor/src/components/content-preview/content-preview.tsx b/packages/js/product-editor/src/components/content-preview/content-preview.tsx
deleted file mode 100644
index dc3f0848321..00000000000
--- a/packages/js/product-editor/src/components/content-preview/content-preview.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { createElement, Fragment } from '@wordpress/element';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-import {
- // @ts-expect-error __unstableIframe is not exported from @wordpress/block-editor's public types.
- __unstableIframe as Iframe,
- // @ts-expect-error __unstableEditorStyles is not exported from @wordpress/block-editor's public types.
- __unstableEditorStyles as EditorStyles,
- store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-type ContentPreviewProps = {
- content: string;
-};
-
-const CONTENT_TAGS = [
- 'a',
- 'b',
- 'em',
- 'i',
- 'strong',
- 'p',
- 'br',
- 'img',
- 'blockquote',
- 'cite',
- 'h1',
- 'h2',
- 'h3',
- 'h4',
- 'h5',
- 'h6',
- 'ul',
- 'li',
- 'ol',
- 'div',
-];
-
-const CONTENT_ATTR = [
- 'target',
- 'href',
- 'rel',
- 'name',
- 'download',
- 'src',
- 'style',
- 'class',
-];
-
-export function ContentPreview( { content }: ContentPreviewProps ) {
- const parentEditorSettings = useSelect( ( select ) => {
- return select( blockEditorStore ).getSettings();
- }, [] );
-
- return (
- <div className="woocommerce-content-preview">
- <Iframe
- className="woocommerce-content-preview__iframe"
- tabIndex={ -1 }
- >
- <>
- <EditorStyles styles={ parentEditorSettings?.styles } />
- <style>
- { `body {
- overflow: hidden;
- }` }
- </style>
- <div
- className="woocommerce-content-preview__content"
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( content, {
- tags: CONTENT_TAGS,
- attr: CONTENT_ATTR,
- } ),
- } }
- />
- </>
- </Iframe>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/content-preview/index.ts b/packages/js/product-editor/src/components/content-preview/index.ts
deleted file mode 100644
index 5a6beb5d66f..00000000000
--- a/packages/js/product-editor/src/components/content-preview/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './content-preview';
diff --git a/packages/js/product-editor/src/components/content-preview/style.scss b/packages/js/product-editor/src/components/content-preview/style.scss
deleted file mode 100644
index 66c0a437343..00000000000
--- a/packages/js/product-editor/src/components/content-preview/style.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.woocommerce-content-preview {
- border: 1px solid $gray-300;
- max-height: 144px;
- width: 100%;
- overflow: hidden;
- margin-top: $gap-largest;
-
- &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: 0;
- left: 0;
- height: 57px;
- width: 100%;
- background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 89.5%);
- }
-
- &__iframe {
- width: 100%;
- }
-
- &__content {
- box-sizing: border-box;
- padding: $gap-large;
-
- >:first-child {
- margin-top: 0;
- }
-
- > * {
- max-width: 100%;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx b/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx
deleted file mode 100644
index 55f92de0f1f..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/create-modal.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Modal } from '@wordpress/components';
-import { createElement, useState, useRef, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { recordEvent } from '@woocommerce/tracks';
-import clsx from 'clsx';
-import type { FocusEvent } from 'react';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { TextControl } from '../../text-control';
-import {
- ValidationError,
- validate,
- type ValidationErrors,
-} from '../utils/validations';
-import type { Metadata } from '../../../types';
-import { CustomFieldNameControl } from '../custom-field-name-control';
-import type { CreateModalProps } from './types';
-
-const DEFAULT_CUSTOM_FIELD = {
- id: 1,
- key: '',
- value: '',
-} satisfies Metadata< string >;
-
-export function CreateModal( {
- values,
- onCreate,
- onCancel,
- ...props
-}: CreateModalProps ) {
- const [ customFields, setCustomFields ] = useState< Metadata< string >[] >(
- [ DEFAULT_CUSTOM_FIELD ]
- );
-
- const [ validationError, setValidationError ] =
- useState< ValidationErrors >( {} );
- const inputRefs = useRef<
- Record<
- string,
- Record< keyof Metadata< string >, HTMLInputElement | null >
- >
- >( {} );
-
- useEffect( function focusFirstNameInputOnMount() {
- const firstRef = inputRefs.current[ DEFAULT_CUSTOM_FIELD.id ];
- firstRef?.key?.focus();
- }, [] );
-
- function getRef(
- customField: Metadata< string >,
- prop: keyof Metadata< string >
- ) {
- return function setRef( element: HTMLInputElement ) {
- const id = String( customField.id );
- inputRefs.current[ id ] = {
- ...inputRefs.current[ id ],
- [ prop ]: element,
- };
- };
- }
-
- function getValidationError(
- customField: Metadata< string >,
- prop: keyof Metadata< string >
- ) {
- return validationError[ String( customField.id ) ]?.[ prop ];
- }
-
- function changeHandler(
- customField: Metadata< string >,
- prop: keyof Metadata< string >
- ) {
- return function handleChange( value: string | null | undefined ) {
- setCustomFields( ( current ) =>
- current.map( ( field ) =>
- field.id === customField.id
- ? { ...field, [ prop ]: value }
- : field
- )
- );
- };
- }
-
- function blurHandler(
- customField: Metadata< string >,
- prop: keyof Metadata< string >
- ) {
- return function handleBlur( event: FocusEvent< HTMLInputElement > ) {
- const error = validate(
- {
- ...customField,
- [ prop ]: event.target.value,
- },
- [ ...customFields, ...values ]
- );
- const id = String( customField.id );
- setValidationError( ( current ) => ( {
- ...current,
- [ id ]: {
- ...( current[ id ] as ValidationError ),
- [ prop ]: error[ prop ],
- },
- } ) );
- };
- }
-
- function removeCustomFieldButtonClickHandler(
- customField: Metadata< string >
- ) {
- if ( customFields.length <= 1 ) {
- return undefined;
- }
-
- return function handleRemoveCustomFieldButtonClick() {
- setCustomFields( ( current ) =>
- current.filter( ( { id } ) => customField.id !== id )
- );
- setValidationError( ( current ) => ( {
- ...current,
- [ `${ customField.id }` ]: undefined,
- } ) );
- };
- }
-
- function handleAddAnotherButtonClick() {
- setCustomFields( ( current ) => {
- const lastField = current[ current.length - 1 ];
- return [
- ...current,
- { ...DEFAULT_CUSTOM_FIELD, id: ( lastField.id ?? 0 ) + 1 },
- ];
- } );
-
- recordEvent( 'product_custom_fields_add_another_button_click', {
- source: TRACKS_SOURCE,
- } );
- }
-
- function handleAddButtonClick() {
- const { errors, hasErrors } = customFields.reduce(
- ( prev, customField ) => {
- const _errors = validate( customField, [
- ...customFields,
- ...values,
- ] );
- prev.errors[ String( customField.id ) ] = _errors;
-
- if ( _errors.key ) {
- if ( ! prev.hasErrors ) {
- inputRefs.current[
- String( customField.id )
- ]?.key?.focus();
- }
- prev.hasErrors = true;
- }
-
- if ( _errors.value ) {
- if ( ! prev.hasErrors ) {
- inputRefs.current[
- String( customField.id )
- ]?.value?.focus();
- }
- prev.hasErrors = true;
- }
-
- return prev;
- },
- { errors: {} as ValidationErrors, hasErrors: false }
- );
-
- if ( hasErrors ) {
- setValidationError( errors );
- return;
- }
-
- onCreate(
- customFields.map( ( { id, ...customField } ) => ( {
- key: customField.key.trim(),
- value: customField.value?.trim(),
- } ) )
- );
-
- recordEvent( 'product_custom_fields_add_new_button_click', {
- source: TRACKS_SOURCE,
- custom_field_names: customFields.map(
- ( customField ) => customField.key
- ),
- total: customFields.length,
- } );
- }
-
- return (
- <Modal
- shouldCloseOnClickOutside={ false }
- title={ __( 'Add custom fields', 'woocommerce' ) }
- onRequestClose={ onCancel }
- { ...props }
- className={ clsx(
- 'woocommerce-product-custom-fields__create-modal',
- props.className
- ) }
- >
- <div role="table">
- <div role="rowgroup">
- <div role="rowheader">
- <div role="columnheader">
- { __( 'Name', 'woocommerce' ) }
- </div>
- <div role="columnheader">
- { __( 'Value', 'woocommerce' ) }
- </div>
- <div
- role="columnheader"
- aria-label={ __( 'Actions', 'woocommerce' ) }
- />
- </div>
- </div>
- <div role="rowgroup">
- { customFields.map( ( customField ) => (
- <div key={ customField.id } role="row">
- <div role="cell">
- <CustomFieldNameControl
- ref={ getRef( customField, 'key' ) }
- label={ __( 'Name', 'woocommerce' ) }
- hideLabelFromVision
- allowReset={ false }
- help={ getValidationError(
- customField,
- 'key'
- ) }
- value={ customField.key }
- onChange={ changeHandler(
- customField,
- 'key'
- ) }
- onBlur={ blurHandler( customField, 'key' ) }
- className={ clsx( {
- 'has-error': getValidationError(
- customField,
- 'key'
- ),
- } ) }
- />
- </div>
- <div role="cell">
- <TextControl
- ref={ getRef( customField, 'value' ) }
- label={ '' }
- aria-label={ __( 'Value', 'woocommerce' ) }
- error={ getValidationError(
- customField,
- 'value'
- ) }
- value={ customField.value }
- onChange={ changeHandler(
- customField,
- 'value'
- ) }
- onBlur={ blurHandler(
- customField,
- 'value'
- ) }
- />
- </div>
- <div role="cell">
- <Button
- icon={ closeSmall }
- disabled={ customFields.length <= 1 }
- aria-label={ __(
- 'Remove custom field',
- 'woocommerce'
- ) }
- onClick={ removeCustomFieldButtonClickHandler(
- customField
- ) }
- />
- </div>
- </div>
- ) ) }
- </div>
- </div>
-
- <div className="woocommerce-product-custom-fields__create-modal-add-another">
- <Button
- variant="tertiary"
- onClick={ handleAddAnotherButtonClick }
- >
- { __( '+ Add another', 'woocommerce' ) }
- </Button>
- </div>
-
- <div className="woocommerce-product-custom-fields__create-modal-actions">
- <Button variant="secondary" onClick={ onCancel }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
-
- <Button variant="primary" onClick={ handleAddButtonClick }>
- { __( 'Add', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/index.ts b/packages/js/product-editor/src/components/custom-fields/create-modal/index.ts
deleted file mode 100644
index b79de04c84f..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './create-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss b/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
deleted file mode 100644
index b52bba2f43b..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/style.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.components-modal__frame.woocommerce-product-custom-fields__create-modal {
- min-width: 75%;
-}
-
-.woocommerce-product-custom-fields__create-modal {
- [role="table"] {
- width: 100%;
-
- [role="rowheader"],
- [role="row"] {
- display: grid;
- grid-template-columns: 1fr 1fr 36px;
- gap: $grid-unit-20;
- }
-
- [role="row"] {
- border-top: 1px solid $gray-200;
- border-bottom: 1px solid transparent;
- padding-top: $grid-unit-40;
- }
-
- [role="columnheader"] {
- text-transform: uppercase;
- color: $gray-700;
- padding-top: $grid-unit-30;
- padding-bottom: $grid-unit-20;
- }
-
- [role="cell"] {
- height: $grid-unit-80;
-
- .components-base-control {
- width: 100%;
- margin-bottom: 0;
-
- .components-input-base {
- gap: 0;
-
- .components-input-control__input {
- height: 36px;
- }
- }
- }
-
- .components-button.has-icon {
- min-width: $grid-unit-40;
- width: $grid-unit-40;
- height: $grid-unit-40;
- }
- }
- }
-
- &-add-another {
- margin-top: $grid-unit-40;
- }
-
- &-actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 12px;
- margin-top: $grid-unit-40;
- }
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/create-modal/types.ts b/packages/js/product-editor/src/components/custom-fields/create-modal/types.ts
deleted file mode 100644
index dd08d5820e4..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/create-modal/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { Modal } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import type { Metadata } from '../../../types';
-
-export type CreateModalProps = Omit<
- React.ComponentProps< typeof Modal >,
- 'title' | 'onRequestClose' | 'children'
-> & {
- values: Metadata< string >[];
- onCreate( value: Metadata< string >[] ): void;
- onCancel(): void;
-};
diff --git a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/custom-field-name-control.tsx b/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/custom-field-name-control.tsx
deleted file mode 100644
index b3bbd461b25..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/custom-field-name-control.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-import apiFetch from '@wordpress/api-fetch';
-import { useDebounce } from '@wordpress/compose';
-import {
- createElement,
- forwardRef,
- useCallback,
- useMemo,
- useState,
-} from '@wordpress/element';
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { ComboboxControl, ComboboxControlProps } from '../../combobox-control';
-import type { ComboboxControlOption } from '../../attribute-combobox-field/types';
-import type { CustomFieldNameControlProps } from './types';
-
-/**
- * Since the Combobox does not support an arbitrary value, the
- * way to make it behave as an autocomplete, is by converting
- * the arbitrary value into an option so it can be selected as
- * a valid value
- *
- * @param search The search criteria.
- * @return The list of filtered custom field names as a Promise.
- */
-async function searchCustomFieldNames( search?: string ) {
- return apiFetch< string[] >( {
- path: addQueryArgs( '/wc/v3/products/custom-fields/names', {
- search,
- } ),
- } ).then( ( customFieldNames = [] ) => {
- const options: ComboboxControlOption[] = [];
-
- if ( search && customFieldNames.indexOf( search ) === -1 ) {
- options.push( { value: search, label: search } );
- }
-
- customFieldNames.forEach( ( customFieldName ) => {
- options.push( {
- value: customFieldName,
- label: customFieldName,
- } );
- } );
-
- return options;
- } );
-}
-
-export const CustomFieldNameControl = forwardRef(
- function ForwardedCustomFieldNameControl(
- { value, onBlur, ...props }: CustomFieldNameControlProps,
- ref: ForwardedRef< HTMLInputElement >
- ) {
- const [ customFieldNames, setCustomFieldNames ] = useState<
- ComboboxControlProps[ 'options' ]
- >( [] );
-
- const options = useMemo(
- /**
- * Prepend the selected value as an option to let
- * the Combobox know which option is the selected
- * one even when an async request is being performed
- *
- * @return The combobox options.
- */
- function prependSelectedValueAsOption() {
- if ( value ) {
- const isExisting = customFieldNames.some(
- ( customFieldName ) => customFieldName.value === value
- );
- if ( ! isExisting ) {
- return [ { label: value, value }, ...customFieldNames ];
- }
- }
- return customFieldNames;
- },
- [ customFieldNames, value ]
- );
-
- const handleFilterValueChange = useDebounce(
- useCallback(
- function onFilterValueChange( search: string ) {
- searchCustomFieldNames(
- search === '' ? ( value as string ) : search
- ).then( setCustomFieldNames );
- },
- [ value ]
- ),
- 250
- );
-
- function handleBlur( event: React.FocusEvent< HTMLInputElement > ) {
- setCustomFieldNames( [] );
- onBlur?.( event );
- }
-
- return (
- <ComboboxControl
- { ...props }
- ref={ ref }
- value={ value }
- options={ options }
- onFilterValueChange={ handleFilterValueChange }
- onBlur={ handleBlur }
- />
- );
- }
-);
diff --git a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/index.ts b/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/index.ts
deleted file mode 100644
index 5e7a5d9db9a..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './custom-field-name-control';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/types.ts b/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/types.ts
deleted file mode 100644
index e701be13bac..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/custom-field-name-control/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { ComboboxControl } from '@wordpress/components';
-
-export type CustomFieldNameControlProps = Omit<
- React.ComponentProps< typeof ComboboxControl >,
- 'options' | 'onFilterValueChange'
-> &
- Pick<
- React.DetailedHTMLProps<
- React.InputHTMLAttributes< HTMLInputElement >,
- HTMLInputElement
- >,
- 'onBlur'
- >;
-
-export type CustomFieldName = {
- value: string;
- label: string;
-};
diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx
deleted file mode 100644
index 4ad4022184d..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement, Fragment, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { recordEvent } from '@woocommerce/tracks';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-import { useCustomFields } from '../../hooks/use-custom-fields';
-import { CreateModal } from './create-modal';
-import { EditModal } from './edit-modal';
-import { EmptyState } from '../empty-state';
-import type { Metadata } from '../../types';
-import type { CustomFieldsProps } from './types';
-import { getEmptyStateSequentialNames } from '../../utils';
-
-export function CustomFields( {
- className,
- renderActionButtonsWrapper = ( buttons ) => buttons,
- ...props
-}: CustomFieldsProps ) {
- const {
- customFields,
- addCustomFields,
- updateCustomField,
- removeCustomField,
- } = useCustomFields();
-
- const [ showCreateModal, setShowCreateModal ] = useState( false );
- const [ selectedCustomFieldIndex, setSelectedCustomFieldIndex ] =
- useState< number >();
-
- function handleAddNewButtonClick() {
- setShowCreateModal( true );
-
- recordEvent( 'product_custom_fields_show_add_modal', {
- source: TRACKS_SOURCE,
- } );
- }
-
- function customFieldEditButtonClickHandler( customFieldIndex: number ) {
- return function handleCustomFieldEditButtonClick() {
- setSelectedCustomFieldIndex( customFieldIndex );
-
- const customField = customFields[ customFieldIndex ];
-
- recordEvent( 'product_custom_fields_show_edit_modal', {
- source: TRACKS_SOURCE,
- custom_field_id: customField.id,
- custom_field_name: customField.key,
- } );
- };
- }
-
- function customFieldRemoveButtonClickHandler(
- customField: Metadata< string >
- ) {
- return function handleCustomFieldRemoveButtonClick() {
- removeCustomField( customField );
-
- recordEvent( 'product_custom_fields_remove_button_click', {
- source: TRACKS_SOURCE,
- custom_field_id: customField.id,
- custom_field_name: customField.key,
- } );
- };
- }
-
- function handleCreateModalCreate( value: Metadata< string >[] ) {
- addCustomFields( value );
- setShowCreateModal( false );
- }
-
- function handleCreateModalCancel() {
- setShowCreateModal( false );
-
- recordEvent( 'product_custom_fields_cancel_add_modal', {
- source: TRACKS_SOURCE,
- } );
- }
-
- function handleEditModalUpdate( customField: Metadata< string > ) {
- updateCustomField( customField, selectedCustomFieldIndex );
- setSelectedCustomFieldIndex( undefined );
- }
-
- function handleEditModalCancel() {
- setSelectedCustomFieldIndex( undefined );
-
- recordEvent( 'product_custom_fields_cancel_edit_modal', {
- source: TRACKS_SOURCE,
- } );
- }
-
- return (
- <>
- { renderActionButtonsWrapper(
- <Button variant="secondary" onClick={ handleAddNewButtonClick }>
- { __( 'Add new', 'woocommerce' ) }
- </Button>
- ) }
-
- { customFields.length === 0 ? (
- <EmptyState
- names={ getEmptyStateSequentialNames(
- __( 'Custom field', 'woocommerce' ),
- 3
- ) }
- />
- ) : (
- <table
- { ...props }
- className={ clsx(
- 'woocommerce-product-custom-fields__table',
- className
- ) }
- >
- <thead>
- <tr className="woocommerce-product-custom-fields__table-row">
- <th>{ __( 'Name', 'woocommerce' ) }</th>
- <th>{ __( 'Value', 'woocommerce' ) }</th>
- <th>{ __( 'Actions', 'woocommerce' ) }</th>
- </tr>
- </thead>
- <tbody>
- { customFields.map( ( customField, index ) => (
- <tr
- className="woocommerce-product-custom-fields__table-row"
- key={ customField.id ?? customField.key }
- >
- <td className="woocommerce-product-custom-fields__table-datacell">
- { customField.key }
- </td>
- <td className="woocommerce-product-custom-fields__table-datacell">
- { customField.value }
- </td>
- <td className="woocommerce-product-custom-fields__table-datacell">
- <Button
- variant="tertiary"
- onClick={ customFieldEditButtonClickHandler(
- index
- ) }
- >
- { __( 'Edit', 'woocommerce' ) }
- </Button>
-
- <Button
- icon={ closeSmall }
- onClick={ customFieldRemoveButtonClickHandler(
- customField
- ) }
- aria-label={ __(
- 'Remove custom field',
- 'woocommerce'
- ) }
- />
- </td>
- </tr>
- ) ) }
- </tbody>
- </table>
- ) }
-
- { showCreateModal && (
- <CreateModal
- values={ customFields }
- onCreate={ handleCreateModalCreate }
- onCancel={ handleCreateModalCancel }
- />
- ) }
-
- { selectedCustomFieldIndex !== undefined && (
- <EditModal
- initialValue={ customFields[ selectedCustomFieldIndex ] }
- values={ customFields }
- onUpdate={ handleEditModalUpdate }
- onCancel={ handleEditModalCancel }
- />
- ) }
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/edit-modal/edit-modal.tsx b/packages/js/product-editor/src/components/custom-fields/edit-modal/edit-modal.tsx
deleted file mode 100644
index de1e5e0c03c..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/edit-modal/edit-modal.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Modal } from '@wordpress/components';
-import { createElement, useState, useRef, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import clsx from 'clsx';
-import type { FocusEvent } from 'react';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { TextControl } from '../../text-control';
-import type { Metadata } from '../../../types';
-import { type ValidationError, validate } from '../utils/validations';
-import { CustomFieldNameControl } from '../custom-field-name-control';
-import type { EditModalProps } from './types';
-
-export function EditModal( {
- initialValue,
- values,
- onUpdate,
- onCancel,
- ...props
-}: EditModalProps ) {
- const [ customField, setCustomField ] =
- useState< Metadata< string > >( initialValue );
- const [ validationError, setValidationError ] =
- useState< ValidationError >();
- const keyInputRef = useRef< HTMLInputElement >( null );
- const valueInputRef = useRef< HTMLInputElement >( null );
-
- useEffect( function focusNameInputOnMount() {
- keyInputRef.current?.focus();
- }, [] );
-
- function renderTitle() {
- return sprintf(
- /* translators: %s: the name of the custom field */
- __( 'Edit %s', 'woocommerce' ),
- customField.key
- );
- }
-
- function changeHandler( prop: keyof Metadata< string > ) {
- return function handleChange( value: string | null | undefined ) {
- setCustomField( ( current ) => ( {
- ...current,
- [ prop ]: value,
- } ) );
- };
- }
-
- function blurHandler( prop: keyof Metadata< string > ) {
- return function handleBlur( event: FocusEvent< HTMLInputElement > ) {
- const error = validate(
- {
- ...customField,
- [ prop ]: event.target.value,
- },
- values
- );
- setValidationError( error );
- };
- }
-
- function handleUpdateButtonClick() {
- const errors = validate( customField, values );
-
- if ( errors.key || errors.value ) {
- setValidationError( errors );
-
- if ( errors.key ) {
- keyInputRef.current?.focus();
- return;
- }
-
- valueInputRef.current?.focus();
- return;
- }
-
- onUpdate( {
- ...customField,
- key: customField.key.trim(),
- value: customField.value?.trim(),
- } );
-
- recordEvent( 'product_custom_fields_update_button_click', {
- source: TRACKS_SOURCE,
- custom_field_id: customField.id,
- custom_field_name: customField.key,
- prev_custom_field_name: initialValue.key,
- } );
- }
-
- return (
- <Modal
- shouldCloseOnClickOutside={ false }
- { ...props }
- title={ renderTitle() }
- onRequestClose={ onCancel }
- className={ clsx(
- 'woocommerce-product-custom-fields__edit-modal',
- props.className
- ) }
- >
- <CustomFieldNameControl
- ref={ keyInputRef }
- label={ __( 'Name', 'woocommerce' ) }
- allowReset={ false }
- help={ validationError?.key }
- value={ customField.key }
- onChange={ changeHandler( 'key' ) }
- onBlur={ blurHandler( 'key' ) }
- className={ clsx( {
- 'has-error': validationError?.key,
- } ) }
- />
-
- <TextControl
- ref={ valueInputRef }
- label={ __( 'Value', 'woocommerce' ) }
- error={ validationError?.value }
- value={ customField.value }
- onChange={ changeHandler( 'value' ) }
- onBlur={ blurHandler( 'value' ) }
- />
-
- <div className="woocommerce-product-custom-fields__edit-modal-actions">
- <Button variant="secondary" onClick={ onCancel }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
-
- <Button variant="primary" onClick={ handleUpdateButtonClick }>
- { __( 'Update', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/edit-modal/index.ts b/packages/js/product-editor/src/components/custom-fields/edit-modal/index.ts
deleted file mode 100644
index 1983e31d98a..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/edit-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './edit-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/custom-fields/edit-modal/style.scss b/packages/js/product-editor/src/components/custom-fields/edit-modal/style.scss
deleted file mode 100644
index f55637d42dd..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/edit-modal/style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.woocommerce-product-custom-fields__edit-modal {
- &-actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 12px;
- margin-top: $grid-unit-40;
- }
-
- .components-base-control {
- width: 100%;
-
- .components-input-base {
- .components-input-control__input {
- height: 36px;
- }
- }
- }
-
- .components-modal__content {
- width: 500px;
- max-width: 100%;
- }
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/edit-modal/types.ts b/packages/js/product-editor/src/components/custom-fields/edit-modal/types.ts
deleted file mode 100644
index 01601af8dba..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/edit-modal/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { Modal } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { Metadata } from '../../../types';
-
-export type EditModalProps = Omit<
- React.ComponentProps< typeof Modal >,
- 'title' | 'onRequestClose' | 'children'
-> & {
- initialValue: Metadata< string >;
- values: Metadata< string >[];
- onUpdate( value: Metadata< string > ): void;
- onCancel(): void;
-};
diff --git a/packages/js/product-editor/src/components/custom-fields/index.ts b/packages/js/product-editor/src/components/custom-fields/index.ts
deleted file mode 100644
index c87eb206553..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './custom-fields';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/custom-fields/style.scss b/packages/js/product-editor/src/components/custom-fields/style.scss
deleted file mode 100644
index 6a4137cc9c8..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/style.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "./create-modal/style.scss";
-@import "./edit-modal/style.scss";
-
-.woocommerce-product-custom-fields {
- &__table {
- width: 100%;
-
- thead {
- @include screen-reader-only();
- }
-
- &-row {
- display: grid;
- grid-template-columns: 1fr 1fr 100px;
- gap: $grid-unit-30;
- border-bottom: 1px solid $gray-200;
-
- &:last-child {
- border-bottom: none;
- }
- }
-
- &-datacell {
- padding-top: $grid-unit-30;
- padding-bottom: $grid-unit-30;
- overflow: hidden;
-
- &:last-child {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 2px 0 0;
- gap: $grid-unit;
- }
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/custom-fields/types.ts b/packages/js/product-editor/src/components/custom-fields/types.ts
deleted file mode 100644
index ced8c9f179a..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type CustomFieldsProps = React.DetailedHTMLProps<
- React.TableHTMLAttributes< HTMLTableElement >,
- HTMLTableElement
-> & {
- renderActionButtonsWrapper?( buttons: React.ReactNode ): React.ReactNode;
-};
diff --git a/packages/js/product-editor/src/components/custom-fields/utils/validations/index.ts b/packages/js/product-editor/src/components/custom-fields/utils/validations/index.ts
deleted file mode 100644
index ce410a68da8..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/utils/validations/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './validate';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/custom-fields/utils/validations/types.ts b/packages/js/product-editor/src/components/custom-fields/utils/validations/types.ts
deleted file mode 100644
index 4cd90f1f5e7..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/utils/validations/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Metadata } from '../../../../types';
-
-export type ValidationError = Record< keyof Metadata< string >, string >;
-
-export type ValidationErrors = {
- [ id: string ]: ValidationError | undefined;
-};
diff --git a/packages/js/product-editor/src/components/custom-fields/utils/validations/validate.ts b/packages/js/product-editor/src/components/custom-fields/utils/validations/validate.ts
deleted file mode 100644
index 70e3c803f6d..00000000000
--- a/packages/js/product-editor/src/components/custom-fields/utils/validations/validate.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import type { Metadata } from '../../../../types';
-import type { ValidationError } from './types';
-
-export function validate(
- customField: Partial< Metadata< string > >,
- customFields: Metadata< string >[]
-): ValidationError {
- const errors = {} as ValidationError;
-
- if ( ! customField.key ) {
- errors.key = __( 'The name is required.', 'woocommerce' );
- } else if ( customField.key.startsWith( '_' ) ) {
- errors.key = __(
- 'The name cannot begin with the underscore (_) character.',
- 'woocommerce'
- );
- } else if (
- customFields.some(
- ( field ) =>
- field.id !== customField.id && field.key === customField.key
- )
- ) {
- errors.key = __( 'The name must be unique.', 'woocommerce' );
- }
-
- if ( ! customField.value ) {
- errors.value = __( 'The value is required.', 'woocommerce' );
- }
-
- return errors;
-}
diff --git a/packages/js/product-editor/src/components/edit-product-link-modal/edit-product-link-modal.tsx b/packages/js/product-editor/src/components/edit-product-link-modal/edit-product-link-modal.tsx
deleted file mode 100644
index 16a8dbe3872..00000000000
--- a/packages/js/product-editor/src/components/edit-product-link-modal/edit-product-link-modal.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button, Modal, TextControl } from '@wordpress/components';
-import {
- useState,
- createElement,
- createInterpolateElement,
-} from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { cleanForSlug } from '@wordpress/url';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-
-type EditProductLinkModalProps = {
- product: Product;
- permalinkPrefix: string;
- permalinkSuffix: string;
- onCancel: () => void;
- onSaved: () => void;
- saveHandler: (
- slug: string
- ) => Promise< { slug: string; permalink: string } | undefined >;
-};
-
-export const EditProductLinkModal = ( {
- product,
- permalinkPrefix,
- permalinkSuffix,
- onCancel,
- onSaved,
- saveHandler,
-}: EditProductLinkModalProps ) => {
- const { createNotice } = useDispatch( 'core/notices' );
- const [ isSaving, setIsSaving ] = useState< boolean >( false );
- const [ slug, setSlug ] = useState(
- product.slug || cleanForSlug( product.name )
- );
-
- const onSave = async () => {
- recordEvent( 'product_update_slug', {
- source: TRACKS_SOURCE,
- product_id: product.id,
- product_type: product.type,
- } );
-
- const { slug: updatedSlug, permalink: updatedPermalink } =
- ( await saveHandler( slug ) ) ?? {};
-
- if ( updatedSlug ) {
- createNotice(
- updatedSlug === cleanForSlug( slug ) ? 'success' : 'info',
- updatedSlug === cleanForSlug( slug )
- ? __( 'Product link successfully updated.', 'woocommerce' )
- : __(
- 'Product link already existed, updated to ',
- 'woocommerce'
- ) + updatedPermalink
- );
- } else {
- createNotice(
- 'error',
- __( 'Failed to update product link.', 'woocommerce' )
- );
- }
- onSaved();
- };
-
- const newProductLinkLabel =
- permalinkPrefix + cleanForSlug( slug ) + permalinkSuffix;
-
- return (
- <Modal
- title={ __( 'Edit product link', 'woocommerce' ) }
- onRequestClose={ () => onCancel() }
- className="woocommerce-product-link-edit-modal"
- >
- <div className="woocommerce-product-link-edit-modal__wrapper">
- <p className="woocommerce-product-link-edit-modal__description">
- { __(
- "Create a unique link for this product. Use simple, descriptive words and numbers. We'll replace spaces with hyphens (-).",
- 'woocommerce'
- ) }
- </p>
- <TextControl
- label={ __( 'Product link', 'woocommerce' ) }
- name="slug"
- value={ slug }
- onChange={ setSlug }
- hideLabelFromVision
- help={ createInterpolateElement(
- __( 'Preview: <link />', 'woocommerce' ),
- {
- link: <strong>{ newProductLinkLabel }</strong>,
- }
- ) }
- />
- <div className="woocommerce-product-link-edit-modal__buttons">
- <Button isSecondary onClick={ () => onCancel() }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- isPrimary
- isBusy={ isSaving }
- disabled={ isSaving || slug === product.slug }
- onClick={ async () => {
- setIsSaving( true );
- await onSave();
- setIsSaving( false );
- } }
- >
- { __( 'Save', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- </Modal>
- );
-};
diff --git a/packages/js/product-editor/src/components/edit-product-link-modal/index.ts b/packages/js/product-editor/src/components/edit-product-link-modal/index.ts
deleted file mode 100644
index fdc1873765c..00000000000
--- a/packages/js/product-editor/src/components/edit-product-link-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './edit-product-link-modal';
diff --git a/packages/js/product-editor/src/components/edit-product-link-modal/style.scss b/packages/js/product-editor/src/components/edit-product-link-modal/style.scss
deleted file mode 100644
index c4f22abc050..00000000000
--- a/packages/js/product-editor/src/components/edit-product-link-modal/style.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.woocommerce-product-link-edit-modal {
- max-width: 650px;
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
-
- .woocommerce-product-link-edit-modal__description {
- margin-top: 0;
- margin-bottom: $gap-large;
- }
-}
diff --git a/packages/js/product-editor/src/components/edit-product-link-modal/test/edit-product-link-modal.test.tsx b/packages/js/product-editor/src/components/edit-product-link-modal/test/edit-product-link-modal.test.tsx
deleted file mode 100644
index bb33e69164c..00000000000
--- a/packages/js/product-editor/src/components/edit-product-link-modal/test/edit-product-link-modal.test.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import { Product } from '@woocommerce/data';
-import userEvent from '@testing-library/user-event';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { EditProductLinkModal } from '../';
-
-jest.mock( '../../../hooks/use-product-helper', () => ( {
- useProductHelper: jest.fn().mockReturnValue( {
- updateProductWithStatus: jest.fn(),
- isUpdatingDraft: jest.fn(),
- isUpdatingPublished: jest.fn(),
- } ),
-} ) );
-
-describe( 'EditProductLinkModal', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should show a field with the permalink as label', () => {
- const { queryByText } = render(
- <EditProductLinkModal
- permalinkPrefix={ 'wootesting.com/product/' }
- permalinkSuffix={ '' }
- product={
- {
- slug: 'test',
- permalink: 'wootesting.com/product/test',
- } as Product
- }
- onCancel={ () => {} }
- onSaved={ () => {} }
- saveHandler={ () =>
- new Promise( () => ( {
- slug: 'test-slug',
- permalink: 'http://test-link',
- } ) )
- }
- />
- );
- expect(
- queryByText( 'wootesting.com/product/test' )
- ).toBeInTheDocument();
- } );
-
- it( 'should update the permalink label as the slug is being updated', () => {
- const { queryByText, getByLabelText } = render(
- <EditProductLinkModal
- permalinkPrefix={ 'wootesting.com/product/' }
- permalinkSuffix={ '' }
- product={
- {
- slug: 'test',
- permalink: 'wootesting.com/product/test',
- } as Product
- }
- onCancel={ () => {} }
- onSaved={ () => {} }
- saveHandler={ () =>
- new Promise( () => ( {
- slug: 'test-slug',
- permalink: 'http://test-link',
- } ) )
- }
- />
- );
- userEvent.type(
- getByLabelText( 'Product link' ),
- '{esc}{space}update',
- {}
- );
- expect(
- queryByText( 'wootesting.com/product/test-update' )
- ).toBeInTheDocument();
- } );
-
- it( 'should only update the end of the permalink incase the slug matches other parts of the url', () => {
- const { queryByText, getByLabelText } = render(
- <EditProductLinkModal
- permalinkPrefix={ 'wootesting.com/product/' }
- permalinkSuffix={ '' }
- product={
- {
- slug: 'product',
- permalink: 'wootesting.com/product/product',
- } as Product
- }
- onCancel={ () => {} }
- onSaved={ () => {} }
- saveHandler={ () =>
- new Promise( () => ( {
- slug: 'test-slug',
- permalink: 'http://test-link',
- } ) )
- }
- />
- );
- userEvent.type(
- getByLabelText( 'Product link' ),
- '{esc}{space}update',
- {}
- );
- expect(
- queryByText( 'wootesting.com/product/product-update' )
- ).toBeInTheDocument();
- } );
-} );
diff --git a/packages/js/product-editor/src/components/editor/editor.tsx b/packages/js/product-editor/src/components/editor/editor.tsx
deleted file mode 100644
index b4f3d994937..00000000000
--- a/packages/js/product-editor/src/components/editor/editor.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- StrictMode,
- Fragment,
- useCallback,
- useState,
-} from '@wordpress/element';
-import {
- LayoutContextProvider,
- useExtendLayout,
-} from '@woocommerce/admin-layout';
-import { navigateTo, getNewPath, getQuery } from '@woocommerce/navigation';
-import { useSelect } from '@wordpress/data';
-import { Popover } from '@wordpress/components';
-import InterfaceSkeleton from '@wordpress/interface/build-module/components/interface-skeleton';
-import { EntityProvider } from '@wordpress/core-data';
-// @ts-expect-error ShortcutProvider is not exported from @wordpress/keyboard-shortcuts's public types.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { Header } from '../header';
-import { BlockEditor } from '../block-editor';
-import { EditorLoadingContext } from '../../contexts/editor-loading-context';
-import { ValidationProvider } from '../../contexts/validation-context';
-import { EditorProps } from './types';
-import { wooProductEditorUiStore } from '../../store/product-editor-ui';
-import { PrepublishPanel } from '../prepublish-panel/prepublish-panel';
-
-export function Editor( { productId, postType = 'product' }: EditorProps ) {
- const [ isEditorLoading, setIsEditorLoading ] = useState( true );
-
- const query = getQuery() as Record< string, string >;
- const selectedTab = query.tab || null;
-
- const setSelectedTab = useCallback( ( tabId: string ) => {
- navigateTo( { url: getNewPath( { tab: tabId } ) } );
- }, [] );
-
- const updatedLayoutContext = useExtendLayout( 'product-block-editor' );
-
- // Check if the prepublish sidebar is open from the store.
- const isPrepublishPanelOpen = useSelect( ( select ) => {
- return select( wooProductEditorUiStore ).isPrepublishPanelOpen();
- }, [] );
-
- return (
- <LayoutContextProvider value={ updatedLayoutContext }>
- <StrictMode>
- <EntityProvider
- kind="postType"
- type={ postType }
- id={ productId }
- >
- <ShortcutProvider>
- <ValidationProvider
- postType={ postType }
- productId={ productId }
- >
- <EditorLoadingContext.Provider
- value={ isEditorLoading }
- >
- <InterfaceSkeleton
- header={
- <Header
- onTabSelect={ setSelectedTab }
- productType={ postType }
- selectedTab={ selectedTab }
- />
- }
- content={
- <>
- <BlockEditor
- postType={ postType }
- productId={ productId }
- context={ {
- selectedTab,
- postType,
- postId: productId,
- } }
- setIsEditorLoading={
- setIsEditorLoading
- }
- />
- </>
- }
- actions={
- isPrepublishPanelOpen && (
- <PrepublishPanel
- productType={ postType }
- />
- )
- }
- />
- </EditorLoadingContext.Provider>
- { /* @ts-expect-error name does exist on PopoverSlot see: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/index.tsx#L555 */ }
- <Popover.Slot />
- </ValidationProvider>
- </ShortcutProvider>
- </EntityProvider>
- </StrictMode>
- </LayoutContextProvider>
- );
-}
diff --git a/packages/js/product-editor/src/components/editor/index.ts b/packages/js/product-editor/src/components/editor/index.ts
deleted file mode 100644
index 4dbccb707c9..00000000000
--- a/packages/js/product-editor/src/components/editor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './editor';
-export * from './init-blocks';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/editor/init-blocks.ts b/packages/js/product-editor/src/components/editor/init-blocks.ts
deleted file mode 100644
index c021fa40ddc..00000000000
--- a/packages/js/product-editor/src/components/editor/init-blocks.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import {
- BlockInstance,
- getBlockType,
- unregisterBlockType,
-} from '@wordpress/blocks';
-import {
- registerCoreBlocks,
- // @ts-expect-error __experimentalGetCoreBlocks is not exported from @wordpress/block-library's public types.
- __experimentalGetCoreBlocks,
-} from '@wordpress/block-library';
-
-/**
- * Internal dependencies
- */
-import * as productBlocks from '../../blocks';
-
-export function initBlocks() {
- const coreBlocks = __experimentalGetCoreBlocks();
- const blocks = coreBlocks.filter( ( block: BlockInstance ) => {
- return ! getBlockType( block.name );
- } );
- // @ts-expect-error registerCoreBlocks' public type has no arguments, but the runtime accepts an optional blocks array.
- registerCoreBlocks( blocks );
-
- const woocommerceBlocks = Object.values( productBlocks ).map( ( init ) =>
- init()
- );
-
- const registeredBlocks = [ ...blocks, ...woocommerceBlocks ];
-
- return function unregisterBlocks() {
- registeredBlocks.forEach(
- ( block ) => block && unregisterBlockType( block.name )
- );
- };
-}
diff --git a/packages/js/product-editor/src/components/editor/style.scss b/packages/js/product-editor/src/components/editor/style.scss
deleted file mode 100644
index aa9685fc324..00000000000
--- a/packages/js/product-editor/src/components/editor/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "@wordpress/interface/src/components/complementary-area-header/style.scss";
-@import "@wordpress/interface/src/components/complementary-area/style.scss";
-@import "@wordpress/interface/src/components/interface-skeleton/style.scss";
-@import "@wordpress/interface/src/components/pinned-items/style.scss";
diff --git a/packages/js/product-editor/src/components/editor/types.ts b/packages/js/product-editor/src/components/editor/types.ts
deleted file mode 100644
index e2b473e80c3..00000000000
--- a/packages/js/product-editor/src/components/editor/types.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import {
- EditorSettings,
- EditorBlockListSettings,
-} from '@wordpress/block-editor';
-import { Template } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { ProductTemplate } from '../../types';
-
-export type LayoutTemplate = {
- id: string;
- title: string;
- description: string;
- area: string;
- blockTemplates: Template[];
-};
-
-export type ProductEditorSettings = Partial<
- EditorSettings & EditorBlockListSettings
-> & {
- productTemplates: ProductTemplate[];
- productTemplate?: ProductTemplate;
-};
-
-export type EditorProps = {
- productId: number;
- postType?: string;
-};
diff --git a/packages/js/product-editor/src/components/empty-state/empty-state.tsx b/packages/js/product-editor/src/components/empty-state/empty-state.tsx
deleted file mode 100644
index 038b2785618..00000000000
--- a/packages/js/product-editor/src/components/empty-state/empty-state.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-type EmptyStateProps = React.DetailedHTMLProps<
- React.HTMLAttributes< HTMLDivElement >,
- HTMLDivElement
-> & {
- names: string[];
-};
-
-export function EmptyState( { names = [], ...props }: EmptyStateProps ) {
- return (
- <div
- { ...props }
- role="none"
- className="woocommerce-product-empty-state"
- >
- { names.map( ( name ) => (
- <div
- key={ name }
- className="woocommerce-product-empty-state__row"
- >
- { name === '' ? (
- <div className="woocommerce-product-empty-state__name" />
- ) : (
- <div>{ name }</div>
- ) }
- <div>
- <div className="woocommerce-product-empty-state__value" />
- </div>
- <div>
- <div className="woocommerce-product-empty-state__actions" />
- </div>
- </div>
- ) ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/empty-state/index.ts b/packages/js/product-editor/src/components/empty-state/index.ts
deleted file mode 100644
index ee513f137bc..00000000000
--- a/packages/js/product-editor/src/components/empty-state/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './empty-state';
diff --git a/packages/js/product-editor/src/components/empty-state/style.scss b/packages/js/product-editor/src/components/empty-state/style.scss
deleted file mode 100644
index b443083641e..00000000000
--- a/packages/js/product-editor/src/components/empty-state/style.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-.woocommerce-product-empty-state {
- @mixin skeleton {
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: $grid-unit-30;
- height: $grid-unit;
- }
-
- border: 1px dashed $gray-400;
- padding: 0 $grid-unit-30;
- border-radius: 2px;
-
- &__row {
- display: grid;
- grid-template-columns: 1.5fr 1fr 0.5fr;
- height: $grid-unit-80;
- align-items: center;
-
- // Apply border-top to all rows except the first one
- &:not( :first-child ) {
- border-top: 1px solid $gray-100;
- }
-
- &:nth-of-type( 3n + 1 ) {
- .woocommerce-product-empty-state__name {
- width: 85px;
- }
-
- .woocommerce-product-empty-state__value {
- width: 140px;
- }
- }
-
- &:nth-of-type( 3n + 2 ) {
- .woocommerce-product-empty-state__name {
- width: 120px;
- }
-
- .woocommerce-product-empty-state__value {
- width: 75px;
- }
- }
-
- &:nth-of-type( 3n + 3 ) {
- .woocommerce-product-empty-state__name {
- width: 100px;
- }
-
- .woocommerce-product-empty-state__value {
- width: 114px;
- }
- }
-
- // Decreasing opacity based on position
- @for $i from 1 through 100 {
- &:nth-of-type( #{ $i } ) {
- @if $i == 1 {
- opacity: 1;
- } @else if $i == 2 {
- opacity: 0.7;
- } @else if $i == 3 {
- opacity: 0.5;
- } @else {
- opacity: calc(0.5 - 0.04 * ($i - 3));
- }
- }
- }
-
- :last-child {
- display: flex;
- justify-content: flex-end;
- }
- }
-
- &__name {
- @include skeleton();
- }
- &__value {
- @include skeleton();
- }
-
- &__actions {
- @include skeleton();
- width: $grid-unit-60;
- }
-}
diff --git a/packages/js/product-editor/src/components/empty-state/test/empty-state.test.tsx b/packages/js/product-editor/src/components/empty-state/test/empty-state.test.tsx
deleted file mode 100644
index 61f870e6fd8..00000000000
--- a/packages/js/product-editor/src/components/empty-state/test/empty-state.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { EmptyState } from '../empty-state';
-
-describe( 'EmptyState', () => {
- it( 'should render empty name rows when names are empty', () => {
- const { container } = render( <EmptyState names={ [ '', '', '' ] } /> );
- const rows = container.querySelectorAll(
- '.woocommerce-product-empty-state__row'
- );
- expect( rows.length ).toBe( 3 );
- rows.forEach( ( row ) => {
- expect(
- row.querySelector( '.woocommerce-product-empty-state__name' )
- ).toBeInTheDocument();
- expect(
- row.querySelector( '.woocommerce-product-empty-state__value' )
- ).toBeInTheDocument();
- expect(
- row.querySelector( '.woocommerce-product-empty-state__actions' )
- ).toBeInTheDocument();
- } );
- } );
-
- it( 'should render names when provided', () => {
- const names = [ 'Name 1', 'Name 2', 'Name 3' ];
- const { container, queryByText } = render(
- <EmptyState names={ names } />
- );
- const rows = container.querySelectorAll(
- '.woocommerce-product-empty-state__row'
- );
- expect( rows.length ).toBe( 3 );
- names.forEach( ( name ) => {
- expect( queryByText( name ) ).toBeInTheDocument();
- } );
- } );
-
- it( 'should render the correct number of rows based on the provided array', () => {
- const testCases = [
- { names: [ 'Name 1', 'Name 2' ], expectedLength: 2 },
- {
- names: [ 'Name 1', 'Name 2', 'Name 3', 'Name 4' ],
- expectedLength: 4,
- },
- ];
-
- testCases.forEach( ( { names, expectedLength } ) => {
- const { container } = render( <EmptyState names={ names } /> );
- const rows = container.querySelectorAll(
- '.woocommerce-product-empty-state__row'
- );
- expect( rows.length ).toBe( expectedLength );
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/formatted-price/formatted-price.tsx b/packages/js/product-editor/src/components/formatted-price/formatted-price.tsx
deleted file mode 100644
index 167ca6930d2..00000000000
--- a/packages/js/product-editor/src/components/formatted-price/formatted-price.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment, useContext } from '@wordpress/element';
-import { CurrencyContext } from '@woocommerce/currency';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { FormattedPriceProps } from './types';
-
-export function FormattedPrice( {
- product,
- className,
- ...props
-}: FormattedPriceProps ) {
- const { formatAmount } = useContext( CurrencyContext );
-
- return (
- <>
- { ( Boolean( product.regular_price ) ||
- Boolean( product.price ) ) && (
- <span
- { ...props }
- className={ clsx(
- 'woocommerce-product-formatted-price',
- className
- ) }
- >
- { product.on_sale && (
- <span translate="no">
- { product.sale_price
- ? formatAmount( product.sale_price )
- : formatAmount( product.price ) }
- </span>
- ) }
-
- { product.regular_price && (
- <span
- translate="no"
- className={ clsx( {
- 'woocommerce-product-formatted-price--on-sale':
- product.on_sale,
- } ) }
- >
- { formatAmount( product.regular_price ) }
- </span>
- ) }
- </span>
- ) }
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/formatted-price/index.ts b/packages/js/product-editor/src/components/formatted-price/index.ts
deleted file mode 100644
index 9b3dee61a76..00000000000
--- a/packages/js/product-editor/src/components/formatted-price/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './formatted-price';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/formatted-price/style.scss b/packages/js/product-editor/src/components/formatted-price/style.scss
deleted file mode 100644
index 493fabeb841..00000000000
--- a/packages/js/product-editor/src/components/formatted-price/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.woocommerce-product-formatted-price {
- display: flex;
- align-items: center;
- gap: 1ch;
-
- &--on-sale {
- color: $gray-600;
- text-decoration: line-through;
- }
-}
diff --git a/packages/js/product-editor/src/components/formatted-price/types.ts b/packages/js/product-editor/src/components/formatted-price/types.ts
deleted file mode 100644
index 6843a88a69f..00000000000
--- a/packages/js/product-editor/src/components/formatted-price/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type FormattedPriceProps = React.DetailedHTMLProps<
- React.HTMLAttributes< HTMLSpanElement >,
- HTMLSpanElement
-> & {
- product: Product;
-};
diff --git a/packages/js/product-editor/src/components/header/header.tsx b/packages/js/product-editor/src/components/header/header.tsx
deleted file mode 100644
index a64cbf0c677..00000000000
--- a/packages/js/product-editor/src/components/header/header.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * External dependencies
- */
-import { WooHeaderItem, useAdminSidebarWidth } from '@woocommerce/admin-layout';
-import { useEntityId, useEntityRecord } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import {
- createElement,
- useContext,
- useEffect,
- Fragment,
- lazy,
- Suspense,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button, Tooltip } from '@wordpress/components';
-import { box, chevronLeft, group, Icon } from '@wordpress/icons';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { recordEvent } from '@woocommerce/tracks';
-import clsx from 'clsx';
-import { Tag } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import PinnedItems from '@wordpress/interface/build-module/components/pinned-items';
-
-/**
- * Internal dependencies
- */
-import { EditorLoadingContext } from '../../contexts/editor-loading-context';
-import { getHeaderTitle } from '../../utils';
-import { MoreMenu } from './more-menu';
-import { PreviewButton } from './preview-button';
-import { SaveDraftButton } from './save-draft-button';
-import { LoadingState } from './loading-state';
-import { Tabs } from '../tabs';
-import { HEADER_PINNED_ITEMS_SCOPE, TRACKS_SOURCE } from '../../constants';
-import { HeaderProps, Image } from './types';
-
-const PublishButton = lazy( () =>
- import( './publish-button' ).then( ( module ) => ( {
- default: module.PublishButton,
- } ) )
-);
-
-const RETURN_TO_MAIN_PRODUCT = __(
- 'Return to the main product',
- 'woocommerce'
-);
-
-export function Header( {
- onTabSelect,
- productType = 'product',
- selectedTab,
-}: HeaderProps ) {
- const isEditorLoading = useContext( EditorLoadingContext );
-
- const productId = useEntityId( 'postType', productType );
-
- const { editedRecord: product } = useEntityRecord< Product >(
- 'postType',
- productType,
- productId,
- { enabled: productId !== -1 }
- );
-
- const lastPersistedProduct = useSelect(
- ( select ) => {
- const { getEntityRecord } = select( 'core' );
- return productId !== -1
- ? getEntityRecord( 'postType', productType, productId )
- : null;
- },
- [ productType, productId ]
- );
-
- const editedProductName = product?.name;
- const catalogVisibility = product?.catalog_visibility;
- const productStatus = product?.status;
-
- const sidebarWidth = useAdminSidebarWidth();
-
- useEffect( () => {
- document
- .querySelectorAll( '.interface-interface-skeleton__header' )
- .forEach( ( el ) => {
- if ( ( el as HTMLElement ).style ) {
- ( el as HTMLElement ).style.width =
- 'calc(100% - ' + sidebarWidth + 'px)';
- ( el as HTMLElement ).style.left = sidebarWidth + 'px';
- }
- } );
- }, [ sidebarWidth ] );
-
- const isVariation = lastPersistedProduct?.parent_id > 0;
-
- const selectedImage = isVariation
- ? // @ts-expect-error @woocommerce/data's Product type is missing the `image` field (see products/types.ts).
- product?.image
- : // @ts-expect-error @woocommerce/data's Product type is missing the `images` field (see products/types.ts).
- product?.images;
-
- if ( isEditorLoading ) {
- return <LoadingState />;
- }
-
- const isHeaderImageVisible =
- ( ! isVariation &&
- Array.isArray( selectedImage ) &&
- selectedImage.length > 0 ) ||
- ( isVariation && selectedImage );
-
- function getImagePropertyValue(
- image: Image | Image[],
- prop: 'alt' | 'src'
- ): string {
- if ( Array.isArray( image ) ) {
- return image[ 0 ][ prop ] || '';
- }
- return image[ prop ] || '';
- }
-
- function getVisibilityTags() {
- const tags = [];
- if ( productStatus === 'draft' ) {
- tags.push(
- <Tag
- key={ 'draft-tag' }
- label={ __( 'Draft', 'woocommerce' ) }
- />
- );
- }
- if ( productStatus === 'future' ) {
- tags.push(
- <Tag
- key={ 'scheduled-tag' }
- label={ __( 'Scheduled', 'woocommerce' ) }
- />
- );
- }
- if (
- ( productStatus !== 'future' && catalogVisibility === 'hidden' ) ||
- ( isVariation && productStatus === 'private' )
- ) {
- tags.push(
- <Tag
- key={ 'hidden-tag' }
- label={ __( 'Hidden', 'woocommerce' ) }
- />
- );
- }
- return tags;
- }
-
- return (
- <div
- className="woocommerce-product-header"
- role="region"
- aria-label={ __( 'Product Editor top bar.', 'woocommerce' ) }
- tabIndex={ -1 }
- >
- <div className="woocommerce-product-header__inner">
- { isVariation ? (
- <div className="woocommerce-product-header__back">
- <Tooltip
- className="woocommerce-product-header__back-tooltip"
- text={ RETURN_TO_MAIN_PRODUCT }
- >
- <div className="woocommerce-product-header__back-tooltip-wrapper">
- <Button
- icon={ chevronLeft }
- isTertiary={ true }
- onClick={ () => {
- recordEvent(
- 'product_variation_back_to_main_product',
- {
- source: TRACKS_SOURCE,
- }
- );
- const url = getNewPath(
- { tab: 'variations' },
- `/product/${ lastPersistedProduct?.parent_id }`
- );
- navigateTo( { url } );
- } }
- >
- { __( 'Main product', 'woocommerce' ) }
- </Button>
- </div>
- </Tooltip>
- </div>
- ) : (
- <div />
- ) }
-
- <div
- className={ clsx( 'woocommerce-product-header-title-bar', {
- 'is-variation': isVariation,
- } ) }
- >
- <div className="woocommerce-product-header-title-bar__image">
- { isHeaderImageVisible ? (
- <img
- alt={ getImagePropertyValue(
- selectedImage,
- 'alt'
- ) }
- src={ getImagePropertyValue(
- selectedImage,
- 'src'
- ) }
- className="woocommerce-product-header-title-bar__product-image"
- />
- ) : (
- <Icon icon={ isVariation ? group : box } />
- ) }
- </div>
- <h1 className="woocommerce-product-header__title">
- { isVariation ? (
- <>
- { lastPersistedProduct?.name }
- <span className="woocommerce-product-header__variable-product-id">
- # { lastPersistedProduct?.id }
- </span>
- </>
- ) : (
- getHeaderTitle(
- editedProductName,
- lastPersistedProduct?.name
- )
- ) }
- <div className="woocommerce-product-header__visibility-tags">
- { getVisibilityTags() }
- </div>
- </h1>
- </div>
-
- <div className="woocommerce-product-header__actions">
- { ! isVariation && (
- <SaveDraftButton
- productType={ productType }
- visibleTab={ selectedTab }
- productStatus={ lastPersistedProduct?.status }
- />
- ) }
-
- <PreviewButton
- productType={ productType }
- visibleTab={ selectedTab }
- productStatus={ lastPersistedProduct?.status }
- />
-
- <Suspense fallback={ null }>
- <PublishButton
- productType={ productType }
- isMenuButton
- visibleTab={ selectedTab }
- />
- </Suspense>
-
- <WooHeaderItem.Slot name="product" />
- <PinnedItems.Slot scope={ HEADER_PINNED_ITEMS_SCOPE } />
- <MoreMenu />
- </div>
- </div>
- <Tabs selected={ selectedTab } onChange={ onTabSelect } />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/header/hooks/use-preview/index.ts b/packages/js/product-editor/src/components/header/hooks/use-preview/index.ts
deleted file mode 100644
index 872825f555c..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-preview/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-preview';
diff --git a/packages/js/product-editor/src/components/header/hooks/use-preview/use-preview.tsx b/packages/js/product-editor/src/components/header/hooks/use-preview/use-preview.tsx
deleted file mode 100644
index aaf2c24a0a5..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-preview/use-preview.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { MouseEvent } from 'react';
-
-/**
- * Internal dependencies
- */
-import { useValidations } from '../../../../contexts/validation-context';
-import { WPError } from '../../../../hooks/use-error-handler';
-import { useProductURL } from '../../../../hooks/use-product-url';
-import { PreviewButtonProps } from '../../preview-button';
-import { formatProductError } from '../../../../utils/format-product-error';
-
-export function usePreview( {
- productStatus,
- productType = 'product',
- disabled,
- onClick,
- onSaveSuccess,
- onSaveError,
- ...props
-}: PreviewButtonProps & {
- onSaveSuccess?( product: Product ): void;
- onSaveError?( error: WPError ): void;
-} ) {
- const anchorRef = useRef< HTMLAnchorElement >();
-
- const [ productId ] = useEntityProp< number >(
- 'postType',
- productType,
- 'id'
- );
-
- const { getProductURL } = useProductURL( productType );
-
- const { hasEdits, isDisabled } = useSelect(
- ( select ) => {
- const { hasEditsForEntityRecord, isSavingEntityRecord } =
- select( 'core' );
- const isSaving = isSavingEntityRecord(
- 'postType',
- productType,
- productId
- );
-
- return {
- isDisabled: isSaving,
- hasEdits: hasEditsForEntityRecord(
- 'postType',
- productType,
- productId
- ),
- };
- },
- [ productId ]
- );
-
- const { isValidating, validate } = useValidations();
-
- const ariaDisabled = disabled || isDisabled || isValidating;
-
- const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
-
- /**
- * Overrides the default anchor behaviour when the product has unsaved changes.
- * Before redirecting to the preview page all changes are saved and then the
- * redirection is performed.
- *
- * @param event
- */
- async function handleClick( event: MouseEvent< HTMLElement > ) {
- if ( ariaDisabled ) {
- return event.preventDefault();
- }
-
- if ( onClick ) {
- onClick( event );
- }
-
- // Prevent an infinite recursion call due to the
- // `anchorRef.current?.click()` call.
- if ( ! hasEdits ) {
- return;
- }
-
- // Prevent the default anchor behaviour.
- event.preventDefault();
-
- try {
- await validate();
-
- // If the product status is `auto-draft` it's not possible to
- // reach the preview page, so the status is changed to `draft`
- // before redirecting.
- if ( productStatus === 'auto-draft' ) {
- await editEntityRecord( 'postType', productType, productId, {
- status: 'draft',
- } );
- }
-
- // Persist the product changes before redirecting
- const publishedProduct = await saveEditedEntityRecord(
- 'postType',
- productType,
- productId,
- {
- throwOnError: true,
- }
- );
-
- // Redirect using the default anchor behaviour. This way, the usage
- // of `window.open` is avoided which comes with some edge cases.
- anchorRef.current?.click();
-
- if ( onSaveSuccess ) {
- onSaveSuccess( publishedProduct );
- }
- } catch ( error ) {
- if ( onSaveError ) {
- onSaveError(
- formatProductError(
- error as WPError,
- productStatus
- ) as WPError
- );
- }
- }
- }
-
- return {
- 'aria-label': __( 'Preview in new tab', 'woocommerce' ),
- children: __( 'Preview', 'woocommerce' ),
- target: '_blank',
- ...props,
- ref( element: HTMLAnchorElement ) {
- if ( typeof props.ref === 'function' ) props.ref( element );
- anchorRef.current = element;
- },
- 'aria-disabled': ariaDisabled,
- // Note that the href is always passed for a11y support. So
- // the final rendered element is always an anchor.
- href: getProductURL( true ),
- variant: 'tertiary' as const,
- onClick: handleClick,
- };
-}
diff --git a/packages/js/product-editor/src/components/header/hooks/use-publish/index.ts b/packages/js/product-editor/src/components/header/hooks/use-publish/index.ts
deleted file mode 100644
index 8a01d3e84ae..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-publish/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-publish';
diff --git a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
deleted file mode 100644
index 86249bccb0a..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import { MouseEvent } from 'react';
-import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import type { Product } from '@woocommerce/data';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { useProductManager } from '../../../../hooks/use-product-manager';
-import { useProductScheduled } from '../../../../hooks/use-product-scheduled';
-import type { WPError } from '../../../../hooks/use-error-handler';
-import type { PublishButtonProps } from '../../publish-button';
-
-export function usePublish< T = Product >( {
- productType = 'product',
- disabled,
- onClick,
- onPublishSuccess,
- onPublishError,
- ...props
-}: PublishButtonProps & {
- onPublishSuccess?( product: T ): void;
- onPublishError?( error: WPError ): void;
-} ) {
- const { isValidating, isDirty, isPublishing, publish } =
- useProductManager< T >( productType );
-
- const [ , , prevStatus ] = useEntityProp< Product[ 'status' ] >(
- 'postType',
- productType,
- 'status'
- );
-
- const { isScheduled } = useProductScheduled( productType );
-
- const isBusy = isPublishing || isValidating;
- const isDisabled =
- prevStatus !== 'draft' && ( disabled || isBusy || ! isDirty );
-
- const handlePublish = () =>
- publish().then( onPublishSuccess ).catch( onPublishError );
-
- function handleClick( event: MouseEvent< HTMLElement > ) {
- if ( isDisabled ) {
- event.preventDefault?.();
- return;
- }
-
- if ( onClick ) {
- onClick( event );
- }
-
- handlePublish();
- }
-
- function getButtonText() {
- if ( isScheduled ) {
- return __( 'Schedule', 'woocommerce' );
- }
-
- if ( prevStatus === 'publish' || prevStatus === 'future' ) {
- return __( 'Update', 'woocommerce' );
- }
-
- return __( 'Publish', 'woocommerce' );
- }
-
- useShortcut( 'core/editor/save', ( event ) => {
- event.preventDefault();
- if (
- ! isDisabled &&
- ( prevStatus === 'publish' || prevStatus === 'future' )
- ) {
- handlePublish();
- }
- } );
-
- return {
- children: getButtonText(),
- ...props,
- isBusy,
- 'aria-disabled': isDisabled,
- variant: 'primary' as const,
- onClick: handleClick,
- };
-}
diff --git a/packages/js/product-editor/src/components/header/hooks/use-save-draft/index.ts b/packages/js/product-editor/src/components/header/hooks/use-save-draft/index.ts
deleted file mode 100644
index 679dac40f10..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-save-draft/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-save-draft';
diff --git a/packages/js/product-editor/src/components/header/hooks/use-save-draft/use-save-draft.tsx b/packages/js/product-editor/src/components/header/hooks/use-save-draft/use-save-draft.tsx
deleted file mode 100644
index f2e1f77c570..00000000000
--- a/packages/js/product-editor/src/components/header/hooks/use-save-draft/use-save-draft.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-import { Icon } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
-import { createElement, Fragment } from '@wordpress/element';
-import { MouseEvent, ReactNode } from 'react';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { useValidations } from '../../../../contexts/validation-context';
-import { WPError } from '../../../../hooks/use-error-handler';
-import { SaveDraftButtonProps } from '../../save-draft-button';
-import { recordProductEvent } from '../../../../utils/record-product-event';
-import { formatProductError } from '../../../../utils/format-product-error';
-
-export function useSaveDraft( {
- productStatus,
- productType = 'product',
- disabled,
- onClick,
- onSaveSuccess,
- onSaveError,
- ...props
-}: SaveDraftButtonProps & {
- onSaveSuccess?( product: Product ): void;
- onSaveError?( error: WPError ): void;
-} ) {
- const [ productId ] = useEntityProp< number >(
- 'postType',
- productType,
- 'id'
- );
-
- const { hasEdits, isDisabled } = useSelect(
- ( select ) => {
- const { hasEditsForEntityRecord, isSavingEntityRecord } =
- select( 'core' );
- const isSaving = isSavingEntityRecord(
- 'postType',
- productType,
- productId
- );
-
- return {
- isDisabled: isSaving,
- hasEdits: hasEditsForEntityRecord(
- 'postType',
- productType,
- productId
- ),
- };
- },
- [ productId ]
- );
-
- const { isValidating, validate } = useValidations< Product >();
-
- const ariaDisabled =
- disabled ||
- isDisabled ||
- ( productStatus !== 'publish' && ! hasEdits ) ||
- isValidating;
-
- const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' );
-
- const productStatusMap: {
- [ key in Product[ 'status' ] ]?: string;
- } = {
- publish: 'product_switch_draft',
- draft: 'product_save_draft',
- };
-
- async function saveDraft() {
- try {
- await validate( { status: 'draft' } );
-
- await editEntityRecord( 'postType', productType, productId, {
- status: 'draft',
- } );
- const publishedProduct = await saveEditedEntityRecord(
- 'postType',
- productType,
- productId,
- {
- throwOnError: true,
- }
- );
-
- const eventName = productStatusMap[ productStatus ];
- if ( eventName ) {
- recordProductEvent( eventName, publishedProduct );
- }
-
- if ( onSaveSuccess ) {
- onSaveSuccess( publishedProduct );
- }
- } catch ( error ) {
- if ( onSaveError ) {
- onSaveError(
- formatProductError(
- error as WPError,
- productStatus
- ) as WPError
- );
- }
- }
- }
-
- async function handleClick( event: MouseEvent< HTMLElement > ) {
- if ( ariaDisabled ) {
- return event.preventDefault();
- }
-
- if ( onClick ) {
- onClick( event );
- }
- await saveDraft();
- }
-
- let children: ReactNode;
- if ( productStatus === 'publish' ) {
- children = __( 'Switch to draft', 'woocommerce' );
- } else if ( hasEdits || productStatus === 'auto-draft' ) {
- children = __( 'Save draft', 'woocommerce' );
- } else {
- children = (
- <>
- <Icon icon={ check } />
- { __( 'Saved', 'woocommerce' ) }
- </>
- );
- }
-
- useShortcut( 'core/editor/save', ( event ) => {
- event.preventDefault();
- if (
- ! ariaDisabled &&
- ( productStatus === 'draft' || productStatus === 'auto-draft' )
- ) {
- saveDraft();
- }
- } );
-
- return {
- children,
- ...props,
- 'aria-disabled': ariaDisabled,
- variant: 'tertiary' as const,
- onClick: handleClick,
- };
-}
diff --git a/packages/js/product-editor/src/components/header/index.ts b/packages/js/product-editor/src/components/header/index.ts
deleted file mode 100644
index e0cc89a92c0..00000000000
--- a/packages/js/product-editor/src/components/header/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './header';
-export * from './woo-more-menu-item';
-export * from './plugin-header-items';
diff --git a/packages/js/product-editor/src/components/header/loading-state/index.ts b/packages/js/product-editor/src/components/header/loading-state/index.ts
deleted file mode 100644
index b9af07b0b02..00000000000
--- a/packages/js/product-editor/src/components/header/loading-state/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './loading-state';
diff --git a/packages/js/product-editor/src/components/header/loading-state/loading-state.tsx b/packages/js/product-editor/src/components/header/loading-state/loading-state.tsx
deleted file mode 100644
index d69f6820e6e..00000000000
--- a/packages/js/product-editor/src/components/header/loading-state/loading-state.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function LoadingState() {
- return (
- <div
- className="woocommerce-product-header is-loading"
- aria-hidden="true"
- >
- <div className="woocommerce-product-header__inner">
- <div />
-
- <div className="woocommerce-product-header__title" />
-
- <div className="woocommerce-product-header__actions">
- <div className="woocommerce-product-header__action" />
- <div className="woocommerce-product-header__action" />
- <div className="woocommerce-product-header__action" />
- <div className="woocommerce-product-header__action" />
- </div>
- </div>
-
- <div className="woocommerce-product-tabs">
- { Array( 7 )
- .fill( 0 )
- .map( ( _, index ) => (
- <div key={ index } className="components-button" />
- ) ) }
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/header/more-menu/index.ts b/packages/js/product-editor/src/components/header/more-menu/index.ts
deleted file mode 100644
index 48b036d2304..00000000000
--- a/packages/js/product-editor/src/components/header/more-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './more-menu';
diff --git a/packages/js/product-editor/src/components/header/more-menu/more-menu.tsx b/packages/js/product-editor/src/components/header/more-menu/more-menu.tsx
deleted file mode 100644
index 5040103248e..00000000000
--- a/packages/js/product-editor/src/components/header/more-menu/more-menu.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { WooProductMoreMenuItem } from '../woo-more-menu-item';
-import { MoreMenuDropdown } from '../../more-menu-dropdown';
-
-export const MoreMenu = () => {
- return (
- <>
- <MoreMenuDropdown
- toggleProps={ {
- onClick: () => recordEvent( 'product_dropdown_click' ),
- } }
- popoverProps={ {
- className: 'woocommerce-product-header__more-menu',
- } }
- >
- { ( onClose ) => (
- <>
- <WooProductMoreMenuItem.Slot
- fillProps={ { onClose } }
- />
- </>
- ) }
- </MoreMenuDropdown>
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/header/plugin-header-items/index.ts b/packages/js/product-editor/src/components/header/plugin-header-items/index.ts
deleted file mode 100644
index 590e4b97e31..00000000000
--- a/packages/js/product-editor/src/components/header/plugin-header-items/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './plugin-header-item-modal';
-export * from './plugin-header-item-popover';
diff --git a/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-modal.tsx b/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-modal.tsx
deleted file mode 100644
index a215ea4d79d..00000000000
--- a/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-modal.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment, useState } from '@wordpress/element';
-import { Button, Modal } from '@wordpress/components';
-import { plugins } from '@wordpress/icons';
-import PinnedItems from '@wordpress/interface/build-module/components/pinned-items';
-
-/**
- * Internal dependencies
- */
-import { HEADER_PINNED_ITEMS_SCOPE } from '../../../constants';
-import { PluginHeaderItemModalProps } from './types';
-
-export const PluginHeaderItemModal = ( {
- children,
- label,
- icon,
- title,
-}: PluginHeaderItemModalProps ) => {
- const [ isOpen, setOpen ] = useState( false );
- const childrenToRender =
- typeof children === 'function'
- ? children( { isOpen, setOpen } )
- : children;
- return (
- <PinnedItems scope={ HEADER_PINNED_ITEMS_SCOPE }>
- <>
- <Button
- variant="tertiary"
- icon={ icon ?? plugins }
- label={ label }
- onClick={ () => setOpen( ! isOpen ) }
- />
- { isOpen && (
- <Modal
- title={ title }
- onRequestClose={ () => setOpen( false ) }
- >
- { childrenToRender }
- </Modal>
- ) }
- </>
- </PinnedItems>
- );
-};
diff --git a/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-popover.tsx b/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-popover.tsx
deleted file mode 100644
index 227a33777ca..00000000000
--- a/packages/js/product-editor/src/components/header/plugin-header-items/plugin-header-item-popover.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment, useState } from '@wordpress/element';
-import { Button, Popover } from '@wordpress/components';
-import { plugins } from '@wordpress/icons';
-import PinnedItems from '@wordpress/interface/build-module/components/pinned-items';
-
-/**
- * Internal dependencies
- */
-import { HEADER_PINNED_ITEMS_SCOPE } from '../../../constants';
-import { PluginHeaderItemPopoverProps } from './types';
-
-export const PluginHeaderItemPopover = ( {
- children,
- label,
- icon,
-}: PluginHeaderItemPopoverProps ) => {
- const [ isVisible, setVisible ] = useState( false );
-
- const childrenToRender =
- typeof children === 'function'
- ? children( { isVisible, setVisible } )
- : children;
- return (
- <PinnedItems scope={ HEADER_PINNED_ITEMS_SCOPE }>
- <>
- <Button
- variant="tertiary"
- icon={ icon ?? plugins }
- label={ label }
- onClick={ () => setVisible( ! isVisible ) }
- />
- { isVisible && (
- <Popover
- focusOnMount={ true }
- onFocusOutside={ () => setVisible( false ) }
- onClose={ () => setVisible( false ) }
- >
- { childrenToRender }
- </Popover>
- ) }
- </>
- </PinnedItems>
- );
-};
diff --git a/packages/js/product-editor/src/components/header/plugin-header-items/types.tsx b/packages/js/product-editor/src/components/header/plugin-header-items/types.tsx
deleted file mode 100644
index ad9985d140e..00000000000
--- a/packages/js/product-editor/src/components/header/plugin-header-items/types.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export type PluginHeaderItemModalProps = {
- children?:
- | React.ReactNode
- | ( ( props: {
- isOpen: boolean;
- setOpen: ( isOpen: boolean ) => void;
- } ) => React.ReactNode );
- icon?: JSX.Element;
- label?: string;
- title: string;
-};
-
-export type PluginHeaderItemPopoverProps = {
- children?:
- | React.ReactNode
- | ( ( props: {
- isVisible: boolean;
- setVisible: ( isVisible: boolean ) => void;
- } ) => React.ReactNode );
- icon?: JSX.Element;
- label?: string;
-};
diff --git a/packages/js/product-editor/src/components/header/preview-button/index.ts b/packages/js/product-editor/src/components/header/preview-button/index.ts
deleted file mode 100644
index 1316da3e16c..00000000000
--- a/packages/js/product-editor/src/components/header/preview-button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './preview-button';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/header/preview-button/preview-button.tsx b/packages/js/product-editor/src/components/header/preview-button/preview-button.tsx
deleted file mode 100644
index f01e94281f5..00000000000
--- a/packages/js/product-editor/src/components/header/preview-button/preview-button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useErrorHandler } from '../../../hooks/use-error-handler';
-import { usePreview } from '../hooks/use-preview';
-import { PreviewButtonProps } from './types';
-import { TRACKS_SOURCE } from '../../../constants';
-
-export function PreviewButton( {
- productStatus,
- visibleTab = 'general',
- ...props
-}: PreviewButtonProps ) {
- const { createErrorNotice } = useDispatch( 'core/notices' );
- const { getProductErrorMessageAndProps } = useErrorHandler();
-
- const previewButtonProps = usePreview( {
- productStatus,
- ...props,
- onClick() {
- recordEvent( 'product_preview_changes', { source: TRACKS_SOURCE } );
- },
- onSaveSuccess( savedProduct: Product ) {
- if ( productStatus === 'auto-draft' ) {
- const url = getNewPath( {}, `/product/${ savedProduct.id }` );
- navigateTo( { url } );
- }
- },
- async onSaveError( error ) {
- const { message, errorProps } =
- await getProductErrorMessageAndProps( error, visibleTab );
- createErrorNotice( message, errorProps );
- },
- } );
-
- return <Button { ...previewButtonProps } />;
-}
diff --git a/packages/js/product-editor/src/components/header/preview-button/types.ts b/packages/js/product-editor/src/components/header/preview-button/types.ts
deleted file mode 100644
index 74cdafe8cbf..00000000000
--- a/packages/js/product-editor/src/components/header/preview-button/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-import { Ref } from 'react';
-
-export type PreviewButtonProps = {
- productStatus: Product[ 'status' ];
- productType: string;
- visibleTab?: string | null;
- disabled?: boolean;
- href?: string;
- ref?: Ref< HTMLElement >;
- onClick?: ( event: React.MouseEvent< HTMLElement > ) => void;
-};
diff --git a/packages/js/product-editor/src/components/header/publish-button/index.ts b/packages/js/product-editor/src/components/header/publish-button/index.ts
deleted file mode 100644
index bc57fbece5f..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './publish-button';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts
deleted file mode 100644
index d1fdefc59ec..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './publish-button-menu';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
deleted file mode 100644
index da4e9a05a66..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { createElement, Fragment, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import type { ProductStatus } from '@woocommerce/data';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { getAdminLink } from '@woocommerce/settings';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { useProductManager } from '../../../../hooks/use-product-manager';
-import { useProductScheduled } from '../../../../hooks/use-product-scheduled';
-import { recordProductEvent } from '../../../../utils/record-product-event';
-import { useErrorHandler } from '../../../../hooks/use-error-handler';
-import { ButtonWithDropdownMenu } from '../../../button-with-dropdown-menu';
-import { SchedulePublishModal } from '../../../schedule-publish-modal';
-import { showSuccessNotice } from '../utils';
-import type { PublishButtonMenuProps } from './types';
-import { TRACKS_SOURCE } from '../../../../constants';
-
-export function PublishButtonMenu( {
- postType,
- visibleTab = 'general',
- ...props
-}: PublishButtonMenuProps ) {
- const { isScheduling, isScheduled, schedule, date, formattedDate } =
- useProductScheduled( postType );
- const [ showScheduleModal, setShowScheduleModal ] = useState<
- 'schedule' | 'edit' | undefined
- >();
- const { copyToDraft, trash } = useProductManager( postType );
- const { createErrorNotice, createSuccessNotice } =
- useDispatch( 'core/notices' );
- const [ , , prevStatus ] = useEntityProp< ProductStatus >(
- 'postType',
- postType,
- 'status'
- );
- const { getProductErrorMessageAndProps } = useErrorHandler();
-
- function scheduleProduct( dateString?: string ) {
- schedule( dateString )
- .then( ( scheduledProduct ) => {
- recordProductEvent( 'product_schedule', scheduledProduct );
-
- showSuccessNotice( scheduledProduct );
- } )
- .catch( async ( error ) => {
- const { message, errorProps } =
- await getProductErrorMessageAndProps( error, visibleTab );
- createErrorNotice( message, errorProps );
- } )
- .finally( () => {
- setShowScheduleModal( undefined );
- } );
- }
-
- function renderSchedulePublishModal() {
- return (
- showScheduleModal && (
- <SchedulePublishModal
- postType={ postType }
- value={ showScheduleModal === 'edit' ? date : undefined }
- isScheduling={ isScheduling }
- onCancel={ () => setShowScheduleModal( undefined ) }
- onSchedule={ scheduleProduct }
- />
- )
- );
- }
-
- function renderMenu( { onClose }: { onClose?: () => void } ) {
- return (
- <>
- <MenuGroup>
- { isScheduled ? (
- <>
- <MenuItem
- onClick={ () => {
- scheduleProduct();
- if ( onClose ) {
- onClose();
- }
- } }
- >
- { __( 'Publish now', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- info={ formattedDate }
- onClick={ () => {
- setShowScheduleModal( 'edit' );
- if ( onClose ) {
- onClose();
- }
- } }
- >
- { __( 'Edit schedule', 'woocommerce' ) }
- </MenuItem>
- </>
- ) : (
- <MenuItem
- onClick={ () => {
- recordEvent( 'product_schedule_publish', {
- source: TRACKS_SOURCE,
- } );
- setShowScheduleModal( 'schedule' );
- if ( onClose ) {
- onClose();
- }
- } }
- >
- { __( 'Schedule publish', 'woocommerce' ) }
- </MenuItem>
- ) }
- </MenuGroup>
-
- { prevStatus !== 'trash' && (
- <MenuGroup>
- <MenuItem
- onClick={ () => {
- copyToDraft()
- .then( ( duplicatedProduct ) => {
- recordProductEvent(
- 'product_copied_to_draft',
- duplicatedProduct
- );
- createSuccessNotice(
- __(
- 'Product successfully duplicated',
- 'woocommerce'
- )
- );
- const url = getNewPath(
- {},
- `/product/${ duplicatedProduct.id }`
- );
- navigateTo( { url } );
- } )
- .catch( async ( error ) => {
- const { message, errorProps } =
- await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
- createErrorNotice(
- message,
- errorProps
- );
- } );
- if ( onClose ) {
- onClose();
- }
- } }
- >
- { __( 'Copy to a new draft', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- isDestructive
- onClick={ () => {
- trash()
- .then( ( deletedProduct ) => {
- recordProductEvent(
- 'product_delete',
- deletedProduct
- );
- createSuccessNotice(
- __(
- 'Product successfully deleted',
- 'woocommerce'
- )
- );
- const productListUrl = getAdminLink(
- 'edit.php?post_type=product'
- );
- navigateTo( {
- url: productListUrl,
- } );
- } )
- .catch( async ( error ) => {
- const { message, errorProps } =
- await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
- createErrorNotice(
- message,
- errorProps
- );
- } );
- if ( onClose ) {
- onClose();
- }
- } }
- >
- { __( 'Move to trash', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- ) }
- </>
- );
- }
-
- return (
- <>
- <ButtonWithDropdownMenu
- { ...props }
- onToggle={ ( isOpen ) => {
- if ( isOpen ) {
- recordEvent( 'product_publish_dropdown_open', {
- source: TRACKS_SOURCE,
- } );
- }
- props.onToggle?.( isOpen );
- } }
- renderMenu={ renderMenu }
- />
-
- { renderSchedulePublishModal() }
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/types.ts b/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/types.ts
deleted file mode 100644
index 9069cf86255..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/publish-button-menu/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ButtonWithDropdownMenuProps } from '../../../button-with-dropdown-menu';
-
-export type PublishButtonMenuProps = ButtonWithDropdownMenuProps & {
- postType: string;
- visibleTab: string | null;
-};
diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx
deleted file mode 100644
index 2d018cf197d..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
-import { type Product } from '@woocommerce/data';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { useErrorHandler } from '../../../hooks/use-error-handler';
-import { recordProductEvent } from '../../../utils/record-product-event';
-import { useFeedbackBar } from '../../../hooks/use-feedback-bar';
-import { usePublish } from '../hooks/use-publish';
-import { PublishButtonMenu } from './publish-button-menu';
-import { showSuccessNotice } from './utils';
-import type { PublishButtonProps } from './types';
-
-export function PublishButton( {
- productType = 'product',
- isMenuButton,
- visibleTab = 'general',
- ...props
-}: PublishButtonProps ) {
- const { createErrorNotice } = useDispatch( 'core/notices' );
- const { maybeShowFeedbackBar } = useFeedbackBar();
- const { getProductErrorMessageAndProps } = useErrorHandler();
-
- const [ , , prevStatus ] = useEntityProp< Product[ 'status' ] >(
- 'postType',
- productType,
- 'status'
- );
-
- const publishButtonProps = usePublish( {
- productType,
- ...props,
- onPublishSuccess( savedProduct: Product ) {
- const isPublished =
- savedProduct.status === 'publish' ||
- savedProduct.status === 'future';
-
- if ( isPublished ) {
- recordProductEvent( 'product_update', savedProduct );
- }
-
- showSuccessNotice( savedProduct, prevStatus );
-
- maybeShowFeedbackBar();
-
- if ( prevStatus === 'auto-draft' || prevStatus === 'draft' ) {
- const url = getNewPath( {}, `/product/${ savedProduct.id }` );
- navigateTo( { url } );
- }
- },
- async onPublishError( error ) {
- const { message, errorProps } =
- await getProductErrorMessageAndProps( error, visibleTab );
- createErrorNotice( message, errorProps );
- },
- } );
-
- if ( productType === 'product' && isMenuButton ) {
- function renderPublishButtonMenu( menuProps: {
- onClose: () => void;
- } ): React.ReactElement {
- return (
- <PublishButtonMenu
- { ...menuProps }
- postType={ productType }
- visibleTab={ visibleTab }
- />
- );
- }
-
- return (
- <PublishButtonMenu
- { ...publishButtonProps }
- postType={ productType }
- controls={ undefined }
- renderMenu={ renderPublishButtonMenu }
- visibleTab={ visibleTab }
- />
- );
- }
-
- return <Button { ...publishButtonProps } />;
-}
diff --git a/packages/js/product-editor/src/components/header/publish-button/types.ts b/packages/js/product-editor/src/components/header/publish-button/types.ts
deleted file mode 100644
index 51114046714..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type PublishButtonProps = {
- productType?: string;
- isMenuButton?: boolean;
- visibleTab?: string | null;
- disabled?: boolean;
- onClick?: ( event: React.MouseEvent< HTMLElement > ) => void;
-};
diff --git a/packages/js/product-editor/src/components/header/publish-button/utils/index.ts b/packages/js/product-editor/src/components/header/publish-button/utils/index.ts
deleted file mode 100644
index e49c733ead0..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './show-success-notice';
diff --git a/packages/js/product-editor/src/components/header/publish-button/utils/show-success-notice.ts b/packages/js/product-editor/src/components/header/publish-button/utils/show-success-notice.ts
deleted file mode 100644
index cc0dc6c85a7..00000000000
--- a/packages/js/product-editor/src/components/header/publish-button/utils/show-success-notice.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { dispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import type { Product, ProductStatus } from '@woocommerce/data';
-import type { ReactElement } from 'react';
-/**
- * Internal dependencies
- */
-import { formatScheduleDatetime } from '../../../../utils';
-
-function getNoticeContent( product: Product, prevStatus?: ProductStatus ) {
- if ( product.status === 'future' ) {
- return sprintf(
- // translators: %s: The datetime the product is scheduled for.
- __( 'Product scheduled for %s.', 'woocommerce' ),
- formatScheduleDatetime( `${ product.date_created_gmt }+00:00` )
- );
- }
-
- if ( prevStatus === 'publish' || prevStatus === 'future' ) {
- return __( 'Product updated.', 'woocommerce' );
- }
-
- return __( 'Product published.', 'woocommerce' );
-}
-
-export function showSuccessNotice(
- product: Product,
- prevStatus?: ProductStatus
-) {
- const { createSuccessNotice } = dispatch( 'core/notices' );
-
- const noticeContent = getNoticeContent( product, prevStatus );
- const noticeOptions = {
- icon: '🎉' as unknown as ReactElement,
- actions: [
- {
- label: __( 'View in store', 'woocommerce' ),
- // Leave the url to support a11y.
- url: product.permalink,
- onClick( event: React.MouseEvent< HTMLAnchorElement > ) {
- event.preventDefault();
- // Notice actions do not support target anchor prop,
- // so this forces the page to be opened in a new tab.
- window.open( product.permalink, '_blank' );
- },
- },
- ],
- };
-
- createSuccessNotice( noticeContent, noticeOptions );
-}
diff --git a/packages/js/product-editor/src/components/header/save-draft-button/index.ts b/packages/js/product-editor/src/components/header/save-draft-button/index.ts
deleted file mode 100644
index ff007d31020..00000000000
--- a/packages/js/product-editor/src/components/header/save-draft-button/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './save-draft-button';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/header/save-draft-button/save-draft-button.tsx b/packages/js/product-editor/src/components/header/save-draft-button/save-draft-button.tsx
deleted file mode 100644
index f434ab4e98e..00000000000
--- a/packages/js/product-editor/src/components/header/save-draft-button/save-draft-button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import { Product } from '@woocommerce/data';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useErrorHandler } from '../../../hooks/use-error-handler';
-import { recordProductEvent } from '../../../utils/record-product-event';
-import { useSaveDraft } from '../hooks/use-save-draft';
-import { SaveDraftButtonProps } from './types';
-import { useFeedbackBar } from '../../../hooks/use-feedback-bar';
-
-export function SaveDraftButton( {
- productStatus,
- productType = 'product',
- visibleTab = 'general',
- ...props
-}: SaveDraftButtonProps ) {
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( 'core/notices' );
-
- const { maybeShowFeedbackBar } = useFeedbackBar();
-
- const { getProductErrorMessageAndProps } = useErrorHandler();
-
- const saveDraftButtonProps = useSaveDraft( {
- productStatus,
- productType,
- ...props,
- onSaveSuccess( savedProduct: Product ) {
- recordProductEvent( 'product_edit', savedProduct );
-
- createSuccessNotice(
- __( 'Product saved as draft.', 'woocommerce' )
- );
-
- maybeShowFeedbackBar();
-
- if ( productStatus === 'auto-draft' ) {
- const url = getNewPath( {}, `/product/${ savedProduct.id }` );
- navigateTo( { url } );
- }
- },
- async onSaveError( error ) {
- const { message, errorProps } =
- await getProductErrorMessageAndProps( error, visibleTab );
- createErrorNotice( message, errorProps );
- },
- } );
-
- return <Button { ...saveDraftButtonProps } />;
-}
diff --git a/packages/js/product-editor/src/components/header/save-draft-button/types.ts b/packages/js/product-editor/src/components/header/save-draft-button/types.ts
deleted file mode 100644
index 0ebb92aa4cc..00000000000
--- a/packages/js/product-editor/src/components/header/save-draft-button/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type SaveDraftButtonProps = {
- productStatus: Product[ 'status' ];
- productType?: string;
- visibleTab?: string | null;
- disabled?: boolean;
- href?: string;
- onClick?: ( event: React.MouseEvent< HTMLElement > ) => void;
-};
diff --git a/packages/js/product-editor/src/components/header/style.scss b/packages/js/product-editor/src/components/header/style.scss
deleted file mode 100644
index ba89ceae5d7..00000000000
--- a/packages/js/product-editor/src/components/header/style.scss
+++ /dev/null
@@ -1,171 +0,0 @@
-.woocommerce-product-header {
- &__inner {
- display: grid;
- grid-template-columns: 1fr auto 1fr;
- grid-gap: $gap;
- align-items: center;
- padding: 0 $gap;
- height: $header-height;
-
- @include breakpoint("<960px") {
- grid-template-columns: auto 1fr;
- }
- }
-
- .woocommerce-product-header-title-bar {
- display: flex;
- align-items: center;
- background-color: $gray-100;
- justify-content: center;
- width: 400px;
- border-radius: $gap-smallest;
- padding: $gap-smallest $gap-small;
- gap: $gap-small;
-
- &.is-variation {
- display: flex;
- align-items: center;
- background-color: $white;
-
- .woocommerce-product-header__title {
- font-size: 16px;
- font-weight: 600;
- align-items: center;
- }
- }
-
- @include breakpoint("<960px") {
- display: none;
- }
-
- &__image {
- width: $gap-large;
- height: $gap-large;
- img {
- width: 100%;
- height: 100%;
- }
- svg {
- fill: $gray-600;
- }
- }
-
-
- .woocommerce-product-header__title {
- text-align: center;
- font-size: 13px;
- font-weight: 400;
- padding: 0;
- color: #000000;
- max-width: 500px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: flex;
- align-items: center;
- gap: $gap-small;
-
- .woocommerce-tag__text {
- background-color: #DCDCDE; // $gray-5
- border-radius: $gap-smallest;
- font-weight: 400;
- }
-
- @include breakpoint( '<960px' ) {
- display: none;
- }
- }
-
- }
-
- &__actions {
- margin-left: auto;
-
- &-edit-schedule {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: $grid-unit-05;
-
- :last-child {
- color: $gray-700;
- font-size: 13px;
- }
- }
- }
-
- .woocommerce-product-header__actions {
- display: flex;
-
- > * + * {
- margin-left: $gap-smaller;
- }
- }
-
- .components-dropdown-menu__toggle {
- &.is-opened {
- background-color: #1e1e1e;
- color: #fff;
- }
- }
-
- &__back-tooltip-wrapper {
- width: fit-content;
- }
-
- &__variable-product-id {
- color: $gray-700;
- }
-}
-
-.woocommerce-product-header.is-loading {
- .woocommerce-product-header__title {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- min-width: 300px;
- min-height: $grid-unit-30;
- }
-
- .woocommerce-product-header__actions {
- .woocommerce-product-header__action {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- height: $grid-unit-30;
-
- &:nth-child(n) {
- min-width: $grid-unit-80;
- }
-
- &:first-child {
- min-width: calc(10 * $grid-unit);
- }
-
- &:last-child {
- min-width: $icon-size;
- }
- }
- }
-
- .woocommerce-product-tabs {
- height: 46px;
- align-items: flex-start;
-
- .components-button {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- height: $grid-unit-20;
- min-width: $grid-unit-80;
- }
- }
-}
-
-.woocommerce-product-header__more-menu {
- .components-popover__content {
- min-width: auto;
- width: min-content;
- }
-}
diff --git a/packages/js/product-editor/src/components/header/types.ts b/packages/js/product-editor/src/components/header/types.ts
deleted file mode 100644
index 382f9950ccb..00000000000
--- a/packages/js/product-editor/src/components/header/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type HeaderProps = {
- onTabSelect: ( tabId: string ) => void;
- productType?: string;
- selectedTab: string | null;
-};
-
-export interface Image {
- id: number;
- src: string;
- name: string;
- alt: string;
-}
diff --git a/packages/js/product-editor/src/components/header/woo-more-menu-item/Readme.md b/packages/js/product-editor/src/components/header/woo-more-menu-item/Readme.md
deleted file mode 100644
index 8130f3788a3..00000000000
--- a/packages/js/product-editor/src/components/header/woo-more-menu-item/Readme.md
+++ /dev/null
@@ -1,73 +0,0 @@
-#
-
-The `WooProductMoreMenuItem` slot allows developers to add custom items to the "More" menu
-in the WooCommerce Product Editor header.
-
-
-
-This slot enables the injection of additional menu items, which can be ordered dynamically:
-
-## Example
-
-```jsx
-export { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
-
-const MyCustomMenuItem = () => (
- <WooProductMoreMenuItem order={ 3 }>
- <button onClick={() => console.log( 'Custom Action' ) }>
- Custom Action
- </button>
- </WooProductMoreMenuItem>
-);
-```
-
-## Usage
-
-### Fill Component
-
-To add content to the WooProductMoreMenuItem slot, use the Fill component.
-
-```jsx
-export { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
-
-const CustomMenuItem = () => (
- <WooProductMoreMenuItem order={ 2 }>
- <div>My Custom Menu Item</div>
- </WooProductMoreMenuItem>
-);
-```
-
-### Slot Component
-
-The Slot component is used to render all fills in the specified slot.
-
-```jsx
-import { MoreMenuDropdown } from '@wordpress/interface';
-export { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
-
-export const MoreMenu = () => {
- return (
- <MoreMenuDropdown
- toggleProps={ { onClick: () => console.log( 'Menu opened' ) } }
- popoverProps={ { className: 'woocommerce-product-header__more-menu' } }
- >
- { ( { onClose } ) => (
- <WooProductMoreMenuItem.Slot fillProps={ { onClose } } />
- ) }
- </MoreMenuDropdown>
- );
-};
-```
-
-## API
-
-### Properties
-
-#### WooProductMoreMenuItem
-
-* **children** `React.ReactNode`: The content to be rendered inside the fill.
-* **order** `number`: The order in which this fill should appear relative to other fills in the same slot. Default is 1.
-
-#### WooProductMoreMenuItem.Slot
-
-* **fillProps** `object`: Additional props to pass to the fill component.
diff --git a/packages/js/product-editor/src/components/header/woo-more-menu-item/index.ts b/packages/js/product-editor/src/components/header/woo-more-menu-item/index.ts
deleted file mode 100644
index c501b7d92a1..00000000000
--- a/packages/js/product-editor/src/components/header/woo-more-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './woo-more-menu-item';
diff --git a/packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx b/packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx
deleted file mode 100644
index 4a67840ef73..00000000000
--- a/packages/js/product-editor/src/components/header/woo-more-menu-item/woo-more-menu-item.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { Slot, Fill } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import {
- createOrderedChildren,
- sortFillsByOrder,
-} from '@woocommerce/components';
-
-export const WC_PRODUCT_MORE_MENU_SLOT_NAME = 'WooProductMenuMenuItem';
-
-type FillProps = React.ComponentProps< typeof Fill >;
-export const WooProductMoreMenuItem = ( {
- children,
- order = 1,
-}: {
- children?: FillProps[ 'children' ];
- order?: number;
-} ) => {
- return (
- <Fill name={ WC_PRODUCT_MORE_MENU_SLOT_NAME }>
- { ( fillProps ) => {
- return createOrderedChildren( children, order, fillProps );
- } }
- </Fill>
- );
-};
-
-WooProductMoreMenuItem.Slot = ( {
- fillProps,
-}: {
- fillProps?: React.ComponentProps< typeof Slot >[ 'fillProps' ];
-} ) => (
- <Slot name={ WC_PRODUCT_MORE_MENU_SLOT_NAME } fillProps={ fillProps }>
- { sortFillsByOrder }
- </Slot>
-);
diff --git a/packages/js/product-editor/src/components/iframe-editor/RegisterStores.tsx b/packages/js/product-editor/src/components/iframe-editor/RegisterStores.tsx
deleted file mode 100644
index bdedd4f1522..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/RegisterStores.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { useRegistry } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import {
- store as interfaceStore,
- // @ts-expect-error No types for this exist yet.
-} from '@wordpress/interface';
-
-export const RegisterStores = () => {
- const registry = useRegistry();
-
- useEffect( () => {
- registry.register( interfaceStore );
- }, [ registry ] );
-
- return null;
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/back-button.scss b/packages/js/product-editor/src/components/iframe-editor/back-button.scss
deleted file mode 100644
index fcef7248b49..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/back-button.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.woocommerce-iframe-editor__back-button {
- align-self: flex-start;
- margin-top: $gap;
- margin-bottom: $gap;
- color: white;
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/back-button.tsx b/packages/js/product-editor/src/components/iframe-editor/back-button.tsx
deleted file mode 100644
index e3932180ccb..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/back-button.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { arrowLeft } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-type BackButtonProps = {
- onClick: () => void;
-};
-
-export function BackButton( { onClick }: BackButtonProps ) {
- return (
- <Button
- className="woocommerce-iframe-editor__back-button"
- icon={ arrowLeft }
- onClick={ onClick }
- >
- { __( 'Back', 'woocommerce' ) }
- </Button>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/constants.ts b/packages/js/product-editor/src/components/iframe-editor/constants.ts
deleted file mode 100644
index e872b0e4878..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const SETTINGS_SIDEBAR_IDENTIFIER =
- 'woocommerce-product-editor-settings-sidebar';
-export const SIDEBAR_COMPLEMENTARY_AREA_SCOPE =
- 'woocommerce/product-editor/modal-block-editor/sidebar';
-
-export const MORE_MENU_ACTION_ITEM_SLOT_NAME = `${ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }/plugin-more-menu`;
diff --git a/packages/js/product-editor/src/components/iframe-editor/context.ts b/packages/js/product-editor/src/components/iframe-editor/context.ts
deleted file mode 100644
index 7703387d989..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/context.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-
-type EditorContextType = {
- hasRedo: boolean;
- hasUndo: boolean;
- isDocumentOverviewOpened: boolean;
- isInserterOpened: boolean;
- redo: () => void;
- setIsDocumentOverviewOpened: ( value: boolean ) => void;
- setIsInserterOpened: ( value: boolean ) => void;
- undo: () => void;
-};
-
-export const EditorContext = createContext< EditorContextType >( {
- hasRedo: false,
- hasUndo: false,
- isDocumentOverviewOpened: false,
- isInserterOpened: false,
- redo: () => {},
- setIsDocumentOverviewOpened: () => {},
- setIsInserterOpened: () => {},
- undo: () => {},
-} );
diff --git a/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx b/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
deleted file mode 100644
index d30afa4dcef..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import {
- EditorSettings,
- EditorBlockListSettings,
- // @ts-expect-error __unstableIframe is not exported from @wordpress/block-editor's public types.
- __unstableIframe as Iframe,
- // @ts-expect-error __unstableUseMouseMoveTypingReset is not exported from @wordpress/block-editor's public types.
- __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
- // @ts-expect-error __unstableEditorStyles is not exported from @wordpress/block-editor's public types.
- __unstableEditorStyles as EditorStyles,
-} from '@wordpress/block-editor';
-
-type EditorCanvasProps = {
- children: React.ReactNode;
- enableResizing: boolean;
- settings: Partial< EditorSettings & EditorBlockListSettings > | undefined;
-};
-
-export function EditorCanvas( {
- children,
- enableResizing,
- settings,
- ...props
-}: EditorCanvasProps ) {
- const mouseMoveTypingRef = useMouseMoveTypingReset();
- return (
- <Iframe
- ref={ mouseMoveTypingRef }
- name="editor-canvas"
- className="edit-site-visual-editor__editor-canvas"
- { ...props }
- >
- <>
- <EditorStyles styles={ settings?.styles } />
- <style>
- {
- // Forming a "block formatting context" to prevent margin collapsing.
- // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- `.is-root-container {
- padding: 36px;
- display: flow-root;
- }
- body { position: relative; }`
- }
- </style>
- { enableResizing && (
- <style>
- {
- // Some themes will have `min-height: 100vh` for the root container,
- // which isn't a requirement in auto resize mode.
- `.is-root-container { min-height: 0 !important; }`
- }
- </style>
- ) }
- { children }
- </>
- </Iframe>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/document-overview.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/document-overview.tsx
deleted file mode 100644
index f0a49c5834e..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/document-overview.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement, forwardRef, useContext } from '@wordpress/element';
-import { listView as listViewIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { __ } from '@wordpress/i18n';
-import { Ref } from 'react';
-
-/**
- * Internal dependencies
- */
-import { DocumentOverviewProps } from './types';
-import { EditorContext } from '../../context';
-
-export const DocumentOverview = forwardRef(
- function ForwardedRefDocumentOverview(
- props: DocumentOverviewProps,
- ref: Ref< HTMLButtonElement >
- ) {
- const { isDocumentOverviewOpened, setIsDocumentOverviewOpened } =
- useContext( EditorContext );
-
- function handleClick() {
- setIsDocumentOverviewOpened( ! isDocumentOverviewOpened );
- }
-
- return (
- <Button
- { ...props }
- ref={ ref }
- icon={ listViewIcon }
- isPressed={ isDocumentOverviewOpened }
- /* translators: button label text should, if possible, be under 16 characters. */
- label={ __( 'Document overview', 'woocommerce' ) }
- shortcut={ displayShortcut.access( 'o' ) }
- onClick={ handleClick }
- className="document-overview"
- />
- );
- }
-);
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/index.ts b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/index.ts
deleted file mode 100644
index 097d5af1a3f..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './document-overview';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/types.ts b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/types.ts
deleted file mode 100644
index ae379241c26..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/document-overview/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type DocumentOverviewProps = { [ key: string ]: unknown };
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-redo.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-redo.tsx
deleted file mode 100644
index f7c97264e89..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-redo.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { createElement, forwardRef, useContext } from '@wordpress/element';
-
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { Ref } from 'react';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-
-function EditorHistoryRedo(
- props: { [ key: string ]: unknown },
- ref: Ref< HTMLButtonElement >
-) {
- const shortcut = isAppleOS()
- ? displayShortcut.primaryShift( 'z' )
- : displayShortcut.primary( 'y' );
-
- const { hasRedo, redo } = useContext( EditorContext );
-
- return (
- <Button
- { ...props }
- ref={ ref }
- icon={ ! isRTL() ? redoIcon : undoIcon }
- /* translators: button label text should, if possible, be under 16 characters. */
- label={ __( 'Redo', 'woocommerce' ) }
- shortcut={ shortcut }
- // If there are no redo levels we don't want to actually disable this
- // button, because it will remove focus for keyboard users.
- // See: https://github.com/WordPress/gutenberg/issues/3486
- aria-disabled={ ! hasRedo }
- onClick={ hasRedo ? redo : undefined }
- className="editor-history__redo"
- />
- );
-}
-
-export default forwardRef( EditorHistoryRedo );
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-undo.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-undo.tsx
deleted file mode 100644
index 9196119419f..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/editor-history-undo.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { createElement, forwardRef, useContext } from '@wordpress/element';
-import { displayShortcut } from '@wordpress/keycodes';
-import { Ref } from 'react';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-
-function EditorHistoryUndo(
- props: { [ key: string ]: unknown },
- ref: Ref< HTMLButtonElement >
-) {
- const { hasUndo, undo } = useContext( EditorContext );
- return (
- <Button
- { ...props }
- ref={ ref }
- icon={ ! isRTL() ? undoIcon : redoIcon }
- /* translators: button label text should, if possible, be under 16 characters. */
- label={ __( 'Undo', 'woocommerce' ) }
- shortcut={ displayShortcut.primary( 'z' ) }
- // If there are no undo levels we don't want to actually disable this
- // button, because it will remove focus for keyboard users.
- // See: https://github.com/WordPress/gutenberg/issues/3486
- aria-disabled={ ! hasUndo }
- onClick={ hasUndo ? undo : undefined }
- className="editor-history__undo"
- />
- );
-}
-
-export default forwardRef( EditorHistoryUndo );
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
deleted file mode 100644
index 35780aca303..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-.woocommerce-iframe-editor__header {
- height: 60px;
- border: 0;
- border-bottom: 1px solid $gray-400;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .woocommerce-iframe-editor__header-inserter-toggle.components-button.has-icon {
- height: 32px;
- min-width: 32px;
- padding: 0;
- width: 32px;
-
- svg {
- transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
- }
-
- &.is-pressed:before {
- width: 100%;
- left: 0;
- }
-
- &.is-pressed svg {
- transform: rotate(45deg);
- }
- }
-
- &-left {
- padding-left: $gap-small;
- align-items: center;
- display: flex;
-
- .components-accessible-toolbar {
- .woocommerce-iframe-editor-document-tools__left {
- align-items: center;
- display: inline-flex;
- gap: 8px;
- margin-right: 8px;
-
- // Copying how Gutenberg handles styling the toolbar buttons in the editor
- // see: https://github.com/mattsherman/gutenberg/blob/d538f429f018aba34814b360c5adf37eb6013427/packages/editor/src/components/document-tools/style.scss#L39
- // The Toolbar component adds different styles to buttons, so we reset them
- // here to the original button styles
- & > .components-button.has-icon,
- & > .components-dropdown > .components-button.has-icon {
- height: 32px;
- min-width: 32px;
- padding: $gap-smallest;
-
- &.is-pressed {
- background: $gray-900;
- }
-
- &:focus:not(:disabled) {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
- outline: $border-width solid transparent;
- }
-
- &::before {
- display: none;
- }
- }
- }
- }
-
- .selected-block-tools-wrapper {
- overflow-x: hidden;
- display: flex;
-
- .block-editor-block-contextual-toolbar {
- border-bottom: 0;
- }
-
- &::after {
- content: "";
- width: $border-width;
- margin-top: $grid-unit + $grid-unit-05;
- margin-bottom: $grid-unit + $grid-unit-05;
- background-color: $gray-300;
- margin-left: $grid-unit;
- }
-
- // Modified group borders.
- .components-toolbar-group,
- .components-toolbar {
- border-right: none;
-
- &::after {
- content: "";
- width: $border-width;
- margin-top: $grid-unit + $grid-unit-05;
- margin-bottom: $grid-unit + $grid-unit-05;
- background-color: $gray-300;
- margin-left: $grid-unit;
- }
-
- & .components-toolbar-group.components-toolbar-group {
- &::after {
- display: none;
- }
- }
- }
-
- &.is-collapsed {
- display: none;
- }
- }
- }
- &-right {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: $gap-smaller;
- > .components-dropdown-menu {
- margin-right: $gap-small;
- width: 48px;
- > button.components-dropdown-menu__toggle {
- padding: $gap-smaller !important;
- margin-right: -8px;
- }
- }
- > .woocommerce-show-block-inspector-panel {
- margin-right: -$gap-smaller;
- }
- button.woocommerce-modal-actions__done-button,
- button.woocommerce-modal-actions__cancel-button {
- height: $gap-larger - $gap-smallest;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
deleted file mode 100644
index b5082b114b9..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { plus, next, previous } from '@wordpress/icons';
-import {
- createElement,
- useRef,
- useCallback,
- useContext,
- useState,
- Fragment,
- useEffect,
-} from '@wordpress/element';
-import clsx from 'clsx';
-import { MouseEvent } from 'react';
-import { Button, Popover, ToolbarItem } from '@wordpress/components';
-import PinnedItems from '@wordpress/interface/build-module/components/pinned-items';
-import {
- store as preferencesStore,
- /* @ts-expect-error missing types. */
-} from '@wordpress/preferences';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- NavigableToolbar,
- store as blockEditorStore,
- BlockToolbar,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-import EditorHistoryRedo from './editor-history-redo';
-import EditorHistoryUndo from './editor-history-undo';
-import { DocumentOverview } from './document-overview';
-import { MoreMenu } from './more-menu';
-import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from '../constants';
-
-type HeaderToolbarProps = {
- onSave?: () => void;
- onCancel?: () => void;
-};
-
-export function HeaderToolbar( {
- onSave = () => {},
- onCancel = () => {},
-}: HeaderToolbarProps ) {
- const { isInserterOpened, setIsInserterOpened } =
- useContext( EditorContext );
- const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
- useState( true );
- const isLargeViewport = useViewportMatch( 'medium' );
- const inserterButton = useRef< HTMLButtonElement | null >( null );
- const { isInserterEnabled, hasBlockSelection, hasFixedToolbar } = useSelect(
- ( select ) => {
- const {
- hasInserterItems,
- getBlockRootClientId,
- getBlockSelectionEnd,
- getBlockSelectionStart,
- } = select( blockEditorStore );
- const { get: getPreference } = select( preferencesStore );
-
- return {
- isInserterEnabled: hasInserterItems(
- getBlockRootClientId( getBlockSelectionEnd() ?? '' ) ??
- undefined
- ),
- hasBlockSelection: !! getBlockSelectionStart(),
- hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
- };
- },
- []
- );
-
- const toggleInserter = useCallback(
- () => setIsInserterOpened( ! isInserterOpened ),
- [ isInserterOpened, setIsInserterOpened ]
- );
-
- useEffect( () => {
- // If we have a new block selection, show the block tools
- if ( hasBlockSelection ) {
- setIsBlockToolsCollapsed( false );
- }
- }, [ hasBlockSelection ] );
-
- return (
- <div className="woocommerce-iframe-editor__header">
- <div className="woocommerce-iframe-editor__header-left">
- { /* @ts-expect-error NavigableToolbar accepts a variant prop at runtime but it's missing from the public types. */ }
- <NavigableToolbar
- className="woocommerce-iframe-editor-document-tools"
- aria-label={ __( 'Document tools', 'woocommerce' ) }
- variant="unstyled"
- >
- <div className="woocommerce-iframe-editor-document-tools__left">
- <ToolbarItem
- ref={ inserterButton }
- as={ Button }
- className="woocommerce-iframe-editor__header-inserter-toggle"
- // @ts-expect-error the prop variant is passed to the Button component
- variant="primary"
- isPressed={ isInserterOpened }
- onMouseDown={ (
- event: MouseEvent< HTMLButtonElement >
- ) => {
- event.preventDefault();
- } }
- onClick={ toggleInserter }
- disabled={ ! isInserterEnabled }
- icon={ plus }
- label={ __(
- 'Toggle block inserter',
- 'woocommerce'
- ) }
- aria-expanded={ isInserterOpened }
- showTooltip
- />
- { /* @ts-expect-error the prop size is passed to the EditorHistoryUndo component */ }
- <ToolbarItem as={ EditorHistoryUndo } size="compact" />
- { /* @ts-expect-error the prop size is passed to the EditorHistoryRedo component */ }
- <ToolbarItem as={ EditorHistoryRedo } size="compact" />
- { /* @ts-expect-error the prop size is passed to the DocumentOverview component */ }
- <ToolbarItem as={ DocumentOverview } size="compact" />
- </div>
- </NavigableToolbar>
- { hasFixedToolbar && isLargeViewport && (
- <>
- <div
- className={ clsx( 'selected-block-tools-wrapper', {
- 'is-collapsed': isBlockToolsCollapsed,
- } ) }
- >
- { /* @ts-expect-error missing type */ }
- <BlockToolbar hideDragHandle />
- </div>
- { /* @ts-expect-error name does exist on PopoverSlot see: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/index.tsx#L555 */ }
- <Popover.Slot name="block-toolbar" />
- { hasBlockSelection && (
- <Button
- className="edit-post-header__block-tools-toggle"
- icon={ isBlockToolsCollapsed ? next : previous }
- onClick={ () => {
- setIsBlockToolsCollapsed(
- ( collapsed ) => ! collapsed
- );
- } }
- label={
- isBlockToolsCollapsed
- ? __(
- 'Show block tools',
- 'woocommerce'
- )
- : __(
- 'Hide block tools',
- 'woocommerce'
- )
- }
- />
- ) }
- </>
- ) }
- </div>
- <div className="woocommerce-iframe-editor__header-right">
- <Button
- variant="tertiary"
- className="woocommerce-modal-actions__cancel-button"
- onClick={ onCancel }
- text={ __( 'Cancel', 'woocommerce' ) }
- />
- <Button
- variant="primary"
- className="woocommerce-modal-actions__done-button"
- onClick={ onSave }
- text={ __( 'Done', 'woocommerce' ) }
- />
- <PinnedItems.Slot scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE } />
- <MoreMenu />
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/copy-all-content-menu-item.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/copy-all-content-menu-item.tsx
deleted file mode 100644
index ec892a5f3b9..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/copy-all-content-menu-item.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { serialize } from '@wordpress/blocks';
-import { MenuItem } from '@wordpress/components';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-export const CopyAllContentMenuItem = () => {
- const { createNotice } = useDispatch( 'core/notices' );
-
- const { blocks } = useSelect( ( select ) => {
- const { getBlocks } = select( blockEditorStore );
-
- return {
- blocks: getBlocks(),
- };
- }, [] );
-
- const getText = () => {
- return serialize( blocks );
- };
-
- const recordClick = () => {
- recordEvent( 'product_iframe_editor_copy_all_content_menu_item_click' );
- };
-
- const onCopySuccess = () => {
- createNotice( 'success', __( 'All content copied.', 'woocommerce' ) );
- };
-
- const ref = useCopyToClipboard( getText, onCopySuccess );
-
- return (
- <MenuItem
- // @ts-expect-error MenuItem's public type expects LegacyRef<HTMLButtonElement>, but useCopyToClipboard returns a broader Ref<HTMLElement>.
- ref={ ref }
- role="menuitem"
- onClick={ recordClick }
- disabled={ ! blocks.length }
- >
- { __( 'Copy all content', 'woocommerce' ) }
- </MenuItem>
- );
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/help-menu-item.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/help-menu-item.tsx
deleted file mode 100644
index c37fbc271a9..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/help-menu-item.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem, VisuallyHidden } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { external } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-export const HelpMenuItem = () => {
- const recordClick = () => {
- recordEvent( 'product_iframe_editor_help_menu_item_click' );
- };
-
- return (
- <MenuItem
- role="menuitem"
- icon={ external }
- // @ts-expect-error MenuItem's public type doesn't accept an href prop, but the runtime forwards it to the underlying element.
- href={ __(
- 'https://wordpress.org/documentation/article/wordpress-block-editor/',
- 'woocommerce'
- ) }
- onClick={ recordClick }
- target="_blank"
- rel="noopener noreferrer"
- >
- { __( 'Help', 'woocommerce' ) }
- <VisuallyHidden as="span">
- {
- /* translators: accessibility text */
- __( '(opens in a new tab)', 'woocommerce' )
- }
- </VisuallyHidden>
- </MenuItem>
- );
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/index.ts b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/index.ts
deleted file mode 100644
index 48b036d2304..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './more-menu';
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/more-menu.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/more-menu.tsx
deleted file mode 100644
index 39bb40bd6ac..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/more-menu.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuGroup } from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import ActionItem from '@wordpress/interface/build-module/components/action-item';
-
-/**
- * Internal dependencies
- */
-import { ToolsMenuGroup } from './tools-menu-group';
-import { WritingMenu } from '../writing-menu';
-import { MORE_MENU_ACTION_ITEM_SLOT_NAME } from '../../constants';
-import { MoreMenuDropdown } from '../../../more-menu-dropdown';
-
-export const MoreMenu = () => {
- return (
- <MoreMenuDropdown>
- { ( onClose ) => (
- <>
- <WritingMenu />
- <ActionItem.Slot
- name={ MORE_MENU_ACTION_ITEM_SLOT_NAME }
- label={ __( 'Plugins', 'woocommerce' ) }
- as={ MenuGroup }
- fillProps={ { onClick: onClose } }
- />
-
- <ToolsMenuGroup />
- </>
- ) }
- </MoreMenuDropdown>
- );
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/tools-menu-group.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/tools-menu-group.tsx
deleted file mode 100644
index 0c24030d092..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/tools-menu-group.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuGroup } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { CopyAllContentMenuItem } from './copy-all-content-menu-item';
-import { HelpMenuItem } from './help-menu-item';
-
-export const ToolsMenuGroup = () => {
- return (
- <MenuGroup label={ __( 'Tools', 'woocommerce' ) }>
- <CopyAllContentMenuItem />
- <HelpMenuItem />
- </MenuGroup>
- );
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/index.ts b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/index.ts
deleted file mode 100644
index 0a76c60c925..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './plugin-more-menu-item';
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/plugin-more-menu-item.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/plugin-more-menu-item.tsx
deleted file mode 100644
index 265ed2ea2eb..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/plugin-more-menu-item/plugin-more-menu-item.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { compose } from '@wordpress/compose';
-import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
-import ActionItem from '@wordpress/interface/build-module/components/action-item';
-
-/**
- * Internal dependencies
- */
-import { MORE_MENU_ACTION_ITEM_SLOT_NAME } from '../../constants';
-
-type PluginMoreMenuItemProps = {
- as?: React.ElementType;
- icon?: string | React.ReactNode;
-};
-
-export const PluginMoreMenuItem = compose(
- // @ts-expect-error The type defintion of withPluginContext is incorrect.
- withPluginContext( ( context, ownProps: PluginMoreMenuItemProps ) => {
- return {
- as: ownProps.as ?? MenuItem,
- icon: ownProps.icon || context.icon,
- name: MORE_MENU_ACTION_ITEM_SLOT_NAME,
- };
- } )
-)( ActionItem );
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/index.ts b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/index.ts
deleted file mode 100644
index f34ab8d8674..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './writing-menu';
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/writing-menu.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/writing-menu.tsx
deleted file mode 100644
index aaa49e679de..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/writing-menu/writing-menu.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { MenuGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-import { createElement } from '@wordpress/element';
-import {
- PreferenceToggleMenuItem,
- store as preferencesStore,
- // @ts-expect-error missing types.
-} from '@wordpress/preferences';
-
-export function WritingMenu() {
- const { set: setPreference } = useDispatch( preferencesStore );
-
- const turnOffDistractionFree = () => {
- setPreference( 'core', 'distractionFree', false );
- };
-
- const isLargeViewport = useViewportMatch( 'medium' );
- if ( ! isLargeViewport ) {
- return null;
- }
-
- return (
- <MenuGroup label={ __( 'View', 'woocommerce' ) }>
- <PreferenceToggleMenuItem
- scope="core"
- name="fixedToolbar"
- onToggle={ turnOffDistractionFree }
- label={ __( 'Top toolbar', 'woocommerce' ) }
- info={ __(
- 'Access all block and document tools in a single place',
- 'woocommerce'
- ) }
- messageActivated={ __(
- 'Top toolbar activated',
- 'woocommerce'
- ) }
- messageDeactivated={ __(
- 'Top toolbar deactivated',
- 'woocommerce'
- ) }
- />
- </MenuGroup>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/hooks/use-editor-history.ts b/packages/js/product-editor/src/components/iframe-editor/hooks/use-editor-history.ts
deleted file mode 100644
index d480820c99e..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/hooks/use-editor-history.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-import { useDebounce } from '@wordpress/compose';
-import { useCallback, useState } from '@wordpress/element';
-
-type useEditorHistoryProps = {
- maxHistory?: number;
- setBlocks: ( blocks: BlockInstance[] ) => void;
-};
-
-const DEFAULT_MAX_HISTORY = 50;
-
-export function useEditorHistory( {
- maxHistory = DEFAULT_MAX_HISTORY,
- setBlocks,
-}: useEditorHistoryProps ) {
- const [ edits, setEdits ] = useState< BlockInstance[][] >( [] );
- const [ offsetIndex, setOffsetIndex ] = useState< number >( 0 );
-
- const appendEdit = useDebounce(
- useCallback(
- ( edit: BlockInstance[] ) => {
- const currentEdits = edits.slice( 0, offsetIndex + 1 );
- const newEdits = [ ...currentEdits, edit ].slice(
- maxHistory * -1
- );
- setEdits( newEdits );
- setOffsetIndex( newEdits.length - 1 );
- },
- [ edits, maxHistory, offsetIndex ]
- ),
- 500
- );
-
- const undo = useCallback( () => {
- appendEdit.flush();
-
- const newIndex = Math.max( 0, offsetIndex - 1 );
- if ( ! edits[ newIndex ] ) {
- return;
- }
- setBlocks( edits[ newIndex ] );
- setOffsetIndex( newIndex );
- }, [ appendEdit, edits, offsetIndex, setBlocks ] );
-
- const redo = useCallback( () => {
- appendEdit.flush();
-
- const newIndex = Math.min( edits.length - 1, offsetIndex + 1 );
- if ( ! edits[ newIndex ] ) {
- return;
- }
- setBlocks( edits[ newIndex ] );
- setOffsetIndex( newIndex );
- }, [ appendEdit, edits, offsetIndex, setBlocks ] );
-
- function hasUndo() {
- return !! edits.length && offsetIndex > 0;
- }
-
- function hasRedo() {
- return !! edits.length && offsetIndex < edits.length - 1;
- }
-
- return {
- appendEdit,
- hasRedo: hasRedo(),
- hasUndo: hasUndo(),
- redo,
- undo,
- };
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss
deleted file mode 100644
index 7208bc412d2..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.woocommerce-iframe-editor {
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- height: 100%;
-
- &__main {
- align-items: flex-start;
- display: flex;
- flex-direction: row;
- flex-grow: 1;
- height: 100%;
- width: 100%;
- overflow: hidden;
- z-index: 1000;
- }
-
- iframe {
- width: 100%;
- height: 100%;
- }
-
- &__content {
- box-sizing: border-box;
- flex-grow: 1;
- background-color: #2f2f2f;
- padding: 40px 48px;
- height: 100%;
- justify-content: center;
- display: flex;
- position: relative;
-
- &.old-fixed-toolbar-shown {
- padding: 90px 48px 40px;
- }
- }
-
- &__content-inserter-clipper {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 40px;
- background-color: inherit;
- z-index: 100;
- }
-
- &__sidebar {
- flex-shrink: 0;
- height: 100%;
- overflow: scroll;
- @media only screen and (max-width: $break-medium) {
- width: 100%;
- position: absolute;
- z-index: 100;
- }
- }
-
- .block-editor-block-contextual-toolbar.is-fixed {
- position: absolute;
- left: 0;
- top: 0;
- border-bottom: 1px solid $gray-400;
- border-right: 1px solid $gray-400;
- box-sizing: border-box;
- margin-left: 0px;
- width: 100% !important;
- min-height: 47px;
- > .block-editor-block-toolbar.is-showing-movers:before {
- display: none;
- }
-
- .block-editor-block-toolbar__group-expand-fixed-toolbar,
- .block-editor-block-toolbar__group-collapse-fixed-toolbar {
- display: none;
- }
- }
-
- .woocommerce-iframe-editor__header-right
- .interface-pinned-items
- .components-button {
- display: flex;
- }
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx b/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
deleted file mode 100644
index 660bfc6ce1a..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
- createElement,
- useCallback,
- useEffect,
- useReducer,
- useState,
-} from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-import { PluginArea } from '@wordpress/plugins';
-import clsx from 'clsx';
-import {
- store as preferencesStore,
- // @ts-expect-error No types for this exist yet.
-} from '@wordpress/preferences';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- BlockEditorProvider,
- BlockList,
- // @ts-expect-error BlockTools is not exported from @wordpress/block-editor's public types.
- BlockTools,
- BlockEditorKeyboardShortcuts,
- EditorSettings,
- EditorBlockListSettings,
- store as blockEditorStore,
-} from '@wordpress/block-editor';
-// eslint-disable-next-line @woocommerce/dependency-group
-import {
- ComplementaryArea,
- // @ts-expect-error No types for this exist yet.
-} from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { BackButton } from './back-button';
-import { EditorCanvas } from './editor-canvas';
-import { EditorContext } from './context';
-import { HeaderToolbar } from './header-toolbar/header-toolbar';
-import { RegisterStores } from './RegisterStores';
-import { ResizableEditor } from './resizable-editor';
-import { SecondarySidebar } from './secondary-sidebar/secondary-sidebar';
-import { SettingsSidebar } from './sidebar/settings-sidebar';
-import { useEditorHistory } from './hooks/use-editor-history';
-import { wooProductEditorUiStore } from '../../store/product-editor-ui';
-import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from './constants';
-import {
- KeyboardShortcuts,
- RegisterKeyboardShortcuts,
-} from './keyboard-shortcuts';
-import { areBlocksEmpty } from './utils/are-blocks-empty';
-
-type SidebarState = {
- isInserterOpened: boolean;
- isListViewOpened: boolean;
-};
-
-const setIsInserterOpenedAction = 'SET_IS_INSERTER_OPENED';
-const setIsListViewOpenedAction = 'SET_IS_LISTVIEW_OPENED';
-const initialSidebarState: SidebarState = {
- isInserterOpened: false,
- isListViewOpened: false,
-};
-function sidebarReducer(
- state: SidebarState,
- action: { type: string; value: boolean }
-): SidebarState {
- switch ( action.type ) {
- case setIsInserterOpenedAction: {
- return {
- ...state,
- isInserterOpened: action.value,
- isListViewOpened: action.value ? false : state.isListViewOpened,
- };
- }
- case setIsListViewOpenedAction: {
- return {
- ...state,
- isListViewOpened: action.value,
- isInserterOpened: action.value ? false : state.isInserterOpened,
- };
- }
- }
- return state;
-}
-
-type IframeEditorProps = {
- initialBlocks?: BlockInstance[];
- onChange?: ( blocks: BlockInstance[] ) => void;
- onClose?: () => void;
- onInput?: ( blocks: BlockInstance[] ) => void;
- settings?: Partial< EditorSettings & EditorBlockListSettings > | undefined;
- showBackButton?: boolean;
- name: string;
-};
-
-export function IframeEditor( {
- onChange = () => {},
- onClose,
- onInput = () => {},
- settings: __settings,
- showBackButton = false,
- name,
-}: IframeEditorProps ) {
- const [ resizeObserver ] = useResizeObserver();
- const [ temporalBlocks, setTemporalBlocks ] = useState< BlockInstance[] >(
- []
- );
-
- // Pick the blocks from the store.
- const blocks: BlockInstance[] = useSelect( ( select ) => {
- return select( wooProductEditorUiStore ).getModalEditorBlocks();
- }, [] );
-
- const { setModalEditorBlocks: setBlocks, setModalEditorContentHasChanged } =
- useDispatch( wooProductEditorUiStore );
-
- const {
- appendEdit: appendToEditorHistory,
- hasRedo,
- hasUndo,
- redo,
- undo,
- } = useEditorHistory( {
- setBlocks: setTemporalBlocks,
- } );
-
- /*
- * Set the initial blocks from the store.
- * @todo: probably we can get rid of the initialBlocks prop.
- */
- useEffect( () => {
- appendToEditorHistory( blocks );
- setTemporalBlocks( blocks );
- }, [] ); // eslint-disable-line
-
- const [ { isInserterOpened, isListViewOpened }, dispatch ] = useReducer(
- sidebarReducer,
- initialSidebarState
- );
-
- const setIsInserterOpened = useCallback( ( value: boolean ) => {
- dispatch( {
- type: setIsInserterOpenedAction,
- value,
- } );
- }, [] );
-
- const setIsListViewOpened = useCallback( ( value: boolean ) => {
- dispatch( {
- type: setIsListViewOpenedAction,
- value,
- } );
- }, [] );
-
- const { clearSelectedBlock, updateSettings } =
- useDispatch( blockEditorStore );
-
- const parentEditorSettings = useSelect( ( select ) => {
- return select( blockEditorStore ).getSettings();
- }, [] );
-
- const { hasFixedToolbar } = useSelect( ( select ) => {
- const { get: getPreference } = select( preferencesStore );
-
- return {
- hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
- };
- }, [] );
-
- useEffect( () => {
- // Manually update the settings so that __unstableResolvedAssets gets added to the data store.
- // @ts-expect-error `productBlockEditorSettings` is a runtime global injected by PHP and isn't declared in the ambient types.
- updateSettings( productBlockEditorSettings );
- }, [] );
-
- const handleBlockEditorProviderOnChange = (
- updatedBlocks: BlockInstance[]
- ) => {
- appendToEditorHistory( updatedBlocks );
- setTemporalBlocks( updatedBlocks );
- onChange( updatedBlocks );
- };
-
- const handleBlockEditorProviderOnInput = (
- updatedBlocks: BlockInstance[]
- ) => {
- appendToEditorHistory( updatedBlocks );
- setTemporalBlocks( updatedBlocks );
- onInput( updatedBlocks );
- };
-
- const settings = __settings || parentEditorSettings;
-
- return (
- <div className="woocommerce-iframe-editor">
- <EditorContext.Provider
- value={ {
- hasRedo,
- hasUndo,
- isInserterOpened,
- isDocumentOverviewOpened: isListViewOpened,
- redo,
- setIsInserterOpened,
- setIsDocumentOverviewOpened: setIsListViewOpened,
- undo,
- } }
- >
- <BlockEditorProvider
- settings={ {
- ...settings,
- hasFixedToolbar,
- templateLock: false,
- } }
- value={ temporalBlocks }
- onChange={ handleBlockEditorProviderOnChange }
- onInput={ handleBlockEditorProviderOnInput }
- useSubRegistry={ true }
- >
- <RegisterStores />
-
- <KeyboardShortcuts />
- <RegisterKeyboardShortcuts />
-
- <HeaderToolbar
- onSave={ () => {
- setBlocks(
- areBlocksEmpty( temporalBlocks )
- ? []
- : temporalBlocks
- );
- setModalEditorContentHasChanged( true );
- onChange( temporalBlocks );
- onClose?.();
- } }
- onCancel={ () => {
- setBlocks( blocks );
- onChange( blocks );
- setTemporalBlocks( blocks );
- onClose?.();
- } }
- />
- <div className="woocommerce-iframe-editor__main">
- <SecondarySidebar />
- <BlockTools
- className={ clsx(
- 'woocommerce-iframe-editor__content'
- ) }
- onClick={ (
- event: React.MouseEvent<
- HTMLDivElement,
- MouseEvent
- >
- ) => {
- // Clear selected block when clicking on the gray background.
- if ( event.target === event.currentTarget ) {
- clearSelectedBlock();
- }
- } }
- >
- { /* @ts-expect-error BlockEditorKeyboardShortcuts.Register is not exposed on the component's public types. */ }
- <BlockEditorKeyboardShortcuts.Register />
- { showBackButton && onClose && (
- <BackButton
- onClick={ () => {
- setTimeout( onClose, 550 );
- } }
- />
- ) }
- <ResizableEditor
- enableResizing={ true }
- // @ts-expect-error ResizableEditor's upstream height prop expects a number, but the component accepts percentage strings.
- height="100%"
- >
- <EditorCanvas
- enableResizing={ true }
- settings={ settings }
- >
- { resizeObserver }
- <BlockList className="edit-site-block-editor__block-list wp-site-blocks" />
- </EditorCanvas>
- { /* @ts-expect-error name does exist on PopoverSlot see: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/popover/index.tsx#L555 */ }
- <Popover.Slot />
- </ResizableEditor>
- { /* This is a hack, but I couldn't find another (easy) way to not
- have the inserter render in the content's padding. I believe
- that is happening because the inserter is positioned using a transforms,
- which take it outside of the normal layout, thus ignoring the parent's
- bounds. */ }
- <div className="woocommerce-iframe-editor__content-inserter-clipper" />
- </BlockTools>
- <ComplementaryArea.Slot
- scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
- />
- </div>
- <PluginArea scope="woocommerce-product-editor-modal-block-editor" />
- <SettingsSidebar smallScreenTitle={ name } />
- </BlockEditorProvider>
- </EditorContext.Provider>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/index.ts b/packages/js/product-editor/src/components/iframe-editor/index.ts
deleted file mode 100644
index bedb221acb9..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './iframe-editor';
-export * from './sidebar/plugin-sidebar';
-export * from './header-toolbar/plugin-more-menu-item';
diff --git a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/index.ts b/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/index.ts
deleted file mode 100644
index ce2e7c0d81d..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './keyboard-shortcuts';
-export * from './register-keyboard-shortcuts';
diff --git a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/keyboard-shortcuts.tsx b/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/keyboard-shortcuts.tsx
deleted file mode 100644
index 0cf4e81f311..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/keyboard-shortcuts.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useContext } from '@wordpress/element';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import {
- store as interfaceStore,
- // @ts-expect-error No types for this exist yet.
-} from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-import {
- SETTINGS_SIDEBAR_IDENTIFIER,
- SIDEBAR_COMPLEMENTARY_AREA_SCOPE,
-} from '../constants';
-
-export const KeyboardShortcuts = () => {
- const {
- isDocumentOverviewOpened: isListViewOpened,
- redo,
- setIsDocumentOverviewOpened: setIsListViewOpened,
- undo,
- } = useContext( EditorContext );
-
- const { isSettingsSidebarOpen } = useSelect( ( select ) => {
- const { getActiveComplementaryArea } = select( interfaceStore );
-
- return {
- isSettingsSidebarOpen:
- getActiveComplementaryArea(
- SIDEBAR_COMPLEMENTARY_AREA_SCOPE
- ) === SETTINGS_SIDEBAR_IDENTIFIER,
- };
- }, [] );
-
- const { disableComplementaryArea, enableComplementaryArea } =
- useDispatch( interfaceStore );
-
- useShortcut(
- 'woocommerce/product-editor/modal-block-editor/undo',
- ( event ) => {
- undo();
- event.preventDefault();
- }
- );
-
- useShortcut(
- 'woocommerce/product-editor/modal-block-editor/redo',
- ( event ) => {
- redo();
- event.preventDefault();
- }
- );
-
- useShortcut(
- 'woocommerce/product-editor/modal-block-editor/toggle-list-view',
- ( event ) => {
- setIsListViewOpened( ! isListViewOpened );
- event.preventDefault();
- }
- );
-
- useShortcut(
- 'woocommerce/product-editor/modal-block-editor/toggle-sidebar',
- ( event ) => {
- if ( isSettingsSidebarOpen ) {
- disableComplementaryArea( SIDEBAR_COMPLEMENTARY_AREA_SCOPE );
- } else {
- enableComplementaryArea(
- SIDEBAR_COMPLEMENTARY_AREA_SCOPE,
- SETTINGS_SIDEBAR_IDENTIFIER
- );
- }
- event.preventDefault();
- }
- );
-
- return null;
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/register-keyboard-shortcuts.tsx b/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/register-keyboard-shortcuts.tsx
deleted file mode 100644
index c40a489df89..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/keyboard-shortcuts/register-keyboard-shortcuts.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { isAppleOS } from '@wordpress/keycodes';
-
-export const RegisterKeyboardShortcuts = () => {
- // @ts-expect-error keyboard-shortcuts store's registerShortcut action is not exposed on the public dispatch type.
- const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-
- useEffect( () => {
- registerShortcut( {
- name: 'woocommerce/product-editor/modal-block-editor/undo',
- category: 'global',
- description: __( 'Undo your last changes.', 'woocommerce' ),
- keyCombination: {
- modifier: 'primary',
- character: 'z',
- },
- } );
-
- registerShortcut( {
- name: 'woocommerce/product-editor/modal-block-editor/redo',
- category: 'global',
- description: __( 'Redo your last undo.', 'woocommerce' ),
- keyCombination: {
- modifier: 'primaryShift',
- character: 'z',
- },
- // Disable on Apple OS because it conflicts with the browser's
- // history shortcut. It's a fine alias for both Windows and Linux.
- // Since there's no conflict for Ctrl+Shift+Z on both Windows and
- // Linux, we keep it as the default for consistency.
- aliases: isAppleOS()
- ? []
- : [
- {
- modifier: 'primary',
- character: 'y',
- },
- ],
- } );
-
- registerShortcut( {
- name: 'woocommerce/product-editor/modal-block-editor/toggle-list-view',
- category: 'global',
- description: __( 'Open the block list view.', 'woocommerce' ),
- keyCombination: {
- modifier: 'access',
- character: 'o',
- },
- } );
-
- registerShortcut( {
- name: 'woocommerce/product-editor/modal-block-editor/toggle-sidebar',
- category: 'global',
- description: __(
- 'Show or hide the Settings sidebar.',
- 'woocommerce'
- ),
- keyCombination: {
- modifier: 'primaryShift',
- character: ',',
- },
- } );
- }, [ registerShortcut ] );
-
- return null;
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/resizable-editor.tsx b/packages/js/product-editor/src/components/iframe-editor/resizable-editor.tsx
deleted file mode 100644
index f60257e3a62..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/resizable-editor.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- useState,
- useRef,
- useCallback,
-} from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ResizeHandle from './resize-handle';
-
-// Removes the inline styles in the drag handles.
-const HANDLE_STYLES_OVERRIDE = {
- position: undefined,
- userSelect: undefined,
- cursor: undefined,
- width: undefined,
- height: undefined,
- top: undefined,
- right: undefined,
- bottom: undefined,
- left: undefined,
-};
-
-type ResizableEditorProps = {
- enableResizing: boolean;
- height: number;
- children: React.ReactNode;
-};
-
-export function ResizableEditor( {
- enableResizing,
- height,
- children,
-}: ResizableEditorProps ) {
- const [ width, setWidth ] = useState( '100%' );
- const resizableRef = useRef< HTMLElement | null >();
- const resizeWidthBy = useCallback( ( deltaPixels: number ): void => {
- if ( resizableRef.current ) {
- setWidth(
- ( resizableRef.current.offsetWidth + deltaPixels ).toString()
- );
- }
- }, [] );
- return (
- <ResizableBox
- ref={ ( api ) => {
- resizableRef.current = api?.resizable;
- } }
- size={ {
- width: enableResizing ? width : '100%',
- height: enableResizing && height ? height : '100%',
- } }
- onResizeStop={ ( event, direction, element ) => {
- setWidth( element.style.width );
- } }
- minWidth={ 300 }
- maxWidth="100%"
- maxHeight="100%"
- minHeight={ height }
- enable={ {
- right: enableResizing,
- left: enableResizing,
- } }
- showHandle={ enableResizing }
- // The editor is centered horizontally, resizing it only
- // moves half the distance. Hence double the ratio to correctly
- // align the cursor to the resizer handle.
- resizeRatio={ 2 }
- handleComponent={ {
- left: (
- <ResizeHandle
- direction="left"
- resizeWidthBy={ resizeWidthBy }
- />
- ),
- right: (
- <ResizeHandle
- direction="right"
- resizeWidthBy={ resizeWidthBy }
- />
- ),
- } }
- handleClasses={ undefined }
- handleStyles={ {
- left: HANDLE_STYLES_OVERRIDE,
- right: HANDLE_STYLES_OVERRIDE,
- } }
- >
- { children }
- </ResizableBox>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/resize-handle.scss b/packages/js/product-editor/src/components/iframe-editor/resize-handle.scss
deleted file mode 100644
index 14839017544..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/resize-handle.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.resizable-editor__drag-handle {
- -webkit-appearance: none;
- appearance: none;
- background: none;
- border: 0;
- border-radius: 2px;
- bottom: 0;
- cursor: ew-resize;
- margin: auto 0;
- outline: none;
- padding: 0;
- position: absolute;
- top: 0;
- width: 12px;
- height: 100px;
-
- &.is-left {
- left: -16px;
- }
-
- &.is-right {
- right: -16px;
- }
-
- &:after {
- background: #949494;
- border-radius: 2px;
- bottom: 24px;
- content: "";
- left: 4px;
- position: absolute;
- right: 0;
- top: 24px;
- width: 4px;
- }
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/resize-handle.tsx b/packages/js/product-editor/src/components/iframe-editor/resize-handle.tsx
deleted file mode 100644
index 8d668adeedb..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/resize-handle.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createElement, Fragment } from '@wordpress/element';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
-import { KeyboardEvent } from 'react';
-import { VisuallyHidden } from '@wordpress/components';
-
-const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
-
-type ResizeHandleProps = {
- direction: 'left' | 'right';
- resizeWidthBy: ( width: number ) => void;
-};
-
-export default function ResizeHandle( {
- direction,
- resizeWidthBy,
-}: ResizeHandleProps ) {
- function handleKeyDown( event: KeyboardEvent< HTMLButtonElement > ) {
- const { keyCode } = event;
-
- if (
- ( direction === 'left' && keyCode === LEFT ) ||
- ( direction === 'right' && keyCode === RIGHT )
- ) {
- resizeWidthBy( DELTA_DISTANCE );
- } else if (
- ( direction === 'left' && keyCode === RIGHT ) ||
- ( direction === 'right' && keyCode === LEFT )
- ) {
- resizeWidthBy( -DELTA_DISTANCE );
- }
- }
-
- return (
- <>
- <button
- className={ `resizable-editor__drag-handle is-${ direction }` }
- aria-label={ __( 'Drag to resize', 'woocommerce' ) }
- aria-describedby={ `resizable-editor__resize-help-${ direction }` }
- onKeyDown={ handleKeyDown }
- />
- <VisuallyHidden
- id={ `resizable-editor__resize-help-${ direction }` }
- >
- { __(
- 'Use left and right arrow keys to resize the canvas.',
- 'woocommerce'
- ) }
- </VisuallyHidden>
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/document-overview-sidebar.tsx b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/document-overview-sidebar.tsx
deleted file mode 100644
index 3cb00f0c154..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/document-overview-sidebar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, TabPanel } from '@wordpress/components';
-import {
- useFocusOnMount,
- useFocusReturn,
- useMergeRefs,
-} from '@wordpress/compose';
-import {
- createElement,
- useRef,
- useState,
- useContext,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import {
- // @ts-expect-error Module "@wordpress/block-editor" has no exported member '__experimentalListView'
- __experimentalListView as ListView,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../../context';
-
-export function DocumentOverviewSidebar() {
- const { setIsDocumentOverviewOpened: setIsListViewOpened } =
- useContext( EditorContext );
-
- // This hook handles focus when the sidebar first renders.
- const focusOnMountRef = useFocusOnMount( 'firstElement' );
- // The next 2 hooks handle focus for when the sidebar closes and returning focus to the element that had focus before sidebar opened.
- const headerFocusReturnRef = useFocusReturn();
- const contentFocusReturnRef = useFocusReturn();
-
- function closeOnEscape( event: React.KeyboardEvent< HTMLDivElement > ) {
- if ( event.code === 'Escape' && ! event.defaultPrevented ) {
- event.preventDefault();
- setIsListViewOpened( false );
- }
- }
-
- // Use internal state instead of a ref to make sure that the component
- // re-renders when the dropZoneElement updates.
- const [ dropZoneElement, setDropZoneElement ] = useState( null );
- // Tracks our current tab.
- const [ tab, setTab ] = useState( 'list-view' );
-
- // This ref refers to the list view application area.
- const listViewRef = useRef< HTMLDivElement >( null );
-
- // Must merge the refs together so focus can be handled properly in the next function.
- const listViewContainerRef = useMergeRefs( [
- contentFocusReturnRef,
- focusOnMountRef,
- listViewRef,
- setDropZoneElement,
- ] );
-
- /**
- * Render tab content for a given tab name.
- *
- * @param tabName The name of the tab to render.
- */
- function renderTabContent( tabName: string ) {
- if ( tabName === 'list-view' ) {
- return <ListView dropZoneElement={ dropZoneElement } />;
- }
- return null;
- }
-
- return (
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- <div
- className="woocommerce-iframe-editor__document-overview-sidebar"
- onKeyDown={ closeOnEscape }
- >
- <Button
- className="woocommerce-iframe-editor__document-overview-sidebar-close-button"
- ref={ headerFocusReturnRef }
- icon={ closeSmall }
- label={ __( 'Close', 'woocommerce' ) }
- onClick={ () => setIsListViewOpened( false ) }
- />
- <TabPanel
- className="woocommerce-iframe-editor__document-overview-sidebar-tab-panel"
- initialTabName={ tab }
- onSelect={ setTab }
- tabs={ [
- {
- name: 'list-view',
- title: __( 'List View', 'woocommerce' ),
- className:
- 'woocommerce-iframe-editor__document-overview-sidebar-tab-item',
- },
- ] }
- >
- { ( currentTab ) => (
- <div
- className="woocommerce-iframe-editor__document-overview-sidebar-tab-content"
- ref={ listViewContainerRef }
- >
- { renderTabContent( currentTab.name ) }
- </div>
- ) }
- </TabPanel>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/index.ts b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/index.ts
deleted file mode 100644
index d634a9b8387..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './document-overview-sidebar';
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/style.scss b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/style.scss
deleted file mode 100644
index 890488bc515..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/document-overview-sidebar/style.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.woocommerce-iframe-editor__document-overview-sidebar {
- position: relative;
- width: 350px;
- height: 100%;
- border-right: 1px solid $gray-400;
- background: $studio-white;
- @media only screen and (max-width: $break-medium) {
- width: 100%;
- position: absolute;
- z-index: 100;
- }
-
- &-close-button {
- position: absolute;
- right: calc($grid-unit - 2px);
- top: calc($grid-unit - 2px);
- }
-
- &-tab-panel {
- height: 100%;
-
- .components-tab-panel__tabs {
- padding-right: $grid-unit-60;
- border-bottom: 1px solid $gray-400;
- }
-
- .components-tab-panel__tab-content {
- display: flex;
- flex-direction: column;
- height: calc(100% - $grid-unit-60);
- .block-editor-list-view-tree {
- margin: 0;
- width: 100%;
- }
- }
- }
-
- &-tab-content {
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- padding: $grid-unit calc($grid-unit - 2px);
- }
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.scss b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.scss
deleted file mode 100644
index 2b967aae191..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.woocommerce-iframe-editor__inserter-panel {
- border-right: 1px solid $gray-400;
- height: 100%;
-
- &-content {
- height: 100%;
- @media only screen and (max-width: $break-medium) {
- width: 100%;
- position: absolute;
- z-index: 100;
- background-color: $studio-white;
- }
- }
-
- /*
- * styling copied from Gutenberg to work with versions of Gutenberg that don't
- * have https://github.com/WordPress/gutenberg/pull/61760; once that is in all
- * versions of Gutenberg/WordPress supported, we can remove this
- */
- .block-editor-inserter-sidebar__header {
- border-bottom: $border-width solid $gray-300;
- padding-right: $grid-unit-10;
- display: flex;
- justify-content: space-between;
-
- .block-editor-inserter-sidebar__close-button {
- order: 1;
- align-self: center;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.tsx b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.tsx
deleted file mode 100644
index 020ccc9bc81..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import {
- createElement,
- useCallback,
- useContext,
- useEffect,
- useRef,
-} from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { ESCAPE } from '@wordpress/keycodes';
-import {
- store as blockEditorStore,
- // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
- // @ts-expect-error __experimentalLibrary is not exported from @wordpress/block-editor's public types.
- __experimentalLibrary as Library,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-
-export default function InserterSidebar() {
- const { setIsInserterOpened } = useContext( EditorContext );
- const isMobileViewport = useViewportMatch( 'medium', '<' );
- const { rootClientId } = useSelect( ( select ) => {
- const { getBlockRootClientId } = select( blockEditorStore );
-
- return {
- rootClientId: getBlockRootClientId( '' ),
- };
- }, [] );
-
- const closeInserter = useCallback( () => {
- return setIsInserterOpened( false );
- }, [ setIsInserterOpened ] );
-
- const closeOnEscape = useCallback(
- ( event: React.KeyboardEvent ) => {
- if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
- event.preventDefault();
- closeInserter();
- }
- },
- [ closeInserter ]
- );
-
- const libraryRef = useRef< Library | null >( null );
- useEffect( () => {
- // Focus the search input when the inserter is opened,
- // if using an older version of the Library.
- libraryRef.current?.focusSearch?.();
- }, [] );
-
- return (
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- <div
- onKeyDown={ ( event ) => closeOnEscape( event ) }
- className="woocommerce-iframe-editor__inserter-panel"
- >
- <div className="woocommerce-iframe-editor__inserter-panel-content">
- <Library
- showInserterHelpPanel
- shouldFocusBlock={ isMobileViewport }
- rootClientId={ rootClientId }
- ref={ libraryRef }
- onClose={ closeInserter }
- onSelect={ () => {
- if ( isMobileViewport ) {
- closeInserter();
- }
- } }
- />
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/secondary-sidebar.tsx b/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/secondary-sidebar.tsx
deleted file mode 100644
index 712811c0961..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/secondary-sidebar/secondary-sidebar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { EditorContext } from '../context';
-import InserterSidebar from './inserter-sidebar';
-import { DocumentOverviewSidebar } from './document-overview-sidebar';
-
-export function SecondarySidebar() {
- const { isInserterOpened, isDocumentOverviewOpened: isListViewOpened } =
- useContext( EditorContext );
-
- if ( isInserterOpened ) {
- return <InserterSidebar />;
- }
-
- if ( isListViewOpened ) {
- return <DocumentOverviewSidebar />;
- }
-
- return null;
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/index.js b/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/index.js
deleted file mode 100644
index f20dcf1857f..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './plugin-sidebar';
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/plugin-sidebar.tsx b/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/plugin-sidebar.tsx
deleted file mode 100644
index b111b270629..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/plugin-sidebar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, lazy } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from '../../constants';
-
-const ComplementaryArea = lazy( () =>
- // @ts-expect-error No types for this exist yet
- import( '@wordpress/interface' ).then( ( module ) => ( {
- default: module.ComplementaryArea,
- } ) )
-);
-
-type PluginSidebarProps = {
- children: React.ReactNode;
- className?: string;
- closeLabel?: string;
- header?: React.ReactNode;
- icon?: string | React.ReactNode;
- identifier?: string;
- isActiveByDefault?: boolean;
- name?: string;
- title?: string;
- smallScreenTitle: string;
-};
-
-export function PluginSidebar( { className, ...props }: PluginSidebarProps ) {
- return (
- <ComplementaryArea
- // @ts-expect-error No types for this exist yet
- panelClassName={ className }
- className="woocommerce-iframe-editor__sidebar"
- scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
- { ...props }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-left.tsx b/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-left.tsx
deleted file mode 100644
index 0c4af4e62ee..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-left.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-// Copied from @wordpress/icons@wp-6.2. We can delete this after we update to this version.
-const drawerLeft = (
- <svg
- width="24"
- height="24"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- aria-hidden="true"
- focusable="false"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8.5 18.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h2.5v13zm10-.5c0 .3-.2.5-.5.5h-8v-13h8c.3 0 .5.2.5.5v12z"
- />
- </svg>
-);
-
-export default drawerLeft;
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-right.tsx b/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-right.tsx
deleted file mode 100644
index 0fc7e6c570b..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/drawer-right.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-// Copied from @wordpress/icons@wp-6.2. We can delete this after we update to this version.
-const drawerRight = (
- <svg
- width="24"
- height="24"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- aria-hidden="true"
- focusable="false"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-4 14.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h8v13zm4.5-.5c0 .3-.2.5-.5.5h-2.5v-13H18c.3 0 .5.2.5.5v12z"
- />
- </svg>
-);
-
-export default drawerRight;
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/index.js b/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/index.js
deleted file mode 100644
index aaa8da69729..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './settings-sidebar';
diff --git a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/settings-sidebar.tsx b/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/settings-sidebar.tsx
deleted file mode 100644
index 4a34d854224..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/sidebar/settings-sidebar/settings-sidebar.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInspector } from '@wordpress/block-editor';
-import { createElement } from '@wordpress/element';
-import { isRTL, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import drawerLeft from './drawer-left';
-import drawerRight from './drawer-right';
-import { PluginSidebar } from '../plugin-sidebar';
-import { SETTINGS_SIDEBAR_IDENTIFIER } from '../../constants';
-
-const SettingsHeader = () => {
- return <strong>{ __( 'Settings', 'woocommerce' ) }</strong>;
-};
-
-export const SettingsSidebar = ( {
- smallScreenTitle,
-}: {
- smallScreenTitle: string;
-} ) => {
- return (
- <PluginSidebar
- // By not providing a name, the sidebar will not be listed in
- // the more menu's Plugins menu group.
- identifier={ SETTINGS_SIDEBAR_IDENTIFIER }
- title={ __( 'Settings', 'woocommerce' ) }
- icon={ isRTL() ? drawerRight : drawerLeft }
- isActiveByDefault={ true }
- // We need to pass a custom header to the sidebar to prevent
- // the pin button in the default header from being displayed.
- header={ <SettingsHeader /> }
- closeLabel={ __( 'Close settings', 'woocommerce' ) }
- smallScreenTitle={ smallScreenTitle }
- >
- <BlockInspector />
- </PluginSidebar>
- );
-};
diff --git a/packages/js/product-editor/src/components/iframe-editor/style.scss b/packages/js/product-editor/src/components/iframe-editor/style.scss
deleted file mode 100644
index a344d5ca754..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/style.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "./iframe-editor.scss";
-@import "./header-toolbar/header-toolbar.scss";
-@import "./resize-handle.scss";
-@import "./back-button.scss";
-@import "./secondary-sidebar/inserter-sidebar.scss";
-@import "./secondary-sidebar/document-overview-sidebar/style.scss";
diff --git a/packages/js/product-editor/src/components/iframe-editor/utils/are-blocks-empty.ts b/packages/js/product-editor/src/components/iframe-editor/utils/are-blocks-empty.ts
deleted file mode 100644
index 28150d41491..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/utils/are-blocks-empty.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * By default the blocks returned by the editor contains one paragraph
- * block with empty content. This function checks to see if the blocks
- * consists of a single paragraph block with empty content or no blocks.
- *
- * @param blocks The block list
- * @return true if the blocks consists of a single paragraph block with empty content or no blocks; false otherwise
- */
-export function areBlocksEmpty( blocks?: BlockInstance[] | null ) {
- if ( ! blocks?.length ) {
- return true;
- }
-
- if ( blocks.length === 1 ) {
- const block = blocks[ 0 ];
- const isParagraph = block.name === 'core/paragraph';
-
- if ( isParagraph ) {
- // dropCap is set to false by default; we don't care what it is set to
- // when determining if a paragraph block is empty
- const { content, dropCap, backgroundColor, ...attributes } =
- block.attributes;
- const isContentEmpty = ! content || ! content.trim();
- // When the background is cleared, the backgroundColor is set to undefined,
- // so we need to check if it is actually set to a value
- const isBackgroundColorSet = !! backgroundColor;
- const isAttributesSet = Object.keys( attributes ).length > 0;
-
- if (
- isContentEmpty &&
- ! isBackgroundColorSet &&
- ! isAttributesSet
- ) {
- return true;
- }
- }
- }
-
- return false;
-}
diff --git a/packages/js/product-editor/src/components/iframe-editor/utils/test/are-blocks-empty.test.ts b/packages/js/product-editor/src/components/iframe-editor/utils/test/are-blocks-empty.test.ts
deleted file mode 100644
index 13a1ea41433..00000000000
--- a/packages/js/product-editor/src/components/iframe-editor/utils/test/are-blocks-empty.test.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * Internal dependencies
- */
-import { areBlocksEmpty } from '../are-blocks-empty';
-
-describe( 'areBlocksEmpty', () => {
- it( 'should return false if there is more than one block', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: [],
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- {
- name: 'core/paragraph',
- attributes: [],
- innerBlocks: [],
- isValid: true,
- clientId: '2',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( false );
- } );
-
- it( 'should return false if there is one block that is not a paragraph block', () => {
- const blocks = [
- {
- name: 'core/heading',
- attributes: [],
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( false );
- } );
-
- it( 'should return false if the paragraph block has content', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: 'Some content',
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( false );
- } );
-
- it( 'should return false if the paragraph block has no content but a backgroundColor', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: '',
- backgroundColor: 'red',
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( false );
- } );
-
- it( 'should return false if the paragraph block has no content but any attribute', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- foo: 'bar',
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( false );
- } );
-
- it( 'should return true if an empty block list is passed', () => {
- expect( areBlocksEmpty( [] ) ).toBe( true );
- } );
-
- it( 'should return true if a null block list is passed', () => {
- expect( areBlocksEmpty( null ) ).toBe( true );
- } );
-
- it( 'should return true if an undefined block list is passed', () => {
- expect( areBlocksEmpty( undefined ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has no content or attributes', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: [],
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has empty content', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: '',
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has empty content (after trimming)', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: ' ',
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has no content and an undefined backgroundColor', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: '',
- backgroundColor: undefined,
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has no content and dropCap set true', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: '',
- dropCap: true,
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-
- it( 'should return true if the paragraph block has no content and dropCap set false', () => {
- const blocks = [
- {
- name: 'core/paragraph',
- attributes: {
- content: '',
- dropCap: false,
- },
- innerBlocks: [],
- isValid: true,
- clientId: '1',
- },
- ];
-
- expect( areBlocksEmpty( blocks ) ).toBe( true );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/index.ts b/packages/js/product-editor/src/components/index.ts
deleted file mode 100644
index 9721a8bd65f..00000000000
--- a/packages/js/product-editor/src/components/index.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-export {
- ProductSectionLayout as __experimentalProductSectionLayout,
- ProductFieldSection as __experimentalProductFieldSection,
-} from './product-section-layout';
-export { WooProductFieldItem as __experimentalWooProductFieldItem } from './woo-product-field-item';
-export { WooProductSectionItem as __experimentalWooProductSectionItem } from './woo-product-section-item';
-export { WooProductTabItem as __experimentalWooProductTabItem } from './woo-product-tab-item';
-export { WooProductMoreMenuItem as __experimentalWooProductMoreMenuItem } from './header';
-export {
- PluginHeaderItemModal as __experimentalPluginHeaderItemModal,
- PluginHeaderItemPopover as __experimentalPluginHeaderItemPopover,
-} from './header';
-export {
- Editor as __experimentalEditor,
- initBlocks as __experimentalInitBlocks,
- type ProductEditorSettings,
-} from './editor';
-export {
- BlockIcon as __experimentalBlockIcon,
- type BlockIconProps,
-} from './block-icon';
-export { ProductMVPFeedbackModal as __experimentalProductMVPFeedbackModal } from './product-mvp-feedback-modal';
-export { ProductMVPFeedbackModalContainer as __experimentalProductMVPFeedbackModalContainer } from './product-mvp-feedback-modal-container';
-export {
- ShippingDimensionsImage as __experimentalShippingDimensionsImage,
- type ShippingDimensionsImageProps,
- type HighlightSides,
-} from './shipping-dimensions-image';
-
-export { AttributeControl as __experimentalAttributeControl } from './attribute-control';
-export { Attributes as __experimentalAttributes } from './attributes';
-export * from './add-new-shipping-class-modal';
-export { VariationSwitcherFooter as __experimentalVariationSwitcherFooter } from './variation-switcher-footer';
-export { VariationQuickUpdateMenuItem as __experimentalVariationQuickUpdateMenuItem } from './variations-table/variation-actions-menus';
-
-export * from './remove-confirmation-modal';
-
-export {
- ManageDownloadLimitsModal as __experimentalManageDownloadLimitsModal,
- type ManageDownloadLimitsModalProps,
-} from './manage-download-limits-modal';
-
-export { Checkbox as __experimentalCheckboxControl } from './checkbox-control';
-export { NumberControl as __experimentalNumberControl } from './number-control';
-
-export * from './modal-editor-welcome-guide';
-
-export {
- TextControl as __experimentalTextControl,
- type TextControlProps,
-} from './text-control';
-
-export {
- AddProductsModal as __experimentalAddProductsModal,
- type AddProductsModalProps,
-} from './add-products-modal';
-
-export {
- BlockFill as __experimentalBlockFill,
- BlockSlot as __experimentalBlockSlot,
- SectionActions as __experimentalSectionActions,
- type BlockFillProps,
- type BlockSlotProps,
-} from './block-slot-fill';
-
-export { Label as __experimentalLabel } from './label/label';
-export { ButtonWithDropdownMenu as __experimentalButtonWithDropdownMenu } from './button-with-dropdown-menu';
-export {
- FormattedPrice as __experimentalFormattedPrice,
- type FormattedPriceProps,
-} from './formatted-price';
-
-export {
- ProductList as __experimentalProductList,
- type ProductListProps,
-} from './product-list';
-
-export {
- ProductSelect as __experimentalProductSelect,
- type ProductSelectProps,
-} from './product-select';
-
-export {
- ProductImage as __experimentalProductImage,
- type ProductImageProps,
-} from './product-image';
-
-export { Notice as __experimentalNotice } from './notice';
-
-export {
- SchedulePublishModal as __experimentalSchedulePublishModal,
- type SchedulePublishModalProps,
-} from './schedule-publish-modal';
-
-export {
- CustomFields as __experimentalCustomFields,
- type CustomFieldsProps,
-} from './custom-fields';
-
-export { PluginSidebar as __experimentalModalBlockEditorPluginSidebar } from './iframe-editor';
-export { PluginMoreMenuItem as __experimentalModalBlockEditorPluginMoreMenuItem } from './iframe-editor';
-
-export {
- ComboboxControl as __experimentalComboboxControl,
- type ComboboxControlProps,
-} from './combobox-control';
diff --git a/packages/js/product-editor/src/components/label/label.tsx b/packages/js/product-editor/src/components/label/label.tsx
deleted file mode 100644
index 1bdbecc95bf..00000000000
--- a/packages/js/product-editor/src/components/label/label.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- createInterpolateElement,
- isValidElement,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Icon, help as helpIcon } from '@wordpress/icons';
-import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-
-export interface LabelProps {
- label: string;
- labelId?: string;
- required?: boolean;
- note?: string;
- tooltip?: string;
- onClick?: ( event: React.MouseEvent ) => void;
-}
-
-export const Label = ( {
- label,
- labelId,
- required,
- tooltip,
- note,
- onClick,
-}: LabelProps ) => {
- let labelElement: JSX.Element | string = label;
-
- if ( required ) {
- if ( note?.length ) {
- labelElement = createInterpolateElement(
- __( '<label/> <note /> <required/>', 'woocommerce' ),
- {
- label: (
- <span
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( label ),
- } }
- ></span>
- ),
- note: (
- <span className="woocommerce-product-form-label__note">
- { note }
- </span>
- ),
- required: (
- <span
- aria-hidden="true"
- className="woocommerce-product-form-label__required"
- >
- { /* translators: field 'required' indicator */ }
- { __( '*', 'woocommerce' ) }
- </span>
- ),
- }
- );
- } else {
- labelElement = createInterpolateElement(
- __( '<label/> <required/>', 'woocommerce' ),
- {
- label: <span>{ label }</span>,
- required: (
- <span
- aria-hidden="true"
- className="woocommerce-product-form-label__required"
- >
- { /* translators: field 'required' indicator */ }
- { __( '*', 'woocommerce' ) }
- </span>
- ),
- }
- );
- }
- } else if ( note?.length ) {
- labelElement = createInterpolateElement(
- __( '<label/> <note />', 'woocommerce' ),
- {
- label: <span>{ label }</span>,
- note: (
- <span className="woocommerce-product-form-label__note">
- { note }
- </span>
- ),
- }
- );
- }
-
- const spanAdditionalProps =
- typeof labelElement === 'string'
- ? { dangerouslySetInnerHTML: { __html: sanitizeHTML( label ) } }
- : {};
-
- return (
- <div className="woocommerce-product-form-label__label">
- { /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
- <span id={ labelId } onClick={ onClick } { ...spanAdditionalProps }>
- { isValidElement( labelElement ) ? labelElement : null }
- </span>
-
- { tooltip && (
- <Tooltip
- text={
- <span
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( tooltip ),
- } }
- ></span>
- }
- position="top center"
- className="woocommerce-product-form-label__tooltip"
- >
- <span className="woocommerce-product-form-label__icon">
- <Icon icon={ helpIcon } size={ 18 } fill="#949494" />
- </span>
- </Tooltip>
- ) }
- </div>
- );
-};
diff --git a/packages/js/product-editor/src/components/label/stories/label.story.tsx b/packages/js/product-editor/src/components/label/stories/label.story.tsx
deleted file mode 100644
index c9018d9d520..00000000000
--- a/packages/js/product-editor/src/components/label/stories/label.story.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createElement } from 'react';
-
-/**
- * Internal dependencies
- */
-import { Label, LabelProps } from '../label';
-
-export default {
- title: 'Product Editor/components/Label',
- component: Label,
- args: {
- label: 'sku',
- required: true,
- note: __( '(stock keeping unit)', 'woocommerce' ),
- tooltip: __( 'Visit woo.com', 'woocommerce' ),
- },
-};
-
-export const Default = ( args: LabelProps ) => <Label { ...args } />;
diff --git a/packages/js/product-editor/src/components/label/style.scss b/packages/js/product-editor/src/components/label/style.scss
deleted file mode 100644
index b1f42430cd4..00000000000
--- a/packages/js/product-editor/src/components/label/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.woocommerce-product-form-label {
- &__label {
- display: flex;
- align-items: center;
- gap: 2px;
- color: $gray-900;
- text-transform: uppercase;
- }
-
- &__note {
- color: $gray-700;
- }
-
- &__required {
- color: #CC1818;
- }
-
- &__tooltip {
- .components-popover__content {
- width: 200px;
- min-width: auto;
- white-space: normal !important;
- }
- }
-
- &__icon {
- display: flex;
- align-items: center;
- height: 1rem;
- }
-}
diff --git a/packages/js/product-editor/src/components/manage-download-limits-modal/index.ts b/packages/js/product-editor/src/components/manage-download-limits-modal/index.ts
deleted file mode 100644
index e9492234518..00000000000
--- a/packages/js/product-editor/src/components/manage-download-limits-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './manage-download-limits-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/manage-download-limits-modal/manage-download-limits-modal.tsx b/packages/js/product-editor/src/components/manage-download-limits-modal/manage-download-limits-modal.tsx
deleted file mode 100644
index 1015e488011..00000000000
--- a/packages/js/product-editor/src/components/manage-download-limits-modal/manage-download-limits-modal.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * External dependencies
- */
-import { FormEvent } from 'react';
-import clsx from 'clsx';
-import { useInstanceId } from '@wordpress/compose';
-import { createElement, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { BaseControl, Button, Modal } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { ManageDownloadLimitsModalProps } from './types';
-import { NumberControl } from '../number-control';
-
-const DOWNLOAD_LIMIT_MIN = 0;
-const DOWNLOAD_LIMIT_MAX = 10_000_000_000;
-const DOWNLOAD_EXPIRY_MIN = 0;
-const DOWNLOAD_EXPIRY_MAX = 10_000_000_000;
-
-/**
- * Download limit and download expiry currently support
- * `-1`, `0`/`null` and a positive integer.
- * When the value is `-1` downloads can be unlimited.
- * When the value is `0` or `null` downloads are unabled.
- * When the value is greater then `0` downloads are fixed
- * to the amount set as value.
- *
- * @param value The amount of downloads
- * @return A valid number as string or empty
- */
-function getInitialValue( value: number | null ): string {
- if ( value === null ) {
- return '0';
- }
- if ( value === -1 ) {
- return '';
- }
- return String( value );
-}
-
-export function ManageDownloadLimitsModal( {
- initialValue,
- onSubmit,
- onClose,
-}: ManageDownloadLimitsModalProps ) {
- const [ downloadLimit, setDownloadLimit ] = useState< string >(
- getInitialValue( initialValue.downloadLimit )
- );
- const [ downloadExpiry, setDownloadExpiry ] = useState< string >(
- getInitialValue( initialValue.downloadExpiry )
- );
- const [ errors, setErrors ] = useState< Record< string, string > >( {} );
-
- function validateDownloadLimit() {
- if ( downloadLimit && ! Number.isInteger( Number( downloadLimit ) ) ) {
- setErrors( ( current ) => ( {
- ...current,
- downloadLimit: __(
- 'Download limit must be an integer number',
- 'woocommerce'
- ),
- } ) );
- return false;
- }
-
- if ( Number.parseInt( downloadLimit, 10 ) < DOWNLOAD_LIMIT_MIN ) {
- setErrors( ( current ) => ( {
- ...current,
- downloadLimit: sprintf(
- // translators: %d is the minimum value of the number input.
- __(
- 'Download limit must be greater than or equal to %d',
- 'woocommerce'
- ),
- DOWNLOAD_LIMIT_MIN
- ),
- } ) );
- return false;
- }
-
- setErrors( ( { downloadLimit: _, ...current } ) => current );
- return true;
- }
-
- function validateDownloadExpiry() {
- if (
- downloadExpiry &&
- ! Number.isInteger( Number( downloadExpiry ) )
- ) {
- setErrors( ( current ) => ( {
- ...current,
- downloadExpiry: __(
- 'Expiry period must be an integer number',
- 'woocommerce'
- ),
- } ) );
- return false;
- }
-
- if ( Number.parseInt( downloadExpiry, 10 ) < DOWNLOAD_EXPIRY_MIN ) {
- setErrors( ( current ) => ( {
- ...current,
- downloadExpiry: sprintf(
- // translators: %d is the minimum value of the number input.
- __(
- 'Expiry period must be greater than or equal to %d',
- 'woocommerce'
- ),
- DOWNLOAD_EXPIRY_MIN
- ),
- } ) );
- return false;
- }
-
- setErrors( ( { downloadExpiry: _, ...current } ) => current );
- return true;
- }
-
- const downloadLimitProps = {
- value: downloadLimit,
- onChange: setDownloadLimit,
- id: useInstanceId(
- BaseControl,
- 'product_download_limit_field'
- ) as string,
- min: DOWNLOAD_LIMIT_MIN,
- max: DOWNLOAD_LIMIT_MAX,
- className: clsx( {
- 'has-error': errors.downloadLimit,
- } ),
- label: __( 'Download limit', 'woocommerce' ),
- help: __(
- 'Decide how many times customers can download files after purchasing the product. Leave blank for unlimited re-downloads.',
- 'woocommerce'
- ),
- error: errors.downloadLimit,
- placeholder: __( 'Unlimited', 'woocommerce' ),
- suffix: __( 'times', 'woocommerce' ),
-
- onBlur() {
- validateDownloadLimit();
- },
- };
-
- const downloadExpiryProps = {
- value: downloadExpiry,
- onChange: setDownloadExpiry,
- id: useInstanceId(
- BaseControl,
- 'product_download_expiry_field'
- ) as string,
- min: DOWNLOAD_EXPIRY_MIN,
- max: DOWNLOAD_EXPIRY_MAX,
- className: clsx( {
- 'has-error': errors.downloadExpiry,
- } ),
- label: __( 'Expiry period', 'woocommerce' ),
- help: __(
- 'Decide how long customers can access the files after purchasing the product. Leave blank for unlimited access.',
- 'woocommerce'
- ),
- error: errors.downloadExpiry,
- placeholder: __( 'Unlimited', 'woocommerce' ),
- suffix: __( 'days', 'woocommerce' ),
- onBlur() {
- validateDownloadExpiry();
- },
- };
-
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- const isDownloadLimitValid = validateDownloadLimit();
- const isDownloadExpiryValid = validateDownloadExpiry();
-
- if ( isDownloadLimitValid && isDownloadExpiryValid ) {
- onSubmit( {
- downloadLimit:
- downloadLimit === ''
- ? -1
- : Number.parseInt( downloadLimit, 10 ),
- downloadExpiry:
- downloadExpiry === ''
- ? -1
- : Number.parseInt( downloadExpiry, 10 ),
- } );
- }
- }
-
- function handleCancelClick() {
- onClose();
- }
-
- return (
- <Modal
- title={ __( 'Manage download limits', 'woocommerce' ) }
- className="woocommerce-manage-download-limits-modal"
- onRequestClose={ onClose }
- >
- <form noValidate onSubmit={ handleSubmit }>
- <div className="woocommerce-manage-download-limits-modal__content">
- <NumberControl { ...downloadLimitProps } />
-
- <NumberControl { ...downloadExpiryProps } />
- </div>
-
- <div className="woocommerce-manage-download-limits-modal__actions">
- <Button
- variant="tertiary"
- type="button"
- onClick={ handleCancelClick }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button variant="primary" type="submit">
- { __( 'Save', 'woocommerce' ) }
- </Button>
- </div>
- </form>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/manage-download-limits-modal/style.scss b/packages/js/product-editor/src/components/manage-download-limits-modal/style.scss
deleted file mode 100644
index c22152842ee..00000000000
--- a/packages/js/product-editor/src/components/manage-download-limits-modal/style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.woocommerce-manage-download-limits-modal {
- @include breakpoint(">600px") {
- width: calc(100% - 32px);
- }
-
- @include breakpoint(">782px") {
- width: 640px;
-
- .components-input-control__container {
- width: 50%;
- }
- }
-
- &__input-suffix {
- margin-right: $grid-unit-15;
- }
-
- &__content {
- .components-base-control {
- .components-input-control__container {
- .components-input-control__input {
- min-height: 36px;
- }
- }
- }
-
- .components-base-control.has-error {
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
- }
-
- &__actions {
- margin-top: $grid-unit-30;
- display: flex;
- flex-direction: row;
- gap: 8px;
- justify-content: flex-end;
- }
-}
diff --git a/packages/js/product-editor/src/components/manage-download-limits-modal/types.ts b/packages/js/product-editor/src/components/manage-download-limits-modal/types.ts
deleted file mode 100644
index 5c6375862fb..00000000000
--- a/packages/js/product-editor/src/components/manage-download-limits-modal/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type PartialEntity = {
- downloadLimit: number | null;
- downloadExpiry: number | null;
-};
-
-export type ManageDownloadLimitsModalProps = {
- initialValue: PartialEntity;
- onSubmit( value: PartialEntity ): void;
- onClose(): void;
-};
diff --git a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/index.ts b/packages/js/product-editor/src/components/menu-items/media-library-menu-item/index.ts
deleted file mode 100644
index 154d679d17a..00000000000
--- a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './media-library-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/media-library-menu-item.tsx b/packages/js/product-editor/src/components/menu-items/media-library-menu-item/media-library-menu-item.tsx
deleted file mode 100644
index 0845d28ce20..00000000000
--- a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/media-library-menu-item.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { media } from '@wordpress/icons';
-import { MediaUpload } from '@wordpress/media-utils';
-
-/**
- * Internal dependencies
- */
-import type { MediaLibraryMenuItemProps } from './types';
-
-export function MediaLibraryMenuItem( {
- icon,
- iconPosition,
- text,
- info,
- ...props
-}: MediaLibraryMenuItemProps ) {
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const mediaUploadProps = props as any;
- return (
- <MediaUpload
- { ...mediaUploadProps }
- render={ ( { open }: { open: () => void } ) => (
- <MenuItem
- icon={ icon ?? media }
- iconPosition={ iconPosition ?? 'left' }
- onClick={ open }
- info={
- info ??
- __( 'Choose from uploaded media', 'woocommerce' )
- }
- >
- { text ?? __( 'Media Library', 'woocommerce' ) }
- </MenuItem>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/types.ts b/packages/js/product-editor/src/components/menu-items/media-library-menu-item/types.ts
deleted file mode 100644
index effbb1ec29b..00000000000
--- a/packages/js/product-editor/src/components/menu-items/media-library-menu-item/types.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem as DropdownMenuItem } from '@wordpress/components';
-
-/**
- * Props for MediaUpload component.
- * Defined locally because the native @wordpress/media-utils
- * no longer exports a Props namespace on MediaUpload.
- */
-interface MediaUploadBaseProps {
- allowedTypes?: string[];
- gallery?: boolean;
- multiple?: boolean | 'add';
- title?: string;
- modalClass?: string;
- value?: number | number[];
- onSelect?: ( value: unknown ) => void;
-}
-
-export type MediaLibraryMenuItemProps = Omit<
- MediaUploadBaseProps,
- 'render' | 'onChange'
-> &
- Omit< React.ComponentProps< typeof DropdownMenuItem >, 'onSelect' > & {
- text?: string;
- };
diff --git a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/index.ts b/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/index.ts
deleted file mode 100644
index 022460cde79..00000000000
--- a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './upload-files-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/types.ts b/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/types.ts
deleted file mode 100644
index d51979f6138..00000000000
--- a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/types.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import {
- FormFileUpload,
- MenuItem as DropdownMenuItem,
-} from '@wordpress/components';
-import type { Attachment } from '@wordpress/media-utils';
-import { MediaUploaderErrorCallback } from '@woocommerce/components';
-
-/**
- * Minimal subset of uploadMedia options used by this component.
- * Defined locally because UploadMediaOptions is not exported
- * from the native @wordpress/media-utils package.
- */
-interface UploadMediaOptionsSubset {
- additionalData?: Record< string, unknown >;
- allowedTypes?: string[];
- maxUploadFileSize?: number;
- wpAllowedMimeTypes?: Record< string, string > | null;
-}
-
-export type UploadFilesMenuItemProps = Omit<
- React.ComponentProps< typeof FormFileUpload >,
- 'children' | 'render' | 'onChange'
-> &
- React.ComponentProps< typeof DropdownMenuItem > &
- Partial<
- Pick<
- UploadMediaOptionsSubset,
- | 'additionalData'
- | 'allowedTypes'
- | 'maxUploadFileSize'
- | 'wpAllowedMimeTypes'
- >
- > & {
- onUploadProgress?( files: Attachment[] ): void;
- onUploadSuccess( files: Attachment[] ): void;
- onUploadError: MediaUploaderErrorCallback;
- text?: string;
- };
diff --git a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/upload-files-menu-item.tsx b/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/upload-files-menu-item.tsx
deleted file mode 100644
index 8e3f840954e..00000000000
--- a/packages/js/product-editor/src/components/menu-items/upload-files-menu-item/upload-files-menu-item.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import type { ChangeEvent } from 'react';
-import { FormFileUpload, MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { upload } from '@wordpress/icons';
-import { uploadMedia } from '@wordpress/media-utils';
-import type { Attachment } from '@wordpress/media-utils';
-
-/**
- * Internal dependencies
- */
-import type { UploadFilesMenuItemProps } from './types';
-
-export function UploadFilesMenuItem( {
- // UploadMediaOptions
- allowedTypes,
- maxUploadFileSize,
- wpAllowedMimeTypes,
- additionalData,
- // MenuItem.Props
- icon,
- iconPosition,
- text,
- info,
- // Handlers
- onUploadProgress,
- onUploadSuccess,
- onUploadError,
- // FormFileUpload.Props
- ...props
-}: UploadFilesMenuItemProps ) {
- const resolvedMaxUploadFileSize =
- maxUploadFileSize ||
- window.productBlockEditorSettings?.maxUploadFileSize ||
- 10 * 1024 * 1024; // 10 MB by default if not set and not provided by the settings
-
- function handleFormFileUploadChange(
- event: ChangeEvent< HTMLInputElement >
- ) {
- const filesList = Array.from( event.currentTarget.files ?? [] );
-
- uploadMedia( {
- allowedTypes,
- filesList,
- maxUploadFileSize: resolvedMaxUploadFileSize,
- additionalData,
- wpAllowedMimeTypes: wpAllowedMimeTypes ?? undefined,
- onFileChange( files ) {
- const isUploading = files.some( ( file ) => ! file.id );
-
- if ( isUploading ) {
- onUploadProgress?.( files as Attachment[] );
- return;
- }
-
- onUploadSuccess( files as Attachment[] );
- },
- // Native OnErrorHandler expects (error: Error) => void, but our callback uses a richer type.
- onError: onUploadError as unknown as ( error: Error ) => void,
- } );
- }
-
- return (
- <FormFileUpload
- { ...props }
- onChange={ handleFormFileUploadChange }
- render={ ( { openFileDialog } ) => (
- <MenuItem
- icon={ icon ?? upload }
- iconPosition={ iconPosition ?? 'left' }
- onClick={ openFileDialog }
- info={
- info ??
- __( 'Select files from your device', 'woocommerce' )
- }
- >
- { text ?? __( 'Upload', 'woocommerce' ) }
- </MenuItem>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/modal-editor-welcome-guide/default.js b/packages/js/product-editor/src/components/modal-editor-welcome-guide/default.js
deleted file mode 100644
index 6d2f5ddeb38..00000000000
--- a/packages/js/product-editor/src/components/modal-editor-welcome-guide/default.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { ExternalLink, Guide } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
- createInterpolateElement,
- createElement,
- Fragment,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import WelcomeGuideImage from './image';
-
-export default function WelcomeGuideDefault() {
- const { toggle } = useDispatch( 'core/preferences' );
-
- return (
- <Guide
- className="edit-post-welcome-guide"
- contentLabel={ __( 'Welcome to the block editor', 'woocommerce' ) }
- finishButtonText={ __( 'Get started', 'woocommerce' ) }
- onFinish={ () => toggle( 'core/edit-post', 'welcomeGuide' ) }
- pages={ [
- {
- image: (
- <WelcomeGuideImage
- nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-canvas.svg"
- animatedSrc="https://s.w.org/images/block-editor/welcome-canvas.gif"
- />
- ),
- content: (
- <>
- <h1 className="edit-post-welcome-guide__heading">
- { __(
- 'Welcome to the block editor',
- 'woocommerce'
- ) }
- </h1>
- <p className="edit-post-welcome-guide__text">
- { __(
- 'In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.',
- 'woocommerce'
- ) }
- </p>
- </>
- ),
- },
- {
- image: (
- <WelcomeGuideImage
- nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-editor.svg"
- animatedSrc="https://s.w.org/images/block-editor/welcome-editor.gif"
- />
- ),
- content: (
- <>
- <h1 className="edit-post-welcome-guide__heading">
- { __(
- 'Make each block your own',
- 'woocommerce'
- ) }
- </h1>
- <p className="edit-post-welcome-guide__text">
- { __(
- 'Each block comes with its own set of controls for changing things like color, width, and alignment. These will show and hide automatically when you have a block selected.',
- 'woocommerce'
- ) }
- </p>
- </>
- ),
- },
- {
- image: (
- <WelcomeGuideImage
- nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-library.svg"
- animatedSrc="https://s.w.org/images/block-editor/welcome-library.gif"
- />
- ),
- content: (
- <>
- <h1 className="edit-post-welcome-guide__heading">
- { __(
- 'Get to know the block library',
- 'woocommerce'
- ) }
- </h1>
- <p className="edit-post-welcome-guide__text">
- { createInterpolateElement(
- __(
- 'All of the blocks available to you live in the block library. You’ll find it wherever you see the <InserterIconImage /> icon.',
- 'woocommerce'
- ),
- {
- InserterIconImage: (
- <img
- alt={ __(
- 'inserter',
- 'woocommerce'
- ) }
- src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='2' fill='%231E1E1E'/%3E%3Cpath d='M9.22727 4V14M4 8.77273H14' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A"
- />
- ),
- }
- ) }
- </p>
- </>
- ),
- },
- {
- image: (
- <WelcomeGuideImage
- nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
- animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
- />
- ),
- content: (
- <>
- <h1 className="edit-post-welcome-guide__heading">
- { __(
- 'Learn how to use the block editor',
- 'woocommerce'
- ) }
- </h1>
- <p className="edit-post-welcome-guide__text">
- { __(
- 'New to the block editor? Want to learn more about using it? ',
- 'woocommerce'
- ) }
- <ExternalLink
- href={ __(
- 'https://wordpress.org/documentation/article/wordpress-block-editor/',
- 'woocommerce'
- ) }
- >
- { __(
- "Here's a detailed guide.",
- 'woocommerce'
- ) }
- </ExternalLink>
- </p>
- </>
- ),
- },
- ] }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/modal-editor-welcome-guide/image.js b/packages/js/product-editor/src/components/modal-editor-welcome-guide/image.js
deleted file mode 100644
index c362adec68d..00000000000
--- a/packages/js/product-editor/src/components/modal-editor-welcome-guide/image.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-
-import { createElement } from '@wordpress/element';
-
-export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
- return (
- <picture className="edit-post-welcome-guide__image">
- <source
- srcSet={ nonAnimatedSrc }
- media="(prefers-reduced-motion: reduce)"
- />
- <img src={ animatedSrc } width="312" height="240" alt="" />
- </picture>
- );
-}
diff --git a/packages/js/product-editor/src/components/modal-editor-welcome-guide/index.js b/packages/js/product-editor/src/components/modal-editor-welcome-guide/index.js
deleted file mode 100644
index 8867b2c539c..00000000000
--- a/packages/js/product-editor/src/components/modal-editor-welcome-guide/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import WelcomeGuideDefault from './default';
-
-/**
- * The components from this directory are copied from gutenberg.
- * They are used to show the welcome guide if the user opens the block editor for the first time from the product editor.
- * Ideally it should be exposed from gutenberg and we should use it from there.
- */
-
-export default function ModalEditorWelcomeGuide() {
- const { isActive } = useSelect( ( select ) => {
- const { get } = select( 'core/preferences' );
- return {
- isActive: get( 'core/edit-post', 'welcomeGuide' ),
- };
- }, [] );
-
- if ( ! isActive ) {
- return null;
- }
-
- return <WelcomeGuideDefault />;
-}
diff --git a/packages/js/product-editor/src/components/modal-editor-welcome-guide/style.scss b/packages/js/product-editor/src/components/modal-editor-welcome-guide/style.scss
deleted file mode 100644
index cd068199ceb..00000000000
--- a/packages/js/product-editor/src/components/modal-editor-welcome-guide/style.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.edit-post-welcome-guide,
-.edit-template-welcome-guide {
- width: 312px;
-
- &__image {
- background: #00a0d2;
- margin: 0 0 $grid-unit-20;
- > img {
- display: block;
- max-width: 100%;
- object-fit: cover;
- }
- }
-
- &__heading {
- font-family: $default-font;
- font-size: 24px;
- line-height: 1.4;
- margin: $grid-unit-20 0 $grid-unit-20 0;
- padding: 0 $grid-unit-40;
- }
-
- &__text {
- font-size: $default-font-size;
- line-height: 1.4;
- margin: 0 0 $grid-unit-30 0;
- padding: 0 $grid-unit-40;
- }
-
- &__inserter-icon {
- margin: 0 4px;
- vertical-align: text-top;
- }
- .components-guide__footer {
- box-sizing: border-box;
- }
-}
-
-.edit-template-welcome-guide {
- .components-button svg {
- fill: $white;
- }
-}
diff --git a/packages/js/product-editor/src/components/modal-editor/index.ts b/packages/js/product-editor/src/components/modal-editor/index.ts
deleted file mode 100644
index 2c721ad2d74..00000000000
--- a/packages/js/product-editor/src/components/modal-editor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './modal-editor';
diff --git a/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx b/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx
deleted file mode 100644
index 99289e089de..00000000000
--- a/packages/js/product-editor/src/components/modal-editor/modal-editor.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-import { createElement } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
- EditorSettings,
- EditorBlockListSettings,
-} from '@wordpress/block-editor';
-import { Modal } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { IframeEditor } from '../iframe-editor';
-import { wooProductEditorUiStore } from '../../store/product-editor-ui';
-
-type ModalEditorProps = {
- initialBlocks?: BlockInstance[];
- onChange?: ( blocks: BlockInstance[] ) => void;
- onClose?: () => void;
- settings?: Partial< EditorSettings & EditorBlockListSettings > | undefined;
- title: string;
- name: string;
-};
-
-export function ModalEditor( {
- initialBlocks,
- onChange,
- onClose,
- title,
- name,
-}: ModalEditorProps ) {
- const { closeModalEditor } = useDispatch( wooProductEditorUiStore );
-
- const debouncedOnChange = useDebounce( ( blocks: BlockInstance[] ) => {
- onChange?.( blocks );
- }, 250 );
-
- function handleClose() {
- const blocks = debouncedOnChange.flush();
- if ( blocks ) {
- onChange?.( blocks );
- }
- closeModalEditor();
- onClose?.();
- }
-
- return (
- <Modal
- className="woocommerce-modal-editor"
- title={ title }
- onRequestClose={ handleClose }
- shouldCloseOnClickOutside={ false }
- >
- <IframeEditor
- initialBlocks={ initialBlocks }
- onInput={ debouncedOnChange }
- onChange={ debouncedOnChange }
- onClose={ handleClose }
- name={ name }
- />
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/modal-editor/style.scss b/packages/js/product-editor/src/components/modal-editor/style.scss
deleted file mode 100644
index ab235d72f7a..00000000000
--- a/packages/js/product-editor/src/components/modal-editor/style.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$modal-editor-height: 60px;
-
-.components-modal__frame.woocommerce-modal-editor {
- width: 100%;
- height: 100%;
- max-height: calc( 100% - 40px );
- margin: $gap-large;
- @media only screen and (max-width: $break-mobile) {
- margin: unset;
- max-height: unset;
- }
- border-radius: 8px;
-
- .components-modal__header {
- height: $modal-editor-height;
- border-bottom: 1px solid $gray-400;
- padding-left: 18px;
- padding-right: 18px;
-
- .components-modal__header-heading {
- font-size: 16px;
- line-height: 24px;
- }
- }
-
- .components-modal__content {
- display: flex;
- margin-top: $modal-editor-height;
- padding: 0;
-
- & > div {
- width: 100%;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/more-menu-dropdown/index.tsx b/packages/js/product-editor/src/components/more-menu-dropdown/index.tsx
deleted file mode 100644
index 6645534fd45..00000000000
--- a/packages/js/product-editor/src/components/more-menu-dropdown/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { DropdownMenu } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Copied exactly from https://github.com/WordPress/gutenberg/blob/e89fceffab765902e0162a1e3359d88501e72005/packages/interface/src/components/more-menu-dropdown/index.js
- * to unblock progress as it was discovered to have been deleted while doing a monorepo WordPress dependencies upgrade.
- * It was deleted in https://github.com/WordPress/gutenberg/pull/59096
- */
-
-export const MoreMenuDropdown = ( {
- as: DropdownComponent = DropdownMenu,
- className,
- /* translators: button label text should, if possible, be under 16 characters. */
- label = __( 'Options', 'woocommerce' ),
- popoverProps,
- toggleProps,
- children,
-}: {
- as?: React.ElementType;
- className?: string;
- label?: string;
- popoverProps?: Record< string, unknown > & { className?: string };
- toggleProps?: Record< string, unknown >;
- children: ( onClose: () => void ) => React.ReactNode;
-} ) => {
- return (
- <DropdownComponent
- className={ clsx( 'interface-more-menu-dropdown', className ) }
- icon={ moreVertical }
- label={ label }
- popoverProps={ {
- placement: 'bottom-end',
- ...popoverProps,
- className: clsx(
- 'interface-more-menu-dropdown__content',
- popoverProps?.className
- ),
- } }
- toggleProps={ {
- tooltipPosition: 'bottom',
- ...toggleProps,
- size: 'compact',
- } }
- >
- { ( { onClose }: { onClose: () => void } ) => children( onClose ) }
- </DropdownComponent>
- );
-};
diff --git a/packages/js/product-editor/src/components/more-menu-dropdown/style.scss b/packages/js/product-editor/src/components/more-menu-dropdown/style.scss
deleted file mode 100644
index a2b9b148167..00000000000
--- a/packages/js/product-editor/src/components/more-menu-dropdown/style.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.interface-more-menu-dropdown {
- margin-left: -4px;
-
- // the padding and margin of the more menu is intentionally non-standard
- .components-button {
- width: auto;
- padding: 0 2px;
- }
-
- @include break-small() {
- margin-left: 0;
-
- .components-button {
- padding: 0 4px;
- }
- }
-}
-
-.interface-more-menu-dropdown__content .components-popover__content {
- min-width: 300px;
-
- // Let the menu scale to fit items.
- @include break-mobile() {
- max-width: $break-mobile;
- }
-
- .components-dropdown-menu__menu {
- padding: 0;
- }
-}
-
-.components-popover.interface-more-menu-dropdown__content {
- z-index: z-index(".components-popover.interface-more-menu__content");
-}
diff --git a/packages/js/product-editor/src/components/notice/index.ts b/packages/js/product-editor/src/components/notice/index.ts
deleted file mode 100644
index 6351718c3ef..00000000000
--- a/packages/js/product-editor/src/components/notice/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './notice';
diff --git a/packages/js/product-editor/src/components/notice/notice.tsx b/packages/js/product-editor/src/components/notice/notice.tsx
deleted file mode 100644
index e0378aa18dc..00000000000
--- a/packages/js/product-editor/src/components/notice/notice.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { ReactNode } from 'react';
-import { createElement } from '@wordpress/element';
-import clsx from 'clsx';
-import { Button } from '@wordpress/components';
-import { closeSmall } from '@wordpress/icons';
-
-export type NoticeProps = {
- title?: string;
- content?: string | ReactNode;
- className?: string;
- type?: 'error-type' | 'success' | 'warning' | 'info';
- children?: ReactNode;
- isDismissible?: boolean;
- handleDismiss?: () => void;
-};
-
-export function Notice( {
- title = '',
- content = '',
- className,
- type = 'info',
- children,
- isDismissible = false,
- handleDismiss = () => {},
-}: NoticeProps ) {
- return (
- <div
- className={ clsx( className, type, 'woocommerce-product-notice', {
- 'is-dismissible': isDismissible,
- } ) }
- >
- { title && (
- <h3 className="woocommerce-product-notice__title">{ title }</h3>
- ) }
- { content && (
- <p className="woocommerce-product-notice__content">
- { content }
- </p>
- ) }
- <div className="woocommerce-product-notice__content">
- { children }
- </div>
- { isDismissible && (
- <Button
- className="woocommerce-product-notice__dismiss"
- icon={ closeSmall }
- onClick={ handleDismiss }
- />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/notice/style.scss b/packages/js/product-editor/src/components/notice/style.scss
deleted file mode 100644
index c825738f4f5..00000000000
--- a/packages/js/product-editor/src/components/notice/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.woocommerce-product-notice {
- padding: $gap-small $gap;
- p {
- color: $gray-900;
- letter-spacing: 0.24px;
- }
- button {
- letter-spacing: 0.24px;
- }
- &.info {
- background-color: #f0f6fc;
- }
- &.is-dismissible {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-}
-
diff --git a/packages/js/product-editor/src/components/number-control/index.tsx b/packages/js/product-editor/src/components/number-control/index.tsx
deleted file mode 100644
index e78e8db1ec5..00000000000
--- a/packages/js/product-editor/src/components/number-control/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './number-control';
diff --git a/packages/js/product-editor/src/components/number-control/number-control.tsx b/packages/js/product-editor/src/components/number-control/number-control.tsx
deleted file mode 100644
index 4f9638ec0a0..00000000000
--- a/packages/js/product-editor/src/components/number-control/number-control.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- forwardRef,
- Fragment,
- isValidElement,
- useEffect,
- useRef,
- useState,
-} from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import clsx from 'clsx';
-import { plus, reset } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import type { ForwardedRef } from 'react';
-import {
- BaseControl,
- Button,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useNumberInputProps } from '../../hooks/use-number-input-props';
-import { Label } from '../label/label';
-
-export type NumberProps = {
- id?: string;
- value: string;
- onChange: ( selected: string ) => void;
- label: string | JSX.Element;
- suffix?: string;
- help?: string;
- error?: string;
- placeholder?: string;
- onBlur?: () => void;
- onFocus?: () => void;
- required?: boolean;
- tooltip?: string;
- disabled?: boolean;
- step?: number;
- min?: number;
- max?: number;
-};
-
-const MEDIUM_DELAY = 500;
-const SHORT_DELAY = 100;
-
-export const NumberControl = forwardRef(
- (
- {
- id,
- value,
- onChange,
- label,
- suffix,
- help,
- error,
- onBlur,
- onFocus,
- required,
- tooltip,
- placeholder,
- disabled,
- step = 1,
- min = -Infinity,
- max = Infinity,
- }: NumberProps,
- ref: ForwardedRef< HTMLInputElement >
- ) => {
- const instanceId = useInstanceId(
- BaseControl,
- 'product_number_field'
- ) as string;
- const identifier = id ?? instanceId;
- const [ isFocused, setIsFocused ] = useState( false );
- const unfocusIfOutside = ( event: React.FocusEvent ) => {
- if (
- ! document
- .getElementById( identifier )
- ?.parentElement?.contains( event.relatedTarget )
- ) {
- setIsFocused( false );
- onBlur?.();
- }
- };
-
- function handleOnFocus() {
- setIsFocused( true );
- onFocus?.();
- }
-
- const inputProps = useNumberInputProps( {
- value: value || '',
- onChange,
- onFocus: handleOnFocus,
- min,
- max,
- } );
-
- const [ increment, setIncrement ] = useState( 0 );
-
- const timeoutRef = useRef< number | null >( null );
-
- const isInitialClick = useRef< boolean >( false );
-
- function incrementValue() {
- const newValue = parseFloat( value || '0' ) + increment;
- if ( newValue >= min && newValue <= max )
- onChange( String( newValue ) );
- }
-
- useEffect( () => {
- if ( increment !== 0 ) {
- timeoutRef.current = setTimeout(
- incrementValue,
- isInitialClick.current ? MEDIUM_DELAY : SHORT_DELAY
- );
- isInitialClick.current = false;
- } else if ( timeoutRef.current ) {
- clearTimeout( timeoutRef.current );
- }
- return () => {
- if ( timeoutRef.current ) {
- clearTimeout( timeoutRef.current );
- }
- };
- }, [ increment, value ] );
-
- function resetIncrement() {
- setIncrement( 0 );
- }
-
- function handleIncrement( thisStep: number ) {
- const newValue = parseFloat( value || '0' ) + thisStep;
- if ( newValue >= min && newValue <= max ) {
- onChange( String( parseFloat( value || '0' ) + thisStep ) );
- setIncrement( thisStep );
- isInitialClick.current = true;
- }
- }
-
- return (
- <BaseControl
- className={ clsx( {
- 'has-error': error,
- } ) }
- id={ identifier }
- label={
- isValidElement( label ) ? (
- label
- ) : (
- <Label
- label={ label as string }
- required={ required }
- tooltip={ tooltip }
- />
- )
- }
- help={ error || help }
- >
- <InputControl
- { ...inputProps }
- ref={ ref }
- step={ step }
- disabled={ disabled }
- autoComplete="off"
- id={ identifier }
- className="woocommerce-number-control"
- suffix={
- <>
- { suffix }
- { isFocused && (
- <>
- <Button
- className="woocommerce-number-control__increment"
- icon={ plus }
- disabled={
- parseFloat( value || '0' ) >= max
- }
- onMouseDown={ () =>
- handleIncrement( step )
- }
- onMouseLeave={ resetIncrement }
- onMouseUp={ resetIncrement }
- onBlur={ unfocusIfOutside }
- isSmall
- aria-hidden="true"
- aria-label={ __(
- 'Increment',
- 'woocommerce'
- ) }
- tabIndex={ -1 }
- />
- <Button
- icon={ reset }
- disabled={
- parseFloat( value || '0' ) <= min
- }
- className="woocommerce-number-control__decrement"
- onBlur={ unfocusIfOutside }
- onMouseDown={ () =>
- handleIncrement( -step )
- }
- onMouseLeave={ resetIncrement }
- onMouseUp={ resetIncrement }
- isSmall
- aria-hidden="true"
- aria-label={ __(
- 'Decrement',
- 'woocommerce'
- ) }
- tabIndex={ -1 }
- />
- </>
- ) }
- </>
- }
- placeholder={ placeholder }
- onBlur={ unfocusIfOutside }
- />
- </BaseControl>
- );
- }
-);
diff --git a/packages/js/product-editor/src/components/number-control/style.scss b/packages/js/product-editor/src/components/number-control/style.scss
deleted file mode 100644
index 1f043ffd153..00000000000
--- a/packages/js/product-editor/src/components/number-control/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.woocommerce-number-control {
- .components-input-control {
- &__suffix {
- user-select: none;
- margin-right: $gap-smaller;
- }
- &__input::placeholder {
- color: $gray-700;
- }
- &__prefix {
- margin-left: $gap-smaller;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/index.ts b/packages/js/product-editor/src/components/prepublish-panel/index.ts
deleted file mode 100644
index f212f1e5631..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './prepublish-panel';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/prepublish-panel/post-publish/index.ts b/packages/js/product-editor/src/components/prepublish-panel/post-publish/index.ts
deleted file mode 100644
index 5660c3a5fed..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/post-publish/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './post-publish-section';
-export * from './post-publish-title';
diff --git a/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-section.tsx b/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-section.tsx
deleted file mode 100644
index d30c1f88ce5..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-section.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, useState, Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button, PanelBody, TextControl } from '@wordpress/components';
-import { recordEvent } from '@woocommerce/tracks';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { Ref } from 'react';
-import { getNewPath } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { useProductScheduled } from '../../../hooks/use-product-scheduled';
-import { CopyButtonProps, PostPublishSectionProps } from './types';
-import { TRACKS_SOURCE } from '../../../constants';
-import { useProductURL } from '../../../hooks/use-product-url';
-
-export function PostPublishSection( { postType }: PostPublishSectionProps ) {
- const { getProductURL } = useProductURL( postType );
- const { isScheduled } = useProductScheduled( postType );
-
- const [ showCopyConfirmation, setShowCopyConfirmation ] =
- useState< boolean >( false );
-
- const productURL = getProductURL( isScheduled );
-
- if ( ! productURL ) return null;
-
- const CopyButton = ( { text, onCopy, children }: CopyButtonProps ) => {
- const ref = useCopyToClipboard(
- text,
- onCopy
- ) as Ref< HTMLButtonElement >;
- return (
- <Button variant="secondary" ref={ ref }>
- { children }
- </Button>
- );
- };
-
- const onCopyURL = () => {
- recordEvent( 'product_prepublish_panel', {
- source: TRACKS_SOURCE,
- action: 'copy_product_url',
- } );
- setShowCopyConfirmation( true );
- setTimeout( () => {
- setShowCopyConfirmation( false );
- }, 4000 );
- };
-
- const onSelectInput = ( event: React.FocusEvent< HTMLInputElement > ) => {
- event.target.select();
- };
-
- return (
- <PanelBody>
- <p className="post-publish-section__postpublish-subheader">
- <strong>{ __( 'What’s next?', 'woocommerce' ) }</strong>
- </p>
- <div className="post-publish-section__postpublish-post-address-container">
- { /* @ts-expect-error TextControl's upstream types require onChange even for readOnly inputs. */ }
- <TextControl
- className="post-publish-section__postpublish-post-address"
- readOnly
- label={ __( 'product address', 'woocommerce' ) }
- value={ productURL }
- onFocus={ onSelectInput }
- />
-
- <div className="post-publish-section__copy-button-wrap">
- <CopyButton text={ productURL } onCopy={ onCopyURL }>
- <>
- { showCopyConfirmation
- ? __( 'Copied!', 'woocommerce' )
- : __( 'Copy', 'woocommerce' ) }
- </>
- </CopyButton>
- </div>
- </div>
-
- <div className="post-publish-section__postpublish-buttons">
- { ! isScheduled && (
- <Button variant="primary" href={ productURL }>
- { __( 'View Product', 'woocommerce' ) }
- </Button>
- ) }
- <Button
- variant={ isScheduled ? 'primary' : 'secondary' }
- href={ getNewPath( {}, '/add-product', {} ) }
- >
- { __( 'Add New Product', 'woocommerce' ) }
- </Button>
- </div>
- </PanelBody>
- );
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-title.tsx b/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-title.tsx
deleted file mode 100644
index 829e3a532ae..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/post-publish/post-publish-title.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { createElement, createInterpolateElement } from '@wordpress/element';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { PostPublishTitleProps } from './types';
-import { useProductURL } from '../../../hooks/use-product-url';
-import { useProductScheduled } from '../../../hooks/use-product-scheduled';
-
-export function PostPublishTitle( {
- productType = 'product',
-}: PostPublishTitleProps ) {
- const { getProductURL } = useProductURL( productType );
- const { isScheduled, formattedDate } = useProductScheduled( productType );
- const [ editedProductName ] = useEntityProp< string >(
- 'postType',
- productType,
- 'name'
- );
-
- const productURLString = getProductURL( false );
- const getPostPublishedTitle = () => {
- if ( isScheduled ) {
- return createInterpolateElement(
- sprintf(
- /* translators: %s is the date when the product will be published */
- __(
- '<productURL /> is now scheduled. It will go live on %s',
- 'woocommerce'
- ),
- formattedDate
- ),
- {
- productURL: (
- <a
- className="woocommerce-product-list__product-name"
- href={ productURLString }
- target="_blank"
- rel="noreferrer"
- >
- { editedProductName }
- </a>
- ),
- }
- );
- }
- return createInterpolateElement(
- __( '<productURL /> is now live.', 'woocommerce' ),
- {
- productURL: (
- <a
- className="woocommerce-product-list__product-name"
- href={ productURLString }
- target="_blank"
- rel="noreferrer"
- >
- { editedProductName }
- </a>
- ),
- }
- );
- };
-
- return (
- <div className="woocommerce-product-publish-panel__published">
- { getPostPublishedTitle() }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/post-publish/types.ts b/packages/js/product-editor/src/components/prepublish-panel/post-publish/types.ts
deleted file mode 100644
index 1d2defaa772..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/post-publish/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type PostPublishSectionProps = {
- postType: string;
-};
-
-export type PostPublishTitleProps = {
- productType: string;
-};
-
-export type CopyButtonProps = {
- text: string;
- onCopy: () => void;
- children: JSX.Element;
-};
diff --git a/packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx b/packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx
deleted file mode 100644
index d17348fe907..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createElement, Fragment, useRef, useEffect } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { useEntityProp } from '@wordpress/core-data';
-import { closeSmall } from '@wordpress/icons';
-import clsx from 'clsx';
-import type { Product } from '@woocommerce/data';
-import { isInTheFuture } from '@wordpress/date';
-
-/**
- * Internal dependencies
- */
-import { PublishButton } from '../header/publish-button';
-import { PrepublishPanelProps } from './types';
-import { wooProductEditorUiStore } from '../../store/product-editor-ui';
-import { TRACKS_SOURCE } from '../../constants';
-import { VisibilitySection } from './visibility-section';
-import { ScheduleSection } from './schedule-section';
-import { PostPublishSection, PostPublishTitle } from './post-publish';
-
-export function PrepublishPanel( {
- productType = 'product',
- title = __( 'Are you ready to publish this product?', 'woocommerce' ),
- description = __(
- 'Double-check your settings before sharing this product with customers.',
- 'woocommerce'
- ),
-}: PrepublishPanelProps ) {
- const [ editedDate ] = useEntityProp< string >(
- 'postType',
- productType,
- 'date_created_gmt'
- );
-
- const [ productStatus, , prevStatus ] = useEntityProp<
- Product[ 'status' ]
- >( 'postType', productType, 'status' );
-
- const { closePrepublishPanel } = useDispatch( wooProductEditorUiStore );
-
- const isPublishedOrScheduled =
- productType === 'product' && prevStatus !== 'future'
- ? productStatus === 'publish'
- : true;
-
- if ( isInTheFuture( editedDate ) ) {
- title = __( 'Are you ready to schedule this product?', 'woocommerce' );
- description = __(
- 'Your product will be published at the specified date and time.',
- 'woocommerce'
- );
- }
- const panelRef = useRef< HTMLDivElement >( null );
-
- function handleClickOutside( event: MouseEvent ) {
- if (
- panelRef.current &&
- ! panelRef.current.contains( event.target as Node )
- ) {
- closePrepublishPanel();
- }
- }
-
- useEffect( () => {
- if ( ! isPublishedOrScheduled ) {
- return;
- }
- document.addEventListener( 'mouseup', handleClickOutside );
- return () => {
- document.removeEventListener( 'mouseup', handleClickOutside );
- };
- }, [ isPublishedOrScheduled ] );
-
- function getHeaderActions() {
- if ( isPublishedOrScheduled ) {
- return (
- <Button
- className="woocommerce-publish-panel-close"
- icon={ closeSmall }
- label={ __( 'Close panel', 'woocommerce' ) }
- onClick={ () => {
- recordEvent( 'product_prepublish_panel', {
- source: TRACKS_SOURCE,
- action: 'close',
- } );
- closePrepublishPanel();
- } }
- />
- );
- }
- return (
- <>
- <PublishButton productType={ productType } />
- <Button
- variant={ 'secondary' }
- onClick={ () => {
- recordEvent( 'product_prepublish_panel', {
- source: TRACKS_SOURCE,
- action: 'cancel',
- } );
- closePrepublishPanel();
- } }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- </>
- );
- }
-
- function getPanelTitle() {
- if ( isPublishedOrScheduled ) {
- return <PostPublishTitle productType={ productType } />;
- }
- return (
- <>
- <h4>{ title }</h4>
- <span>{ description }</span>
- </>
- );
- }
-
- function getPanelSections() {
- if ( isPublishedOrScheduled ) {
- return <PostPublishSection postType={ productType } />;
- }
- return (
- <>
- <VisibilitySection productType={ productType } />
- <ScheduleSection postType={ productType } />
- </>
- );
- }
-
- return (
- <div
- ref={ panelRef }
- className={ clsx( 'woocommerce-product-publish-panel', {
- 'is-published': isPublishedOrScheduled,
- } ) }
- >
- <div className="woocommerce-product-publish-panel__header">
- { getHeaderActions() }
- </div>
- <div className="woocommerce-product-publish-panel__title">
- { getPanelTitle() }
- </div>
- <div className="woocommerce-product-publish-panel__content">
- { getPanelSections() }
- </div>
- <div className="woocommerce-product-publish-panel__footer" />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/index.ts b/packages/js/product-editor/src/components/prepublish-panel/schedule-section/index.ts
deleted file mode 100644
index 693ed49b234..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './schedule-section';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/schedule-section.tsx b/packages/js/product-editor/src/components/prepublish-panel/schedule-section/schedule-section.tsx
deleted file mode 100644
index 5a07e8b3f08..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/schedule-section.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
- // @ts-expect-error __experimentalPublishDateTimePicker does not exist
- __experimentalPublishDateTimePicker as PublishDateTimePicker,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { useProductScheduled } from '../../../hooks/use-product-scheduled';
-import { isSiteSettingsTime12HourFormatted } from '../../../utils';
-import { ScheduleSectionProps } from './types';
-
-export function ScheduleSection( { postType }: ScheduleSectionProps ) {
- const { setDate, date, formattedDate } = useProductScheduled( postType );
-
- async function handlePublishDateTimePickerChange( value: string | null ) {
- await setDate( value ?? undefined );
- }
-
- return (
- <PanelBody
- initialOpen={ false }
- // @ts-expect-error title does currently support this value
- title={ [
- __( 'Publish:', 'woocommerce' ),
- <span className="editor-post-publish-panel__link" key="label">
- { formattedDate }
- </span>,
- ] }
- >
- <PublishDateTimePicker
- currentDate={ date }
- onChange={ handlePublishDateTimePickerChange }
- is12Hour={ isSiteSettingsTime12HourFormatted() }
- />
- </PanelBody>
- );
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/types.ts b/packages/js/product-editor/src/components/prepublish-panel/schedule-section/types.ts
deleted file mode 100644
index 179e83ef67b..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/schedule-section/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type ScheduleSectionProps = {
- postType: string;
-};
diff --git a/packages/js/product-editor/src/components/prepublish-panel/style.scss b/packages/js/product-editor/src/components/prepublish-panel/style.scss
deleted file mode 100644
index 50336d47040..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/style.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-@import './visibility-section/style.scss';
-
-.woocommerce-product-publish-panel {
- bottom: 0;
- right: 0;
- top: $admin-bar-height-big;
- overflow: auto;
- position: fixed;
- background: $white;
- width: 100%;
-
- @include break-medium() {
- top: 0;
- width: $sidebar-width - $border-width;
- @include reduce-motion("animation");
-
- body.is-fullscreen-mode & {
- top: 0;
- }
- }
-
- &__header {
- height: $header-height + $border-width;
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 0 $grid-unit-20;
- justify-content: right;
-
- > button {
- flex: 1;
- }
-
- .components-button {
- width: 100%;
- justify-content: center;
- }
-
- .woocommerce-publish-panel-close {
- flex: unset;
- width: unset;
- }
- }
-
- &__title {
- padding: $grid-unit-20;
- h4 {
- font-size: 14px;
- line-height: 20px;
- margin: 8px 0;
- }
- }
-
- &__content {
- // Ensure the pre-publish panel content accounts for the header and footer height.
- min-height: calc( 100% - #{ $header-height + 222px } );
- .editor-post-publish-panel__link {
- font-weight: 400;
- padding-left: $gap-smallest;
- }
- }
-
- &__footer {
- padding: $gap $grid-unit-20 $gap-largest $grid-unit-20;
- left: 0;
- width: 100%;
- min-height: $gap-largest + $gap-large;
- display: flex;
- align-items: center;
- margin-bottom: 20px;
-
- .components-base-control__field {
- margin: 0;
- }
- }
-
- .post-publish-section {
- &__postpublish-subheader {
- margin: 0 0 $gap-small;
- }
- &__postpublish-post-address-container {
- align-items: flex-end;
- display: flex;
- margin-bottom: $gap-small;
- gap: $gap;
- }
- &__postpublish-post-address {
- flex: 1;
- }
- &__copy-button-wrap {
- flex-shrink: 0;
- margin-bottom: $gap-smaller;
- }
- &__postpublish-buttons {
- display: flex;
- justify-content: space-between;
- gap: $gap-small;
- .components-button {
- padding: $gap-smaller;
- flex: 1;
- justify-content: center;
- }
- }
- }
-}
-
-.is-published {
- display: flex;
- flex-direction: column;
- .woocommerce-product-publish-panel {
- &__header, &__title {
- border-bottom: $border-width solid $gray-200;
- font-weight: 500;
- }
- &__content {
- min-height: 180px;
- flex-grow: 1;
- }
- }
-}
-
-.interface-interface-skeleton__actions {
- transform: translateX(+100%);
- animation: product-publish-panel__slide-in-animation 0.1s forwards;
- @include break-medium() {
- // Keep it open on focus to avoid conflict with navigate-regions animation.
- [role="region"]:focus & {
- transform: translateX(0%);
- }
- }
-}
-
-@keyframes product-publish-panel__slide-in-animation {
- 100% {
- transform: translateX(0%);
- }
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/types.ts b/packages/js/product-editor/src/components/prepublish-panel/types.ts
deleted file mode 100644
index 7a5d35ced35..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type PrepublishPanelProps = {
- productType: string;
- title?: string;
- description?: string;
-};
diff --git a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/index.ts b/packages/js/product-editor/src/components/prepublish-panel/visibility-section/index.ts
deleted file mode 100644
index 5b89707034b..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './visibility-section';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/style.scss b/packages/js/product-editor/src/components/prepublish-panel/visibility-section/style.scss
deleted file mode 100644
index af0f784b1e4..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/style.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.woocommerce-publish-panel-visibility {
- &__fieldset {
- legend {
- padding-bottom: $gap-large;
- }
- > div {
- padding-bottom: $gap-smaller;
- }
- .wp-block-woocommerce-product-password-fields__field {
- margin-bottom: 0;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/types.ts b/packages/js/product-editor/src/components/prepublish-panel/visibility-section/types.ts
deleted file mode 100644
index 9149fa465a0..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type VisibilitySectionProps = {
- productType: string;
-};
diff --git a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/visibility-section.tsx b/packages/js/product-editor/src/components/prepublish-panel/visibility-section/visibility-section.tsx
deleted file mode 100644
index 8170e3e713d..00000000000
--- a/packages/js/product-editor/src/components/prepublish-panel/visibility-section/visibility-section.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Product } from '@woocommerce/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { recordEvent } from '@woocommerce/tracks';
-import { CheckboxControl, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { VisibilitySectionProps } from './types';
-import { TRACKS_SOURCE } from '../../../constants';
-import { RequirePassword } from '../../require-password';
-import { CatalogVisibility } from '../../catalog-visibility';
-
-export function VisibilitySection( { productType }: VisibilitySectionProps ) {
- const [ catalogVisibility, setCatalogVisibility ] = useEntityProp<
- Product[ 'catalog_visibility' ]
- >( 'postType', productType, 'catalog_visibility' );
-
- const [ reviewsAllowed, setReviewsAllowed ] = useEntityProp<
- Product[ 'reviews_allowed' ]
- >( 'postType', productType, 'reviews_allowed' );
-
- const [ postPassword, setPostPassword ] = useEntityProp< string >(
- 'postType',
- productType,
- 'post_password'
- );
-
- function getVisibilityLabel() {
- if ( postPassword !== '' ) {
- return __( 'Password protected', 'woocommerce' );
- }
- if ( catalogVisibility === 'hidden' ) {
- return __( 'Hidden', 'woocommerce' );
- }
- return __( 'Public', 'woocommerce' );
- }
-
- return (
- <PanelBody
- initialOpen={ false }
- // @ts-expect-error PanelBody's title prop is typed as string, but it accepts an array of nodes at runtime.
- title={ [
- __( 'Visibility: ', 'woocommerce' ),
- <span className="editor-post-publish-panel__link" key="label">
- { getVisibilityLabel() }
- </span>,
- ] }
- >
- <div className="woocommerce-publish-panel-visibility">
- <fieldset className="woocommerce-publish-panel-visibility__fieldset">
- <legend className="woocommerce-publish-panel-visibility__legend">
- { __(
- 'Control how this product is viewed by customers and other site users.',
- 'woocommerce'
- ) }
- </legend>
- <CatalogVisibility
- catalogVisibility={ catalogVisibility }
- label={ __( 'Hide in product catalog', 'woocommerce' ) }
- visibility={ 'search' }
- onCheckboxChange={ setCatalogVisibility }
- />
- <CatalogVisibility
- catalogVisibility={ catalogVisibility }
- label={ __(
- 'Hide from search results',
- 'woocommerce'
- ) }
- visibility={ 'catalog' }
- onCheckboxChange={ setCatalogVisibility }
- />
- <CheckboxControl
- label={ __( 'Enable product reviews', 'woocommerce' ) }
- checked={ reviewsAllowed }
- onChange={ ( selected: boolean ) => {
- setReviewsAllowed( selected );
- recordEvent( 'product_prepublish_panel', {
- source: TRACKS_SOURCE,
- action: 'enable_product_reviews',
- value: selected,
- } );
- } }
- />
- <RequirePassword
- label={ __( 'Require a password', 'woocommerce' ) }
- postPassword={ postPassword }
- onInputChange={ setPostPassword }
- />
- </fieldset>
- </div>
- </PanelBody>
- );
-}
diff --git a/packages/js/product-editor/src/components/product-image/index.ts b/packages/js/product-editor/src/components/product-image/index.ts
deleted file mode 100644
index e654fc8476e..00000000000
--- a/packages/js/product-editor/src/components/product-image/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './product-image';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/product-image/product-image.tsx b/packages/js/product-editor/src/components/product-image/product-image.tsx
deleted file mode 100644
index 8c552ac1c59..00000000000
--- a/packages/js/product-editor/src/components/product-image/product-image.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { Product } from '@woocommerce/data';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { ProductImageProps } from './types';
-
-export function getProductImageStyle( product: Product ) {
- // @ts-expect-error @woocommerce/data's Product type is missing the `images` field (see products/types.ts).
- return product.images.length > 0
- ? {
- // @ts-expect-error @woocommerce/data's Product type is missing the `images` field (see products/types.ts).
- backgroundImage: `url(${ product.images[ 0 ].src })`,
- }
- : undefined;
-}
-
-export function ProductImage( {
- product,
- className,
- style,
- ...props
-}: ProductImageProps ) {
- return (
- <div
- aria-hidden="true"
- { ...props }
- className={ clsx( 'woocommerce-product-image', className ) }
- style={ { ...style, ...getProductImageStyle( product ) } }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/product-image/styles.scss b/packages/js/product-editor/src/components/product-image/styles.scss
deleted file mode 100644
index 75821d4570f..00000000000
--- a/packages/js/product-editor/src/components/product-image/styles.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.woocommerce-product-image {
- width: $grid-unit-40;
- height: $grid-unit-40;
- border-radius: $grid-unit-05;
- background-color: $gray-200;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
-}
diff --git a/packages/js/product-editor/src/components/product-image/types.ts b/packages/js/product-editor/src/components/product-image/types.ts
deleted file mode 100644
index 29ac62a0ebf..00000000000
--- a/packages/js/product-editor/src/components/product-image/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type ProductImageProps = React.DetailedHTMLProps<
- React.HTMLAttributes< HTMLDivElement >,
- HTMLDivElement
-> & { product: Product };
diff --git a/packages/js/product-editor/src/components/product-list/index.ts b/packages/js/product-editor/src/components/product-list/index.ts
deleted file mode 100644
index 27089e39df4..00000000000
--- a/packages/js/product-editor/src/components/product-list/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './product-list';
-export * from './types';
-export * from './skeleton';
diff --git a/packages/js/product-editor/src/components/product-list/product-list.tsx b/packages/js/product-editor/src/components/product-list/product-list.tsx
deleted file mode 100644
index 3afb82de688..00000000000
--- a/packages/js/product-editor/src/components/product-list/product-list.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall, external } from '@wordpress/icons';
-import { getNewPath } from '@woocommerce/navigation';
-import { Product } from '@woocommerce/data';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { FormattedPrice } from '../formatted-price';
-import { ProductImage } from '../product-image';
-import { ProductListProps } from './types';
-
-export function ProductList( {
- products,
- onRemove,
- onEdit,
- onPreview,
- className,
- ...props
-}: ProductListProps ) {
- function nameLinkClickHandler( product: Product ) {
- return function handleNameLinkClick() {
- if ( onEdit ) {
- onEdit( product );
- }
- };
- }
-
- function previewLinkClickHandler( product: Product ) {
- return function handlePreviewLinkClick() {
- if ( onPreview ) {
- onPreview( product );
- }
- };
- }
-
- function removeClickHandler( product: Product ) {
- return function handleRemoveClick() {
- if ( onRemove ) {
- onRemove( product );
- }
- };
- }
-
- return (
- <div
- { ...props }
- className={ clsx( 'woocommerce-product-list', className ) }
- >
- <div role="table">
- <div role="rowgroup">
- <div role="rowheader">
- <div role="columnheader">
- { __( 'Product', 'woocommerce' ) }
- </div>
- <div
- role="columnheader"
- aria-label={ __( 'Actions', 'woocommerce' ) }
- />
- </div>
- </div>
-
- <div role="rowgroup">
- { products.map( ( product ) => (
- <div role="row" key={ product.id }>
- <div role="cell">
- <ProductImage
- product={ product }
- className="woocommerce-product-list__product-image"
- />
- <div className="woocommerce-product-list__product-info">
- <a
- className="woocommerce-product-list__product-name"
- href={ getNewPath(
- {},
- `/product/${ product.id }`,
- {}
- ) }
- target="_blank"
- rel="noreferrer"
- onClick={ nameLinkClickHandler(
- product
- ) }
- >
- { product.name }
- </a>
- <FormattedPrice
- product={ product }
- className="woocommerce-product-list__product-price"
- />
- </div>
- </div>
- <div
- role="cell"
- className="woocommerce-product-list__actions"
- >
- <Button
- icon={ external }
- aria-label={ __(
- 'See product page',
- 'woocommerce'
- ) }
- href={ product.permalink }
- target="_blank"
- rel="noreferrer"
- onClick={ previewLinkClickHandler(
- product
- ) }
- />
- <Button
- icon={ closeSmall }
- aria-label={ __(
- 'Remove product',
- 'woocommerce'
- ) }
- onClick={ removeClickHandler( product ) }
- />
- </div>
- </div>
- ) ) }
- </div>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/product-list/skeleton/index.ts b/packages/js/product-editor/src/components/product-list/skeleton/index.ts
deleted file mode 100644
index 25c51ad04a6..00000000000
--- a/packages/js/product-editor/src/components/product-list/skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './skeleton';
diff --git a/packages/js/product-editor/src/components/product-list/skeleton/skeleton.tsx b/packages/js/product-editor/src/components/product-list/skeleton/skeleton.tsx
deleted file mode 100644
index 72bbb857638..00000000000
--- a/packages/js/product-editor/src/components/product-list/skeleton/skeleton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-export function Skeleton() {
- return (
- <div
- aria-hidden="true"
- aria-label={ __( 'Loading linked products', 'woocommerce' ) }
- className="woocommerce-product-list"
- >
- <div role="table">
- <div role="rowgroup">
- <div role="rowheader">
- <div role="columnheader">
- <div className="skeleton" />
- </div>
- <div role="columnheader" />
- </div>
- </div>
- <div role="rowgroup">
- { Array.from( { length: 3 } ).map( ( _, index ) => (
- <div role="row" key={ index }>
- <div role="cell">
- <div className="woocommerce-product-list__product-image skeleton" />
- <div className="woocommerce-product-list__product-info">
- <div className="woocommerce-product-list__product-name skeleton"></div>
- <div className="woocommerce-product-list__product-price skeleton" />
- </div>
- </div>
- <div
- role="cell"
- className="woocommerce-product-list__actions"
- >
- <div className="skeleton" />
- <div className="skeleton" />
- </div>
- </div>
- ) ) }
- </div>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/product-list/skeleton/style.scss b/packages/js/product-editor/src/components/product-list/skeleton/style.scss
deleted file mode 100644
index 81a0a169c47..00000000000
--- a/packages/js/product-editor/src/components/product-list/skeleton/style.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.woocommerce-product-list {
- @mixin skeleton {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- }
-
- .skeleton {
- @include skeleton();
- }
-
- [role="columnheader"] .skeleton {
- width: $grid-unit-80;
- }
-
- &__product-image.skeleton {
- width: $grid-unit-40;
- height: $grid-unit-40;
- }
-
- &__product-name.skeleton {
- width: 100px;
- }
-
- &__product-price.skeleton {
- width: 80px;
- }
-
- &__actions .skeleton {
- width: $grid-unit-40;
- height: $grid-unit-40;
- }
-}
diff --git a/packages/js/product-editor/src/components/product-list/styles.scss b/packages/js/product-editor/src/components/product-list/styles.scss
deleted file mode 100644
index 83305f4b2ce..00000000000
--- a/packages/js/product-editor/src/components/product-list/styles.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import "./skeleton/style.scss";
-
-.woocommerce-product-list {
- [role="table"] {
- width: 100%;
-
- [role="rowheader"],
- [role="row"] {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- padding: $grid-unit-20 0;
- }
-
- [role="rowheader"] {
- padding-top: $grid-unit-05;
- }
-
- [role="row"] {
- border-top: 1px solid $gray-200;
- min-height: $grid-unit-80;
-
- [role="cell"]:first-child {
- gap: 12px;
- }
- }
-
- [role="columnheader"] {
- text-transform: uppercase;
- color: $gray-700;
- font-size: 11px;
- font-weight: 500;
- line-height: $grid-unit-20;
- text-align: left;
- }
-
- [role="columnheader"],
- [role="cell"] {
- display: flex;
- align-items: center;
-
- &:first-child {
- grid-column: 1 / span 3;
- }
- }
- }
-
- &__product-image {
- flex-shrink: 0;
- }
-
- &__product-info {
- display: flex;
- overflow: hidden;
- flex-direction: column;
- gap: 2px;
- }
-
- &__product-name {
- text-overflow: ellipsis;
- overflow: hidden;
- text-wrap: nowrap;
-
- &:focus,
- &:focus-visible {
- box-shadow: none;
- outline: 2px solid var(--wp-admin-theme-color);
- outline-offset: -2px;
- border-radius: 2px;
- }
- }
-
- &__product-price {
- font-size: 11px;
- color: $gray-700;
- }
-
- &__actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: $grid-unit;
-
- svg {
- color: $gray-700;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/product-list/types.ts b/packages/js/product-editor/src/components/product-list/types.ts
deleted file mode 100644
index 7f01a59c71a..00000000000
--- a/packages/js/product-editor/src/components/product-list/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type ProductListProps = React.DetailedHTMLProps<
- React.HTMLAttributes< HTMLDivElement >,
- HTMLDivElement
-> & {
- products: Product[];
- onRemove?( product: Product ): void;
- onEdit?( product: Product ): void;
- onPreview?( product: Product ): void;
-};
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/index.ts b/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/index.ts
deleted file mode 100644
index f4de7d72492..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './product-mvp-feedback-modal-container';
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/product-mvp-feedback-modal-container.tsx b/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/product-mvp-feedback-modal-container.tsx
deleted file mode 100644
index 0e2603ffdbf..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal-container/product-mvp-feedback-modal-container.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { createElement } from '@wordpress/element';
-import { STORE_KEY } from '@woocommerce/customer-effort-score';
-import { recordEvent } from '@woocommerce/tracks';
-import { getAdminLink, getSetting } from '@woocommerce/settings';
-import { useFormContext } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { ProductMVPFeedbackModal } from '../product-mvp-feedback-modal';
-
-export const ProductMVPFeedbackModalContainer = ( {
- productId: _productId,
-}: {
- productId?: number;
-} ) => {
- const { values } = useFormContext< Product >();
- const { hideProductMVPFeedbackModal } = useDispatch( STORE_KEY );
- const { isProductMVPModalVisible } = useSelect( ( select ) => {
- const { isProductMVPFeedbackModalVisible } = select( STORE_KEY );
- return {
- isProductMVPModalVisible: isProductMVPFeedbackModalVisible(),
- };
- }, [] );
-
- const productId = _productId ?? values?.id;
-
- const { _feature_nonce } = getSetting< { _feature_nonce: string } >(
- 'admin',
- {}
- );
-
- const classicEditorUrl = productId
- ? getAdminLink(
- `post.php?post=${ productId }&action=edit&product_block_editor=0&_feature_nonce=${ _feature_nonce }`
- )
- : getAdminLink(
- `post-new.php?post_type=product&product_block_editor=0&_feature_nonce=${ _feature_nonce }`
- );
-
- const recordScore = (
- checked: string[],
- comments: string,
- email: string
- ) => {
- recordEvent( 'product_mvp_feedback', {
- action: 'disable',
- checked,
- comments: comments || '',
- email,
- } );
- hideProductMVPFeedbackModal();
- window.location.href = `${ classicEditorUrl }&new-product-experience-disabled=true`;
- };
-
- const onCloseModal = () => {
- recordEvent( 'product_mvp_feedback', {
- action: 'cancel',
- checked: '',
- comments: '',
- } );
- hideProductMVPFeedbackModal();
- };
-
- const onSkipFeedback = () => {
- recordEvent( 'product_mvp_feedback', {
- action: 'disable',
- checked: '',
- comments: 'Feedback skipped',
- } );
- hideProductMVPFeedbackModal();
- window.location.href = classicEditorUrl;
- };
-
- if ( ! isProductMVPModalVisible ) {
- return null;
- }
-
- return (
- <ProductMVPFeedbackModal
- recordScoreCallback={ recordScore }
- onCloseModal={ onCloseModal }
- onSkipFeedback={ onSkipFeedback }
- />
- );
-};
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal/index.ts b/packages/js/product-editor/src/components/product-mvp-feedback-modal/index.ts
deleted file mode 100644
index 994e19165ca..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './product-mvp-feedback-modal';
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal/product-mvp-feedback-modal.tsx b/packages/js/product-editor/src/components/product-mvp-feedback-modal/product-mvp-feedback-modal.tsx
deleted file mode 100644
index a93f739fd6e..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal/product-mvp-feedback-modal.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * External dependencies
- */
-import {
- createElement,
- createInterpolateElement,
- Fragment,
- useState,
-} from '@wordpress/element';
-import {
- CheckboxControl,
- TextareaControl,
- TextControl,
-} from '@wordpress/components';
-import { FeedbackModal } from '@woocommerce/customer-effort-score';
-import { Text } from '@woocommerce/experimental';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-
-export type ProductMVPFeedbackModalProps = {
- recordScoreCallback: (
- checked: string[],
- comments: string,
- email: string
- ) => void;
- onCloseModal?: () => void;
- onSkipFeedback?: () => void;
-};
-
-/**
- * Provides a modal requesting customer feedback.
- *
- * @param {Object} props Component props.
- * @param {Function} props.recordScoreCallback Function to call when the results are sent.
- * @param {Function} props.onCloseModal Function to call when user closes the modal by clicking the X.
- * @param {Function} props.onSkipFeedback Function to call when user skips sending feedback.
- */
-export function ProductMVPFeedbackModal( {
- recordScoreCallback,
- onCloseModal,
- onSkipFeedback,
-}: ProductMVPFeedbackModalProps ) {
- const [ missingFeatures, setMissingFeatures ] = useState( false );
- const [ missingPlugins, setMissingPlugins ] = useState( false );
- const [ difficultToUse, setDifficultToUse ] = useState( false );
- const [ slowBuggyOrBroken, setSlowBuggyOrBroken ] = useState( false );
- const [ other, setOther ] = useState( false );
- const checkboxes = [
- {
- key: 'missing-features',
- label: __( 'Missing features', 'woocommerce' ),
- checked: missingFeatures,
- onChange: setMissingFeatures,
- },
- {
- key: 'missing-plugins',
- label: __( 'Missing plugins', 'woocommerce' ),
- checked: missingPlugins,
- onChange: setMissingPlugins,
- },
- {
- key: 'difficult-to-use',
- label: __( "It's difficult to use", 'woocommerce' ),
- checked: difficultToUse,
- onChange: setDifficultToUse,
- },
- {
- key: 'slow-buggy-or-broken',
- label: __( "It's slow, buggy, or broken", 'woocommerce' ),
- checked: slowBuggyOrBroken,
- onChange: setSlowBuggyOrBroken,
- },
- {
- key: 'other',
- label: __( 'Other (describe below)', 'woocommerce' ),
- checked: other,
- onChange: setOther,
- },
- ];
- const [ comments, setComments ] = useState( '' );
- const [ email, setEmail ] = useState( '' );
- const checked = checkboxes
- .filter( ( checkbox ) => checkbox.checked )
- .map( ( checkbox ) => checkbox.key );
-
- const { createSuccessNotice } = useDispatch( 'core/notices' );
-
- const onSendFeedback = () => {
- recordScoreCallback( checked, comments, email );
- createSuccessNotice(
- __(
- "Thanks for the feedback — we'll put it to good use!",
- 'woocommerce'
- )
- );
- };
-
- const optionalElement = (
- <span className="woocommerce-product-mvp-feedback-modal__optional">
- { __( '(optional)', 'woocommerce' ) }
- </span>
- );
-
- return (
- <FeedbackModal
- title={ __(
- 'Thanks for trying out the new product editor!',
- 'woocommerce'
- ) }
- onSubmit={ onSendFeedback }
- onCancel={ onSkipFeedback }
- onModalClose={ onCloseModal }
- isSubmitButtonDisabled={ ! checked.length }
- submitButtonLabel={ __( 'Send', 'woocommerce' ) }
- cancelButtonLabel={ __( 'Skip', 'woocommerce' ) }
- className="woocommerce-product-mvp-feedback-modal"
- >
- <>
- <Text
- variant="subtitle.small"
- as="p"
- weight="600"
- size="14"
- lineHeight="20px"
- ></Text>
- <fieldset className="woocommerce-product-mvp-feedback-modal__reason">
- <legend>
- { __(
- 'What made you turn off the new product editor?',
- 'woocommerce'
- ) }
- </legend>
- <div className="woocommerce-product-mvp-feedback-modal__checkboxes">
- { checkboxes.map( ( checkbox, index ) => (
- <CheckboxControl
- key={ index }
- label={ checkbox.label }
- name={ checkbox.key }
- checked={ checkbox.checked }
- onChange={ checkbox.onChange }
- />
- ) ) }
- </div>
- </fieldset>
-
- <div className="woocommerce-product-mvp-feedback-modal__comments">
- <TextareaControl
- label={ createInterpolateElement(
- __(
- 'Additional thoughts <optional/>',
- 'woocommerce'
- ),
- {
- optional: optionalElement,
- }
- ) }
- value={ comments }
- onChange={ ( value: string ) => setComments( value ) }
- rows={ 5 }
- />
- </div>
- <div className="woocommerce-product-mvp-feedback-modal__email">
- <TextControl
- label={ createInterpolateElement(
- __(
- 'Your email address <optional/>',
- 'woocommerce'
- ),
- {
- optional: optionalElement,
- }
- ) }
- value={ email }
- onChange={ ( value: string ) => setEmail( value ) }
- help={ __(
- 'In case you want to participate in further discussion and future user research.',
- 'woocommerce'
- ) }
- />
- </div>
- </>
- </FeedbackModal>
- );
-}
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal/style.scss b/packages/js/product-editor/src/components/product-mvp-feedback-modal/style.scss
deleted file mode 100644
index 8f3755ebd6e..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal/style.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-$modal-header-height: 84px;
-
-.woocommerce-product-mvp-feedback-modal {
- width: 600px;
-
- .components-modal__header {
- height: $modal-header-height;
-
- &-heading {
- font-weight: 500;
- font-size: 20px;
- }
- }
-
- .components-modal__content {
- margin-top: $modal-header-height;
- padding-bottom: 32px;
- }
-
- legend,
- label {
- color: $gray-900;
- }
-
- .woocommerce-product-mvp-feedback-modal__optional {
- color: $gray-700;
- }
-
- legend {
- font-size: 11px;
- font-weight: 500;
- line-height: 1.4;
- text-transform: uppercase;
- display: inline-block;
- margin-bottom: $gap-small;
- padding: 0;
- }
-
- &__subtitle {
- margin-top: $gap-smaller !important;
- }
-
- &__checkboxes {
- display: grid;
- grid-template-columns: 1fr 1fr;
- }
-
- &__comments {
- margin-top: 2em;
- margin-bottom: 1.5em;
-
- textarea {
- width: 100%;
- }
- }
-
- &__reason,
- &__comments,
- &__email {
- margin-bottom: $gap-large;
- }
-}
diff --git a/packages/js/product-editor/src/components/product-mvp-feedback-modal/test/index.tsx b/packages/js/product-editor/src/components/product-mvp-feedback-modal/test/index.tsx
deleted file mode 100644
index 429a35d0335..00000000000
--- a/packages/js/product-editor/src/components/product-mvp-feedback-modal/test/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import {
- render,
- screen,
- fireEvent,
- act,
- waitFor,
-} from '@testing-library/react';
-import { createElement } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { ProductMVPFeedbackModal } from '../index';
-
-const mockRecordScoreCallback = jest.fn();
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- useDispatch: jest.fn(),
-} ) );
-
-describe( 'ProductMVPFeedbackModal', () => {
- const createSuccessNotice = jest.fn();
-
- beforeEach( () => {
- ( useDispatch as jest.Mock ).mockReturnValue( { createSuccessNotice } );
- } );
-
- afterEach( () => {
- jest.resetAllMocks();
- } );
-
- it( 'should close the ProductMVPFeedback modal when X button pressed', async () => {
- render(
- <ProductMVPFeedbackModal
- recordScoreCallback={ mockRecordScoreCallback }
- />
- );
- // Wait for the modal to render.
- await screen.findByRole( 'dialog' );
- // Press cancel button.
- fireEvent.click( screen.getByRole( 'button', { name: /Close/i } ) );
- await waitFor( () => {
- expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
- } );
- } );
- it( 'should enable Send button when an option is checked', async () => {
- render(
- <ProductMVPFeedbackModal
- recordScoreCallback={ mockRecordScoreCallback }
- />
- );
- // Wait for the modal to render.
- await screen.findByRole( 'dialog' );
- fireEvent.click( screen.getByRole( 'checkbox', { name: /other/i } ) );
- fireEvent.click( screen.getByRole( 'button', { name: /Send/i } ) );
- } );
- it( 'should call the function sent as recordScoreCallback with the checked options', async () => {
- render(
- <ProductMVPFeedbackModal
- recordScoreCallback={ mockRecordScoreCallback }
- />
- );
- // Wait for the modal to render.
- await screen.findByRole( 'dialog' );
- act( () => {
- fireEvent.click(
- screen.getByRole( 'checkbox', { name: /other/i } )
- );
- } );
- act( () => {
- fireEvent.click( screen.getByRole( 'button', { name: /Send/i } ) );
- } );
-
- expect( mockRecordScoreCallback ).toHaveBeenCalledWith(
- [ 'other' ],
- '',
- ''
- );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/product-section-layout/index.ts b/packages/js/product-editor/src/components/product-section-layout/index.ts
deleted file mode 100644
index 9c670115867..00000000000
--- a/packages/js/product-editor/src/components/product-section-layout/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './product-section-layout';
-export * from './product-field-section';
diff --git a/packages/js/product-editor/src/components/product-section-layout/product-field-section.tsx b/packages/js/product-editor/src/components/product-section-layout/product-field-section.tsx
deleted file mode 100644
index dda34549313..00000000000
--- a/packages/js/product-editor/src/components/product-section-layout/product-field-section.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { Card, CardBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { ProductSectionLayout } from './product-section-layout';
-import { WooProductFieldItem } from '../woo-product-field-item';
-
-type ProductFieldSectionProps = {
- id: string;
- title: string;
- description: string | JSX.Element;
- className?: string;
-};
-
-export const ProductFieldSection = ( {
- id,
- title,
- description,
- className,
- children,
-}: React.PropsWithChildren< ProductFieldSectionProps > ) => (
- <ProductSectionLayout
- title={ title }
- description={ description }
- className={ className }
- >
- <Card>
- <CardBody>
- { children }
- <WooProductFieldItem.Slot section={ id } />
- </CardBody>
- </Card>
- </ProductSectionLayout>
-);
diff --git a/packages/js/product-editor/src/components/product-section-layout/product-section-layout.tsx b/packages/js/product-editor/src/components/product-section-layout/product-section-layout.tsx
deleted file mode 100644
index 3740ed8c5d8..00000000000
--- a/packages/js/product-editor/src/components/product-section-layout/product-section-layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { Children, isValidElement, createElement } from '@wordpress/element';
-import { FormSection } from '@woocommerce/components';
-
-interface ProductSectionLayoutProps {
- title: string;
- description: string | JSX.Element;
- className?: string;
-}
-
-export const ProductSectionLayout = ( {
- title,
- description,
- className,
- children,
-}: React.PropsWithChildren< ProductSectionLayoutProps > ) => (
- <FormSection
- title={ title }
- description={ description }
- className={ className }
- >
- { Children.map( children, ( child ) => {
- if ( isValidElement( child ) && child.props.onChange ) {
- return <div className="product-field-layout">{ child }</div>;
- }
- return child;
- } ) }
- </FormSection>
-);
diff --git a/packages/js/product-editor/src/components/product-section-layout/style.scss b/packages/js/product-editor/src/components/product-section-layout/style.scss
deleted file mode 100644
index a66b19fd035..00000000000
--- a/packages/js/product-editor/src/components/product-section-layout/style.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.woocommerce-form-section {
- a {
- text-decoration: none;
- }
-
- &__content {
- .components-card {
- border: 1px solid $gray-400;
- border-radius: 2px;
- box-shadow: none;
- &__body {
- padding: $gap-large;
-
- .components-base-control,
- .components-dropdown {
- &:not(:first-child):not(.components-radio-control) {
- margin-top: $gap-large - $gap-smaller;
- margin-bottom: 0;
- }
- }
- }
- }
-
- .woocommerce-product-form__field:not(:first-child) {
- margin-top: $gap-large;
-
- > .components-base-control {
- margin-bottom: 0;
- }
- }
-
- .components-radio-control .components-v-stack {
- gap: $gap-small;
- }
-
- .woocommerce-collapsible-content {
- margin-top: $gap-large;
- }
- }
-
- &__header {
- p > span {
- display: block;
- margin-bottom: $gap-smaller;
- }
- }
-
- &:not(:first-child) {
- margin-top: $gap-largest;
- }
-}
diff --git a/packages/js/product-editor/src/components/product-select/index.ts b/packages/js/product-editor/src/components/product-select/index.ts
deleted file mode 100644
index c5de649f426..00000000000
--- a/packages/js/product-editor/src/components/product-select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './product-select';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/product-select/product-select.tsx b/packages/js/product-editor/src/components/product-select/product-select.tsx
deleted file mode 100644
index 8d76f4b9039..00000000000
--- a/packages/js/product-editor/src/components/product-select/product-select.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { BaseControl, Spinner } from '@wordpress/components';
-import { Product } from '@woocommerce/data';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { FormattedPrice } from '../formatted-price';
-import { ProductImage } from '../product-image';
-import { ProductSelectProps } from './types';
-import {
- ComboboxControl,
- type ComboboxControlOption,
-} from '../combobox-control';
-
-/**
- * Map the product item to the Combobox core option.
- *
- * @param {Product} attr - Product item.
- * @return {ComboboxControlOption} Combobox option.
- */
-function mapItemToOption(
- attr: Product
-): ComboboxControlOption & { product?: Product } {
- return {
- label: attr.name,
- value: `attr-${ attr.id }`,
- product: attr,
- };
-}
-
-/**
- * ComboboxControlOption component.
- *
- * @return {JSX.Element} Component item.
- */
-function ComboboxControlOption( props: {
- item: ComboboxControlOption & { product?: Product };
-} ): JSX.Element {
- const { item } = props;
- return (
- <div className="woocommerce-product-select__menu-item">
- { item.product && (
- <ProductImage
- product={ item.product }
- className="woocommerce-product-select__menu-item-image"
- />
- ) }
- <div className="woocommerce-product-select__menu-item-content">
- <div className="woocommerce-product-select__menu-item-title">
- { item.label }
- </div>
-
- { item.product && (
- <FormattedPrice
- product={ item.product }
- className="woocommerce-product-select__menu-item-description"
- />
- ) }
- </div>
- </div>
- );
-}
-
-export function ProductSelect( {
- className,
- label,
- help,
- placeholder,
- items = [],
- isLoading = false,
- filter,
- onSelect,
-}: ProductSelectProps ) {
- const [ value, setValue ] = useState< string >( '' );
- /**
- * Map the items to the Combobox options.
- * Each option is an object with a label and value.
- * Both are strings.
- */
- const options: Array< ComboboxControlOption & { product?: Product } > =
- items?.map( mapItemToOption );
-
- const comboRef = useRef< HTMLInputElement | null >( null );
-
- // Label to link the input with the label.
- const [ labelFor, setLabelFor ] = useState< string >( '' );
-
- useEffect( () => {
- if ( ! comboRef?.current ) {
- return;
- }
-
- /*
- * Hack to set the base control ID,
- * to link the label with the input,
- * picking the input ID from the ComboboxControl.
- */
- const id = comboRef.current.getAttribute( 'id' );
- if ( comboRef.current && typeof id === 'string' ) {
- setLabelFor( id );
- }
- }, [] );
-
- if ( placeholder && ! help ) {
- help = placeholder;
- }
-
- if ( ! help ) {
- help = (
- <div className="woocommerce-product-combobox-help">
- { __( 'Search for products', 'woocommerce' ) }
- </div>
- );
-
- if ( isLoading ) {
- help = (
- <div className="woocommerce-product-combobox-help">
- <Spinner />
- { __( 'Loading…', 'woocommerce' ) }
- </div>
- );
- }
- }
-
- return (
- <div
- className={ clsx(
- 'woocommerce-product-select',
- {
- 'no-items': ! options.length,
- },
- className
- ) }
- >
- <BaseControl label={ label } help={ help } id={ labelFor }>
- <ComboboxControl
- className="woocommerce-product-combobox"
- allowReset={ false }
- options={ options }
- value={ value }
- ref={ comboRef }
- onChange={ ( newValue ) => {
- if ( ! newValue ) {
- return;
- }
-
- const selectedProduct = items?.find(
- ( item ) =>
- item.id ===
- Number( newValue.replace( 'attr-', '' ) )
- );
-
- if ( ! selectedProduct ) {
- return;
- }
-
- if ( onSelect ) {
- onSelect( selectedProduct );
- }
- } }
- onFilterValueChange={ ( searchValue: string ) => {
- setValue( searchValue );
- filter( searchValue );
- } }
- __experimentalRenderItem={ ComboboxControlOption }
- />
- </BaseControl>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/product-select/styles.scss b/packages/js/product-editor/src/components/product-select/styles.scss
deleted file mode 100644
index b85c364a603..00000000000
--- a/packages/js/product-editor/src/components/product-select/styles.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.woocommerce-product-combobox {
- position: relative;
- background-color: white;
-
- .components-base-control__field {
- height: 36px;
- }
- .components-form-token-field__suggestions-list {
- max-height: 260px;
- }
-
- .components-combobox-control__suggestions-container {
- position: absolute;
- padding: 0;
- background-color: white;
-
- > .components-flex {
- height: 34px;
- }
- }
-
- .components-form-token-field__suggestion {
- padding: 0;
- min-height: 32px;
- display: flex;
- align-items: center;
-
- .item-wrapper {
- padding: 0 12px;
- height: 36px;
- line-height: 36px;
- width: 100%;
-
- &.is-disabled {
- background-color: #fafafa;
- color: #949494;
- cursor: default;
- }
- }
-
- &.is-selected .item-wrapper .is-disabled {
- background-color: #fafafa;
- }
- }
-
- .woocommerce-product-select__menu-item {
- display: flex;
- align-items: center;
- padding: $grid-unit;
- gap: $grid-unit + $grid-unit-05;
-
- &-image {
- flex-shrink: 0;
- }
-
- &-content {
- display: flex;
- flex-direction: column;
- gap: 2px;
- }
-
- &-title {
- color: $gray-900;
- }
-
- &-description {
- color: $gray-700;
- font-size: 11px;
- }
- }
-
- .woocommerce-experimental-select-control__combo-box-wrapper {
- margin-bottom: 0;
- }
- .woocommerce-product-combobox-help {
- display: flex;
- align-items: center;
-
- > svg {
- fill: #949494;
- }
-
- .components-spinner {
- margin: 0 4px 0 0;
- padding: 2px;
- width: 18px;
- height: 18px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/product-select/types.ts b/packages/js/product-editor/src/components/product-select/types.ts
deleted file mode 100644
index 58a20f8bb24..00000000000
--- a/packages/js/product-editor/src/components/product-select/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type ProductSelectProps = {
- className?: string;
- placeholder?: string;
- label?: string;
- help?: JSX.Element | string | null;
- selected: Product | Product[] | null;
- items: Product[];
- instanceNumber?: number;
- isLoading?: boolean;
- onAddNew?: ( value: string ) => void;
- filter( value?: string ): Promise< Product[] > | void;
- onSelect?( product: Product ): void;
-};
-
-export type ComboboxControlProductSelectOption = {
- label: string;
- value: string;
- product: Product;
-};
diff --git a/packages/js/product-editor/src/components/radio-field/index.ts b/packages/js/product-editor/src/components/radio-field/index.ts
deleted file mode 100644
index a7c6224836d..00000000000
--- a/packages/js/product-editor/src/components/radio-field/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './radio-field';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/radio-field/radio-field.tsx b/packages/js/product-editor/src/components/radio-field/radio-field.tsx
deleted file mode 100644
index adcd8fc2c7d..00000000000
--- a/packages/js/product-editor/src/components/radio-field/radio-field.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { RadioControl } from '@wordpress/components';
-import clsx from 'clsx';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-import { RadioFieldProps } from './types';
-
-export function RadioField( {
- title,
- description,
- className,
- ...props
-}: RadioFieldProps ) {
- return (
- <RadioControl
- { ...props }
- className={ clsx( className, 'woocommerce-radio-field' ) }
- label={
- <>
- <span className="woocommerce-radio-field__title">
- { title }
- </span>
- { description && (
- <span
- className="woocommerce-radio-field__description"
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( description ),
- } }
- />
- ) }
- </>
- }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/radio-field/style.scss b/packages/js/product-editor/src/components/radio-field/style.scss
deleted file mode 100644
index 0d2b2f0006c..00000000000
--- a/packages/js/product-editor/src/components/radio-field/style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.woocommerce-radio-field {
- .components-base-control__label {
- text-transform: none;
- font-weight: 400;
- > span {
- display: block;
- line-height: 1.5;
- }
- margin-bottom: $gap-small;
- }
-
- &__title {
- font-size: 11px;
- font-weight: 500;
- color: #1e1e1e;
- text-transform: uppercase;
- }
-
- &__description {
- font-size: 13px;
- color: $gray-700;
- }
-
- .components-base-control__field > .components-v-stack {
- gap: $gap;
- }
-}
diff --git a/packages/js/product-editor/src/components/radio-field/types.ts b/packages/js/product-editor/src/components/radio-field/types.ts
deleted file mode 100644
index 8b4c7a2fa6a..00000000000
--- a/packages/js/product-editor/src/components/radio-field/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import { RadioControl } from '@wordpress/components';
-
-export type RadioFieldProps = Omit<
- typeof RadioControl,
- 'label' | 'value' | 'options'
-> & {
- title: string;
- description?: string;
- disabled?: boolean;
- className?: string;
- onChange( value: string ): void;
- selected?: string;
- options: {
- label: string;
- value: string;
- }[];
-};
diff --git a/packages/js/product-editor/src/components/remove-confirmation-modal/index.ts b/packages/js/product-editor/src/components/remove-confirmation-modal/index.ts
deleted file mode 100644
index 4ef03cd96f5..00000000000
--- a/packages/js/product-editor/src/components/remove-confirmation-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './remove-confirmation-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/remove-confirmation-modal/remove-confirmation-modal.tsx b/packages/js/product-editor/src/components/remove-confirmation-modal/remove-confirmation-modal.tsx
deleted file mode 100644
index 916dd0d7dd1..00000000000
--- a/packages/js/product-editor/src/components/remove-confirmation-modal/remove-confirmation-modal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createElement, useState } from '@wordpress/element';
-import { Button, Modal } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { RemoveConfirmationModalProps } from './types';
-
-export function RemoveConfirmationModal( {
- title,
- description,
- onCancel,
- onRemove,
-}: RemoveConfirmationModalProps ) {
- const [ isRemoving, setIsRemoving ] = useState( false );
-
- async function handleRemoveClick() {
- try {
- setIsRemoving( true );
-
- await onRemove();
- } finally {
- setIsRemoving( false );
- }
- }
-
- return (
- <Modal
- title={ title }
- onRequestClose={ ( event ) => {
- if ( event && ! event.isPropagationStopped() && onCancel ) {
- onCancel();
- }
- } }
- className="woocommerce-remove-confirmation-modal"
- >
- <div className="woocommerce-remove-confirmation-modal__content">
- { description }
- </div>
-
- <div className="woocommerce-remove-confirmation-modal__buttons">
- <Button
- isDestructive
- variant="primary"
- isBusy={ isRemoving }
- onClick={ handleRemoveClick }
- >
- { __( 'Delete', 'woocommerce' ) }
- </Button>
- <Button variant="tertiary" onClick={ onCancel }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/remove-confirmation-modal/style.scss b/packages/js/product-editor/src/components/remove-confirmation-modal/style.scss
deleted file mode 100644
index 02581aaae01..00000000000
--- a/packages/js/product-editor/src/components/remove-confirmation-modal/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.woocommerce-remove-confirmation-modal {
- max-width: 650px;
-
- &__content {
- padding-bottom: $grid-unit-40;
- }
-
- &__buttons {
- display: flex;
- flex-direction: row;
- gap: $grid-unit;
- justify-content: flex-end;
- }
-}
diff --git a/packages/js/product-editor/src/components/remove-confirmation-modal/types.ts b/packages/js/product-editor/src/components/remove-confirmation-modal/types.ts
deleted file mode 100644
index 78a224f7922..00000000000
--- a/packages/js/product-editor/src/components/remove-confirmation-modal/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type RemoveConfirmationModalProps = {
- title: string;
- description: React.ReactNode;
- onRemove(): void | Promise< void >;
- onCancel?(): void;
-};
diff --git a/packages/js/product-editor/src/components/require-password/index.ts b/packages/js/product-editor/src/components/require-password/index.ts
deleted file mode 100644
index d994e3a1e3d..00000000000
--- a/packages/js/product-editor/src/components/require-password/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './require-password';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/require-password/require-password.tsx b/packages/js/product-editor/src/components/require-password/require-password.tsx
deleted file mode 100644
index dbf52346cb5..00000000000
--- a/packages/js/product-editor/src/components/require-password/require-password.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import {
- createElement,
- Fragment,
- useEffect,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import {
- BaseControl,
- CheckboxControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { RequirePasswordProps } from './types';
-import { TRACKS_SOURCE } from '../../constants';
-
-export function RequirePassword( {
- label,
- postPassword,
- onInputChange,
-}: RequirePasswordProps ) {
- const postPasswordId = useInstanceId(
- BaseControl,
- 'post_password'
- ) as string;
-
- const [ isPasswordRequired, setPasswordRequired ] = useState(
- Boolean( postPassword )
- );
-
- useEffect( () => {
- if ( ! isPasswordRequired && postPassword !== '' ) {
- setPasswordRequired( true );
- }
- }, [ postPassword ] );
-
- return (
- <>
- <CheckboxControl
- label={ label }
- checked={ isPasswordRequired }
- className="wp-block-woocommerce-product-password-fields__field"
- onChange={ ( selected ) => {
- recordEvent( 'product_catalog_require_password', {
- source: TRACKS_SOURCE,
- value: selected,
- } );
- setPasswordRequired( selected );
- if ( ! selected ) {
- onInputChange( '' );
- }
- } }
- />
- { isPasswordRequired && (
- <BaseControl
- id={ postPasswordId }
- label={ __( 'Password', 'woocommerce' ) }
- >
- <InputControl
- id={ postPasswordId }
- value={ postPassword }
- onChange={ ( value ) => {
- onInputChange( value ?? '' );
- } }
- />
- </BaseControl>
- ) }
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/require-password/styles.scss b/packages/js/product-editor/src/components/require-password/styles.scss
deleted file mode 100644
index 56ea9a89256..00000000000
--- a/packages/js/product-editor/src/components/require-password/styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.wp-block-woocommerce-product-password-fields {
- &__field {
- margin-bottom: $gap;
- }
-}
diff --git a/packages/js/product-editor/src/components/require-password/types.ts b/packages/js/product-editor/src/components/require-password/types.ts
deleted file mode 100644
index 7cd145d51de..00000000000
--- a/packages/js/product-editor/src/components/require-password/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type RequirePasswordProps = {
- label: string;
- postPassword: string;
- onInputChange: ( value: string ) => void;
-};
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/index.ts b/packages/js/product-editor/src/components/schedule-publish-modal/index.ts
deleted file mode 100644
index 6714045a96d..00000000000
--- a/packages/js/product-editor/src/components/schedule-publish-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './schedule-publish-modal';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx b/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx
deleted file mode 100644
index 7a425e559be..00000000000
--- a/packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, DateTimePicker, Modal } from '@wordpress/components';
-import { createElement, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import {
- getSiteDatetime,
- isSiteSettingsTime12HourFormatted,
-} from '../../utils';
-import { SchedulePublishModalProps } from './types';
-
-export function SchedulePublishModal( {
- postType,
- title = __( 'Schedule product', 'woocommerce' ),
- description = __(
- 'Decide when this product should become visible to customers.',
- 'woocommerce'
- ),
- value,
- className,
- onCancel,
- onSchedule,
- isScheduling,
- ...props
-}: SchedulePublishModalProps ) {
- const [ date, setDate ] = useState< string | undefined >(
- () => value ?? getSiteDatetime()
- );
-
- function handleDateTimePickerChange( newDate?: string | null ) {
- setDate( newDate ?? '' );
- }
-
- return (
- <Modal
- { ...props }
- title={ title }
- className={ clsx(
- className,
- 'woocommerce-schedule-publish-modal'
- ) }
- onRequestClose={ () => onCancel?.() }
- >
- <p className="woocommerce-schedule-publish-modal__description">
- { description }
- </p>
-
- <div className="woocommerce-schedule-publish-modal__content">
- <div className="woocommerce-schedule-publish-modal__button-now">
- <strong>{ __( 'Publish', 'woocommerce' ) }</strong>
-
- <Button
- variant="link"
- onClick={ () =>
- handleDateTimePickerChange( getSiteDatetime() )
- }
- >
- { __( 'Now', 'woocommerce' ) }
- </Button>
- </div>
-
- <DateTimePicker
- currentDate={ date }
- onChange={ handleDateTimePickerChange }
- is12Hour={ isSiteSettingsTime12HourFormatted() }
- />
- </div>
-
- <div className="woocommerce-schedule-publish-modal__buttons">
- <Button variant="tertiary" onClick={ onCancel }>
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- variant="primary"
- isBusy={ isScheduling }
- disabled={ isScheduling }
- onClick={ () => onSchedule?.( date ) }
- >
- { __( 'Schedule', 'woocommerce' ) }
- </Button>
- </div>
- </Modal>
- );
-}
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/style.scss b/packages/js/product-editor/src/components/schedule-publish-modal/style.scss
deleted file mode 100644
index df7c668d2d0..00000000000
--- a/packages/js/product-editor/src/components/schedule-publish-modal/style.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.woocommerce-schedule-publish-modal {
- &__content {
- .components-datetime__time {
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- gap: $grid-unit-20;
-
- fieldset {
- margin-bottom: 0;
-
- .components-base-control {
- margin-bottom: 0;
- }
- }
- }
- }
-
- &__button-now {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: $grid-unit-20;
- }
-
- &__buttons {
- display: flex;
- justify-content: flex-end;
- gap: $grid-unit;
- padding-top: 5 * $grid-unit;
- }
-}
diff --git a/packages/js/product-editor/src/components/schedule-publish-modal/types.ts b/packages/js/product-editor/src/components/schedule-publish-modal/types.ts
deleted file mode 100644
index 398796c071f..00000000000
--- a/packages/js/product-editor/src/components/schedule-publish-modal/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { Modal } from '@wordpress/components';
-
-export type SchedulePublishModalProps = Omit<
- React.ComponentProps< typeof Modal >,
- 'children' | 'title' | 'onRequestClose' | 'value'
-> & {
- postType: string;
- title?: string;
- description?: string;
- value?: string;
- onCancel?(): void;
- onSchedule?( value?: string ): void;
- isScheduling?: boolean;
-};
diff --git a/packages/js/product-editor/src/components/section-header/index.ts b/packages/js/product-editor/src/components/section-header/index.ts
deleted file mode 100644
index cb18787d68e..00000000000
--- a/packages/js/product-editor/src/components/section-header/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './section-header';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/section-header/section-header.tsx b/packages/js/product-editor/src/components/section-header/section-header.tsx
deleted file mode 100644
index 20c103857ec..00000000000
--- a/packages/js/product-editor/src/components/section-header/section-header.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
-import { sanitizeHTML } from '@woocommerce/sanitize';
-
-/**
- * Internal dependencies
- */
-import { SectionHeaderProps } from './types';
-import { BlockSlot } from '../block-slot-fill';
-
-export function SectionHeader( {
- description,
- sectionTagName,
- title,
-}: SectionHeaderProps ) {
- const HeadingTagName = sectionTagName === 'fieldset' ? 'legend' : 'div';
-
- return (
- <HeadingTagName className="wp-block-woocommerce-product-section-header__heading">
- <div className="wp-block-woocommerce-product-section-header__heading-title-wrapper">
- <h2 className="wp-block-woocommerce-product-section-header__heading-title">
- { title }
- { description && (
- <Tooltip
- className="wp-block-woocommerce-product-section-header__heading-tooltip"
- text={
- <p
- className="wp-block-woocommerce-product-section-header__heading-description"
- dangerouslySetInnerHTML={ {
- __html: sanitizeHTML( description ),
- } }
- />
- }
- position={ 'bottom center' }
- helperText={ __(
- 'View helper text',
- 'woocommerce'
- ) }
- />
- ) }
- </h2>
-
- <div className="wp-block-woocommerce-product-section-header__actions">
- <BlockSlot name={ `section-actions` } />
- </div>
- </div>
- <BlockSlot name={ `section-description` } />
- </HeadingTagName>
- );
-}
diff --git a/packages/js/product-editor/src/components/section-header/styles.scss b/packages/js/product-editor/src/components/section-header/styles.scss
deleted file mode 100644
index 8c8c8d801a2..00000000000
--- a/packages/js/product-editor/src/components/section-header/styles.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.wp-block-woocommerce-product-section {
- margin: calc(3 * $gap) 0 0;
- padding: 0 0 calc(3 * $gap);
- border-bottom: 1px solid #ddd;
-
- &:first-child {
- margin-top: calc(4 * $gap);
- }
-
- &:last-child {
- border-bottom: none;
- }
-}
-
-.wp-block-woocommerce-product-section-header {
- &__heading {
- padding: 0;
- margin: 0 0 calc(2 * $gap) 0;
- width: 100%;
-
- &-title-wrapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: $grid-unit-20;
- }
-
- &-title {
- margin: 0;
- font-size: 20px;
- font-weight: 500;
- color: $gray-900;
- display: inline-flex;
- align-items: center;
-
- .block-editor-block-icon {
- margin-right: 14px;
-
- > div {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- }
-
- &__content {
- &--block-gap-unit-20 > * + * {
- margin-top: $grid-unit-20;
- }
-
- &--block-gap-unit-30 > * + * {
- margin-top: $grid-unit-30;
- }
-
- &--block-gap-unit-40 > * + * {
- margin-top: $grid-unit-40;
- }
- }
-
- &__heading-description {
- margin: 0;
- max-width: 300px;
- }
-
- // <ActionSections /> slot.
- &__actions {
- display: flex;
- justify-content: flex-end;
- gap: $grid-unit;
-
- /*
- * Core removes the "loading" animation styles
- * from the button when it's disabled, so we
- * let's add them back.
- */
- .components-button.is-tertiary.is-busy:disabled {
- background-image: linear-gradient(
- -45deg,
- #fafafa 33%,
- #e0e0e0 0,
- #e0e0e0 70%,
- #fafafa 0
- );
- background-size: 100px 100%;
- opacity: 1;
- }
- }
-}
-
-.woocommerce-tooltip > .wp-block-woocommerce-product-section-header__heading-tooltip {
- margin-left: $gap-small;
-}
diff --git a/packages/js/product-editor/src/components/section-header/types.ts b/packages/js/product-editor/src/components/section-header/types.ts
deleted file mode 100644
index f769f8ad181..00000000000
--- a/packages/js/product-editor/src/components/section-header/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface SectionHeaderProps {
- description?: string | undefined;
- sectionTagName: string;
- title: string;
-}
diff --git a/packages/js/product-editor/src/components/shipping-dimensions-image/index.ts b/packages/js/product-editor/src/components/shipping-dimensions-image/index.ts
deleted file mode 100644
index 317ac91ce45..00000000000
--- a/packages/js/product-editor/src/components/shipping-dimensions-image/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shipping-dimensions-image';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/shipping-dimensions-image/shipping-dimensions-image.tsx b/packages/js/product-editor/src/components/shipping-dimensions-image/shipping-dimensions-image.tsx
deleted file mode 100644
index 39b07afd003..00000000000
--- a/packages/js/product-editor/src/components/shipping-dimensions-image/shipping-dimensions-image.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ShippingDimensionsImageProps } from './types';
-
-export function ShippingDimensionsImage( {
- highlight,
- labels = {},
- ...props
-}: ShippingDimensionsImageProps ) {
- return (
- <svg
- width="295"
- height="195"
- viewBox="0 0 295 195"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- { ...props }
- >
- { /* Side A */ }
- <path
- d="M11.5664 134.604V35.3599C11.5664 33.9482 12.9862 32.9782 14.3014 33.4915L99.6373 66.7959C100.4 67.0935 100.905 67.8243 100.914 68.6426L102.037 171.578C102.052 173.027 100.574 174.014 99.2419 173.444L12.7831 136.448C12.0451 136.132 11.5664 135.407 11.5664 134.604Z"
- fill={ highlight === 'A' ? '#F0F6FC' : '#FFFFFF' }
- />
- <path
- d="M11.5664 134.603V35.3599C11.5664 33.9482 12.9862 32.9782 14.3014 33.4915L99.624 66.7908C100.393 67.0909 100.9 67.8314 100.901 68.6569L101.024 174.131L12.7844 136.447C12.0457 136.132 11.5664 135.406 11.5664 134.603Z"
- stroke="#E0E0E0"
- strokeWidth="2.00574"
- />
- { /* Line A */ }
- <path
- d="M1.25977 150.388L86.0112 188.183"
- stroke={ highlight === 'A' ? '#006FAD' : '#CCCCCC' }
- strokeWidth="1.50431"
- strokeMiterlimit="16"
- />
- { /* Side B */ }
- <path
- d="M250.775 32.9793L100.9 66.9577V172.981C100.9 174.297 102.146 175.257 103.418 174.921L251.73 135.764C252.611 135.531 253.224 134.735 253.224 133.824V34.9354C253.224 33.6488 252.03 32.6948 250.775 32.9793Z"
- fill={ highlight === 'B' ? '#F0F6FC' : '#FFFFFF' }
- stroke="#E0E0E0"
- strokeWidth="2.00574"
- />
- { /* Line C */ }
- <path
- d="M270.402 28.9875V132.064"
- stroke={ highlight === 'C' ? '#006FAD' : '#CCCCCC' }
- strokeWidth="1.50431"
- strokeMiterlimit="16"
- />
- { /* Line B */ }
- <path
- d="M257.804 152.679L107.771 192.765"
- stroke={ highlight === 'B' ? '#006FAD' : '#CCCCCC' }
- strokeWidth="1.50431"
- strokeMiterlimit="16"
- />
- <path
- d="M13.1406 33.41L161.446 1.61817C161.808 1.54066 162.184 1.56462 162.533 1.68742L251.16 32.8868"
- stroke="#E0E0E0"
- strokeWidth="2.00574"
- />
- { /* Label C */ }
- { labels.C ? (
- <text
- x="280"
- y="85"
- fontSize={ 11 }
- fill={ highlight === 'C' ? '#007CBA' : '#949494' }
- >
- { labels.C }
- </text>
- ) : (
- <path
- d="M282.123 80.7892C282.123 79.5323 282.435 78.5405 283.058 77.8136C283.685 77.0867 284.537 76.7233 285.615 76.7233C286.467 76.7233 287.192 76.9739 287.79 77.4752C288.391 77.9729 288.741 78.6175 288.837 79.4088H287.639C287.525 78.9326 287.285 78.553 286.92 78.2701C286.558 77.9873 286.123 77.8458 285.615 77.8458C284.92 77.8458 284.368 78.1108 283.96 78.6407C283.556 79.1671 283.353 79.8833 283.353 80.7892C283.353 81.6915 283.556 82.4077 283.96 82.9376C284.368 83.464 284.922 83.7272 285.62 83.7272C286.132 83.7272 286.569 83.5983 286.93 83.3405C287.296 83.0826 287.532 82.7353 287.639 82.2985H288.837C288.73 83.0647 288.382 83.6824 287.795 84.1515C287.208 84.617 286.483 84.8497 285.62 84.8497C284.542 84.8497 283.69 84.4863 283.063 83.7594C282.437 83.0325 282.123 82.0424 282.123 80.7892Z"
- fill={ highlight === 'C' ? '#007CBA' : '#949494' }
- />
- ) }
-
- { /* Label B */ }
- { labels.B ? (
- <text
- x="188"
- y="190"
- fontSize={ 11 }
- fill={ highlight === 'B' ? '#007CBA' : '#949494' }
- >
- { labels.B }
- </text>
- ) : (
- <path
- d="M192.281 189.611V181.861H195.396C196.123 181.861 196.692 182.034 197.104 182.382C197.519 182.725 197.727 183.196 197.727 183.794C197.727 184.199 197.596 184.562 197.335 184.885C197.073 185.203 196.751 185.395 196.368 185.459V185.551C196.891 185.604 197.312 185.803 197.63 186.147C197.953 186.487 198.114 186.91 198.114 187.414C198.114 188.098 197.879 188.635 197.41 189.026C196.941 189.416 196.293 189.611 195.466 189.611H192.281ZM193.484 188.591H195.224C195.765 188.591 196.177 188.483 196.459 188.268C196.742 188.054 196.884 187.74 196.884 187.328C196.884 186.924 196.737 186.618 196.443 186.41C196.15 186.199 195.72 186.093 195.154 186.093H193.484V188.591ZM193.484 185.142H194.913C195.442 185.142 195.844 185.048 196.116 184.858C196.391 184.664 196.529 184.383 196.529 184.015C196.529 183.656 196.404 183.379 196.153 183.182C195.906 182.981 195.561 182.881 195.117 182.881H193.484V185.142Z"
- fill={ highlight === 'B' ? '#007CBA' : '#949494' }
- />
- ) }
-
- { /* Label A */ }
- { labels.A ? (
- <text
- x="18"
- y="185"
- fontSize={ 11 }
- fill={ highlight === 'A' ? '#007CBA' : '#949494' }
- >
- { labels.A }
- </text>
- ) : (
- <path
- d="M22.7694 185.149L25.5678 177.399H26.8622L29.6605 185.149H28.3822L27.6732 183.092H24.7191L24.0048 185.149H22.7694ZM25.0253 182.082H27.3671L26.2445 178.806H26.1532L25.0253 182.082Z"
- fill={ highlight === 'A' ? '#007CBA' : '#949494' }
- />
- ) }
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/components/shipping-dimensions-image/types.ts b/packages/js/product-editor/src/components/shipping-dimensions-image/types.ts
deleted file mode 100644
index 119c9cf5c4e..00000000000
--- a/packages/js/product-editor/src/components/shipping-dimensions-image/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type HighlightSides = 'A' | 'B' | 'C';
-
-export type ShippingDimensionsImageProps = React.SVGProps< SVGSVGElement > & {
- highlight?: HighlightSides;
- labels?: {
- A?: string | number;
- B?: string | number;
- C?: string | number;
- };
-};
diff --git a/packages/js/product-editor/src/components/tabs/constants.ts b/packages/js/product-editor/src/components/tabs/constants.ts
deleted file mode 100644
index 0b2fc863fb7..00000000000
--- a/packages/js/product-editor/src/components/tabs/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const TABS_SLOT_NAME = 'woocommerce_product_tabs';
diff --git a/packages/js/product-editor/src/components/tabs/index.ts b/packages/js/product-editor/src/components/tabs/index.ts
deleted file mode 100644
index c2d1b4e91b2..00000000000
--- a/packages/js/product-editor/src/components/tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tabs';
diff --git a/packages/js/product-editor/src/components/tabs/style.scss b/packages/js/product-editor/src/components/tabs/style.scss
deleted file mode 100644
index 0819482dab1..00000000000
--- a/packages/js/product-editor/src/components/tabs/style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.woocommerce-product-tabs {
- display: flex;
- justify-content: safe center;
- @media only screen and (max-width: 500px) {
- overflow: auto;
- }
-
- .components-button {
- padding: $gap-smaller 0 20px 0;
- margin-left: $gap-small;
- margin-right: $gap-small;
- border-bottom: 3.5px solid transparent;
- border-radius: 0;
- height: auto;
-
- @media only screen and (max-width: 500px) {
- margin-top: 2px;
- }
-
- &.is-selected {
- border-color: var(--wp-admin-theme-color);
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/tabs/tabs.tsx b/packages/js/product-editor/src/components/tabs/tabs.tsx
deleted file mode 100644
index e26d143971c..00000000000
--- a/packages/js/product-editor/src/components/tabs/tabs.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, useEffect, Fragment } from '@wordpress/element';
-import { ReactElement, ReactNode, useMemo } from 'react';
-import { NavigableMenu, Slot } from '@wordpress/components';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { select } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { getTabTracksData } from './utils/get-tab-tracks-data';
-import { TABS_SLOT_NAME } from './constants';
-
-type TabsProps = {
- selected: string | null;
- onChange: ( tabId: string ) => void;
-};
-
-export type TabsFillProps = {
- onClick: ( tabId: string ) => void;
-};
-
-function TabFills( {
- fills,
- selected,
- onChange,
-}: {
- fills: readonly ( readonly ReactElement[] )[];
- selected: string | null;
- onChange: ( tabId: string ) => void;
-} ) {
- const sortedFills = useMemo(
- function sortFillsByOrder() {
- return [ ...fills ].sort(
- ( [ { props: a } ], [ { props: b } ] ) => a.order - b.order
- );
- },
- [ fills ]
- );
-
- useEffect( () => {
- // If a tab is already selected, do nothing
- if ( selected ) {
- return;
- }
-
- // Select the first tab that is not disabled
- const firstEnabledTab = sortedFills.find( ( element ) => {
- const [ { props } ] = element;
- return ! props.disabled;
- } );
-
- const tabIdToSelect = firstEnabledTab?.[ 0 ]?.props?.children?.key;
-
- if ( tabIdToSelect ) {
- onChange( tabIdToSelect );
- }
- }, [ sortedFills, selected, onChange ] );
-
- return <>{ sortedFills }</>;
-}
-
-export function Tabs( { selected, onChange }: TabsProps ) {
- const [ productId ] = useEntityProp< number >(
- 'postType',
- 'product',
- 'id'
- );
-
- function selectTabOnNavigate( _childIndex: number, child: HTMLElement ) {
- child.focus();
- }
- function handleKeyDown( event: KeyboardEvent ) {
- const tabs = (
- event?.currentTarget as HTMLElement
- )?.querySelectorAll< HTMLButtonElement >( '[role="tab"]' );
-
- switch ( event.key ) {
- case 'Home':
- event.preventDefault();
- event.stopPropagation();
-
- const [ firstTab ] = tabs;
- firstTab?.focus();
- break;
- case 'End':
- event.preventDefault();
- event.stopPropagation();
-
- const lastTab = tabs[ tabs.length - 1 ];
- lastTab?.focus();
- break;
- }
- }
-
- function renderFills( fills: ReactNode ) {
- return (
- <TabFills
- fills={ fills as readonly ( readonly ReactElement[] )[] }
- selected={ selected }
- onChange={ onChange }
- />
- );
- }
-
- return (
- <NavigableMenu
- role="tablist"
- onNavigate={ selectTabOnNavigate }
- onKeyDown={ handleKeyDown }
- className="woocommerce-product-tabs"
- orientation="horizontal"
- >
- <Slot
- fillProps={
- {
- onClick: ( tabId ) => {
- onChange( tabId );
-
- const { getEditedEntityRecord } = select( 'core' );
-
- // @ts-expect-error getEditedEntityRecord's curried form strips its generic, returning a wide entity union; Product is the correct narrow type.
- const product: Product = getEditedEntityRecord(
- 'postType',
- 'product',
- productId
- );
-
- recordEvent(
- 'product_tab_click',
- getTabTracksData( tabId, product )
- );
- },
- } as TabsFillProps
- }
- name={ TABS_SLOT_NAME }
- >
- { renderFills }
- </Slot>
- </NavigableMenu>
- );
-}
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
deleted file mode 100644
index fc9b84673f2..00000000000
--- a/packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent, screen } from '@testing-library/react';
-import { SlotFillProvider } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { recordEvent } from '@woocommerce/tracks';
-import { select } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { Tabs } from '../';
-import { TabBlockEdit as Tab } from '../../../blocks/generic/tab/edit';
-import { TRACKS_SOURCE } from '../../../constants';
-
-jest.mock( '@woocommerce/block-templates', () => ( {
- ...jest.requireActual( '@woocommerce/block-templates' ),
- useWooBlockProps: jest.fn(),
-} ) );
-
-jest.mock( '@woocommerce/navigation', () => ( {
- ...jest.requireActual( '@woocommerce/navigation' ),
- navigateTo: jest.fn(),
- getQuery: jest.fn().mockReturnValue( {} ),
-} ) );
-
-jest.mock( '@woocommerce/tracks', () => ( {
- ...jest.requireActual( '@woocommerce/tracks' ),
- recordEvent: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/data', () => {
- const originalModule = jest.requireActual( '@wordpress/data' );
- return {
- ...originalModule,
- select: jest.fn( ( ...args ) => originalModule.select( ...args ) ),
- };
-} );
-
-const blockProps = {
- setAttributes: () => {},
- className: '',
- clientId: '',
- isSelected: false,
-};
-
-function MockTabs( {
- selected = null,
- onChange = jest.fn(),
-}: {
- selected?: string | null;
- onChange?: ( tabId: string ) => void;
-} ) {
- const mockContext = {
- editedProduct: null,
- postId: 1,
- postType: 'product',
- selectedTab: selected,
- };
-
- return (
- <SlotFillProvider>
- <Tabs selected={ selected } onChange={ onChange } />
- <Tab
- { ...blockProps }
- attributes={ {
- id: 'test1',
- title: 'Test button 1',
- order: 1,
- isSelected: selected === 'test1',
- } }
- context={ mockContext }
- name="test1"
- />
- <Tab
- { ...blockProps }
- attributes={ {
- id: 'test2',
- title: 'Test button 2',
- order: 2,
- isSelected: selected === 'test2',
- } }
- context={ mockContext }
- name="test2"
- />
- <Tab
- { ...blockProps }
- attributes={ {
- id: 'test3',
- title: 'Test button 3',
- order: 3,
- isSelected: selected === 'test3',
- } }
- context={ mockContext }
- name="test3"
- />
- </SlotFillProvider>
- );
-}
-
-describe( 'Tabs', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should render tab buttons added to the slot', () => {
- render( <MockTabs /> );
-
- expect( screen.queryByText( 'Test button 1' ) ).toBeInTheDocument();
- expect( screen.queryByText( 'Test button 2' ) ).toBeInTheDocument();
- } );
-
- it( 'should call onChange with the first tab if no selection set', async () => {
- const mockOnChange = jest.fn();
-
- render( <MockTabs onChange={ mockOnChange } /> );
-
- expect( mockOnChange ).toHaveBeenCalledWith( 'test1' );
- } );
-
- it( 'should set the selected tab active', async () => {
- const mockOnChange = jest.fn();
-
- render( <MockTabs selected={ 'test2' } onChange={ mockOnChange } /> );
-
- expect( screen.queryByText( 'Test button 1' ) ).toHaveAttribute(
- 'aria-selected',
- 'false'
- );
-
- expect( screen.queryByText( 'Test button 2' ) ).toHaveAttribute(
- 'aria-selected',
- 'true'
- );
-
- expect( mockOnChange ).not.toHaveBeenCalled();
- } );
-
- it( 'should call the onChange prop when changing', async () => {
- const mockOnChange = jest.fn();
-
- render( <MockTabs selected={ 'test2' } onChange={ mockOnChange } /> );
-
- const button = screen.getByText( 'Test button 1' );
- fireEvent.click( button );
-
- expect( mockOnChange ).toHaveBeenCalledWith( 'test1' );
- } );
-
- it( 'should add a class to the newly selected tab panel', async () => {
- const { rerender } = render( <MockTabs selected={ 'test2' } /> );
-
- const panel1 = screen.getByRole( 'tabpanel', {
- name: 'Test button 1',
- } );
- const panel2 = screen.getByRole( 'tabpanel', {
- name: 'Test button 2',
- } );
-
- expect( panel1.classList ).not.toContain( 'is-selected' );
- expect( panel2.classList ).toContain( 'is-selected' );
-
- rerender( <MockTabs selected={ 'test1' } /> );
-
- expect( panel1.classList ).toContain( 'is-selected' );
- expect( panel2.classList ).not.toContain( 'is-selected' );
- } );
-
- it( 'should trigger wcadmin_product_tab_click track event when tab is clicked', async () => {
- ( select as jest.Mock ).mockImplementation( () => ( {
- getEditedEntityRecord: () => ( {
- type: 'simple',
- } ),
- } ) );
- render( <MockTabs /> );
-
- const button = screen.getByText( 'Test button 2' );
- fireEvent.click( button );
-
- expect( recordEvent ).toBeCalledWith( 'product_tab_click', {
- product_tab: 'test2',
- product_type: 'simple',
- source: TRACKS_SOURCE,
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/tabs/utils/get-tab-tracks-data.ts b/packages/js/product-editor/src/components/tabs/utils/get-tab-tracks-data.ts
deleted file mode 100644
index c6374752915..00000000000
--- a/packages/js/product-editor/src/components/tabs/utils/get-tab-tracks-data.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-
-/**
- * Get the data for a tab click.
- *
- * @param {string} tabId Clicked tab.
- * @param {Product} product Current product.
- * @return {Object} The data for the event.
- */
-export function getTabTracksData( tabId: string, product: Product ) {
- const data = {
- product_tab: tabId,
- product_type: product.type,
- source: TRACKS_SOURCE,
- };
-
- if ( tabId === 'inventory' ) {
- return {
- ...data,
- is_store_stock_management_enabled: product.manage_stock,
- };
- }
-
- return data;
-}
diff --git a/packages/js/product-editor/src/components/tags-field/create-tag-modal.scss b/packages/js/product-editor/src/components/tags-field/create-tag-modal.scss
deleted file mode 100644
index 102dfd93da9..00000000000
--- a/packages/js/product-editor/src/components/tags-field/create-tag-modal.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.woocommerce-create-new-tag-modal {
- &__wrapper {
- min-width: 590px;
- overflow: visible;
- }
-
- &__buttons {
- margin-top: $gap-larger;
- display: flex;
- flex-direction: row;
- gap: $gap-smaller;
- justify-content: flex-end;
- }
-}
diff --git a/packages/js/product-editor/src/components/tags-field/create-tag-modal.tsx b/packages/js/product-editor/src/components/tags-field/create-tag-modal.tsx
deleted file mode 100644
index bab3522a2bd..00000000000
--- a/packages/js/product-editor/src/components/tags-field/create-tag-modal.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button, Modal, TextControl } from '@wordpress/components';
-import { useState, createElement } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { experimentalProductTagsStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-import { CreateTagModalProps } from './types';
-
-export const CreateTagModal = ( {
- initialTagName,
- onCancel,
- onCreate,
-}: CreateTagModalProps ) => {
- const { createNotice } = useDispatch( 'core/notices' );
- const [ isCreating, setIsCreating ] = useState( false );
- const { createProductTag, invalidateResolutionForStoreSelector } =
- useDispatch( experimentalProductTagsStore );
- const [ tagName, setTagName ] = useState( initialTagName || '' );
-
- const onSave = async () => {
- recordEvent( 'product_tag_add', {
- source: TRACKS_SOURCE,
- } );
- setIsCreating( true );
- try {
- const newTag = await createProductTag( {
- name: tagName,
- } );
- invalidateResolutionForStoreSelector( 'getProductTags' );
- setIsCreating( false );
- onCreate( newTag );
- } catch ( e ) {
- createNotice(
- 'error',
- __( 'Failed to create tag.', 'woocommerce' )
- );
- setIsCreating( false );
- onCancel();
- }
- };
-
- return (
- <Modal
- title={ __( 'Create tag', 'woocommerce' ) }
- onRequestClose={ () => onCancel() }
- className="woocommerce-create-new-tag-modal"
- >
- <div className="woocommerce-create-new-tag-modal__wrapper">
- <TextControl
- label={ __( 'Name', 'woocommerce' ) }
- name="Tops"
- value={ tagName }
- onChange={ setTagName }
- />
- <div className="woocommerce-create-new-tag-modal__buttons">
- <Button
- isSecondary
- onClick={ () => onCancel() }
- disabled={ isCreating }
- >
- { __( 'Cancel', 'woocommerce' ) }
- </Button>
- <Button
- isPrimary
- disabled={ tagName.length === 0 || isCreating }
- isBusy={ isCreating }
- onClick={ () => {
- onSave();
- } }
- >
- { __( 'Save', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- </Modal>
- );
-};
diff --git a/packages/js/product-editor/src/components/tags-field/index.ts b/packages/js/product-editor/src/components/tags-field/index.ts
deleted file mode 100644
index e6c13477d0a..00000000000
--- a/packages/js/product-editor/src/components/tags-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './tag-field';
diff --git a/packages/js/product-editor/src/components/tags-field/style.scss b/packages/js/product-editor/src/components/tags-field/style.scss
deleted file mode 100644
index 9bb7e7508bc..00000000000
--- a/packages/js/product-editor/src/components/tags-field/style.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.woocommerce-tag-field-dropdown {
- .woocommerce-experimental-select-control__input {
- height: auto;
- }
- .woocommerce-experimental-select-control__combo-box-wrapper {
- border-color: $gray-700;
- }
- &__menu {
- padding: 0 $gap-small;
- max-height: 300px;
- overflow-y: scroll;
-
- > .woocommerce-tag-field-dropdown__item:not(:first-child) {
- > .woocommerce-tag-field-dropdown__item-content {
- border-top: 1px solid $gray-200;
- }
- }
- }
- &__item {
- margin-bottom: 0;
-
- .woocommerce-tag-field-dropdown__item-content {
- .components-base-control {
- margin-top: 0;
- }
- }
- &.is-new {
- .tag-field-dropdown__toggle {
- margin-right: $gap-smaller;
- }
- }
- }
- &__item-content {
- height: 48px;
- padding: $gap-smaller 0;
- display: flex;
- flex-direction: row;
- align-items: center;
- cursor: pointer;
-
- .components-base-control__field {
- margin-bottom: 0;
- }
- }
- &__item-children {
- margin-left: $gap-larger;
- display: none;
- }
- &__item-open {
- display: block;
- }
- &__toggle {
- margin-right: $gap-smaller;
- cursor: pointer;
- }
- &__toggle-placeholder {
- width: $gap + $gap-small;
- }
-}
-
-.woocommerce-tag-field-dropdown__item.item_highlighted
- > .woocommerce-tag-field-dropdown__item-content {
- font-weight: bold;
-}
-
-.woocommerce-experimental-select-control {
- &__combox-box-icon {
- box-sizing: unset;
- }
-}
diff --git a/packages/js/product-editor/src/components/tags-field/tag-field.tsx b/packages/js/product-editor/src/components/tags-field/tag-field.tsx
deleted file mode 100644
index 374fc7b93a8..00000000000
--- a/packages/js/product-editor/src/components/tags-field/tag-field.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- useEffect,
- useState,
- createElement,
- Fragment,
-} from '@wordpress/element';
-import {
- TreeItemType,
- __experimentalSelectTreeControl as SelectTree,
-} from '@woocommerce/components';
-import { recordEvent } from '@woocommerce/tracks';
-import { experimentalProductTagsStore, ProductTag } from '@woocommerce/data';
-import { useDispatch } from '@wordpress/data';
-import { useDebounce } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useTagSearch } from './use-tag-search';
-import { TRACKS_SOURCE } from '../../constants';
-import { CreateTagModal } from './create-tag-modal';
-import { ProductTagNodeProps, TagFieldProps } from './types';
-
-export function mapFromTagToTreeItem( val: ProductTagNodeProps ): TreeItemType {
- return {
- value: String( val.id ),
- label: val.name,
- };
-}
-
-export function mapFromTreeItemToTag( val: TreeItemType ): ProductTagNodeProps {
- return {
- id: +val.value,
- name: val.label,
- };
-}
-
-export function mapFromTagsToTreeItems(
- tags: ProductTagNodeProps[]
-): TreeItemType[] {
- return tags.map( mapFromTagToTreeItem );
-}
-
-export function mapFromTreeItemsToTags(
- tags: TreeItemType[]
-): ProductTagNodeProps[] {
- return tags.map( mapFromTreeItemToTag );
-}
-
-export const TagField = ( {
- id,
- isVisible = false,
- label,
- placeholder,
- value = [],
- onChange,
-}: TagFieldProps ) => {
- const { tagsSelectList, searchTags } = useTagSearch();
- const [ searchValue, setSearchValue ] = useState( '' );
- const [ isCreating, setIsCreating ] = useState( false );
- const [ showCreateNewModal, setShowCreateNewModal ] = useState( false );
- const [ newInputValue, setNewInputValue ] = useState<
- undefined | string
- >();
- const { createProductTag, invalidateResolutionForStoreSelector } =
- useDispatch( experimentalProductTagsStore );
- const { createNotice } = useDispatch( 'core/notices' );
-
- const onInputChange = ( searchString?: string ) => {
- setSearchValue( searchString || '' );
- searchTags( searchString || '' );
- setNewInputValue( searchString );
- };
-
- useEffect( () => {
- if ( isVisible ) {
- searchTags();
- }
- }, [ isVisible ] );
-
- const searchDelayed = useDebounce( onInputChange, 150 );
-
- const onSave = async () => {
- recordEvent( 'product_tag_add', {
- source: TRACKS_SOURCE,
- } );
- setIsCreating( true );
- try {
- setNewInputValue( '' );
- const newTag: ProductTag = await createProductTag( {
- name: searchValue,
- } );
- invalidateResolutionForStoreSelector( 'getProductTags' );
- setIsCreating( false );
- onChange( [ ...value, newTag ] );
- onInputChange( '' );
- } catch ( e ) {
- createNotice(
- 'error',
- __( 'Failed to create tag.', 'woocommerce' )
- );
- setIsCreating( false );
- }
- };
-
- return (
- <>
- <SelectTree
- id={ id }
- multiple
- shouldNotRecursivelySelect
- createValue={ searchValue }
- label={ label }
- isLoading={ isCreating }
- onInputChange={ searchDelayed }
- placeholder={ value.length === 0 ? placeholder : '' }
- initialInputValue={ newInputValue }
- onCreateNew={
- searchValue.length === 0
- ? () => setShowCreateNewModal( true )
- : onSave
- }
- shouldShowCreateButton={ ( typedValue ) =>
- ! typedValue ||
- tagsSelectList.findIndex(
- ( item ) => item.name === typedValue
- ) === -1
- }
- items={ mapFromTagsToTreeItems( tagsSelectList ) }
- selected={ mapFromTagsToTreeItems( value ) }
- onSelect={ ( selectedItems ) => {
- if ( Array.isArray( selectedItems ) ) {
- const newItems: ProductTagNodeProps[] =
- mapFromTreeItemsToTags(
- selectedItems.filter(
- ( { value: selectedItemValue } ) =>
- ! value.some(
- ( item ) =>
- item.id === +selectedItemValue
- )
- )
- );
- onChange( [ ...value, ...newItems ] );
- } else {
- onChange( [
- ...value,
- mapFromTreeItemToTag( selectedItems ),
- ] );
- }
- } }
- onRemove={ ( removedItems ) => {
- const newValues = Array.isArray( removedItems )
- ? value.filter(
- ( item ) =>
- ! removedItems.some(
- ( { value: removedValue } ) =>
- item.id === +removedValue
- )
- )
- : value.filter(
- ( item ) => item.id !== +removedItems.value
- );
- onChange( newValues );
- } }
- ></SelectTree>
- { showCreateNewModal && (
- <CreateTagModal
- initialTagName={ searchValue }
- onCancel={ () => setShowCreateNewModal( false ) }
- onCreate={ ( newTag ) => {
- onChange( [ ...value, newTag ] );
- setShowCreateNewModal( false );
- onInputChange( '' );
- } }
- />
- ) }
- </>
- );
-};
diff --git a/packages/js/product-editor/src/components/tags-field/test/tag-field.test.tsx b/packages/js/product-editor/src/components/tags-field/test/tag-field.test.tsx
deleted file mode 100644
index d555785c89a..00000000000
--- a/packages/js/product-editor/src/components/tags-field/test/tag-field.test.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Form } from '@woocommerce/components';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { TagField } from '../tag-field';
-import { ProductTagNodeProps } from '../types';
-
-jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
-
-jest.mock( '../use-tag-search', () => {
- return {
- useTagSearch: jest.fn().mockReturnValue( {
- searchTags: jest.fn(),
- getFilteredItemsForSelectTree: jest.fn().mockReturnValue( [] ),
- isSearching: false,
- tagsSelectList: [],
- tagTreeKeyValues: {},
- } ),
- };
-} );
-
-describe( 'TagField', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should render a dropdown select control', () => {
- const { queryByText, queryByPlaceholderText } = render(
- <Form< {
- tags: ProductTagNodeProps[];
- } >
- initialValues={ { tags: [] } }
- >
- { ( { getInputProps } ) => (
- <TagField
- id="tag-field"
- isVisible={ true }
- label="Tags"
- placeholder="Search or create tag…"
- { ...getInputProps( 'tags' ) }
- />
- ) }
- </Form>
- );
- const searchInput = queryByPlaceholderText( 'Search or create tag…' );
- userEvent.click( searchInput! );
- expect( queryByText( 'Create new' ) ).toBeInTheDocument();
- } );
-
- it( 'should pass in the selected tags as select control items', () => {
- const { queryAllByText, queryByPlaceholderText } = render(
- <Form< {
- tags: ProductTagNodeProps[];
- } >
- initialValues={ {
- tags: [
- { id: 2, name: 'Test' },
- { id: 5, name: 'Clothing' },
- ],
- } }
- >
- { ( { getInputProps } ) => (
- <TagField
- id="another-tag-field"
- isVisible={ true }
- label="Tags"
- placeholder="Search or create tag…"
- { ...getInputProps( 'tags' ) }
- />
- ) }
- </Form>
- );
- queryByPlaceholderText( 'Search or create tag…' )?.focus();
- expect( queryAllByText( 'Test, Clothing' ) ).toHaveLength( 1 );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/tags-field/types.ts b/packages/js/product-editor/src/components/tags-field/types.ts
deleted file mode 100644
index 07a33fd8b61..00000000000
--- a/packages/js/product-editor/src/components/tags-field/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductTag } from '@woocommerce/data';
-
-export type CreateTagModalProps = {
- initialTagName?: string;
- onCancel: () => void;
- onCreate: ( newTag: ProductTag ) => void;
-};
-export type ProductTagNodeProps = Pick< ProductTag, 'id' | 'name' >;
-export type TagFieldProps = {
- id: string;
- isVisible?: boolean;
- label: string;
- placeholder: string;
- value?: ProductTagNodeProps[];
- onChange: ( value: ProductTagNodeProps[] ) => void;
-};
diff --git a/packages/js/product-editor/src/components/tags-field/use-tag-search.ts b/packages/js/product-editor/src/components/tags-field/use-tag-search.ts
deleted file mode 100644
index 925a437de66..00000000000
--- a/packages/js/product-editor/src/components/tags-field/use-tag-search.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from '@wordpress/element';
-import { resolveSelect } from '@wordpress/data';
-import { ProductTag, experimentalProductTagsStore } from '@woocommerce/data';
-
-/**
- * A hook used to handle all the search logic for the tag search component.
- */
-export const useTagSearch = () => {
- const [ fetchedTags, setFetchedTags ] = useState< ProductTag[] >( [] );
- const [ isSearching, setIsSearching ] = useState( true );
-
- const fetchProductTags = ( search?: string ) => {
- setIsSearching( true );
- const query = search !== undefined ? { search } : undefined;
- resolveSelect( experimentalProductTagsStore )
- .getProductTags( { ...query } )
- .then( ( tags ) => {
- setFetchedTags( tags ?? [] );
- } )
- .finally( () => {
- setIsSearching( false );
- } );
- };
-
- return {
- searchTags: fetchProductTags,
- tagsSelectList: fetchedTags,
- isSearching,
- };
-};
diff --git a/packages/js/product-editor/src/components/text-control/index.ts b/packages/js/product-editor/src/components/text-control/index.ts
deleted file mode 100644
index 1d39f2d61bf..00000000000
--- a/packages/js/product-editor/src/components/text-control/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './text-control';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/text-control/style.scss b/packages/js/product-editor/src/components/text-control/style.scss
deleted file mode 100644
index 1ed4fa172fe..00000000000
--- a/packages/js/product-editor/src/components/text-control/style.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.woocommerce-product-text-control {
- &.has-error {
- .components-input-control__container
- .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/text-control/text-control.tsx b/packages/js/product-editor/src/components/text-control/text-control.tsx
deleted file mode 100644
index 22dfc1c338c..00000000000
--- a/packages/js/product-editor/src/components/text-control/text-control.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { Ref } from 'react';
-import { createElement, forwardRef } from '@wordpress/element';
-import clsx from 'clsx';
-import { __experimentalInputControl as InputControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { Label } from '../label/label';
-import { TextControlProps } from './types';
-
-export const TextControl = forwardRef( function ForwardedTextControl(
- {
- label,
- help,
- error,
- tooltip,
- className,
- required,
- onChange,
- onBlur,
- ...props
- }: TextControlProps,
- ref: Ref< HTMLInputElement >
-) {
- return (
- <InputControl
- { ...props }
- ref={ ref }
- className={ clsx( 'woocommerce-product-text-control', className, {
- 'has-error': error,
- } ) }
- label={
- <Label
- label={ label }
- required={ required }
- tooltip={ tooltip }
- />
- }
- required={ required }
- help={ error || help }
- onChange={ ( value: string | undefined ) => {
- onChange( value ?? '' );
- } }
- onBlur={ onBlur }
- />
- );
-} );
diff --git a/packages/js/product-editor/src/components/text-control/types.ts b/packages/js/product-editor/src/components/text-control/types.ts
deleted file mode 100644
index 23dbf3a9717..00000000000
--- a/packages/js/product-editor/src/components/text-control/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * This must inherit the InputControlProp from @wordpress/components
- * but it has not been exported yet
- */
-
-export type TextControlProps = Omit<
- React.DetailedHTMLProps<
- React.InputHTMLAttributes< HTMLInputElement >,
- HTMLInputElement
- >,
- 'onChange' | 'size' | 'value' | 'onDrag' | 'onDragEnd' | 'onDragStart'
-> & {
- label: string;
- help?: string;
- error?: string;
- tooltip?: string;
- prefix?: React.ReactNode;
- suffix?: React.ReactNode;
- value?: string;
- onChange( value: string ): void;
-};
diff --git a/packages/js/product-editor/src/components/variation-switcher-footer/index.ts b/packages/js/product-editor/src/components/variation-switcher-footer/index.ts
deleted file mode 100644
index c65a43b2947..00000000000
--- a/packages/js/product-editor/src/components/variation-switcher-footer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './variation-switcher-footer';
diff --git a/packages/js/product-editor/src/components/variation-switcher-footer/switcher-loading-placeholder.tsx b/packages/js/product-editor/src/components/variation-switcher-footer/switcher-loading-placeholder.tsx
deleted file mode 100644
index c9060be0631..00000000000
--- a/packages/js/product-editor/src/components/variation-switcher-footer/switcher-loading-placeholder.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement, Fragment } from '@wordpress/element';
-import { arrowLeft, arrowRight, Icon } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
-
-export function SwitcherLoadingPlaceholder( {
- position,
-}: {
- position: 'left' | 'right';
-} ) {
- return (
- <Button
- data-testid="woocommerce-product-variation-switcher-footer-placeholder"
- className="woocommerce-product-variation-switcher-footer__button is-placeholder"
- disabled={ true }
- >
- { position === 'left' && (
- <>
- <Icon
- icon={ arrowLeft }
- size={ 16 }
- className="woocommerce-product-variation-switcher-footer__arrow"
- />
- <div className="woocommerce-product-variation-switcher-footer__product-image" />
- </>
- ) }
- <div className="woocommerce-product-variation-switcher-footer__item-label" />
-
- { position === 'right' && (
- <>
- <div className="woocommerce-product-variation-switcher-footer__product-image" />
- <Icon
- icon={ arrowRight }
- size={ 16 }
- className="woocommerce-product-variation-switcher-footer__arrow"
- />
- </>
- ) }
- </Button>
- );
-}
diff --git a/packages/js/product-editor/src/components/variation-switcher-footer/variation-image-placeholder.tsx b/packages/js/product-editor/src/components/variation-switcher-footer/variation-image-placeholder.tsx
deleted file mode 100644
index 746cc13c431..00000000000
--- a/packages/js/product-editor/src/components/variation-switcher-footer/variation-image-placeholder.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function VariationImagePlaceholder( {
- className,
-}: {
- className?: string;
-} ) {
- return (
- <svg
- width="32"
- height="32"
- viewBox="0 0 32 32"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- className={ className }
- style={ {
- borderRadius: '3px',
- background: 'var(--wp-gray-gray-0, #F6F7F7)',
- } }
- >
- <g clipPath="url(#clip0_7819_478402)">
- <path
- d="M22.9869 7.07134C19.8275 7.07134 17.9977 7.62377 16.9543 8.85386C17.6297 6.47326 18.8776 4.68605 21.1572 3.06738C18.4558 3.41616 16.8877 4.44261 16.1282 5.91147C15.3688 4.44378 13.8007 3.41733 11.0993 3.06738C13.3789 4.68605 14.6268 6.47209 15.3021 8.85386C14.2587 7.62377 12.429 7.07134 9.26953 7.07134C13.0354 8.83982 14.4761 10.263 15.7029 12.8133H16.5524C17.7792 10.263 19.2211 8.83982 22.9858 7.07134H22.9869Z"
- fill="#BBBBBB"
- />
- <path
- d="M18.6464 34.8438C19.8718 34.3897 24.3648 33.3925 24.3648 29.0402C24.3648 26.4551 22.0269 24.5052 19.3727 24.0527C20.5536 23.6669 22.278 21.9488 22.278 20.0211C22.278 17.5377 20.0307 16.5469 18.1934 16.1626C18.1934 15.5957 20.2357 12.6709 20.2357 12.6709H11.7932C11.7932 12.6709 13.8355 15.5957 13.8355 16.1626C11.9966 16.5485 9.75086 17.5377 9.75086 20.0211C9.75086 21.9488 11.4753 23.6669 12.6562 24.0527C10.0004 24.5068 7.66406 26.4567 7.66406 29.0402C7.66406 33.3941 12.1571 34.3913 13.3825 34.8438C10.4772 35.1154 9.02453 36.2491 8.79885 37.1558H23.2316C23.0043 36.2491 21.5517 35.1154 18.648 34.8438H18.6464Z"
- fill="#DDDDDD"
- />
- </g>
- <defs>
- <clipPath id="clip0_7819_478402">
- <rect
- width="34.0881"
- height="25.9994"
- fill="white"
- transform="translate(-1)"
- />
- </clipPath>
- </defs>
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.scss b/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.scss
deleted file mode 100644
index 2a0481bc5f3..00000000000
--- a/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.woocommerce-product-variation-switcher-footer {
- max-width: 650px;
- padding: 16px 0;
- margin: 0 auto;
-
- display: flex;
- justify-content: space-between;
-
- &__button {
- height: 32px;
- gap: $gap-small;
-
- &.is-placeholder {
- .woocommerce-product-variation-switcher-footer__arrow {
- @include placeholder();
- background-color: transparent;
- color: inherit;
- }
-
- .woocommerce-product-variation-switcher-footer__item-label {
- @include placeholder();
- background-color: $gray-200;
- width: $gap-largest;
- }
-
- .woocommerce-product-variation-switcher-footer__product-image {
- @include placeholder();
- background-color: $gray-200;
- width: 32px;
- height: 32px;
- }
- }
- }
-
- &__button-next {
- margin-left: auto;
- }
- &__button-previous {
- margin-right: auto;
- }
-
- &__product-image {
- max-height: 32px;
- max-width: 32px;
- }
-}
diff --git a/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.tsx b/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.tsx
deleted file mode 100644
index f2cd5b14500..00000000000
--- a/packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { arrowLeft, arrowRight, Icon } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { ProductVariation } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { SwitcherLoadingPlaceholder } from './switcher-loading-placeholder';
-import { VariationImagePlaceholder } from './variation-image-placeholder';
-import { useVariationSwitcher } from '../../hooks/use-variation-switcher';
-
-export type VariationSwitcherProps = {
- parentProductType?: string;
- variationId?: number;
- parentId?: number;
-};
-
-export function VariationSwitcherFooter( {
- parentProductType,
- variationId,
- parentId,
-}: VariationSwitcherProps ) {
- const {
- numberOfVariations,
- nextVariationId,
- previousVariationId,
- activeVariationIndex,
- nextVariationIndex,
- previousVariationIndex,
- goToNextVariation,
- goToPreviousVariation,
- } = useVariationSwitcher( {
- variationId,
- parentId,
- parentProductType,
- } );
- const { previousVariation, nextVariation } = useSelect(
- ( select ) => {
- const { getEntityRecord } = select( 'core' );
-
- const getVariation = ( id: number | null ) =>
- id !== null
- ? ( getEntityRecord(
- 'postType',
- 'product_variation',
- id
- ) as ProductVariation | undefined )
- : undefined;
-
- if ( numberOfVariations && numberOfVariations > 0 ) {
- return {
- previousVariation: getVariation( previousVariationId ),
- nextVariation: getVariation( nextVariationId ),
- };
- }
- return {};
- },
- [ nextVariationId, previousVariationId, numberOfVariations ]
- );
- function onPrevious() {
- if ( previousVariation ) {
- recordEvent( 'product_variation_switch_previous', {
- variation_length: numberOfVariations,
- variation_id: previousVariation?.id,
- variation_index: activeVariationIndex,
- previous_variation_index: previousVariationIndex,
- } );
- goToPreviousVariation();
- }
- }
-
- function onNext() {
- if ( nextVariation ) {
- recordEvent( 'product_variation_switch_next', {
- variation_length: numberOfVariations,
- variation_id: nextVariation?.id,
- variation_index: activeVariationIndex,
- next_variation_index: nextVariationIndex,
- } );
- goToNextVariation();
- }
- }
-
- if ( ! numberOfVariations || numberOfVariations < 2 ) {
- return null;
- }
-
- return (
- <div className="woocommerce-product-variation-switcher-footer">
- { previousVariation && (
- <Button
- className="woocommerce-product-variation-switcher-footer__button woocommerce-product-variation-switcher-footer__button-previous"
- label={ __( 'Previous', 'woocommerce' ) }
- onClick={ onPrevious }
- >
- <Icon icon={ arrowLeft } size={ 16 } />
- { previousVariation.image ? (
- <img
- alt={ previousVariation.image.alt || '' }
- src={ previousVariation.image.src }
- className="woocommerce-product-variation-switcher-footer__product-image"
- />
- ) : (
- <VariationImagePlaceholder className="woocommerce-product-variation-switcher-footer__product-image" />
- ) }
- { previousVariation.name }
- </Button>
- ) }
- { ! previousVariation && previousVariationId !== null && (
- <SwitcherLoadingPlaceholder position="left" />
- ) }
- { nextVariation && (
- <Button
- className="woocommerce-product-variation-switcher-footer__button woocommerce-product-variation-switcher-footer__button-next"
- label={ __( 'Next', 'woocommerce' ) }
- onClick={ onNext }
- >
- { nextVariation.name }
- { nextVariation.image ? (
- <img
- alt={ nextVariation.image.alt || '' }
- src={ nextVariation.image.src }
- className="woocommerce-product-variation-switcher-footer__product-image"
- />
- ) : (
- <VariationImagePlaceholder className="woocommerce-product-variation-switcher-footer__product-image" />
- ) }
- <Icon icon={ arrowRight } size={ 16 } />
- </Button>
- ) }
- { ! nextVariation && nextVariationId !== null && (
- <SwitcherLoadingPlaceholder position="right" />
- ) }
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/add-image-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/add-image-menu-item/add-image-menu-item.tsx
deleted file mode 100644
index 39b5ec8fbb6..00000000000
--- a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/add-image-menu-item.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { createElement, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { MediaUpload } from '@wordpress/media-utils';
-import { recordEvent } from '@woocommerce/tracks';
-import { ProductVariationImage } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { VariationActionsMenuItemProps } from '../types';
-import { TRACKS_SOURCE } from '../../../constants';
-import { mapUploadImageToImage } from '../../../utils/map-upload-image-to-image';
-
-const DEFAULT_ALLOWED_MEDIA_TYPES = [ 'image' ];
-const MODAL_CLASS_NAME = 'woocommerce-add-image-menu-item__upload_image_modal';
-const MODAL_WRAPPER_CLASS_NAME =
- 'woocommerce-add-image-menu-item__upload_image_modal_wrapper';
-
-export function AddImageMenuItem( {
- selection,
- onChange,
- onClose,
-}: VariationActionsMenuItemProps ) {
- const [ uploadFilesModalOpen, setUploadFilesModalOpen ] = useState( false );
- const ids = selection.map( ( { id } ) => id );
-
- function handleMediaUploadSelect(
- uploadedImage: {
- id?: number;
- } & Record< string, string >
- ) {
- const image = mapUploadImageToImage(
- uploadedImage
- ) as ProductVariationImage;
-
- recordEvent( 'product_variations_menu_add_image_update', {
- source: TRACKS_SOURCE,
- action: 'add_image_to_variation',
- variation_id: ids,
- } );
-
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- image,
- } ) )
- );
- onClose();
- }
-
- function uploadFilesClickHandler( openMediaUploadModal: () => void ) {
- return function handleUploadFilesClick() {
- recordEvent( 'product_variations_menu_add_image_select', {
- source: TRACKS_SOURCE,
- action: 'add_image_to_variation',
- variation_id: ids,
- } );
- openMediaUploadModal();
- setUploadFilesModalOpen( true );
- };
- }
-
- useEffect(
- function addUploadModalClass() {
- const modal = document.querySelector( `.${ MODAL_CLASS_NAME }` );
- const dialog = modal?.closest( '[role="dialog"]' );
- const wrapper = dialog?.parentElement;
-
- wrapper?.classList.add( MODAL_WRAPPER_CLASS_NAME );
-
- return () => {
- wrapper?.classList.remove( MODAL_WRAPPER_CLASS_NAME );
- };
- },
- [ uploadFilesModalOpen ]
- );
-
- return (
- <MediaUpload
- onSelect={ handleMediaUploadSelect }
- modalClass={ MODAL_CLASS_NAME }
- allowedTypes={ DEFAULT_ALLOWED_MEDIA_TYPES }
- mode={ 'upload' }
- multiple={ false }
- render={ ( { open }: { open: () => void } ) => (
- <MenuItem onClick={ uploadFilesClickHandler( open ) }>
- { __( 'Add image', 'woocommerce' ) }
- </MenuItem>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/add-image-menu-item/index.ts
deleted file mode 100644
index 8ee2c8c0f1b..00000000000
--- a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './add-image-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/style.scss b/packages/js/product-editor/src/components/variations-table/add-image-menu-item/style.scss
deleted file mode 100644
index 1ee58bb5354..00000000000
--- a/packages/js/product-editor/src/components/variations-table/add-image-menu-item/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$media-modal-z-index: calc(z-index(".components-popover") + 10000);
-$media-modal-backdrop-z-index: calc($media-modal-z-index - 1000);
-
-.woocommerce-add-image-menu-item {
- &__upload_image_modal_wrapper {
- .media-modal {
- z-index: $media-modal-z-index;
- }
-
- .media-modal-backdrop {
- z-index: $media-modal-backdrop-z-index;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/downloads-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/downloads-menu-item/downloads-menu-item.tsx
deleted file mode 100644
index 3adce71afbe..00000000000
--- a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/downloads-menu-item.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import { Dropdown, MenuItem, MenuGroup } from '@wordpress/components';
-import { createElement, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronRight } from '@wordpress/icons';
-import { MediaUpload } from '@wordpress/media-utils';
-import { ProductDownload } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { VariationActionsMenuItemProps } from '../types';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationQuickUpdateMenuItem } from '../variation-actions-menus';
-
-const MODAL_CLASS_NAME = 'downloads_menu_item__upload_files_modal';
-const MODAL_WRAPPER_CLASS_NAME =
- 'downloads_menu_item__upload_files_modal_wrapper';
-
-function convertMediaFileToDownloadFile( value: Record< string, unknown > ) {
- return { id: `${ value.id }`, name: value.name, file: value.url };
-}
-
-export function DownloadsMenuItem( {
- selection,
- onChange,
- onClose,
- supportsMultipleSelection = false,
-}: VariationActionsMenuItemProps ) {
- const ids = selection.map( ( { id } ) => id );
-
- const downloadsIds: number[] =
- selection?.length > 0
- ? selection[ 0 ].downloads.map( ( { id }: ProductDownload ) =>
- Number.parseInt( id, 10 )
- )
- : [];
-
- const [ uploadFilesModalOpen, setUploadFilesModalOpen ] = useState( false );
-
- function handleMediaUploadSelect(
- value: Record< string, unknown > | Record< string, unknown >[]
- ) {
- const downloads = Array.isArray( value )
- ? value.map( convertMediaFileToDownloadFile )
- : convertMediaFileToDownloadFile( value );
-
- const partialVariation = {
- downloadable: true,
- downloads,
- };
-
- onChange(
- // @ts-expect-error Inferred downloads shape doesn't match ProductVariation.downloads (see product-variations/types.ts).
- selection.map( ( { id } ) => ( {
- ...partialVariation,
- id,
- } ) )
- );
-
- recordEvent( 'product_variations_menu_downloads_update', {
- source: TRACKS_SOURCE,
- action: 'downloads_set',
- variation_id: ids,
- } );
-
- onClose();
- }
-
- function uploadFilesClickHandler( openMediaUploadModal: () => void ) {
- return function handleUploadFilesClick() {
- recordEvent( 'product_variations_menu_downloads_select', {
- source: TRACKS_SOURCE,
- action: 'downloads_set',
- variation_id: ids,
- } );
-
- openMediaUploadModal();
- setUploadFilesModalOpen( true );
- };
- }
-
- function menuItemClickHandler( name: string, message: string ) {
- return function handleMenuItemClick() {
- recordEvent( 'product_variations_menu_downloads_select', {
- source: TRACKS_SOURCE,
- action: `${ name }_set`,
- variation_id: ids,
- } );
- handlePrompt( {
- message,
- onOk( value ) {
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- downloadable: true,
- [ name ]: value,
- } ) )
- );
- recordEvent( 'product_variations_menu_downloads_update', {
- source: TRACKS_SOURCE,
- action: `${ name }_set`,
- variation_id: ids,
- } );
- },
- } );
- setUploadFilesModalOpen( false );
- onClose();
- };
- }
-
- useEffect(
- function addUploadModalClass() {
- const modal = document.querySelector( `.${ MODAL_CLASS_NAME }` );
- const dialog = modal?.closest( '[role="dialog"]' );
- const wrapper = dialog?.parentElement;
-
- wrapper?.classList.add( MODAL_WRAPPER_CLASS_NAME );
-
- return () => {
- wrapper?.classList.remove( MODAL_WRAPPER_CLASS_NAME );
- };
- },
- [ uploadFilesModalOpen ]
- );
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'right-start',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_downloads_click',
- {
- source: TRACKS_SOURCE,
- variation_id: ids,
- }
- );
- onToggle();
- } }
- aria-expanded={ isOpen }
- icon={ chevronRight }
- iconPosition="right"
- >
- { __( 'Downloads', 'woocommerce' ) }
- </MenuItem>
- ) }
- renderContent={ () => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup>
- <MediaUpload
- modalClass={ MODAL_CLASS_NAME }
- multiple={ 'add' }
- value={ downloadsIds }
- onSelect={ handleMediaUploadSelect }
- render={ ( { open }: { open: () => void } ) => (
- <MenuItem
- onClick={ uploadFilesClickHandler( open ) }
- >
- { __( 'Upload files', 'woocommerce' ) }
- </MenuItem>
- ) }
- />
-
- <MenuItem
- onClick={ menuItemClickHandler(
- 'download_limit',
- __(
- 'Leave blank for unlimited re-downloads',
- 'woocommerce'
- )
- ) }
- >
- { __( 'Set download limit', 'woocommerce' ) }
- </MenuItem>
-
- <MenuItem
- onClick={ menuItemClickHandler(
- 'download_expiry',
- __(
- 'Enter the number of days before a download link expires, or leave blank',
- 'woocommerce'
- )
- ) }
- >
- { __( 'Set download expiry', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'downloads' }
- onChange={ ( value ) => onChange( value ) }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/downloads-menu-item/index.ts
deleted file mode 100644
index 8cd544666fb..00000000000
--- a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './downloads-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/styles.scss b/packages/js/product-editor/src/components/variations-table/downloads-menu-item/styles.scss
deleted file mode 100644
index fbf64b99d3f..00000000000
--- a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/styles.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$media-modal-z-index: calc(z-index(".components-popover") + 10000);
-$media-modal-backdrop-z-index: calc($media-modal-z-index - 1000);
-
-.downloads_menu_item {
- &__upload_files_modal_wrapper {
- .media-modal {
- z-index: $media-modal-z-index;
- }
-
- .media-modal-backdrop {
- z-index: $media-modal-backdrop-z-index;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/types.ts b/packages/js/product-editor/src/components/variations-table/downloads-menu-item/types.ts
deleted file mode 100644
index 88a8496812b..00000000000
--- a/packages/js/product-editor/src/components/variations-table/downloads-menu-item/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductVariation } from '@woocommerce/data';
-
-export type ShippingMenuItemProps = {
- variation: ProductVariation;
- handlePrompt(
- label?: string,
- parser?: ( value: string ) => Partial< ProductVariation > | null
- ): void;
- onClose(): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/image-actions-menu/image-actions-menu.tsx b/packages/js/product-editor/src/components/variations-table/image-actions-menu/image-actions-menu.tsx
deleted file mode 100644
index b9484dafc8d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/image-actions-menu/image-actions-menu.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-import { Dropdown, MenuGroup } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { createElement, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import type { Attachment } from '@wordpress/media-utils';
-import { MediaUploaderErrorCallback } from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { MediaLibraryMenuItem } from '../../menu-items/media-library-menu-item';
-import { UploadFilesMenuItem } from '../../menu-items/upload-files-menu-item';
-import {
- mapUploadImageToImage,
- UploadImage,
-} from '../../../utils/map-upload-image-to-image';
-import { VariationQuickUpdateMenuItem } from '../variation-actions-menus';
-import type { ImageActionsMenuProps } from './types';
-
-export function ImageActionsMenu( {
- selection,
- onChange,
- onDelete,
- ...props
-}: ImageActionsMenuProps ) {
- const [ isUploading, setIsUploading ] = useState( false );
-
- const { createErrorNotice } = useDispatch( 'core/notices' );
-
- function uploadSuccessHandler( onClose: () => void ) {
- return function handleUploadSuccess( files: Attachment[] ) {
- const image =
- ( files.length &&
- mapUploadImageToImage(
- files[ 0 ] as unknown as UploadImage
- ) ) ||
- undefined;
- const variation = {
- id: selection[ 0 ].id,
- image,
- };
-
- setIsUploading( false );
-
- onChange( [ variation ], false );
- onClose();
- };
- }
-
- const uploadErrorHandler: MediaUploaderErrorCallback = function ( error ) {
- createErrorNotice(
- sprintf(
- /* translators: %1$s is a line break, %2$s is the detailed error message */
- __( 'Error uploading file:%1$s%2$s', 'woocommerce' ),
- '\n',
- error.message
- )
- );
- };
-
- function mediaLibraryMenuItemSelectHandler( onClose: () => void ) {
- return function handleMediaLibraryMenuItemSelect( media: unknown ) {
- const variation = {
- id: selection[ 0 ].id,
- image:
- mapUploadImageToImage( media as unknown as UploadImage ) ||
- undefined,
- };
- onChange( [ variation ], false );
- onClose();
- };
- }
-
- return (
- <Dropdown
- { ...props }
- popoverProps={ {
- placement: 'bottom-end',
- } }
- renderToggle={ ( toggleProps ) =>
- props.renderToggle( { ...toggleProps, isBusy: isUploading } )
- }
- className="woocommerce-image-actions-menu"
- contentClassName="woocommerce-image-actions-menu__menu-content"
- renderContent={ ( { onClose } ) => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup>
- <UploadFilesMenuItem
- allowedTypes={ [ 'image' ] }
- accept="image/*"
- multiple={ false }
- info={ __(
- '1000 pixels wide or larger',
- 'woocommerce'
- ) }
- onUploadProgress={ () => {
- setIsUploading( true );
- onClose();
- } }
- onUploadSuccess={ uploadSuccessHandler( onClose ) }
- onUploadError={ ( error ) => {
- uploadErrorHandler( error );
- setIsUploading( false );
- onClose();
- } }
- />
-
- <MediaLibraryMenuItem
- allowedTypes={ [ 'image' ] }
- multiple={ false }
- value={ selection[ 0 ].id }
- onSelect={ mediaLibraryMenuItemSelectHandler(
- onClose
- ) }
- />
- </MenuGroup>
-
- <VariationQuickUpdateMenuItem.Slot
- group={ 'image-actions-menu' }
- onChange={ ( value ) => onChange( value ) }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ false }
- />
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/image-actions-menu/index.ts b/packages/js/product-editor/src/components/variations-table/image-actions-menu/index.ts
deleted file mode 100644
index 793a9ef119e..00000000000
--- a/packages/js/product-editor/src/components/variations-table/image-actions-menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './image-actions-menu';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/image-actions-menu/style.scss b/packages/js/product-editor/src/components/variations-table/image-actions-menu/style.scss
deleted file mode 100644
index 43a37ba8741..00000000000
--- a/packages/js/product-editor/src/components/variations-table/image-actions-menu/style.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.woocommerce-image-actions-menu {
- display: inline-flex;
-
- &__menu-content {
- // To be rendered below the MediaLibrary modal.
- z-index: 100000;
-
- .components-menu-item__item {
- min-width: 172px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/image-actions-menu/types.ts b/packages/js/product-editor/src/components/variations-table/image-actions-menu/types.ts
deleted file mode 100644
index 6f9d4e54cb3..00000000000
--- a/packages/js/product-editor/src/components/variations-table/image-actions-menu/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { Dropdown } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { VariationActionsMenuProps } from '../variation-actions-menus';
-
-export type ImageActionsMenuProps = Omit<
- React.ComponentProps< typeof Dropdown >,
- 'renderToggle' | 'renderContent'
-> &
- VariationActionsMenuProps & {
- renderToggle(
- props: Parameters<
- React.ComponentProps< typeof Dropdown >[ 'renderToggle' ]
- >[ 0 ] & {
- isBusy?: boolean;
- }
- ): JSX.Element;
- };
diff --git a/packages/js/product-editor/src/components/variations-table/index.ts b/packages/js/product-editor/src/components/variations-table/index.ts
deleted file mode 100644
index 15516a1e6d6..00000000000
--- a/packages/js/product-editor/src/components/variations-table/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './variations-table';
-export * from './variation-actions-menus';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/inventory-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/inventory-menu-item/index.ts
deleted file mode 100644
index 9233c266f70..00000000000
--- a/packages/js/product-editor/src/components/variations-table/inventory-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './inventory-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/inventory-menu-item/inventory-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/inventory-menu-item/inventory-menu-item.tsx
deleted file mode 100644
index 956fedfda52..00000000000
--- a/packages/js/product-editor/src/components/variations-table/inventory-menu-item/inventory-menu-item.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { PRODUCT_STOCK_STATUS_KEYS } from '../../../utils/get-product-stock-status';
-import { UpdateStockMenuItem } from '../update-stock-menu-item';
-import { VariationActionsMenuItemProps } from '../types';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationQuickUpdateMenuItem } from '../variation-actions-menus';
-
-export function InventoryMenuItem( {
- selection,
- onChange,
- onClose,
- supportsMultipleSelection = false,
-}: VariationActionsMenuItemProps ) {
- const ids = selection.map( ( { id } ) => id );
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'right-start',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_click',
- {
- source: TRACKS_SOURCE,
- variation_id: ids,
- }
- );
- onToggle();
- } }
- aria-expanded={ isOpen }
- icon={ chevronRight }
- iconPosition="right"
- >
- { __( 'Inventory', 'woocommerce' ) }
- </MenuItem>
- ) }
- renderContent={ () => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup>
- <UpdateStockMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'manage_stock_toggle',
- variation_id: ids,
- }
- );
- onChange(
- selection.map(
- ( { id, manage_stock } ) => ( {
- id,
- manage_stock: ! manage_stock,
- } )
- )
- );
- onClose();
- } }
- >
- { __( 'Toggle "track quantity"', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_in_stock',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- stock_status:
- PRODUCT_STOCK_STATUS_KEYS.instock,
- manage_stock: false,
- } ) )
- );
- onClose();
- } }
- >
- { __( 'Set status to In stock', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_out_of_stock',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- stock_status:
- PRODUCT_STOCK_STATUS_KEYS.outofstock,
- manage_stock: false,
- } ) )
- );
- onClose();
- } }
- >
- { __(
- 'Set status to Out of stock',
- 'woocommerce'
- ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_on_back_order',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- stock_status:
- PRODUCT_STOCK_STATUS_KEYS.onbackorder,
- manage_stock: false,
- } ) )
- );
- onClose();
- } }
- >
- { __(
- 'Set status to On back order',
- 'woocommerce'
- ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'low_stock_amount_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_inventory_update',
- {
- source: TRACKS_SOURCE,
- action: 'low_stock_amount_set',
- variation_id: ids,
- }
- );
- const lowStockAmount = Number( value );
- if ( Number.isNaN( lowStockAmount ) ) {
- return null;
- }
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- low_stock_amount:
- lowStockAmount,
- manage_stock: true,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Edit low stock threshold', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'inventory' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/pagination/index.ts b/packages/js/product-editor/src/components/variations-table/pagination/index.ts
deleted file mode 100644
index 8b669f44c32..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pagination/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './pagination';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/pagination/pagination.tsx b/packages/js/product-editor/src/components/variations-table/pagination/pagination.tsx
deleted file mode 100644
index a35f3c49454..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pagination/pagination.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { __, sprintf } from '@wordpress/i18n';
-import {
- PaginationPageSizePicker,
- PaginationPageArrowsWithPicker,
- usePagination,
-} from '@woocommerce/components';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { PaginationProps } from './types';
-import {
- DEFAULT_VARIATION_PER_PAGE_OPTION,
- DEFAULT_VARIATION_PER_PAGE_OPTIONS,
-} from '../../../constants';
-
-export function Pagination( {
- className,
- totalCount,
- perPageOptions = DEFAULT_VARIATION_PER_PAGE_OPTIONS,
- defaultPerPage = DEFAULT_VARIATION_PER_PAGE_OPTION,
- onPageChange,
- onPerPageChange,
-}: PaginationProps ) {
- const paginationProps = usePagination( {
- defaultPerPage,
- totalCount,
- onPageChange,
- onPerPageChange,
- } );
-
- // translators: Viewing 1-5 of 100 items. First two %ds are a range of items that are shown on the screen. The last %d is the total amount of items that exist.
- const paginationLabel = __( 'Viewing %d-%d of %d items', 'woocommerce' );
-
- return (
- <div
- className={ clsx(
- className,
- 'woocommerce-product-variations-pagination'
- ) }
- >
- <div className="woocommerce-product-variations-pagination__info">
- { sprintf(
- paginationLabel,
- paginationProps.start,
- paginationProps.end,
- totalCount
- ) }
- </div>
-
- <div className="woocommerce-product-variations-pagination__current-page">
- <PaginationPageArrowsWithPicker { ...paginationProps } />
- </div>
-
- <div className="woocommerce-product-variations-pagination__page-size">
- <PaginationPageSizePicker
- { ...paginationProps }
- total={ totalCount }
- perPageOptions={ perPageOptions }
- label=""
- />
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/pagination/styles.scss b/packages/js/product-editor/src/components/variations-table/pagination/styles.scss
deleted file mode 100644
index d9d3f8fa28d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pagination/styles.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.woocommerce-product-variations-pagination {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- gap: $gap;
- width: 100%;
- user-select: none;
-
- &__info,
- &__current-page,
- &__page-size {
- display: flex;
- align-items: center;
- }
-
- &__current-page {
- justify-content: center;
-
- .woocommerce-pagination__page-arrow-picker-input {
- border-radius: 2px;
- }
-
- .components-button.has-icon {
- min-width: initial;
- width: 30px;
- height: 30px;
- padding: 3px;
- }
- }
-
- &__page-size {
- justify-content: flex-end;
-
- > .woocommerce-pagination__per-page-picker
- .components-base-control
- .components-select-control
- .components-input-control__container
- .components-select-control__input {
- min-height: 30px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/pagination/types.ts b/packages/js/product-editor/src/components/variations-table/pagination/types.ts
deleted file mode 100644
index 85e5bd8f09e..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pagination/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { usePaginationProps } from '@woocommerce/components';
-
-export type PaginationProps = usePaginationProps & {
- className?: string;
- perPageOptions?: number[];
- defaultPerPage?: number;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/pricing-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/pricing-menu-item/index.ts
deleted file mode 100644
index 5d67d02ce75..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pricing-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pricing-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/pricing-menu-item/pricing-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/pricing-menu-item/pricing-menu-item.tsx
deleted file mode 100644
index a4f0214fba9..00000000000
--- a/packages/js/product-editor/src/components/variations-table/pricing-menu-item/pricing-menu-item.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationActionsMenuItemProps } from '../types';
-import { SetListPriceMenuItem } from '../set-list-price-menu-item';
-import { VariationQuickUpdateMenuItem } from '../variation-actions-menus';
-
-function isPercentage( value: string ) {
- return value.endsWith( '%' );
-}
-
-function parsePercentage( value: string ) {
- const stringNumber = value.substring( 0, value.length - 1 );
- if ( Number.isNaN( Number( stringNumber ) ) ) {
- return undefined;
- }
- return Number( stringNumber );
-}
-
-function addFixedOrPercentage(
- value: string,
- fixedOrPercentage: string,
- increaseOrDecrease: 1 | -1 = 1
-) {
- if ( isPercentage( fixedOrPercentage ) ) {
- if ( Number.isNaN( Number( value ) ) ) {
- return 0;
- }
- const percentage = parsePercentage( fixedOrPercentage );
- if ( percentage === undefined ) {
- return Number( value );
- }
- return (
- Number( value ) +
- Number( value ) * ( percentage / 100 ) * increaseOrDecrease
- );
- }
- if ( Number.isNaN( Number( value ) ) ) {
- if ( Number.isNaN( Number( fixedOrPercentage ) ) ) {
- return undefined;
- }
- return Number( fixedOrPercentage );
- }
- return Number( value ) + Number( fixedOrPercentage ) * increaseOrDecrease;
-}
-
-export function PricingMenuItem( {
- selection,
- onChange,
- onClose,
- supportsMultipleSelection = false,
-}: VariationActionsMenuItemProps ) {
- const ids = selection.map( ( { id } ) => id );
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'right-start',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <MenuItem
- onClick={ () => {
- recordEvent( 'product_variations_menu_pricing_click', {
- source: TRACKS_SOURCE,
- variation_id: ids,
- } );
- onToggle();
- } }
- aria-expanded={ isOpen }
- icon={ chevronRight }
- iconPosition="right"
- >
- { __( 'Pricing', 'woocommerce' ) }
- </MenuItem>
- ) }
- renderContent={ () => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup label={ __( 'Regular price', 'woocommerce' ) }>
- <SetListPriceMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'list_price_increase',
- variation_id: ids,
- }
- );
- handlePrompt( {
- message: __(
- 'Enter a value (fixed or %)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'list_price_increase',
- variation_id: ids,
- }
- );
- onChange(
- selection.map(
- ( { id, regular_price } ) => ( {
- id,
- regular_price:
- addFixedOrPercentage(
- regular_price,
- value
- )?.toFixed( 2 ),
- } )
- )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Increase regular price', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'list_price_decrease',
- variation_id: ids,
- }
- );
- handlePrompt( {
- message: __(
- 'Enter a value (fixed or %)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'list_price_increase',
- variation_id: ids,
- }
- );
- onChange(
- selection.map(
- ( { id, regular_price } ) => ( {
- id,
- regular_price:
- addFixedOrPercentage(
- regular_price,
- value,
- -1
- )?.toFixed( 2 ),
- } )
- )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Decrease regular price', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <MenuGroup label={ __( 'Sale price', 'woocommerce' ) }>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_set',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- sale_price: value,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set sale price', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_increase',
- variation_id: ids,
- }
- );
- handlePrompt( {
- message: __(
- 'Enter a value (fixed or %)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_increase',
- variation_id: ids,
- }
- );
- onChange(
- selection.map(
- ( { id, sale_price } ) => ( {
- id,
- sale_price:
- addFixedOrPercentage(
- sale_price,
- value
- )?.toFixed( 2 ),
- } )
- )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Increase sale price', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_decrease',
- variation_id: ids,
- }
- );
- handlePrompt( {
- message: __(
- 'Enter a value (fixed or %)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_decrease',
- variation_id: ids,
- }
- );
- onChange(
- selection.map(
- ( { id, sale_price } ) => ( {
- id,
- sale_price:
- addFixedOrPercentage(
- sale_price,
- value,
- -1
- )?.toFixed( 2 ),
- } )
- )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Decrease sale price', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_pricing_select',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_schedule',
- variation_id: ids,
- }
- );
- handlePrompt( {
- message: __(
- 'Sale start date (YYYY-MM-DD format or leave blank)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_schedule',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- date_on_sale_from_gmt: value,
- } ) )
- );
- },
- } );
- handlePrompt( {
- message: __(
- 'Sale end date (YYYY-MM-DD format or leave blank)',
- 'woocommerce'
- ),
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_pricing_update',
- {
- source: TRACKS_SOURCE,
- action: 'sale_price_schedule',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- date_on_sale_to_gmt: value,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Schedule sale', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'pricing' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/index.ts
deleted file mode 100644
index 87ba30d2602..00000000000
--- a/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './set-list-price-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/set-list-price-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/set-list-price-menu-item.tsx
deleted file mode 100644
index 935237cb622..00000000000
--- a/packages/js/product-editor/src/components/variations-table/set-list-price-menu-item/set-list-price-menu-item.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationActionsMenuItemProps } from '../types';
-
-export function SetListPriceMenuItem( {
- selection,
- onChange,
- onClose,
-}: VariationActionsMenuItemProps ) {
- return (
- <MenuItem
- onClick={ () => {
- const ids = selection.map( ( { id } ) => id );
-
- recordEvent( 'product_variations_menu_pricing_select', {
- source: TRACKS_SOURCE,
- action: 'list_price_set',
- variation_id: ids,
- } );
- handlePrompt( {
- onOk( value ) {
- recordEvent( 'product_variations_menu_pricing_update', {
- source: TRACKS_SOURCE,
- action: 'list_price_set',
- variation_id: ids,
- } );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- regular_price: value,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set regular price', 'woocommerce' ) }
- </MenuItem>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/shipping-menu-item/index.ts
deleted file mode 100644
index 32ebccb0d7b..00000000000
--- a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shipping-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/shipping-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/shipping-menu-item/shipping-menu-item.tsx
deleted file mode 100644
index ba1b45901c3..00000000000
--- a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/shipping-menu-item.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * External dependencies
- */
-import { Dropdown, MenuItem, MenuGroup } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronRight } from '@wordpress/icons';
-import { ProductVariation } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { VariationActionsMenuItemProps } from '../types';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationQuickUpdateMenuItem } from '../variation-actions-menus/variation-quick-update-menu-item';
-
-export function ShippingMenuItem( {
- selection,
- onChange,
- onClose,
- supportsMultipleSelection = false,
-}: VariationActionsMenuItemProps ) {
- const ids = selection.map( ( { id } ) => id );
-
- function handleDimensionsChange(
- value: Partial< ProductVariation[ 'dimensions' ] >
- ) {
- onChange(
- selection.map( ( { id, dimensions } ) => ( {
- id,
- dimensions: {
- ...dimensions,
- ...value,
- },
- } ) )
- );
- }
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'right-start',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <MenuItem
- onClick={ () => {
- recordEvent( 'product_variations_menu_shipping_click', {
- source: TRACKS_SOURCE,
- variation_id: ids,
- } );
- onToggle();
- } }
- aria-expanded={ isOpen }
- icon={ chevronRight }
- iconPosition="right"
- >
- { __( 'Shipping', 'woocommerce' ) }
- </MenuItem>
- ) }
- renderContent={ () => (
- <div className="components-dropdown-menu__menu">
- <MenuGroup>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_shipping_select',
- {
- source: TRACKS_SOURCE,
- action: 'toggle_shipping',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id, virtual } ) => ( {
- id,
- virtual: ! virtual,
- } ) )
- );
- recordEvent(
- 'product_variations_menu_shipping_update',
- {
- source: TRACKS_SOURCE,
- action: 'toggle_shipping',
- variation_id: ids,
- }
- );
- onClose();
- } }
- >
- { __( 'Toggle shipping', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_shipping_select',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_length_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_shipping_update',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_length_set',
- variation_id: ids,
- }
- );
- handleDimensionsChange( {
- length: value,
- } );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set length', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_shipping_select',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_width_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_shipping_update',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_width_set',
- variation_id: ids,
- }
- );
- handleDimensionsChange( {
- width: value,
- } );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set width', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_shipping_select',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_height_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_shipping_update',
- {
- source: TRACKS_SOURCE,
- action: 'dimensions_height_set',
- variation_id: ids,
- }
- );
- handleDimensionsChange( {
- height: value,
- } );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set height', 'woocommerce' ) }
- </MenuItem>
- <MenuItem
- onClick={ () => {
- recordEvent(
- 'product_variations_menu_shipping_select',
- {
- source: TRACKS_SOURCE,
- action: 'weight_set',
- variation_id: ids,
- }
- );
- handlePrompt( {
- onOk( value ) {
- recordEvent(
- 'product_variations_menu_shipping_update',
- {
- source: TRACKS_SOURCE,
- action: 'weight_set',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- weight: value,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Set weight', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'shipping' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </div>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/types.ts b/packages/js/product-editor/src/components/variations-table/shipping-menu-item/types.ts
deleted file mode 100644
index 88a8496812b..00000000000
--- a/packages/js/product-editor/src/components/variations-table/shipping-menu-item/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductVariation } from '@woocommerce/data';
-
-export type ShippingMenuItemProps = {
- variation: ProductVariation;
- handlePrompt(
- label?: string,
- parser?: ( value: string ) => Partial< ProductVariation > | null
- ): void;
- onClose(): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/styles.scss b/packages/js/product-editor/src/components/variations-table/styles.scss
deleted file mode 100644
index 710d1eb0c94..00000000000
--- a/packages/js/product-editor/src/components/variations-table/styles.scss
+++ /dev/null
@@ -1,238 +0,0 @@
-@import "./variation-actions-menus/styles.scss";
-@import "./downloads-menu-item/styles.scss";
-@import "./pagination/styles.scss";
-@import "./table-empty-or-error-state/styles.scss";
-@import "./variations-filter/styles.scss";
-@import "./table-row-skeleton/styles.scss";
-@import "./add-image-menu-item/style.scss";
-@import "./image-actions-menu/style.scss";
-@import "./variation-stock-status-form/styles.scss";
-@import "./variation-pricing-form/styles.scss";
-
-.woocommerce-product-variations {
- display: flex;
- flex-direction: column;
- position: relative;
-
- &__attributes-cell {
- display: flex;
- align-items: center;
- }
-
- &__table {
- &-header {
- .woocommerce-product-variations__table-row {
- min-height: auto;
- }
-
- .woocommerce-product-variations__table-rowheader {
- text-transform: uppercase;
- color: $gray-700;
- font-weight: 500;
- font-size: 11px;
- line-height: $grid-unit-20;
- border-bottom: 1px solid $gray-200;
- }
- }
-
- &-body {
- .woocommerce-product-variations__table-row {
- &:not(:last-child) {
- border-bottom: 1px solid $gray-200;
- }
- }
- }
-
- &-footer {
- border-top: 1px solid $gray-200;
- padding-top: $grid-unit-30;
- }
-
- &-row {
- position: relative;
- display: grid;
- grid-template-columns: $grid-unit-30 3fr 1fr 1fr 2fr;
- column-gap: $grid-unit-30;
- align-items: center;
- border: none;
- min-height: 9 * $grid-unit;
- padding: $grid-unit + $grid-unit-05 0;
- }
-
- .woocommerce-sortable__handle {
- display: none;
- }
- }
-
- &__notice {
- border-left: 0px;
- margin: 0 0 $gap-small 0;
- padding: $gap-small $gap;
-
- &.is-error {
- background-color: #fcf0f1;
- }
-
- .components-notice__actions {
- margin-top: $gap-small;
-
- .components-button:first-child {
- margin-left: 0px;
- }
- }
- }
-
- &__selection {
- margin-left: $gap-smallest;
- display: flex;
- align-items: center;
-
- .woocommerce-tooltip {
- position: absolute;
- left: -$grid-unit-40;
-
- .components-button {
- padding: 0;
- width: 24px;
- height: 24px;
- color: $alert-red;
- rotate: 180deg;
- }
- }
-
- .woocommerce-tooltip__text .components-popover__content {
- width: max-content;
- }
- }
-
- &__filters {
- display: inline-flex;
- flex-wrap: wrap;
- gap: $grid-unit;
- align-items: center;
- grid-column: span 4;
- }
-
- &__loading {
- display: flex;
- flex-direction: column;
- position: absolute;
- z-index: 1;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- gap: $gap;
-
- .components-spinner {
- width: $gap-largest;
- height: $gap-largest;
- }
- }
-
- &__price {
- text-align: right;
- }
-
- &__regular-price--on-sale {
- text-decoration: line-through;
- color: $gray-600;
- margin-left: 6px;
- word-wrap: normal;
- }
-
- &__status-dot {
- margin-right: $gap-smaller;
-
- &.green {
- color: $alert-green;
- }
-
- &.yellow {
- color: $alert-yellow;
- }
-
- &.red {
- color: $alert-red;
- }
- }
-
- &__price--fade,
- &__quantity--fade {
- opacity: 0.5;
- }
-
- &__actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: $gap-smaller;
- margin-right: $gap-smallest;
-
- .variations-actions-menu__toggle:disabled {
- cursor: not-allowed;
- }
-
- &--delete {
- &.components-button.components-menu-item__button.is-link {
- text-decoration: none;
- }
- }
-
- .components-button {
- position: relative;
- color: var(--wp-admin-theme-color);
-
- &:disabled,
- &[aria-disabled="true"] {
- opacity: 1;
- }
- }
-
- .components-button--visible {
- color: $gray-700;
- }
-
- .components-button--hidden {
- color: $alert-red;
- }
- }
-
- &__add-image-button {
- border-radius: 2px;
- border: 1px dashed $gray-400;
- margin-right: $gap-small;
- width: $grid-unit-40;
- height: $grid-unit-40;
- padding: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .components-spinner {
- margin: 0;
- }
- }
-
- &__image-button {
- margin-right: $gap-small;
- width: $grid-unit-40;
- height: $grid-unit-40;
- padding: 0;
- }
-
- &__image {
- width: 100%;
- height: 100%;
- background-position: center center;
- background-size: contain;
- background-repeat: no-repeat;
- }
-
- &__stock-status-actions-menu,
- &__pricing-actions-menu {
- .components-popover__content {
- padding: 0;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/index.ts b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/index.ts
deleted file mode 100644
index 22f664cd64d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './table-empty-or-error-state';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/styles.scss b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/styles.scss
deleted file mode 100644
index 9e13383ae45..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/styles.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.woocommerce-variations-table-error-or-empty-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border-radius: 2px;
- border: 1px solid $gray-300;
- padding: $grid-unit-40;
- position: absolute;
- z-index: 1;
- width: 100%;
- height: auto;
-
- &__message {
- color: $gray-900;
- font-size: 13px;
- font-weight: 600;
- line-height: 16px;
- margin: $grid-unit-50 + 2 0 $grid-unit-15 + 2 0;
- }
-
- &__actions {
- display: flex;
- align-items: center;
- justify-content: center;
- .is-link {
- text-decoration: none;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/table-empty-or-error-state.tsx b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/table-empty-or-error-state.tsx
deleted file mode 100644
index aa5e8322691..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/table-empty-or-error-state.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { TableEmptyOrErrorStateProps } from './types';
-import { ErrorVariationsImage } from '../../../images/error-variations-image';
-import { EmptyVariationsImage } from '../../../images/empty-variations-image';
-
-export function EmptyOrErrorTableState( {
- message,
- actionText,
- isError,
- onActionClick,
-}: TableEmptyOrErrorStateProps ) {
- return (
- <div className="woocommerce-variations-table-error-or-empty-state">
- { isError ? <ErrorVariationsImage /> : <EmptyVariationsImage /> }
- <p className="woocommerce-variations-table-error-or-empty-state__message">
- { isError
- ? __( 'We couldn’t load the variations', 'woocommerce' )
- : message ?? __( 'No variations yet', 'woocommerce' ) }
- </p>
-
- <div className="woocommerce-variations-table-error-or-empty-state__actions">
- <Button variant="link" onClick={ onActionClick }>
- { isError
- ? __( 'Try again', 'woocommerce' )
- : actionText ??
- __( 'Generate from options', 'woocommerce' ) }
- </Button>
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/types.ts b/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/types.ts
deleted file mode 100644
index 34305d82e21..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-empty-or-error-state/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { MouseEvent } from 'react';
-
-export type TableEmptyOrErrorStateProps = {
- message?: string;
- actionText?: string;
- isError: boolean;
- onActionClick( event: MouseEvent< HTMLButtonElement > ): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/index.ts b/packages/js/product-editor/src/components/variations-table/table-row-skeleton/index.ts
deleted file mode 100644
index 91b9eeb5980..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './table-row-skeleton';
diff --git a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/styles.scss b/packages/js/product-editor/src/components/variations-table/table-row-skeleton/styles.scss
deleted file mode 100644
index 8af1dc337ea..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/styles.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.woocommerce-table-row-skeleton {
- @mixin skeleton {
- @include placeholder();
- background-color: $gray-200;
- border-radius: $grid-unit-05;
- width: $grid-unit-30;
- min-height: $grid-unit-30;
- }
-
- &__checkbox {
- @include skeleton();
- flex-shrink: 0;
- }
-
- &__attribute-option {
- @include skeleton();
- width: 9 * $grid-unit;
- }
-
- &__regular-price,
- &__quantity {
- @include skeleton();
- width: $grid-unit-80;
- display: inline-block;
- }
-
- &__visibility-icon {
- @include skeleton();
- flex-shrink: 0;
- }
-
- &__edit-link {
- @include skeleton();
- width: $grid-unit-70;
- flex-shrink: 0;
- }
-
- &__menu-toggle {
- @include skeleton();
- width: $grid-unit-40 + $grid-unit-05;
- flex-shrink: 0;
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/table-row-skeleton.tsx b/packages/js/product-editor/src/components/variations-table/table-row-skeleton/table-row-skeleton.tsx
deleted file mode 100644
index 0281bddfb58..00000000000
--- a/packages/js/product-editor/src/components/variations-table/table-row-skeleton/table-row-skeleton.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export function TableRowSkeleton() {
- return (
- <div
- className="woocommerce-table-row-skeleton woocommerce-product-variations__table-row"
- aria-hidden="true"
- >
- <div className="woocommerce-sortable__handle" />
-
- <div className="woocommerce-product-variations__selection">
- <div className="woocommerce-table-row-skeleton__checkbox" />
- </div>
-
- <div className="woocommerce-product-variations__attributes">
- { Array( 2 )
- .fill( 0 )
- .map( ( _, index ) => (
- <div
- key={ index }
- className="woocommerce-tag woocommerce-product-variations__attribute"
- >
- <div className="woocommerce-table-row-skeleton__attribute-option" />
- </div>
- ) ) }
- </div>
-
- <div className="woocommerce-product-variations__price">
- <div className="woocommerce-table-row-skeleton__regular-price" />
- </div>
-
- <div className="woocommerce-product-variations__quantity">
- <div className="woocommerce-table-row-skeleton__quantity" />
- </div>
-
- <div className="woocommerce-product-variations__actions">
- <div className="woocommerce-table-row-skeleton__visibility-icon" />
-
- <div className="woocommerce-table-row-skeleton__edit-link" />
-
- <div className="woocommerce-table-row-skeleton__menu-toggle" />
- </div>
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/index.ts
deleted file mode 100644
index 198000ac60d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toggle-visibility-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/toggle-visibility-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/toggle-visibility-menu-item.tsx
deleted file mode 100644
index 1622c08a99c..00000000000
--- a/packages/js/product-editor/src/components/variations-table/toggle-visibility-menu-item/toggle-visibility-menu-item.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { VariationActionsMenuItemProps } from '../types';
-
-export function ToggleVisibilityMenuItem( {
- selection,
- onChange,
- onClose,
-}: VariationActionsMenuItemProps ) {
- function toggleStatus( currentStatus: string ) {
- return currentStatus === 'private' ? 'publish' : 'private';
- }
-
- function handleMenuItemClick() {
- const ids = selection.map( ( { id } ) => id );
-
- recordEvent( 'product_variations_menu_toggle_visibility_select', {
- source: TRACKS_SOURCE,
- action: 'status_set',
- variation_id: ids,
- } );
-
- onChange(
- selection.map( ( { id, status } ) => ( {
- id,
- status: toggleStatus( status ),
- } ) )
- );
-
- recordEvent( 'product_variations_toggle_visibility_update', {
- source: TRACKS_SOURCE,
- action: 'status_set',
- variation_id: ids,
- } );
-
- onClose();
- }
-
- return (
- <MenuItem onClick={ handleMenuItemClick }>
- { __( 'Toggle visibility', 'woocommerce' ) }
- </MenuItem>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/types.ts b/packages/js/product-editor/src/components/variations-table/types.ts
deleted file mode 100644
index 2abfce98790..00000000000
--- a/packages/js/product-editor/src/components/variations-table/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { PartialProductVariation, ProductVariation } from '@woocommerce/data';
-
-export type VariationActionsMenuItemProps = {
- selection: ProductVariation[];
- onChange(
- values: PartialProductVariation[] | React.FormEvent< HTMLDivElement >,
- showSuccess?: boolean
- ): void;
- onClose(): void;
- supportsMultipleSelection?: boolean;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/index.ts b/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/index.ts
deleted file mode 100644
index b2ecb3cb111..00000000000
--- a/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './update-stock-menu-item';
diff --git a/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/update-stock-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/update-stock-menu-item.tsx
deleted file mode 100644
index cc471066d5d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/update-stock-menu-item/update-stock-menu-item.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../../constants';
-import { handlePrompt } from '../../../utils/handle-prompt';
-import { VariationActionsMenuItemProps } from '../types';
-
-export function UpdateStockMenuItem( {
- selection,
- onChange,
- onClose,
-}: VariationActionsMenuItemProps ) {
- return (
- <MenuItem
- onClick={ () => {
- const ids = selection.map( ( { id } ) => id );
-
- recordEvent( 'product_variations_menu_inventory_select', {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: ids,
- } );
- handlePrompt( {
- onOk( value ) {
- const stockQuantity = Number( value );
- if ( Number.isNaN( stockQuantity ) ) {
- return;
- }
- recordEvent(
- 'product_variations_menu_inventory_update',
- {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: ids,
- }
- );
- onChange(
- selection.map( ( { id } ) => ( {
- id,
- stock_quantity: stockQuantity,
- manage_stock: true,
- } ) )
- );
- },
- } );
- onClose();
- } }
- >
- { __( 'Update stock', 'woocommerce' ) }
- </MenuItem>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/use-variations/index.ts b/packages/js/product-editor/src/components/variations-table/use-variations/index.ts
deleted file mode 100644
index a8fa661b497..00000000000
--- a/packages/js/product-editor/src/components/variations-table/use-variations/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './use-variations';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/use-variations/test/use-variations.spec.tsx b/packages/js/product-editor/src/components/variations-table/use-variations/test/use-variations.spec.tsx
deleted file mode 100644
index 445257a50d7..00000000000
--- a/packages/js/product-editor/src/components/variations-table/use-variations/test/use-variations.spec.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook, act } from '@testing-library/react';
-import { resolveSelect, useSelect } from '@wordpress/data';
-import type { ProductVariation } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { useVariations } from '../use-variations';
-
-// Mock WordPress dependencies
-jest.mock( '@wordpress/core-data', () => ( {
- createSelector: jest.fn(),
- useEntityProp: jest.fn().mockReturnValue( [ 123 ] ),
- useEntityRecord: jest.fn().mockReturnValue( {
- editedRecord: {
- id: 123,
- type: 'variable',
- variations: [],
- },
- hasEdits: false,
- isLoading: false,
- } ),
-} ) );
-
-jest.mock( '@woocommerce/data', () => ( {
- experimentalProductVariationsStore: 'wc/experimental/product-variations',
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
- dispatch: jest.fn( () => ( {
- invalidateResolution: jest.fn(),
- } ) ),
- resolveSelect: jest.fn( () => ( {
- getProductVariations: jest.fn(),
- getProductVariationsTotalCount: jest.fn(),
- } ) ),
- useSelect: jest.fn( () => {
- return {
- isGeneratingVariations: false,
- generateError: null,
- getProductVariations: jest.fn(),
- getProductVariationsTotalCount: jest.fn(),
- };
- } ),
-} ) );
-
-describe( 'useVariations', () => {
- const mockProductId = 123;
- const mockVariation = {
- id: 1,
- attributes: [],
- downloads: [],
- name: '',
- parent_id: mockProductId,
- menu_order: 0,
- status: 'publish',
- description: '',
- sku: '',
- regular_price: '',
- sale_price: '',
- date_created: '',
- date_created_gmt: '',
- date_modified: '',
- date_modified_gmt: '',
- tax_status: 'taxable',
- tax_class: '',
- manage_stock: false,
- stock_quantity: null,
- stock_status: 'instock',
- backorders: 'no',
- weight: '',
- dimensions: {
- length: '',
- width: '',
- height: '',
- },
- shipping_class: '',
- shipping_class_id: 0,
- image: undefined,
- permalink: '',
- } as unknown as ProductVariation;
-
- beforeEach( () => {
- jest.clearAllMocks();
- ( resolveSelect as jest.Mock ).mockReturnValue( {
- getProductVariations: jest
- .fn()
- .mockResolvedValue( [ mockVariation ] ),
- getProductVariationsTotalCount: jest.fn().mockResolvedValue( 1 ),
- } );
- ( useSelect as jest.Mock ).mockImplementation( () => ( {
- isGeneratingVariations: false,
- generateError: null,
- getProductVariations: jest
- .fn()
- .mockResolvedValue( [ mockVariation ] ),
- getProductVariationsTotalCount: jest.fn().mockResolvedValue( 1 ),
- } ) );
- } );
-
- it( 'should fetch variations with default orderby parameter', async () => {
- const { result } = renderHook( () =>
- useVariations( { productId: mockProductId } )
- );
-
- await act( async () => {
- result.current.getCurrentVariations();
- } );
-
- const mockSelect = resolveSelect as jest.Mock;
- const getProductVariations = mockSelect().getProductVariations;
-
- expect( getProductVariations ).toHaveBeenCalledWith(
- expect.objectContaining( {
- orderby: 'menu_order',
- product_id: mockProductId,
- } )
- );
- } );
-
- it( 'should handle pagination correctly', async () => {
- const { result } = renderHook( () =>
- useVariations( { productId: mockProductId } )
- );
-
- await act( async () => {
- result.current.onPageChange( 2 );
- } );
-
- const mockSelect = resolveSelect as jest.Mock;
- const getProductVariations = mockSelect().getProductVariations;
-
- expect( getProductVariations ).toHaveBeenCalledWith(
- expect.objectContaining( {
- page: 2,
- product_id: mockProductId,
- } )
- );
- } );
-
- it( 'should set loading state correctly', async () => {
- const { result } = renderHook( () =>
- useVariations( { productId: mockProductId } )
- );
-
- expect( result.current.isLoading ).toBe( false );
-
- await act( async () => {
- result.current.getCurrentVariations();
- } );
-
- expect( result.current.isLoading ).toBe( false );
- } );
-
- it( 'should handle errors correctly', async () => {
- const error = new Error( 'Test error' );
- ( resolveSelect as jest.Mock ).mockReturnValue( {
- getProductVariations: jest.fn().mockRejectedValue( error ),
- getProductVariationsTotalCount: jest
- .fn()
- .mockRejectedValue( error ),
- } );
-
- const { result } = renderHook( () =>
- useVariations( { productId: mockProductId } )
- );
-
- await act( async () => {
- result.current.getCurrentVariations();
- } );
-
- expect( result.current.variationsError ).toBe( error );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/variations-table/use-variations/types.ts b/packages/js/product-editor/src/components/variations-table/use-variations/types.ts
deleted file mode 100644
index f8beb1c39e9..00000000000
--- a/packages/js/product-editor/src/components/variations-table/use-variations/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type UseVariationsProps = {
- productId: Product[ 'id' ];
-};
-
-export type GetVariationsRequest = {
- product_id: number;
- page?: number;
- per_page?: number;
- order?: 'asc' | 'desc';
- orderby?: string;
- attributes?: AttributeFilters[];
-};
-
-export type AttributeFilters = { attribute: string; terms: string[] };
diff --git a/packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts b/packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts
deleted file mode 100644
index c3bf06a5a7f..00000000000
--- a/packages/js/product-editor/src/components/variations-table/use-variations/use-variations.ts
+++ /dev/null
@@ -1,544 +0,0 @@
-/**
- * External dependencies
- */
-import {
- experimentalProductVariationsStore,
- PartialProductVariation,
- ProductProductAttribute,
- ProductVariation,
-} from '@woocommerce/data';
-import { dispatch, resolveSelect } from '@wordpress/data';
-import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { DEFAULT_VARIATION_PER_PAGE_OPTION } from '../../../constants';
-import {
- AttributeFilters,
- GetVariationsRequest,
- UseVariationsProps,
-} from './types';
-import { useProductVariationsHelper } from '../../../hooks/use-product-variations-helper';
-
-export function useVariations( { productId }: UseVariationsProps ) {
- // Variation pagination
-
- const [ variations, setVariations ] = useState< ProductVariation[] >( [] );
- const [ totalCount, setTotalCount ] = useState< number >( 0 );
- const [ isLoading, setIsLoading ] = useState( false );
- const [ getVariationsError, setGetVariationsError ] = useState< unknown >();
- const [ filters, setFilters ] = useState< AttributeFilters[] >( [] );
- const perPageRef = useRef( DEFAULT_VARIATION_PER_PAGE_OPTION );
-
- async function getCurrentVariationsPage(
- params: GetVariationsRequest,
- invalidateResolutionBeforeRequest = false
- ) {
- const requestParams = {
- product_id: params.product_id,
- page: params.page || 1,
- per_page: params.per_page || perPageRef.current,
- order: params.order || 'asc',
- orderby: ( params.orderby || 'menu_order' ) as
- | 'date'
- | 'id'
- | 'include'
- | 'title'
- | 'slug'
- | 'menu_order',
- attributes: params.attributes || [],
- } as const;
-
- try {
- const { invalidateResolution } = dispatch(
- experimentalProductVariationsStore
- );
-
- if ( invalidateResolutionBeforeRequest ) {
- await invalidateResolution( 'getProductVariations', [
- requestParams,
- ] );
- await invalidateResolution( 'getProductVariationsTotalCount', [
- requestParams,
- ] );
- }
-
- const { getProductVariations, getProductVariationsTotalCount } =
- resolveSelect( experimentalProductVariationsStore );
-
- setIsLoading( true );
- setGetVariationsError( undefined );
-
- const data = await getProductVariations( requestParams );
- const total = await getProductVariationsTotalCount( requestParams );
-
- setVariations( data );
- setTotalCount( total );
- setIsLoading( false );
- } catch ( error ) {
- setGetVariationsError( error );
- setIsLoading( false );
- }
- }
-
- function onPageChange( page: number ) {
- getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- page,
- } );
- }
-
- function onPerPageChange( perPage: number ) {
- perPageRef.current = perPage;
-
- getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- } );
- }
-
- // Variation selection
-
- const [ selectedCount, setSelectedCount ] = useState( 0 );
- const [ isSelectingAll, setIsSelectingAll ] = useState( false );
-
- const selectedVariationsRef = useRef< Record< number, ProductVariation > >(
- {}
- );
-
- const selected = useMemo(
- function getSelected() {
- return selectedCount > 0
- ? Object.values( selectedVariationsRef.current )
- : [];
- },
- [ selectedCount ]
- );
-
- const isSelected = useCallback(
- function isSelected( variation: ProductVariation ) {
- return (
- selectedCount > 0 &&
- variation.id in selectedVariationsRef.current
- );
- },
- [ selectedCount ]
- );
-
- const areAllSelected = useMemo(
- () => selectedCount > 0 && variations.every( isSelected ),
- [ variations, selectedCount, isSelected ]
- );
-
- const areSomeSelected = useMemo(
- () => selectedCount > 0 && variations.some( isSelected ),
- [ variations, selectedCount, isSelected ]
- );
-
- function onSelect( variation: ProductVariation ) {
- return function handleChange( checked: boolean ) {
- if ( checked ) {
- selectedVariationsRef.current[ variation.id ] = variation;
- setSelectedCount( ( current ) => current + 1 );
- } else {
- delete selectedVariationsRef.current[ variation.id ];
- setSelectedCount( ( current ) => current - 1 );
- }
- };
- }
-
- function onSelectPage( checked: boolean ) {
- if ( checked ) {
- variations.forEach( ( variation ) => {
- selectedVariationsRef.current[ variation.id ] = variation;
- } );
- } else {
- variations.forEach( ( variation ) => {
- delete selectedVariationsRef.current[ variation.id ];
- } );
- }
- setSelectedCount( Object.keys( selectedVariationsRef.current ).length );
- }
-
- async function onSelectAll() {
- setIsSelectingAll( true );
-
- const { getProductVariations } = resolveSelect(
- experimentalProductVariationsStore
- );
-
- let currentPage = 1;
- let fetchedCount = 0;
-
- while ( fetchedCount < totalCount ) {
- const chunk = await getProductVariations( {
- product_id: productId,
- page: currentPage++,
- per_page: 50,
- order: 'asc',
- orderby: 'menu_order',
- attributes: filters,
- } );
-
- fetchedCount += chunk.length;
-
- chunk.forEach( ( variation: ProductVariation ) => {
- selectedVariationsRef.current[ variation.id ] = variation;
- } );
- }
-
- setSelectedCount( fetchedCount );
-
- setIsSelectingAll( false );
-
- return fetchedCount;
- }
-
- function onClearSelection() {
- selectedVariationsRef.current = {};
- setSelectedCount( 0 );
- }
-
- // Filters
-
- function onFilter( attribute: ProductProductAttribute ) {
- return function handleFilter( options: string[] ) {
- let isPresent = false;
-
- const newFilters = filters.reduce< AttributeFilters[] >(
- ( prev, item ) => {
- if ( item.attribute === attribute.slug ) {
- isPresent = true;
- if ( options.length === 0 ) {
- return prev;
- }
- return [ ...prev, { ...item, terms: options } ];
- }
- return [ ...prev, item ];
- },
- []
- );
-
- if ( ! isPresent ) {
- newFilters.push( {
- attribute: attribute.slug,
- terms: options,
- } );
- }
-
- onClearSelection();
-
- getCurrentVariationsPage( {
- product_id: productId,
- attributes: newFilters,
- } );
-
- setFilters( newFilters );
- };
- }
-
- function getFilters( attribute: ProductProductAttribute ) {
- return (
- filters.find( ( filter ) => filter.attribute === attribute.slug )
- ?.terms ?? []
- );
- }
-
- function hasFilters() {
- return Boolean( filters.length );
- }
-
- async function clearFilters() {
- setFilters( [] );
-
- return getCurrentVariationsPage( {
- product_id: productId,
- } );
- }
-
- // Updating
-
- const [ isUpdating, setIsUpdating ] = useState< Record< number, boolean > >(
- {}
- );
-
- async function onUpdate( {
- id: variationId,
- ...variation
- }: PartialProductVariation ) {
- if ( isUpdating[ variationId ] ) return;
-
- setVariations( ( current ) =>
- current.map( ( currentVariation ) => {
- if ( currentVariation.id === variationId ) {
- return {
- ...currentVariation,
- ...variation,
- };
- }
- return currentVariation;
- } )
- );
-
- const { updateProductVariation } = dispatch(
- experimentalProductVariationsStore
- );
-
- return updateProductVariation(
- { product_id: productId, id: variationId },
- variation
- ).then( async ( response ) => {
- await dispatch( 'core' ).invalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product_variation',
- variationId,
- ] );
-
- await getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- } );
-
- return response;
- } );
- }
-
- async function onDelete( variationId: number ) {
- if ( isUpdating[ variationId ] ) return;
-
- const { deleteProductVariation, invalidateResolutionForStore } =
- dispatch( experimentalProductVariationsStore );
-
- return deleteProductVariation( {
- product_id: productId,
- id: variationId,
- } ).then( async ( response: ProductVariation ) => {
- onSelect( response )( false );
-
- await dispatch( 'core' ).invalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product',
- productId,
- ] );
-
- await dispatch( 'core' ).invalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product_variation',
- variationId,
- ] );
-
- await invalidateResolutionForStore();
-
- await getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- } );
-
- return response;
- } );
- }
-
- async function onBatchUpdate( values: PartialProductVariation[] ) {
- const { invalidateResolution: coreInvalidateResolution } =
- dispatch( 'core' );
-
- const { batchUpdateProductVariations, invalidateResolutionForStore } =
- dispatch( experimentalProductVariationsStore );
-
- selectedVariationsRef.current = {};
- setSelectedCount( 0 );
-
- let currentPage = 1;
- const offset = 50;
-
- const result: ProductVariation[] = [];
-
- while ( ( currentPage - 1 ) * offset < values.length ) {
- const fromIndex = ( currentPage - 1 ) * offset;
- const toIndex = fromIndex + offset;
- const subset = values.slice( fromIndex, toIndex );
-
- setIsUpdating( ( current ) =>
- subset.reduce(
- ( prev, variation ) => ( {
- ...prev,
- [ variation.id ]: true,
- } ),
- fromIndex === 0 ? {} : current
- )
- );
-
- const response = await batchUpdateProductVariations(
- { product_id: productId },
- {
- update: subset,
- }
- );
-
- currentPage++;
-
- const updatedVariations = response?.update ?? [];
- result.push( ...updatedVariations );
-
- for ( const variation of updatedVariations ) {
- await coreInvalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product_variation',
- variation.id,
- ] );
-
- selectedVariationsRef.current[ variation.id ] = variation;
- setSelectedCount( ( current ) => current + 1 );
- }
- }
-
- setIsUpdating( {} );
-
- await invalidateResolutionForStore();
- await getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- } );
-
- return { update: result };
- }
-
- async function onBatchDelete( values: PartialProductVariation[] ) {
- const { invalidateResolution: coreInvalidateResolution } =
- dispatch( 'core' );
-
- const { batchUpdateProductVariations, invalidateResolutionForStore } =
- dispatch( experimentalProductVariationsStore );
-
- selectedVariationsRef.current = {};
- setSelectedCount( 0 );
-
- let currentPage = 1;
- const offset = 50;
-
- const result: ProductVariation[] = [];
-
- while ( ( currentPage - 1 ) * offset < values.length ) {
- const fromIndex = ( currentPage - 1 ) * offset;
- const toIndex = fromIndex + offset;
- const subset = values.slice( fromIndex, toIndex );
-
- setIsUpdating( ( current ) =>
- subset.reduce(
- ( prev, variation ) => ( {
- ...prev,
- [ variation.id ]: true,
- } ),
- fromIndex === 0 ? {} : current
- )
- );
-
- const response = await batchUpdateProductVariations(
- { product_id: productId },
- {
- delete: subset.map( ( { id } ) => id ),
- }
- );
-
- currentPage++;
-
- const deletedVariations = response?.delete ?? [];
- result.push( ...( response?.delete ?? [] ) );
-
- for ( const variation of deletedVariations ) {
- await coreInvalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product_variation',
- variation.id,
- ] );
-
- delete selectedVariationsRef.current[ variation.id ];
- setSelectedCount( ( current ) => current - 1 );
- }
- }
-
- setIsUpdating( {} );
-
- await coreInvalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product',
- productId,
- ] );
- await invalidateResolutionForStore();
- await getCurrentVariationsPage( {
- product_id: productId,
- attributes: filters,
- } );
-
- return { delete: result };
- }
-
- // Generation
-
- const {
- isGenerating,
- generateProductVariations: onGenerate,
- generateError,
- } = useProductVariationsHelper();
-
- const wasGenerating = useRef( false );
-
- function getCurrentVariations() {
- if ( isGenerating ) {
- setFilters( [] );
- onClearSelection();
- }
-
- const didMount =
- wasGenerating.current === false && isGenerating === false;
- const didGenerate =
- wasGenerating.current === true && isGenerating === false;
-
- if ( didMount || didGenerate ) {
- getCurrentVariationsPage(
- {
- product_id: productId,
- },
- true
- );
- }
-
- wasGenerating.current = Boolean( isGenerating );
- }
-
- return {
- isLoading,
- variations,
- totalCount,
- onPageChange,
- onPerPageChange,
- onFilter,
- getFilters,
- hasFilters,
- clearFilters,
-
- selected,
- isSelectingAll,
- selectedCount,
- areAllSelected,
- areSomeSelected,
- isSelected,
- onSelect,
- onSelectPage,
- onSelectAll,
- onClearSelection,
-
- isUpdating,
- onUpdate,
- onDelete,
- onBatchUpdate,
- onBatchDelete,
-
- isGenerating,
- onGenerate,
- variationsError: generateError ?? getVariationsError,
- getCurrentVariations,
- };
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/constants.ts b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/constants.ts
deleted file mode 100644
index 8cf6f6a192c..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const MULTIPLE_UPDATE = 'multiple-update';
-export const SINGLE_UPDATE = 'single-update';
-export const VARIATION_ACTIONS_SLOT_NAME = 'woocommerce-actions-menu-slot';
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/index.ts b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/index.ts
deleted file mode 100644
index a04621ef3bf..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './multiple-update-menu';
-export * from './single-update-menu';
-export * from './variation-quick-update-menu-item';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/multiple-update-menu.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/multiple-update-menu.tsx
deleted file mode 100644
index f28370eadff..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/multiple-update-menu.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, Dropdown } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { VariationActionsMenuProps } from './types';
-import { VariationActions } from './variation-actions';
-
-export function MultipleUpdateMenu( {
- selection,
- disabled,
- onChange,
- onDelete,
-}: VariationActionsMenuProps ) {
- if ( ! selection ) {
- return null;
- }
-
- return (
- <Dropdown
- popoverProps={ {
- placement: 'bottom-end',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- disabled={ disabled }
- aria-expanded={ isOpen }
- icon={ isOpen ? chevronUp : chevronDown }
- variant="secondary"
- onClick={ onToggle }
- className="variations-actions-menu__toggle"
- >
- <span>{ __( 'Quick update', 'woocommerce' ) }</span>
- </Button>
- ) }
- renderContent={ ( { onClose }: { onClose: () => void } ) => (
- <VariationActions
- selection={ selection }
- onClose={ onClose }
- onChange={ onChange }
- onDelete={ onDelete }
- supportsMultipleSelection={ true }
- />
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/single-update-menu.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/single-update-menu.tsx
deleted file mode 100644
index c79b8c31195..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/single-update-menu.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { DropdownMenu } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { moreVertical } from '@wordpress/icons';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { VariationActionsMenuProps } from './types';
-import { TRACKS_SOURCE } from '../../../constants';
-import { VariationActions } from './variation-actions';
-
-export function SingleUpdateMenu( {
- selection,
- onChange,
- onDelete,
-}: VariationActionsMenuProps ) {
- if ( ! selection || selection.length !== 1 ) {
- return null;
- }
-
- return (
- <DropdownMenu
- popoverProps={ {
- placement: 'left-start',
- } }
- icon={ moreVertical }
- label={ __( 'Actions', 'woocommerce' ) }
- toggleProps={ {
- onClick() {
- recordEvent( 'product_variations_menu_view', {
- source: TRACKS_SOURCE,
- variation_id: selection[ 0 ].id,
- } );
- },
- } }
- >
- { ( { onClose }: { onClose: () => void } ) => (
- <VariationActions
- selection={ selection }
- onClose={ onClose }
- onChange={ onChange }
- onDelete={ onDelete }
- supportsMultipleSelection={ false }
- />
- ) }
- </DropdownMenu>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/styles.scss b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/styles.scss
deleted file mode 100644
index 7956e681575..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/styles.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.variations-actions-menu {
- &__toggle {
- flex-direction: row-reverse;
-
- > span {
- margin: 0 6px;
- }
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-actions.test.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-actions.test.tsx
deleted file mode 100644
index 4bd703fb4b0..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-actions.test.tsx
+++ /dev/null
@@ -1,410 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-import { ProductVariation } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { createElement } from 'react';
-
-/**
- * Internal dependencies
- */
-import { SingleUpdateMenu, MultipleUpdateMenu } from '..';
-import { TRACKS_SOURCE } from '../../../../constants';
-import { PRODUCT_STOCK_STATUS_KEYS } from '../../../../utils/get-product-stock-status';
-
-jest.mock( '@woocommerce/tracks', () => ( {
- recordEvent: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/media-utils', () => ( {
- MediaUpload: ( {
- onSelect,
- render: mockRender,
- }: {
- onSelect: ( { id, url }: { id: number; url: string } ) => void;
- render: ( { open }: { open: () => void } ) => JSX.Element | null;
- } ) => {
- const mockOpenMediaUploadModal = () => {
- const uploadedImageMock = {
- id: 1,
- url: 'https://example.com/image.jpg',
- };
- onSelect( uploadedImageMock );
- };
- return mockRender( { open: mockOpenMediaUploadModal } );
- },
-} ) );
-
-const mockVariation = {
- id: 10,
- manage_stock: false,
- attributes: [],
- downloads: [],
- name: '',
- parent_id: 1,
-} as unknown as ProductVariation;
-
-const anotherMockVariation = {
- id: 11,
- manage_stock: false,
- attributes: [],
- downloads: [],
- name: '',
- parent_id: 1,
-} as unknown as ProductVariation;
-
-describe( 'MultipleUpdateMenu', () => {
- let onChangeMock: jest.Mock, onDeleteMock: jest.Mock;
- beforeEach( () => {
- onChangeMock = jest.fn();
- onDeleteMock = jest.fn();
- ( recordEvent as jest.Mock ).mockClear();
- } );
-
- it( 'should render dropdown with pricing, inventory, and delete options when opened', () => {
- const { queryByText, getByRole } = render(
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- fireEvent.click( getByRole( 'button', { name: 'Quick update' } ) );
- expect( queryByText( 'Update stock' ) ).toBeInTheDocument();
- expect( queryByText( 'Set regular price' ) ).toBeInTheDocument();
- expect( queryByText( 'Toggle visibility' ) ).toBeInTheDocument();
- } );
-
- it( 'should call onDelete when Delete menuItem is clicked', async () => {
- const { getByRole, getByText } = render(
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click(
- getByRole( 'button', { name: 'Quick update' } )
- );
- await fireEvent.click( getByText( 'Delete' ) );
- expect( onDeleteMock ).toHaveBeenCalled();
- } );
-} );
-
-describe( 'SingleUpdateMenu', () => {
- let onChangeMock: jest.Mock, onDeleteMock: jest.Mock;
- beforeEach( () => {
- onChangeMock = jest.fn();
- onDeleteMock = jest.fn();
- ( recordEvent as jest.Mock ).mockClear();
- } );
-
- it( 'should trigger product_variations_menu_view track when dropdown toggled', () => {
- const { getByRole } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_view',
- {
- source: TRACKS_SOURCE,
- variation_id: 10,
- }
- );
- } );
-
- it( 'should render dropdown with pricing, inventory, and delete options when opened', () => {
- const { queryByText, getByRole } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- expect( queryByText( 'Pricing' ) ).toBeInTheDocument();
- expect( queryByText( 'Inventory' ) ).toBeInTheDocument();
- expect( queryByText( 'Delete' ) ).toBeInTheDocument();
- } );
-
- it( 'should call onDelete when Delete menuItem is clicked', async () => {
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Delete' ) );
- expect( onDeleteMock ).toHaveBeenCalled();
- } );
-
- describe( 'Inventory sub-menu', () => {
- it( 'should open Inventory sub-menu if Inventory is clicked with click track', async () => {
- const { queryByText, getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_click',
- {
- source: TRACKS_SOURCE,
- variation_id: [ 10 ],
- }
- );
- expect( queryByText( 'Update stock' ) ).toBeInTheDocument();
- expect(
- queryByText( 'Toggle "track quantity"' )
- ).toBeInTheDocument();
- expect(
- queryByText( 'Set status to In stock' )
- ).toBeInTheDocument();
- } );
-
- it( 'should onChange with stock_quantity when Update stock is clicked', async () => {
- window.prompt = jest.fn().mockReturnValue( '10' );
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Update stock' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- stock_quantity: 10,
- manage_stock: true,
- },
- ] );
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_update',
- {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: [ 10 ],
- }
- );
- } );
-
- it( 'should not call onChange when prompt is cancelled', async () => {
- window.prompt = jest.fn().mockReturnValue( null );
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Update stock' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).not.toHaveBeenCalledWith( {
- stock_quantity: 10,
- manage_stock: true,
- } );
- expect( recordEvent ).not.toHaveBeenCalledWith(
- 'product_variations_menu_inventory_update',
- {
- source: TRACKS_SOURCE,
- action: 'stock_quantity_set',
- variation_id: [ 10 ],
- }
- );
- } );
-
- it( 'should call onChange with toggled manage_stock when toggle "track quantity" is clicked', async () => {
- const { getByRole, getByText, rerender } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Toggle "track quantity"' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'manage_stock_toggle',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- manage_stock: true,
- },
- ] );
- onChangeMock.mockClear();
- rerender(
- <SingleUpdateMenu
- selection={ [ { ...mockVariation, manage_stock: true } ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Toggle "track quantity"' ) );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- manage_stock: false,
- },
- ] );
- } );
-
- it( 'should call onChange with toggled stock_status when toggle "Set status to In stock" is clicked', async () => {
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Set status to In stock' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_in_stock',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- stock_status: PRODUCT_STOCK_STATUS_KEYS.instock,
- manage_stock: false,
- },
- ] );
- } );
-
- it( 'should call onChange with toggled stock_status when toggle "Set status to Out of stock" is clicked', async () => {
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Set status to Out of stock' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_out_of_stock',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- stock_status: PRODUCT_STOCK_STATUS_KEYS.outofstock,
- manage_stock: false,
- },
- ] );
- } );
-
- it( 'should call onChange with toggled stock_status when toggle "Set status to On back order" is clicked', async () => {
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Set status to On back order' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'set_status_on_back_order',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- stock_status: PRODUCT_STOCK_STATUS_KEYS.onbackorder,
- manage_stock: false,
- },
- ] );
- } );
-
- it( 'should call onChange with low_stock_amount when Edit low stock threshold is clicked', async () => {
- window.prompt = jest.fn().mockReturnValue( '7' );
- const { getByRole, getByText } = render(
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- );
- await fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- await fireEvent.click( getByText( 'Inventory' ) );
- await fireEvent.click( getByText( 'Edit low stock threshold' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_variations_menu_inventory_select',
- {
- source: TRACKS_SOURCE,
- action: 'low_stock_amount_set',
- variation_id: [ 10 ],
- }
- );
- expect( onChangeMock ).toHaveBeenCalledWith( [
- {
- id: 10,
- low_stock_amount: 7,
- manage_stock: true,
- },
- ] );
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-quick-update-menu-item.test.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-quick-update-menu-item.test.tsx
deleted file mode 100644
index 73e7f544308..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/test/variation-quick-update-menu-item.test.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-import { ProductVariation } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { createElement } from 'react';
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import {
- SingleUpdateMenu,
- MultipleUpdateMenu,
- VariationQuickUpdateMenuItem,
-} from '..';
-
-jest.mock( '@woocommerce/tracks', () => ( {
- recordEvent: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/media-utils', () => ( {
- MediaUpload: ( {
- onSelect,
- render: mockRender,
- }: {
- onSelect: ( { id, url }: { id: number; url: string } ) => void;
- render: ( { open }: { open: () => void } ) => JSX.Element | null;
- } ) => {
- const mockOpenMediaUploadModal = () => {
- const uploadedImageMock = {
- id: 1,
- url: 'https://example.com/image.jpg',
- };
- onSelect( uploadedImageMock );
- };
- return mockRender( { open: mockOpenMediaUploadModal } );
- },
-} ) );
-
-const mockVariation = {
- id: 10,
- manage_stock: false,
- attributes: [],
- downloads: [],
- name: '',
- parent_id: 1,
-} as unknown as ProductVariation;
-
-const anotherMockVariation = {
- id: 11,
- manage_stock: false,
- attributes: [],
- downloads: [],
- name: '',
- parent_id: 1,
-} as unknown as ProductVariation;
-
-describe( 'SingleUpdateMenu', () => {
- let onClickMock: jest.Mock,
- onChangeMock: jest.Mock,
- onDeleteMock: jest.Mock;
- beforeEach( () => {
- onClickMock = jest.fn();
- onChangeMock = jest.fn();
- onDeleteMock = jest.fn();
- ( recordEvent as jest.Mock ).mockClear();
- } );
-
- it( 'should render a top level fill in the single variation actions', () => {
- const { getByRole, getByText } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'top-level' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My top level item
- </VariationQuickUpdateMenuItem>
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- fireEvent.click( getByText( 'My top level item' ) );
- expect( onClickMock ).toHaveBeenCalled();
- expect( onClickMock ).toHaveBeenCalledWith(
- expect.objectContaining( {
- onChange: onChangeMock,
- onClose: expect.any( Function ),
- selection: [ mockVariation ],
- } )
- );
- } );
-
- it( 'should render a fill in the secondary area in the single variation actions', () => {
- const { getByRole, getByText } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'secondary' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My secondary item
- </VariationQuickUpdateMenuItem>
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- fireEvent.click( getByText( 'My secondary item' ) );
- expect( onClickMock ).toHaveBeenCalled();
- expect( onClickMock ).toHaveBeenCalledWith(
- expect.objectContaining( {
- onChange: onChangeMock,
- onClose: expect.any( Function ),
- selection: [ mockVariation ],
- } )
- );
- } );
-
- it( 'should render a fill in the tertiary area in the single variation actions', () => {
- const { getByRole, getByText } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'tertiary' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My tertiary item
- </VariationQuickUpdateMenuItem>
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- fireEvent.click( getByText( 'My tertiary item' ) );
- expect( onClickMock ).toHaveBeenCalled();
- expect( onClickMock ).toHaveBeenCalledWith(
- expect.objectContaining( {
- onChange: onChangeMock,
- onClose: expect.any( Function ),
- selection: [ mockVariation ],
- } )
- );
- } );
-
- it( 'should render a fill in the pricing group in the single variation actions', () => {
- const { getByRole, getByText } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'shipping' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My shipping item
- </VariationQuickUpdateMenuItem>
- <SingleUpdateMenu
- selection={ [ mockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Actions' } ) );
- fireEvent.click( getByText( 'Shipping' ) );
- fireEvent.click( getByText( 'My shipping item' ) );
- expect( onClickMock ).toHaveBeenCalled();
- expect( onClickMock ).toHaveBeenCalledWith(
- expect.objectContaining( {
- onChange: onChangeMock,
- onClose: expect.any( Function ),
- selection: [ mockVariation ],
- } )
- );
- } );
-} );
-
-describe( 'MultipleUpdateMenu', () => {
- let onClickMock: jest.Mock,
- onChangeMock: jest.Mock,
- onDeleteMock: jest.Mock;
- beforeEach( () => {
- onClickMock = jest.fn();
- onChangeMock = jest.fn();
- onDeleteMock = jest.fn();
- ( recordEvent as jest.Mock ).mockClear();
- } );
-
- it( 'should render a top level fill in the multiple variation actions', () => {
- const { queryByText, getByRole } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'top-level' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My top level item
- </VariationQuickUpdateMenuItem>
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Quick update' } ) );
- expect( queryByText( 'My top level item' ) ).toBeInTheDocument();
- } );
-
- it( 'should render a fill in the secondary area in the multiple variation actions', () => {
- const { queryByText, getByRole } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'secondary' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My secondary item
- </VariationQuickUpdateMenuItem>
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Quick update' } ) );
- expect( queryByText( 'My secondary item' ) ).toBeInTheDocument();
- } );
-
- it( 'should render a fill in the tertiary area in the multiple variation actions', () => {
- const { queryByText, getByRole } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'tertiary' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My tertiary item
- </VariationQuickUpdateMenuItem>
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- fireEvent.click( getByRole( 'button', { name: 'Quick update' } ) );
- expect( queryByText( 'My tertiary item' ) ).toBeInTheDocument();
- } );
-
- it( 'should render a fill in the pricing group in the multiple variation actions', async () => {
- const { queryByText, getByRole, getByText } = render(
- <SlotFillProvider>
- <VariationQuickUpdateMenuItem
- group={ 'pricing' }
- order={ 20 }
- supportsMultipleSelection={ true }
- onClick={ onClickMock }
- >
- My pricing item
- </VariationQuickUpdateMenuItem>
- <MultipleUpdateMenu
- selection={ [ mockVariation, anotherMockVariation ] }
- onChange={ onChangeMock }
- onDelete={ onDeleteMock }
- />
- </SlotFillProvider>
- );
- await fireEvent.click(
- getByRole( 'button', { name: 'Quick update' } )
- );
- await fireEvent.click( getByText( 'Pricing' ) );
- expect( queryByText( 'My pricing item' ) ).toBeInTheDocument();
- } );
-} );
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/types.ts b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/types.ts
deleted file mode 100644
index de26375d6cf..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { PartialProductVariation, ProductVariation } from '@woocommerce/data';
-import { MenuItem } from '@wordpress/components';
-
-export type VariationActionsMenuProps = {
- disabled?: boolean;
- selection: ProductVariation[];
- onChange(
- values: PartialProductVariation[] | React.FormEvent,
- showSuccess?: boolean
- ): void;
- onDelete( values: PartialProductVariation[] ): void;
-};
-
-export type VariationQuickUpdateSlotProps = {
- group: string;
- supportsMultipleSelection: boolean;
- selection: ProductVariation[];
- onChange(
- values: PartialProductVariation[] | React.FormEvent< HTMLDivElement >,
- showSuccess?: boolean
- ): void;
- onClose: () => void;
-};
-
-export type MenuItemProps = Omit<
- React.ComponentProps< typeof MenuItem >,
- 'onClick'
-> & {
- order?: number;
- group?: string;
- supportsMultipleSelection?: boolean;
- onClick?: ( {
- onChange,
- onClose,
- selection,
- }: {
- [ K in
- | 'onChange'
- | 'onClose'
- | 'selection' ]: VariationQuickUpdateSlotProps[ K ];
- } ) => void;
- onChange?: ( values: PartialProductVariation[] ) => void;
- onClose?: () => void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-actions.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-actions.tsx
deleted file mode 100644
index 2aef650bfe7..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-actions.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import { VariationActionsMenuProps } from './types';
-import { TRACKS_SOURCE } from '../../../constants';
-import { ShippingMenuItem } from '../shipping-menu-item';
-import { InventoryMenuItem } from '../inventory-menu-item';
-import { PricingMenuItem } from '../pricing-menu-item';
-import { ToggleVisibilityMenuItem } from '../toggle-visibility-menu-item';
-import { DownloadsMenuItem } from '../downloads-menu-item';
-import { VariationQuickUpdateMenuItem } from './variation-quick-update-menu-item';
-import { UpdateStockMenuItem } from '../update-stock-menu-item';
-import { SetListPriceMenuItem } from '../set-list-price-menu-item';
-import { AddImageMenuItem } from '../add-image-menu-item';
-
-export function VariationActions( {
- selection,
- onChange,
- onDelete,
- onClose,
- supportsMultipleSelection = false,
-}: VariationActionsMenuProps & {
- onClose: () => void;
- supportsMultipleSelection: boolean;
-} ) {
- const singleSelection =
- ! supportsMultipleSelection && selection.length === 1
- ? selection[ 0 ]
- : null;
-
- return (
- <div
- className={ clsx( {
- 'components-dropdown-menu__menu': supportsMultipleSelection,
- } ) }
- >
- <MenuGroup
- label={
- supportsMultipleSelection
- ? undefined
- : sprintf(
- /** Translators: Variation ID */
- __( 'Variation Id: %s', 'woocommerce' ),
- singleSelection?.id
- )
- }
- >
- { supportsMultipleSelection ? (
- <>
- <UpdateStockMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- <SetListPriceMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- <AddImageMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- </>
- ) : (
- <MenuItem
- rel="noreferrer"
- onClick={ () => {
- recordEvent( 'product_variations_preview', {
- source: TRACKS_SOURCE,
- variation_id: singleSelection?.id,
- } );
- } }
- >
- { __( 'Preview', 'woocommerce' ) }
- </MenuItem>
- ) }
-
- <ToggleVisibilityMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- />
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'top-level' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- <MenuGroup>
- <PricingMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- <InventoryMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- <ShippingMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- <DownloadsMenuItem
- selection={ selection }
- onChange={ onChange }
- onClose={ onClose }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'secondary' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- <MenuGroup>
- <MenuItem
- isDestructive
- label={
- ! supportsMultipleSelection
- ? __( 'Delete variation', 'woocommerce' )
- : undefined
- }
- onClick={ () => {
- onDelete( selection );
- onClose();
- } }
- className="woocommerce-product-variations__actions--delete"
- >
- { __( 'Delete', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- <VariationQuickUpdateMenuItem.Slot
- group={ 'tertiary' }
- onChange={ onChange }
- onClose={ onClose }
- selection={ selection }
- supportsMultipleSelection={ supportsMultipleSelection }
- />
- </div>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-quick-update-menu-item.tsx b/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-quick-update-menu-item.tsx
deleted file mode 100644
index 2750b9a6487..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-actions-menus/variation-quick-update-menu-item.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import { Slot, Fill, MenuItem, MenuGroup } from '@wordpress/components';
-import { Children, createElement, Fragment } from '@wordpress/element';
-import {
- createOrderedChildren,
- sortFillsByOrder,
-} from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { MenuItemProps, VariationQuickUpdateSlotProps } from './types';
-import {
- MULTIPLE_UPDATE,
- SINGLE_UPDATE,
- VARIATION_ACTIONS_SLOT_NAME,
-} from './constants';
-
-const DEFAULT_ORDER = 20;
-const TOP_LEVEL_MENU = 'top-level';
-
-export const getGroupName = (
- group?: string,
- isMultipleSelection?: boolean
-) => {
- const nameSuffix = isMultipleSelection
- ? `_${ MULTIPLE_UPDATE }`
- : `_${ SINGLE_UPDATE }`;
- return group
- ? `${ VARIATION_ACTIONS_SLOT_NAME }_${ group }${ nameSuffix }`
- : VARIATION_ACTIONS_SLOT_NAME;
-};
-
-export const VariationQuickUpdateMenuItem = ( {
- children,
- order = DEFAULT_ORDER,
- group = TOP_LEVEL_MENU,
- supportsMultipleSelection,
- onClick = () => {},
- ...props
-}: MenuItemProps ) => {
- const createFill = ( updateType: string ) => (
- <Fill
- key={ updateType }
- name={ getGroupName( group, updateType === MULTIPLE_UPDATE ) }
- >
- { ( fillProps ) => {
- return createOrderedChildren(
- <MenuItem
- { ...props }
- onClick={ () => {
- const { selection, onChange, onClose } = fillProps;
- onClick( {
- selection: Array.isArray( selection )
- ? selection
- : [ selection ],
- onChange,
- onClose,
- } );
- } }
- >
- { children }
- </MenuItem>,
- order,
- fillProps
- );
- } }
- </Fill>
- );
-
- const fills = supportsMultipleSelection
- ? [ MULTIPLE_UPDATE, SINGLE_UPDATE ].map( createFill )
- : createFill( SINGLE_UPDATE );
- return <>{ fills }</>;
-};
-
-VariationQuickUpdateMenuItem.Slot = ( {
- fillProps,
- group = TOP_LEVEL_MENU,
- onChange,
- onClose,
- selection,
- supportsMultipleSelection,
-}: VariationQuickUpdateSlotProps & {
- fillProps?: React.ComponentProps< typeof Slot >[ 'fillProps' ];
-} ) => {
- return (
- <Slot
- name={ getGroupName( group, supportsMultipleSelection ) }
- fillProps={ { ...fillProps, onChange, onClose, selection } }
- >
- { ( fills ) => {
- if (
- ! sortFillsByOrder ||
- ( fills && Children.count( fills ) === 0 )
- ) {
- return null;
- }
-
- return <MenuGroup>{ sortFillsByOrder( fills ) }</MenuGroup>;
- } }
- </Slot>
- );
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/index.ts b/packages/js/product-editor/src/components/variations-table/variation-pricing-form/index.ts
deleted file mode 100644
index d0af07b2ca2..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './variation-pricing-form';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/styles.scss b/packages/js/product-editor/src/components/variations-table/variation-pricing-form/styles.scss
deleted file mode 100644
index c24c858e116..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/styles.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.woocommerce-variation-pricing-form {
- display: flex;
- flex-direction: column;
- min-width: 345px;
-
- &__controls,
- &__actions {
- gap: $grid-unit-20;
- padding: $grid-unit-20;
- }
-
- &__controls {
- display: grid;
- grid-template-columns: 1fr 1fr;
- justify-content: stretch;
-
- .components-base-control {
- &.has-error {
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
-
- &.components-currency-control {
- .components-input-control__prefix {
- margin-left: $grid-unit;
- }
- }
- }
- }
-
- &__actions {
- display: flex;
- justify-content: flex-end;
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/types.ts b/packages/js/product-editor/src/components/variations-table/variation-pricing-form/types.ts
deleted file mode 100644
index f341b297730..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import type { ProductVariation } from '@woocommerce/data';
-
-export type VariationPricingFormProps = {
- initialValue?: Partial< ProductVariation >;
- onSubmit?(
- value: Pick< ProductVariation, 'regular_price' | 'sale_price' >
- ): void;
- onCancel?(): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/variation-pricing-form.tsx b/packages/js/product-editor/src/components/variations-table/variation-pricing-form/variation-pricing-form.tsx
deleted file mode 100644
index 02fef1115bd..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-pricing-form/variation-pricing-form.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import type { FormEvent } from 'react';
-import { createElement, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import {
- Button,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useCurrencyInputProps } from '../../../hooks/use-currency-input-props';
-import type { VariationPricingFormProps } from './types';
-
-export function VariationPricingForm( {
- initialValue,
- onSubmit,
- onCancel,
-}: VariationPricingFormProps ) {
- const [ value, setValue ] = useState( {
- regular_price: initialValue?.regular_price ?? '',
- sale_price: initialValue?.sale_price ?? '',
- } );
-
- const [ errors, setErrors ] = useState< Partial< typeof value > >( {} );
-
- const regularPriceInputProps = useCurrencyInputProps( {
- value: value.regular_price,
- onChange( regular_price ) {
- setValue( ( current ) => ( { ...current, regular_price } ) );
- },
- } );
-
- const salePriceInputProps = useCurrencyInputProps( {
- value: value.sale_price,
- onChange( sale_price ) {
- setValue( ( current ) => ( { ...current, sale_price } ) );
- },
- } );
-
- function validateRegularPrice(): boolean {
- const validationErrors: Partial< typeof value > = {
- regular_price: undefined,
- };
-
- const regularPrice = Number.parseFloat( value.regular_price );
-
- if ( regularPrice ) {
- if ( regularPrice < 0 ) {
- validationErrors.regular_price = __(
- 'Regular price must be greater than or equals to zero.',
- 'woocommerce'
- );
- }
-
- if (
- value.sale_price &&
- regularPrice <= Number.parseFloat( value.sale_price )
- ) {
- validationErrors.regular_price = __(
- 'Regular price must be greater than the sale price.',
- 'woocommerce'
- );
- }
- }
-
- setErrors( validationErrors );
-
- return ! validationErrors.regular_price;
- }
-
- function validateSalePrice(): boolean {
- const validationErrors: Partial< typeof value > = {
- sale_price: undefined,
- };
-
- if ( value.sale_price ) {
- const salePrice = Number.parseFloat( value.sale_price );
-
- if ( salePrice < 0 ) {
- validationErrors.sale_price = __(
- 'Sale price must be greater than or equals to zero.',
- 'woocommerce'
- );
- }
-
- if (
- ! value.regular_price ||
- Number.parseFloat( value.regular_price ) <= salePrice
- ) {
- validationErrors.sale_price = __(
- 'Sale price must be lower than the regular price.',
- 'woocommerce'
- );
- }
- }
-
- setErrors( validationErrors );
-
- return ! validationErrors.sale_price;
- }
-
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- if ( validateSalePrice() && validateRegularPrice() ) {
- onSubmit?.( value );
- }
- }
-
- return (
- <form
- onSubmit={ handleSubmit }
- className="woocommerce-variation-pricing-form"
- aria-label={ __( 'Variation pricing form', 'woocommerce' ) }
- >
- <div className="woocommerce-variation-pricing-form__controls">
- <InputControl
- { ...regularPriceInputProps }
- name="regular_price"
- label={ __( 'Regular price', 'woocommerce' ) }
- help={ errors.regular_price }
- className={ clsx( regularPriceInputProps.className, {
- 'has-error': errors.regular_price,
- } ) }
- onBlur={ validateRegularPrice }
- />
-
- <InputControl
- { ...salePriceInputProps }
- name="sale_price"
- label={ __( 'Sale price', 'woocommerce' ) }
- help={ errors.sale_price }
- className={ clsx( salePriceInputProps.className, {
- 'has-error': errors.sale_price,
- } ) }
- onBlur={ validateSalePrice }
- />
- </div>
-
- <div className="woocommerce-variation-pricing-form__actions">
- <Button variant="tertiary" onClick={ onCancel }>
- Cancel
- </Button>
-
- <Button variant="primary" type="submit">
- Save
- </Button>
- </div>
- </form>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/index.ts b/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/index.ts
deleted file mode 100644
index abb4d721767..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './variation-stock-status-form';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/styles.scss b/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/styles.scss
deleted file mode 100644
index b5c0143ab34..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/styles.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.woocommerce-variation-stock-status-form {
- display: flex;
- flex-direction: column;
- min-width: 345px;
-
- &__controls,
- &__actions {
- display: flex;
- gap: $grid-unit-20;
- padding: $grid-unit-20;
- }
-
- &__controls {
- &:first-child {
- padding-top: $grid-unit-20;
- }
-
- padding-top: 0;
-
- .components-base-control.components-toggle-control {
- margin: 0;
- }
-
- .components-base-control {
- width: 100%;
-
- &.has-error {
- .components-input-control__backdrop {
- border-color: $studio-red-50;
- }
-
- .components-base-control__help {
- color: $studio-red-50;
- }
- }
- }
- }
-
- &__actions {
- justify-content: flex-end;
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/types.ts b/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/types.ts
deleted file mode 100644
index 769101b68de..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductVariation } from '@woocommerce/data';
-
-export type VariationStockStatusFormProps = {
- initialValue?: Partial< ProductVariation >;
- onSubmit?(
- value: Pick<
- ProductVariation,
- 'manage_stock' | 'stock_status' | 'stock_quantity'
- >
- ): void;
- onCancel?(): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/variation-stock-status-form.tsx b/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/variation-stock-status-form.tsx
deleted file mode 100644
index 1830317912e..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variation-stock-status-form/variation-stock-status-form.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * External dependencies
- */
-import type { FormEvent } from 'react';
-import { optionsStore } from '@woocommerce/data';
-import { getAdminLink } from '@woocommerce/settings';
-import { useSelect } from '@wordpress/data';
-import {
- createElement,
- createInterpolateElement,
- useState,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import {
- Button,
- ToggleControl,
- __experimentalInputControl as InputControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { RadioField } from '../../radio-field';
-import type { VariationStockStatusFormProps } from './types';
-
-const MANAGE_STOCK_OPTION = 'woocommerce_manage_stock';
-const STOCK_STATUS_OPTIONS = [
- {
- label: __( 'In stock', 'woocommerce' ),
- value: 'instock',
- },
- {
- label: __( 'Out of stock', 'woocommerce' ),
- value: 'outofstock',
- },
- {
- label: __( 'On backorder', 'woocommerce' ),
- value: 'onbackorder',
- },
-];
-
-export function VariationStockStatusForm( {
- initialValue,
- onSubmit,
- onCancel,
-}: VariationStockStatusFormProps ) {
- const [ value, setValue ] = useState( {
- manage_stock: Boolean( initialValue?.manage_stock ),
- stock_status: initialValue?.stock_status ?? '',
- stock_quantity: initialValue?.stock_quantity ?? 1,
- } );
-
- const [ errors, setErrors ] = useState< Partial< typeof value > >( {} );
-
- const { canManageStock, isLoadingManageStockOption } = useSelect(
- ( select ) => {
- const { getOption, isResolving } = select( optionsStore );
-
- return {
- canManageStock: getOption( MANAGE_STOCK_OPTION ) === 'yes',
- isLoadingManageStockOption: isResolving( 'getOption', [
- MANAGE_STOCK_OPTION,
- ] ),
- };
- },
- []
- );
-
- function validateStockQuantity() {
- let error: string | undefined;
-
- if (
- value.manage_stock &&
- value.stock_quantity &&
- // @ts-expect-error Form state tracks stock_quantity as string from the input control, but ProductVariation types it as number (see product-variations/types.ts).
- Number.parseInt( value.stock_quantity, 10 ) < 0
- ) {
- error = __(
- 'Stock quantity must be a positive number.',
- 'woocommerce'
- );
- }
-
- // @ts-expect-error Form state tracks stock_quantity as string from the input control, but ProductVariation types it as number (see product-variations/types.ts).
- setErrors( { stock_quantity: error } );
-
- return ! error;
- }
-
- function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- if ( validateStockQuantity() ) {
- // @ts-expect-error Form state shape doesn't fully match Pick<ProductVariation, ...> until ProductVariation is reconciled with the form's string/optional field types (see product-variations/types.ts).
- onSubmit?.( value );
- }
- }
-
- function handleTrackInventoryToggleChange( isChecked: boolean ) {
- setValue( ( current ) => ( { ...current, manage_stock: isChecked } ) );
- }
-
- function renderTrackInventoryToggleHelp() {
- if ( isLoadingManageStockOption || canManageStock ) return undefined;
- return createInterpolateElement(
- /* translators: <Link>: Learn more link opening tag. </Link>: Learn more link closing tag.*/
- __(
- 'Per your <Link>store settings</Link>, inventory management is <strong>disabled</strong>.',
- 'woocommerce'
- ),
- {
- Link: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
- <a
- href={ getAdminLink(
- 'admin.php?page=wc-settings&tab=products§ion=inventory'
- ) }
- target="_blank"
- rel="noreferrer"
- />
- ),
- strong: <strong />,
- }
- );
- }
-
- function handleStockStatusRadioFieldChange( selected: string ) {
- setValue( ( current ) => ( { ...current, stock_status: selected } ) );
- }
-
- function handleStockQuantityInputControlChange(
- stock_quantity: string | undefined
- ) {
- // @ts-expect-error Form state tracks stock_quantity as string from the input control, but ProductVariation types it as number (see product-variations/types.ts).
- setValue( ( current ) => ( { ...current, stock_quantity } ) );
- }
-
- return (
- <form
- onSubmit={ handleSubmit }
- className="woocommerce-variation-stock-status-form"
- aria-label={ __( 'Variation stock status form', 'woocommerce' ) }
- noValidate
- >
- <div className="woocommerce-variation-stock-status-form__controls">
- <ToggleControl
- label={ __( 'Track inventory', 'woocommerce' ) }
- disabled={ isLoadingManageStockOption || ! canManageStock }
- checked={ value.manage_stock }
- onChange={ handleTrackInventoryToggleChange }
- help={ renderTrackInventoryToggleHelp() }
- />
- </div>
-
- <div className="woocommerce-variation-stock-status-form__controls">
- { value.manage_stock ? (
- <InputControl
- type="number"
- min={ 0 }
- label={ __( 'Available stock', 'woocommerce' ) }
- help={ errors.stock_quantity }
- // @ts-expect-error Form state tracks stock_quantity as string from the input control, but ProductVariation types it as number (see product-variations/types.ts).
- value={ value.stock_quantity }
- onChange={ handleStockQuantityInputControlChange }
- onBlur={ validateStockQuantity }
- className={ clsx( {
- 'has-error': errors.stock_quantity,
- } ) }
- />
- ) : (
- <RadioField
- title={ __( 'Stock status', 'woocommerce' ) }
- selected={ value.stock_status }
- options={ STOCK_STATUS_OPTIONS }
- onChange={ handleStockStatusRadioFieldChange }
- />
- ) }
- </div>
-
- <div className="woocommerce-variation-stock-status-form__actions">
- <Button variant="tertiary" onClick={ onCancel }>
- Cancel
- </Button>
-
- <Button variant="primary" type="submit">
- Save
- </Button>
- </div>
- </form>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variations-filter/index.ts b/packages/js/product-editor/src/components/variations-table/variations-filter/index.ts
deleted file mode 100644
index ccb8828e3e1..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-filter/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './variations-filter';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/variations-filter/styles.scss b/packages/js/product-editor/src/components/variations-table/variations-filter/styles.scss
deleted file mode 100644
index ae836e8b5ce..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-filter/styles.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.woocommerce-product-variations-filter {
- &__toggle {
- flex-direction: row-reverse;
-
- > span {
- margin: 0 6px;
- }
- }
-
- &__form {
- margin: -$grid-unit;
- width: 232px;
- }
-
- &__form-header {
- padding: $grid-unit-20 $grid-unit + $grid-unit-05;
- border-bottom: 1px solid $gray-200;
-
- .components-input-control__suffix {
- margin-right: $grid-unit;
- }
- }
-
- &__form-body {
- min-height: $grid-unit-70;
- max-height: 3 * $grid-unit-80;
- overflow-y: auto;
- }
-
- &__loading {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: $grid-unit-70;
- }
-
- &__form-list {
- margin: $grid-unit 0;
- }
-
- &__form-list-empty {
- padding: $grid-unit-20 $grid-unit + $grid-unit-05;
- }
-
- &__form-list-item {
- appearance: none;
- margin: 0;
- }
-
- &__form-list-item-label {
- padding: $grid-unit $grid-unit + $grid-unit-05;
- display: flex;
- align-items: center;
-
- &:hover,
- &:focus-within {
- background-color: $gray-100;
- }
-
- .components-base-control__field {
- margin-bottom: 0;
- }
-
- .components-checkbox-control__label {
- display: none;
- }
- }
-
- &__form-footer {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: $grid-unit;
- padding: $grid-unit-20 $grid-unit + $grid-unit-05;
- border-top: 1px solid $gray-200;
- }
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variations-filter/types.ts b/packages/js/product-editor/src/components/variations-table/variations-filter/types.ts
deleted file mode 100644
index 994e7906e4b..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-filter/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * External dependencies
- */
-import {
- ProductProductAttribute,
- ProductAttributeTerm,
-} from '@woocommerce/data';
-
-export type VariationsFilterProps = {
- initialValues: ProductAttributeTerm[ 'slug' ][];
- attribute: ProductProductAttribute;
- onFilter( values: ProductAttributeTerm[ 'slug' ][] ): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variations-filter/variations-filter.tsx b/packages/js/product-editor/src/components/variations-table/variations-filter/variations-filter.tsx
deleted file mode 100644
index c137589474d..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-filter/variations-filter.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * External dependencies
- */
-import { FormEvent, KeyboardEvent, UIEvent, useEffect, useRef } from 'react';
-import {
- ProductAttributeTerm,
- experimentalProductAttributeTermsStore,
-} from '@woocommerce/data';
-import { useDebounce, useInstanceId } from '@wordpress/compose';
-import { resolveSelect } from '@wordpress/data';
-import { createElement, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
- Icon,
- chevronDown,
- chevronUp,
- search as searchIcon,
-} from '@wordpress/icons';
-import {
- Button,
- CheckboxControl,
- Dropdown,
- __experimentalInputControl as InputControl,
- Spinner,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { VariationsFilterProps } from './types';
-
-const MIN_OPTIONS_COUNT_FOR_SEARCHING = 10;
-const DEFAULT_TERMS_PER_PAGE = 10;
-
-export function VariationsFilter( {
- initialValues,
- attribute,
- onFilter,
-}: VariationsFilterProps ) {
- const [ selection, setSelection ] =
- useState< ProductAttributeTerm[ 'slug' ][] >( initialValues );
- const [ options, setOptions ] = useState< ProductAttributeTerm[] >( [] );
- const [ totalOptions, setTotalOptions ] = useState< number >( 0 );
- const [ isLoading, setIsLoading ] = useState( false );
- const [ search, setSearch ] = useState( '' );
- const [ currentPage, setCurrentPage ] = useState( 1 );
- const inputSearchRef = useRef< HTMLInputElement >( null );
- const isDisabled = selection.length === 0;
-
- async function fetchOptions(
- attributeId: number,
- searchText = '',
- page = 1
- ) {
- try {
- setIsLoading( true );
-
- const {
- getProductAttributeTerms,
- getProductAttributeTermsTotalCount,
- } = resolveSelect( experimentalProductAttributeTermsStore );
-
- const sharedRequestArgs = {
- attribute_id: attributeId,
- per_page: DEFAULT_TERMS_PER_PAGE,
- page,
- search: searchText,
- };
-
- const terms = await getProductAttributeTerms( sharedRequestArgs );
-
- const totalTerms = await getProductAttributeTermsTotalCount(
- sharedRequestArgs
- );
-
- if ( page > 1 ) {
- setOptions( ( current ) => [ ...current, ...terms ] );
- } else {
- setOptions( terms );
- }
- setTotalOptions( totalTerms );
- } catch {
- } finally {
- setIsLoading( false );
- }
- }
-
- useEffect( () => setSelection( initialValues ), [ initialValues ] );
-
- function handleClose() {
- setSearch( '' );
- setCurrentPage( 1 );
- }
-
- function dropdownToggleHandler( isOpen: boolean, onToggle: () => void ) {
- return async function handleClick() {
- onToggle();
-
- if ( ! isOpen ) {
- await fetchOptions( attribute.id );
- }
- };
- }
-
- async function handleScroll( event: UIEvent< HTMLDivElement > ) {
- if ( isLoading || options.length >= totalOptions ) return;
-
- const scrollableElement = event.currentTarget;
-
- const scrollableHeight =
- scrollableElement.scrollHeight - scrollableElement.clientHeight;
-
- if ( scrollableElement.scrollTop >= scrollableHeight ) {
- const nextPage = currentPage + 1;
- await fetchOptions( attribute.id, search, nextPage );
- setCurrentPage( nextPage );
- }
- }
-
- function isOptionChecked( option: string ) {
- return selection.includes( option );
- }
-
- function optionChangeHandler( option: string ) {
- return function handleOptionChange( value: boolean ) {
- setSelection( ( current ) => {
- if ( value ) {
- return [ ...current, option ];
- }
-
- return current.reduce< string[] >(
- function removeSelectedOption(
- previousSelection,
- selectedOption
- ) {
- if ( selectedOption === option ) {
- return previousSelection;
- }
- return [ ...previousSelection, selectedOption ];
- },
- []
- );
- } );
- };
- }
-
- function submitHandler( close: () => void ) {
- return function handleSubmit( event: FormEvent< HTMLFormElement > ) {
- event.preventDefault();
-
- onFilter( selection );
- close();
- };
- }
-
- function resetHandler() {
- return async function handleReset(
- event: FormEvent< HTMLFormElement >
- ) {
- event.preventDefault();
-
- if ( ! isDisabled ) {
- setSearch( '' );
- setSelection( [] );
- setCurrentPage( 1 );
-
- inputSearchRef.current?.focus();
-
- await fetchOptions( attribute.id );
- }
- };
- }
-
- function handleKeyDown( event: KeyboardEvent< HTMLInputElement > ) {
- if ( event.code === 'Enter' ) {
- event.preventDefault();
- }
- }
-
- const handleInputControlChange = useDebounce(
- function handleInputControlChange( value: string | undefined ) {
- setSearch( value ?? '' );
- setOptions( [] );
- setCurrentPage( 1 );
-
- fetchOptions( attribute.id, value );
- },
- 300
- );
-
- const searchInputId = useInstanceId( InputControl, 'search' ) as string;
- const optionCheckboxId = useInstanceId(
- CheckboxControl,
- 'checkbox'
- ) as string;
-
- return (
- <Dropdown
- className="woocommerce-product-variations-filter"
- onClose={ handleClose }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- aria-expanded={ isOpen }
- icon={ isOpen ? chevronUp : chevronDown }
- variant="tertiary"
- onClick={ dropdownToggleHandler( isOpen, onToggle ) }
- className="woocommerce-product-variations-filter__toggle"
- >
- <span>
- { sprintf(
- // translators: %s is the attribute name to filter by
- __( 'Any %s', 'woocommerce' ),
- attribute.name
- ) }
- </span>
- </Button>
- ) }
- renderContent={ ( { onClose } ) => (
- <form
- className="woocommerce-product-variations-filter__form"
- noValidate
- onSubmit={ submitHandler( onClose ) }
- onReset={ resetHandler() }
- >
- { attribute.options.length >
- MIN_OPTIONS_COUNT_FOR_SEARCHING && (
- <div className="woocommerce-product-variations-filter__form-header">
- <label
- htmlFor={ searchInputId }
- aria-label={ __(
- 'Search options',
- 'woocommerce'
- ) }
- >
- <InputControl
- ref={ inputSearchRef }
- id={ searchInputId }
- type="search"
- value={ search }
- suffix={ <Icon icon={ searchIcon } /> }
- onChange={ handleInputControlChange }
- onKeyDown={ handleKeyDown }
- />
- </label>
- </div>
- ) }
- <div
- className="woocommerce-product-variations-filter__form-body"
- onScroll={ handleScroll }
- >
- { options.length > 0 ? (
- <ul className="woocommerce-product-variations-filter__form-list">
- { options.map( ( option ) => (
- <li
- key={ option.slug }
- className="woocommerce-product-variations-filter__form-list-item"
- >
- <label
- htmlFor={ `${ optionCheckboxId }-${ option.slug }` }
- className="woocommerce-product-variations-filter__form-list-item-label"
- >
- <CheckboxControl
- id={ `${ optionCheckboxId }-${ option.slug }` }
- checked={ isOptionChecked(
- option.slug
- ) }
- onChange={ optionChangeHandler(
- option.slug
- ) }
- />
- <span>{ option.name }</span>
- </label>
- </li>
- ) ) }
- </ul>
- ) : (
- ! isLoading && (
- <div className="woocommerce-product-variations-filter__form-list-empty">
- { __(
- 'No options were found for that search',
- 'woocommerce'
- ) }
- </div>
- )
- ) }
-
- { isLoading && (
- <div className="woocommerce-product-variations-filter__loading">
- <Spinner />
- </div>
- ) }
- </div>
- <div className="woocommerce-product-variations-filter__form-footer">
- <Button
- type="reset"
- variant="secondary"
- aria-disabled={ isDisabled }
- >
- { __( 'Reset', 'woocommerce' ) }
- </Button>
- <Button type="submit" variant="primary">
- { __( 'Filter', 'woocommerce' ) }
- </Button>
- </div>
- </form>
- ) }
- />
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variations-table-row/index.ts b/packages/js/product-editor/src/components/variations-table/variations-table-row/index.ts
deleted file mode 100644
index c98286a4939..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-table-row/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './variations-table-row';
-export * from './types';
diff --git a/packages/js/product-editor/src/components/variations-table/variations-table-row/types.ts b/packages/js/product-editor/src/components/variations-table/variations-table-row/types.ts
deleted file mode 100644
index ad0f0d16802..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-table-row/types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { MouseEvent } from 'react';
-import {
- PartialProductVariation,
- ProductProductAttribute,
- ProductVariation,
-} from '@woocommerce/data';
-
-export type VariationsTableRowProps = {
- variation: ProductVariation;
- variableAttributes: ProductProductAttribute[];
- isUpdating?: boolean;
- isSelected?: boolean;
- isSelectionDisabled?: boolean;
- hideActionButtons?: boolean;
- onChange( variation: PartialProductVariation, showSuccess: boolean ): void;
- onDelete( variation: PartialProductVariation ): void;
- onEdit( event: MouseEvent< HTMLAnchorElement > ): void;
- onSelect( value: boolean ): void;
-};
diff --git a/packages/js/product-editor/src/components/variations-table/variations-table-row/variations-table-row.tsx b/packages/js/product-editor/src/components/variations-table/variations-table-row/variations-table-row.tsx
deleted file mode 100644
index e0b8441d4aa..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-table-row/variations-table-row.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-/**
- * External dependencies
- */
-import { Tag, __experimentalTooltip as Tooltip } from '@woocommerce/components';
-import { CurrencyContext } from '@woocommerce/currency';
-import { PartialProductVariation, ProductVariation } from '@woocommerce/data';
-import { getNewPath } from '@woocommerce/navigation';
-import { recordEvent } from '@woocommerce/tracks';
-import {
- Button,
- CheckboxControl,
- Dropdown,
- Spinner,
-} from '@wordpress/components';
-import {
- createElement,
- Fragment,
- useContext,
- useMemo,
-} from '@wordpress/element';
-import { plus, info, Icon } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import clsx from 'clsx';
-
-/**
- * Internal dependencies
- */
-import {
- PRODUCT_VARIATION_TITLE_LIMIT,
- TRACKS_SOURCE,
-} from '../../../constants';
-import HiddenIcon from '../../../icons/hidden-icon';
-import {
- getProductStockStatus,
- getProductStockStatusClass,
- truncate,
-} from '../../../utils';
-import { SingleUpdateMenu } from '../variation-actions-menus';
-import { ImageActionsMenu } from '../image-actions-menu';
-import { VariationStockStatusForm } from '../variation-stock-status-form/variation-stock-status-form';
-import { VariationPricingForm } from '../variation-pricing-form';
-import { VariationsTableRowProps } from './types';
-
-const NOT_VISIBLE_TEXT = __( 'Not visible to customers', 'woocommerce' );
-
-function getEditVariationLink( variation: ProductVariation ) {
- return getNewPath(
- {},
- `/product/${ variation.parent_id }/variation/${ variation.id }`,
- {}
- );
-}
-
-export function VariationsTableRow( {
- variation,
- variableAttributes,
- isUpdating,
- isSelected,
- isSelectionDisabled,
- hideActionButtons,
- onChange,
- onDelete,
- onEdit,
- onSelect,
-}: VariationsTableRowProps ) {
- const { formatAmount } = useContext( CurrencyContext );
-
- const { matchesAny, tags } = useMemo(
- function getAnyWhenVariationOptionIsNotPresentInProductAttributes() {
- let matches = false;
-
- const tagItems = variableAttributes.map( ( attribute ) => {
- const variationOption = variation.attributes.find(
- ( option ) => option.id === attribute.id
- );
-
- if ( variationOption ) {
- return {
- id: variationOption.id,
- label: variationOption.option,
- };
- }
-
- matches = true;
-
- return {
- id: attribute.id,
- label: sprintf(
- // translators: %s is the attribute's name
- __( 'Any %s', 'woocommerce' ),
- attribute.name
- ),
- };
- } );
-
- return {
- matchesAny: matches,
- tags: tagItems,
- };
- },
- [ variableAttributes, variation ]
- );
-
- function handleChange(
- values: PartialProductVariation[],
- showSuccess: boolean
- ) {
- onChange( values[ 0 ], showSuccess );
- }
-
- function handleDelete( values: PartialProductVariation[] ) {
- onDelete( values[ 0 ] );
- }
-
- function toggleHandler(
- option: string,
- isOpen: boolean,
- onToggle: () => void
- ) {
- return function handleToggle() {
- if ( ! isOpen ) {
- recordEvent( 'product_variations_inline_select', {
- source: TRACKS_SOURCE,
- product_id: variation.parent_id,
- variation_id: variation.id,
- selected_option: option,
- } );
- }
- onToggle();
- };
- }
-
- function renderImageActionsMenu() {
- return (
- <ImageActionsMenu
- selection={ [ variation ] }
- onChange={ handleChange }
- onDelete={ handleDelete }
- renderToggle={ ( { isOpen, onToggle, isBusy } ) =>
- isBusy ? (
- <div className="woocommerce-product-variations__add-image-button">
- <Spinner
- aria-label={ __(
- 'Loading image',
- 'woocommerce'
- ) }
- />
- </div>
- ) : (
- <Button
- className={ clsx(
- variation.image
- ? 'woocommerce-product-variations__image-button'
- : 'woocommerce-product-variations__add-image-button'
- ) }
- icon={ variation.image ? undefined : plus }
- iconSize={ variation.image ? undefined : 16 }
- size="compact"
- onClick={ toggleHandler(
- 'image',
- isOpen,
- onToggle
- ) }
- >
- { variation.image && (
- <div
- className="woocommerce-product-variations__image"
- style={ {
- backgroundImage: `url('${ variation.image.src }')`,
- } }
- />
- ) }
- </Button>
- )
- }
- />
- );
- }
-
- function renderPrices() {
- return (
- <>
- { variation.on_sale && (
- <span className="woocommerce-product-variations__sale-price">
- { formatAmount( variation.sale_price ) }
- </span>
- ) }
- <span
- className={ clsx(
- 'woocommerce-product-variations__regular-price',
- {
- 'woocommerce-product-variations__regular-price--on-sale':
- variation.on_sale,
- }
- ) }
- >
- { formatAmount( variation.regular_price ) }
- </span>
- </>
- );
- }
-
- function renderPriceForm( onClose: () => void ) {
- return (
- <VariationPricingForm
- initialValue={ variation }
- onSubmit={ ( editedVariation ) => {
- onChange( { ...editedVariation, id: variation.id }, true );
- onClose();
- } }
- onCancel={ onClose }
- />
- );
- }
-
- function renderPriceCellContent() {
- if ( ! variation.regular_price ) return null;
- return (
- <Dropdown
- contentClassName="woocommerce-product-variations__pricing-actions-menu"
- popoverProps={ {
- placement: 'bottom',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- onClick={ toggleHandler( 'price', isOpen, onToggle ) }
- >
- { renderPrices() }
- </Button>
- ) }
- renderContent={ ( { onClose } ) => renderPriceForm( onClose ) }
- />
- );
- }
-
- function renderStockStatus() {
- return (
- <>
- <span
- className={ clsx(
- 'woocommerce-product-variations__status-dot',
- getProductStockStatusClass( variation )
- ) }
- >
- ●
- </span>
- { getProductStockStatus( variation ) }
- </>
- );
- }
-
- function renderStockStatusForm( onClose: () => void ) {
- return (
- <VariationStockStatusForm
- initialValue={ variation }
- onSubmit={ ( editedVariation ) => {
- onChange( { ...editedVariation, id: variation.id }, true );
- onClose();
- } }
- onCancel={ onClose }
- />
- );
- }
-
- function renderStockCellContent() {
- if ( ! variation.regular_price ) return null;
-
- return (
- <Dropdown
- contentClassName="woocommerce-product-variations__stock-status-actions-menu"
- popoverProps={ {
- placement: 'bottom',
- } }
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Button
- onClick={ toggleHandler( 'stock', isOpen, onToggle ) }
- variant="tertiary"
- >
- { renderStockStatus() }
- </Button>
- ) }
- renderContent={ ( { onClose } ) =>
- renderStockStatusForm( onClose )
- }
- />
- );
- }
-
- return (
- <>
- <div
- className="woocommerce-product-variations__selection"
- role="cell"
- >
- { matchesAny && (
- <Tooltip
- text={ __(
- "'Any' variations are no longer fully supported. Use regular variations instead",
- 'woocommerce'
- ) }
- helperText={ __( 'View helper text', 'woocommerce' ) }
- position="middle right"
- >
- <Icon icon={ info } size={ 24 } />
- </Tooltip>
- ) }
-
- { isUpdating ? (
- <Spinner />
- ) : (
- <CheckboxControl
- value={ variation.id }
- checked={ isSelected }
- onChange={ onSelect }
- disabled={ isSelectionDisabled }
- aria-label={
- isSelected
- ? __( 'Unselect variation', 'woocommerce' )
- : __( 'Select variation', 'woocommerce' )
- }
- />
- ) }
- </div>
- <div
- className="woocommerce-product-variations__attributes-cell"
- role="cell"
- >
- { renderImageActionsMenu() }
-
- <div className="woocommerce-product-variations__attributes">
- { tags.map( ( tagInfo ) => {
- const tag = (
- <Tag
- id={ tagInfo.id }
- className="woocommerce-product-variations__attribute"
- key={ tagInfo.id }
- label={ truncate(
- tagInfo.label,
- PRODUCT_VARIATION_TITLE_LIMIT
- ) }
- screenReaderLabel={ tagInfo.label }
- />
- );
-
- return tags.length <= PRODUCT_VARIATION_TITLE_LIMIT ? (
- tag
- ) : (
- <Tooltip
- key={ tagInfo.id }
- text={ tagInfo.label }
- position="top center"
- >
- <span>{ tag }</span>
- </Tooltip>
- );
- } ) }
- </div>
- </div>
- <div
- className={ clsx( 'woocommerce-product-variations__price', {
- 'woocommerce-product-variations__price--fade':
- variation.status === 'private',
- } ) }
- role="cell"
- >
- { renderPriceCellContent() }
- </div>
- <div
- className={ clsx( 'woocommerce-product-variations__quantity', {
- 'woocommerce-product-variations__quantity--fade':
- variation.status === 'private',
- } ) }
- role="cell"
- >
- { renderStockCellContent() }
- </div>
- <div
- className="woocommerce-product-variations__actions"
- role="cell"
- >
- { ( variation.status === 'private' ||
- ! variation.regular_price ) && (
- <Tooltip
- className="woocommerce-attribute-list-item__actions-tooltip"
- position="top center"
- text={ NOT_VISIBLE_TEXT }
- >
- <div className="woocommerce-attribute-list-item__actions-icon-wrapper">
- <HiddenIcon className="woocommerce-attribute-list-item__actions-icon-wrapper-icon" />
- </div>
- </Tooltip>
- ) }
-
- { hideActionButtons && (
- <>
- <Button
- href={ getEditVariationLink( variation ) }
- onClick={ onEdit }
- >
- { __( 'Edit', 'woocommerce' ) }
- </Button>
-
- <SingleUpdateMenu
- selection={ [ variation ] }
- onChange={ handleChange }
- onDelete={ handleDelete }
- />
- </>
- ) }
- </div>
- </>
- );
-}
diff --git a/packages/js/product-editor/src/components/variations-table/variations-table.tsx b/packages/js/product-editor/src/components/variations-table/variations-table.tsx
deleted file mode 100644
index 8cefa84f4b4..00000000000
--- a/packages/js/product-editor/src/components/variations-table/variations-table.tsx
+++ /dev/null
@@ -1,529 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, CheckboxControl, Notice } from '@wordpress/components';
-import {
- PartialProductVariation,
- Product,
- ProductVariation,
-} from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import {
- createElement,
- Fragment,
- forwardRef,
- useMemo,
- useEffect,
-} from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { useEntityId, useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { TRACKS_SOURCE } from '../../constants';
-import { Pagination } from './pagination';
-import { EmptyOrErrorTableState } from './table-empty-or-error-state';
-import { VariationsFilter } from './variations-filter';
-import { useVariations } from './use-variations';
-import { TableRowSkeleton } from './table-row-skeleton';
-import { VariationsTableRow } from './variations-table-row';
-import { MultipleUpdateMenu } from './variation-actions-menus';
-
-type VariationsTableProps = {
- isVisible?: boolean;
- noticeText?: string;
- noticeStatus?: 'error' | 'warning' | 'success' | 'info';
- onNoticeDismiss?: () => void;
- noticeActions?: {
- label: string;
- onClick: (
- handleUpdateAll: ( values: PartialProductVariation[] ) => void,
- handleDeleteAll: ( values: PartialProductVariation[] ) => void
- ) => void;
- className?: string;
- variant?: 'link' | 'primary' | 'secondary';
- }[];
- onVariationTableChange?: (
- type: 'update' | 'delete',
- updates?: Partial< ProductVariation >[]
- ) => void;
-};
-
-type VariationResponseProps = {
- update?: Partial< ProductVariation >[];
- delete?: Partial< ProductVariation >[];
-};
-
-function getSnackbarText(
- response: VariationResponseProps | ProductVariation,
- type?: string
-): string {
- if ( 'id' in response ) {
- const action = type === 'update' ? 'updated' : 'deleted';
- return sprintf(
- /* translators: The deleted or updated variations count */
- __( '1 variation %s.', 'woocommerce' ),
- action
- );
- }
-
- const { update = [], delete: deleted = [] } = response;
- const updatedCount = update.length;
- const deletedCount = deleted.length;
-
- if ( deletedCount > 0 ) {
- return sprintf(
- /* translators: The deleted variations count */
- __( '%s variations deleted.', 'woocommerce' ),
- deletedCount
- );
- } else if ( updatedCount > 0 ) {
- return sprintf(
- /* translators: The updated variations count */
- __( '%s variations updated.', 'woocommerce' ),
- updatedCount
- );
- }
-
- return '';
-}
-
-export const VariationsTable = forwardRef<
- HTMLDivElement,
- VariationsTableProps
->( function Table(
- {
- isVisible = false,
- noticeText,
- noticeActions = [],
- noticeStatus = 'error',
- onNoticeDismiss = () => {},
- onVariationTableChange = () => {},
- }: VariationsTableProps,
- ref
-) {
- const productId = useEntityId( 'postType', 'product' );
-
- const [ productAttributes ] = useEntityProp< Product[ 'attributes' ] >(
- 'postType',
- 'product',
- 'attributes'
- );
-
- const variableAttributes = useMemo(
- () => productAttributes.filter( ( attribute ) => attribute.variation ),
- [ productAttributes ]
- );
-
- const [ variationIds ] = useEntityProp< Product[ 'variations' ] >(
- 'postType',
- 'product',
- 'variations'
- );
-
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( 'core/notices' );
-
- const {
- isLoading,
- variations,
- totalCount,
- onPageChange,
- onPerPageChange,
- onFilter,
- getFilters,
- hasFilters,
- clearFilters,
-
- selected,
- isSelectingAll,
- selectedCount,
- areAllSelected,
- areSomeSelected,
- isSelected,
- onSelect,
- onSelectPage,
- onSelectAll,
- onClearSelection,
-
- isUpdating,
- onUpdate,
- onDelete,
- onBatchUpdate,
- onBatchDelete,
-
- isGenerating,
- variationsError,
- onGenerate,
- getCurrentVariations,
- } = useVariations( { productId } );
-
- useEffect( () => {
- if ( isVisible ) {
- getCurrentVariations();
- }
- }, [ isVisible, isGenerating, productId ] );
-
- function handleEmptyTableStateActionClick() {
- onGenerate( productAttributes );
- }
-
- const isError = variationsError !== undefined;
-
- if (
- ! ( isLoading || isGenerating ) &&
- ( variationIds.length === 0 || isError )
- ) {
- return (
- <EmptyOrErrorTableState
- onActionClick={ handleEmptyTableStateActionClick }
- isError={ isError }
- />
- );
- }
-
- function handleDeleteVariationClick( variation: PartialProductVariation ) {
- onDelete( variation.id )
- .then( ( response ) => {
- recordEvent( 'product_variations_delete', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variation_id: variation.id,
- } );
- createSuccessNotice(
- getSnackbarText( response as ProductVariation, 'delete' )
- );
- onVariationTableChange( 'delete' );
- } )
- .catch( () => {
- createErrorNotice(
- __( 'Failed to delete variation.', 'woocommerce' )
- );
- } );
- }
-
- function handleVariationChange(
- variation: PartialProductVariation,
- showSuccess = true
- ) {
- const { id, ...changes } = variation;
-
- onUpdate( variation )
- .then( ( response ) => {
- recordEvent( 'product_variations_change', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variation_id: variation.id,
- updated_options: Object.keys( changes ),
- } );
-
- if ( showSuccess ) {
- createSuccessNotice(
- getSnackbarText(
- response as ProductVariation,
- 'update'
- )
- );
- }
-
- onVariationTableChange( 'update', [ variation ] );
- } )
- .catch( () => {
- createErrorNotice(
- __( 'Failed to save variation.', 'woocommerce' )
- );
- } );
- }
-
- function handleUpdateAll( values: PartialProductVariation[] ) {
- const now = Date.now();
-
- onBatchUpdate( values )
- .then( ( response ) => {
- recordEvent( 'product_variations_update_all', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variations_count: values.length,
- request_time: Date.now() - now,
- } );
- createSuccessNotice( getSnackbarText( response ) );
- onVariationTableChange( 'update', values );
- } )
- .catch( () => {
- createErrorNotice(
- __( 'Failed to update variations.', 'woocommerce' )
- );
- } );
- }
-
- function handleDeleteAll( values: PartialProductVariation[] ) {
- const now = Date.now();
-
- onBatchDelete( values )
- .then( ( response: VariationResponseProps ) => {
- recordEvent( 'product_variations_delete_all', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variations_count: values.length,
- request_time: Date.now() - now,
- } );
- createSuccessNotice( getSnackbarText( response ) );
- onVariationTableChange( 'delete' );
- } )
- .catch( () => {
- createErrorNotice(
- __( 'Failed to delete variations.', 'woocommerce' )
- );
- } );
- }
-
- function editVariationClickHandler( variation: ProductVariation ) {
- return function handleEditVariationClick() {
- recordEvent( 'product_variations_edit', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variation_id: variation.id,
- } );
- };
- }
-
- async function handleSelectAllVariations() {
- const now = Date.now();
-
- onSelectAll().then( ( total ) => {
- recordEvent( 'product_variations_select_all', {
- source: TRACKS_SOURCE,
- product_id: productId,
- variations_count: total,
- request_time: Date.now() - now,
- } );
- } );
- }
-
- function renderTableBody() {
- return totalCount > 0 ? (
- <div
- className="woocommerce-product-variations__table-body"
- role="rowgroup"
- >
- { variations.map( ( variation ) => (
- <div
- key={ `${ variation.id }` }
- className="woocommerce-product-variations__table-row"
- role="row"
- >
- <VariationsTableRow
- variation={ variation }
- variableAttributes={ variableAttributes }
- isUpdating={ isUpdating[ variation.id ] }
- isSelected={ isSelected( variation ) }
- isSelectionDisabled={ isSelectingAll }
- hideActionButtons={ ! areSomeSelected }
- onChange={ handleVariationChange }
- onDelete={ handleDeleteVariationClick }
- onEdit={ editVariationClickHandler( variation ) }
- onSelect={ onSelect( variation ) }
- />
- </div>
- ) ) }
- </div>
- ) : (
- <EmptyOrErrorTableState
- isError={ false }
- message={ __( 'No variations were found', 'woocommerce' ) }
- actionText={ __( 'Clear filters', 'woocommerce' ) }
- onActionClick={ clearFilters }
- />
- );
- }
-
- return (
- <div className="woocommerce-product-variations" ref={ ref }>
- { noticeText && (
- <Notice
- status={ noticeStatus }
- className="woocommerce-product-variations__notice"
- onRemove={ onNoticeDismiss }
- actions={ noticeActions.map( ( action ) => ( {
- ...action,
- onClick: () => {
- action?.onClick( handleUpdateAll, handleDeleteAll );
- },
- } ) ) }
- >
- { noticeText }
- </Notice>
- ) }
-
- <div className="woocommerce-product-variations__table" role="table">
- { ( hasFilters() || totalCount > 0 ) && (
- <div
- className="woocommerce-product-variations__table-header"
- role="rowgroup"
- >
- <div
- className="woocommerce-product-variations__table-row"
- role="rowheader"
- >
- <div className="woocommerce-product-variations__filters">
- { areSomeSelected ? (
- <>
- <span>
- { sprintf(
- // translators: %d is the amount of selected variations
- __(
- '%d selected',
- 'woocommerce'
- ),
- selectedCount
- ) }
- </span>
- <Button
- variant="tertiary"
- onClick={ () =>
- onSelectPage( true )
- }
- >
- { sprintf(
- // translators: %d the variations amount in the current page
- __(
- 'Select page (%d)',
- 'woocommerce'
- ),
- variations.length
- ) }
- </Button>
- <Button
- variant="tertiary"
- isBusy={ isSelectingAll }
- onClick={
- handleSelectAllVariations
- }
- >
- { sprintf(
- // translators: %d the total existing variations amount
- __(
- 'Select all (%d)',
- 'woocommerce'
- ),
- totalCount
- ) }
- </Button>
- <Button
- variant="tertiary"
- onClick={ onClearSelection }
- >
- { __(
- 'Clear selection',
- 'woocommerce'
- ) }
- </Button>
- </>
- ) : (
- variableAttributes.map( ( attribute ) => (
- <VariationsFilter
- key={ attribute.id }
- initialValues={ getFilters(
- attribute
- ) }
- attribute={ attribute }
- onFilter={ onFilter( attribute ) }
- />
- ) )
- ) }
- </div>
- <div className="woocommerce-product-variations__actions">
- <MultipleUpdateMenu
- selection={ selected }
- disabled={
- ! areSomeSelected && ! isSelectingAll
- }
- onChange={ handleUpdateAll }
- onDelete={ handleDeleteAll }
- />
- </div>
- </div>
-
- { totalCount > 0 && (
- <div
- className="woocommerce-product-variations__table-row woocommerce-product-variations__table-rowheader"
- role="rowheader"
- >
- <div
- className="woocommerce-product-variations__table-column woocommerce-product-variations__selection"
- role="columnheader"
- >
- <CheckboxControl
- value="all"
- checked={ areAllSelected }
- indeterminate={
- ! areAllSelected && areSomeSelected
- }
- onChange={ onSelectPage }
- aria-label={ __(
- 'Select all',
- 'woocommerce'
- ) }
- />
- </div>
- <div
- className="woocommerce-product-variations__table-column"
- role="columnheader"
- >
- { __( 'Variation', 'woocommerce' ) }
- </div>
- <div
- className="woocommerce-product-variations__table-column woocommerce-product-variations__price"
- role="columnheader"
- >
- { __( 'Price', 'woocommerce' ) }
- </div>
- <div
- className="woocommerce-product-variations__table-column"
- role="columnheader"
- >
- { __( 'Stock', 'woocommerce' ) }
- </div>
- </div>
- ) }
- </div>
- ) }
-
- { isLoading || isGenerating ? (
- <div
- className="woocommerce-product-variations__table-body"
- role="presentation"
- aria-label={
- isGenerating
- ? __( 'Generating variations…', 'woocommerce' )
- : __( 'Loading variations…', 'woocommerce' )
- }
- >
- { Array.from( { length: variations.length || 5 } ).map(
- ( _, index ) => (
- <TableRowSkeleton key={ index } />
- )
- ) }
- </div>
- ) : (
- renderTableBody()
- ) }
-
- { totalCount > 5 && (
- <div
- className="woocommerce-product-variations__table-footer"
- role="row"
- >
- <Pagination
- totalCount={ totalCount }
- onPageChange={ onPageChange }
- onPerPageChange={ onPerPageChange }
- />
- </div>
- ) }
- </div>
- </div>
- );
-} );
diff --git a/packages/js/product-editor/src/components/variations-table/visible-icon.tsx b/packages/js/product-editor/src/components/variations-table/visible-icon.tsx
deleted file mode 100644
index e9ffe2a930f..00000000000
--- a/packages/js/product-editor/src/components/variations-table/visible-icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-
-export default function VisibleIcon( {
- width = 24,
- height = 24,
- ...props
-}: React.SVGProps< SVGSVGElement > ) {
- return (
- <svg
- { ...props }
- width={ width }
- height={ height }
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true"
- >
- <path
- d="M20.1091 11.54C20.3396 11.8116 20.3396 12.1884 20.1091 12.46C19.4144 13.2781 18.266 14.4899 16.8343 15.4921C15.397 16.4982 13.7359 17.25 11.9999 17.25C10.2638 17.25 8.60268 16.4982 7.1654 15.4921C5.73376 14.4899 4.58533 13.2781 3.89066 12.46C3.6601 12.1884 3.6601 11.8116 3.89066 11.54C4.58533 10.7219 5.73376 9.51006 7.1654 8.50792C8.60268 7.50184 10.2638 6.75 11.9999 6.75C13.7359 6.75 15.397 7.50184 16.8343 8.50792C18.266 9.51006 19.4144 10.7219 20.1091 11.54Z"
- stroke="currentColor"
- strokeWidth="1.5"
- strokeLinejoin="round"
- />
- <circle
- cx="11.9999"
- cy="11.9999"
- r="2.67857"
- stroke="currentColor"
- strokeWidth="1.5"
- />
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/components/woo-product-field-item/README.md b/packages/js/product-editor/src/components/woo-product-field-item/README.md
deleted file mode 100644
index eb96648d127..00000000000
--- a/packages/js/product-editor/src/components/woo-product-field-item/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# WooProductFieldItem Slot & Fill
-
-A Slotfill component that will allow you to add a new field to a specific section in the product editor.
-
-## Usage
-
-```jsx
-<WooProductFieldItem id={ key } section="details" order={ 2 } pluginId="test-plugin" >
- { () => {
- return (
- <TextControl
- label="Name"
- name={ `product-mvp-name` }
- placeholder="e.g. 12 oz Coffee Mug"
- value="Test Name"
- onChange={ () => console.debug( 'Changed!' ) }
- />
- );
-} }
-</WooProductFieldItem>
-
-<WooProductFieldItem.Slot section="details" />
-```
-
-### WooProductFieldItem (fill)
-
-This is the fill component. You must provide the `id` prop to identify your product field fill with a unique string. This component will accept a series of props:
-
-| Prop | Type | Description |
-| ---------- | ------ | ------------------------------------------------------------------------------------------------ |
-| `id` | String | A unique string to identify your fill. Used for configuration management. |
-| `sections` | Array | Contains an array of name and order values for which slots it should be rendered in. |
-| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
-| `order` | Number | (optional) This number will dictate the order that the fields rendered by a Slot will be appear. |
-
-### WooProductFieldItem.Slot (slot)
-
-This is the slot component. This will render all the registered fills that match the `section` prop.
-
-| Name | Type | Description |
-| --------- | ------ | --------------------------------------------------------------------------------------------------- |
-| `section` | String | Unique to the section that the Slot appears, and must be the same as the one provided to any fills. |
diff --git a/packages/js/product-editor/src/components/woo-product-field-item/index.ts b/packages/js/product-editor/src/components/woo-product-field-item/index.ts
deleted file mode 100644
index 0aab6c8997b..00000000000
--- a/packages/js/product-editor/src/components/woo-product-field-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './woo-product-field-item';
diff --git a/packages/js/product-editor/src/components/woo-product-field-item/woo-product-field-item.tsx b/packages/js/product-editor/src/components/woo-product-field-item/woo-product-field-item.tsx
deleted file mode 100644
index 8eb36953f89..00000000000
--- a/packages/js/product-editor/src/components/woo-product-field-item/woo-product-field-item.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * External dependencies
- */
-import { ReactNode } from 'react';
-import { Slot, Fill } from '@wordpress/components';
-import {
- createElement,
- Children,
- Fragment,
- useEffect,
-} from '@wordpress/element';
-import {
- useSlotContext,
- SlotContextHelpersType,
-} from '@woocommerce/components';
-
-/**
- * Internal dependencies
- */
-import { createOrderedChildren, sortFillsByOrder } from '../../utils';
-import { ProductFillLocationType } from '../woo-product-tab-item';
-
-type WooProductFieldItemProps = {
- id: string;
- sections: ProductFillLocationType[];
- pluginId: string;
- children: ReactNode;
-};
-
-type WooProductFieldSlotProps = {
- section: string;
-};
-
-type WooProductFieldFillProps = {
- fieldName: string;
- sectionName: string;
- order: number;
- children?: ReactNode;
-};
-
-const DEFAULT_FIELD_ORDER = 20;
-
-const WooProductFieldFill = ( {
- fieldName,
- sectionName,
- order,
- children,
-}: WooProductFieldFillProps ) => {
- const { registerFill, getFillHelpers } = useSlotContext();
-
- const fieldId = `product_field/${ sectionName }/${ fieldName }`;
-
- useEffect( () => {
- registerFill( fieldId );
- }, [] );
-
- return (
- <Fill
- name={ `woocommerce_product_field_${ sectionName }` }
- key={ fieldId }
- >
- { ( fillProps ) =>
- createOrderedChildren<
- SlotContextHelpersType & {
- sectionName: string;
- },
- { _id: string }
- >(
- children,
- order,
- {
- sectionName,
- ...fillProps,
- ...getFillHelpers(),
- },
- { _id: fieldId }
- )
- }
- </Fill>
- );
-};
-
-export const WooProductFieldItem = ( {
- children,
- sections,
- id,
-}: WooProductFieldItemProps ) => {
- return (
- <>
- { sections.map(
- ( { name: sectionName, order = DEFAULT_FIELD_ORDER } ) => (
- <WooProductFieldFill
- fieldName={ id }
- sectionName={ sectionName }
- order={ order }
- key={ sectionName }
- >
- { children }
- </WooProductFieldFill>
- )
- ) }
- </>
- );
-};
-
-WooProductFieldItem.Slot = ( {
- fillProps,
- section,
-}: WooProductFieldSlotProps & {
- fillProps?: React.ComponentProps< typeof Slot >[ 'fillProps' ];
-} ) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const { filterRegisteredFills } = useSlotContext();
-
- return (
- <Slot
- name={ `woocommerce_product_field_${ section }` }
- fillProps={ fillProps }
- >
- { ( fills ) => {
- if ( ! sortFillsByOrder ) {
- return null;
- }
-
- return Children.map(
- // @ts-expect-error The type definitions for Slot are incorrect.
- sortFillsByOrder( filterRegisteredFills( fills ) )?.props
- .children,
- ( child ) => (
- <div className="woocommerce-product-form__field">
- { child }
- </div>
- )
- );
- } }
- </Slot>
- );
-};
diff --git a/packages/js/product-editor/src/components/woo-product-section-item/README.md b/packages/js/product-editor/src/components/woo-product-section-item/README.md
deleted file mode 100644
index 1f36ff80e59..00000000000
--- a/packages/js/product-editor/src/components/woo-product-section-item/README.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# WooProductSectionItem Slot & Fill
-
-A Slotfill component that will allow you to add a new section to the product editor.
-
-## Usage
-
-```jsx
-<WooProductSectionItem id={ key } location="tab/general" order={ 2 } pluginId="test-plugin" >
- { () => {
- return (
- <ProductSectionLayout
- title={ __( 'Product test section', 'woocommerce' ) }
- description={ __(
- 'In this area you can describe the section.',
- 'woocommerce'
- ) }
- >
- <Card>
- <CardBody>{ /* Section content */ }</CardBody>
- </Card>
- </ProductSectionLayout>
- );
-} }
-</WooProductSectionItem>
-
-<WooProductSectionItem.Slot location="tab/general" />
-```
-
-### WooProductSectionItem (fill)
-
-This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
-
-| Prop | Type | Description |
-| ---------- | ------ | -------------------------------------------------------------------------------------------------- |
-| `id` | String | A unique string to identify your fill. Used for configuration management. |
-| `tabs` | Array | Contains an array of name and order of which slots it should be rendered in. |
-| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
-| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
-
-### WooProductSectionItem.Slot (slot)
-
-This is the slot component. This will render all the registered fills that match the `tab` prop.
-
-| Name | Type | Description |
-| ----- | ------ | ---------------------------------------------------------------------------------------------------- |
-| `tab` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |
diff --git a/packages/js/product-editor/src/components/woo-product-section-item/index.ts b/packages/js/product-editor/src/components/woo-product-section-item/index.ts
deleted file mode 100644
index f69863cda0f..00000000000
--- a/packages/js/product-editor/src/components/woo-product-section-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './woo-product-section-item';
diff --git a/packages/js/product-editor/src/components/woo-product-section-item/woo-product-section-item.tsx b/packages/js/product-editor/src/components/woo-product-section-item/woo-product-section-item.tsx
deleted file mode 100644
index 4c08857d4bc..00000000000
--- a/packages/js/product-editor/src/components/woo-product-section-item/woo-product-section-item.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { ReactNode } from 'react';
-import { Slot, Fill } from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { createOrderedChildren, sortFillsByOrder } from '../../utils';
-import { ProductFillLocationType } from '../woo-product-tab-item';
-
-type WooProductSectionItemProps = {
- id: string;
- tabs: ProductFillLocationType[];
- pluginId: string;
- children: ReactNode;
-};
-
-type WooProductSectionSlotProps = {
- tab: string;
-};
-
-const DEFAULT_SECTION_ORDER = 20;
-
-export const WooProductSectionItem = ( {
- children,
- tabs,
-}: WooProductSectionItemProps ) => {
- return (
- <>
- { tabs.map( ( { name: tabName, order: sectionOrder } ) => (
- <Fill
- name={ `woocommerce_product_section_${ tabName }` }
- key={ tabName }
- >
- { ( fillProps ) => {
- return createOrderedChildren(
- children,
- sectionOrder || DEFAULT_SECTION_ORDER,
- {
- tabName,
- ...fillProps,
- }
- );
- } }
- </Fill>
- ) ) }
- </>
- );
-};
-
-WooProductSectionItem.Slot = ( {
- fillProps,
- tab,
-}: WooProductSectionSlotProps & {
- fillProps: React.ComponentProps< typeof Slot >[ 'fillProps' ];
-} ) => (
- <Slot
- name={ `woocommerce_product_section_${ tab }` }
- fillProps={ fillProps }
- >
- { ( fills ) => {
- if ( ! sortFillsByOrder ) {
- return null;
- }
- // @ts-expect-error The type definitions for Slot are incorrect.
- return sortFillsByOrder( fills );
- } }
- </Slot>
-);
diff --git a/packages/js/product-editor/src/components/woo-product-tab-item/README.md b/packages/js/product-editor/src/components/woo-product-tab-item/README.md
deleted file mode 100644
index f8dc07a8e93..00000000000
--- a/packages/js/product-editor/src/components/woo-product-tab-item/README.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# WooProductTabItem Slot & Fill
-
-A Slotfill component that will allow you to add a new tab to the product editor.
-
-## Usage
-
-```jsx
-<WooProductTabItem id={ key } location="tab/general" order={ 2 } pluginId="test-plugin" tabProps={ { title: 'New tab', name: 'new-tab' } } >
- <Card>
- <CardBody>{ /* Tab content */ }</CardBody>
- </Card>
-</WooProductTabItem>
-
-<WooProductTabItem.Slot location="tab/general" />
-```
-
-### WooProductTabItem (fill)
-
-This is the fill component. You must provide the `id` prop to identify your section fill with a unique string. This component will accept a series of props:
-
-| Prop | Type | Description |
-| ----------- | ------ | -------------------------------------------------------------------------------------------------------------- |
-| `id` | String | A unique string to identify your fill. Used for configuration management. |
-| `templates` | Array | Array of name and order of which template slots it should be rendered in |
-| `pluginId` | String | A unique plugin ID to identify the plugin/extension that this fill is associated with. |
-| `tabProps` | Object | An object containing tab props: name, title, className, disabled (see TabPanel.Tab from @wordpress/components) |
-| `order` | Number | (optional) This number will dictate the order that the sections rendered by a Slot will be appear. |
-
-### WooProductTabItem.Slot (slot)
-
-This is the slot component. This will render all the registered fills that match the `template` prop.
-
-| Name | Type | Description |
-| ---------- | ------ | ---------------------------------------------------------------------------------------------------- |
-| `template` | String | Unique to the location that the Slot appears, and must be the same as the one provided to any fills. |
diff --git a/packages/js/product-editor/src/components/woo-product-tab-item/index.ts b/packages/js/product-editor/src/components/woo-product-tab-item/index.ts
deleted file mode 100644
index de6bc24ea4a..00000000000
--- a/packages/js/product-editor/src/components/woo-product-tab-item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './woo-product-tab-item';
diff --git a/packages/js/product-editor/src/components/woo-product-tab-item/woo-product-tab-item.tsx b/packages/js/product-editor/src/components/woo-product-tab-item/woo-product-tab-item.tsx
deleted file mode 100644
index 5b57157f3da..00000000000
--- a/packages/js/product-editor/src/components/woo-product-tab-item/woo-product-tab-item.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * External dependencies
- */
-import { ReactElement, ReactNode } from 'react';
-import { Slot, Fill, TabPanel } from '@wordpress/components';
-import { createElement, Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { createOrderedChildren } from '../../utils';
-
-export type ProductFillLocationType = { name: string; order?: number };
-
-type TabPanelProps = React.ComponentProps< typeof TabPanel > & {
- order: number;
- name: string;
-};
-
-type FillProps = Record< string, unknown >;
-
-type WooProductTabItemProps = {
- id: string;
- pluginId: string;
- tabProps: TabPanelProps | ( ( fillProps: FillProps ) => TabPanelProps );
- templates?: Array< ProductFillLocationType >;
- children: ReactNode[];
-};
-
-type WooProductFieldSlotProps = {
- template: string;
- children: (
- tabs: TabPanelProps[],
- tabChildren: Record< string, ReactNode[] >
- ) => ReactElement[] | null;
- fillProps: FillProps;
-} & WooProductTabItemProps;
-
-const DEFAULT_TAB_ORDER = 20;
-
-type WooProductTabItemComponent = React.FC< WooProductFieldSlotProps > & {
- Slot: React.FC< WooProductFieldSlotProps >;
-};
-
-export const WooProductTabItem: WooProductTabItemComponent = ( {
- children,
- tabProps,
- templates,
-} ) => {
- if ( ! templates ) {
- // eslint-disable-next-line no-console
- console.warn( 'WooProductTabItem fill is missing templates property.' );
- return null;
- }
- return (
- <>
- { templates.map( ( templateData ) => (
- <Fill
- name={ `woocommerce_product_tab_${ templateData.name }` }
- key={ templateData.name }
- >
- { ( fillProps ) => {
- return createOrderedChildren(
- children,
- templateData.order || DEFAULT_TAB_ORDER,
- {},
- {
- tabProps,
- templateName: templateData.name,
- order: templateData.order || DEFAULT_TAB_ORDER,
- ...fillProps,
- }
- );
- } }
- </Fill>
- ) ) }
- </>
- );
-};
-
-WooProductTabItem.Slot = ( { fillProps, template, children } ) => (
- <Slot
- name={ `woocommerce_product_tab_${ template }` }
- fillProps={ fillProps }
- >
- { ( fills ) => {
- // @ts-expect-error Slot fill is not typed
- const tabData = fills.reduce(
- (
- {
- childrenMap,
- tabs,
- }: {
- childrenMap: Record< string, ReactElement >;
- tabs: TabPanelProps[];
- },
- fill: Array< React.ReactElement >
- ) => {
- const props: WooProductTabItemProps & { order: number } =
- fill[ 0 ].props;
- if ( props && props.tabProps ) {
- childrenMap[ props.tabProps.name ] = fill[ 0 ];
- const tabProps =
- typeof props.tabProps === 'function'
- ? props.tabProps( fillProps )
- : props.tabProps;
- tabs.push( {
- ...tabProps,
- order: props.order ?? DEFAULT_TAB_ORDER,
- } );
- }
- return {
- childrenMap,
- tabs,
- };
- },
- { childrenMap: {}, tabs: [] } as {
- childrenMap: Record< string, ReactElement >;
- tabs: TabPanelProps[];
- }
- );
- const orderedTabs = tabData.tabs.sort(
- ( a: TabPanelProps, b: TabPanelProps ) => {
- return a.order - b.order;
- }
- );
-
- return children( orderedTabs, tabData.childrenMap );
- } }
- </Slot>
-);
diff --git a/packages/js/product-editor/src/constants.ts b/packages/js/product-editor/src/constants.ts
deleted file mode 100644
index 0d79e4674e8..00000000000
--- a/packages/js/product-editor/src/constants.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export const PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME =
- 'woocommerce_product_editor_show_feedback_bar';
-export const PRODUCT_EDITOR_FEEDBACK_CES_ACTION = 'product_editor';
-export const SINGLE_VARIATION_NOTICE_DISMISSED_OPTION =
- 'woocommerce_single_variation_notice_dismissed';
-export const SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME =
- 'woocommerce_show_prepublish_checks_enabled';
-
-export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
-export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
-export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';
-
-// This should never be a real slug value of any existing shipping class
-export const ADD_NEW_SHIPPING_CLASS_OPTION_VALUE =
- '__ADD_NEW_SHIPPING_CLASS_OPTION__';
-export const UNCATEGORIZED_CATEGORY_SLUG = 'uncategorized';
-export const PRODUCT_VARIATION_TITLE_LIMIT = 32;
-export const STANDARD_RATE_TAX_CLASS_SLUG = 'standard';
-
-// Fill constants
-
-export const TAB_GENERAL_ID = 'tab/general';
-export const TAB_PRICING_ID = 'tab/pricing';
-export const TAB_INVENTORY_ID = 'tab/inventory';
-export const TAB_SHIPPING_ID = 'tab/shipping';
-export const TAB_OPTIONS_ID = 'tab/options';
-
-export const VARIANT_TAB_GENERAL_ID = `variant/${ TAB_GENERAL_ID }`;
-export const VARIANT_TAB_PRICING_ID = `variant/${ TAB_PRICING_ID }`;
-export const VARIANT_TAB_INVENTORY_ID = `variant/${ TAB_INVENTORY_ID }`;
-export const VARIANT_TAB_SHIPPING_ID = `variant/${ TAB_SHIPPING_ID }`;
-
-export const DETAILS_SECTION_ID = `${ TAB_GENERAL_ID }/details`;
-export const IMAGES_SECTION_ID = `${ TAB_GENERAL_ID }/images`;
-export const ATTRIBUTES_SECTION_ID = `${ TAB_GENERAL_ID }/attributes`;
-export const PRICING_SECTION_BASIC_ID = `${ TAB_PRICING_ID }/basic`;
-export const PRICING_SECTION_TAXES_ID = `${ TAB_PRICING_ID }/taxes`;
-export const PRICING_SECTION_TAXES_ADVANCED_ID = `${ TAB_PRICING_ID }/taxes/advanced`;
-export const INVENTORY_SECTION_ID = `${ TAB_INVENTORY_ID }/basic`;
-export const INVENTORY_SECTION_ADVANCED_ID = `${ TAB_INVENTORY_ID }/advanced`;
-export const SHIPPING_SECTION_BASIC_ID = `${ TAB_SHIPPING_ID }/basic`;
-export const SHIPPING_SECTION_DIMENSIONS_ID = `${ TAB_SHIPPING_ID }/dimensions`;
-
-export const VARIANT_PRICING_SECTION_BASIC_ID = `variant/${ PRICING_SECTION_BASIC_ID }`;
-export const VARIANT_PRICING_SECTION_TAXES_ID = `variant/${ PRICING_SECTION_TAXES_ID }`;
-export const VARIANT_PRICING_SECTION_TAXES_ADVANCED_ID = `variant/${ PRICING_SECTION_TAXES_ADVANCED_ID }`;
-export const VARIANT_INVENTORY_SECTION_ID = `variant/${ INVENTORY_SECTION_ID }`;
-export const VARIANT_INVENTORY_SECTION_ADVANCED_ID = `variant/${ INVENTORY_SECTION_ADVANCED_ID }`;
-export const VARIANT_SHIPPING_SECTION_BASIC_ID = `variant/${ SHIPPING_SECTION_BASIC_ID }`;
-export const VARIANT_SHIPPING_SECTION_DIMENSIONS_ID = `variant/${ SHIPPING_SECTION_DIMENSIONS_ID }`;
-
-export const PRODUCT_SCHEDULED_SALE_SLUG = 'product-scheduled-sale';
-
-export const TRACKS_SOURCE = 'product-block-editor-v1';
-
-export const HEADER_PINNED_ITEMS_SCOPE = 'woocommerce/product-editor';
-
-/**
- * Since the pagination component does not exposes the way of
- * changing the per page options which are [25, 50, 75, 100]
- * the default per page option will be the min in the list to
- * keep compatibility.
- *
- * @see https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/components/src/pagination/index.js#L12
- */
-export const DEFAULT_PER_PAGE_OPTION = 25;
-
-export const DEFAULT_VARIATION_PER_PAGE_OPTION = 5;
-export const DEFAULT_VARIATION_PER_PAGE_OPTIONS = [ 5, 10, 25 ];
diff --git a/packages/js/product-editor/src/contexts/editor-loading-context/index.ts b/packages/js/product-editor/src/contexts/editor-loading-context/index.ts
deleted file mode 100644
index 183a555a4f6..00000000000
--- a/packages/js/product-editor/src/contexts/editor-loading-context/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const EditorLoadingContext = createContext( false );
diff --git a/packages/js/product-editor/src/contexts/post-type-context/index.ts b/packages/js/product-editor/src/contexts/post-type-context/index.ts
deleted file mode 100644
index 968e2962631..00000000000
--- a/packages/js/product-editor/src/contexts/post-type-context/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const PostTypeContext = createContext( 'product' );
diff --git a/packages/js/product-editor/src/contexts/validation-context/README.md b/packages/js/product-editor/src/contexts/validation-context/README.md
deleted file mode 100644
index df3f2c01f03..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/README.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Validations and error handling
-
-This directory contains some components and hooks used for validations in the product editor.
-
-## What happens when there is an error in the form?
-
-1. Fields registered in the validator context [will get validated](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx#L87-L110). A field can be registered by making use of the useValidation hook.
- - For instance:
-
- ```javascript
- const {
- ref: myRef,
- error: myValidationError,
- validate: validateMyField,
- } = useValidation <
- Product >
- ( 'myfield',
- async function myFieldValidator() {
- if ( ! myField ) {
- return {
- message: 'My error message',
- context: clientId,
- };
- }
- },
- [ myField ] );
- ```
-
-2. If a field has an error, it returns an object consisting of the error/validation message, the context, and the validatorId ([link](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx#L74) ).
- - The `context` contains the block Id, and the `validatorId` a unique ID for the validator specifically ( generally a prefix with the block id ).
- - If, for instance, the name field is empty, the validation will fail and will throw an object like this:
-
- ```javascript
- { message: 'Product name is required.'; context: [block id]; validatorId: [prefix + block id] }
- ```
-
- - This is the result of the name validator and the [validatorId addition](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx#L69).
-
- ```javascript
- async function nameValidator() {
- if ( ! name || name === AUTO_DRAFT_NAME ) {
- return {
- message: __( 'Product name is required.', 'woocommerce' ),
- context: clientId,
- };
- }
-
- if ( name.length > 120 ) {
- return {
- message: __(
- 'Please enter a product name shorter than 120 characters.',
- 'woocommerce'
- ),
- context: clientId,
- };
- }
- },
- ```
-
-3. If an error is present on the form we will show an error snackbar with the error message. We will actually include a **View error** link if the field with the relevant error is not visible ( like on another tab ). Clicking the **View error** link will direct users to the relevant field.
- - We create this link by making use of the `context` property (the block id), this makes use of the `useBlocksHelper()` hook to get the parent tab id. We can do this by making use of the `core/block-editor` store and using `getBlockParentsByBlockName` (link to relevant code).
- - When the field with [the error is not visible](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-error-handler.ts#L105), a link pointing to it will be added to the snackbar.
- - Otherwise, the error will be dismissed automatically.
- - The hook `useErrorHandler` is used to get the [error props](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-error-handler.ts#L79).
- - The error shown will depend [on the error code](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-error-handler.ts#L92).
- - [As you can see here](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-error-handler.ts#L157-L162), if the error doesn't have a code, the default message will be `Failed to save product.`
- - The context is used to [get the parent tab](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-blocks-helper/use-blocks-helper.ts#L7) id and the validatorId to [focus on the field](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/hooks/use-error-handler.ts#L68).
-
-Finally, [the snackbar with the error](https://github.com/woocommerce/woocommerce/blob/trunk/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx#L70) message and props will be displayed.
-
-
-
-## Limitations
-
-The server errors, such as `duplicated SKU`, are not being mapped yet.
diff --git a/packages/js/product-editor/src/contexts/validation-context/helpers.ts b/packages/js/product-editor/src/contexts/validation-context/helpers.ts
deleted file mode 100644
index 88068c73bcc..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/helpers.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ValidationErrors } from './types';
-
-export function findFirstInvalidElement< E extends Element = Element >(
- elementsMap: Record< string, E >,
- errors: ValidationErrors
-): E | undefined {
- const fieldRefsWithError = Object.entries( elementsMap ).filter(
- ( [ validatorId, element ] ) =>
- // Pick the element if it is under the selected tab.
- element?.closest( '.is-selected[role="tabpanel"]' ) &&
- Boolean( errors[ validatorId ] )
- );
-
- const [ firstFieldRefWithError ] = fieldRefsWithError.sort(
- ( [ , firstElement ], [ , secondElement ] ) => {
- if (
- // eslint-disable-next-line no-bitwise
- firstElement.compareDocumentPosition( secondElement ) &
- Node.DOCUMENT_POSITION_FOLLOWING
- ) {
- return -1;
- }
- return 1;
- }
- );
-
- const [ , firstElementWithError ] = firstFieldRefWithError ?? [];
-
- return firstElementWithError;
-}
diff --git a/packages/js/product-editor/src/contexts/validation-context/index.ts b/packages/js/product-editor/src/contexts/validation-context/index.ts
deleted file mode 100644
index ecee449db60..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './use-validation';
-export * from './use-validations';
-export * from './validation-provider';
-export * from './types';
diff --git a/packages/js/product-editor/src/contexts/validation-context/types.ts b/packages/js/product-editor/src/contexts/validation-context/types.ts
deleted file mode 100644
index f6ad9aa380e..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/types.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export type ValidatorResponse = Promise< ValidationError >;
-
-export type Validator< T > = (
- initialValue?: T | null,
- newData?: Record< string, unknown >
-) => ValidatorResponse;
-
-export type ValidationContextProps< T > = {
- errors: ValidationErrors;
- registerValidator(
- validatorId: string,
- validator: Validator< T >
- ): React.Ref< HTMLInputElement >;
- unRegisterValidator( validatorId: string ): void;
- getFieldByValidatorId: (
- validatorId: string
- ) => Promise< HTMLInputElement >;
- validateField(
- name: string,
- newData?: Record< string, unknown >
- ): ValidatorResponse;
- validateAll( newData?: Partial< T > ): Promise< ValidationErrors >;
-};
-
-export type ValidationProviderProps = {
- postType: string;
- productId: number;
-};
-
-export type ValidationError =
- | { message?: string; validatorId?: string }
- | undefined;
-export type ValidationErrors = Record< string, ValidationError >;
-
-export type ValidatorRegistration< T > = {
- name: string;
- ref: React.Ref< HTMLElement >;
- error?: ValidationError;
- validate( newData?: Partial< T > ): ValidatorResponse;
-};
diff --git a/packages/js/product-editor/src/contexts/validation-context/use-validation.ts b/packages/js/product-editor/src/contexts/validation-context/use-validation.ts
deleted file mode 100644
index c60db5c46dd..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/use-validation.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { useContext, useMemo, useState, useEffect } from '@wordpress/element';
-import { DependencyList } from 'react';
-
-/**
- * Internal dependencies
- */
-import { Validator } from './types';
-import { ValidationContext } from './validation-context';
-
-export function useValidation< T >(
- validatorId: string,
- validator: Validator< T >,
- deps: DependencyList = []
-) {
- const context = useContext( ValidationContext );
- const [ isValidating, setIsValidating ] = useState( false );
-
- const ref = useMemo(
- () => context.registerValidator( validatorId, validator ),
- [ validatorId, ...deps ]
- );
-
- useEffect( () => {
- return () => {
- context.unRegisterValidator( validatorId );
- };
- }, [] );
-
- return {
- ref,
- error: context.errors[ validatorId ]?.message,
- isValidating,
- async validate( newData?: Record< string, unknown > ) {
- setIsValidating( true );
- return context
- .validateField( validatorId, newData )
- .finally( () => {
- setIsValidating( false );
- } );
- },
- };
-}
diff --git a/packages/js/product-editor/src/contexts/validation-context/use-validations.ts b/packages/js/product-editor/src/contexts/validation-context/use-validations.ts
deleted file mode 100644
index 097447473eb..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/use-validations.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { useContext, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ValidationErrors } from './types';
-import { ValidationContext } from './validation-context';
-
-function isInvalid( errors: ValidationErrors ) {
- return Object.values( errors ).some( Boolean );
-}
-
-export function useValidations< T = unknown >() {
- const context = useContext( ValidationContext );
- const [ isValidating, setIsValidating ] = useState( false );
-
- async function focusByValidatorId( validatorId: string ) {
- const field = await context.getFieldByValidatorId( validatorId );
-
- if ( ! field ) {
- return;
- }
- const tab = field.closest(
- '.wp-block-woocommerce-product-tab__content'
- );
- const observer = new MutationObserver( () => {
- if ( tab && getComputedStyle( tab ).display !== 'none' ) {
- field.focus();
- observer.disconnect();
- }
- } );
-
- if ( tab ) {
- observer.observe( tab, {
- attributes: true,
- } );
- }
- }
-
- return {
- isValidating,
- async validate( newData?: Partial< T > ) {
- setIsValidating( true );
- return new Promise< void >( ( resolve, reject ) => {
- context
- .validateAll( newData )
- .then( ( errors ) => {
- if ( isInvalid( errors ) ) {
- reject( errors );
- } else {
- resolve();
- }
- } )
- .catch( () => {
- reject( context.errors );
- } );
- } ).finally( () => {
- setIsValidating( false );
- } );
- },
- focusByValidatorId,
- getFieldByValidatorId: context.getFieldByValidatorId,
- };
-}
diff --git a/packages/js/product-editor/src/contexts/validation-context/validation-context.ts b/packages/js/product-editor/src/contexts/validation-context/validation-context.ts
deleted file mode 100644
index e0a44643d9a..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/validation-context.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { createContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ValidationContextProps } from './types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ValidationContext = createContext< ValidationContextProps< any > >(
- {
- errors: {},
- getFieldByValidatorId: () => ( {} as Promise< HTMLInputElement > ),
- registerValidator: () => () => {},
- unRegisterValidator: () => () => {},
- validateField: () => Promise.resolve( undefined ),
- validateAll: () => Promise.resolve( {} ),
- }
-);
diff --git a/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx b/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx
deleted file mode 100644
index cc61a4da493..00000000000
--- a/packages/js/product-editor/src/contexts/validation-context/validation-provider.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * External dependencies
- */
-import type { PropsWithChildren } from 'react';
-import { useEntityRecord } from '@wordpress/core-data';
-import { createElement, useRef, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
- ValidationError,
- ValidationErrors,
- ValidationProviderProps,
- Validator,
- ValidatorResponse,
-} from './types';
-import { ValidationContext } from './validation-context';
-import { findFirstInvalidElement } from './helpers';
-
-export function ValidationProvider< T >( {
- postType,
- productId,
- children,
-}: PropsWithChildren< ValidationProviderProps > ) {
- const validatorsRef = useRef< Record< string, Validator< T > > >( {} );
- const fieldRefs = useRef< Record< string, HTMLInputElement > >( {} );
- const [ errors, setErrors ] = useState< ValidationErrors >( {} );
- const { record: initialValue } = useEntityRecord< T >(
- 'postType',
- postType,
- productId
- );
-
- function registerValidator(
- validatorId: string,
- validator: Validator< T >
- ): React.Ref< HTMLInputElement > {
- validatorsRef.current = {
- ...validatorsRef.current,
- [ validatorId ]: validator,
- };
-
- return ( element: HTMLInputElement ) => {
- fieldRefs.current[ validatorId ] = element;
- };
- }
-
- function unRegisterValidator( validatorId: string ): void {
- if ( validatorsRef.current[ validatorId ] ) {
- delete validatorsRef.current[ validatorId ];
- }
- if ( fieldRefs.current[ validatorId ] ) {
- delete fieldRefs.current[ validatorId ];
- }
- }
-
- async function validateField(
- validatorId: string,
- newData?: Partial< T >
- ): ValidatorResponse {
- const validators = validatorsRef.current;
- if ( validatorId in validators ) {
- const validator = validators[ validatorId ];
- const result = validator( initialValue, newData );
-
- return result.then( ( error ) => {
- const errorWithValidatorId: ValidationError =
- error !== undefined ? { validatorId, ...error } : undefined;
- setErrors( ( currentErrors ) => ( {
- ...currentErrors,
- [ validatorId ]: errorWithValidatorId,
- } ) );
- return errorWithValidatorId;
- } );
- }
-
- return Promise.resolve( undefined );
- }
-
- async function getFieldByValidatorId(
- validatorId: string
- ): Promise< HTMLInputElement > {
- return fieldRefs.current[ validatorId ];
- }
-
- async function validateAll(
- newData: Partial< T >
- ): Promise< ValidationErrors > {
- const newErrors: ValidationErrors = {};
- const validators = validatorsRef.current;
-
- for ( const validatorId in validators ) {
- newErrors[ validatorId ] = await validateField(
- validatorId,
- newData
- );
- }
-
- setErrors( newErrors );
-
- const firstElementWithError = findFirstInvalidElement(
- fieldRefs.current,
- newErrors
- );
-
- firstElementWithError?.focus();
-
- return newErrors;
- }
-
- return (
- <ValidationContext.Provider
- value={ {
- errors,
- getFieldByValidatorId,
- registerValidator,
- unRegisterValidator,
- validateField,
- validateAll,
- } }
- >
- { children }
- </ValidationContext.Provider>
- );
-}
diff --git a/packages/js/product-editor/src/hooks/index.ts b/packages/js/product-editor/src/hooks/index.ts
deleted file mode 100644
index a71ed616376..00000000000
--- a/packages/js/product-editor/src/hooks/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export { useCustomFields as __experimentalUseCustomFields } from './use-custom-fields';
-export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper';
-export { useFeedbackBar as __experimentalUseFeedbackBar } from './use-feedback-bar';
-export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order';
-export { useCurrencyInputProps as __experimentalUseCurrencyInputProps } from './use-currency-input-props';
-export { useVariationSwitcher as __experimentalUseVariationSwitcher } from './use-variation-switcher';
-export { default as __experimentalUseProductEntityProp } from './use-product-entity-prop';
-export { default as __experimentalUseProductMetadata } from './use-product-metadata';
-export { useProductTemplate as __experimentalUseProductTemplate } from './use-product-template';
-export { useProductScheduled as __experimentalUseProductScheduled } from './use-product-scheduled';
-export { useProductManager as __experimentalUseProductManager } from './use-product-manager';
-export { useMetaboxHiddenProduct as __experimentalUseMetaboxHiddenProduct } from './use-metabox-hidden-product';
-export { useClearSelectedBlockOnBlur as __experimentalClearSelectedBlockOnBlur } from './use-clear-selected-block-on-blur';
-export { useProductEdits as __experimentalUseProductEdits } from './use-product-edits';
diff --git a/packages/js/product-editor/src/hooks/test/use-blocks-helper.test.ts b/packages/js/product-editor/src/hooks/test/use-blocks-helper.test.ts
deleted file mode 100644
index c4807f7d42c..00000000000
--- a/packages/js/product-editor/src/hooks/test/use-blocks-helper.test.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import { useBlocksHelper } from '../use-blocks-helper';
-
-const mockGetBlockParentsByBlockName = jest.fn();
-const mockGetBlock = jest.fn();
-
-jest.mock( '@wordpress/data', () => ( {
- select: jest.fn( () => ( {
- getBlockParentsByBlockName: mockGetBlockParentsByBlockName,
- getBlock: mockGetBlock,
- } ) ),
-} ) );
-
-describe( 'useBlocksHelper', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should return the closest parent tab id', () => {
- const clientId = 'test-client-id';
- const parentClientId = 'parent-client-id';
- const attributes = { id: 'parent-tab-id' };
-
- mockGetBlockParentsByBlockName.mockReturnValue( [ parentClientId ] );
- mockGetBlock.mockReturnValue( { attributes } );
-
- const { result } = renderHook( () => useBlocksHelper() );
- const { getParentTabId } = result.current;
-
- const tabId = getParentTabId( clientId );
-
- expect( tabId ).toBe( 'parent-tab-id' );
- expect( mockGetBlockParentsByBlockName ).toHaveBeenCalledWith(
- clientId,
- 'woocommerce/product-tab',
- true
- );
- expect( mockGetBlock ).toHaveBeenCalledWith( parentClientId );
- } );
-
- it( 'should return null if no parent tab id is found', () => {
- const clientId = 'test-client-id';
-
- mockGetBlockParentsByBlockName.mockReturnValue( [] );
-
- const { result } = renderHook( () => useBlocksHelper() );
- const { getParentTabId } = result.current;
-
- const tabId = getParentTabId( clientId );
-
- expect( tabId ).toBe( null );
- expect( mockGetBlockParentsByBlockName ).toHaveBeenCalledWith(
- clientId,
- 'woocommerce/product-tab',
- true
- );
- expect( mockGetBlock ).not.toHaveBeenCalled();
- } );
-
- it( 'should return `undefined` if parent block has no attributes', () => {
- const clientId = 'test-client-id';
- const parentClientId = 'parent-client-id';
-
- mockGetBlockParentsByBlockName.mockReturnValue( [ parentClientId ] );
- mockGetBlock.mockReturnValue( {} );
-
- const { result } = renderHook( () => useBlocksHelper() );
- const { getParentTabId } = result.current;
-
- const tabId = getParentTabId( clientId );
-
- expect( tabId ).toBeUndefined();
- expect( mockGetBlockParentsByBlockName ).toHaveBeenCalledWith(
- clientId,
- 'woocommerce/product-tab',
- true
- );
- expect( mockGetBlock ).toHaveBeenCalledWith( parentClientId );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/test/use-error-handler.test.ts b/packages/js/product-editor/src/hooks/test/use-error-handler.test.ts
deleted file mode 100644
index 35fd631af3f..00000000000
--- a/packages/js/product-editor/src/hooks/test/use-error-handler.test.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import { useErrorHandler, WPError } from '../use-error-handler';
-import { useBlocksHelper } from '../use-blocks-helper';
-
-const mockNavigateTo = jest.fn();
-const mockFocusByValidatorId = jest.fn();
-const mockGetFieldByValidatorId = jest.fn();
-
-jest.mock( '@woocommerce/navigation', () => ( {
- getNewPath: jest.fn().mockReturnValue( '/new-path' ),
- navigateTo: jest.fn( ( args ) => mockNavigateTo( args ) ),
-} ) );
-
-jest.mock( '@wordpress/i18n', () => ( {
- __: jest.fn( ( msg ) => msg ),
-} ) );
-
-jest.mock( '../../contexts/validation-context', () => ( {
- useValidations: jest.fn().mockReturnValue( {
- focusByValidatorId: jest.fn( ( args ) =>
- mockFocusByValidatorId( args )
- ),
- getFieldByValidatorId: jest.fn( ( args ) =>
- mockGetFieldByValidatorId( args )
- ),
- } ),
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
- select: jest.fn().mockReturnValue( {
- getBlockParentsByBlockName: jest.fn().mockReturnValue( [ 'parent' ] ),
- } ),
-} ) );
-
-jest.mock( '../use-blocks-helper', () => ( {
- useBlocksHelper: jest.fn().mockReturnValue( {
- getParentTabId: jest.fn( () => 'inventory' ),
- getParentTabIdByBlockName: jest.fn( () => 'inventory' ),
- getClientIdByField: jest.fn( ( arg ) => arg ),
- } ),
-} ) );
-
-describe( 'useErrorHandler', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
-
- it( 'should return the correct error message and props when exists and the field is visible', async () => {
- const error = {
- code: 'product_invalid_sku',
- message: 'Invalid or duplicated SKU.',
- } as WPError;
- const visibleTab = 'inventory';
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { message, errorProps } = await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
-
- expect( message ).toBe( 'Invalid or duplicated SKU.' );
- expect( errorProps ).toEqual( {} );
- } );
-
- it( 'should return the correct error message and props when exists and the field is not visible', async () => {
- const error = {
- code: 'product_invalid_sku',
- } as WPError;
- const visibleTab = 'general';
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { message, errorProps } = await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
-
- expect( message ).toBe( 'Invalid or duplicated SKU.' );
- expect( errorProps.explicitDismiss ).toBeTruthy();
- } );
-
- it( 'should call focusByValidatorId for form field errors when errorProps action is triggered', async () => {
- const error = {
- code: 'product_form_field_error',
- validatorId: 'test-validator',
- } as WPError;
- const visibleTab = 'general';
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { errorProps } = await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
-
- expect( errorProps ).toBeDefined();
- expect( errorProps.actions ).toBeDefined();
- expect( errorProps.actions?.length ).toBeGreaterThan( 0 );
-
- // Trigger the action
- if ( errorProps.actions && errorProps.actions.length > 0 ) {
- errorProps.actions[ 0 ].onClick();
- }
-
- expect( mockFocusByValidatorId ).toHaveBeenCalledWith(
- 'test-validator'
- );
- expect( mockGetFieldByValidatorId ).toHaveBeenCalledWith(
- 'test-validator'
- );
- } );
- it( 'should call getParentTabIdByBlockName and focusByValidatorId for invalid sku errors when errorProps action is triggered', async () => {
- const error = {
- code: 'product_invalid_sku',
- } as WPError;
- const visibleTab = 'general';
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { errorProps: fieldsErrorProps } =
- await getProductErrorMessageAndProps( error, visibleTab );
-
- expect( fieldsErrorProps ).toBeDefined();
- expect( fieldsErrorProps.actions ).toBeDefined();
- expect( fieldsErrorProps.actions?.length ).toBeGreaterThan( 0 );
-
- // Trigger the action
- if ( fieldsErrorProps.actions && fieldsErrorProps.actions.length > 0 ) {
- fieldsErrorProps.actions[ 0 ].onClick();
- }
-
- expect( mockFocusByValidatorId ).toHaveBeenCalledWith( 'sku' );
- } );
- it( 'should not call getErrorPropsWithActions for invalid sku errors when getParentTabIdByBlockName returns null', async () => {
- const error = {
- code: 'product_invalid_sku',
- } as WPError;
- const visibleTab = 'general';
-
- ( useBlocksHelper as jest.Mock ).mockReturnValue( {
- getParentTabId: jest.fn( () => null ), // Mock returns null
- getParentTabIdByBlockName: jest.fn( () => null ), // Mock returns null
- getClientIdByField: jest.fn( () => null ), // Mock returns null
- } );
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { message, errorProps } = await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
-
- expect( errorProps ).toBeDefined();
- expect( errorProps.actions ).not.toBeDefined();
- expect( mockFocusByValidatorId ).not.toHaveBeenCalled();
- expect( message ).toBe( 'Invalid or duplicated SKU.' );
- } );
- it( 'should not call getErrorPropsWithActions for form field errors when getParentTabId returns null', async () => {
- const error = {
- code: 'product_form_field_error',
- validatorId: 'test-validator',
- message: 'Test error message',
- } as WPError;
- const visibleTab = 'inventory';
-
- ( useBlocksHelper as jest.Mock ).mockReturnValue( {
- getParentTabId: jest.fn( () => null ), // Mock returns null
- getParentTabIdByBlockName: jest.fn( () => null ), // Mock returns null
- getClientIdByField: jest.fn( () => null ), // Mock returns null
- } );
-
- const { result } = renderHook( () => useErrorHandler() );
- const { getProductErrorMessageAndProps } = result.current;
-
- const { message, errorProps } = await getProductErrorMessageAndProps(
- error,
- visibleTab
- );
-
- expect( errorProps ).toBeDefined();
- expect( errorProps.actions ).not.toBeDefined();
- expect( mockFocusByValidatorId ).not.toHaveBeenCalled();
- expect( mockGetFieldByValidatorId ).toHaveBeenCalledWith(
- 'test-validator'
- );
- expect( message ).toBe( 'Test error message' );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/test/use-product-attributes.test.ts b/packages/js/product-editor/src/hooks/test/use-product-attributes.test.ts
deleted file mode 100644
index 4db09e1d783..00000000000
--- a/packages/js/product-editor/src/hooks/test/use-product-attributes.test.ts
+++ /dev/null
@@ -1,517 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook, cleanup } from '@testing-library/react-hooks';
-import type {
- ProductProductAttribute,
- ProductAttributeTerm,
-} from '@woocommerce/data';
-import { resolveSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useProductAttributes } from '../use-product-attributes';
-
-const attributeTerms: Record< number, ProductAttributeTerm[] > = {
- 2: [
- {
- id: 64,
- name: 'Blue',
- slug: 'blue',
- description: '',
- menu_order: 0,
- count: 2,
- },
- {
- id: 76,
- name: 'Green',
- slug: 'green',
- description: '',
- menu_order: 0,
- count: 1,
- },
- {
- id: 63,
- name: 'Red',
- slug: 'red',
- description: '',
- menu_order: 0,
- count: 2,
- },
- {
- id: 65,
- name: 'Velvet',
- slug: 'velvet',
- description: '',
- menu_order: 0,
- count: 2,
- },
- {
- id: 66,
- name: 'Yellow',
- slug: 'yellow',
- description: '',
- menu_order: 0,
- count: 2,
- },
- ],
- 3: [
- {
- id: 64,
- name: 'Small',
- slug: 'small',
- description: '',
- menu_order: 0,
- count: 2,
- },
- {
- id: 76,
- name: 'Medium',
- slug: 'medium',
- description: '',
- menu_order: 0,
- count: 1,
- },
- {
- id: 63,
- name: 'Large',
- slug: 'large',
- description: '',
- menu_order: 0,
- count: 2,
- },
- ],
-};
-
-jest.useFakeTimers();
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- resolveSelect: jest.fn().mockReturnValue( {
- getProductAttributeTerms: jest
- .fn()
- .mockImplementation( ( { attribute_id } ) => {
- return new Promise( ( resolve ) => {
- setTimeout( () => {
- if ( attributeTerms[ attribute_id ] ) {
- return resolve( attributeTerms[ attribute_id ] );
- }
- return resolve( [] );
- }, 100 );
- } );
- } ),
- } ),
-} ) );
-
-const testAttributes: ProductProductAttribute[] = [
- {
- id: 0,
- name: 'Local',
- options: [ 'option 1', 'option 2' ],
- position: 0,
- variation: false,
- visible: false,
- slug: 'local',
- },
- {
- id: 2,
- name: 'Global: Color',
- options: [ 'Red', 'Yellow' ],
- position: 1,
- variation: false,
- visible: true,
- slug: 'color',
- },
- {
- id: 3,
- name: 'Global: Size',
- options: [ 'Small', 'Medium', 'Large' ],
- position: 2,
- variation: false,
- visible: true,
- slug: 'size',
- },
-];
-
-describe( 'useProductAttributes', () => {
- afterEach( () => {
- cleanup();
- ( resolveSelect as jest.Mock ).mockClear();
- jest.runOnlyPendingTimers();
- } );
-
- it( 'should return empty array when no attributes', async () => {
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes: [],
- onChange: jest.fn(),
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- result.current.fetchAttributes();
- await waitForNextUpdate();
- expect( resolveSelect ).not.toHaveBeenCalled();
- expect( result.current.attributes ).toEqual( [] );
- } );
-
- describe( 'handleChange', () => {
- it( 'should call onChange when handleChange is called with updated attributes', async () => {
- const allAttributes = [
- { ...testAttributes[ 1 ] },
- { ...testAttributes[ 2 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- result.current.fetchAttributes();
- jest.runOnlyPendingTimers();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...allAttributes[ 0 ], isDefault: false },
- { ...allAttributes[ 1 ], isDefault: false },
- { ...testAttributes[ 0 ], isDefault: false },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 0 ], position: 0 },
- { ...allAttributes[ 1 ], position: 1 },
- { ...testAttributes[ 0 ], variation: false, position: 2 },
- ],
- []
- );
- } );
-
- it( 'should keep both variable and non variable as part of the onChange list, when isVariation is false', async () => {
- const allAttributes = [
- { ...testAttributes[ 1 ], variation: true },
- { ...testAttributes[ 2 ], variation: true },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...testAttributes[ 0 ], isDefault: false },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...testAttributes[ 0 ], variation: false, position: 0 },
- { ...allAttributes[ 0 ], position: 1 },
- { ...allAttributes[ 1 ], position: 2 },
- ],
- []
- );
- } );
-
- it( 'should keep both variable and non variable as part of the onChange list, when isVariation is true', async () => {
- const allAttributes = [
- { ...testAttributes[ 1 ] },
- { ...testAttributes[ 2 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: true,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...testAttributes[ 0 ], isDefault: false },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 0 ], position: 0 },
- { ...allAttributes[ 1 ], position: 1 },
- { ...testAttributes[ 0 ], variation: true, position: 2 },
- ],
- []
- );
- } );
-
- it( 'should remove duplicate globals', async () => {
- const allAttributes = [
- { ...testAttributes[ 1 ] },
- { ...testAttributes[ 2 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: true,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...testAttributes[ 1 ], isDefault: false },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 1 ], position: 0 },
- { ...allAttributes[ 0 ], position: 1, variation: true },
- ],
- []
- );
- } );
-
- it( 'should remove duplicate locals by name', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: true,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...testAttributes[ 0 ], isDefault: false },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 1 ], position: 0 },
- { ...allAttributes[ 0 ], position: 1, variation: true },
- ],
- []
- );
- } );
-
- it( 'should pass default attributes as second param, defaulting to true when isDefault is not defined', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: true,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [ { ...testAttributes[ 0 ] } ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 1 ], position: 0 },
- { ...allAttributes[ 0 ], position: 1, variation: true },
- ],
- [
- {
- id: testAttributes[ 0 ].id,
- name: testAttributes[ 0 ].name,
- option: testAttributes[ 0 ].options[ 0 ],
- },
- ]
- );
- } );
-
- it( 'should pass default attributes as second param, when isDefault is true', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: true,
- productId: 123,
- },
- }
- );
- jest.runOnlyPendingTimers();
- result.current.fetchAttributes();
- await waitForNextUpdate();
- result.current.handleChange( [
- { ...testAttributes[ 0 ], isDefault: true },
- { ...testAttributes[ 1 ], isDefault: true },
- ] );
- expect( onChange ).toHaveBeenCalledWith(
- [
- { ...allAttributes[ 0 ], position: 0, variation: true },
- { ...allAttributes[ 1 ], position: 1, variation: true },
- ],
- [
- {
- id: testAttributes[ 0 ].id,
- name: testAttributes[ 0 ].name,
- option: testAttributes[ 0 ].options[ 0 ],
- },
- {
- id: testAttributes[ 1 ].id,
- name: testAttributes[ 1 ].name,
- option: testAttributes[ 1 ].options[ 0 ],
- },
- ]
- );
- } );
- } );
-
- describe( 'is not variation', () => {
- it( 'should filter out variation attributes', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ], variation: true },
- { ...testAttributes[ 2 ] },
- ];
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange: jest.fn(),
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- result.current.fetchAttributes();
- jest.runOnlyPendingTimers();
- await waitForNextUpdate();
- expect( result.current.attributes.length ).toBe( 2 );
- // Sets global attributes first.
- expect( result.current.attributes[ 0 ].name ).toEqual(
- allAttributes[ 2 ].name
- );
- expect( result.current.attributes[ 1 ].name ).toEqual(
- allAttributes[ 0 ].name
- );
- } );
-
- it( 'should update array if allAttributes update', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ], variation: true },
- { ...testAttributes[ 2 ] },
- ];
- const onChange = jest.fn();
- const { result, rerender, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- result.current.fetchAttributes();
- jest.runOnlyPendingTimers();
- await waitForNextUpdate();
- expect( result.current.attributes.length ).toBe( 2 );
-
- const filteredAttributes = [
- allAttributes[ 0 ],
- allAttributes[ 1 ],
- ];
-
- rerender( {
- allAttributes: filteredAttributes,
- onChange,
- isVariationAttributes: false,
- productId: 123,
- } );
- result.current.fetchAttributes();
- jest.runOnlyPendingTimers();
- await waitForNextUpdate();
- expect( result.current.attributes.length ).toBe( 1 );
- expect( result.current.attributes[ 0 ].name ).toEqual(
- allAttributes[ 0 ].name
- );
- } );
-
- it( 'sets terms for any global attributes and leaves options the same', async () => {
- const allAttributes = [
- { ...testAttributes[ 0 ] },
- { ...testAttributes[ 1 ] },
- { ...testAttributes[ 2 ] },
- ];
- const onChange = jest.fn();
- const { result, waitForNextUpdate } = renderHook(
- useProductAttributes,
- {
- initialProps: {
- allAttributes,
- onChange,
- isVariationAttributes: false,
- productId: 123,
- },
- }
- );
- result.current.fetchAttributes();
- jest.runOnlyPendingTimers();
- await waitForNextUpdate();
- expect( result.current.attributes.length ).toBe( 3 );
- expect( result.current.attributes[ 0 ].terms ).toEqual(
- attributeTerms[ result.current.attributes[ 0 ].id ].filter(
- ( t ) => allAttributes[ 1 ].options.includes( t.name )
- )
- );
- expect( result.current.attributes[ 0 ].options ).toEqual(
- result.current.attributes[ 0 ].options
- );
- expect( result.current.attributes[ 1 ].terms ).toEqual(
- attributeTerms[ result.current.attributes[ 1 ].id ]
- );
- } );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/test/use-product-entity-prop.test.ts b/packages/js/product-editor/src/hooks/test/use-product-entity-prop.test.ts
deleted file mode 100644
index ad06944ad68..00000000000
--- a/packages/js/product-editor/src/hooks/test/use-product-entity-prop.test.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import useProductEntityProp from '../use-product-entity-prop';
-
-const mockFnMetadataProp = jest.fn();
-const mockFnRegularProp = jest.fn();
-jest.mock( '@wordpress/core-data', () => ( {
- useEntityProp: jest
- .fn()
- .mockImplementation( ( _postType, _product, property ) => {
- if ( property === 'meta_data' ) {
- return [ [], mockFnMetadataProp ];
- }
- return [ '', mockFnRegularProp ];
- } ),
-} ) );
-
-describe( 'useProductEntityProp', () => {
- beforeEach( () => {
- mockFnMetadataProp.mockClear();
- mockFnRegularProp.mockClear();
- } );
- it( 'should correctly set meta_data property with key and value properties', async () => {
- const [ email, setEmail ] = renderHook( () =>
- useProductEntityProp( 'meta_data.email', { fallbackValue: '' } )
- ).result.current;
- expect( email ).toBe( '' );
- setEmail( 'someone@wordpress.com' );
- expect( mockFnMetadataProp ).toHaveBeenCalledWith( [
- {
- key: 'email',
- value: 'someone@wordpress.com',
- },
- ] );
- } );
- it( 'should call useEntityProp function passing the new value', async () => {
- const [ value, setValue ] = renderHook( () =>
- useProductEntityProp( 'regular_prop', { fallbackValue: '' } )
- ).result.current;
- expect( value ).toBe( '' );
- setValue( 'someone@wordpress.com' );
- expect( mockFnRegularProp ).toHaveBeenCalledWith(
- 'someone@wordpress.com'
- );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/test/use-product-metadata.test.ts b/packages/js/product-editor/src/hooks/test/use-product-metadata.test.ts
deleted file mode 100644
index b031b921dd2..00000000000
--- a/packages/js/product-editor/src/hooks/test/use-product-metadata.test.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import useProductMetadata from '../use-product-metadata';
-
-const mockFnMetadataProp = jest.fn();
-jest.mock( '@wordpress/core-data', () => ( {
- useEntityId: jest.fn().mockReturnValue( 123 ),
-} ) );
-
-jest.mock( '@wordpress/data', () => ( {
- useSelect: jest.fn().mockImplementation( ( callback ) => {
- return callback(
- jest.fn().mockReturnValue( {
- hasFinishedResolution: jest.fn().mockReturnValue( true ),
- getEditedEntityRecord: () => ( {
- meta_data: [
- {
- key: 'field1',
- value: 'value1',
- },
- {
- key: 'field2',
- value: 'value1',
- },
- {
- key: 'existing_field',
- value: 'value1',
- },
- ],
- } ),
- } )
- );
- } ),
- useDispatch: jest.fn().mockImplementation( () => {
- return {
- editEntityRecord: mockFnMetadataProp,
- };
- } ),
-} ) );
-
-describe( 'useProductMetadata', () => {
- it( 'should update all the metadata with new values and not replace existing fields', async () => {
- const { update } = renderHook( () => useProductMetadata() ).result
- .current;
- update( [
- {
- key: 'field1',
- value: 'value2',
- },
- {
- key: 'field2',
- value: 'value2',
- },
- ] );
- expect( mockFnMetadataProp ).toHaveBeenCalledWith(
- 'postType',
- 'product',
- 123,
- {
- meta_data: [
- {
- key: 'existing_field',
- value: 'value1',
- },
- {
- key: 'field1',
- value: 'value2',
- },
- {
- key: 'field2',
- value: 'value2',
- },
- ],
- }
- );
- } );
- it( 'should return the metadata as an object for easy readings', async () => {
- const { metadata } = renderHook( () =>
- useProductMetadata( { postType: 'product', id: 123 } )
- ).result.current;
- expect( metadata ).toEqual( {
- field1: 'value1',
- field2: 'value1',
- existing_field: 'value1',
- } );
- } );
- it( 'should return isLoading as false when the resolution is finished', async () => {
- const { isLoading } = renderHook( () =>
- useProductMetadata( { postType: 'product', id: 123 } )
- ).result.current;
- expect( isLoading ).toEqual( false );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/use-blocks-helper/index.ts b/packages/js/product-editor/src/hooks/use-blocks-helper/index.ts
deleted file mode 100644
index 5ad5df55bcf..00000000000
--- a/packages/js/product-editor/src/hooks/use-blocks-helper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-blocks-helper';
diff --git a/packages/js/product-editor/src/hooks/use-blocks-helper/use-blocks-helper.ts b/packages/js/product-editor/src/hooks/use-blocks-helper/use-blocks-helper.ts
deleted file mode 100644
index 2fe0cc2dd02..00000000000
--- a/packages/js/product-editor/src/hooks/use-blocks-helper/use-blocks-helper.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { select } from '@wordpress/data';
-
-export function useBlocksHelper() {
- function getClosestParentTabId( clientId: string ) {
- const [ closestParentClientId ] = select(
- 'core/block-editor'
- ).getBlockParentsByBlockName(
- clientId,
- 'woocommerce/product-tab',
- true
- );
- if ( ! closestParentClientId ) {
- return null;
- }
- const block = select( 'core/block-editor' ).getBlock(
- closestParentClientId
- );
- return block?.attributes?.id;
- }
-
- function getClientIdByField( field: HTMLElement ) {
- const parentBlockElement = field.closest(
- '[data-block]'
- ) as HTMLElement;
- return parentBlockElement?.dataset.block;
- }
-
- function getParentTabId( clientId?: string | null ) {
- if ( clientId ) {
- return getClosestParentTabId( clientId );
- }
- return null;
- }
-
- function getParentTabIdByBlockName( blockName: string ) {
- const blockClientIds =
- select( 'core/block-editor' ).getBlocksByName( blockName );
-
- if ( blockClientIds.length ) {
- return getClosestParentTabId( blockClientIds[ 0 ] );
- }
- return null;
- }
-
- return {
- getClientIdByField,
- getParentTabId,
- getParentTabIdByBlockName,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/index.ts b/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/index.ts
deleted file mode 100644
index 8c5930bc2f5..00000000000
--- a/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-clear-selected-block-on-blur';
diff --git a/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/use-clear-selected-block-on-blur.ts b/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/use-clear-selected-block-on-blur.ts
deleted file mode 100644
index 034cd2c116d..00000000000
--- a/packages/js/product-editor/src/hooks/use-clear-selected-block-on-blur/use-clear-selected-block-on-blur.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-// This is a workaround to hide the toolbar when the block is blurred.
-// This is a temporary solution until using Gutenberg 18 with the
-// fix from https://github.com/WordPress/gutenberg/pull/59800
-export const useClearSelectedBlockOnBlur = () => {
- const { clearSelectedBlock } = useDispatch( blockEditorStore );
-
- function handleBlur( event: {
- relatedTarget: ( EventTarget & Element ) | null;
- } ) {
- const isToolbarOrLinkPopover =
- event?.relatedTarget?.closest(
- '.block-editor-block-contextual-toolbar'
- ) || event?.relatedTarget?.closest( '.block-editor-link-control' );
-
- if ( ! isToolbarOrLinkPopover ) {
- clearSelectedBlock();
- }
- }
-
- return {
- handleBlur,
- };
-};
diff --git a/packages/js/product-editor/src/hooks/use-confirm-unsaved-product-changes.ts b/packages/js/product-editor/src/hooks/use-confirm-unsaved-product-changes.ts
deleted file mode 100644
index 7688e7ead9e..00000000000
--- a/packages/js/product-editor/src/hooks/use-confirm-unsaved-product-changes.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useConfirmUnsavedChanges } from '@woocommerce/navigation';
-import { useEntityId } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { preventLeavingProductForm } from '../utils/prevent-leaving-product-form';
-import { useProductEdits } from './use-product-edits';
-
-export function useConfirmUnsavedProductChanges(
- productType = <string>'product'
-) {
- const productId = useEntityId( 'postType', productType );
-
- const { hasEdits } = useProductEdits( productType );
- const { isSaving } = useSelect(
- ( select ) => {
- const { isSavingEntityRecord } = select( 'core' );
-
- return {
- isSaving: isSavingEntityRecord(
- 'postType',
- productType,
- productId
- ),
- };
- },
- [ productId, productType ]
- );
-
- useConfirmUnsavedChanges(
- hasEdits || isSaving,
- preventLeavingProductForm( productId )
- );
-}
diff --git a/packages/js/product-editor/src/hooks/use-currency-input-props.ts b/packages/js/product-editor/src/hooks/use-currency-input-props.ts
deleted file mode 100644
index 889fc010b20..00000000000
--- a/packages/js/product-editor/src/hooks/use-currency-input-props.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { CurrencyContext } from '@woocommerce/currency';
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useProductHelper } from './use-product-helper';
-import { deferSelectInFocus, formatCurrencyDisplayValue } from '../utils';
-
-export type CurrencyInputProps = {
- prefix: string;
- className: string;
- value: string;
- sanitize: ( value: string | number ) => string;
- onChange: ( value: string | undefined ) => void;
- onFocus: ( event: React.FocusEvent< HTMLInputElement > ) => void;
- onKeyUp: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-};
-
-type Props = {
- value: string;
- onChange: ( value: string ) => void;
- onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
- onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-};
-
-const CURRENCY_INPUT_MAX = 1_000_000_000_000_000_000.0;
-
-export const useCurrencyInputProps = ( {
- value,
- onChange,
- onFocus,
- onKeyUp,
-}: Props ) => {
- const { sanitizePrice } = useProductHelper();
-
- const context = useContext( CurrencyContext );
- const { getCurrencyConfig, formatAmount } = context;
- const currencyConfig = getCurrencyConfig();
-
- const currencyInputProps: CurrencyInputProps = {
- prefix: currencyConfig.symbol,
- className: 'components-currency-control',
- value: formatCurrencyDisplayValue(
- String( value ),
- currencyConfig,
- formatAmount
- ),
- sanitize: ( val: string | number ) => {
- return sanitizePrice( String( val ) );
- },
- onFocus( event: React.FocusEvent< HTMLInputElement > ) {
- deferSelectInFocus( event.currentTarget );
- if ( onFocus ) {
- onFocus( event );
- }
- },
- onKeyUp( event: React.KeyboardEvent< HTMLInputElement > ) {
- const amount = Number.parseFloat( sanitizePrice( value || '0' ) );
- const step = Number( event.currentTarget.step || '1' );
- if ( event.code === 'ArrowUp' ) {
- onChange( String( amount + step ) );
- }
- if ( event.code === 'ArrowDown' ) {
- onChange( String( amount - step ) );
- }
- if ( onKeyUp ) {
- onKeyUp( event );
- }
- },
- onChange( newValue ) {
- const sanitizeValue = sanitizePrice( newValue ?? '' );
- if ( onChange ) {
- onChange(
- Number( sanitizeValue ) <= CURRENCY_INPUT_MAX
- ? sanitizeValue
- : String( CURRENCY_INPUT_MAX )
- );
- }
- },
- };
- return currencyInputProps;
-};
diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/index.ts b/packages/js/product-editor/src/hooks/use-custom-fields/index.ts
deleted file mode 100644
index ebd6721a981..00000000000
--- a/packages/js/product-editor/src/hooks/use-custom-fields/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-custom-fields';
diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/types.ts b/packages/js/product-editor/src/hooks/use-custom-fields/types.ts
deleted file mode 100644
index 0f5c0ff3145..00000000000
--- a/packages/js/product-editor/src/hooks/use-custom-fields/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Metadata } from '../../types';
-
-export type DisjoinMetas< T extends Metadata< string > > = {
- customFields: T[];
- otherMetas: T[];
-};
diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts
deleted file mode 100644
index 33e73f5c1da..00000000000
--- a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import type { SetStateAction } from 'react';
-import { useEntityProp } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { Metadata } from '../../types';
-import { disjoinMetas } from './utils';
-
-export function useCustomFields<
- T extends Metadata< string > = Metadata< string >
->() {
- const [ metas, setMetas ] = useEntityProp< T[] >(
- 'postType',
- 'product',
- 'meta_data'
- );
-
- const { customFields, otherMetas } = useMemo(
- function extractCustomFieldsFromMetas() {
- return metas.reduce( disjoinMetas< T >, {
- customFields: [],
- otherMetas: [],
- } );
- },
- [ metas ]
- );
-
- function setCustomFields( value: SetStateAction< T[] > ) {
- const newValue =
- typeof value === 'function' ? value( customFields ) : value;
-
- setMetas( [ ...otherMetas, ...newValue ] );
- }
-
- function addCustomFields( value: T[] ) {
- setCustomFields( ( current ) => [ ...current, ...value ] );
- }
-
- function updateCustomField( customField: T, index?: number ) {
- setCustomFields( ( current ) =>
- current.map( ( field, fieldIndex ) => {
- if ( customField.id && field.id === customField.id ) {
- return customField;
- }
- if ( index === fieldIndex ) {
- return customField;
- }
- return field;
- } )
- );
- }
-
- function removeCustomField( customField: T ) {
- setCustomFields( ( current ) => {
- // If the id is undefined then it is a local copy.
- if ( customField.id === undefined ) {
- return current.filter( function isNotEquals( field ) {
- return ! (
- field.key === customField.key &&
- field.value === customField.value
- );
- } );
- }
-
- return current.map( ( field ) => {
- if ( field.id === customField.id ) {
- return {
- ...field,
- value: null,
- };
- }
-
- return field;
- } );
- } );
- }
-
- return {
- customFields,
- addCustomFields,
- setCustomFields,
- updateCustomField,
- removeCustomField,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts b/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts
deleted file mode 100644
index 4279278bdbe..00000000000
--- a/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Metadata } from '../../../types';
-import type { DisjoinMetas } from '../types';
-
-export function isCustomField< T extends Metadata< string > >(
- customField: T
-) {
- return ! customField.key.startsWith( '_' ) && customField.value !== null;
-}
-
-export function disjoinMetas< T extends Metadata< string > >(
- state: DisjoinMetas< T >,
- meta: T
-): DisjoinMetas< T > {
- if ( isCustomField( meta ) ) {
- state.customFields.push( meta );
- } else {
- state.otherMetas.push( meta );
- }
- return state;
-}
diff --git a/packages/js/product-editor/src/hooks/use-draggable/index.ts b/packages/js/product-editor/src/hooks/use-draggable/index.ts
deleted file mode 100644
index 2fcffda2d6b..00000000000
--- a/packages/js/product-editor/src/hooks/use-draggable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-draggable';
diff --git a/packages/js/product-editor/src/hooks/use-draggable/styles.scss b/packages/js/product-editor/src/hooks/use-draggable/styles.scss
deleted file mode 100644
index a51b20faad8..00000000000
--- a/packages/js/product-editor/src/hooks/use-draggable/styles.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.woocommerce-draggable {
- &__container {
- [data-draggable="target"] {
- &.is-dragging {
- opacity: 0.5;
- background-color: $white;
- border-radius: $grid-unit-05;
- }
-
- &.is-dragging-before,
- &.is-dragging-after {
- position: relative;
- }
-
- &.is-dragging-before:before,
- &.is-dragging-after:after {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: $grid-unit-05 + 1px;
- left: 0;
- background-color: var(--wp-admin-theme-color);
- border-radius: $grid-unit-30;
- }
-
- &.is-dragging-before:before {
- bottom: 100%;
- }
-
- &.is-dragging-after:after {
- top: 100%;
- }
- }
-
- [data-draggable="handler"] {
- cursor: grab;
- user-select: none;
- }
- }
-}
diff --git a/packages/js/product-editor/src/hooks/use-draggable/types.ts b/packages/js/product-editor/src/hooks/use-draggable/types.ts
deleted file mode 100644
index d19f14d6afb..00000000000
--- a/packages/js/product-editor/src/hooks/use-draggable/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type DraggableProps< T > = {
- onSort( fnState: ( items: T[] ) => T[] ): void;
-};
diff --git a/packages/js/product-editor/src/hooks/use-draggable/use-draggable.ts b/packages/js/product-editor/src/hooks/use-draggable/use-draggable.ts
deleted file mode 100644
index 0af79355e74..00000000000
--- a/packages/js/product-editor/src/hooks/use-draggable/use-draggable.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * External dependencies
- */
-import { DragEvent, MouseEvent } from 'react';
-import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { DraggableProps } from './types';
-import { findDraggableIndex, sort } from './utils';
-
-export function useDraggable< T >( { onSort }: DraggableProps< T > ) {
- const dragIndexRef = useRef< number >( -1 );
- const dropIndexRef = useRef< number >( -1 );
- const draggableElementsRef = useRef< HTMLElement[] >( [] );
-
- function onDragStart( event: DragEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- if ( element.dataset.draggable !== 'target' ) {
- event.preventDefault();
- return;
- }
-
- event.dataTransfer.effectAllowed = 'move';
- event.dataTransfer.dropEffect = 'move';
-
- element.classList.add( 'is-dragging' );
-
- const parent = element.closest( '[data-draggable=parent]' );
- draggableElementsRef.current = Array.from(
- parent
- ?.querySelectorAll< HTMLElement >( '[data-draggable=target]' )
- ?.values() ?? []
- );
-
- dragIndexRef.current = draggableElementsRef.current.indexOf( element );
- }
-
- function onDragEnd( event: DragEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- if ( element.dataset.draggable !== 'target' ) {
- event.preventDefault();
- return;
- }
- element.classList.remove( 'is-dragging' );
- }
-
- function onDragEnter( event: DragEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- const relatedTarget = event.relatedTarget as HTMLElement | null;
- if (
- element.dataset.draggable !== 'target' ||
- element.contains( relatedTarget )
- ) {
- event.preventDefault();
- return;
- }
-
- const { draggable, index } = findDraggableIndex(
- draggableElementsRef.current,
- element
- );
-
- dropIndexRef.current = index;
-
- if ( dragIndexRef.current === dropIndexRef.current ) return;
- if ( dragIndexRef.current < dropIndexRef.current ) {
- draggable?.classList.add( 'is-dragging-after' );
- } else {
- draggable?.classList.add( 'is-dragging-before' );
- }
- }
-
- function onDragLeave( event: DragEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- const relatedTarget = event.relatedTarget as HTMLElement | null;
- if (
- element.dataset.draggable !== 'target' ||
- element.contains( relatedTarget )
- ) {
- event.preventDefault();
- return;
- }
-
- element.classList.remove( 'is-dragging-before' );
- element.classList.remove( 'is-dragging-after' );
- }
-
- function onDrop( event: DragEvent< HTMLElement > ) {
- event.preventDefault();
- const element = event.target as HTMLElement;
- const draggable =
- element.dataset.draggable === 'target'
- ? element
- : element.closest(
- '[data-draggable=parent] [data-draggable=target]'
- );
- draggable?.removeAttribute( 'draggable' );
- draggable?.classList.remove( 'is-dragging-before' );
- draggable?.classList.remove( 'is-dragging-after' );
-
- if (
- dragIndexRef.current !== -1 &&
- dropIndexRef.current !== -1 &&
- dragIndexRef.current !== dropIndexRef.current
- ) {
- const drapIndex = dragIndexRef.current;
- const dropIndex = dropIndexRef.current;
-
- onSort( ( items: T[] ) =>
- sort(
- items,
- drapIndex,
- dropIndex + Number( drapIndex < dropIndex )
- )
- );
- }
-
- dragIndexRef.current = -1;
- dropIndexRef.current = -1;
- }
-
- function onDragOver( event: DragEvent< HTMLElement > ) {
- event.preventDefault();
- return false;
- }
-
- function onMouseDown( event: MouseEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- element
- .closest( '[data-draggable=parent] [data-draggable=target]' )
- ?.setAttribute( 'draggable', 'true' );
- }
-
- function onMouseUp( event: MouseEvent< HTMLElement > ) {
- const element = event.target as HTMLElement;
- element
- .closest( '[data-draggable=parent] [data-draggable=target]' )
- ?.removeAttribute( 'draggable' );
- }
-
- return {
- container: {
- 'data-draggable': 'parent',
- className: 'woocommerce-draggable__container',
- },
- draggable: {
- 'data-draggable': 'target',
- onDragStart,
- onDragEnter,
- onDragOver,
- onDragLeave,
- onDragEnd,
- onDrop,
- },
- handler: {
- 'data-draggable': 'handler',
- onMouseDown,
- onMouseUp,
- onMouseLeave: onMouseUp,
- },
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-draggable/utils.ts b/packages/js/product-editor/src/hooks/use-draggable/utils.ts
deleted file mode 100644
index c95fe548c33..00000000000
--- a/packages/js/product-editor/src/hooks/use-draggable/utils.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export function findDraggableIndex(
- draggableElements: HTMLElement[],
- element: HTMLElement
-) {
- const index = draggableElements.findIndex(
- ( child ) => child === element || child.contains( element )
- );
- return {
- draggable: index >= 0 ? draggableElements[ index ] : undefined,
- index,
- };
-}
-
-export function sort< T >(
- items: T[],
- currentIndex: number,
- newIndex: number
-): T[] {
- const currentItem = items[ currentIndex ];
- const newItems = items.reduce< T[] >( ( current, item, index ) => {
- if ( index !== currentIndex ) {
- if ( index === newIndex ) {
- current.push( currentItem );
- }
- current.push( item );
- }
- return current;
- }, [] );
-
- if ( newIndex >= items.length ) {
- newItems.push( currentItem );
- }
-
- return newItems;
-}
diff --git a/packages/js/product-editor/src/hooks/use-error-handler.ts b/packages/js/product-editor/src/hooks/use-error-handler.ts
deleted file mode 100644
index 799f4e3060b..00000000000
--- a/packages/js/product-editor/src/hooks/use-error-handler.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { useValidations } from '../contexts/validation-context';
-import { useBlocksHelper } from './use-blocks-helper';
-
-export type WPErrorCode =
- | 'variable_product_no_variation_prices'
- | 'product_form_field_error'
- | 'product_invalid_sku'
- | 'product_invalid_global_unique_id'
- | 'product_create_error'
- | 'product_publish_error'
- | 'product_preview_error';
-
-export type WPError = {
- code: WPErrorCode;
- message: string;
- validatorId?: string;
-};
-
-type ErrorProps = {
- explicitDismiss: boolean;
- actions?: ErrorAction[];
-};
-
-type ErrorAction = {
- label: string;
- onClick: () => void;
-};
-
-type UseErrorHandlerTypes = {
- getProductErrorMessageAndProps: (
- error: WPError,
- visibleTab: string | null
- ) => Promise< {
- message: string;
- errorProps: ErrorProps;
- } >;
-};
-
-function getUrl( tab: string ): string {
- return getNewPath( { tab } );
-}
-
-function getErrorPropsWithActions(
- errorContext = '',
- validatorId: string,
- focusByValidatorId: ( validatorId: string ) => void,
- label: string = __( 'View error', 'woocommerce' )
-): ErrorProps {
- return {
- explicitDismiss: true,
- actions: [
- {
- label,
- onClick: async () => {
- await focusByValidatorId( validatorId );
- navigateTo( {
- url: getUrl( errorContext ),
- } );
- },
- },
- ],
- };
-}
-
-export const useErrorHandler = (): UseErrorHandlerTypes => {
- const { focusByValidatorId, getFieldByValidatorId } = useValidations();
- const { getClientIdByField, getParentTabId, getParentTabIdByBlockName } =
- useBlocksHelper();
-
- async function getClientIdByValidatorId( validatorId: string ) {
- if ( ! validatorId ) {
- return null;
- }
- const field = await getFieldByValidatorId( validatorId );
- if ( ! field ) {
- return null;
- }
- return getClientIdByField( field );
- }
-
- const getProductErrorMessageAndProps = useCallback(
- async ( error: WPError, visibleTab: string | null ) => {
- const response = {
- message: '',
- errorProps: {} as ErrorProps,
- };
- const { code, message: errorMessage, validatorId = '' } = error;
-
- const clientId = await getClientIdByValidatorId( validatorId );
- const errorContext = getParentTabId( clientId );
-
- switch ( code ) {
- case 'variable_product_no_variation_prices':
- response.message = errorMessage;
- if (
- visibleTab !== 'variations' &&
- errorContext !== null
- ) {
- response.errorProps = getErrorPropsWithActions(
- errorContext,
- validatorId,
- focusByValidatorId
- );
- }
- break;
- case 'product_form_field_error':
- response.message = errorMessage;
- if (
- visibleTab !== errorContext &&
- errorContext !== null
- ) {
- response.errorProps = getErrorPropsWithActions(
- errorContext,
- validatorId,
- focusByValidatorId
- );
- }
- break;
- case 'product_invalid_sku':
- response.message = __(
- 'Invalid or duplicated SKU.',
- 'woocommerce'
- );
- const errorSkuContext = getParentTabIdByBlockName(
- 'woocommerce/product-sku-field'
- );
- if (
- visibleTab !== errorSkuContext &&
- errorSkuContext !== null
- ) {
- response.errorProps = getErrorPropsWithActions(
- errorSkuContext,
- 'sku',
- focusByValidatorId,
- __( 'View SKU field', 'woocommerce' )
- );
- }
- break;
- case 'product_invalid_global_unique_id':
- response.message = __(
- 'Invalid or duplicated GTIN, UPC, EAN or ISBN.',
- 'woocommerce'
- );
- const errorUniqueIdContext = errorContext || 'inventory';
- if ( visibleTab !== errorUniqueIdContext ) {
- response.errorProps = getErrorPropsWithActions(
- errorUniqueIdContext,
- 'global_unique_id',
- focusByValidatorId,
- __( 'View identifier field', 'woocommerce' )
- );
- }
- break;
- case 'product_create_error':
- response.message = __(
- 'Failed to create product.',
- 'woocommerce'
- );
- break;
- case 'product_publish_error':
- response.message = __(
- 'Failed to publish product.',
- 'woocommerce'
- );
- break;
- case 'product_preview_error':
- response.message = __(
- 'Failed to preview product.',
- 'woocommerce'
- );
- break;
- default:
- response.message = __(
- 'Failed to save product.',
- 'woocommerce'
- );
- break;
- }
- return response;
- },
- []
- );
-
- return { getProductErrorMessageAndProps };
-};
diff --git a/packages/js/product-editor/src/hooks/use-feedback-bar/index.ts b/packages/js/product-editor/src/hooks/use-feedback-bar/index.ts
deleted file mode 100644
index 5cfc4b47aff..00000000000
--- a/packages/js/product-editor/src/hooks/use-feedback-bar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-feedback-bar';
diff --git a/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts b/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
deleted file mode 100644
index 52811af648f..00000000000
--- a/packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
-import { optionsStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME } from '../../constants';
-
-export const useFeedbackBar = () => {
- const { updateOptions } = useDispatch( optionsStore );
-
- const { shouldShowFeedbackBar } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const showFeedbackBarOption = getOption(
- PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME
- ) as string;
-
- const resolving = ! hasFinishedResolution( 'getOption', [
- PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME,
- ] );
-
- return {
- shouldShowFeedbackBar:
- ! resolving &&
- window.wcTracks?.isEnabled &&
- showFeedbackBarOption === 'yes',
- };
- }, [] );
-
- const showFeedbackBar = () => {
- updateOptions( {
- [ PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME ]: 'yes',
- } );
- };
-
- const getOptions = async () => {
- const { getOption } = resolveSelect( optionsStore );
-
- const showFeedbackBarOption = ( await getOption(
- PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME
- ) ) as string;
-
- return {
- showFeedbackBarOption,
- };
- };
-
- const maybeShowFeedbackBar = async () => {
- const { showFeedbackBarOption } = await getOptions();
-
- if ( window.wcTracks?.isEnabled && showFeedbackBarOption !== 'no' ) {
- showFeedbackBar();
- }
- };
-
- const hideFeedbackBar = () => {
- updateOptions( {
- [ PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME ]: 'no',
- } );
- };
-
- return {
- shouldShowFeedbackBar,
- maybeShowFeedbackBar,
- hideFeedbackBar,
- };
-};
diff --git a/packages/js/product-editor/src/hooks/use-metabox-hidden-product/index.ts b/packages/js/product-editor/src/hooks/use-metabox-hidden-product/index.ts
deleted file mode 100644
index 94520e5c78a..00000000000
--- a/packages/js/product-editor/src/hooks/use-metabox-hidden-product/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-metabox-hidden-product';
diff --git a/packages/js/product-editor/src/hooks/use-metabox-hidden-product/use-metabox-hidden-product.ts b/packages/js/product-editor/src/hooks/use-metabox-hidden-product/use-metabox-hidden-product.ts
deleted file mode 100644
index 38ca90bb396..00000000000
--- a/packages/js/product-editor/src/hooks/use-metabox-hidden-product/use-metabox-hidden-product.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { WCUser, useUser } from '@woocommerce/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { dispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-
-export function useMetaboxHiddenProduct() {
- const [ isSaving, setIsSaving ] = useState( false );
-
- const { user, isRequesting } = useUser();
- const [
- metaboxhiddenProduct,
- setMetaboxhiddenProduct,
- prevMetaboxhiddenProduct,
- ] = useEntityProp< string[] >(
- 'root',
- 'user',
- 'metaboxhidden_product',
- user.id
- );
-
- async function saveMetaboxhiddenProduct(
- value: string[]
- ): Promise< WCUser > {
- try {
- setIsSaving( true );
-
- const { saveEntityRecord } = dispatch( coreStore );
- const currentUser: WCUser = ( await saveEntityRecord(
- 'root',
- 'user',
- {
- id: user.id,
- metaboxhidden_product: value,
- }
- ) ) as never;
-
- return currentUser;
- } finally {
- setIsSaving( false );
- }
- }
-
- return {
- isLoading: ( isRequesting as boolean ) || isSaving,
- metaboxhiddenProduct,
- prevMetaboxhiddenProduct,
- setMetaboxhiddenProduct,
- saveMetaboxhiddenProduct,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-notice/index.ts b/packages/js/product-editor/src/hooks/use-notice/index.ts
deleted file mode 100644
index fe0016fa553..00000000000
--- a/packages/js/product-editor/src/hooks/use-notice/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-notice';
diff --git a/packages/js/product-editor/src/hooks/use-notice/use-notice.ts b/packages/js/product-editor/src/hooks/use-notice/use-notice.ts
deleted file mode 100644
index 7bb760bb519..00000000000
--- a/packages/js/product-editor/src/hooks/use-notice/use-notice.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * External dependencies
- */
-import { resolveSelect, useDispatch, useSelect } from '@wordpress/data';
-import { optionsStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { SINGLE_VARIATION_NOTICE_DISMISSED_OPTION } from '../../constants';
-
-export function useNotice() {
- const { updateOptions } = useDispatch( optionsStore );
-
- const { dismissedNotices, isResolving } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const dismissedNoticesOption = getOption(
- SINGLE_VARIATION_NOTICE_DISMISSED_OPTION
- ) as [ number ];
- const resolving = ! hasFinishedResolution( 'getOption', [
- SINGLE_VARIATION_NOTICE_DISMISSED_OPTION,
- ] );
- return {
- dismissedNotices: dismissedNoticesOption || [],
- isResolving: resolving,
- };
- }, [] );
-
- const getOptions = async () => {
- const { getOption } = resolveSelect( optionsStore );
-
- const dismissedNoticesOption = ( await getOption(
- SINGLE_VARIATION_NOTICE_DISMISSED_OPTION
- ) ) as [ number ];
-
- return {
- dismissedNoticesOption: dismissedNoticesOption || [],
- };
- };
-
- const dismissNotice = async ( productId: number ) => {
- const { dismissedNoticesOption } = await getOptions();
- updateOptions( {
- [ SINGLE_VARIATION_NOTICE_DISMISSED_OPTION ]: [
- ...dismissedNoticesOption,
- productId,
- ],
- } );
- };
-
- return {
- dismissedNotices,
- dismissNotice,
- isResolving,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-number-input-props.ts b/packages/js/product-editor/src/hooks/use-number-input-props.ts
deleted file mode 100644
index 58473a4df83..00000000000
--- a/packages/js/product-editor/src/hooks/use-number-input-props.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useProductHelper } from './use-product-helper';
-import { deferSelectInFocus } from '../utils';
-
-export type NumberInputProps = {
- value: string;
- onChange: ( value: string | undefined ) => void;
- onFocus: ( event: React.FocusEvent< HTMLInputElement > ) => void;
- onKeyDown: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
- onKeyUp: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
- inputMode: 'decimal';
-};
-
-type Props = {
- value: string;
- onChange: ( value: string ) => void;
- onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
- onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
- min: number;
- max: number;
-};
-
-const NOT_NUMBERS_OR_SEPARATORS_OR_MINUS_REGEX = /[^0-9,.\ -]/g;
-
-export const useNumberInputProps = ( {
- value,
- onChange,
- onFocus,
- onKeyDown,
- min,
- max,
-}: Props ) => {
- const { formatNumber, parseNumber } = useProductHelper();
-
- const numberInputProps: NumberInputProps = {
- value: formatNumber( value ),
- onFocus( event: React.FocusEvent< HTMLInputElement > ) {
- deferSelectInFocus( event.currentTarget );
- if ( onFocus ) {
- onFocus( event );
- }
- },
- onKeyUp( event: React.KeyboardEvent< HTMLInputElement > ) {
- if ( event.code === 'ArrowUp' || event.code === 'ArrowDown' ) {
- event.preventDefault();
- }
- },
- inputMode: 'decimal',
- onKeyDown( event: React.KeyboardEvent< HTMLInputElement > ) {
- const amount = Number.parseFloat( value || '0' );
- const step = Number( event.currentTarget.step || '1' );
-
- if ( event.code === 'ArrowUp' ) {
- event.preventDefault();
- if ( amount + step <= max ) onChange( String( amount + step ) );
- }
- if ( event.code === 'ArrowDown' ) {
- event.preventDefault();
- if ( amount - step >= min ) onChange( String( amount - step ) );
- }
- if ( onKeyDown ) {
- onKeyDown( event );
- }
- },
- onChange( newValue ) {
- let sanitizeValue = parseNumber(
- ( newValue ?? '' ).replace(
- NOT_NUMBERS_OR_SEPARATORS_OR_MINUS_REGEX,
- ''
- )
- );
- const numberValue = Number( sanitizeValue );
-
- if ( sanitizeValue && numberValue >= max ) {
- sanitizeValue = String( max );
- } else if ( sanitizeValue && numberValue <= min ) {
- sanitizeValue = String( min );
- }
- onChange( ! Number.isNaN( numberValue ) ? sanitizeValue : '' );
- },
- };
- return numberInputProps;
-};
diff --git a/packages/js/product-editor/src/hooks/use-product-attributes.ts b/packages/js/product-editor/src/hooks/use-product-attributes.ts
deleted file mode 100644
index 38f80141a2f..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-attributes.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * External dependencies
- */
-import {
- experimentalProductAttributeTermsStore,
- Product,
- type ProductProductAttribute,
- ProductAttributeTerm,
- ProductDefaultAttribute,
-} from '@woocommerce/data';
-import { resolveSelect } from '@wordpress/data';
-import { useCallback, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { sift } from '../utils';
-
-export type EnhancedProductAttribute = ProductProductAttribute & {
- isDefault?: boolean;
- terms?: ProductAttributeTerm[];
- visible?: boolean;
-};
-
-type useProductAttributesProps = {
- allAttributes: ProductProductAttribute[];
- isVariationAttributes?: boolean;
- onChange: (
- attributes: ProductProductAttribute[],
- defaultAttributes: ProductDefaultAttribute[]
- ) => void;
- productId?: number;
-};
-
-const getFilteredAttributes = (
- attr: ProductProductAttribute[],
- isVariationAttributes: boolean
-) => {
- return isVariationAttributes
- ? attr.filter( ( attribute ) => !! attribute.variation )
- : attr.filter( ( attribute ) => ! attribute.variation );
-};
-
-function manageDefaultAttributes( values: EnhancedProductAttribute[] ) {
- return values.reduce< Product[ 'default_attributes' ] >(
- ( prevDefaultAttributes, currentAttribute ) => {
- if (
- // defaults to true.
- currentAttribute.isDefault === undefined ||
- currentAttribute.isDefault === true
- ) {
- return [
- ...prevDefaultAttributes,
- {
- id: currentAttribute.id,
- name: currentAttribute.name,
- option: currentAttribute.options[ 0 ],
- },
- ];
- }
- return prevDefaultAttributes;
- },
- []
- );
-}
-
-export function useProductAttributes( {
- allAttributes = [],
- isVariationAttributes = false,
- onChange,
- productId,
-}: useProductAttributesProps ) {
- const [ attributes, setAttributes ] = useState<
- EnhancedProductAttribute[]
- >( getFilteredAttributes( allAttributes, isVariationAttributes ) );
-
- const fetchTerms = useCallback(
- ( attributeId: number ) => {
- return resolveSelect( experimentalProductAttributeTermsStore )
- .getProductAttributeTerms( {
- attribute_id: attributeId,
- } )
- .then(
- ( attributeTerms ) => {
- return attributeTerms;
- },
- ( error: string ) => {
- return error;
- }
- );
- },
- [ productId ]
- );
-
- const enhanceAttribute = (
- globalAttribute: ProductProductAttribute,
- allTerms: ProductAttributeTerm[]
- ) => {
- return {
- ...globalAttribute,
- terms: ( allTerms || [] ).filter( ( term ) =>
- globalAttribute.options.includes( term.name )
- ),
- };
- };
-
- const getAugmentedAttributes = (
- atts: EnhancedProductAttribute[],
- variation: boolean,
- startPosition: number
- ): ProductProductAttribute[] => {
- return atts.map( ( { isDefault, terms, ...attribute }, index ) => ( {
- ...attribute,
- variation,
- position: startPosition + index,
- } ) );
- };
-
- const handleChange = ( newAttributes: EnhancedProductAttribute[] ) => {
- const defaultAttributes = manageDefaultAttributes( newAttributes );
- let otherAttributes = isVariationAttributes
- ? allAttributes.filter( ( attribute ) => ! attribute.variation )
- : allAttributes.filter( ( attribute ) => !! attribute.variation );
-
- // Remove duplicate global attributes.
- otherAttributes = otherAttributes.filter( ( attr ) => {
- if (
- attr.id > 0 &&
- newAttributes.some( ( a ) => a.id === attr.id )
- ) {
- return false;
- }
- // Local attributes we check by name.
- if (
- attr.id === 0 &&
- newAttributes.some(
- ( a ) => a.name.toLowerCase() === attr.name.toLowerCase()
- )
- ) {
- return false;
- }
- return true;
- } );
- const newAugmentedAttributes = getAugmentedAttributes(
- newAttributes,
- isVariationAttributes,
- isVariationAttributes ? otherAttributes.length : 0
- );
- const otherAugmentedAttributes = getAugmentedAttributes(
- otherAttributes,
- ! isVariationAttributes,
- isVariationAttributes ? 0 : newAttributes.length
- );
-
- if ( isVariationAttributes ) {
- onChange(
- [ ...otherAugmentedAttributes, ...newAugmentedAttributes ],
- defaultAttributes
- );
- } else {
- onChange(
- [ ...newAugmentedAttributes, ...otherAugmentedAttributes ],
- defaultAttributes
- );
- }
- };
-
- const fetchAttributes = useCallback( () => {
- const [
- localAttributes,
- globalAttributes,
- ]: ProductProductAttribute[][] = sift(
- getFilteredAttributes( allAttributes, isVariationAttributes ),
- ( attr: ProductProductAttribute ) => attr.id === 0
- );
-
- Promise.all(
- globalAttributes.map( ( attr ) => fetchTerms( attr.id ) )
- ).then( ( termData ) => {
- setAttributes( [
- ...globalAttributes.map( ( attr, index ) =>
- // @ts-expect-error: termData definition is different from the expected type.
- enhanceAttribute( attr, termData[ index ] )
- ),
- ...localAttributes,
- ] );
- } );
- }, [ allAttributes, isVariationAttributes, fetchTerms ] );
-
- return {
- attributes,
- fetchAttributes,
- handleChange,
- setAttributes,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-edits.ts b/packages/js/product-editor/src/hooks/use-product-edits.ts
deleted file mode 100644
index 73bda92d18e..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-edits.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityId } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { Metadata } from '../types';
-
-type EntityEdits = {
- [ key: string ]: unknown;
-};
-
-// Filter out the "content" and "blocks" properties of the edits since
-// we do not use these properties within the product editor and they
-// will always create false positives.
-function filterProductEdits( edits: EntityEdits ) {
- delete edits.content;
- delete edits.blocks;
- return edits;
-}
-
-export function useProductEdits( productType = <string>'product' ) {
- const productId = useEntityId( 'postType', productType );
-
- const { edits } = useSelect(
- ( select ) => {
- const { getEntityRecordNonTransientEdits } = select( 'core' );
-
- const _edits = getEntityRecordNonTransientEdits(
- 'postType',
- productType,
- productId
- ) as EntityEdits;
-
- return {
- edits: filterProductEdits( _edits ),
- };
- },
- [ productId, productType ]
- );
-
- function hasEdit( fieldName: string ) {
- if ( fieldName.startsWith( 'meta_data.' ) ) {
- const metaKey = fieldName.replace( 'meta_data.', '' );
- return (
- edits.hasOwnProperty( 'meta_data' ) &&
- ( edits.meta_data as Metadata< unknown >[] ).findIndex(
- ( value ) => value.key === metaKey
- ) !== -1
- );
- }
- return edits.hasOwnProperty( fieldName );
- }
-
- return {
- hasEdit,
- hasEdits: Object.keys( edits ).length > 0,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-entity-prop.ts b/packages/js/product-editor/src/hooks/use-product-entity-prop.ts
deleted file mode 100644
index cead6a5ac3e..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-entity-prop.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { useCallback, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Metadata } from '../types';
-
-interface UseProductEntityPropConfig< T > {
- postType?: string;
- fallbackValue?: T;
-}
-
-function useProductEntityProp< T >(
- property: string,
- config?: UseProductEntityPropConfig< T >
-): [ T | undefined, ( value: T ) => void ] {
- const isMeta = property.startsWith( 'meta_data.' );
- const metaKey = property.replace( 'meta_data.', '' );
-
- const [ entityPropValue, setEntityPropValue ] = useEntityProp< T >(
- 'postType',
- config?.postType || 'product',
- property
- );
-
- const [ metadata, setMetadata ] = useEntityProp< Metadata< T >[] >(
- 'postType',
- config?.postType || 'product',
- 'meta_data'
- );
-
- const metadataItem = useMemo(
- () =>
- metadata ? metadata.find( ( item ) => item.key === metaKey ) : null,
- [ metadata, metaKey ]
- );
-
- const setMetaValue = useCallback(
- ( newValue: T ) => {
- if ( ! metadataItem ) {
- setMetadata( [
- ...metadata,
- {
- key: metaKey,
- value: newValue,
- },
- ] );
- return;
- }
-
- setMetadata(
- metadata.map( ( item ) => {
- if ( item.key === metaKey ) {
- return { ...item, value: newValue };
- }
- return item;
- } )
- );
- },
- [ metadata, metaKey, metadataItem ]
- );
-
- if ( isMeta ) {
- const metaValue = metadataItem?.value ?? config?.fallbackValue;
- return [ metaValue, setMetaValue ];
- }
-
- return [ entityPropValue, setEntityPropValue ];
-}
-
-export default useProductEntityProp;
diff --git a/packages/js/product-editor/src/hooks/use-product-helper.ts b/packages/js/product-editor/src/hooks/use-product-helper.ts
deleted file mode 100644
index e7577465283..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-helper.ts
+++ /dev/null
@@ -1,378 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useCallback, useContext, useState } from '@wordpress/element';
-import * as WooNumber from '@woocommerce/number';
-import {
- Product,
- ProductsStoreActions,
- ProductStatus,
- productsStore,
- ReadOnlyProperties,
- productReadOnlyProperties,
- experimentalProductVariationsStore,
-} from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { CurrencyContext } from '@woocommerce/currency';
-
-/**
- * Internal dependencies
- */
-import { AUTO_DRAFT_NAME, getDerivedProductType } from '../utils';
-import {
- NUMBERS_AND_DECIMAL_SEPARATOR,
- ONLY_ONE_DECIMAL_SEPARATOR,
- TRACKS_SOURCE,
-} from '../constants';
-import { ProductVariationsOrder } from './use-variations-order';
-
-// TODO: Having to add TS ignore comments here, should be able to address with TS config but running into issues.
-
-function removeReadonlyProperties(
- product: Product
-): Omit< Product, ReadOnlyProperties > {
- productReadOnlyProperties.forEach( ( key ) => delete product[ key ] );
- return product;
-}
-
-function getNoticePreviewActions( status: ProductStatus, permalink: string ) {
- return status === 'publish' && permalink
- ? [
- {
- label: __( 'View in store', 'woocommerce' ),
- onClick: () => {
- recordEvent( 'product_preview_changes', {
- source: TRACKS_SOURCE,
- } );
- window.open( permalink, '_blank' );
- },
- },
- ]
- : [];
-}
-
-export function useProductHelper() {
- const { createProduct, updateProduct, deleteProduct } = useDispatch(
- productsStore
- ) as ProductsStoreActions;
- const {
- batchUpdateProductVariations,
- invalidateResolutionForStoreSelector,
- } = useDispatch( experimentalProductVariationsStore );
-
- const { createNotice } = useDispatch( 'core/notices' );
- const [ isDeleting, setIsDeleting ] = useState( false );
- const [ updating, setUpdating ] = useState( {
- draft: false,
- publish: false,
- } );
- const context = useContext( CurrencyContext );
-
- /**
- * Create product with status.
- *
- * @param {Product} product the product to be created.
- * @param {string} status the product status.
- * @param {boolean} skipNotice if the notice should be skipped (default: false).
- * @return {Promise<Product>} Returns a promise with the created product.
- */
- const createProductWithStatus = useCallback(
- async (
- product: Omit< Product, ReadOnlyProperties >,
- status: ProductStatus,
- skipNotice = false
- ) => {
- setUpdating( {
- ...updating,
- [ status ]: true,
- } );
- return createProduct( {
- ...product,
- status,
- type: getDerivedProductType( product ),
- } ).then(
- ( newProduct ) => {
- if ( ! skipNotice ) {
- const noticeContent =
- newProduct.status === 'publish'
- ? __( 'Product published.', 'woocommerce' )
- : __(
- 'Product successfully created.',
- 'woocommerce'
- );
- createNotice( 'success', `🎉 ${ noticeContent }`, {
- // @ts-expect-error WPNoticeAction requires a url field, but onClick-only actions are valid at runtime.
- actions: getNoticePreviewActions(
- newProduct.status,
- newProduct.permalink
- ),
- } );
- }
- setUpdating( {
- ...updating,
- [ status ]: false,
- } );
- return newProduct;
- },
- ( error ) => {
- if ( ! skipNotice ) {
- createNotice(
- 'error',
- status === 'publish'
- ? __(
- 'Failed to publish product.',
- 'woocommerce'
- )
- : __(
- 'Failed to create product.',
- 'woocommerce'
- )
- );
- }
- setUpdating( {
- ...updating,
- [ status ]: false,
- } );
- return error;
- }
- );
- },
- [ updating ]
- );
-
- async function updateVariationsOrder(
- productId: number,
- variationsOrder?: { [ page: number ]: { [ id: number ]: number } }
- ) {
- if ( ! variationsOrder ) return undefined;
-
- return batchUpdateProductVariations(
- {
- product_id: productId,
- },
- {
- update: Object.values( variationsOrder )
- .flatMap( Object.entries )
- // @ts-expect-error variationsOrder's id keys are numeric variation IDs at runtime, but Object.entries types them as string.
- .map( ( [ id, menu_order ]: [ number, number ] ) => ( {
- id,
- menu_order,
- } ) ),
- }
- );
- }
-
- /**
- * Update product with status.
- *
- * @param {number} productId the product id to be updated.
- * @param {Product} product the product to be updated.
- * @param {string} status the product status.
- * @param {boolean} skipNotice if the notice should be skipped (default: false).
- * @return {Promise<Product>} Returns a promise with the updated product.
- */
- const updateProductWithStatus = useCallback(
- async (
- productId: number,
- product: Partial< Product >,
- status: ProductStatus,
- skipNotice = false
- ): Promise< Product > => {
- setUpdating( {
- ...updating,
- [ status ]: true,
- } );
- return updateProduct( productId, {
- ...product,
- status,
- type: getDerivedProductType( product ),
- } )
- .then( async ( updatedProduct ) =>
- updateVariationsOrder(
- updatedProduct.id,
- ( product as ProductVariationsOrder ).variationsOrder
- )
- .then( () =>
- invalidateResolutionForStoreSelector(
- 'getProductVariations'
- )
- )
- .then( () => updatedProduct )
- )
- .then(
- ( updatedProduct ) => {
- if ( ! skipNotice ) {
- const noticeContent =
- product.status === 'draft' &&
- updatedProduct.status === 'publish'
- ? __( 'Product published.', 'woocommerce' )
- : __(
- 'Product successfully updated.',
- 'woocommerce'
- );
- createNotice( 'success', `🎉 ${ noticeContent }`, {
- // @ts-expect-error WPNoticeAction requires a url field, but onClick-only actions are valid at runtime.
- actions: getNoticePreviewActions(
- updatedProduct.status,
- updatedProduct.permalink
- ),
- } );
- }
- setUpdating( {
- ...updating,
- [ status ]: false,
- } );
- return updatedProduct;
- },
- ( error ) => {
- if ( ! skipNotice ) {
- createNotice(
- 'error',
- __( 'Failed to update product.', 'woocommerce' )
- );
- }
- setUpdating( {
- ...updating,
- [ status ]: false,
- } );
- return error;
- }
- );
- },
- [ updating ]
- );
-
- /**
- * Creates a copy of the given product with the given status.
- *
- * @param {Product} product the product to be copied.
- * @param {string} status the product status.
- * @return {Promise<Product>} promise with the newly created and copied product.
- */
- const copyProductWithStatus = useCallback(
- async ( product: Product, status: ProductStatus = 'draft' ) => {
- return createProductWithStatus(
- removeReadonlyProperties( {
- ...product,
- name: ( product.name || AUTO_DRAFT_NAME ) + ' - Copy',
- } ),
- status
- );
- },
- []
- );
-
- /**
- * Deletes a product by given id and redirects to the product list page.
- *
- * @param {number} id the product id to be deleted.
- * @return {Promise<Product>} promise with the deleted product.
- */
- const deleteProductAndRedirect = useCallback( async ( id: number ) => {
- setIsDeleting( true );
- return deleteProduct( id ).then(
- ( product ) => {
- const noticeContent = __(
- 'Successfully moved product to Trash.',
- 'woocommerce'
- );
- createNotice( 'success', `🎉 ${ noticeContent }` );
- setIsDeleting( false );
- return product;
- },
- ( error ) => {
- createNotice(
- 'error',
- __( 'Failed to move product to Trash.', 'woocommerce' )
- );
- setIsDeleting( false );
- return error;
- }
- );
- }, [] );
-
- /**
- * Sanitizes a price.
- *
- * @param {string} price the price that will be sanitized.
- * @return {string} sanitized price.
- */
- const sanitizePrice = useCallback(
- ( price: string ) => {
- if ( ! price.length ) {
- return '';
- }
-
- const { getCurrencyConfig } = context;
- const { decimalSeparator } = getCurrencyConfig();
- // Build regex to strip out everything except digits, decimal point and minus sign.
- const regex = new RegExp(
- NUMBERS_AND_DECIMAL_SEPARATOR.replace( '%s', decimalSeparator ),
- 'g'
- );
- const decimalRegex = new RegExp(
- ONLY_ONE_DECIMAL_SEPARATOR.replaceAll( '%s', decimalSeparator ),
- 'g'
- );
- const cleanValue = price
- .replace( regex, '' )
- .replace( decimalRegex, '' )
- .replace( decimalSeparator, '.' );
- return cleanValue;
- },
- [ context ]
- );
-
- /**
- * Format a value using the Woo General Currency Settings.
- *
- * @param {string} value the value that will be formatted.
- * @return {string} the formatted number.
- */
- const formatNumber = useCallback(
- ( value: string ): string => {
- const { getCurrencyConfig } = context;
- const { decimalSeparator, thousandSeparator } = getCurrencyConfig();
-
- return WooNumber.numberFormat(
- { decimalSeparator, thousandSeparator },
- value
- );
- },
- [ context ]
- );
-
- /**
- * Parse a value using the Woo General Currency Settings.
- *
- * @param {string} value the value that will be parsed.
- * @return {string} the parsed number.
- */
- const parseNumber = useCallback(
- ( value: string ): string => {
- const { getCurrencyConfig } = context;
- const { decimalSeparator, thousandSeparator } = getCurrencyConfig();
-
- return WooNumber.parseNumber(
- { decimalSeparator, thousandSeparator },
- value
- );
- },
- [ context ]
- );
-
- return {
- createProductWithStatus,
- updateProductWithStatus,
- copyProductWithStatus,
- deleteProductAndRedirect,
- sanitizePrice,
- formatNumber,
- parseNumber,
- isUpdatingDraft: updating.draft,
- isUpdatingPublished: updating.publish,
- isDeleting,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-manager/index.ts b/packages/js/product-editor/src/hooks/use-product-manager/index.ts
deleted file mode 100644
index 3c28c51297b..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-manager/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-product-manager';
diff --git a/packages/js/product-editor/src/hooks/use-product-manager/use-product-manager.ts b/packages/js/product-editor/src/hooks/use-product-manager/use-product-manager.ts
deleted file mode 100644
index d27b9e37961..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-manager/use-product-manager.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { dispatch, useSelect, select as wpSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { Product, ProductStatus, productsStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { useValidations } from '../../contexts/validation-context';
-import type { WPError } from '../../hooks/use-error-handler';
-import { AUTO_DRAFT_NAME } from '../../utils/constants';
-import { formatProductError } from '../../utils/format-product-error';
-
-export function useProductManager< T = Product >( postType: string ) {
- const [ id ] = useEntityProp< number >( 'postType', postType, 'id' );
- const [ name, , prevName ] = useEntityProp< string >(
- 'postType',
- postType,
- 'name'
- );
- const [ status ] = useEntityProp< ProductStatus >(
- 'postType',
- postType,
- 'status'
- );
- const [ isSaving, setIsSaving ] = useState( false );
- const [ isTrashing, setTrashing ] = useState( false );
- const { isValidating, validate } = useValidations< T >();
- const { isDirty } = useSelect(
- ( select ) => ( {
- isDirty: select( 'core' ).hasEditsForEntityRecord(
- 'postType',
- postType,
- id
- ),
- } ),
- [ postType, id ]
- );
-
- async function save( extraProps: Partial< T > = {} ) {
- try {
- setIsSaving( true );
-
- await validate( extraProps );
-
- const { saveEntityRecord } = dispatch( coreStore );
-
- const { blocks, content, selection, ...editedProduct } = wpSelect(
- coreStore
- ).getEntityRecordEdits( 'postType', postType, id );
-
- const savedProduct = await saveEntityRecord(
- 'postType',
- postType,
- {
- ...editedProduct,
- ...extraProps,
- id,
- },
- {
- throwOnError: true,
- }
- );
-
- return savedProduct as T;
- } catch ( error ) {
- throw formatProductError( error as WPError, status );
- } finally {
- setIsSaving( false );
- }
- }
-
- async function copyToDraft() {
- try {
- // When "Copy to a new draft" is used on an unsaved product with a filled-out name,
- // the name is retained in the copied product.
- const data =
- AUTO_DRAFT_NAME === prevName && name !== prevName
- ? { name }
- : {};
- setIsSaving( true );
- const duplicatedProduct = await dispatch(
- productsStore
- ).duplicateProduct( id, data );
-
- return duplicatedProduct as T;
- } catch ( error ) {
- throw formatProductError( error as WPError, status );
- } finally {
- setIsSaving( false );
- }
- }
-
- async function publish( extraProps: Partial< T > = {} ) {
- const isPublished = status === 'publish' || status === 'future';
-
- // The publish button click not only change the status of the product
- // but also save all the pending changes. So even if the status is
- // publish it's possible to save the product too.
- const data: Partial< T > = isPublished
- ? extraProps
- : { status: 'publish', ...extraProps };
-
- return save( data );
- }
-
- async function trash( force = false ) {
- try {
- setTrashing( true );
-
- await validate();
-
- const { deleteEntityRecord, saveEditedEntityRecord } =
- dispatch( 'core' );
-
- await saveEditedEntityRecord( 'postType', postType, id, {
- throwOnError: true,
- } );
-
- const deletedProduct = await deleteEntityRecord(
- 'postType',
- postType,
- id,
- {
- force,
- throwOnError: true,
- }
- );
-
- return deletedProduct as T;
- } catch ( error ) {
- throw formatProductError( error as WPError, status );
- } finally {
- setTrashing( false );
- }
- }
-
- return {
- isValidating,
- isDirty,
- isSaving,
- isPublishing: isSaving,
- isTrashing,
- save,
- publish,
- trash,
- copyToDraft,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-metadata.ts b/packages/js/product-editor/src/hooks/use-product-metadata.ts
deleted file mode 100644
index cd4678bff14..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-metadata.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityId } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { Metadata } from '../types';
-
-interface Options {
- postType?: string;
- id?: number;
-}
-
-function useProductMetadata( options?: Options ) {
- const postType = options?.postType || 'product';
- const thisId = useEntityId( 'postType', postType );
- const id = options?.id || thisId;
-
- const { editEntityRecord } = useDispatch( 'core' );
-
- const { isLoading, meta_data } = useSelect(
- ( select ) => {
- const { getEditedEntityRecord, hasFinishedResolution } =
- select( 'core' );
- const { meta_data: metadata } = getEditedEntityRecord(
- 'postType',
- postType,
- id
- ) as unknown as Product;
- const isResolutionFinished = hasFinishedResolution(
- 'getEditedEntityRecord',
- [ 'postType', postType, id ]
- );
-
- return {
- meta_data: metadata || [],
- isLoading: ! isResolutionFinished,
- };
- },
- [ id ]
- );
-
- return {
- metadata: meta_data.reduce( function ( acc, cur ) {
- acc[ cur.key ] = cur.value;
- return acc;
- }, {} as Record< string, string | undefined > ),
- update: ( entries: Metadata< string >[] ) =>
- editEntityRecord( 'postType', postType, id, {
- meta_data: [
- ...meta_data.filter(
- ( item ) =>
- entries.findIndex( ( e ) => e.key === item.key ) ===
- -1
- ),
- ...entries,
- ],
- } ),
- isLoading,
- };
-}
-
-export default useProductMetadata;
diff --git a/packages/js/product-editor/src/hooks/use-product-scheduled/index.ts b/packages/js/product-editor/src/hooks/use-product-scheduled/index.ts
deleted file mode 100644
index 233053bd9a2..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-scheduled/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-product-scheduled';
diff --git a/packages/js/product-editor/src/hooks/use-product-scheduled/use-product-scheduled.ts b/packages/js/product-editor/src/hooks/use-product-scheduled/use-product-scheduled.ts
deleted file mode 100644
index 5f1afcba289..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-scheduled/use-product-scheduled.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { getDate, isInTheFuture, date as parseDate } from '@wordpress/date';
-import type { ProductStatus } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { formatScheduleDatetime, getSiteDatetime } from '../../utils';
-import { useProductManager } from '../use-product-manager';
-
-export const TIMEZONELESS_FORMAT = 'Y-m-d\\TH:i:s';
-
-export function useProductScheduled( postType: string ) {
- const { isSaving, save } = useProductManager( postType );
-
- const [ date, set ] = useEntityProp< string >(
- 'postType',
- postType,
- 'date_created_gmt'
- );
-
- const [ editedStatus, setStatus, prevStatus ] =
- useEntityProp< ProductStatus >( 'postType', postType, 'status' );
-
- const gmtDate = `${ date }+00:00`;
-
- const siteDate = getSiteDatetime( gmtDate );
-
- function calcDateAndStatus( value?: string ) {
- const newSiteDate = getDate( value ?? null );
- const newGmtDate = parseDate( TIMEZONELESS_FORMAT, newSiteDate, 'GMT' );
-
- let status = prevStatus;
- if ( isInTheFuture( newSiteDate.toISOString() ) ) {
- status = 'future';
- } else if ( prevStatus === 'future' ) {
- status = 'publish';
- }
-
- return { status, date_created_gmt: newGmtDate };
- }
-
- async function setDate( value?: string ) {
- const result = calcDateAndStatus( value );
-
- set( result.date_created_gmt );
- setStatus( result.status );
- }
-
- async function schedule( value?: string ) {
- const result = calcDateAndStatus( value );
-
- return save( result );
- }
-
- return {
- isScheduling: isSaving,
- isScheduled: editedStatus === 'future' || isInTheFuture( siteDate ),
- date: siteDate,
- formattedDate: formatScheduleDatetime( gmtDate ),
- setDate,
- schedule,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-template/index.ts b/packages/js/product-editor/src/hooks/use-product-template/index.ts
deleted file mode 100644
index e2db5322cf4..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-template/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-product-template';
diff --git a/packages/js/product-editor/src/hooks/use-product-template/test/use-product-template.test.ts b/packages/js/product-editor/src/hooks/use-product-template/test/use-product-template.test.ts
deleted file mode 100644
index 7ffeee475f2..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-template/test/use-product-template.test.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * External dependencies
- */
-import { renderHook } from '@testing-library/react-hooks';
-
-/**
- * Internal dependencies
- */
-import { useProductTemplate } from '../use-product-template';
-
-const originalProductBlockEditorSettings =
- globalThis.window.productBlockEditorSettings;
-
-describe( 'useProductTemplate', () => {
- beforeEach( () => {
- globalThis.window.productBlockEditorSettings = {
- productTemplates: [
- {
- id: 'template-1',
- title: 'Template 1',
- description: 'Template 1 description',
- icon: 'icon',
- order: 1,
- layoutTemplateId: 'layout-template-1',
- isSelectableByUser: true,
- productData: {
- type: 'simple',
- },
- },
- {
- id: 'template-2',
- title: 'Template 2',
- description: 'Template 2 description',
- icon: 'icon',
- layoutTemplateId: 'layout-template-2',
- isSelectableByUser: true,
- order: 2,
- productData: {
- type: 'grouped',
- },
- },
- {
- id: 'template-3',
- title: 'Template 3',
- description: 'Template 3 description',
- icon: 'icon',
- layoutTemplateId: 'layout-template-3',
- isSelectableByUser: true,
- order: 3,
- productData: {
- type: 'simple',
- },
- },
- {
- id: 'standard-product-template',
- title: 'Standard Product Template',
- description: 'Standard Product Template description',
- icon: 'icon',
- layoutTemplateId: 'layout-template-4',
- isSelectableByUser: true,
- order: 4,
- productData: {
- type: 'simple',
- },
- },
- {
- id: 'gift-card-product-template',
- title: 'Gift card Product Template',
- description: 'Gift CardProduct Template description',
- icon: 'icon',
- layoutTemplateId: 'layout-template-5',
- isSelectableByUser: true,
- order: 5,
- productData: {
- type: 'simple',
- meta_data: [ { key: '_gift_card', value: 'yes' } ],
- },
- },
- ],
- maxUploadFileSize: 100 * 1024 * 1024, // 100 MB
- };
- } );
-
- afterEach( () => {
- globalThis.window.productBlockEditorSettings =
- originalProductBlockEditorSettings;
- } );
-
- it( 'should return the product template if it exists', () => {
- const { result } = renderHook( () =>
- useProductTemplate( 'template-3', { type: 'simple' } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual( 'template-3' );
- } );
-
- it( 'should return the first product template with a matching type in the productData if no matching product template by id', () => {
- const { result } = renderHook( () =>
- useProductTemplate( 'invalid-template-id', { type: 'grouped' } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual( 'template-2' );
- } );
-
- it( 'should return the first product template with a matching type in the productData if no product template id is set', () => {
- const { result } = renderHook( () =>
- useProductTemplate( undefined, { type: 'grouped' } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual( 'template-2' );
- } );
-
- it( 'should return standard-product-template if no matching product template by id or type', () => {
- const { result } = renderHook( () =>
- useProductTemplate( 'invalid-template-id', { type: 'external' } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual(
- 'standard-product-template'
- );
- } );
-
- it( 'should match to a template with the same type if no template id is provided', () => {
- const { result } = renderHook( () =>
- useProductTemplate( undefined, { type: 'simple' } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual( 'template-1' );
- } );
-
- it( 'should select the product template with the most matching fields if there are multiple matching templates', () => {
- const { result } = renderHook( () =>
- useProductTemplate( 'invalid-template-id', {
- type: 'simple',
- meta_data: [ { key: '_gift_card', value: 'yes' } ],
- } )
- );
-
- expect( result.current.productTemplate?.id ).toEqual(
- 'gift-card-product-template'
- );
- } );
-} );
diff --git a/packages/js/product-editor/src/hooks/use-product-template/use-product-template.ts b/packages/js/product-editor/src/hooks/use-product-template/use-product-template.ts
deleted file mode 100644
index ae5cdb1bc2c..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-template/use-product-template.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { Metadata, ProductTemplate } from '../../types';
-
-const matchesAllTemplateMetaFields = (
- templateMeta: Metadata< string >[],
- productMeta: Metadata< string >[]
-) =>
- templateMeta.every( ( item ) =>
- productMeta.find(
- ( productMetaEntry ) =>
- productMetaEntry.key === item.key &&
- productMetaEntry.value === item.value
- )
- );
-
-function templateDataMatchesProductData(
- productTemplate: ProductTemplate,
- product: Partial< Product >
-): boolean {
- return Object.entries( productTemplate.productData ).every(
- ( [ key, value ] ) => {
- if ( key === 'meta_data' ) {
- return matchesAllTemplateMetaFields(
- value as Metadata< string >[],
- ( product.meta_data as Metadata< string >[] ) || []
- );
- }
-
- // @ts-expect-error Dynamic string indexing on Product is not supported until @woocommerce/data's Product type adds an index signature.
- return product[ key ] === value;
- }
- );
-}
-
-function findBetterMatchTemplate( matchingTemplates: ProductTemplate[] ) {
- return matchingTemplates.reduce(
- ( previous, current ) =>
- Object.keys( current.productData ).length >
- Object.keys( previous.productData ).length
- ? current
- : previous,
- matchingTemplates[ 0 ]
- );
-}
-
-export const useProductTemplate = (
- productTemplateId: string | undefined,
- product: Partial< Product > | null
-) => {
- const productTemplates =
- window.productBlockEditorSettings?.productTemplates ?? [];
-
- const productType = product?.type;
-
- // we shouldn't default to the standard-product-template for variations
- if ( ! productTemplateId && productType === 'variation' ) {
- return { productTemplate: null, isResolving: false };
- }
-
- let matchingProductTemplate: ProductTemplate | undefined;
-
- if ( productTemplateId ) {
- matchingProductTemplate = productTemplates.find(
- ( productTemplate ) => productTemplate.id === productTemplateId
- );
- }
-
- if ( ! matchingProductTemplate && product ) {
- // Look for matching templates based on product data described on each template.
- const matchingTemplates = productTemplates.filter(
- ( productTemplate ) =>
- templateDataMatchesProductData( productTemplate, product )
- );
-
- // If there are multiple matching templates, we should use the one with the most matching fields.
- // If there is no matching template, we should default to the standard product template.
- matchingProductTemplate =
- findBetterMatchTemplate( matchingTemplates ) ||
- productTemplates.find(
- ( productTemplate ) =>
- productTemplate.id === 'standard-product-template'
- );
- }
-
- // When we switch to getting the product template from the API,
- // this will be needed.
- const isResolving = false;
-
- return { productTemplate: matchingProductTemplate, isResolving };
-};
diff --git a/packages/js/product-editor/src/hooks/use-product-url.ts b/packages/js/product-editor/src/hooks/use-product-url.ts
deleted file mode 100644
index 9df8488dd3d..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-url.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-import { useCallback } from '@wordpress/element';
-
-export function useProductURL( productType: string ) {
- const [ permalink ] = useEntityProp< string >(
- 'postType',
- productType,
- 'permalink'
- );
-
- const getProductURL = useCallback(
- ( isPreview: boolean ) => {
- if ( ! permalink ) return undefined;
-
- const productURL = new URL( permalink );
- if ( isPreview ) {
- productURL.searchParams.append( 'preview', 'true' );
- }
- return productURL.toString();
- },
- [ permalink ]
- );
-
- return { getProductURL };
-}
diff --git a/packages/js/product-editor/src/hooks/use-product-variations-helper.ts b/packages/js/product-editor/src/hooks/use-product-variations-helper.ts
deleted file mode 100644
index 7d5d752d61d..00000000000
--- a/packages/js/product-editor/src/hooks/use-product-variations-helper.ts
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * External dependencies
- */
-import { dispatch, resolveSelect, useSelect } from '@wordpress/data';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { getNewPath, getPath, navigateTo } from '@woocommerce/navigation';
-import {
- Product,
- ProductDefaultAttribute,
- ProductVariation,
- experimentalProductVariationsStore,
-} from '@woocommerce/data';
-import { applyFilters } from '@wordpress/hooks';
-import {
- useEntityProp,
- useEntityRecord,
- store as coreStore,
-} from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { EnhancedProductAttribute } from './use-product-attributes';
-
-async function getDefaultVariationValues(
- productId: number
-): Promise< Partial< Omit< ProductVariation, 'id' > > > {
- try {
- const product = ( await resolveSelect( 'core' ).getEntityRecord(
- 'postType',
- 'product',
- productId
- ) ) as Product;
- if ( ! product ) {
- return {};
- }
-
- const { attributes } = product;
-
- const alreadyHasVariableAttribute = attributes.some(
- ( attr ) => attr.variation
- );
- if ( ! alreadyHasVariableAttribute ) {
- return {};
- }
-
- const products = await resolveSelect(
- experimentalProductVariationsStore
- ).getProductVariations( {
- product_id: productId,
- per_page: 1,
- has_price: true,
- } );
- if ( products && products.length > 0 && products[ 0 ].regular_price ) {
- return {
- regular_price: products[ 0 ].regular_price,
- stock_quantity: products[ 0 ].stock_quantity ?? undefined,
- stock_status: products[ 0 ].stock_status,
- manage_stock: products[ 0 ].manage_stock,
- low_stock_amount: products[ 0 ].low_stock_amount ?? undefined,
- };
- }
- return {};
- } catch {
- return {};
- }
-}
-
-export function useProductVariationsHelper() {
- const [ productId ] = useEntityProp< number >(
- 'postType',
- 'product',
- 'id'
- );
-
- const { editedRecord: product } = useEntityRecord< Product >(
- 'postType',
- 'product',
- productId
- );
-
- const [ _isGenerating, setIsGenerating ] = useState( false );
-
- const { isGeneratingVariations, generateError } = useSelect(
- ( select ) => {
- const {
- isGeneratingVariations: getIsGeneratingVariations,
- generateProductVariationsError,
- } = select( experimentalProductVariationsStore );
-
- return {
- isGeneratingVariations: getIsGeneratingVariations( {
- product_id: productId,
- } ),
- generateError: generateProductVariationsError( {
- product_id: productId,
- } ),
- };
- },
- [ productId ]
- );
-
- const isGenerating = useMemo(
- () => _isGenerating || Boolean( isGeneratingVariations ),
- [ _isGenerating, isGeneratingVariations ]
- );
-
- const generateProductVariations = useCallback( async function onGenerate(
- attributes: EnhancedProductAttribute[],
- defaultAttributes?: ProductDefaultAttribute[]
- ) {
- setIsGenerating( true );
-
- const { status: lastStatus, variations } = ( await resolveSelect(
- 'core'
- ).getEditedEntityRecord(
- 'postType',
- 'product',
- productId
- ) ) as unknown as Product;
- const hasVariableAttribute = attributes.some(
- ( attr ) => attr.variation
- );
-
- const defaultVariationValues = await getDefaultVariationValues(
- productId
- );
-
- await Promise.all(
- variations.map( ( variationId: number ) =>
- dispatch( coreStore ).invalidateResolution( 'getEntityRecord', [
- 'postType',
- 'product_variation',
- variationId,
- ] )
- )
- );
- await dispatch(
- experimentalProductVariationsStore
- ).invalidateResolutionForStore();
- /**
- * Filters the meta_data array for generated variations.
- *
- * @filter woocommerce.product.variations.generate.meta_data
- * @param {Object} product Main product object.
- * @return {Object} meta_data array for variations.
- */
- const meta_data = applyFilters(
- 'woocommerce.product.variations.generate.meta_data',
- [],
- product
- );
-
- return dispatch( experimentalProductVariationsStore )
- .generateProductVariations(
- {
- product_id: productId,
- },
- {
- type: hasVariableAttribute ? 'variable' : 'simple',
- attributes,
- default_attributes: defaultAttributes,
- },
- {
- delete: true,
- default_values: defaultVariationValues,
- meta_data: meta_data as Product[ 'meta_data' ],
- }
- )
- .then( async ( response ) => {
- await dispatch( coreStore ).invalidateResolution(
- 'getEntityRecord',
- [ 'postType', 'product', productId ]
- );
-
- await resolveSelect( coreStore ).getEntityRecord(
- 'postType',
- 'product',
- productId
- );
-
- await dispatch(
- experimentalProductVariationsStore
- ).invalidateResolutionForStore();
-
- return response;
- } )
- .finally( () => {
- setIsGenerating( false );
- if (
- lastStatus === 'auto-draft' &&
- getPath().endsWith( 'add-product' )
- ) {
- const url = getNewPath( {}, `/product/${ productId }` );
- navigateTo( { url } );
- }
- } );
- },
- [] );
-
- return {
- generateProductVariations,
- isGenerating,
- generateError,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts b/packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts
deleted file mode 100644
index 33b92d8ca19..00000000000
--- a/packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { optionsStore } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME } from '../constants';
-
-export function useShowPrepublishChecks() {
- const { updateOptions } = useDispatch( optionsStore );
-
- const { isResolving, showPrepublishChecks } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const showPrepublishChecksOption =
- getOption( SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ) || 'yes';
-
- const resolving = ! hasFinishedResolution( 'getOption', [
- SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME,
- ] );
-
- return {
- isResolving: resolving,
- showPrepublishChecks: showPrepublishChecksOption === 'yes',
- };
- }, [] );
-
- const togglePrepublishChecks = () => {
- updateOptions( {
- [ SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ]: showPrepublishChecks
- ? 'no'
- : 'yes',
- } );
- };
-
- return {
- isResolving,
- showPrepublishChecks,
- togglePrepublishChecks,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-variation-switcher.ts b/packages/js/product-editor/src/hooks/use-variation-switcher.ts
deleted file mode 100644
index b3cd30a1f7e..00000000000
--- a/packages/js/product-editor/src/hooks/use-variation-switcher.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
- EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
- type Product,
-} from '@woocommerce/data';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-
-type VariationSwitcherProps = {
- parentProductType?: string;
- variationId?: number;
- parentId?: number;
-};
-
-export function useVariationSwitcher( {
- variationId,
- parentId,
- parentProductType,
-}: VariationSwitcherProps ) {
- const { invalidateResolution } = useDispatch( 'core' );
- const { invalidateResolutionForStoreSelector } = useDispatch(
- EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME
- );
- const variationValues = useSelect(
- ( select ) => {
- if ( parentId === undefined ) {
- return {};
- }
- const { getEntityRecord } = select( 'core' );
- const parentProduct: Product | undefined = getEntityRecord(
- 'postType',
- parentProductType || 'product',
- parentId
- );
- if (
- variationId !== undefined &&
- parentProduct &&
- parentProduct.variations
- ) {
- const activeVariationIndex =
- parentProduct.variations.indexOf( variationId );
- const previousVariationIndex =
- activeVariationIndex > 0 ? activeVariationIndex - 1 : null;
- const nextVariationIndex =
- activeVariationIndex !== parentProduct.variations.length - 1
- ? activeVariationIndex + 1
- : null;
-
- return {
- activeVariationIndex,
- nextVariationIndex,
- previousVariationIndex,
- numberOfVariations: parentProduct.variations.length,
- previousVariationId:
- previousVariationIndex !== null
- ? parentProduct.variations[ previousVariationIndex ]
- : null,
- nextVariationId:
- nextVariationIndex !== null
- ? parentProduct.variations[ nextVariationIndex ]
- : null,
- };
- }
- return {};
- },
- [ variationId, parentId ]
- );
-
- function invalidateVariationList() {
- invalidateResolution( 'getEntityRecord', [
- 'postType',
- parentProductType || 'product',
- parentId,
- ] );
- invalidateResolutionForStoreSelector( 'getProductVariations' );
- invalidateResolutionForStoreSelector(
- 'getProductVariationsTotalCount'
- );
- }
-
- function goToVariation( id: number ) {
- navigateTo( {
- url: getNewPath( {}, `/product/${ parentId }/variation/${ id }` ),
- } );
- }
-
- function goToNextVariation() {
- if (
- variationValues.nextVariationId === undefined ||
- variationValues.nextVariationId === null
- ) {
- return false;
- }
- goToVariation( variationValues.nextVariationId );
- return true;
- }
-
- function goToPreviousVariation() {
- if (
- variationValues.previousVariationId === undefined ||
- variationValues.previousVariationId === null
- ) {
- return false;
- }
- goToVariation( variationValues.previousVariationId );
- return true;
- }
-
- return {
- ...variationValues,
- invalidateVariationList,
- goToVariation,
- goToNextVariation,
- goToPreviousVariation,
- };
-}
diff --git a/packages/js/product-editor/src/hooks/use-variations-order.ts b/packages/js/product-editor/src/hooks/use-variations-order.ts
deleted file mode 100644
index 27de68fe89b..00000000000
--- a/packages/js/product-editor/src/hooks/use-variations-order.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import { useFormContext } from '@woocommerce/components';
-import type { ProductVariation } from '@woocommerce/data';
-
-const KEY_SEPARATOR = ':';
-
-function getVariationKey( variation: ProductVariation ) {
- return `${ variation.id }${ KEY_SEPARATOR }${ variation.menu_order }`;
-}
-
-function getVariationId( { key }: JSX.Element ) {
- return typeof key === 'string'
- ? Number.parseInt( key.split( KEY_SEPARATOR )[ 0 ], 10 )
- : 0;
-}
-
-function getVariationOrder( { key }: JSX.Element ) {
- return typeof key === 'string'
- ? Number.parseInt( key.split( KEY_SEPARATOR )[ 1 ], 10 )
- : Number.MAX_SAFE_INTEGER;
-}
-
-function sort(
- variations: ProductVariation[],
- currentPage: number,
- { variationsOrder }: ProductVariationsOrder
-) {
- if ( ! variationsOrder || ! variationsOrder[ currentPage ] )
- return variations;
-
- const currentPageVariationsOrder = variationsOrder[ currentPage ];
-
- return [ ...variations ].sort( ( a, b ) => {
- if (
- ! currentPageVariationsOrder[ a.id ] ||
- ! currentPageVariationsOrder[ b.id ]
- )
- return 0;
- return (
- currentPageVariationsOrder[ a.id ] -
- currentPageVariationsOrder[ b.id ]
- );
- } );
-}
-
-export const useVariationsOrder = ( {
- variations,
- currentPage,
-}: UseVariationsOrderInput ): UseVariationsOrderOutput => {
- const { setValue, values } = useFormContext< ProductVariationsOrder >();
-
- function onOrderChange( items: JSX.Element[] ) {
- const minOrder = Math.min( ...items.map( getVariationOrder ) );
-
- setValue( 'variationsOrder', {
- ...values.variationsOrder,
- [ currentPage ]: items.reduce( ( prev, item, index ) => {
- const id = getVariationId( item );
- return {
- ...prev,
- [ id ]: minOrder + index,
- };
- }, {} ),
- } );
- }
-
- return {
- sortedVariations: sort( variations, currentPage, values ),
- getVariationKey,
- onOrderChange,
- };
-};
-
-export type UseVariationsOrderInput = {
- variations: ProductVariation[];
- currentPage: number;
-};
-
-export type UseVariationsOrderOutput = {
- sortedVariations: ProductVariation[];
- getVariationKey( variation: ProductVariation ): string;
- onOrderChange( items: JSX.Element[] ): void;
-};
-
-export type ProductVariationsOrder = {
- variationsOrder?: {
- [ page: number ]: {
- [ variationId: number ]: number;
- };
- };
-};
diff --git a/packages/js/product-editor/src/icons/gift.tsx b/packages/js/product-editor/src/icons/gift.tsx
deleted file mode 100644
index 2dedfedb092..00000000000
--- a/packages/js/product-editor/src/icons/gift.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { SVG, Path, Rect } from '@wordpress/components';
-
-const gift = (
- <SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <Rect
- x="-0.75"
- y="-0.75"
- fill="none"
- width="9.5"
- height="14.5"
- transform="matrix(3.97376e-08 -1 -1 -4.80825e-08 18.5 18.5)"
- stroke="#1E1E1E"
- strokeWidth="1.5"
- />
- <Path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M13 19L13 9L11.5 9L11.5 19L13 19Z"
- />
- <Path
- d="M16.5 6.5C16.5 7.4665 15.7165 8.25 14.75 8.25H13V6.5C13 5.5335 13.7835 4.75 14.75 4.75C15.7165 4.75 16.5 5.5335 16.5 6.5Z"
- stroke="#1E1E1E"
- fill="none"
- strokeWidth="1.5"
- />
- <Path
- d="M8 6.5C8 7.4665 8.7835 8.25 9.75 8.25H11.5V6.5C11.5 5.5335 10.7165 4.75 9.75 4.75C8.7835 4.75 8 5.5335 8 6.5Z"
- stroke="#1E1E1E"
- fill="none"
- strokeWidth="1.5"
- />
- </SVG>
-);
-
-export default gift;
diff --git a/packages/js/product-editor/src/icons/hidden-icon.tsx b/packages/js/product-editor/src/icons/hidden-icon.tsx
deleted file mode 100644
index 19240385582..00000000000
--- a/packages/js/product-editor/src/icons/hidden-icon.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import clsx from 'clsx';
-
-export default function HiddenIcon( {
- width = 24,
- height = 24,
- className,
- ...props
-}: React.SVGProps< SVGSVGElement > ) {
- return (
- <svg
- { ...props }
- width={ width }
- height={ height }
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true"
- className={ clsx( className, 'woocommerce-hidden-icon' ) }
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M13.7226 6.2125C13.1641 6.0766 12.5883 6 11.9999 6C8.10055 6 4.75407 9.36447 3.31899 11.0546C2.8507 11.6061 2.8507 12.3939 3.31899 12.9454C4.17896 13.9582 5.72533 15.5723 7.66574 16.7033L8.41572 15.4043C8.13761 15.242 7.86389 15.0655 7.59553 14.8776C6.25019 13.9359 5.15775 12.7905 4.48406 12C5.15775 11.2095 6.25019 10.0641 7.59553 9.12235C8.96667 8.16257 10.4775 7.5 11.9999 7.5C12.3118 7.5 12.6231 7.5278 12.9329 7.58027L13.7226 6.2125ZM12.3504 8.58923C12.2352 8.57753 12.1182 8.57153 11.9999 8.57153C10.1063 8.57153 8.57132 10.1066 8.57132 12.0001C8.57132 12.7505 8.81237 13.4445 9.22126 14.0091L10.1233 12.4467C10.0893 12.3034 10.0713 12.1538 10.0713 12.0001C10.0713 11.1266 10.652 10.3888 11.4484 10.1515L12.3504 8.58923ZM12.8092 10.2491L13.5611 8.94679C14.6697 9.51479 15.4285 10.6688 15.4285 12.0001C15.4285 13.8937 13.8934 15.4287 11.9999 15.4287C11.3128 15.4287 10.6729 15.2266 10.1364 14.8785L10.8883 13.5763C11.2025 13.7983 11.5859 13.9287 11.9999 13.9287C13.065 13.9287 13.9285 13.0652 13.9285 12.0001C13.9285 11.224 13.4701 10.555 12.8092 10.2491ZM9.51376 15.957C10.3246 16.2986 11.1605 16.5 11.9999 16.5C13.5223 16.5 15.0331 15.8374 16.4043 14.8776C17.7496 13.9359 18.842 12.7905 19.5157 12C18.842 11.2095 17.7496 10.0641 16.4043 9.12235C15.6875 8.62066 14.9327 8.20018 14.1579 7.91308L14.917 6.59839C17.5164 7.64275 19.6204 9.80575 20.6808 11.0546C21.1491 11.6061 21.1491 12.3939 20.6808 12.9454C19.2457 14.6355 15.8992 18 11.9999 18C10.8611 18 9.76945 17.713 8.7588 17.2646L9.51376 15.957Z"
- fill="currentColor"
- />
- <rect
- x="16.0625"
- y="4.61377"
- width="1.22727"
- height="16"
- transform="rotate(30 16.0625 4.61377)"
- fill="currentColor"
- />
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/icons/index.ts b/packages/js/product-editor/src/icons/index.ts
deleted file mode 100644
index f3ec8831edc..00000000000
--- a/packages/js/product-editor/src/icons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as hidden } from './hidden-icon';
-export { default as gift } from './gift';
-export { default as seen } from './seen-icon';
diff --git a/packages/js/product-editor/src/icons/seen-icon.tsx b/packages/js/product-editor/src/icons/seen-icon.tsx
deleted file mode 100644
index ac8c63ab95d..00000000000
--- a/packages/js/product-editor/src/icons/seen-icon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import clsx from 'clsx';
-
-export default function SeenIcon( {
- width = 24,
- height = 24,
- className,
- ...props
-}: React.SVGProps< SVGSVGElement > ) {
- return (
- <svg
- { ...props }
- width={ width }
- height={ height }
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true"
- className={ clsx( className, 'woocommerce-hidden-icon' ) }
- >
- <path
- d="M3.99863 13C4.66945 13.3354 4.66932 13.3357 4.66919 13.3359L4.672 13.3305C4.67523 13.3242 4.68086 13.3135 4.6889 13.2985C4.70497 13.2686 4.73062 13.2218 4.76597 13.1608C4.83672 13.0385 4.94594 12.8592 5.09443 12.6419C5.39214 12.2062 5.84338 11.624 6.45337 11.0431C7.6721 9.88241 9.49621 8.75 11.9986 8.75C14.501 8.75 16.3251 9.88241 17.5439 11.0431C18.1539 11.624 18.6051 12.2062 18.9028 12.6419C19.0513 12.8592 19.1605 13.0385 19.2313 13.1608C19.2666 13.2218 19.2923 13.2686 19.3083 13.2985C19.3164 13.3135 19.322 13.3242 19.3252 13.3305L19.3281 13.3359C19.3279 13.3357 19.3278 13.3354 19.9986 13C20.6694 12.6646 20.6693 12.6643 20.6691 12.664L20.6678 12.6614L20.6652 12.6563L20.6573 12.6408C20.6507 12.6282 20.6417 12.6108 20.63 12.5892C20.6068 12.5459 20.5734 12.4852 20.5296 12.4096C20.4422 12.2584 20.3131 12.0471 20.1413 11.7956C19.7984 11.2938 19.2809 10.626 18.5784 9.9569C17.1721 8.61759 14.9962 7.25 11.9986 7.25C9.00105 7.25 6.82516 8.61759 5.41889 9.9569C4.71638 10.626 4.19886 11.2938 3.85596 11.7956C3.68413 12.0471 3.55507 12.2584 3.46762 12.4096C3.42386 12.4852 3.39044 12.5459 3.3672 12.5892C3.35558 12.6108 3.3465 12.6282 3.33994 12.6408L3.33199 12.6563L3.32943 12.6614L3.3285 12.6632C3.32833 12.6635 3.32781 12.6646 3.99863 13ZM11.9986 16C13.9316 16 15.4986 14.433 15.4986 12.5C15.4986 10.567 13.9316 9 11.9986 9C10.0656 9 8.49863 10.567 8.49863 12.5C8.49863 14.433 10.0656 16 11.9986 16Z"
- fill="#949494"
- />
- </svg>
- );
-}
diff --git a/packages/js/product-editor/src/images/cash-register/index.tsx b/packages/js/product-editor/src/images/cash-register/index.tsx
deleted file mode 100644
index 6f1cc337879..00000000000
--- a/packages/js/product-editor/src/images/cash-register/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, G, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function CashRegister( {
- colorOne = '#E0E0E0',
- colorTwo = '#F0F0F0',
- size = '88',
- style = {},
-} ) {
- return (
- <SVG
- width={ size }
- height={ size }
- viewBox="0 0 88 88"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- style={ style }
- >
- <G clipPath="url(#clip0_13540_198076)">
- <Path
- d="M77.2539 14.7807L39.9517 14.6667C35.4172 14.6667 32.8506 17.199 32.8506 21.718V36.7241L10.818 36.6997C6.29575 36.6997 3.76167 39.2645 3.76167 43.7957L3.66797 81.0294L84.3632 81.0742V21.8319C84.3632 17.313 81.7965 14.7807 77.262 14.7807H77.2539Z"
- fill={ colorOne }
- />
- <Path
- d="M47.5672 47.6794H40.2461V54.9953H47.5672V47.6794Z"
- fill={ colorTwo }
- />
- <Path
- d="M62.3836 47.6794H55.0625V54.9953H62.3836V47.6794Z"
- fill={ colorTwo }
- />
- <Path
- d="M77.0242 47.6794H69.7031V54.9953H77.0242V47.6794Z"
- fill={ colorTwo }
- />
- <Path
- d="M47.5672 62.3232H40.2461V69.6391H47.5672V62.3232Z"
- fill={ colorTwo }
- />
- <Path
- d="M62.3836 62.3232H55.0625V69.6391H62.3836V62.3232Z"
- fill={ colorTwo }
- />
- <Path
- d="M76.9617 62.3232H69.6406V69.6391H76.9617V62.3232Z"
- fill={ colorTwo }
- />
- <Path
- d="M77.0221 36.6795L40.3555 36.7243V22.0682L77.0221 22.0234V36.6795Z"
- fill={ colorTwo }
- />
- <Path
- d="M88 80.8988V80.7034L0 80.6667V87.9581L88 87.9948V80.8988Z"
- fill={ colorTwo }
- />
- <Path
- d="M29.4451 14.6667C27.844 14.6667 27.3225 16.6901 25.7621 16.6901C24.2018 16.6901 23.6844 14.6667 22.0832 14.6667C20.4821 14.6667 19.9607 16.6901 18.4003 16.6901C16.8399 16.6901 16.3225 14.6667 14.7173 14.6667C13.1121 14.6667 12.5947 16.6901 11.0344 16.6901C9.47399 16.6901 8.95658 14.6667 7.35547 14.6667V19.5643V62.3275H29.4451V14.6667Z"
- fill={ colorTwo }
- />
- </G>
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/cash-register/stories/cash-register.story.tsx b/packages/js/product-editor/src/images/cash-register/stories/cash-register.story.tsx
deleted file mode 100644
index f84c412736e..00000000000
--- a/packages/js/product-editor/src/images/cash-register/stories/cash-register.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { CashRegister } from '../index';
-
-export default {
- title: 'Product Editor/images/CashRegister',
- component: CashRegister,
- args: {
- size: '88',
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = CashRegister;
diff --git a/packages/js/product-editor/src/images/empty-variations-image.tsx b/packages/js/product-editor/src/images/empty-variations-image.tsx
deleted file mode 100644
index 5c6552f8e59..00000000000
--- a/packages/js/product-editor/src/images/empty-variations-image.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path, Rect, G } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { createElement } from '@wordpress/element';
-
-export function EmptyVariationsImage( props: React.SVGProps< SVGSVGElement > ) {
- const gId = useInstanceId( G, 'clip' ) as string;
-
- return (
- <SVG
- width="264"
- height="167"
- { ...props }
- viewBox="0 0 264 167"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <G clipPath={ `url(#${ gId })` }>
- <Path
- d="M38.5556 0.164185C11.3783 0.164185 -3.89877 21.4091 1.5234 37.3916C7.43365 54.8517 25.6968 71.9169 25.6968 85.7696H51.4188C51.4188 71.908 69.6821 54.8517 75.5923 37.3916C81.0145 21.4091 65.7463 0.164185 38.5556 0.164185Z"
- fill="#F0F0F0"
- />
- <Path
- d="M50.5063 48.3114C44.2189 48.3114 40.5228 52.5755 40.5228 59.1735V59.9899C40.079 59.9899 39.6176 59.9899 39.1827 59.9944H38.3486C37.7141 59.9944 37.3325 59.9944 36.5915 59.9944V59.1779C36.5915 52.5755 32.8953 48.3114 26.6124 48.3114C21.0127 48.3114 17.8047 50.4812 17.8047 54.2616C17.8047 57.0969 20.4936 59.0137 25.7915 59.9589C29.0306 60.5357 32.1721 60.6777 35.2781 60.7087V85.7652H36.6003V60.7176C37.3413 60.722 37.7185 60.722 38.3574 60.7176C38.9919 60.7176 39.7906 60.7176 40.5316 60.7176V85.7652H41.8539V60.7132C44.9554 60.6777 48.0969 60.5401 51.3405 59.9633C56.6384 59.0182 59.3273 57.1013 59.3273 54.266C59.3273 50.4856 56.1192 48.3158 50.5196 48.3158L50.5063 48.3114ZM35.2781 59.9855C32.2032 59.95 29.106 59.8124 25.9202 59.2445C21.0172 58.3704 19.6905 56.2938 19.6905 54.1329C19.6905 50.2682 23.5996 49.0347 26.6124 49.0347C32.2342 49.0347 35.2781 53.0148 35.2781 59.169V59.981V59.9855ZM51.1985 59.2445C48.0126 59.8124 44.9155 59.9544 41.845 59.9855V59.1735C41.845 53.0148 44.8889 49.0391 50.5107 49.0391C53.528 49.0391 57.4326 50.2726 57.4326 54.1373C57.4326 56.2982 56.1015 58.3704 51.2029 59.2489L51.1985 59.2445Z"
- fill="white"
- />
- <Path
- d="M38.5585 101.872C45.5248 101.872 51.4173 96.1613 51.4173 89.834H25.6953C25.6953 96.1613 31.5923 101.872 38.5585 101.872Z"
- fill="#E0E0E0"
- />
- <Path
- d="M57.2858 89.9271H19.832V85.7695H57.2858V89.9271Z"
- fill="#E0E0E0"
- />
- <Path
- d="M69.5768 106.602H7.63895L0.4375 167L15.2974 151.328H64.2566L69.5768 106.602Z"
- fill="#E0E0E0"
- />
- <Path
- d="M119.436 122.749C113.97 115.072 110.828 111.394 104.652 111.394C97.8809 111.394 94.908 119.061 98.9724 123.853C103.445 129.125 118.993 134.627 118.993 134.627C118.993 134.627 94.0694 129.923 84.9112 129.923C79.8573 129.923 74.6836 131.96 74.6836 139.135C74.6836 146.31 79.8617 148.346 84.9112 148.346C94.0694 148.346 118.993 143.643 118.993 143.643C118.993 143.643 103.445 149.145 98.9724 154.416C94.908 159.208 97.8764 166.876 104.652 166.876C110.828 166.876 113.97 163.197 119.436 155.521C121.287 152.921 130.707 139.135 130.707 139.135C130.707 139.135 121.287 125.349 119.436 122.749Z"
- fill="#E0E0E0"
- />
- <Path
- d="M94.2838 102.671L169.715 102.671V80.4849L94.2838 80.4849V102.671Z"
- fill="#F0F0F0"
- />
- <Path
- d="M169.712 0H94.2812V75.4311H169.712V0Z"
- fill="#E0E0E0"
- />
- <Path
- d="M147.619 49.6336C147.619 44.4156 144.429 39.4194 138.168 36.0116H157.66L139.472 6.00781H124.524L106.336 36.0116H125.828C119.567 39.4194 116.377 44.4156 116.377 49.6336C116.377 55.5394 121.005 61.4985 127.106 64.6888C118.667 62.9849 117.344 69.4232 117.344 69.4232H146.661C146.661 69.4232 145.338 62.9849 136.899 64.6888C143 61.4985 147.628 55.5394 147.628 49.6336H147.619Z"
- fill="white"
- />
- <Path
- d="M147.86 80.7911H94.2812V85.2283H147.86V80.7911Z"
- fill="#E0E0E0"
- />
- <Path
- d="M169.712 89.8473H94.2812V94.2844H169.712V89.8473Z"
- fill="#E0E0E0"
- />
- <Path
- d="M136.82 98.9034H94.2812V103.341H136.82V98.9034Z"
- fill="#E0E0E0"
- />
- <Path
- d="M219.52 167C229.042 167 235.063 158.538 235.063 151.457H203.977C203.977 158.538 209.998 167 219.52 167Z"
- fill="#DDDDDD"
- />
- <Path
- d="M219.516 58.2018C185.027 58.2018 168.143 86.1557 178.522 110.613C185.541 127.141 202.225 125.264 202.225 138.505H236.826C236.826 125.264 253.514 127.141 260.529 110.613C270.903 86.1557 254.006 58.2018 219.516 58.2018Z"
- fill="#F0F0F0"
- />
- <Path
- d="M219.52 167C228.9 167 234.882 158.787 235.059 151.776C235.059 151.67 235.059 142.707 235.059 142.6H203.973C203.973 142.685 203.973 151.63 203.973 151.719C204.115 158.742 210.105 167.004 219.511 167.004L219.52 167Z"
- fill="#E0E0E0"
- />
- <Path
- d="M240.248 142.596H198.801V138.505H240.248V142.596Z"
- fill="#E0E0E0"
- />
- <Path
- d="M240.248 149.074H198.801V144.983H240.248V149.074Z"
- fill="#E0E0E0"
- />
- <Path
- d="M169.656 125.371H142.133V152.894H169.656V125.371Z"
- fill="#F0F0F0"
- />
- <Path
- d="M155.015 146.194L162.181 139.587L147.445 139.663V138.571L162.154 138.647L155.015 132.067L155.676 131.228L163.982 139.055V139.184L155.676 147.033L155.015 146.194Z"
- fill="#DDDDDD"
- />
- <Path
- d="M22.0977 126.533L27.44 141.921L53.5835 112.729"
- stroke="white"
- strokeMiterlimit="10"
- />
- <Path
- d="M232.227 110.138C232.227 102.307 227.559 97.4392 220.042 97.4126C220.042 97.4126 220.025 97.4126 220.016 97.4126C220.007 97.4126 219.998 97.4126 219.989 97.4126C212.473 97.4392 207.805 102.928 207.805 110.138C207.805 117.349 212.22 120.774 218.516 125.287C214.704 128.858 212.663 134.516 212.663 138.505H215.867C215.867 134.809 216.572 129.56 220.016 126.462C223.463 129.56 224.164 134.809 224.164 138.505H227.368C227.368 134.516 225.322 128.858 221.515 125.287C227.812 120.778 232.227 116.958 232.227 110.138ZM220.016 124.435C213.773 119.989 209.242 117.158 209.242 110.138C209.242 103.119 213.546 98.7216 220.016 98.7082C226.485 98.7216 230.789 103.354 230.789 110.138C230.789 116.222 226.259 119.989 220.016 124.435Z"
- fill="#E0E0E0"
- />
- <Path
- d="M250.84 40.1516C250.84 45.9864 246.155 50.7297 240.342 50.8184H199.862C193.97 50.8184 189.195 46.0441 189.195 40.1516C189.195 34.2591 193.97 29.4847 199.862 29.4847H240.36C246.164 29.4847 250.84 34.3256 250.84 40.1516Z"
- fill="#F0F0F0"
- />
- <Path
- d="M240.122 47.7347C244.31 47.7347 247.705 44.3396 247.705 40.1516C247.705 35.9636 244.31 32.5686 240.122 32.5686C235.934 32.5686 232.539 35.9636 232.539 40.1516C232.539 44.3396 235.934 47.7347 240.122 47.7347Z"
- fill="#E0E0E0"
- />
- <Path
- d="M131.996 6.00781H124.524L106.332 36.0116H125.824H138.168H157.661L139.468 6.00781H131.996Z"
- fill="#F0F0F0"
- />
- <Path
- d="M151.608 26.0281H112.384L106.332 36.0116L151.608 26.0281Z"
- fill="white"
- />
- <Path
- d="M145.555 16.0446H118.435L112.383 26.0281L145.555 16.0446Z"
- fill="white"
- />
- <Path
- d="M139.469 6.00781H124.525L118.438 16.0446L139.469 6.00781Z"
- fill="white"
- />
- <Path
- d="M57.4297 42.9647H87.8994"
- stroke="#DDDDDD"
- strokeWidth="0.71"
- strokeMiterlimit="10"
- />
- <Path
- d="M61.8945 32.1914L83.4412 53.7381"
- stroke="#DDDDDD"
- strokeWidth="0.71"
- strokeMiterlimit="10"
- />
- <Path
- d="M72.668 27.7321V58.2018"
- stroke="#DDDDDD"
- strokeWidth="0.71"
- strokeMiterlimit="10"
- />
- </G>
- <defs>
- <clipPath id={ gId }>
- <Rect
- width="263.121"
- height="167"
- fill="white"
- transform="translate(0.4375)"
- />
- </clipPath>
- </defs>
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/error-variations-image.tsx b/packages/js/product-editor/src/images/error-variations-image.tsx
deleted file mode 100644
index 0f61f72f6cd..00000000000
--- a/packages/js/product-editor/src/images/error-variations-image.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function ErrorVariationsImage() {
- return (
- <SVG
- width="90"
- height="64"
- viewBox="0 0 90 64"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <Path
- d="M89.4707 32.0026L80.0137 38.0743L83.1112 48.872L71.7948 48.2247L69.3959 59.2741L59.1941 54.3068L53.3124 64L45.001 56.2691L36.6895 64L30.8078 54.3068L20.6061 59.2741L18.2072 48.2247L6.89067 48.872L9.98819 38.0743L0.53125 32.0026L9.98819 25.9257L6.89067 15.1332L18.2072 15.7804L20.6061 4.7259L30.8078 9.69837L36.6895 0L45.001 7.73096L53.3124 0L59.1889 9.69837L69.3959 4.7259L71.7948 15.7804L83.1112 15.1332L80.0137 25.9257L89.4707 32.0026Z"
- fill="#E0E0E0"
- />
- <Path
- d="M44.9266 16.8066C41.6031 16.8066 38.9062 19.5292 38.9062 26.0632C38.9062 34.051 44.9266 40.7187 44.9266 40.7187C44.9266 40.7187 50.947 34.0459 50.947 26.0632C50.947 19.5292 48.2502 16.8066 44.9266 16.8066Z"
- fill="white"
- />
- <Path
- d="M44.9218 49.9242C46.9389 49.9242 48.5741 48.289 48.5741 46.2719C48.5741 44.2548 46.9389 42.6196 44.9218 42.6196C42.9047 42.6196 41.2695 44.2548 41.2695 46.2719C41.2695 48.289 42.9047 49.9242 44.9218 49.9242Z"
- fill="white"
- />
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/glasses/index.tsx b/packages/js/product-editor/src/images/glasses/index.tsx
deleted file mode 100644
index f8c0be90912..00000000000
--- a/packages/js/product-editor/src/images/glasses/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function Glasses( {
- colorOne = '#E0E0E0',
- colorTwo = '#F0F0F0',
- size = 72,
- style = {},
-} ) {
- const rate = 72 / 33;
-
- return (
- <SVG
- width={ size }
- height={ Math.round( size / rate ) }
- viewBox="0 0 72 33"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- style={ style }
- >
- <Path
- d="M1.82318 26.2927C2.40837 25.6395 12.1796 15.8683 13.4588 14.6027C14.6156 13.4596 16.0853 12.9696 17.8409 12.8336C19.2426 12.7383 65.159 9.36328 65.159 9.36328L65.9075 12.9016C65.9075 12.9016 17.3782 17.7736 17.3509 17.7736C13.5132 22.8633 8.01523 30.7156 7.49809 31.3008C6.10999 32.8658 3.71482 33.0019 2.13618 31.6274C0.598377 30.2257 0.448677 27.8306 1.83679 26.2655L1.82318 26.2927Z"
- fill={ colorTwo }
- />
- <Path
- d="M70.4378 26.2927C69.8526 25.6395 60.0815 15.8683 58.8022 14.6027C57.6455 13.4596 56.1757 12.9696 54.4202 12.8336C53.0184 12.7383 7.10201 9.36328 7.10201 9.36328L6.35352 12.9016C6.35352 12.9016 54.8829 17.7736 54.9101 17.7736C58.7478 22.8633 64.2458 30.7156 64.7629 31.3008C66.151 32.8658 68.5462 33.0019 70.1248 31.6274C71.6626 30.2257 71.8123 27.8306 70.4242 26.2655L70.4378 26.2927Z"
- fill={ colorTwo }
- />
- <Path
- d="M53.3189 0C46.4328 0 41.6016 2.5993 38.4715 8.70969C38.1449 8.4103 37.1379 8.01564 36.1172 8.01564C35.0965 8.01564 34.1031 8.42391 33.7629 8.70969C30.6328 2.5993 25.8017 0 18.9156 0C12.0295 0 4.49012 4.53176 0.666016 6.38257V11.9078H4.77591C5.34748 15.4461 8.61362 25.68 19.0244 25.68C28.1288 25.68 30.9322 19.2838 32.9736 15.378C33.6812 14.0172 34.5658 12.0711 36.1172 12.0711C37.6686 12.0711 38.5532 14.0172 39.2609 15.378C41.2886 19.2838 44.092 25.68 53.21 25.68C63.6208 25.68 66.8869 15.4597 67.4585 11.9078H71.5684V6.38257C67.7443 4.54537 60.3683 0 53.3189 0ZM19.0517 22.3186C12.9277 22.3186 8.83136 16.9022 8.83136 11.4723C8.83136 5.53882 14.1797 3.2117 19.1605 3.2117C24.1414 3.2117 29.8027 5.811 29.8027 11.0912C29.8027 17.1336 25.3662 22.305 19.0517 22.305V22.3186ZM53.21 22.3186C46.9091 22.3186 42.459 17.1472 42.459 11.1049C42.459 5.83822 48.1066 3.22531 53.1011 3.22531C58.0956 3.22531 63.4303 5.55243 63.4303 11.4859C63.4303 16.9159 59.3204 22.3322 53.21 22.3322V22.3186Z"
- fill={ colorOne }
- />
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/glasses/stories/glasses.story.tsx b/packages/js/product-editor/src/images/glasses/stories/glasses.story.tsx
deleted file mode 100644
index 990dcb34de2..00000000000
--- a/packages/js/product-editor/src/images/glasses/stories/glasses.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Glasses } from '../index';
-
-export default {
- title: 'Product Editor/images/Glasses',
- component: Glasses,
- args: {
- size: 72,
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = Glasses;
diff --git a/packages/js/product-editor/src/images/pants/index.tsx b/packages/js/product-editor/src/images/pants/index.tsx
deleted file mode 100644
index 1b9a454a51b..00000000000
--- a/packages/js/product-editor/src/images/pants/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path, G, Rect } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { createElement } from '@wordpress/element';
-
-export function Pants( {
- colorOne = '#DDDDDD',
- colorTwo = '#F0F0F0',
- size = 50,
- style = {},
-} ) {
- const clipPathId = useInstanceId( Pants, 'pants' ) as string;
- const rate = 50 / 72;
-
- return (
- <SVG
- width={ size }
- height={ Math.round( size / rate ) }
- viewBox="0 0 50 72"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- style={ style }
- >
- <G clipPath={ `url(#${ clipPathId })` }>
- <Path
- d="M44.6084 21.3845C40.788 21.6427 35.5059 20.8456 35.1404 16.333C34.8746 13.0889 34.5867 9.04771 34.3431 5.7811H42.9474L42.3273 0H8.34205L7.72192 5.7811H16.3262C16.0826 9.04771 15.8057 13.0889 15.5289 16.333C15.1635 20.8456 9.87022 21.6314 6.06086 21.3845L0.667969 72H14.0007C14.0007 72 21.7745 32.0711 22.904 26.0318C23.4909 22.9111 24.3989 22.2264 25.3291 22.2264C26.2593 22.2264 27.1673 22.9224 27.7543 26.0318C28.8948 32.0599 36.6575 72 36.6575 72H49.9903L44.5974 21.3845H44.6084Z"
- fill={ colorTwo }
- />
- <Path
- d="M15.5383 16.3332C15.8041 13.089 16.092 9.04785 16.3356 5.78125H7.73137L6.07031 21.3846C9.89074 21.6428 15.1729 20.8458 15.5383 16.3332Z"
- fill={ colorOne }
- />
- <Path
- d="M35.1293 16.3332C35.4948 20.8458 40.788 21.6316 44.5974 21.3846L42.9363 5.78125H34.332C34.5757 9.04785 34.8525 13.089 35.1293 16.3332Z"
- fill={ colorOne }
- />
- </G>
- <defs>
- <clipPath id={ clipPathId }>
- <Rect
- width="49.3334"
- height="72"
- fill="white"
- transform="translate( 0.667969 )"
- />
- </clipPath>
- </defs>
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/pants/stories/pants.story.tsx b/packages/js/product-editor/src/images/pants/stories/pants.story.tsx
deleted file mode 100644
index 93eca5a611d..00000000000
--- a/packages/js/product-editor/src/images/pants/stories/pants.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Pants } from '../index';
-
-export default {
- title: 'Product Editor/images/Pants',
- component: Pants,
- args: {
- size: 50,
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = Pants;
diff --git a/packages/js/product-editor/src/images/shirt/index.tsx b/packages/js/product-editor/src/images/shirt/index.tsx
deleted file mode 100644
index 69c743c0ee5..00000000000
--- a/packages/js/product-editor/src/images/shirt/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function Shirt( {
- colorOne = '#E0E0E0',
- colorTwo = '#F0F0F0',
- size = 68,
- style = {},
-} ) {
- const rate = 68 / 56;
- return (
- <SVG
- width={ size }
- height={ Math.round( size / rate ) }
- viewBox="0 0 68 56"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- style={ style }
- >
- <Path
- d="M43.0926 0.333984C41.0526 1.54732 37.5593 2.46732 34.2526 2.46732C30.946 2.46732 27.4526 1.54732 25.4126 0.333984L22.2793 10.5207H46.2126L43.106 0.333984H43.0926Z"
- fill={ colorOne }
- />
- <Path
- d="M43.0927 0.333984C43.0927 4.09398 40.306 8.80065 34.2527 8.80065C28.1994 8.80065 25.4127 4.08065 25.4127 0.333984C15.546 0.333984 3.81268 7.45398 0.666016 10.6006L9.73269 24.7606L14.986 23.414L15.066 55.5606H53.4394L53.5194 23.414L58.7727 24.7606L67.8394 10.6006C64.6927 7.45398 52.9594 0.333984 43.0927 0.333984Z"
- fill={ colorTwo }
- />
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/shirt/stories/shirt.story.tsx b/packages/js/product-editor/src/images/shirt/stories/shirt.story.tsx
deleted file mode 100644
index 1134bf5148e..00000000000
--- a/packages/js/product-editor/src/images/shirt/stories/shirt.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Shirt } from '../index';
-
-export default {
- title: 'Product Editor/images/Shirt',
- component: Shirt,
- args: {
- size: '88',
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = Shirt;
diff --git a/packages/js/product-editor/src/images/shopping-bags/index.tsx b/packages/js/product-editor/src/images/shopping-bags/index.tsx
deleted file mode 100644
index b6bd45ac5e8..00000000000
--- a/packages/js/product-editor/src/images/shopping-bags/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-export function ShoppingBags( {
- colorOne = '#E0E0E0',
- colorTwo = '#F0F0F0',
- size = '88',
- style = {},
-} ) {
- return (
- <SVG
- width={ size }
- height={ size }
- viewBox="0 0 88 88"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- style={ style }
- >
- <Path
- d="M59.5299 29.3511H6.48494C4.38544 44.6382 0.74386 74.8826 0.105058 79.5685C-0.505262 84.0386 1.48031 87.9998 7.72592 87.9998H58.293C64.5386 87.9998 66.5241 84.0386 65.9138 79.5685C65.275 74.8826 61.6294 44.6382 59.534 29.3511H59.5299Z"
- fill={ colorOne }
- />
-
- <Path
- d="M45.1549 17.5C42.7177 15.6069 39.3976 14.6787 35.0155 14.6665C34.987 14.6665 31.024 14.6665 30.9996 14.6665C26.6175 14.6787 23.3014 15.6069 20.8601 17.5C17.9916 19.7269 16.5391 23.106 16.5391 27.5476V40.2454H23.8629V28.5898C23.8629 25.569 25.2422 22.0393 30.9833 21.9986C31.0159 21.9986 35.0033 21.9986 35.0358 21.9986C40.7769 22.0393 42.1562 25.569 42.1562 28.5898V40.2454H49.4801V27.5476C49.4801 23.106 48.0275 19.7269 45.159 17.5H45.1549Z"
- fill={ colorTwo }
- />
-
- <Path
- d="M47.3921 47.6711L44.0312 87.9998H87.9987L84.2676 47.6711H47.3921Z"
- fill={ colorTwo }
- />
-
- <Path
- d="M66.0147 65.9912C60.2736 65.9912 56.8477 62.4738 56.8477 56.5828V51.3188H60.5096V56.5828C60.5096 62.3272 64.6516 62.3272 66.0147 62.3272C67.3777 62.3272 71.5197 62.3272 71.5197 56.5828V51.3188H75.1817V56.5828C75.1817 62.4738 71.7557 65.9912 66.0147 65.9912Z"
- fill={ colorOne }
- />
- </SVG>
- );
-}
diff --git a/packages/js/product-editor/src/images/shopping-bags/stories/shopping-bags.story.tsx b/packages/js/product-editor/src/images/shopping-bags/stories/shopping-bags.story.tsx
deleted file mode 100644
index 4dd6d962cc4..00000000000
--- a/packages/js/product-editor/src/images/shopping-bags/stories/shopping-bags.story.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ShoppingBags } from '../index';
-
-export default {
- title: 'Product Editor/images/ShoppingBags',
- component: ShoppingBags,
- args: {
- size: '88',
- colorOne: '#E0E0E0',
- colorTwo: '#F0F0F0',
- },
-};
-
-export const Default = ShoppingBags;
diff --git a/packages/js/product-editor/src/index.ts b/packages/js/product-editor/src/index.ts
deleted file mode 100644
index 9fe4ec65fbd..00000000000
--- a/packages/js/product-editor/src/index.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import registerProductEditorUiStore from './store/product-editor-ui';
-import registerProductEditorHooks from './wp-hooks';
-
-deprecated( '@woocommerce/product-editor', {
- version: '10.9.0',
- plugin: 'WooCommerce',
- hint: 'The new product editor and its extension APIs are deprecated and will be removed in WooCommerce 11.0.',
-} );
-
-export * from './components';
-export { DETAILS_SECTION_ID, TAB_GENERAL_ID, TRACKS_SOURCE } from './constants';
-
-/**
- * Types
- */
-export * from './types';
-
-/**
- * Utils
- */
-export * from './utils';
-
-/*
- * Store
- */
-export * from './store/product-editor-ui';
-
-/**
- * Hooks
- */
-export * from './hooks';
-export { useValidation, useValidations } from './contexts/validation-context';
-export * from './contexts/validation-context/types';
-
-/**
- * Contexts
- */
-export { EditorLoadingContext as __experimentalEditorLoadingContext } from './contexts/editor-loading-context';
-export { PostTypeContext } from './contexts/post-type-context';
-
-// Init the store
-registerProductEditorUiStore();
-
-registerProductEditorHooks();
diff --git a/packages/js/product-editor/src/lock-unlock.ts b/packages/js/product-editor/src/lock-unlock.ts
deleted file mode 100644
index 30934a9ac8b..00000000000
--- a/packages/js/product-editor/src/lock-unlock.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * External dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
-const { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
- 'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
- '@wordpress/edit-site'
-);
-export { lock, unlock };
diff --git a/packages/js/product-editor/src/store/product-editor-ui/Readme.md b/packages/js/product-editor/src/store/product-editor-ui/Readme.md
deleted file mode 100644
index 33deab84a1b..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/Readme.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# WooCommerce Product Editor UI Store
-
-This module provides a @wordpress/data store for managing the UI state of a WooCommerce Product Editor.
-
-## Structure
-
-Defines action types for the UI state:
-
-- `ACTION_MODAL_EDITOR_OPEN`
-- `ACTION_MODAL_EDITOR_CLOSE`
-- `ACTION_PANEL_PREPUBLISH_OPEN`
-- `ACTION_PANEL_PREPUBLISH_CLOSE`
-
-### Actions
-
-- `openModalEditor`
-- `closeModalEditor`
-- `openPrepublishPanel`
-- `closePrepublishPanel`
-
-### Selectors
-
-Selector function:
-
-- `isModalEditorOpen`
-- `isPrepublishPanelOpen`
-
-### Store
-
-Registers the WooCommerce Product Editor UI store with the following:
-
-- Store Name: `woo/product-editor-ui`
-
-## Usage
diff --git a/packages/js/product-editor/src/store/product-editor-ui/actions.ts b/packages/js/product-editor/src/store/product-editor-ui/actions.ts
deleted file mode 100644
index 6bec56745dc..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/actions.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import {
- ACTION_MODAL_EDITOR_CLOSE,
- ACTION_MODAL_EDITOR_OPEN,
- ACTION_MODAL_EDITOR_SET_BLOCKS,
- ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED,
- ACTION_PANEL_PREPUBLISH_OPEN,
- ACTION_PANEL_PREPUBLISH_CLOSE,
-} from './constants';
-
-const modalEditorActions = {
- openModalEditor: () => ( {
- type: ACTION_MODAL_EDITOR_OPEN,
- } ),
-
- closeModalEditor: () => ( {
- type: ACTION_MODAL_EDITOR_CLOSE,
- } ),
-
- setModalEditorBlocks: ( blocks: BlockInstance[] ) => ( {
- type: ACTION_MODAL_EDITOR_SET_BLOCKS,
- blocks,
- } ),
-
- setModalEditorContentHasChanged: ( hasChanged: boolean ) => ( {
- type: ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED,
- hasChanged,
- } ),
-
- isModalEditorOpen: () => ( {
- type: Boolean,
- } ),
-};
-
-const prepublishPanelActions = {
- openPrepublishPanel: () => ( {
- type: ACTION_PANEL_PREPUBLISH_OPEN,
- } ),
-
- closePrepublishPanel: () => ( {
- type: ACTION_PANEL_PREPUBLISH_CLOSE,
- } ),
-};
-
-export default {
- ...modalEditorActions,
- ...prepublishPanelActions,
-};
diff --git a/packages/js/product-editor/src/store/product-editor-ui/constants.ts b/packages/js/product-editor/src/store/product-editor-ui/constants.ts
deleted file mode 100644
index 5b5713df391..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/constants.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Full editor actions
- */
-export const ACTION_MODAL_EDITOR_OPEN = 'MODAL_EDITOR_OPEN';
-export const ACTION_MODAL_EDITOR_CLOSE = 'MODAL_EDITOR_CLOSE';
-export const ACTION_MODAL_EDITOR_SET_BLOCKS = 'MODAL_EDITOR_SET_BLOCKS';
-export const ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED =
- 'MODAL_EDITOR_CONTENT_HAS_CHANGED';
-export const ACTION_PANEL_PREPUBLISH_OPEN = 'PANEL_PREPUBLISH_OPEN';
-export const ACTION_PANEL_PREPUBLISH_CLOSE = 'PANEL_PREPUBLISH_CLOSE';
diff --git a/packages/js/product-editor/src/store/product-editor-ui/index.ts b/packages/js/product-editor/src/store/product-editor-ui/index.ts
deleted file mode 100644
index d186b283326..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { createReduxStore, register } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import actions from './actions';
-import selectors from './selectors';
-import reducer from './reducer';
-/**
- * Types
- */
-
-const store = 'woo/product-editor-ui';
-
-export const wooProductEditorUiStore = createReduxStore( store, {
- actions,
- selectors,
- reducer,
-} );
-
-export default function registerProductEditorUiStore() {
- register( wooProductEditorUiStore );
-}
diff --git a/packages/js/product-editor/src/store/product-editor-ui/reducer.ts b/packages/js/product-editor/src/store/product-editor-ui/reducer.ts
deleted file mode 100644
index da517aef830..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/reducer.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
- ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED,
- ACTION_MODAL_EDITOR_CLOSE,
- ACTION_MODAL_EDITOR_OPEN,
- ACTION_MODAL_EDITOR_SET_BLOCKS,
- ACTION_PANEL_PREPUBLISH_CLOSE,
- ACTION_PANEL_PREPUBLISH_OPEN,
-} from './constants';
-import type {
- ProductEditorModalEditorAction,
- ProductEditorPrepublishPanelAction,
- ProductEditorUIStateProps,
-} from './types';
-
-/**
- * Types & Constants
- */
-const INITIAL_STATE: ProductEditorUIStateProps = {
- modalEditor: {
- isOpen: false,
- blocks: [],
- hasChanged: false,
- },
- prepublishPanel: {
- isOpen: false,
- },
-};
-
-export default function reducer(
- state = INITIAL_STATE,
- action: ProductEditorModalEditorAction | ProductEditorPrepublishPanelAction
-) {
- switch ( action.type ) {
- case ACTION_MODAL_EDITOR_OPEN:
- return {
- ...state,
- modalEditor: {
- ...state.modalEditor,
- isOpen: true,
- },
- };
-
- case ACTION_MODAL_EDITOR_CLOSE:
- return {
- ...state,
- modalEditor: {
- ...state.modalEditor,
- isOpen: false,
- },
- };
-
- case ACTION_MODAL_EDITOR_SET_BLOCKS:
- return {
- ...state,
- modalEditor: {
- ...state.modalEditor,
- blocks: action.blocks || [],
- },
- };
-
- case ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED:
- return {
- ...state,
- modalEditor: {
- ...state.modalEditor,
- hasChanged: action?.hasChanged || false,
- },
- };
-
- case ACTION_PANEL_PREPUBLISH_OPEN:
- return {
- ...state,
- prepublishPanel: {
- isOpen: true,
- },
- };
-
- case ACTION_PANEL_PREPUBLISH_CLOSE:
- return {
- ...state,
- prepublishPanel: {
- isOpen: false,
- },
- };
- }
-
- return state;
-}
diff --git a/packages/js/product-editor/src/store/product-editor-ui/selectors.ts b/packages/js/product-editor/src/store/product-editor-ui/selectors.ts
deleted file mode 100644
index a7a9524f7c6..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/selectors.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import type { ProductEditorUIStateProps } from './types';
-
-export default {
- isModalEditorOpen: function isModalEditorOpen(
- state: ProductEditorUIStateProps
- ) {
- return state.modalEditor?.isOpen;
- },
-
- getModalEditorBlocks: function getModalEditorBlocks(
- state: ProductEditorUIStateProps
- ): BlockInstance[] {
- return state.modalEditor?.blocks || [];
- },
-
- getModalEditorContentHasChanged: function getModalEditorContentHasChanged(
- state: ProductEditorUIStateProps
- ): boolean {
- return !! state.modalEditor?.hasChanged;
- },
- isPrepublishPanelOpen: function isPrepublishPanelOpen(
- state: ProductEditorUIStateProps
- ) {
- return state.prepublishPanel?.isOpen;
- },
-};
diff --git a/packages/js/product-editor/src/store/product-editor-ui/types.ts b/packages/js/product-editor/src/store/product-editor-ui/types.ts
deleted file mode 100644
index 02b4d313b6a..00000000000
--- a/packages/js/product-editor/src/store/product-editor-ui/types.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import {
- ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED,
- ACTION_MODAL_EDITOR_CLOSE,
- ACTION_MODAL_EDITOR_OPEN,
- ACTION_MODAL_EDITOR_SET_BLOCKS,
- ACTION_PANEL_PREPUBLISH_CLOSE,
- ACTION_PANEL_PREPUBLISH_OPEN,
-} from './constants';
-
-export type ProductEditorUIStateProps = {
- modalEditor?: {
- isOpen?: boolean;
- blocks?: BlockInstance[];
- hasChanged?: boolean;
- };
- prepublishPanel?: {
- isOpen: boolean;
- };
-};
-
-export type ProductEditorModalEditorAction = {
- type:
- | typeof ACTION_MODAL_EDITOR_OPEN
- | typeof ACTION_MODAL_EDITOR_CLOSE
- | typeof ACTION_MODAL_EDITOR_SET_BLOCKS
- | typeof ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED;
-
- blocks?: BlockInstance[];
-
- hasChanged?: boolean;
-};
-
-export type ProductEditorPrepublishPanelAction = {
- type:
- | typeof ACTION_PANEL_PREPUBLISH_CLOSE
- | typeof ACTION_PANEL_PREPUBLISH_OPEN;
-};
diff --git a/packages/js/product-editor/src/style.scss b/packages/js/product-editor/src/style.scss
deleted file mode 100644
index cad993ba8e5..00000000000
--- a/packages/js/product-editor/src/style.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/* Editor */
-
-@import "components/editor/style.scss";
-@import "components/block-editor/style.scss";
-
-/* Structural */
-
-@import "components/tabs/style.scss";
-@import "components/product-section-layout/style.scss";
-@import "components/header/style.scss";
-@import "components/add-new-shipping-class-modal/style.scss";
-@import "components/section-header/styles.scss";
-
-/* Components */
-
-@import "components/content-preview/style.scss";
-@import "components/radio-field/style.scss";
-@import "components/notice/style.scss";
-@import "components/iframe-editor/style.scss";
-@import "components/modal-editor/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/attribute-control/attribute-field.scss";
-@import "components/attribute-control/edit-attribute-modal.scss";
-@import "components/attribute-control/new-attribute-modal.scss";
-@import "components/attribute-input-field/attribute-input-field.scss";
-@import "components/attribute-list-item/attribute-list-item.scss";
-@import "components/attribute-term-input-field/attribute-term-input-field.scss";
-@import "components/variations-table/styles.scss";
-@import "components/tags-field/create-tag-modal.scss";
-@import "components/tags-field/style.scss";
-@import "components/variation-switcher-footer/variation-switcher-footer.scss";
-@import "components/remove-confirmation-modal/style.scss";
-@import "components/manage-download-limits-modal/style.scss";
-@import "components/label/style.scss";
-@import "components/modal-editor-welcome-guide/style.scss";
-@import "components/checkbox-control/style.scss";
-@import "components/add-products-modal/style.scss";
-@import "components/advice-card/style.scss";
-@import "components/button-with-dropdown-menu/style.scss";
-@import "components/formatted-price/style.scss";
-@import "components/product-list/styles.scss";
-@import "components/product-select/styles.scss";
-@import "components/product-image/styles.scss";
-@import "components/prepublish-panel/style.scss";
-@import "components/require-password/styles.scss";
-@import "components/schedule-publish-modal/style.scss";
-@import "components/custom-fields/style.scss";
-@import "components/text-control/style.scss";
-@import "components/attribute-combobox-field/styles.scss";
-@import "components/number-control/style.scss";
-@import "components/empty-state/style.scss";
-@import "components/combobox-control/style.scss";
-@import "components/more-menu-dropdown/style.scss";
-
-/* Field Blocks */
-
-@import "blocks/style.scss";
-
-/* Hooks */
-@import "hooks/use-draggable/styles.scss";
diff --git a/packages/js/product-editor/src/types.ts b/packages/js/product-editor/src/types.ts
deleted file mode 100644
index 9dc455e259b..00000000000
--- a/packages/js/product-editor/src/types.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
-import { Product } from '@woocommerce/data';
-
-export type ProductTemplate = {
- id: string;
- title: string;
- description: string | null;
- icon: string | null;
- order: number;
- layoutTemplateId: string;
- isSelectableByUser: boolean;
- productData: Partial< Product >;
-};
-
-export interface ProductEditorContext extends Record< string, unknown > {
- postId: number;
- postType: string;
- selectedTab: string | null;
- isInSelectedTab?: boolean;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface ProductEditorBlockEditProps< T extends Record< string, any > >
- extends BlockEditProps< T > {
- readonly context: ProductEditorContext;
- readonly name: string;
-}
-
-export interface ProductEditorBlockAttributes extends BlockAttributes {
- _templateBlockId?: string;
-}
-
-export interface Metadata< T > {
- id?: number;
- key: string;
- value?: T;
-}
-
-export interface Taxonomy {
- id: number;
- name: string;
- parent: number;
- meta?: Record< string, string >;
-}
-
-export interface TaxonomyMetadata {
- hierarchical: boolean;
-}
diff --git a/packages/js/product-editor/src/utils/constants.ts b/packages/js/product-editor/src/utils/constants.ts
deleted file mode 100644
index 6c0b603d436..00000000000
--- a/packages/js/product-editor/src/utils/constants.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
-export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';
-export const ONLY_ONE_DECIMAL_SEPARATOR = '[%s](?=%s*[%s])';
-// This should never be a real slug value of any existing shipping class
-export const ADD_NEW_SHIPPING_CLASS_OPTION_VALUE =
- '__ADD_NEW_SHIPPING_CLASS_OPTION__';
-export const UNCATEGORIZED_CATEGORY_SLUG = 'uncategorized';
-export const PRODUCT_VARIATION_TITLE_LIMIT = 32;
-export const STANDARD_RATE_TAX_CLASS_SLUG = 'standard';
-export const AUTO_DRAFT_NAME = 'AUTO-DRAFT';
diff --git a/packages/js/product-editor/src/utils/create-ordered-children.tsx b/packages/js/product-editor/src/utils/create-ordered-children.tsx
deleted file mode 100644
index 2d39b2b5c4f..00000000000
--- a/packages/js/product-editor/src/utils/create-ordered-children.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { isValidElement } from 'react';
-import { Fill } from '@wordpress/components';
-import { cloneElement, createElement } from '@wordpress/element';
-
-type ChildrenProps = {
- order: number;
-};
-
-/**
- * Returns an object with the children and props that will be used by `cloneElement`. They will change depending on the
- * type of children passed in.
- *
- * @param {Node} children - Node children.
- * @param {number} order - Node order.
- * @param {Array} props - Fill props.
- * @param {Object} injectProps - Props to inject.
- * @return {Object} Object with the keys: children and props.
- */
-function getChildrenAndProps<
- T = React.ComponentProps< typeof Fill >,
- S = Record< string, unknown >
->(
- children:
- | ( ( props: Record< string, unknown > ) => JSX.Element )
- | React.ReactNode,
- order: number,
- props: T,
- injectProps?: S
-) {
- if ( typeof children === 'function' ) {
- return {
- children: children( { ...props, order, ...injectProps } ),
- props: { order, ...injectProps },
- };
- } else if ( isValidElement( children ) ) {
- // This checks whether 'children' is a react element or a standard HTML element.
- if ( typeof children?.type === 'function' ) {
- return {
- children,
- props: {
- ...props,
- order,
- ...injectProps,
- },
- };
- }
- return {
- children: children as React.ReactElement< ChildrenProps >,
- props: { order, ...injectProps },
- };
- }
- throw Error( 'Invalid children type' );
-}
-
-/**
- * Ordered fill item.
- *
- * @param {Node} children - Node children.
- * @param {number} order - Node order.
- * @param {Array} props - Fill props.
- * @param {Object} injectProps - Props to inject.
- * @return {Node} Node.
- */
-function createOrderedChildren<
- T = React.ComponentProps< typeof Fill >,
- S = Record< string, unknown >
->(
- children: React.ReactNode,
- order: number,
- props: T,
- injectProps?: S
-): React.ReactElement {
- const { children: childrenToRender, props: propsToRender } =
- getChildrenAndProps( children, order, props, injectProps );
- return cloneElement( childrenToRender, propsToRender );
-}
-export { createOrderedChildren };
diff --git a/packages/js/product-editor/src/utils/date/format-schedule-datetime.ts b/packages/js/product-editor/src/utils/date/format-schedule-datetime.ts
deleted file mode 100644
index 21ea7ee3ae9..00000000000
--- a/packages/js/product-editor/src/utils/date/format-schedule-datetime.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import {
- DateSettings,
- dateI18n,
- getDate,
- getSettings,
- isInTheFuture,
-} from '@wordpress/date';
-import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getSiteSettingsTimezoneAbbreviation } from './get-site-settings-timezone-abbreviation';
-import { isSameDay } from './is-same-day';
-import { isSiteSettingsTimezoneSameAsDateTimezone } from './is-site-settings-timezone-same-as-date-timezone';
-
-export const TIMEZONELESS_FORMAT = 'Y-m-d\\TH:i:s';
-
-export function getFormattedDateTime( value: string | Date, format?: string ) {
- const { formats } = getSettings() as DateSettings;
-
- const dateTimeFormat = sprintf(
- // translators: %s: Time of day the product is scheduled for.
- _x( 'F j, Y %s', 'product schedule full date format', 'woocommerce' ),
- formats.time
- );
-
- return dateI18n( format ?? dateTimeFormat, value, undefined );
-}
-
-export function getFullScheduleLabel( dateAttribute: string ) {
- const timezoneAbbreviation = getSiteSettingsTimezoneAbbreviation();
- const formattedDate = getFormattedDateTime( dateAttribute );
-
- return isRTL()
- ? `${ timezoneAbbreviation } ${ formattedDate }`
- : `${ formattedDate } ${ timezoneAbbreviation }`;
-}
-
-export function formatScheduleDatetime( dateAttribute: string ) {
- const { formats } = getSettings() as DateSettings;
- const date = getDate( dateAttribute );
- const now = getDate( null );
-
- if ( isSameDay( date, now ) && ! isInTheFuture( dateAttribute ) ) {
- return __( 'Immediately', 'woocommerce' );
- }
-
- // If the user timezone does not equal the site timezone then using words
- // like 'tomorrow' is confusing, so show the full date.
- if ( ! isSiteSettingsTimezoneSameAsDateTimezone( now ) ) {
- return getFullScheduleLabel( dateAttribute );
- }
-
- if ( isSameDay( date, now ) ) {
- return sprintf(
- // translators: %s: Time of day the product is scheduled for.
- __( 'Today at %s', 'woocommerce' ),
- getFormattedDateTime( dateAttribute, formats.time )
- );
- }
-
- const tomorrow = new Date( now );
- tomorrow.setDate( tomorrow.getDate() + 1 );
-
- if ( isSameDay( date, tomorrow ) ) {
- return sprintf(
- // translators: %s: Time of day the product is scheduled for.
- __( 'Tomorrow at %s', 'woocommerce' ),
- getFormattedDateTime( dateAttribute, formats.time )
- );
- }
-
- if ( date.getFullYear() === now.getFullYear() ) {
- return getFormattedDateTime(
- date,
- sprintf(
- // translators: %s: Time of day the product is scheduled for.
- _x(
- 'F j %s',
- 'product schedule date format without year',
- 'woocommerce'
- ),
- formats.time
- )
- );
- }
-
- return getFormattedDateTime( dateAttribute );
-}
diff --git a/packages/js/product-editor/src/utils/date/get-site-datetime.ts b/packages/js/product-editor/src/utils/date/get-site-datetime.ts
deleted file mode 100644
index 1cf98b8a251..00000000000
--- a/packages/js/product-editor/src/utils/date/get-site-datetime.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * External dependencies
- */
-import { date as formatDate, getDate } from '@wordpress/date';
-
-export function getSiteDatetime( value?: string ) {
- const datetime = getDate( value ?? null );
- return formatDate( 'Y-m-d\\TH:i:s', datetime, undefined );
-}
diff --git a/packages/js/product-editor/src/utils/date/get-site-settings-timezone-abbreviation.ts b/packages/js/product-editor/src/utils/date/get-site-settings-timezone-abbreviation.ts
deleted file mode 100644
index 9ca925fced0..00000000000
--- a/packages/js/product-editor/src/utils/date/get-site-settings-timezone-abbreviation.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { TimezoneConfig, getSettings } from '@wordpress/date';
-
-export function getSiteSettingsTimezoneAbbreviation() {
- const { timezone } = getSettings() as {
- timezone: TimezoneConfig & { offsetFormatted: string };
- };
-
- if ( timezone.abbr && isNaN( Number( timezone.abbr ) ) ) {
- return timezone.abbr;
- }
-
- const symbol = Number( timezone.offset ) < 0 ? '' : '+';
- return `UTC${ symbol }${ timezone.offsetFormatted ?? timezone.offset }`;
-}
diff --git a/packages/js/product-editor/src/utils/date/index.ts b/packages/js/product-editor/src/utils/date/index.ts
deleted file mode 100644
index 5b5e67e5c5d..00000000000
--- a/packages/js/product-editor/src/utils/date/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './format-schedule-datetime';
-export * from './get-site-datetime';
-export * from './get-site-settings-timezone-abbreviation';
-export * from './is-same-day';
-export * from './is-site-settings-time-12-hour-formatted';
-export * from './is-site-settings-timezone-same-as-date-timezone';
diff --git a/packages/js/product-editor/src/utils/date/is-same-day.ts b/packages/js/product-editor/src/utils/date/is-same-day.ts
deleted file mode 100644
index c3d5ac01e58..00000000000
--- a/packages/js/product-editor/src/utils/date/is-same-day.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function isSameDay( left: Date, right: Date ) {
- return (
- left.getDate() === right.getDate() &&
- left.getMonth() === right.getMonth() &&
- left.getFullYear() === right.getFullYear()
- );
-}
diff --git a/packages/js/product-editor/src/utils/date/is-site-settings-time-12-hour-formatted.ts b/packages/js/product-editor/src/utils/date/is-site-settings-time-12-hour-formatted.ts
deleted file mode 100644
index ca014da78b1..00000000000
--- a/packages/js/product-editor/src/utils/date/is-site-settings-time-12-hour-formatted.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { DateSettings, getSettings } from '@wordpress/date';
-
-export function isSiteSettingsTime12HourFormatted() {
- const settings = getSettings() as DateSettings;
-
- return /a(?!\\)/i.test(
- settings.formats.time
- .toLowerCase()
- .replace( /\\\\/g, '' )
- .split( '' )
- .reverse()
- .join( '' )
- );
-}
diff --git a/packages/js/product-editor/src/utils/date/is-site-settings-timezone-same-as-date-timezone.ts b/packages/js/product-editor/src/utils/date/is-site-settings-timezone-same-as-date-timezone.ts
deleted file mode 100644
index 2938211d862..00000000000
--- a/packages/js/product-editor/src/utils/date/is-site-settings-timezone-same-as-date-timezone.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { DateSettings, getSettings } from '@wordpress/date';
-
-export function isSiteSettingsTimezoneSameAsDateTimezone( date: Date ) {
- const { timezone } = getSettings() as DateSettings;
-
- const siteOffset = Number( timezone.offset );
- const dateOffset = -1 * ( date.getTimezoneOffset() / 60 );
- return siteOffset === dateOffset;
-}
diff --git a/packages/js/product-editor/src/utils/defer-select-in-focus.ts b/packages/js/product-editor/src/utils/defer-select-in-focus.ts
deleted file mode 100644
index 8f840918a14..00000000000
--- a/packages/js/product-editor/src/utils/defer-select-in-focus.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function deferSelectInFocus( element: HTMLInputElement ) {
- // In some browsers like safari .select() function inside
- // the onFocus event doesn't work as expected because it
- // conflicts with onClick the first time user click the
- // input. Using setTimeout defers the text selection and
- // avoid the unexpected behaviour.
- setTimeout(
- function deferSelection( originalElement: HTMLInputElement ) {
- if ( element.ownerDocument.activeElement === originalElement ) {
- // We still have focus, so select the content.
- originalElement.select();
- }
- },
- 0,
- element
- );
-}
diff --git a/packages/js/product-editor/src/utils/format-currency-display-value.ts b/packages/js/product-editor/src/utils/format-currency-display-value.ts
deleted file mode 100644
index 8950006929b..00000000000
--- a/packages/js/product-editor/src/utils/format-currency-display-value.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Internal dependencies
- */
-import { NUMBERS_AND_ALLOWED_CHARS } from './constants';
-
-type CurrencyConfig = {
- code: string;
- symbol: string;
- symbolPosition: string;
- decimalSeparator: string;
- priceFormat: string;
- thousandSeparator: string;
- precision: number;
-};
-
-/**
- * Cleans and formats the currency value shown to the user.
- *
- * @param {string} value Form value.
- * @param {Object} currencyConfig Currency context.
- * @return {string} Display value.
- */
-export const formatCurrencyDisplayValue = (
- value: string,
- currencyConfig: CurrencyConfig,
- format: ( number: number | string ) => string
-) => {
- const { decimalSeparator, thousandSeparator } = currencyConfig;
-
- const regex = new RegExp(
- NUMBERS_AND_ALLOWED_CHARS.replace( '%s1', decimalSeparator ).replace(
- '%s2',
- thousandSeparator
- ),
- 'g'
- );
-
- return value === undefined ? value : format( value ).replace( regex, '' );
-};
diff --git a/packages/js/product-editor/src/utils/format-product-error.ts b/packages/js/product-editor/src/utils/format-product-error.ts
deleted file mode 100644
index 6ac039c838b..00000000000
--- a/packages/js/product-editor/src/utils/format-product-error.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductStatus } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import type { WPError } from '../hooks/use-error-handler';
-
-export function formatProductError(
- error: WPError,
- productStatus: ProductStatus
-) {
- if ( error.code ) {
- return error;
- }
-
- const errorObj = Object.values( error ).find(
- ( value ) => value !== undefined
- ) as WPError | undefined;
-
- if ( 'variations' in error && error.variations ) {
- return {
- ...errorObj,
- code: 'variable_product_no_variation_prices',
- };
- }
-
- if ( errorObj !== undefined ) {
- return {
- ...errorObj,
- code: 'product_form_field_error',
- };
- }
-
- return {
- code:
- productStatus === 'publish' || productStatus === 'future'
- ? 'product_publish_error'
- : 'product_create_error',
- };
-}
diff --git a/packages/js/product-editor/src/utils/get-checkbox-tracks.ts b/packages/js/product-editor/src/utils/get-checkbox-tracks.ts
deleted file mode 100644
index 4e7d2536613..00000000000
--- a/packages/js/product-editor/src/utils/get-checkbox-tracks.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { ChangeEvent } from 'react';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Get additional props to be passed to all checkbox inputs.
- *
- * @param name Name of the checkbox.
- * @return Props.
- */
-export function getCheckboxTracks< T = Product >( name: string ) {
- return {
- onChange: (
- isChecked: ChangeEvent< HTMLInputElement > | T[ keyof T ]
- ) => {
- recordEvent( `product_checkbox_${ name }`, {
- checked: isChecked,
- } );
- },
- };
-}
diff --git a/packages/js/product-editor/src/utils/get-currency-symbol-props.ts b/packages/js/product-editor/src/utils/get-currency-symbol-props.ts
deleted file mode 100644
index 6064b28133d..00000000000
--- a/packages/js/product-editor/src/utils/get-currency-symbol-props.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-type CurrencyConfig = {
- code: string;
- symbol: string;
- symbolPosition: string;
- decimalSeparator: string;
- priceFormat: string;
- thousandSeparator: string;
- precision: number;
-};
-
-/**
- * Get input props for currency related values and symbol positions.
- *
- * @param {Object} currencyConfig - Currency context
- * @return {Object} Props.
- */
-export const getCurrencySymbolProps = ( currencyConfig: CurrencyConfig ) => {
- const { symbol, symbolPosition } = currencyConfig;
- const currencyPosition = symbolPosition.includes( 'left' )
- ? 'prefix'
- : 'suffix';
-
- return {
- [ currencyPosition ]: symbol,
- };
-};
diff --git a/packages/js/product-editor/src/utils/get-derived-product-type.ts b/packages/js/product-editor/src/utils/get-derived-product-type.ts
deleted file mode 100644
index 60ffbd6e73c..00000000000
--- a/packages/js/product-editor/src/utils/get-derived-product-type.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export const getDerivedProductType = ( product: Partial< Product > ) => {
- const hasOptions = !! product.attributes?.find(
- ( attribute ) => attribute.options.length && attribute.variation
- );
-
- if ( hasOptions ) {
- return 'variable';
- }
-
- return 'simple';
-};
diff --git a/packages/js/product-editor/src/utils/get-empty-state-names.ts b/packages/js/product-editor/src/utils/get-empty-state-names.ts
deleted file mode 100644
index cb2b5121bdc..00000000000
--- a/packages/js/product-editor/src/utils/get-empty-state-names.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Generates an array of sequentially numbered strings in the format "string number".
- *
- * @param name The base string to be used.
- * @param number The number of times the string should be repeated with an incremented number.
- * @return An array of formatted strings.
- */
-export function getEmptyStateSequentialNames(
- name: string,
- number: number
-): string[] {
- return Array( number )
- .fill( 0 )
- .map( ( _, index ) => `${ name } ${ index + 1 }` );
-}
diff --git a/packages/js/product-editor/src/utils/get-gutenberg-version.ts b/packages/js/product-editor/src/utils/get-gutenberg-version.ts
deleted file mode 100644
index f26b39da384..00000000000
--- a/packages/js/product-editor/src/utils/get-gutenberg-version.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { getSetting } from '@woocommerce/settings';
-
-export function getGutenbergVersion() {
- const adminSettings: { gutenberg_version?: string } = getSetting( 'admin' );
- if ( adminSettings.gutenberg_version ) {
- return parseFloat( adminSettings?.gutenberg_version );
- }
- return 0;
-}
diff --git a/packages/js/product-editor/src/utils/get-header-title.ts b/packages/js/product-editor/src/utils/get-header-title.ts
deleted file mode 100644
index 673c0dd89ef..00000000000
--- a/packages/js/product-editor/src/utils/get-header-title.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { AUTO_DRAFT_NAME } from './constants';
-
-/**
- * Get the header title using the product name.
- *
- * @param editedProductName Name value entered for the product.
- * @param initialProductName Name already persisted to the database.
- * @return The new title
- */
-export const getHeaderTitle = (
- editedProductName: string | undefined,
- initialProductName: string | undefined
-): string | undefined => {
- const isProductNameNotEmpty = Boolean( editedProductName );
- const isProductNameDirty = editedProductName !== initialProductName;
- const isCreating = initialProductName === AUTO_DRAFT_NAME;
-
- if ( isProductNameNotEmpty && isProductNameDirty ) {
- return editedProductName;
- }
-
- if ( isCreating ) {
- return __( 'Add new product', 'woocommerce' );
- }
-
- return initialProductName;
-};
diff --git a/packages/js/product-editor/src/utils/get-permalink-parts.ts b/packages/js/product-editor/src/utils/get-permalink-parts.ts
deleted file mode 100644
index 7be51c2eb45..00000000000
--- a/packages/js/product-editor/src/utils/get-permalink-parts.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-export type PermalinkParts = {
- prefix: string | undefined;
- postName: string | undefined;
- suffix: string | undefined;
-};
-
-export const getPermalinkParts = ( product: Product ): PermalinkParts => {
- let postName, prefix, suffix;
- if ( product && product.permalink_template ) {
- postName = product.slug || product.generated_slug;
- [ prefix, suffix ] = product.permalink_template.split(
- /%(?:postname|pagename)%/
- );
- }
- return {
- prefix,
- postName,
- suffix,
- };
-};
diff --git a/packages/js/product-editor/src/utils/get-product-status.ts b/packages/js/product-editor/src/utils/get-product-status.ts
deleted file mode 100644
index d5ddb33f7b7..00000000000
--- a/packages/js/product-editor/src/utils/get-product-status.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PartialProduct } from '@woocommerce/data';
-
-/**
- * Labels for product statuses.
- */
-export enum PRODUCT_STATUS_KEYS {
- unsaved = 'unsaved',
- draft = 'draft',
- instock = 'instock',
- outofstock = 'outofstock',
-}
-
-/**
- * Labels for product statuses.
- */
-export const PRODUCT_STATUS_LABELS = {
- [ PRODUCT_STATUS_KEYS.unsaved ]: __( 'Unsaved', 'woocommerce' ),
- [ PRODUCT_STATUS_KEYS.draft ]: __( 'Draft', 'woocommerce' ),
- [ PRODUCT_STATUS_KEYS.instock ]: __( 'In stock', 'woocommerce' ),
- [ PRODUCT_STATUS_KEYS.outofstock ]: __( 'Out of stock', 'woocommerce' ),
-};
-
-/**
- * Get the product status for use in the header.
- *
- * @param product Product instance.
- * @return {PRODUCT_STATUS_KEYS} Product status key.
- */
-export const getProductStatus = (
- product: PartialProduct | undefined
-): PRODUCT_STATUS_KEYS => {
- if ( ! product ) {
- return PRODUCT_STATUS_KEYS.unsaved;
- }
-
- if ( product.status === 'draft' ) {
- return PRODUCT_STATUS_KEYS.draft;
- }
-
- if ( product.stock_status === 'instock' ) {
- return PRODUCT_STATUS_KEYS.instock;
- }
-
- return PRODUCT_STATUS_KEYS.outofstock;
-};
diff --git a/packages/js/product-editor/src/utils/get-product-stock-status.ts b/packages/js/product-editor/src/utils/get-product-stock-status.ts
deleted file mode 100644
index 9cc8f5419f3..00000000000
--- a/packages/js/product-editor/src/utils/get-product-stock-status.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PartialProduct, ProductVariation } from '@woocommerce/data';
-
-/**
- * Labels for product stock statuses.
- */
-export enum PRODUCT_STOCK_STATUS_KEYS {
- instock = 'instock',
- onbackorder = 'onbackorder',
- outofstock = 'outofstock',
-}
-
-/**
- * Product stock status colors.
- */
-export enum PRODUCT_STOCK_STATUS_CLASSES {
- instock = 'green',
- onbackorder = 'yellow',
- outofstock = 'red',
-}
-
-/**
- * Labels for product stock statuses.
- */
-export const PRODUCT_STOCK_STATUS_LABELS = {
- [ PRODUCT_STOCK_STATUS_KEYS.instock ]: __( 'In stock', 'woocommerce' ),
- [ PRODUCT_STOCK_STATUS_KEYS.onbackorder ]: __(
- 'On backorder',
- 'woocommerce'
- ),
- [ PRODUCT_STOCK_STATUS_KEYS.outofstock ]: __(
- 'Out of stock',
- 'woocommerce'
- ),
-};
-
-/**
- * Get the product stock quantity or stock status label.
- *
- * @param product Product instance.
- * @return {PRODUCT_STOCK_STATUS_KEYS|number} Product stock quantity or product status key.
- */
-export const getProductStockStatus = (
- product: PartialProduct | Partial< ProductVariation >
-): string | number => {
- if ( product.manage_stock ) {
- return product.stock_quantity || 0;
- }
-
- if ( product.stock_status ) {
- return PRODUCT_STOCK_STATUS_LABELS[
- product.stock_status as PRODUCT_STOCK_STATUS_KEYS
- ];
- }
-
- return PRODUCT_STOCK_STATUS_LABELS.instock;
-};
-
-/**
- * Get the product stock status class.
- *
- * @param product Product instance.
- * @return {PRODUCT_STOCK_STATUS_CLASSES} Product stock status class.
- */
-export const getProductStockStatusClass = (
- product: PartialProduct | Partial< ProductVariation >
-): string => {
- if ( product.manage_stock ) {
- const stockQuantity: number = product.stock_quantity || 0;
- if ( stockQuantity >= 10 ) {
- return PRODUCT_STOCK_STATUS_CLASSES.instock;
- }
- if ( stockQuantity < 10 && stockQuantity > 2 ) {
- return PRODUCT_STOCK_STATUS_CLASSES.onbackorder;
- }
- return PRODUCT_STOCK_STATUS_CLASSES.outofstock;
- }
- return product.stock_status
- ? PRODUCT_STOCK_STATUS_CLASSES[
- product.stock_status as PRODUCT_STOCK_STATUS_KEYS
- ]
- : '';
-};
diff --git a/packages/js/product-editor/src/utils/get-product-title.ts b/packages/js/product-editor/src/utils/get-product-title.ts
deleted file mode 100644
index 4ac40537acc..00000000000
--- a/packages/js/product-editor/src/utils/get-product-title.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { AUTO_DRAFT_NAME } from './constants';
-
-/**
- * Get the product title for use in the header.
- *
- * @param name Name value entered for the product.
- * @param type Product type.
- * @param persistedName Name already persisted to the database.
- * @return string
- */
-export const getProductTitle = (
- name: string | undefined,
- type: string | undefined,
- persistedName: string | undefined
-) => {
- if ( name?.length ) {
- return name;
- }
-
- if ( persistedName && persistedName !== AUTO_DRAFT_NAME ) {
- return persistedName;
- }
-
- switch ( type ) {
- case 'simple':
- return __( 'New standard product', 'woocommerce' );
- default:
- return __( 'New product', 'woocommerce' );
- }
-};
diff --git a/packages/js/product-editor/src/utils/get-product-variation-title.ts b/packages/js/product-editor/src/utils/get-product-variation-title.ts
deleted file mode 100644
index 97f62fb18bd..00000000000
--- a/packages/js/product-editor/src/utils/get-product-variation-title.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductVariation } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { PRODUCT_VARIATION_TITLE_LIMIT } from './constants';
-
-/**
- * Get the product variation title for use in the header.
- *
- * @param productVariation The product variation.
- * @return string
- */
-export const getProductVariationTitle = (
- productVariation: Partial< ProductVariation >
-) => {
- if ( ! productVariation?.attributes?.length ) {
- return '#' + productVariation.id;
- }
-
- return productVariation.attributes
- .map( ( attribute ) => {
- return attribute.option;
- } )
- .join( ', ' );
-};
-
-/**
- * Get the truncated product variation title.
- *
- * @param productVariation The product variation.
- * @return string
- */
-export const getTruncatedProductVariationTitle = (
- productVariation: Partial< ProductVariation >
-) => {
- const title = getProductVariationTitle( productVariation );
-
- if ( title.length > PRODUCT_VARIATION_TITLE_LIMIT ) {
- return title.substring( 0, PRODUCT_VARIATION_TITLE_LIMIT ) + '…';
- }
-
- return title;
-};
diff --git a/packages/js/product-editor/src/utils/get-related-products/Readme.md b/packages/js/product-editor/src/utils/get-related-products/Readme.md
deleted file mode 100644
index eaa002de635..00000000000
--- a/packages/js/product-editor/src/utils/get-related-products/Readme.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Get Related Products
-
-Helper function to retrieve related products for a given product.
-
-## Usage
-
-`getRelatedProducts` is an asynchronous function that returns related products for a specified product ID.
-If no related products are found, and the `fallbackToRandomProducts` flag is set to `true`, it returns a random set of products.
-
-### Syntax
-
-```es6
-getRelatedProducts( productId, options )
-```
-
-#### Parameters
-
-- `productId` (number): The ID of the product for which related products are to be fetched.
-- `options` (Object): An object containing the following property:
-+ `fallbackToRandomProducts` (boolean): Optional. If set to `true`, the function will return random products if no related products are found. Default is `false`.
-
-#### Return
-
-- Promise<Product[] | undefined>: A promise that resolves to an array of related products or `undefined` if none are found and `fallbackToRandomProducts` is `false`.
-
-### Example
-
-```javascript
-import getRelatedProducts from './path-to-getRelatedProducts';
-
-getRelatedProducts( 123, { fallbackToRandomProducts: true } )
- .then( relatedProducts => {
- console.log( relatedProducts );
- } )
- .catch( error => {
- console.error( 'Error fetching related products:', error );
- } );
-```
diff --git a/packages/js/product-editor/src/utils/get-related-products/index.ts b/packages/js/product-editor/src/utils/get-related-products/index.ts
deleted file mode 100644
index fe245656bd3..00000000000
--- a/packages/js/product-editor/src/utils/get-related-products/index.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import { select, resolveSelect, dispatch } from '@wordpress/data';
-import { productsStore } from '@woocommerce/data';
-import type { PartialProduct, Product } from '@woocommerce/data';
-
-type getRelatedProductsOptions = {
- // If true, return random products if no related products are found.
- fallbackToRandomProducts?: boolean;
-};
-
-const POSTS_NUMBER_TO_RANDOMIZE = 30;
-const POSTS_NUMBER_TO_PICK = 3;
-const POSTS_NUMBER_TO_DISPLAY = 4;
-
-/**
- * Return related products for a given product ID.
- * If fallbackToRandomProducts is true,
- * return random products if no related products are found.
- *
- * @param {number} productId - Product ID.
- * @param {getRelatedProductsOptions} options - Options.
- * @return {Promise<Product[] | undefined>} Related products.
- */
-export default async function getRelatedProducts(
- productId: number,
- options: getRelatedProductsOptions = {}
-): Promise< Product[] | undefined > {
- const { getEntityRecord } = select( 'core' );
- const product: Product | undefined = getEntityRecord(
- 'postType',
- 'product',
- productId
- );
- if ( ! product ) {
- return;
- }
-
- let relatedProductIds = product?.related_ids;
- if ( ! relatedProductIds?.length ) {
- if ( ! options?.fallbackToRandomProducts ) {
- return;
- }
-
- // Pick the last `POSTS_NUMBER_TO_RANDOMIZE` posts
- const lastPost = ( await resolveSelect( 'core' ).getEntityRecords(
- 'postType',
- 'product',
- {
- _fields: [ 'id' ],
- per_page: POSTS_NUMBER_TO_RANDOMIZE,
- }
- ) ) as Product[];
-
- if ( ! lastPost?.length ) {
- return;
- }
-
- const lastPostIds = lastPost.map( ( post ) => post.id );
-
- // Pick POSTS_NUMBER_TO_PICK random post IDs
- relatedProductIds = lastPostIds
- .sort( () => Math.random() - 0.5 )
- .slice( 0, POSTS_NUMBER_TO_PICK );
- }
-
- return ( await resolveSelect( 'core' ).getEntityRecords(
- 'postType',
- 'product',
- {
- include: relatedProductIds,
- }
- ) ) as Product[];
-}
-
-type getSuggestedProductsForOptions = {
- postId: number;
- postType?: 'product' | 'post' | 'page';
- forceRequest?: boolean;
- exclude?: number[];
-};
-
-/**
- * Get suggested products for a given post ID.
- *
- *
- * @param { getSuggestedProductsForOptions } options - Options.
- * @return { Promise<Product[] | undefined> } Suggested products.
- */
-export async function getSuggestedProductsFor( {
- postId,
- postType = 'product',
- forceRequest = false,
- exclude = [],
-}: getSuggestedProductsForOptions ): Promise< PartialProduct[] | undefined > {
- const { getEditedEntityRecord } = select( 'core' );
-
- // @ts-expect-error getEditedEntityRecord's curried form strips its generic, returning a wide entity union; Product is the correct narrow type.
- const data: Product = getEditedEntityRecord( 'postType', postType, postId );
-
- const options = {
- categories: data?.categories
- ? data.categories.map( ( cat ) => cat.id )
- : [],
- // @ts-expect-error Product inherits `tags: number[]` from Post, shadowing WooCommerce's `tags: Pick<ProductTag,'id'|'name'>[]` (see products/types.ts).
- tags: data?.tags ? data.tags.map( ( tag ) => tag.id ) : [],
- exclude: exclude?.length ? exclude : [ postId ],
- limit: POSTS_NUMBER_TO_DISPLAY,
- };
-
- if ( forceRequest ) {
- await dispatch( productsStore ).invalidateResolution(
- 'getSuggestedProducts',
- [ options ]
- );
- }
-
- return await resolveSelect( productsStore ).getSuggestedProducts( options );
-}
diff --git a/packages/js/product-editor/src/utils/handle-confirm.ts b/packages/js/product-editor/src/utils/handle-confirm.ts
deleted file mode 100644
index 726f5fc2121..00000000000
--- a/packages/js/product-editor/src/utils/handle-confirm.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export type HandleConfirmProps = {
- message?: string;
- onOk(): void;
- onCancel?(): void;
-};
-
-export async function handleConfirm( {
- message = __( 'Are you sure?', 'woocommerce' ),
- onOk,
- onCancel,
-}: HandleConfirmProps ) {
- // eslint-disable-next-line no-alert
- if ( window.confirm( message ) ) {
- onOk?.();
- return;
- }
-
- onCancel?.();
-}
diff --git a/packages/js/product-editor/src/utils/handle-prompt.ts b/packages/js/product-editor/src/utils/handle-prompt.ts
deleted file mode 100644
index 055c2197ca4..00000000000
--- a/packages/js/product-editor/src/utils/handle-prompt.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export type HandlePromptProps = {
- message?: string;
- defaultValue?: string;
- onOk( value: string ): void;
- onCancel?(): void;
-};
-
-export async function handlePrompt( {
- message = __( 'Enter a value', 'woocommerce' ),
- defaultValue,
- onOk,
- onCancel,
-}: HandlePromptProps ) {
- // eslint-disable-next-line no-alert
- const value = window.prompt( message, defaultValue );
-
- if ( value === null ) {
- onCancel?.();
- return;
- }
-
- onOk( value );
-}
diff --git a/packages/js/product-editor/src/utils/has-attributes-used-for-variations.ts b/packages/js/product-editor/src/utils/has-attributes-used-for-variations.ts
deleted file mode 100644
index d7b19f17b86..00000000000
--- a/packages/js/product-editor/src/utils/has-attributes-used-for-variations.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-/**
- * Determine if any attribute in the list is used for variations.
- *
- * @param {Array} attributeList - List of product attributes.
- * @return {boolean} True if any attribute is used for variations.
- */
-export const hasAttributesUsedForVariations = (
- attributeList: Product[ 'attributes' ]
-) => {
- if ( ! Array.isArray( attributeList ) || ! attributeList.length ) {
- return false;
- }
- return attributeList.some( ( { variation } ) => variation );
-};
diff --git a/packages/js/product-editor/src/utils/index.ts b/packages/js/product-editor/src/utils/index.ts
deleted file mode 100644
index 874b778f960..00000000000
--- a/packages/js/product-editor/src/utils/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Internal dependencies
- */
-import { AUTO_DRAFT_NAME } from './constants';
-import { deferSelectInFocus } from './defer-select-in-focus';
-import { formatCurrencyDisplayValue } from './format-currency-display-value';
-import { getCheckboxTracks } from './get-checkbox-tracks';
-import { getCurrencySymbolProps } from './get-currency-symbol-props';
-import { getDerivedProductType } from './get-derived-product-type';
-import { getHeaderTitle } from './get-header-title';
-import { getPermalinkParts } from './get-permalink-parts';
-import { getProductStatus, PRODUCT_STATUS_LABELS } from './get-product-status';
-import {
- getProductStockStatus,
- getProductStockStatusClass,
-} from './get-product-stock-status';
-import { getProductTitle } from './get-product-title';
-import { getEmptyStateSequentialNames } from './get-empty-state-names';
-import {
- getProductVariationTitle,
- getTruncatedProductVariationTitle,
-} from './get-product-variation-title';
-import { preventLeavingProductForm } from './prevent-leaving-product-form';
-import { hasAttributesUsedForVariations } from './has-attributes-used-for-variations';
-import { isValidEmail } from './validate-email';
-import { handlePrompt } from './handle-prompt';
-import { handleConfirm } from './handle-confirm';
-
-export * from './create-ordered-children';
-export * from './date';
-export * from './sort-fills-by-order';
-export * from './register-product-editor-block-type';
-export * from './init-block';
-export * from './product-apifetch-middleware';
-export * from './product-editor-header-apifetch-middleware';
-export * from './sift';
-export * from './truncate';
-
-export {
- AUTO_DRAFT_NAME,
- deferSelectInFocus,
- formatCurrencyDisplayValue,
- getCheckboxTracks,
- getCurrencySymbolProps,
- getDerivedProductType,
- getEmptyStateSequentialNames,
- getHeaderTitle,
- getPermalinkParts,
- getProductStatus,
- getProductStockStatus,
- getProductStockStatusClass,
- getProductTitle,
- getProductVariationTitle,
- getTruncatedProductVariationTitle,
- handleConfirm,
- handlePrompt,
- hasAttributesUsedForVariations,
- isValidEmail,
- preventLeavingProductForm,
- PRODUCT_STATUS_LABELS,
-};
diff --git a/packages/js/product-editor/src/utils/init-block.ts b/packages/js/product-editor/src/utils/init-block.ts
deleted file mode 100644
index 9b754c05dab..00000000000
--- a/packages/js/product-editor/src/utils/init-block.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { Block, BlockConfiguration } from '@wordpress/blocks';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import { registerProductEditorBlockType } from './register-product-editor-block-type';
-
-interface BlockRepresentation< T extends Record< string, object > > {
- name?: string;
- metadata: BlockConfiguration< T >;
- settings: Partial< BlockConfiguration< T > >;
-}
-
-/**
- * Function to register an individual block.
- *
- * @param block The block to be registered.
- * @return The block, if it has been successfully registered; otherwise `undefined`.
- */
-export function initBlock<
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- T extends Record< string, any > = Record< string, any >
->( block: BlockRepresentation< T > ): Block< T > | undefined {
- deprecated( 'initBlock()', {
- alternative: 'registerProductEditorBlockType()',
- version: '10.9.0',
- plugin: 'WooCommerce',
- hint: 'Product editor extension APIs are deprecated and will be removed in WooCommerce 11.0.',
- } );
-
- if ( ! block ) {
- return;
- }
-
- return registerProductEditorBlockType( block );
-}
diff --git a/packages/js/product-editor/src/utils/is-product-editor.ts b/packages/js/product-editor/src/utils/is-product-editor.ts
deleted file mode 100644
index 8f1e141ffaa..00000000000
--- a/packages/js/product-editor/src/utils/is-product-editor.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { getQuery } from '@woocommerce/navigation';
-
-export const isProductEditor = () => {
- const query: { page?: string; path?: string } = getQuery();
- return (
- query?.page === 'wc-admin' &&
- [ '/add-product', '/product/' ].some( ( path ) =>
- query?.path?.startsWith( path )
- )
- );
-};
diff --git a/packages/js/product-editor/src/utils/map-upload-image-to-image.ts b/packages/js/product-editor/src/utils/map-upload-image-to-image.ts
deleted file mode 100644
index 10b9d39da5b..00000000000
--- a/packages/js/product-editor/src/utils/map-upload-image-to-image.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export type UploadImage = {
- id?: number;
-} & Record< string, string >;
-
-export interface Image {
- id: number;
- src: string;
- name: string;
- alt: string;
-}
-
-/**
- * Converts an uploaded image into an Image object.
- */
-export function mapUploadImageToImage( upload: UploadImage ): Image | null {
- if ( ! upload.id ) return null;
- return {
- id: upload.id,
- name: upload.title,
- src: upload.url,
- alt: upload.alt,
- };
-}
diff --git a/packages/js/product-editor/src/utils/prevent-leaving-product-form.ts b/packages/js/product-editor/src/utils/prevent-leaving-product-form.ts
deleted file mode 100644
index ef64931fcea..00000000000
--- a/packages/js/product-editor/src/utils/prevent-leaving-product-form.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { Location } from 'react-router-dom';
-
-/**
- * Allow switching between tabs without prompting for unsaved changes.
- */
-export const preventLeavingProductForm =
- ( productId?: number ) => ( toUrl: URL, fromUrl: Location ) => {
- const toParams = new URLSearchParams( toUrl.search );
- const fromParams = new URLSearchParams( fromUrl.search );
- toParams.delete( 'tab' );
- fromParams.delete( 'tab' );
- // Prevent dialog from happening if moving from add new to edit page of same product.
- if (
- productId !== undefined &&
- fromParams.get( 'path' ) === '/add-product' &&
- toParams.get( 'path' ) === '/product/' + productId
- ) {
- return false;
- }
- return toParams.toString() !== fromParams.toString();
- };
diff --git a/packages/js/product-editor/src/utils/product-apifetch-middleware.ts b/packages/js/product-editor/src/utils/product-apifetch-middleware.ts
deleted file mode 100644
index 512960423a0..00000000000
--- a/packages/js/product-editor/src/utils/product-apifetch-middleware.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { getQuery } from '@woocommerce/navigation';
-
-/**
- * Internal dependencies
- */
-import { isProductEditor } from './is-product-editor';
-
-const routeMatchers = [
- {
- matcher: new RegExp( '^/wp/v2/product(?!_)' ),
- getReplaceString: (): string => '/wc/v3/products',
- },
- {
- matcher: new RegExp( '^/wp/v2/product_variation' ),
- replacement: '/wc/v3/products/0/variations',
- getReplaceString: (): string => {
- const query: { page?: string; path?: string } = getQuery();
- const variationMatcher = new RegExp(
- '/product/([0-9]+)/variation/([0-9]+)'
- );
- const matched = ( query.path || '' ).match( variationMatcher );
- if ( matched && matched.length === 3 ) {
- return '/wc/v3/products/' + matched[ 1 ] + '/variations';
- }
- return '/wc/v3/products/0/variations';
- },
- },
-];
-
-export const productApiFetchMiddleware = () => {
- // This is needed to ensure that we use the correct namespace for the entity data store
- // without disturbing the rest_namespace outside of the product block editor.
- apiFetch.use( ( options, next ) => {
- if ( options.path && isProductEditor() ) {
- for ( const { matcher, getReplaceString } of routeMatchers ) {
- if ( matcher.test( options.path ) ) {
- options.path = options.path.replace(
- matcher,
- getReplaceString()
- );
- break;
- }
- }
- }
- return next( options );
- } );
-};
diff --git a/packages/js/product-editor/src/utils/product-editor-header-apifetch-middleware.ts b/packages/js/product-editor/src/utils/product-editor-header-apifetch-middleware.ts
deleted file mode 100644
index 6f12864ff00..00000000000
--- a/packages/js/product-editor/src/utils/product-editor-header-apifetch-middleware.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import { isProductEditor } from './is-product-editor';
-
-export const productEditorHeaderApiFetchMiddleware = () => {
- // This is needed to ensure that we use the correct namespace for the entity data store
- // without disturbing the rest_namespace outside of the product block editor.
- apiFetch.use( ( options, next ) => {
- if ( isProductEditor() ) {
- options.headers = options.headers || {};
- options.headers[ 'X-Wc-From-Product-Editor' ] = '1';
- }
- return next( options );
- } );
-};
diff --git a/packages/js/product-editor/src/utils/record-product-event.ts b/packages/js/product-editor/src/utils/record-product-event.ts
deleted file mode 100644
index fe71d9b8134..00000000000
--- a/packages/js/product-editor/src/utils/record-product-event.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-const trackableProductValueKeyMap: Record< string, string > = {
- cross_sell_ids: 'cross_sells',
- reviews_allowed: 'enable_reviews',
- downloadable: 'is_downloadable',
- virtual: 'is_virtual',
- images: 'product_gallery',
- upsell_ids: 'upsells',
-};
-const potentialTrackableProductValueKeys = [
- 'attributes',
- 'categories',
- 'description',
- 'manage_stock',
- 'menu_order',
- 'note',
- 'purchase_note',
- 'sale_price',
- 'short_description',
- 'tags',
- 'weight',
- 'cross_sell_ids',
- 'reviews_allowed',
- 'downloadable',
- 'virtual',
- 'images',
- 'upsell_ids',
-];
-
-export function recordProductEvent(
- eventName: string,
- product: Pick< Product, 'id' | 'type' > & Partial< Product >
-) {
- const { id, type } = product;
-
- const eventProps: Record< string, string | number > = {
- product_id: id,
- source: 'product-blocks-editor-v1',
- product_type: type,
- };
-
- // @ts-expect-error @woocommerce/data's Product type is missing `parent_id` (see products/types.ts).
- if ( product.parent_id > 0 ) {
- // @ts-expect-error @woocommerce/data's Product type is missing `note` (see products/types.ts).
- product.note = product.description;
- delete product.description;
- }
-
- for ( const productValueKey of Object.keys( product ) ) {
- if ( potentialTrackableProductValueKeys.includes( productValueKey ) ) {
- const eventPropKey =
- trackableProductValueKeyMap[ productValueKey ] ||
- productValueKey;
- if (
- // @ts-expect-error Dynamic string indexing on Product is not supported until @woocommerce/data's Product type adds an index signature.
- Array.isArray( product[ productValueKey ] ) ||
- // @ts-expect-error Dynamic string indexing on Product is not supported until @woocommerce/data's Product type adds an index signature.
- typeof product[ productValueKey ] === 'string'
- ) {
- eventProps[ eventPropKey ] =
- // @ts-expect-error Dynamic string indexing on Product is not supported until @woocommerce/data's Product type adds an index signature.
- product[ productValueKey ].length ? 'yes' : 'no';
- } else {
- eventProps[ eventPropKey ] =
- // @ts-expect-error Dynamic string indexing on Product is not supported until @woocommerce/data's Product type adds an index signature.
- product[ productValueKey ] ? 'yes' : 'no';
- }
- }
- }
- if ( product.downloadable || product.virtual ) {
- const { downloadable, virtual } = product;
- const product_type_options = {
- virtual,
- downloadable,
- } as { [ key: string ]: boolean };
- eventProps.product_type_options = Object.keys( product_type_options )
- .filter( ( key ) => product_type_options[ key ] )
- .join( ',' );
- }
-
- if ( 'images' in product ) {
- // @ts-expect-error @woocommerce/data's Product type is missing `images` (see products/types.ts).
- eventProps.product_image = product.images.length ? 'yes' : 'no';
- }
-
- if ( product.dimensions ) {
- eventProps.dimensions =
- product.dimensions.length.length ||
- product.dimensions.width.length ||
- product.dimensions.height.length
- ? 'yes'
- : 'no';
- }
-
- recordEvent( eventName, eventProps );
-}
diff --git a/packages/js/product-editor/src/utils/register-product-editor-block-type.ts b/packages/js/product-editor/src/utils/register-product-editor-block-type.ts
deleted file mode 100644
index 4d375b9628f..00000000000
--- a/packages/js/product-editor/src/utils/register-product-editor-block-type.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import { Block, BlockConfiguration } from '@wordpress/blocks';
-import { registerWooBlockType } from '@woocommerce/block-templates';
-import { useEntityId } from '@wordpress/core-data';
-import deprecated from '@wordpress/deprecated';
-
-interface BlockRepresentation< T extends Record< string, object > > {
- name?: string;
- metadata: BlockConfiguration< T >;
- settings: Partial< BlockConfiguration< T > >;
-}
-
-// Define a more generic type for the select function to avoid TypeScript errors
-type SelectType = ( store: string ) => Record< string, unknown >;
-
-export function useEvaluationContext( context: Record< string, unknown > ) {
- const { postType } = context;
-
- const productId = useEntityId( 'postType', postType as string );
-
- const getEvaluationContext = ( select: SelectType ) => {
- const coreStore = select( 'core' ) as {
- getEditedEntityRecord: (
- kind: string,
- name: string,
- id: number
- ) => Record< string, unknown >;
- };
-
- const editedProduct = coreStore.getEditedEntityRecord(
- 'postType',
- postType as string,
- productId
- );
-
- return {
- ...context,
- editedProduct,
- };
- };
-
- return {
- getEvaluationContext,
- };
-}
-
-function augmentUsesContext( usesContext?: string[] ) {
- // Note: If you modify this function, also update the server-side
- // Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry::augment_uses_context() function.
- return [ ...( usesContext || [] ), 'postType' ];
-}
-
-/**
- * Register a block type for the product editor.
- *
- * @deprecated since WooCommerce 10.9.0. Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-export function registerProductEditorBlockType<
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- T extends Record< string, any > = Record< string, any >
->( block: BlockRepresentation< T > ): Block< T > | undefined {
- deprecated( 'registerProductEditorBlockType()', {
- version: '10.9.0',
- plugin: 'WooCommerce',
- hint: 'Product editor extension APIs are deprecated and will be removed in WooCommerce 11.0.',
- } );
-
- const { metadata, settings, name } = block;
-
- const augmentedMetadata = {
- ...metadata,
- usesContext: augmentUsesContext( metadata.usesContext ),
- };
-
- return registerWooBlockType(
- {
- name,
- metadata: augmentedMetadata,
- settings,
- },
- useEvaluationContext
- );
-}
diff --git a/packages/js/product-editor/src/utils/sift.ts b/packages/js/product-editor/src/utils/sift.ts
deleted file mode 100644
index bb01cd60aa6..00000000000
--- a/packages/js/product-editor/src/utils/sift.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-type SiftResult< T > = [ T[], T[] ];
-
-/**
- * Similar to filter, but return two arrays separated by a partitioner function
- *
- * @param {Array} arr - Original array of values.
- * @param {Function} partitioner - Function to return truthy/falsy values to separate items in array.
- *
- * @return {Array} - Array of two arrays, first including truthy values, and second including falsy.
- */
-export const sift = < T >(
- arr: Array< T >,
- partitioner: ( item: T ) => boolean
-): SiftResult< T > =>
- arr.reduce< SiftResult< T > >(
- ( all, item ) => {
- all[ !! partitioner( item ) ? 0 : 1 ].push( item );
- return all;
- },
- [ [], [] ]
- );
diff --git a/packages/js/product-editor/src/utils/sort-fills-by-order.tsx b/packages/js/product-editor/src/utils/sort-fills-by-order.tsx
deleted file mode 100644
index b1f99760df2..00000000000
--- a/packages/js/product-editor/src/utils/sort-fills-by-order.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { Fragment } from 'react';
-import { createElement } from '@wordpress/element';
-
-type Fills = Array< Array< React.ReactElement > >;
-
-export const sortFillsByOrder = ( fills: Fills ): React.ReactElement => {
- // Copy fills array here because its type is readonly array that doesn't have .sort method in Typescript definition.
- const sortedFills = [ ...fills ].sort( ( a, b ) => {
- return a[ 0 ].props.order - b[ 0 ].props.order;
- } );
-
- return <Fragment>{ sortedFills }</Fragment>;
-};
diff --git a/packages/js/product-editor/src/utils/test/get-derived-product-type.ts b/packages/js/product-editor/src/utils/test/get-derived-product-type.ts
deleted file mode 100644
index ecae318b8b6..00000000000
--- a/packages/js/product-editor/src/utils/test/get-derived-product-type.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getDerivedProductType } from '../get-derived-product-type';
-
-describe( 'getDerivedProductType', () => {
- it( 'should be simple when no attributes exist', () => {
- const type = getDerivedProductType( {
- id: 123,
- attributes: [],
- } );
- expect( type ).toBe( 'simple' );
- } );
-
- it( 'should be simple when no attributes used for variations exist', () => {
- const type = getDerivedProductType( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- options: [ 'Red', 'Blue' ],
- position: 0,
- variation: false,
- visible: true,
- slug: 'color',
- },
- ],
- } );
- expect( type ).toBe( 'simple' );
- } );
-
- it( 'should be simple when no options exist for a variation', () => {
- const type = getDerivedProductType( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- options: [],
- position: 0,
- variation: true,
- visible: true,
- slug: 'color',
- },
- ],
- } );
- expect( type ).toBe( 'simple' );
- } );
-
- it( 'should be variable when at least one attribute can be used for variations', () => {
- const type = getDerivedProductType( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Size',
- options: [ 'Small', 'Medium' ],
- position: 0,
- variation: false,
- visible: true,
- slug: 'size',
- },
- {
- id: 0,
- name: 'Color',
- options: [ 'Red', 'Blue' ],
- position: 1,
- variation: true,
- visible: true,
- slug: 'color',
- },
- ],
- } );
- expect( type ).toBe( 'variable' );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/test/get-product-status.ts b/packages/js/product-editor/src/utils/test/get-product-status.ts
deleted file mode 100644
index 4696e6af99f..00000000000
--- a/packages/js/product-editor/src/utils/test/get-product-status.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getProductStatus } from '../get-product-status';
-
-describe( 'getProductStatus', () => {
- it( 'should return unsaved when no product exists', () => {
- const status = getProductStatus( undefined );
- expect( status ).toBe( 'unsaved' );
- } );
-
- it( 'should return draft when the status is set to draft', () => {
- const status = getProductStatus( {
- id: 123,
- status: 'draft',
- stock_status: 'instock',
- } );
- expect( status ).toBe( 'draft' );
- } );
-
- it( 'should return draft when the status is set to draft', () => {
- const status = getProductStatus( {
- id: 123,
- status: 'publish',
- stock_status: 'instock',
- } );
- expect( status ).toBe( 'instock' );
- } );
-
- it( 'should return draft when the status is set to draft', () => {
- const status = getProductStatus( {
- id: 123,
- status: 'publish',
- stock_status: 'outofstock',
- } );
- expect( status ).toBe( 'outofstock' );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/test/get-product-stock-status.test.ts b/packages/js/product-editor/src/utils/test/get-product-stock-status.test.ts
deleted file mode 100644
index 03e6373f21f..00000000000
--- a/packages/js/product-editor/src/utils/test/get-product-stock-status.test.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * External dependencies
- */
-import { PartialProduct } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import {
- getProductStockStatus,
- getProductStockStatusClass,
-} from '../get-product-stock-status';
-
-const products = [
- {
- status: 'publish',
- } as PartialProduct,
- {
- status: 'publish',
- stock_status: 'outofstock',
- } as PartialProduct,
- {
- manage_stock: true,
- stock_quantity: 15,
- status: 'publish',
- stock_status: 'instock',
- } as PartialProduct,
- {
- manage_stock: true,
- status: 'publish',
- stock_status: 'instock',
- } as PartialProduct,
- {
- manage_stock: true,
- stock_quantity: 5,
- status: 'publish',
- stock_status: 'instock',
- } as PartialProduct,
- {
- manage_stock: true,
- stock_quantity: 1,
- status: 'publish',
- stock_status: 'instock',
- } as PartialProduct,
- {
- manage_stock: false,
- status: 'publish',
- stock_status: 'instock',
- } as PartialProduct,
- {
- manage_stock: false,
- status: 'publish',
- stock_status: 'onbackorder',
- } as PartialProduct,
- {
- manage_stock: false,
- status: 'publish',
- stock_status: 'outofstock',
- } as PartialProduct,
-];
-
-describe( 'getProductStockStatus', () => {
- it( 'should return `In stock` status when the stock is not being managed and there is no stock status', () => {
- const status = getProductStockStatus( products[ 0 ] );
- expect( status ).toBe( 'In stock' );
- } );
-
- it( 'should return the stock status when there is a stock status and the stock is not being managed', () => {
- const status = getProductStockStatus( products[ 1 ] );
- expect( status ).toBe( 'Out of stock' );
- } );
-
- it( 'should return the stock quantity when the stock is being managed', () => {
- const status = getProductStockStatus( products[ 2 ] );
- expect( status ).toBe( 15 );
- } );
-
- it( 'should return stock quantity = 0 when the stock is being managed but there is no a stock quantity', () => {
- const status = getProductStockStatus( products[ 3 ] );
- expect( status ).toBe( 0 );
- } );
-} );
-
-describe( 'getProductStockStatusClass', () => {
- it( 'should return an empty string when the stock is not being managed and there is no stock status', () => {
- const status = getProductStockStatusClass( products[ 0 ] );
- expect( status ).toBe( '' );
- } );
-
- it( 'should return `green` when the stock is being managed and the stock quantity is higher or equal than 10', () => {
- const status = getProductStockStatusClass( products[ 2 ] );
- expect( status ).toBe( 'green' );
- } );
-
- it( 'should return `yellow` when the stock is being managed and the stock quantity is lower than 10 but higher than 2', () => {
- const status = getProductStockStatusClass( products[ 4 ] );
- expect( status ).toBe( 'yellow' );
- } );
-
- it( 'should return `red` when the stock is being managed and the stock quantity is lower or equal than 2', () => {
- const status = getProductStockStatusClass( products[ 5 ] );
- expect( status ).toBe( 'red' );
- } );
-
- it( 'should return `red` when the stock is being managed but there is no a stock quantity', () => {
- const status = getProductStockStatusClass( products[ 3 ] );
- expect( status ).toBe( 'red' );
- } );
-
- it( 'should return `green` when the stock is not being managed and the stock status is `instock`', () => {
- const status = getProductStockStatusClass( products[ 6 ] );
- expect( status ).toBe( 'green' );
- } );
-
- it( 'should return `yellow` when the stock is not being managed and the stock status is `onbackorder`', () => {
- const status = getProductStockStatusClass( products[ 7 ] );
- expect( status ).toBe( 'yellow' );
- } );
-
- it( 'should return `red` when the stock is not being managed and the stock status is `outofstock`', () => {
- const status = getProductStockStatusClass( products[ 8 ] );
- expect( status ).toBe( 'red' );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/test/get-product-title.test.ts b/packages/js/product-editor/src/utils/test/get-product-title.test.ts
deleted file mode 100644
index c132b16c7ec..00000000000
--- a/packages/js/product-editor/src/utils/test/get-product-title.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getProductTitle } from '../get-product-title';
-
-describe( 'getProductTitle', () => {
- it( 'should return the product name when one has been entered', () => {
- const title = getProductTitle( 'Fancy pants', 'simple', undefined );
- expect( title ).toBe( 'Fancy pants' );
- } );
-
- it( 'should return the entered product name when a persisted name exists', () => {
- const title = getProductTitle( 'Fancy pants', 'simple', 'Saved name' );
- expect( title ).toBe( 'Fancy pants' );
- } );
-
- it( 'should return the persisted name when no name is given', () => {
- const title = getProductTitle( '', 'simple', 'Saved name' );
- expect( title ).toBe( 'Saved name' );
- } );
-
- it( 'should return the product type add new string when set', () => {
- const title = getProductTitle( '', 'simple', undefined );
- expect( title ).toBe( 'New standard product' );
- } );
-
- it( 'should return the generic add new string when no type matches', () => {
- const title = getProductTitle( '', 'custom-type', undefined );
- expect( title ).toBe( 'New product' );
- } );
-
- it( 'should return the generic add new string when the product title is the auto draft title', () => {
- const title = getProductTitle( '', 'custom-type', 'AUTO-DRAFT' );
- expect( title ).toBe( 'New product' );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/test/get-product-variation-title.ts b/packages/js/product-editor/src/utils/test/get-product-variation-title.ts
deleted file mode 100644
index 10f3b4e26e0..00000000000
--- a/packages/js/product-editor/src/utils/test/get-product-variation-title.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
- getProductVariationTitle,
- getTruncatedProductVariationTitle,
-} from '../get-product-variation-title';
-
-describe( 'getProductVariationTitle', () => {
- it( 'should return the product variation options in a comma separated list', () => {
- const title = getProductVariationTitle( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- option: 'Red',
- slug: 'red',
- },
- {
- id: 0,
- name: 'Size',
- option: 'Medium',
- slug: 'medium',
- },
- ],
- } );
- expect( title ).toBe( 'Red, Medium' );
- } );
-
- it( 'should return the only product variation attribute option name', () => {
- const title = getProductVariationTitle( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- option: 'Blue',
- slug: 'blue',
- },
- ],
- } );
- expect( title ).toBe( 'Blue' );
- } );
-
- it( 'should return the product variation id when no attributes exist', () => {
- const title = getProductVariationTitle( {
- id: 123,
- attributes: [],
- } );
- expect( title ).toBe( '#123' );
- } );
-} );
-
-describe( 'getTruncatedProductVariationTitle', () => {
- it( 'should return the default product variation title when the limit is not met', () => {
- const truncatedTitle = getTruncatedProductVariationTitle( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- option: 'Red',
- slug: 'red',
- },
- {
- id: 0,
- name: 'Size',
- option: 'Medium',
- slug: 'medium',
- },
- ],
- } );
- expect( truncatedTitle ).toBe( 'Red, Medium' );
- } );
-
- it( 'should return the truncated product title when the limit is reached', () => {
- const truncatedTitle = getTruncatedProductVariationTitle( {
- id: 123,
- attributes: [
- {
- id: 0,
- name: 'Color',
- option: 'Reddish',
- slug: 'reddish',
- },
- {
- id: 0,
- name: 'Size',
- option: 'MediumLargeSmallishTypeOfSize',
- slug: 'mediumlargesmallishtypeofsize',
- },
- ],
- } );
- expect( truncatedTitle ).toBe( 'Reddish, MediumLargeSmallishType…' );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/test/prevent-leaving-product-form.test.ts b/packages/js/product-editor/src/utils/test/prevent-leaving-product-form.test.ts
deleted file mode 100644
index 33227d66035..00000000000
--- a/packages/js/product-editor/src/utils/test/prevent-leaving-product-form.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import { Location } from 'react-router-dom';
-
-/**
- * Internal dependencies
- */
-import { preventLeavingProductForm } from '../prevent-leaving-product-form';
-
-describe( 'preventLeavingProductForm', () => {
- it( 'should allow leaving when the paths are identical', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/123&tab=general'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/product/123&tab=general',
- } as Location;
- const shouldPrevent = preventLeavingProductForm()( toUrl, fromUrl );
- expect( shouldPrevent ).toBe( true );
- } );
-
- it( 'should prevent leaving when the paths are different', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/456&tab=general'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/product/123&tab=general',
- } as Location;
- const shouldPrevent = preventLeavingProductForm()( toUrl, fromUrl );
- expect( shouldPrevent ).toBe( true );
- } );
-
- it( 'should allow leaving when the paths are the same but the tab is different', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/123&tab=general'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/product/123&tab=shipping',
- } as Location;
- const shouldPrevent = preventLeavingProductForm()( toUrl, fromUrl );
- expect( shouldPrevent ).toBe( true );
- } );
-
- it( 'should allow leaving when moving from the add-product to the edit page with same product id', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/123&tab=general'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/add-product',
- } as Location;
- const shouldPrevent = preventLeavingProductForm( 123 )(
- toUrl,
- fromUrl
- );
- expect( shouldPrevent ).toBe( false );
- } );
-
- it( 'should not allow leaving when moving from the add-product to the edit page with different product id', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/123&tab=general'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/add-product',
- } as Location;
- const shouldPrevent = preventLeavingProductForm( 333 )(
- toUrl,
- fromUrl
- );
- expect( shouldPrevent ).toBe( true );
- } );
-
- it( 'should prevent leaving when non-tab params are different', () => {
- const toUrl = new URL(
- 'http://mysite.com/admin.php?page=wc-admin&path=/product/123&tab=general&other_param=a'
- );
- const fromUrl = {
- search: 'admin.php?page=wc-admin&path=/product/123&tab=shipping&other_param=b',
- } as Location;
- const shouldPrevent = preventLeavingProductForm()( toUrl, fromUrl );
- expect( shouldPrevent ).toBe( true );
- } );
-} );
diff --git a/packages/js/product-editor/src/utils/truncate.ts b/packages/js/product-editor/src/utils/truncate.ts
deleted file mode 100644
index 42b3760b32a..00000000000
--- a/packages/js/product-editor/src/utils/truncate.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function truncate( value: string, length: number ) {
- if ( value.length > length ) {
- return value.substring( 0, length ) + '…';
- }
-
- return value;
-}
diff --git a/packages/js/product-editor/src/utils/validate-email.ts b/packages/js/product-editor/src/utils/validate-email.ts
deleted file mode 100644
index 28288d0ea57..00000000000
--- a/packages/js/product-editor/src/utils/validate-email.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Checks if the provided email address is valid.
- *
- * @param {string} email - The email address to be tested.
- * @return {boolean} Returns true if the email address is valid.
- */
-export const isValidEmail = ( email: string ) => {
- const re =
- /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
- return re.test( String( email ).toLowerCase() );
-};
diff --git a/packages/js/product-editor/src/wp-hooks/hide-inventory-advanced-collapsible.tsx b/packages/js/product-editor/src/wp-hooks/hide-inventory-advanced-collapsible.tsx
deleted file mode 100644
index 9c63bf52842..00000000000
--- a/packages/js/product-editor/src/wp-hooks/hide-inventory-advanced-collapsible.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import type { BlockInstance } from '@wordpress/blocks';
-import { createElement } from '@wordpress/element';
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { evaluate } from '@woocommerce/expression-evaluation';
-
-/**
- * Internal dependencies
- */
-import { useEvaluationContext } from '../utils';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const areAllBlocksInvisible = ( blocks: BlockInstance[], context: any ) => {
- return blocks.every( ( block ) => {
- if (
- ! block.attributes?._templateBlockHideConditions ||
- ! Array.isArray( block.attributes?._templateBlockHideConditions )
- ) {
- return false;
- }
- return block.attributes._templateBlockHideConditions.some(
- ( condition ) => evaluate( condition.expression, context )
- );
- } );
-};
-
-const maybeHideInventoryAdvancedCollapsible = createHigherOrderComponent(
- ( BlockEdit ) => {
- return ( props ) => {
- const { hasInnerBlocks, allBlocksInvisible: blocksInvisible } =
- useSelect(
- ( select ) => {
- // bail early if not the product-inventory-advanced block
- if (
- ( props?.attributes as Record< string, string > )
- ?._templateBlockId !==
- 'product-inventory-advanced'
- ) {
- return {
- hasInnerBlocks: true,
- allBlocksInvisible: false,
- };
- }
- const evalContext = useEvaluationContext(
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- props.context as any
- );
- const advancedCollapsibleBlock = select(
- 'core/block-editor'
- ).getBlock( props?.clientId as string );
-
- let allBlocksInvisible = false;
- if ( advancedCollapsibleBlock?.innerBlocks?.length ) {
- const advancedSectionBlock =
- advancedCollapsibleBlock?.innerBlocks[ 0 ];
- allBlocksInvisible = areAllBlocksInvisible(
- advancedSectionBlock?.innerBlocks,
- evalContext.getEvaluationContext( select )
- );
- }
-
- return {
- hasInnerBlocks:
- !! advancedCollapsibleBlock?.innerBlocks
- ?.length,
- allBlocksInvisible,
- };
- },
- [ props.attributes, props.context, props.clientId ]
- );
-
- // No inner blocks, so we can render the default block edit.
- if ( ! hasInnerBlocks ) {
- return <BlockEdit { ...props } />;
- }
-
- if ( blocksInvisible ) {
- return null;
- }
-
- return <BlockEdit { ...props } />;
- };
- },
- 'maybeHideInventoryAdvancedCollapsible'
-);
-
-export default function () {
- addFilter(
- 'editor.BlockEdit',
- 'woocommerce/handle-hide-inventory-advanced-collapsible',
- maybeHideInventoryAdvancedCollapsible
- );
-}
diff --git a/packages/js/product-editor/src/wp-hooks/index.ts b/packages/js/product-editor/src/wp-hooks/index.ts
deleted file mode 100644
index 21389da4826..00000000000
--- a/packages/js/product-editor/src/wp-hooks/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import registerHideInventoryAdvancedCollapsible from './hide-inventory-advanced-collapsible';
-
-export default function registerProductEditorHooks() {
- registerHideInventoryAdvancedCollapsible();
-}
diff --git a/packages/js/product-editor/tsconfig.json b/packages/js/product-editor/tsconfig.json
deleted file mode 100644
index 76fe9472c41..00000000000
--- a/packages/js/product-editor/tsconfig.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
- "extends": "@woocommerce/internal-build/configs/tsconfig.json",
- "compilerOptions": {
- "rootDir": "src",
- "noCheck": false,
- "outDir": "build-module",
- "declaration": true,
- "declarationMap": true,
- "declarationDir": "./build-types",
- "resolveJsonModule": true,
- "typeRoots": [
- "./typings",
- "./node_modules/@types"
- ],
- "composite": true
- },
- "include": [
- "typings/**/*",
- "src/**/*",
- "src/**/*.json"
- ],
- "exclude": [
- "**/test/**",
- "**/stories/**"
- ],
- "references": [
- {
- "path": "../admin-layout"
- },
- {
- "path": "../block-templates"
- },
- {
- "path": "../components"
- },
- {
- "path": "../currency"
- },
- {
- "path": "../customer-effort-score"
- },
- {
- "path": "../data"
- },
- {
- "path": "../experimental"
- },
- {
- "path": "../expression-evaluation"
- },
- {
- "path": "../navigation"
- },
- {
- "path": "../number"
- },
- {
- "path": "../sanitize"
- },
- {
- "path": "../tracks"
- }
- ]
-}
diff --git a/packages/js/product-editor/typings/global.d.ts b/packages/js/product-editor/typings/global.d.ts
deleted file mode 100644
index 0c53a154565..00000000000
--- a/packages/js/product-editor/typings/global.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-declare global {
- interface Window {
- productBlockEditorSettings: {
- productTemplates: ProductTemplate[];
- maxUploadFileSize: number;
- };
- wcAdminFeatures: Record< string, boolean >;
- wcTracks: {
- isEnabled: boolean;
- validateEvent: ( name: string, properties: unknown ) => void;
- recordEvent: ( name: string, properties: unknown ) => void;
- };
- }
-}
-
-/*~ If your module exports nothing, you'll need this line. Otherwise, delete it */
-export {};
diff --git a/packages/js/product-editor/typings/index.d.ts b/packages/js/product-editor/typings/index.d.ts
deleted file mode 100644
index c50ddbb0b6d..00000000000
--- a/packages/js/product-editor/typings/index.d.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-declare module '@woocommerce/settings' {
- export declare function getAdminLink( path: string ): string;
- export declare function getSetting< T >(
- name: string,
- fallback?: unknown,
- filter = ( val: unknown, fb: unknown ) =>
- typeof val !== 'undefined' ? val : fb
- ): T;
- export declare function isWpVersion(
- version: string,
- operator: '>' | '>=' | '=' | '<' | '<='
- ): boolean;
-}
-
-declare module '@wordpress/keyboard-shortcuts' {
- function useShortcut(
- name: string,
- callback: ( event: KeyboardEvent ) => void
- ): void;
- const store;
-}
-
-declare module '@wordpress/router' {
- const privateApis;
-}
-
-declare module '@wordpress/edit-site/build-module/components/sync-state-with-url/use-init-edited-entity-from-url' {
- export default function useInitEditedEntityFromURL(): void;
-}
-
-declare module '@wordpress/edit-site/build-module/components/sidebar-navigation-screen' {
- const SidebarNavigationScreen: React.FunctionComponent< {
- title: string;
- isRoot: boolean;
- content: JSX.Element;
- } >;
- export default SidebarNavigationScreen;
-}
-
-declare module '@wordpress/edit-site/build-module/components/site-hub' {
- const SiteHub: React.FunctionComponent< {
- ref: React.Ref;
- isTransparent: boolean;
- } >;
- export default SiteHub;
-}
-
-declare module '@wordpress/interface/build-module/components/pinned-items' {
- const PinnedItems: React.FunctionComponent< {
- scope: string;
- children: React.ReactNode;
- } > & {
- Slot: React.FunctionComponent< {
- children?: React.ReactNode;
- scope: string;
- } >;
- };
- export default PinnedItems;
-}
-
-declare module '@wordpress/interface/build-module/components/action-item' {
- const ActionItem: React.FunctionComponent< {
- children: React.ReactNode;
- scope: string;
- } > & {
- Slot: React.FunctionComponent< {
- children?: React.ReactNode;
- name: string;
- label: string;
- as: React.ElementType;
- fillProps: Record< string, unknown >;
- } >;
- };
- export default ActionItem;
-}
-
-declare module '@wordpress/interface/build-module/components/interface-skeleton' {
- const InterfaceSkeleton: React.FunctionComponent< {
- children?: React.ReactNode;
- header?: React.ReactNode;
- content?: React.ReactNode;
- actions?: React.ReactNode;
- } >;
- export default InterfaceSkeleton;
-}
diff --git a/packages/js/product-editor/typings/monorepo-enhancements.d.ts b/packages/js/product-editor/typings/monorepo-enhancements.d.ts
deleted file mode 100644
index 96d21882977..00000000000
--- a/packages/js/product-editor/typings/monorepo-enhancements.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import '@woocommerce/internal-build/type-overrides/@wordpress/data';
-import '@woocommerce/internal-build/type-overrides/@wordpress/core-data';
-import '@woocommerce/internal-build/type-overrides/@wordpress/block-editor';
-import '@woocommerce/internal-build/type-overrides/@wordpress/editor';
-import '@woocommerce/internal-build/type-overrides/@wordpress/notices';
diff --git a/packages/js/product-editor/webpack.config.js b/packages/js/product-editor/webpack.config.js
deleted file mode 100644
index 1d29a3e722f..00000000000
--- a/packages/js/product-editor/webpack.config.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const path = require( 'path' );
-const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
-
-/**
- * Internal dependencies
- */
-const {
- webpackConfig,
- plugin,
- StyleAssetPlugin,
- WebpackRTLPlugin,
-} = require( '@woocommerce/internal-build/style-build' );
-const {
- blockEntryPoints,
- getBlockMetaData,
- getEntryPointName,
-} = require( './config/block-entry-points' );
-
-const NODE_ENV = process.env.NODE_ENV || 'development';
-
-module.exports = {
- mode: NODE_ENV,
- cache: ( process.env.CI && { type: 'memory' } ) || {
- type: 'filesystem',
- cacheDirectory: path.resolve(
- __dirname,
- 'node_modules/.cache/webpack'
- ),
- buildDependencies: {
- config: [
- __filename,
- path.resolve( __dirname, '../../../pnpm-lock.yaml' ),
- require.resolve( '@woocommerce/internal-build/style-build' ),
- ],
- },
- },
- entry: {
- 'build-style': __dirname + '/src/style.scss',
- ...blockEntryPoints,
- },
- output: {
- path: __dirname,
- },
- module: {
- parser: webpackConfig.parser,
- rules: webpackConfig.rules,
- },
- plugins: [
- new RemoveEmptyScriptsPlugin(),
- new plugin( {
- filename: ( data ) => {
- return data.chunk.name.startsWith( '/build/blocks' )
- ? `[name].css`
- : `[name]/style.css`;
- },
- chunkFilename: 'chunks/[id].style.css',
- } ),
- new WebpackRTLPlugin(),
- new CopyWebpackPlugin( {
- patterns: [
- {
- from: './src/**/block.json',
- to( { absoluteFilename } ) {
- const blockMetaData = getBlockMetaData(
- path.resolve( __dirname, absoluteFilename )
- );
- const entryPointName = getEntryPointName(
- absoluteFilename,
- blockMetaData
- );
- return `./${ entryPointName }`;
- },
- },
- ],
- } ),
- new StyleAssetPlugin(),
- ],
-};
diff --git a/plugins/woocommerce-beta-tester/changelog/remove-product-editor-devtools b/plugins/woocommerce-beta-tester/changelog/remove-product-editor-devtools
new file mode 100644
index 00000000000..2279d62f92d
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/changelog/remove-product-editor-devtools
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Remove product editor devtools for the deprecated product block editor.
diff --git a/plugins/woocommerce-beta-tester/includes/class-wc-beta-tester-product-editor-devtools.php b/plugins/woocommerce-beta-tester/includes/class-wc-beta-tester-product-editor-devtools.php
deleted file mode 100644
index af2822a8562..00000000000
--- a/plugins/woocommerce-beta-tester/includes/class-wc-beta-tester-product-editor-devtools.php
+++ /dev/null
@@ -1,68 +0,0 @@
-<?php
-/**
- * Beta Tester Plugin Product Editor Devtools feature class.
- *
- * @package WC_Beta_Tester
- */
-
-defined( 'ABSPATH' ) || exit;
-
-/**
- * WC_Beta_Tester Product Editor Devtools Feature Class.
- */
-class WC_Beta_Tester_Product_Editor_Devtools {
- /**
- * Constructor.
- */
- public function __construct() {
- add_action( 'admin_enqueue_scripts', array( $this, 'register_scripts' ) );
- }
-
- /**
- * Register product editor devtools scripts.
- */
- public function register_scripts() {
- if ( ! class_exists( 'WooCommerce' ) ) {
- return;
- }
-
- if ( ! class_exists( 'Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
- return;
- }
- if ( ! Automattic\WooCommerce\Utilities\FeaturesUtil::feature_is_enabled( 'product_block_editor' ) || ! \Automattic\WooCommerce\Admin\PageController::is_admin_page() ) {
- return;
- }
-
- $script_path = '/build/product-editor-devtools.js';
- $script_asset_path = dirname( __FILE__ ) . '/../build/product-editor-devtools.asset.php';
- $script_asset = file_exists( $script_asset_path )
- ? require $script_asset_path
- : array(
- 'dependencies' => array(),
- 'version' => filemtime( $script_path ),
- );
- $script_url = WC_Beta_Tester::instance()->plugin_url() . $script_path;
-
- wp_register_script(
- 'woocommerce-beta-tester-product-editor-devtools',
- $script_url,
- $script_asset['dependencies'],
- $script_asset['version'],
- true
- );
-
- wp_enqueue_script( 'woocommerce-beta-tester-product-editor-devtools' );
-
- $css_file_version = filemtime( dirname( __FILE__ ) . '/../build/product-editor-devtools.css' );
- wp_register_style(
- 'woocommerce-beta-tester-product-editor-devtools',
- plugins_url( '/../build/product-editor-devtools.css', __FILE__ ),
- array(),
- $css_file_version
- );
-
- wp_enqueue_style( 'woocommerce-beta-tester-product-editor-devtools' );
- }
-}
-
-return new WC_Beta_Tester_Product_Editor_Devtools();
diff --git a/plugins/woocommerce-beta-tester/package.json b/plugins/woocommerce-beta-tester/package.json
index dad07ac2ac1..45460e2f4e2 100644
--- a/plugins/woocommerce-beta-tester/package.json
+++ b/plugins/woocommerce-beta-tester/package.json
@@ -32,7 +32,6 @@
"@woocommerce/components": "workspace:*",
"@woocommerce/data": "workspace:*",
"@woocommerce/expression-evaluation": "workspace:*",
- "@woocommerce/product-editor": "workspace:*",
"@woocommerce/remote-logging": "workspace:*",
"@wordpress/api-fetch": "catalog:wp-min",
"@wordpress/block-editor": "catalog:wp-min",
diff --git a/plugins/woocommerce-beta-tester/src/features/index.js b/plugins/woocommerce-beta-tester/src/features/index.js
index 99c6b943b55..9423100ab18 100644
--- a/plugins/woocommerce-beta-tester/src/features/index.js
+++ b/plugins/woocommerce-beta-tester/src/features/index.js
@@ -23,12 +23,6 @@ function Features() {
const sortedFeatureNames = Object.keys( features ).sort();
- const afterToggleCallback = {
- 'product-block-editor': () => {
- window.location.reload();
- },
- };
-
return (
<div id="wc-admin-test-helper-features">
<h2>
@@ -51,7 +45,6 @@ function Features() {
checked={ features[ feature_name ] }
onChange={ async () => {
await toggleFeature( feature_name );
- afterToggleCallback[ feature_name ]?.();
} }
/>
</li>
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx
deleted file mode 100644
index 4bfd0a4ec3f..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { TabPanel } from './tab-panel';
-
-export function BlockInspectorTabPanel( {
- isSelected,
- selectedBlock,
-}: {
- isSelected: boolean;
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- selectedBlock: any;
-} ) {
- return (
- <TabPanel isSelected={ isSelected }>
- <div className="woocommerce-product-editor-dev-tools-block-inspector">
- { ! selectedBlock && (
- <p>
- { __(
- 'Focus on a block to see its details.',
- 'woocommerce'
- ) }
- </p>
- ) }
-
- { selectedBlock && (
- <div>{ JSON.stringify( selectedBlock, null, 4 ) }</div>
- ) }
- </div>
- </TabPanel>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-field.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-field.tsx
deleted file mode 100644
index 1bde26fa16d..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-field.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * External dependencies
- */
-import { Button } from '@wordpress/components';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { check, closeSmall, edit, trash } from '@wordpress/icons';
-import { evaluate } from '@woocommerce/expression-evaluation';
-
-/**
- * Internal dependencies
- */
-import { ExpressionResult } from './expression-result';
-import { ExpressionTextArea } from './expression-text-area';
-
-function evaluateExpression(
- expression: string,
- evaluationContext: object | undefined
-) {
- let result;
- let error;
-
- try {
- result = evaluate( expression, evaluationContext );
- } catch ( e ) {
- error = e;
- }
-
- return {
- result,
- error,
- };
-}
-
-type ExpressionFieldProps = {
- expression?: string;
- evaluationContext?: object;
- mode?: 'view' | 'edit';
- onEnterEdit?: () => void;
- onUpdate?: ( expression: string ) => void;
- onCancel?: () => void;
- onRemove?: () => void;
- updateLabel?: string;
-};
-
-export function ExpressionField( {
- expression = '',
- evaluationContext,
- mode = 'view',
- onEnterEdit,
- onUpdate,
- onCancel,
- onRemove,
- updateLabel = __( 'Update', 'woocommerce' ),
-}: ExpressionFieldProps ) {
- const textAreaRef = useRef< HTMLTextAreaElement >( null );
-
- const [ editedExpression, setEditedExpression ] = useState( expression );
-
- useEffect( () => setEditedExpression( expression ), [ expression ] );
-
- const { result, error } = evaluateExpression(
- editedExpression,
- evaluationContext
- );
-
- function handleOnClickEdit() {
- const textArea = textAreaRef.current;
-
- if ( textArea ) {
- textArea.focus();
- textArea.setSelectionRange(
- textArea.value.length,
- textArea.value.length
- );
- }
-
- onEnterEdit?.();
- }
-
- function handleOnClickCancel() {
- setEditedExpression( expression );
- onCancel?.();
- }
-
- return (
- <div
- className="woocommerce-product-editor-dev-tools-expression-field"
- data-mode={ mode }
- >
- <ExpressionTextArea
- ref={ textAreaRef }
- readOnly={ mode === 'view' }
- expression={ editedExpression }
- onChange={ setEditedExpression }
- onClick={ onEnterEdit }
- />
- <ExpressionResult
- result={ result }
- error={ error }
- showIfError={ editedExpression.length > 0 }
- />
- <div className="woocommerce-product-editor-dev-tools-expression-field__actions">
- { mode === 'view' ? (
- <>
- <Button
- icon={ edit }
- label={ __( 'Edit', 'woocommerce' ) }
- onClick={ handleOnClickEdit }
- />
- <Button
- icon={ trash }
- label={ __( 'Remove', 'woocommerce' ) }
- onClick={ () => onRemove?.() }
- />
- </>
- ) : (
- <>
- <Button
- icon={ check }
- label={ updateLabel }
- disabled={ !! error }
- onClick={ () => onUpdate?.( editedExpression ) }
- />
- { onCancel && (
- <Button
- icon={ closeSmall }
- label={ __( 'Cancel', 'woocommerce' ) }
- onClick={ handleOnClickCancel }
- />
- ) }
- </>
- ) }
- </div>
- </div>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-result.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-result.tsx
deleted file mode 100644
index dac48bfae80..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-result.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-type ExpressionResultProps = {
- result: any;
- error: any;
- showIfError: boolean;
-};
-
-export function ExpressionResult( {
- result,
- error,
- showIfError = true,
-}: ExpressionResultProps ) {
- const errorString = error && showIfError ? String( error ) : '';
-
- const resultString = error
- ? errorString
- : JSON.stringify( result, null, 4 );
-
- const resultTypeLabel = error ? 'Error' : typeof result;
-
- return (
- <div className="woocommerce-product-editor-dev-tools-expression-field__result">
- { showIfError && (
- <>
- <div className="woocommerce-product-editor-dev-tools-expression-field__result-type">
- { resultTypeLabel }
- </div>
- <div className="woocommerce-product-editor-dev-tools-expression-field__result-value">
- { resultString }
- </div>
- </>
- ) }
- </div>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-text-area.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-text-area.tsx
deleted file mode 100644
index 8ad0f83bd0d..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expression-text-area.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import {
- forwardRef,
- useImperativeHandle,
- useLayoutEffect,
- useRef,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-type ExpressionTextAreaProps = {
- expression?: string;
- readOnly?: boolean;
- onChange?: ( expression: string ) => void;
- onClick?: () => void;
-};
-
-export const ExpressionTextArea = forwardRef<
- HTMLTextAreaElement,
- ExpressionTextAreaProps
->( ( { expression, readOnly = false, onChange, onClick }, outerRef ) => {
- const textAreaRef = useRef< HTMLTextAreaElement >( null );
-
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- useImperativeHandle( outerRef, () => textAreaRef.current!, [] );
-
- useLayoutEffect( () => {
- const textArea = textAreaRef.current;
-
- if ( ! textArea || textArea.scrollHeight < 1 ) return;
-
- // Have to first set the height to auto and then set it to the scrollHeight
- // to allow the textarea to shrink when lines are removed
- textArea.style.height = 'auto';
- textArea.style.height = `${ textArea.scrollHeight }px`;
- }, [ expression ] );
-
- return (
- <textarea
- ref={ textAreaRef }
- className="woocommerce-product-editor-dev-tools-expression-field__expression"
- rows={ 1 }
- readOnly={ readOnly }
- value={ expression }
- placeholder={ __( 'Enter an expression', 'woocommerce' ) }
- onChange={ ( event ) => onChange?.( event.target.value ) }
- onClick={ () => onClick?.() }
- />
- );
-} );
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx
deleted file mode 100644
index aa4b56a7f6a..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { ExpressionField } from './expression-field';
-
-type ExpressionItem = {
- expression: string;
- mode: 'view' | 'edit';
-};
-
-export function ExpressionsPanel( {
- evaluationContext,
-}: {
- evaluationContext?: object;
-} ) {
- const [ expressionItems, setExpressionItems ] = useState<
- ExpressionItem[]
- >( [] );
-
- function enterEditMode( index: number ) {
- const newItems = [ ...expressionItems ];
- newItems[ index ].mode = 'edit';
- setExpressionItems( newItems );
- }
-
- function cancelEdit( index: number ) {
- const newItems = [ ...expressionItems ];
- newItems[ index ].mode = 'view';
- setExpressionItems( newItems );
- }
-
- function addExpression( expression: string ) {
- setExpressionItems( [
- ...expressionItems,
- { expression, mode: 'view' },
- ] );
- }
-
- function updateExpression( index: number, expression: string ) {
- const newItems = [ ...expressionItems ];
- newItems[ index ].expression = expression;
- newItems[ index ].mode = 'view';
- setExpressionItems( newItems );
- }
-
- function removeExpression( index: number ) {
- return () => {
- const newItems = expressionItems.filter(
- ( item, i ) => i !== index
- );
- setExpressionItems( newItems );
- };
- }
-
- return (
- <ul className="woocommerce-product-editor-dev-tools-expressions-list">
- { expressionItems.map( ( expressionItem, index ) => (
- <li key={ index }>
- <ExpressionField
- expression={ expressionItem.expression }
- evaluationContext={ evaluationContext }
- mode={ expressionItem.mode }
- onEnterEdit={ () => enterEditMode( index ) }
- onCancel={ () => cancelEdit( index ) }
- onUpdate={ ( expression ) =>
- updateExpression( index, expression )
- }
- onRemove={ removeExpression( index ) }
- />
- </li>
- ) ) }
- <li key={ expressionItems.length + 1 }>
- <ExpressionField
- evaluationContext={ evaluationContext }
- mode={ 'edit' }
- onUpdate={ ( expression ) => addExpression( expression ) }
- updateLabel={ __( 'Add', 'woocommerce' ) }
- />
- </li>
- </ul>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx
deleted file mode 100644
index acd07d78ebf..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { TabPanel } from './tab-panel';
-
-export function HelpTabPanel( { isSelected }: { isSelected: boolean } ) {
- return (
- <TabPanel isSelected={ isSelected }>
- <div className="woocommerce-product-editor-dev-tools-help">
- <p>
- { __(
- 'For help with WooCommerce product editor development, the following resources are available.',
- 'woocommerce'
- ) }
- </p>
- <ul>
- <li>
- <a
- href="https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development"
- target="_blank"
- rel="noreferrer"
- >
- { __(
- 'Product Editor Development Handbook',
- 'woocommerce'
- ) }
- </a>
- </li>
- <li>
- <a
- href="https://github.com/woocommerce/woocommerce/discussions/categories/woocommerce-product-block-editor"
- target="_blank"
- rel="noreferrer"
- >
- { __(
- 'Product Editor Discussion on GitHub',
- 'woocommerce'
- ) }
- </a>
- </li>
- <li>
- <a
- href="https://woocommerce.com/community-slack/"
- target="_blank"
- rel="noreferrer"
- >
- { __(
- 'WooCommerce Community Slack, in the #developers channel',
- 'woocommerce'
- ) }
- </a>
- </li>
- </ul>
- </div>
- </TabPanel>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss
deleted file mode 100644
index a0069888e40..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss
+++ /dev/null
@@ -1,266 +0,0 @@
-.woocommerce-product-editor-dev-tools-bar {
- --woocommerce-product-editor-dev-tools-background-color: #2c3338;
- --woocommerce-product-editor-dev-tools-text-color: #c3c4c7;
- --woocommerce-product-editor-dev-tools-text-hover-color: white;
- --woocommerce-product-editor-dev-tools-header-background-color: #3c434a;
- --woocommerce-product-editor-dev-tools-border-color: #494f56;
- --woocommerce-product-editor-dev-tools-border: 1px solid var(--woocommerce-product-editor-dev-tools-border-color);
-
- --woocommerce-product-editor-dev-tools-gap: 16px;
- --woocommerce-product-editor-dev-tools-gap-small: calc( var(--woocommerce-product-editor-dev-tools-gap) / 2 );
-
- --woocommerce-product-editor-dev-tools-code-font-family: monospace;
-
- display: flex;
- flex-direction: column;
-
- height: 300px;
-
- background-color: var(--woocommerce-product-editor-dev-tools-background-color);
- color: var(--woocommerce-product-editor-dev-tools-text-color);
-}
-
-.woocommerce-product-editor-dev-tools-bar__header {
- display: flex;
-
- padding: 0 var(--woocommerce-product-editor-dev-tools-gap-small);
-
- border-bottom: var(--woocommerce-product-editor-dev-tools-border);
-
- background-color: var(--woocommerce-product-editor-dev-tools-header-background-color);
-
- .components-button {
- border-radius: 0;
-
- color: var(--woocommerce-product-editor-dev-tools-text-color);
-
- &:focus:not(:disabled) {
- outline: 0;
- box-shadow: none;
- }
-
- &:active,
- &:hover {
- color: var(--woocommerce-product-editor-dev-tools-text-hover-color);
- }
- }
-}
-
-.woocommerce-product-editor-dev-tools-bar__tabs {
- flex: 1;
-}
-
-.woocommerce-product-editor-dev-tools-bar__tab-button {
- margin: 0 var(--woocommerce-product-editor-dev-tools-gap-small);
- padding: 0;
-
- border-bottom: 3.5px solid transparent;
-
- &[aria-selected='true'] {
- border-color: var(--wp-admin-theme-color);
- }
-}
-
-.woocommerce-product-editor-dev-tools-bar__panel {
- flex: 1;
-
- overflow: hidden;
-}
-
-.woocommerce-product-editor-dev-tools-bar__tab-panel {
- height: 100%;
-}
-
-.woocommerce-product-editor-dev-tools-block-inspector {
- height: 100%;
-
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- overflow: auto;
-
- white-space: pre;
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-}
-
-.woocommerce-product-editor-dev-tools-user-preferences,
-.woocommerce-product-editor-dev-tools-product {
- display: flex;
- flex-direction: row;
-
- height: 100%;
-}
-
-.woocommerce-product-editor-dev-tools-user-preferences-entity,
-.woocommerce-product-editor-dev-tools-product-entity {
- flex: 1;
-
- height: 100%;
-
- border-right: var(--woocommerce-product-editor-dev-tools-border);
-
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- overflow: auto;
-
- white-space: pre;
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-}
-
-.woocommerce-product-editor-dev-tools-expressions-list {
- flex: 1;
-
- height: 100%;
-
- margin: 0;
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- overflow: auto;
-
- li {
- padding-bottom: var(--woocommerce-product-editor-dev-tools-gap);
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-
- &:last-child {
- padding-bottom: 0;
- }
- }
-}
-
-.woocommerce-product-editor-dev-tools-expressions-list-prompt {
- color: var(--woocommerce-product-editor-dev-tools-border-color);
-}
-
-.woocommerce-product-editor-dev-tools-expression-field {
- display: grid;
- grid-template-columns: 1fr auto;
- grid-template-areas:
- "expression actions"
- "result actions";
-
- gap: var(--woocommerce-product-editor-dev-tools-gap-small);
-}
-
-.woocommerce-product-editor-dev-tools-expression-field__expression {
- grid-area: expression;
-
- overflow-y: hidden;
- resize: none;
-
- border: none;
- border-radius: 0;
-
- padding: var(--woocommerce-product-editor-dev-tools-gap-small);
-
- background-color: var(--woocommerce-product-editor-dev-tools-border-color);
- color: white;
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-
- &[readonly] {
- background-color: transparent;
- color: var(--woocommerce-product-editor-dev-tools-text-color);
- }
-}
-
-.woocommerce-product-editor-dev-tools-expression-field[data-mode='view']:hover
-.woocommerce-product-editor-dev-tools-expression-field__expression {
- outline: 1px solid var(--woocommerce-product-editor-dev-tools-border-color);
-}
-
-.woocommerce-product-editor-dev-tools-expression-field__result {
- grid-area: result;
-
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-
- gap: var(--woocommerce-product-editor-dev-tools-gap-small);
-}
-
-.woocommerce-product-editor-dev-tools-expression-field__result-type {
- border: 1px solid var(--woocommerce-product-editor-dev-tools-border-color);
- border-radius: 5px;
-
- padding: 0px 5px;
-
- font-size: .75em;
-
- text-transform: uppercase;
-}
-
-.woocommerce-product-editor-dev-tools-expression-field__result-value {
- flex: 1;
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-
- white-space: pre-wrap;
-
- overflow-y: scroll;
- height: 100%;
-}
-
-.woocommerce-product-editor-dev-tools-expression-field__actions {
- grid-area: actions;
-
- button {
- color: var(--woocommerce-product-editor-dev-tools-text-color);
- }
-}
-
-.woocommerce-product-editor-dev-tools-expression-field[data-mode='view']:not(:hover)
-.woocommerce-product-editor-dev-tools-expression-field__actions {
- button {
- color: var(--woocommerce-product-editor-dev-tools-border-color);
- }
-}
-
-
-.woocommerce-product-editor-dev-tools-expression-editor {
- display: flex;
- flex-direction: row;
-
- gap: var(--woocommerce-product-editor-dev-tools-gap);
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- align-items: center;
-
- textarea {
- flex: 1;
-
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- border: none;
- border-radius: 0;
-
- font-family: var(--woocommerce-product-editor-dev-tools-code-font-family);
-
- background-color: var(--woocommerce-product-editor-dev-tools-border-color);
- color: var(--woocommerce-product-editor-dev-tools-text-color);
- }
-
- .components-button {
- border-radius: 0;
-
- color: var(--woocommerce-product-editor-dev-tools-text-color);
-
- &:active,
- &:hover {
- color: var(--woocommerce-product-editor-dev-tools-text-hover-color);
- }
- }
-}
-
-.woocommerce-product-editor-dev-tools-help {
- height: 100%;
-
- padding: var(--woocommerce-product-editor-dev-tools-gap);
-
- overflow: auto;
-
- a {
- color: var(--woocommerce-product-editor-dev-tools-text-color);
- }
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts
deleted file mode 100644
index 3e2051ffb93..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import { registerPlugin } from '@wordpress/plugins';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorDevTools } from './product-editor-dev-tools';
-import './index.scss';
-
-function registerProductEditorDevTools() {
- registerPlugin( 'woocommerce-product-editor-dev-tools', {
- scope: 'woocommerce-product-block-editor',
- render: ProductEditorDevTools,
- } );
-}
-registerProductEditorDevTools();
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
deleted file mode 100644
index 46564ca272b..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * External dependencies
- */
-import { useContext, useEffect, useState } from 'react';
-import { WooFooterItem } from '@woocommerce/admin-layout';
-import { PostTypeContext } from '@woocommerce/product-editor';
-import { Button, NavigableMenu } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreDataStore } from '@wordpress/core-data';
-
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { BlockInspectorTabPanel } from './block-inspector-tab-panel';
-import { HelpTabPanel } from './help-tab-panel';
-import { ProductTabPanel } from './product-tab-panel';
-import { UserPreferencesTabPanel } from './user-preferences-panel';
-
-function TabButton( {
- name,
- selectedTab,
- onClick,
- children,
-}: {
- name: string;
- selectedTab: string;
- onClick: ( name: string ) => void;
- children: React.ReactNode;
-} ) {
- return (
- <Button
- onClick={ () => onClick( name ) }
- aria-selected={ name === selectedTab }
- className="woocommerce-product-editor-dev-tools-bar__tab-button"
- >
- { children }
- </Button>
- );
-}
-
-export function ProductEditorDevToolsBar( {
- onClose,
-}: {
- onClose: () => void;
-} ) {
- const postType = useContext( PostTypeContext );
-
- const [ id ] = useEntityProp( 'postType', postType, 'id' );
-
- const product = useSelect(
- ( select ) =>
- // @ts-expect-error type definition is not correct. For this reason, we need to cast the return value to Product.
- select( coreDataStore ).getEditedEntityRecord(
- 'postType',
- postType,
- id
- ) as Product,
- [ id, postType ]
- );
-
- const [ lastSelectedBlock, setLastSelectedBlock ] = useState( null );
-
- const selectedBlock = useSelect(
- // @ts-expect-error No types for this exist yet. Need to add it to the blockEditorStore types.
- ( select ) => select( blockEditorStore ).getSelectedBlock(),
- [ id, postType ]
- );
-
- useEffect( () => {
- if ( selectedBlock !== null ) {
- setLastSelectedBlock( selectedBlock );
- }
- }, [ selectedBlock ] );
-
- const evaluationContext: {
- postType: string;
- editedProduct: Product;
- } = {
- postType,
- editedProduct: product,
- };
-
- const [ selectedTab, setSelectedTab ] = useState< string >( 'inspector' );
-
- function handleNavigate( _childIndex: number, child: HTMLElement ) {
- child.click();
- }
-
- function handleTabClick( tabName: string ) {
- setSelectedTab( tabName );
- }
-
- return (
- <WooFooterItem>
- <div className="woocommerce-product-editor-dev-tools-bar">
- <div className="woocommerce-product-editor-dev-tools-bar__header">
- <div className="woocommerce-product-editor-dev-tools-bar__tabs">
- <NavigableMenu
- role="tablist"
- orientation="horizontal"
- onNavigate={ handleNavigate }
- >
- <TabButton
- name="inspector"
- selectedTab={ selectedTab }
- onClick={ handleTabClick }
- >
- { __( 'Block Inspector', 'woocommerce' ) }
- </TabButton>
- <TabButton
- name="product"
- selectedTab={ selectedTab }
- onClick={ handleTabClick }
- >
- { __( 'Product', 'woocommerce' ) }
- </TabButton>
-
- <TabButton
- name="user-preferences"
- selectedTab={ selectedTab }
- onClick={ handleTabClick }
- >
- { __( 'User Preferences', 'woocommerce' ) }
- </TabButton>
-
- <TabButton
- name="help"
- selectedTab={ selectedTab }
- onClick={ handleTabClick }
- >
- { __( 'Help', 'woocommerce' ) }
- </TabButton>
- </NavigableMenu>
- </div>
- <div className="woocommerce-product-editor-dev-tools-bar__actions">
- <Button
- icon={ closeSmall }
- label={ __( 'Close', 'woocommerce' ) }
- onClick={ onClose }
- />
- </div>
- </div>
- <div className="woocommerce-product-editor-dev-tools-bar__panel">
- <BlockInspectorTabPanel
- selectedBlock={ lastSelectedBlock }
- isSelected={ selectedTab === 'inspector' }
- />
- <ProductTabPanel
- evaluationContext={ evaluationContext }
- isSelected={ selectedTab === 'product' }
- />
- <UserPreferencesTabPanel
- isSelected={ selectedTab === 'user-preferences' }
- />
- <HelpTabPanel isSelected={ selectedTab === 'help' } />
- </div>
- </div>
- </WooFooterItem>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-menu.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-menu.tsx
deleted file mode 100644
index bb7105f492e..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-menu.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { cog, Icon } from '@wordpress/icons';
-import { __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem } from '@woocommerce/product-editor';
-
-export function ProductEditorDevToolsMenu( {
- shouldShowDevTools,
- onToggleShowDevTools,
-}: {
- shouldShowDevTools: boolean;
- onToggleShowDevTools: () => void;
-} ) {
- return (
- <WooProductMoreMenuItem order={ 1000 }>
- { ( { onClose } ) => (
- <MenuGroup label={ __( 'Developer tools', 'woocommerce' ) }>
- <MenuItem
- icon={ <Icon icon={ cog } /> }
- iconPosition="right"
- onClick={ () => {
- onToggleShowDevTools();
- onClose();
- } }
- >
- { shouldShowDevTools
- ? __( 'Hide developer tools', 'woocommerce' )
- : __( 'Show developer tools', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
- ) }
- </WooProductMoreMenuItem>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx
deleted file mode 100644
index 5425ffafb76..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from 'react';
-
-/**
- * Internal dependencies
- */
-import { ProductEditorDevToolsBar } from './product-editor-dev-tools-bar';
-import { ProductEditorDevToolsMenu } from './product-editor-dev-tools-menu';
-
-export function ProductEditorDevTools() {
- const [ shouldShowDevTools, setShouldShowDevTools ] =
- useState< boolean >( false );
-
- return (
- <>
- <ProductEditorDevToolsMenu
- shouldShowDevTools={ shouldShowDevTools }
- onToggleShowDevTools={ () => {
- setShouldShowDevTools( ! shouldShowDevTools );
- } }
- />
-
- { shouldShowDevTools && (
- <ProductEditorDevToolsBar
- onClose={ () => setShouldShowDevTools( false ) }
- />
- ) }
- </>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx
deleted file mode 100644
index 760b32f0a7a..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { Product } from '@woocommerce/data';
-
-/**
- * Internal dependencies
- */
-import { ExpressionsPanel } from './expressions-panel';
-import { TabPanel } from './tab-panel';
-
-export function ProductTabPanel( {
- isSelected,
- evaluationContext,
-}: {
- isSelected: boolean;
- evaluationContext: {
- postType: string;
- editedProduct: Product;
- };
-} ) {
- return (
- <TabPanel isSelected={ isSelected }>
- <div className="woocommerce-product-editor-dev-tools-product">
- <div className="woocommerce-product-editor-dev-tools-product-entity">
- { JSON.stringify(
- evaluationContext.editedProduct,
- null,
- 4
- ) }
- </div>
- <ExpressionsPanel evaluationContext={ evaluationContext } />
- </div>
- </TabPanel>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/tab-panel.tsx
deleted file mode 100644
index 28cd897dc35..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/tab-panel.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export function TabPanel( {
- isSelected,
- children,
-}: {
- isSelected: boolean;
- children: React.ReactNode;
-} ) {
- return (
- <div
- className="woocommerce-product-editor-dev-tools-bar__tab-panel"
- style={ isSelected ? {} : { display: 'none' } }
- >
- { children }
- </div>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/user-preferences-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/user-preferences-panel.tsx
deleted file mode 100644
index e239e1eb60d..00000000000
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/user-preferences-panel.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { useUserPreferences, UserPreferences } from '@woocommerce/data';
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { TabPanel } from './tab-panel';
-
-declare global {
- interface Window {
- __wcbt: object;
- }
-}
-
-type UserPreferenceProp = keyof UserPreferences;
-
-export function UserPreferencesTabPanel( {
- isSelected,
-}: {
- isSelected: boolean;
-} ) {
- const { updateUserPreferences, ...userPreferences } = useUserPreferences();
-
- const update = useCallback(
- (
- preferences: UserPreferences | UserPreferenceProp,
- value?: unknown,
- force = false
- ) => {
- const dataToUpdate =
- typeof preferences === 'string'
- ? { [ preferences ]: value }
- : preferences;
-
- /*
- * When force is not True,
- * only update the preferences already defined
- * @todo: consider to implement straight in the data layer.
- */
- if ( ! force ) {
- Object.keys( dataToUpdate ).forEach( ( key: string ) => {
- const userPreferenceKey = key as UserPreferenceProp;
- if (
- ! userPreferences.hasOwnProperty( userPreferenceKey )
- ) {
- delete dataToUpdate[ userPreferenceKey ];
- }
- } );
- }
-
- updateUserPreferences( dataToUpdate );
- },
- [ updateUserPreferences, userPreferences ]
- );
-
- // Expose updateUserPreferences globaly for debugging purposes.
- window.__wcbt = {
- ...window.__wcbt,
- updateUserPreferences: update,
- userPreferences,
- };
-
- return (
- <TabPanel isSelected={ isSelected }>
- <div className="woocommerce-product-editor-dev-tools-user-preferences">
- <div className="woocommerce-product-editor-dev-tools-user-preferences-entity">
- { JSON.stringify( userPreferences, null, 4 ) }
- </div>
- </div>
- </TabPanel>
- );
-}
diff --git a/plugins/woocommerce-beta-tester/webpack.config.js b/plugins/woocommerce-beta-tester/webpack.config.js
index 4e7d6b915ae..085e6240232 100644
--- a/plugins/woocommerce-beta-tester/webpack.config.js
+++ b/plugins/woocommerce-beta-tester/webpack.config.js
@@ -9,7 +9,6 @@ module.exports = {
// Separate entry point for the live-branches page.
app: './src/app/index.js',
'live-branches': './src/live-branches/index.tsx',
- 'product-editor-devtools': './src/product-editor-dev-tools/index.ts',
},
module: {
...defaultConfig.module,
diff --git a/plugins/woocommerce-beta-tester/woocommerce-beta-tester.php b/plugins/woocommerce-beta-tester/woocommerce-beta-tester.php
index 9adfc69ca70..e1f66fefabe 100644
--- a/plugins/woocommerce-beta-tester/woocommerce-beta-tester.php
+++ b/plugins/woocommerce-beta-tester/woocommerce-beta-tester.php
@@ -130,7 +130,6 @@ add_action(
function() {
if ( class_exists( '\Automattic\WooCommerce\Utilities\FeaturesUtil' ) ) {
\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__, true );
- \Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( 'product_block_editor', __FILE__, true );
}
}
);
@@ -181,4 +180,3 @@ if ( $simulate_error ) {
// Initialize the live branches feature.
require_once dirname( __FILE__ ) . '/includes/class-wc-beta-tester-live-branches.php';
-require_once dirname( __FILE__ ) . '/includes/class-wc-beta-tester-product-editor-devtools.php';
diff --git a/plugins/woocommerce/changelog/fix-product-block-editor-block-registry-compat b/plugins/woocommerce/changelog/fix-product-block-editor-block-registry-compat
new file mode 100644
index 00000000000..8d945a99279
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-block-editor-block-registry-compat
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add a compatibility shim for the removed product block editor block registry to avoid third-party extension fatals.
diff --git a/plugins/woocommerce/changelog/remove-product-block-editor b/plugins/woocommerce/changelog/remove-product-block-editor
new file mode 100644
index 00000000000..399501fcdfe
--- /dev/null
+++ b/plugins/woocommerce/changelog/remove-product-block-editor
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Remove the deprecated product block editor feature, package, routes, assets, and extension APIs.
diff --git a/plugins/woocommerce/client/admin/client/blueprint/components/get-option-groups.ts b/plugins/woocommerce/client/admin/client/blueprint/components/get-option-groups.ts
index d8dcbd9ef5f..f50d8816ef8 100644
--- a/plugins/woocommerce/client/admin/client/blueprint/components/get-option-groups.ts
+++ b/plugins/woocommerce/client/admin/client/blueprint/components/get-option-groups.ts
@@ -115,7 +115,6 @@ const OPTIONS_GROUPS = {
woocommerce_feature_remote_logging_enabled: 'Advanced',
woocommerce_feature_email_improvements_enabled: 'Advanced',
woocommerce_feature_blueprint_enabled: 'Advanced',
- woocommerce_feature_product_block_editor_enabled: 'Advanced',
woocommerce_hpos_fts_index_enabled: 'Advanced',
woocommerce_feature_cost_of_goods_sold_enabled: 'Advanced',
};
diff --git a/plugins/woocommerce/client/admin/client/embedded-body-layout/test/render-embedded-layout.test.tsx b/plugins/woocommerce/client/admin/client/embedded-body-layout/test/render-embedded-layout.test.tsx
index 46eaf4e2130..46d2a9f8ef9 100644
--- a/plugins/woocommerce/client/admin/client/embedded-body-layout/test/render-embedded-layout.test.tsx
+++ b/plugins/woocommerce/client/admin/client/embedded-body-layout/test/render-embedded-layout.test.tsx
@@ -36,9 +36,6 @@ jest.mock( '../../layout', () => ( {
jest.mock( '../', () => ( {
EmbeddedBodyLayout: jest.fn( () => null ),
} ) );
-jest.mock( '@woocommerce/product-editor', () => ( {
- isValidEmail: jest.fn(),
-} ) );
describe( 'embedded-layout', () => {
let mockEmbeddedRoot: HTMLDivElement;
diff --git a/plugins/woocommerce/client/admin/client/layout/controller.js b/plugins/woocommerce/client/admin/client/layout/controller.js
index f06a81fb499..27cfe057534 100644
--- a/plugins/woocommerce/client/admin/client/layout/controller.js
+++ b/plugins/woocommerce/client/admin/client/layout/controller.js
@@ -23,18 +23,9 @@ import { Spinner } from '@woocommerce/components';
*/
import { useReports } from '../analytics/report/use-reports';
import { getAdminSetting } from '~/utils/admin-settings';
-import { isFeatureEnabled } from '~/utils/features';
import { useFilterHook } from '~/utils/use-filter-hook';
import { NoMatch } from './NoMatch';
-const ProductVariationPage = lazy( () =>
- import(
- /* webpackChunkName: "edit-product-page" */ '../products/product-variation-page'
- )
-);
-const ProductPage = lazy( () =>
- import( /* webpackChunkName: "product-page" */ '../products/product-page' )
-);
const AnalyticsReport = lazy( () =>
import( /* webpackChunkName: "analytics-report" */ '../analytics/report' )
);
@@ -196,58 +187,6 @@ export const getPages = ( reports = [] ) => {
},
} );
- if ( isFeatureEnabled( 'product_block_editor' ) ) {
- const productPage = {
- container: ProductPage,
- layout: {
- header: false,
- },
- wpOpenMenu: 'menu-posts-product',
- capability: 'manage_woocommerce',
- };
-
- pages.push( {
- ...productPage,
- path: '/add-product',
- breadcrumbs: [
- [ '/add-product', __( 'Product', 'woocommerce' ) ],
- __( 'Add New Product', 'woocommerce' ),
- ],
- navArgs: {
- id: 'woocommerce-add-product',
- },
- } );
-
- pages.push( {
- ...productPage,
- path: '/product/:productId',
- breadcrumbs: [
- [ '/edit-product', __( 'Product', 'woocommerce' ) ],
- __( 'Edit Product', 'woocommerce' ),
- ],
- navArgs: {
- id: 'woocommerce-edit-product',
- },
- } );
- }
-
- pages.push( {
- container: ProductVariationPage,
- layout: {
- header: false,
- },
- path: '/product/:productId/variation/:variationId',
- breadcrumbs: [
- [ '/edit-product', __( 'Product', 'woocommerce' ) ],
- __( 'Edit Product Variation', 'woocommerce' ),
- ],
- navArgs: {
- id: 'woocommerce-edit-product',
- },
- wpOpenMenu: 'menu-posts-product',
- capability: 'edit_products',
- } );
-
if ( window.wcAdminFeatures.onboarding ) {
pages.push( {
container: CoreProfiler,
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/about-the-editor-menu-item.tsx b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/about-the-editor-menu-item.tsx
deleted file mode 100644
index dcc72503331..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/about-the-editor-menu-item.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { info, Icon } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockEditorGuide from '~/products/tour/block-editor/block-editor-guide';
-import { usePublishedProductsCount } from '~/products/tour/block-editor/use-published-products-count';
-
-export const AboutTheEditorMenuItem = ( {
- onClick = () => null,
- onCloseGuide,
-}: {
- onClick: () => void;
- onCloseGuide: () => void;
-} ) => {
- const [ isGuideOpen, setIsGuideOpen ] = useState( false );
- const { isNewUser } = usePublishedProductsCount();
- return (
- <>
- <MenuItem
- onClick={ () => {
- setIsGuideOpen( true );
- onClick();
- } }
- icon={ <Icon icon={ info } /> }
- iconPosition="right"
- >
- { __( 'About the form…', 'woocommerce' ) }
- </MenuItem>
- { isGuideOpen && (
- <BlockEditorGuide
- isNewUser={ isNewUser }
- onCloseGuide={ () => {
- setIsGuideOpen( false );
- onCloseGuide();
- } }
- />
- ) }
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx
deleted file mode 100644
index 5d0b247751b..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/classic-editor-menu-item.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { getAdminLink } from '@woocommerce/settings';
-import { optionsStore } from '@woocommerce/data';
-import { MenuItem } from '@wordpress/components';
-import {
- ALLOW_TRACKING_OPTION_NAME,
- STORE_KEY as CES_STORE_KEY,
-} from '@woocommerce/customer-effort-score';
-
-/**
- * Internal dependencies
- */
-import { getAdminSetting } from '~/utils/admin-settings';
-
-export const ClassicEditorMenuItem = ( {
- onClick,
- productId,
-}: {
- productId: number;
- onClick: () => void;
-} ) => {
- const { showProductMVPFeedbackModal } = useDispatch( CES_STORE_KEY );
-
- const { allowTracking, resolving: isLoading } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const allowTrackingOption =
- ( getOption( ALLOW_TRACKING_OPTION_NAME ) as string ) || 'no';
-
- const resolving = ! hasFinishedResolution( 'getOption', [
- ALLOW_TRACKING_OPTION_NAME,
- ] );
-
- return {
- allowTracking: allowTrackingOption === 'yes',
- resolving,
- };
- }, [] );
-
- const _feature_nonce = getAdminSetting( '_feature_nonce' );
-
- const classicEditorUrl = productId
- ? getAdminLink(
- `post.php?post=${ productId }&action=edit&product_block_editor=0&_feature_nonce=${ _feature_nonce }`
- )
- : getAdminLink(
- `post-new.php?post_type=product&product_block_editor=0&_feature_nonce=${ _feature_nonce }`
- );
-
- if ( isLoading ) {
- return null;
- }
-
- function handleMenuItemClick() {
- if ( allowTracking ) {
- showProductMVPFeedbackModal();
- } else {
- window.location.href = classicEditorUrl;
- }
- onClick();
- }
-
- return (
- <MenuItem
- onClick={ handleMenuItemClick }
- info={ __(
- 'Save changes and go back to the classic product editing screen.',
- 'woocommerce'
- ) }
- >
- { __( 'Turn off the new product editor', 'woocommerce' ) }
- </MenuItem>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx
deleted file mode 100644
index f22c54c8b40..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * External dependencies
- */
-import { useParams } from 'react-router-dom';
-import { MenuGroup, MenuItem } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME } from '@woocommerce/data';
-import { getNewPath, navigateTo } from '@woocommerce/navigation';
-import {
- RemoveConfirmationModal,
- __experimentalUseVariationSwitcher as useVariationSwitcher,
-} from '@woocommerce/product-editor';
-import { recordEvent } from '@woocommerce/tracks';
-// eslint-disable-next-line @woocommerce/dependency-group
-import { useEntityId, useEntityProp } from '@wordpress/core-data';
-
-export type DeleteVariationMenuItemProps = { onClose(): void };
-
-export const DeleteVariationMenuItem = ( {
- onClose,
-}: DeleteVariationMenuItemProps ) => {
- const [ showModal, setShowModal ] = useState( false );
-
- const { productId } = useParams();
-
- const variationId = useEntityId( 'postType', 'product_variation' );
-
- const {
- invalidateVariationList,
- goToNextVariation,
- goToPreviousVariation,
- numberOfVariations,
- } = useVariationSwitcher( {
- parentId: productId ? parseInt( productId, 10 ) : undefined,
- variationId,
- } );
-
- const [ name ] = useEntityProp( 'postType', 'product_variation', 'name' );
-
- const [ status ] = useEntityProp(
- 'postType',
- 'product_variation',
- 'status'
- );
-
- const { deleteProductVariation } = useDispatch(
- EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME
- );
-
- const { createSuccessNotice, createErrorNotice } =
- useDispatch( 'core/notices' );
-
- function handleMenuItemClick() {
- recordEvent( 'product_dropdown_option_click', {
- selected_option: 'delete_variation',
- product_id: productId,
- variation_id: variationId,
- product_status: status,
- } );
-
- setShowModal( true );
- }
-
- async function handleRemove() {
- recordEvent( 'product_delete_variation_modal', {
- action: 'delete',
- product_id: productId,
- variation_id: variationId,
- product_status: status,
- } );
-
- return deleteProductVariation( {
- product_id: productId ?? '',
- id: variationId,
- } )
- .then( () => {
- createSuccessNotice(
- sprintf(
- // translators: %s is the variation name.
- __( '%s deleted.', 'woocommerce' ),
- name
- )
- );
- setShowModal( false );
- onClose();
-
- invalidateVariationList();
- if ( numberOfVariations && numberOfVariations > 1 ) {
- if ( ! goToNextVariation() ) {
- // This would only happen when deleting the last variation.
- goToPreviousVariation();
- }
- } else {
- navigateTo( {
- url: getNewPath( {}, `/product/${ productId }` ),
- } );
- }
- } )
- .catch( () => {
- createErrorNotice(
- __( 'Failed to delete the variation.', 'woocommerce' )
- );
- } );
- }
-
- function handleClose() {
- recordEvent( 'product_delete_variation_modal', {
- action: 'close',
- product_id: productId,
- variation_id: variationId,
- product_status: status,
- } );
-
- setShowModal( false );
- }
-
- return (
- <>
- <MenuGroup>
- <MenuItem isDestructive onClick={ handleMenuItemClick }>
- { __( 'Delete variation', 'woocommerce' ) }
- </MenuItem>
- </MenuGroup>
-
- { showModal && (
- <RemoveConfirmationModal
- title={ sprintf(
- // translators: %s is the variation name.
- __( 'Delete %s?', 'woocommerce' ),
- name
- ) }
- description={
- <>
- <p>
- { __(
- 'If you continue, this variation with all of its information will be deleted and customers will no longer be able to purchase it.',
- 'woocommerce'
- ) }
- </p>
-
- <strong>
- { __(
- 'Deleted variations cannot be restored.',
- 'woocommerce'
- ) }
- </strong>
- </>
- }
- onRemove={ handleRemove }
- onCancel={ handleClose }
- />
- ) }
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/feedback-menu-item.tsx b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/feedback-menu-item.tsx
deleted file mode 100644
index 222b059fd5c..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/feedback-menu-item.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- BaseControl,
- MenuItem,
- TextControl,
- TextareaControl,
-} from '@wordpress/components';
-import {
- createElement,
- createInterpolateElement,
- Fragment,
-} from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { STORE_KEY as CES_STORE_KEY } from '@woocommerce/customer-effort-score';
-import { useLayoutContext } from '@woocommerce/admin-layout';
-import { isValidEmail } from '@woocommerce/product-editor';
-
-/**
- * Internal dependencies
- */
-import { FeedbackIcon } from '../../images/feedback-icon';
-
-export const FeedbackMenuItem = ( { onClick }: { onClick: () => void } ) => {
- const { showCesModal } = useDispatch( CES_STORE_KEY );
- const { isDescendantOf } = useLayoutContext();
-
- return (
- <MenuItem
- onClick={ () => {
- showCesModal(
- {
- action: 'new_product',
- showDescription: false,
- title: __(
- 'What do you think of the new product form?',
- 'woocommerce'
- ),
- firstQuestion: __(
- 'The product editing screen is easy to use',
- 'woocommerce'
- ),
- secondQuestion: __(
- "The product editing screen's functionality meets my needs",
- 'woocommerce'
- ),
- onsubmitLabel: __(
- "Thanks for the feedback — we'll put it to good use!",
- 'woocommerce'
- ),
- getExtraFieldsToBeShown: (
- values: {
- email?: string;
- additional_thoughts?: string;
- },
- setValues: ( value: {
- email?: string;
- additional_thoughts?: string;
- } ) => void,
- errors: Record< string, string > | undefined
- ) => (
- <Fragment>
- <BaseControl
- id={ 'feedback_additional_thoughts' }
- className="woocommerce-product-feedback__additional-thoughts"
- label={ createInterpolateElement(
- __(
- 'ADDITIONAL THOUGHTS <optional />',
- 'woocommerce'
- ),
- {
- optional: (
- <span className="woocommerce-product-feedback__optional-input">
- { __(
- '(OPTIONAL)',
- 'woocommerce'
- ) }
- </span>
- ),
- }
- ) }
- >
- <TextareaControl
- value={
- values.additional_thoughts || ''
- }
- onChange={ ( value: string ) =>
- setValues( {
- ...values,
- additional_thoughts: value,
- } )
- }
- help={
- errors?.additional_thoughts || ''
- }
- />
- </BaseControl>
- <BaseControl
- id={ 'feedback_email' }
- className="woocommerce-product-feedback__email"
- label={ createInterpolateElement(
- __(
- 'YOUR EMAIL ADDRESS <optional />',
- 'woocommerce'
- ),
- {
- optional: (
- <span className="woocommerce-product-feedback__optional-input">
- { __(
- '(OPTIONAL)',
- 'woocommerce'
- ) }
- </span>
- ),
- }
- ) }
- >
- <TextControl
- value={ values.email || '' }
- onChange={ ( value: string ) =>
- setValues( {
- ...values,
- email: value,
- } )
- }
- help={ errors?.email || '' }
- />
- <span>
- { __(
- 'In case you want to participate in further discussion and future user research.',
- 'woocommerce'
- ) }
- </span>
- </BaseControl>
- </Fragment>
- ),
- validateExtraFields: ( {
- email = '',
- additional_thoughts = '',
- }: {
- email?: string;
- additional_thoughts?: string;
- } ) => {
- const errors: Record< string, string > | undefined =
- {};
- if ( email.length > 0 && ! isValidEmail( email ) ) {
- errors.email = __(
- 'Please enter a valid email address.',
- 'woocommerce'
- );
- }
- if ( additional_thoughts?.length > 500 ) {
- errors.additional_thoughts = __(
- 'Please enter no more than 500 characters.',
- 'woocommerce'
- );
- }
- return errors;
- },
- },
- {
- shouldShowComments: () => false,
- },
- {
- type: 'snackbar',
- },
- {
- block_editor: isDescendantOf( 'product-block-editor' ),
- }
- );
- onClick();
- } }
- icon={ <FeedbackIcon /> }
- iconPosition="right"
- >
- { __( 'Share feedback', 'woocommerce' ) }
- </MenuItem>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/index.ts b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/index.ts
deleted file mode 100644
index 4a489206007..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './feedback-menu-item';
-export * from './classic-editor-menu-item';
-export * from './about-the-editor-menu-item';
-export * from './delete-variation-menu-item';
diff --git a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/test/delete-variation-menu-item.test.tsx b/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/test/delete-variation-menu-item.test.tsx
deleted file mode 100644
index f9f3fa94358..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/more-menu-items/test/delete-variation-menu-item.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { useParams } from 'react-router-dom';
-
-/**
- * Internal dependencies
- */
-import { DeleteVariationMenuItem } from '../delete-variation-menu-item';
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- useDispatch: jest.fn(),
- useSelect: jest.fn(),
-} ) );
-jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
-
-jest.mock( 'react-router-dom', () => ( { useParams: jest.fn() } ) );
-
-jest.mock( '@wordpress/core-data', () => ( {
- useEntityId: jest.fn().mockReturnValue( 'variation_1' ),
- useEntityProp: jest
- .fn()
- .mockImplementation( ( _1, _2, propType ) => [ propType ] ),
-} ) );
-
-jest.mock( '@woocommerce/product-editor', () => ( {
- RemoveConfirmationModal: jest.fn(),
- __experimentalUseVariationSwitcher: jest.fn().mockReturnValue( {
- invalidateVariationList: jest.fn(),
- goToNextVariation: jest.fn(),
- goToPreviousVariation: jest.fn(),
- numberOfVariations: 1,
- } ),
-} ) );
-
-describe( 'DeleteVariationMenuItem', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
- it( 'should trigger product_dropdown_option_click track event when clicking the menu', async () => {
- ( useDispatch as jest.Mock ).mockReturnValue( {
- deleteProductVariation: () => {},
- } );
- ( useSelect as jest.Mock ).mockReturnValue( {
- type: 'simple',
- status: 'publish',
- } );
- ( useParams as jest.Mock ).mockReturnValue( { productId: 1 } );
- const { getByText } = render(
- <DeleteVariationMenuItem onClose={ () => {} } />
- );
- fireEvent.click( getByText( 'Delete variation' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_dropdown_option_click',
- {
- product_id: 1,
- product_status: 'status',
- selected_option: 'delete_variation',
- variation_id: 'variation_1',
- }
- );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx b/plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx
deleted file mode 100644
index 30362180d68..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/product-block-editor-fills.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { MenuGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { recordEvent } from '@woocommerce/tracks';
-import { useSelect } from '@wordpress/data';
-import { Product, ProductVariation } from '@woocommerce/data';
-import { store as coreStore, useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
- FeedbackMenuItem,
- ClassicEditorMenuItem,
- AboutTheEditorMenuItem,
-} from '../fills/more-menu-items';
-
-export type MoreMenuFillProps = { productType?: string; onClose: () => void };
-
-export const MoreMenuFill = ( {
- productType = 'product',
- onClose,
-}: MoreMenuFillProps ) => {
- const [ id ] = useEntityProp< number >( 'postType', productType, 'id' );
-
- const product = useSelect(
- ( select ) => {
- const { getEntityRecord } = select( coreStore );
-
- return getEntityRecord( 'postType', productType, id ) as
- | Product
- | ProductVariation;
- },
- [ id, productType ]
- );
-
- const recordClick = ( optionName: string ) => {
- recordEvent( 'product_dropdown_option_click', {
- selected_option: optionName,
- product_type: product.type,
- product_status: product.status,
- } );
- };
-
- return (
- <>
- <MenuGroup label={ __( 'New product form (Beta)', 'woocommerce' ) }>
- <AboutTheEditorMenuItem
- onClick={ () => {
- recordClick( 'about' );
- } }
- onCloseGuide={ () => {
- onClose();
- } }
- />
- <FeedbackMenuItem
- onClick={ () => {
- recordClick( 'feedback' );
- onClose();
- } }
- />
- </MenuGroup>
- <MenuGroup>
- <ClassicEditorMenuItem
- productId={
- ( product as ProductVariation ).parent_id ?? product.id
- }
- onClick={ () => {
- recordClick( 'classic_editor' );
- onClose();
- } }
- />
- </MenuGroup>
- </>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/fills/test/product-block-editor-fills.test.tsx b/plugins/woocommerce/client/admin/client/products/fills/test/product-block-editor-fills.test.tsx
deleted file mode 100644
index 78eb25a421d..00000000000
--- a/plugins/woocommerce/client/admin/client/products/fills/test/product-block-editor-fills.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-import { useSelect } from '@wordpress/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import { MoreMenuFill } from '../product-block-editor-fills';
-
-jest.mock( '@wordpress/data', () => ( {
- ...jest.requireActual( '@wordpress/data' ),
- useSelect: jest.fn(),
-} ) );
-jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
-jest.mock( '../more-menu-items', () => ( {
- ...jest.requireActual( '../more-menu-items' ),
- ClassicEditorMenuItem: jest.fn().mockImplementation( () => <div></div> ),
- FeedbackMenuItem: jest.fn().mockImplementation( ( { onClick } ) => (
- <div>
- <button onClick={ onClick }>Feedback button</button>
- </div>
- ) ),
-} ) );
-jest.mock( '@woocommerce/product-editor', () => ( {
- isValidEmail: jest.fn(),
-} ) );
-
-describe( 'MoreMenuFill', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
- it( 'should trigger product_dropdown_option_click track event when clicking the menu', async () => {
- ( useSelect as jest.Mock ).mockReturnValue( {
- type: 'simple',
- status: 'publish',
- } );
- const { getByText } = render( <MoreMenuFill onClose={ () => {} } /> );
- fireEvent.click( getByText( 'Feedback button' ) );
-
- expect( recordEvent ).toHaveBeenCalledWith(
- 'product_dropdown_option_click',
- {
- product_status: 'publish',
- product_type: 'simple',
- selected_option: 'feedback',
- }
- );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts b/plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts
deleted file mode 100644
index 213875f8b51..00000000000
--- a/plugins/woocommerce/client/admin/client/products/hooks/use-product-entity-record.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { AUTO_DRAFT_NAME } from '@woocommerce/product-editor';
-import { type Product } from '@woocommerce/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { dispatch } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
-
-export function useProductEntityRecord(
- productId: string | undefined
-): number | undefined {
- const [ id, setId ] = useState< number | undefined >( undefined );
-
- useEffect( () => {
- if ( productId ) {
- setId( Number.parseInt( productId, 10 ) );
- return;
- }
-
- const createProductPromise = dispatch( coreStore ).saveEntityRecord(
- 'postType',
- 'product',
- {
- title: AUTO_DRAFT_NAME,
- status: 'auto-draft',
- }
- ) as never as Promise< Product >;
-
- createProductPromise
- .then( ( autoDraftProduct: Product ) =>
- setId( autoDraftProduct.id )
- )
- .catch( ( e ) => {
- setId( undefined );
- throw e;
- } );
- }, [ productId ] );
-
- return id;
-}
diff --git a/plugins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts b/plugins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts
deleted file mode 100644
index 95380a6235c..00000000000
--- a/plugins/woocommerce/client/admin/client/products/hooks/use-product-variation-entity-record.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { ProductVariation } from '@woocommerce/data';
-import { resolveSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, useState } from '@wordpress/element';
-
-export function useProductVariationEntityRecord(
- variationId: string
-): ProductVariation | undefined {
- const [ product, setProduct ] = useState< ProductVariation | undefined >(
- undefined
- );
-
- useEffect( () => {
- // @ts-expect-error TODO react-18-upgrade: getEntityRecord type is not correctly typed yet
- const getRecordPromise: Promise< ProductVariation > = resolveSelect(
- coreStore
- ).getEntityRecord(
- 'postType',
- 'product_variation',
- Number.parseInt( variationId, 10 )
- );
- getRecordPromise
- .then( ( autoDraftProduct: ProductVariation ) => {
- setProduct( autoDraftProduct );
- } )
- .catch( ( e ) => {
- setProduct( undefined );
- throw e;
- } );
- }, [ variationId ] );
-
- return product;
-}
diff --git a/plugins/woocommerce/client/admin/client/products/images/feedback-icon.tsx b/plugins/woocommerce/client/admin/client/products/images/feedback-icon.tsx
deleted file mode 100644
index 40ad443c5ae..00000000000
--- a/plugins/woocommerce/client/admin/client/products/images/feedback-icon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export const FeedbackIcon = () => {
- return (
- <svg
- width="16"
- height="17"
- viewBox="0 0 16 17"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- fillRule="evenodd"
- clipRule="evenodd"
- d="M2.68822 12.625L1.5 13.8145L1.5 1.5L14.5 1.5L14.5 12.625L2.68822 12.625ZM3.31 14.125L15 14.125C15.5523 14.125 16 13.6773 16 13.125L16 1C16 0.447717 15.5523 0 15 0H1C0.447717 0 0 0.447716 0 1V15.5247C0 15.8173 0.161234 16.086 0.419354 16.2237C0.727111 16.3878 1.10601 16.3313 1.35252 16.0845L3.31 14.125ZM12 5.99997H4V4.49997H12V5.99997ZM4 9.99997H9V8.49997H4V9.99997Z"
- fill="currentColor"
- />
- </svg>
- );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/product-page.scss b/plugins/woocommerce/client/admin/client/products/product-page.scss
deleted file mode 100644
index 6045dac9dad..00000000000
--- a/plugins/woocommerce/client/admin/client/products/product-page.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-.woocommerce-admin-page__add-product,
-.woocommerce-admin-page__product_product-id,
-.woocommerce-admin-page__product_product-id_variation_variation-id {
- .woocommerce-store-alerts {
- display: none;
- }
-
- .woocommerce-layout__primary {
- margin-left: 0;
- margin-right: 0;
- margin-bottom: 0;
- }
-
- .woocommerce-layout .woocommerce-layout__main {
- padding: 0;
- }
-
- .interface-interface-skeleton {
- background-color: $white;
- }
-
- .interface-interface-skeleton__sidebar,
- .interface-interface-skeleton__actions {
- width: 280px;
- }
- .interface-interface-skeleton__actions {
- top: $admin-bar-height-big;
- border-left: 1px solid $gray-200;
- background-color: $white;
- height: 100%;
- z-index: 9999;
- width: 100%;
- overflow: auto;
- @include break-medium() {
- top: $admin-bar-height;
- width: $sidebar-width;
- }
- }
-
- .interface-interface-skeleton__header,
- .interface-interface-skeleton__footer {
- background-color: $white;
- position: fixed;
- width: calc(100% - $admin-menu-width);
- left: $admin-menu-width;
- @include breakpoint( "<960px" ) {
- left: $admin-menu-width-collapsed;
- width: calc(100% - $admin-menu-width-collapsed);
- }
- @include breakpoint( "<782px" ) {
- left: 0;
- width: 100%;
- }
- // Lower than the sidebar which has a z-index of 90.
- z-index: 80;
- }
-
- &.folded .interface-interface-skeleton__header,
- &.folded .interface-interface-skeleton__footer {
- width: calc(100% - $admin-menu-width-collapsed);
- left: $admin-menu-width-collapsed;
- }
-
- .interface-interface-skeleton__header {
- top: $adminbar-height;
- @include breakpoint( "<782px" ) {
- top: $adminbar-height-mobile;
- }
- }
-
- .interface-interface-skeleton__footer {
- // by default, on mobile the footer is hidden,
- // so we override that here
- display: flex;
- }
-}
-
-html.interface-interface-skeleton__html-container {
- @include breakpoint( "<782px" ) {
- position: inherit;
- }
- .woocommerce-layout__footer.at-bottom {
- border-top: none;
- box-shadow: none;
- }
-}
-
-body {
- .is-product-editor {
- background-color: $white;
-
- &.woocommerce-admin-page.woocommerce_page_wc-admin #wpbody-content {
- min-height: calc(100vh - 96px);
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/products/product-page.tsx b/plugins/woocommerce/client/admin/client/products/product-page.tsx
deleted file mode 100644
index 0db882e55e1..00000000000
--- a/plugins/woocommerce/client/admin/client/products/product-page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * External dependencies
- */
-import {
- __experimentalEditor as Editor,
- __experimentalInitBlocks as initBlocks,
- __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem,
- productApiFetchMiddleware,
- productEditorHeaderApiFetchMiddleware,
- TRACKS_SOURCE,
- __experimentalEditorLoadingContext as EditorLoadingContext,
-} from '@woocommerce/product-editor';
-import { Spinner } from '@woocommerce/components';
-import { recordEvent } from '@woocommerce/tracks';
-import { lazy, Suspense, useContext, useEffect } from 'react';
-import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
-import { useParams } from 'react-router-dom';
-import { WooFooterItem } from '@woocommerce/admin-layout';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useProductEntityRecord } from './hooks/use-product-entity-record';
-import { MoreMenuFill } from './fills/product-block-editor-fills';
-import './product-page.scss';
-
-productEditorHeaderApiFetchMiddleware();
-productApiFetchMiddleware();
-
-// Lazy load components
-const BlockEditorTourWrapper = lazy(
- () => import( './tour/block-editor/block-editor-tour-wrapper' )
-);
-const ProductMVPFeedbackModalContainer = lazy( () =>
- import( '@woocommerce/product-editor' ).then( ( module ) => ( {
- default: module.__experimentalProductMVPFeedbackModalContainer,
- } ) )
-);
-
-export default function ProductPage() {
- const { productId: productIdSearchParam } = useParams();
-
- /**
- * Only register blocks and unregister them when the product page is being rendered or unmounted.
- * Note: Dependency array should stay empty.
- */
- useEffect( () => {
- document.body.classList.add( 'is-product-editor' );
-
- const unregisterBlocks = initBlocks();
-
- return () => {
- document.body.classList.remove( 'is-product-editor' );
- unregisterBlocks();
- };
- }, [] );
-
- useEffect( () => {
- registerPlugin( 'wc-admin-product-editor', {
- scope: 'woocommerce-product-block-editor',
- render: () => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const isEditorLoading = useContext( EditorLoadingContext );
-
- if ( isEditorLoading ) {
- return null;
- }
-
- return (
- <>
- <WooProductMoreMenuItem>
- { ( { onClose } ) => (
- <MoreMenuFill onClose={ onClose } />
- ) }
- </WooProductMoreMenuItem>
-
- <WooFooterItem>
- <>
- <Suspense fallback={ <Spinner /> }>
- <ProductMVPFeedbackModalContainer
- productId={
- productIdSearchParam
- ? Number.parseInt(
- productIdSearchParam,
- 10
- )
- : undefined
- }
- />
- </Suspense>
- </>
- </WooFooterItem>
-
- <Suspense fallback={ <Spinner /> }>
- <BlockEditorTourWrapper />
- </Suspense>
- </>
- );
- },
- } );
-
- return () => {
- unregisterPlugin( 'wc-admin-product-editor' );
- };
- }, [ productIdSearchParam ] );
-
- useEffect(
- function trackViewEvents() {
- if ( productIdSearchParam ) {
- recordEvent( 'product_edit_view', {
- source: TRACKS_SOURCE,
- product_id: productIdSearchParam,
- } );
- } else {
- recordEvent( 'product_add_view', {
- source: TRACKS_SOURCE,
- } );
- }
- },
- [ productIdSearchParam ]
- );
-
- const productId = useProductEntityRecord( productIdSearchParam );
-
- if ( ! productId ) {
- return (
- <div className="woocommerce-layout__loading">
- <Spinner
- aria-label={ __( 'Creating the product', 'woocommerce' ) }
- />
- </div>
- );
- }
-
- return <Editor productId={ productId } />;
-}
diff --git a/plugins/woocommerce/client/admin/client/products/product-variation-page.tsx b/plugins/woocommerce/client/admin/client/products/product-variation-page.tsx
deleted file mode 100644
index 6ce2d717e30..00000000000
--- a/plugins/woocommerce/client/admin/client/products/product-variation-page.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import {
- __experimentalEditor as Editor,
- __experimentalInitBlocks as initBlocks,
- __experimentalWooProductMoreMenuItem as WooProductMoreMenuItem,
- productApiFetchMiddleware,
- productEditorHeaderApiFetchMiddleware,
- TRACKS_SOURCE,
- __experimentalVariationSwitcherFooter as VariationSwitcherFooter,
- __experimentalProductMVPFeedbackModalContainer as ProductMVPFeedbackModalContainer,
-} from '@woocommerce/product-editor';
-import { recordEvent } from '@woocommerce/tracks';
-import { useEffect } from '@wordpress/element';
-import { WooFooterItem } from '@woocommerce/admin-layout';
-import { registerPlugin, unregisterPlugin } from '@wordpress/plugins';
-import { useParams } from 'react-router-dom';
-import { Spinner } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { MoreMenuFill } from './fills/product-block-editor-fills';
-import { useProductVariationEntityRecord } from './hooks/use-product-variation-entity-record';
-import { DeleteVariationMenuItem } from './fills/more-menu-items';
-import './product-page.scss';
-
-productEditorHeaderApiFetchMiddleware();
-productApiFetchMiddleware();
-
-export default function ProductPage() {
- const { productId, variationId } = useParams();
-
- const variation = useProductVariationEntityRecord( variationId as string );
-
- useEffect( () => {
- registerPlugin( 'wc-admin-more-menu', {
- scope: 'woocommerce-product-block-editor',
- render: () => (
- <>
- <WooProductMoreMenuItem>
- { ( { onClose } ) => (
- <>
- <DeleteVariationMenuItem onClose={ onClose } />
- <MoreMenuFill
- productType="product_variation"
- onClose={ onClose }
- />
- </>
- ) }
- </WooProductMoreMenuItem>
- </>
- ),
- } );
-
- const unregisterBlocks = initBlocks();
-
- return () => {
- unregisterPlugin( 'wc-admin-more-menu' );
- unregisterBlocks();
- };
- }, [] );
-
- useEffect(
- function trackViewEvents() {
- if ( productId ) {
- recordEvent( 'product_edit_view', {
- source: TRACKS_SOURCE,
- product_id: productId,
- } );
- } else {
- recordEvent( 'product_add_view', {
- source: TRACKS_SOURCE,
- } );
- }
- },
- [ productId ]
- );
-
- if ( ! variation ) {
- return (
- <div className="woocommerce-layout__loading">
- <Spinner
- aria-label={ __( 'Creating the product', 'woocommerce' ) }
- />
- </div>
- );
- }
-
- return (
- <>
- <Editor productId={ variation.id } postType="product_variation" />
- <WooFooterItem order={ 0 }>
- <>
- <VariationSwitcherFooter
- parentId={ variation?.parent_id }
- variationId={ variation?.id }
- />
-
- <ProductMVPFeedbackModalContainer
- productId={ variation?.parent_id }
- />
- </>
- </WooFooterItem>
- </>
- );
-}
diff --git a/plugins/woocommerce/client/admin/client/products/test/product-page.test.tsx b/plugins/woocommerce/client/admin/client/products/test/product-page.test.tsx
deleted file mode 100644
index d5d8603ab5c..00000000000
--- a/plugins/woocommerce/client/admin/client/products/test/product-page.test.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-import { recordEvent } from '@woocommerce/tracks';
-import { useParams } from 'react-router-dom';
-
-/**
- * Internal dependencies
- */
-import ProductPage from '../product-page';
-import ProductVariationPage from '../product-variation-page';
-
-jest.mock( '@woocommerce/tracks', () => ( {
- recordEvent: jest.fn(),
-} ) );
-jest.mock( 'react-router-dom', () => ( { useParams: jest.fn() } ) );
-
-// Mocks to prevent crashes.
-jest.mock( '@wordpress/api-fetch', () => ( {
- apiFetch: jest.fn(),
-} ) );
-jest.mock( '@wordpress/core-data', () => ( {
- apiFetch: jest.fn(),
-} ) );
-jest.mock( '../hooks/use-product-entity-record', () => ( {
- useProductEntityRecord: jest.fn(),
-} ) );
-jest.mock( '../hooks/use-product-variation-entity-record', () => ( {
- useProductVariationEntityRecord: jest.fn(),
-} ) );
-jest.mock( '@woocommerce/product-editor', () => ( {
- ...jest.requireActual( '@woocommerce/product-editor' ),
- productEditorHeaderApiFetchMiddleware: jest.fn(),
- productApiFetchMiddleware: jest.fn(),
- __experimentalInitBlocks: jest.fn().mockImplementation( () => () => {} ),
-} ) );
-jest.mock( '@woocommerce/product-editor', () => ( {
- __experimentalEditor: jest.fn(),
- __experimentalInitBlocks: jest.fn().mockImplementation( () => () => {} ),
- __experimentalWooProductMoreMenuItem: jest.fn(),
- productApiFetchMiddleware: jest.fn(),
- productEditorHeaderApiFetchMiddleware: jest.fn(),
- TRACKS_SOURCE: 'test-source',
- __experimentalProductMVPCESFooter: jest.fn(),
- __experimentalEditorLoadingContext: jest.fn(),
- __experimentalProductMVPFeedbackModalContainer: jest.fn(),
-} ) );
-
-const TRACKS_SOURCE = 'test-source';
-describe( 'ProductPage', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
- it( 'should trigger product_add_view on render without product_id defined', () => {
- ( useParams as jest.Mock ).mockReturnValue( { productId: null } );
- render( <ProductPage /> );
- expect( recordEvent ).toBeCalledWith( 'product_add_view', {
- source: TRACKS_SOURCE,
- } );
- } );
- it( 'should trigger product_edit_view on render with product_id defined', () => {
- ( useParams as jest.Mock ).mockReturnValue( { productId: 1 } );
- render( <ProductPage /> );
- expect( recordEvent ).toBeCalledWith( 'product_edit_view', {
- source: TRACKS_SOURCE,
- product_id: 1,
- } );
- } );
-} );
-
-describe( 'ProductVariationPage', () => {
- beforeEach( () => {
- jest.clearAllMocks();
- } );
- it( 'should trigger product_add_view track event on render without product_id defined', () => {
- ( useParams as jest.Mock ).mockReturnValue( { productId: null } );
- render( <ProductVariationPage /> );
- expect( recordEvent ).toBeCalledWith( 'product_add_view', {
- source: TRACKS_SOURCE,
- } );
- } );
- it( 'should trigger product_edit_view track event on render with product_id defined', () => {
- ( useParams as jest.Mock ).mockReturnValue( { productId: 1 } );
- render( <ProductVariationPage /> );
- expect( recordEvent ).toBeCalledWith( 'product_edit_view', {
- source: TRACKS_SOURCE,
- product_id: 1,
- } );
- } );
-} );
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-guide.tsx b/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-guide.tsx
deleted file mode 100644
index cae5ae71f49..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-guide.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Guide from '../components/guide';
-import './style.scss';
-
-const PageContent = ( {
- page,
-}: {
- page: {
- heading: string;
- text: string;
- };
-} ) => (
- <>
- <h1 className="woocommerce-block-editor-guide__heading">
- { page.heading }
- </h1>
- <p className="woocommerce-block-editor-guide__text">{ page.text }</p>
- </>
-);
-
-const PageImage = ( {
- page,
-}: {
- page: {
- index: number;
- };
-} ) => (
- <div
- className={ `woocommerce-block-editor-guide__header woocommerce-block-editor-guide__header-${
- page.index + 1
- }` }
- ></div>
-);
-
-interface BlockEditorGuideProps {
- isNewUser?: boolean;
- onCloseGuide: ( currentPage: number, origin: 'close' | 'finish' ) => void;
-}
-
-const BlockEditorGuide = ( { onCloseGuide }: BlockEditorGuideProps ) => {
- const pagesConfig = [
- {
- heading: __( 'Fresh and modern interface', 'woocommerce' ),
- text: __(
- 'Everything you need to create and sell your products, all in one place. From photos and descriptions to pricing and inventory, all of your product settings can be found here.',
- 'woocommerce'
- ),
- },
- {
- heading: __( 'Content-rich product descriptions', 'woocommerce' ),
- text: __(
- "Show off what's great about your products and engage your customers with content-rich product descriptions. Add images, videos, and any other content they might need to make a purchase.",
- 'woocommerce'
- ),
- },
- {
- heading: __( 'Lightning fast performance ', 'woocommerce' ),
- text: __(
- 'Get your products listed and available for purchase in no time! Our modern technology ensures a reliable and streamlined experience.',
- 'woocommerce'
- ),
- },
- {
- heading: __( 'More features are on the way', 'woocommerce' ),
- text: __(
- "We're actively working on adding more features to the product form, including the ability to add digital products, variations, and more. Watch this space!",
- 'woocommerce'
- ),
- },
- ];
-
- const pages = pagesConfig.map( ( page, index ) => ( {
- content: <PageContent page={ page } />,
- image: <PageImage page={ { ...page, index } } />,
- } ) );
-
- return (
- <Guide
- className="woocommerce-block-editor-guide"
- contentLabel=""
- finishButtonText={ __( 'Tell me more', 'woocommerce' ) }
- finishButtonLink="https://woocommerce.com/product-form-beta"
- onFinish={ onCloseGuide }
- pages={ pages }
- />
- );
-};
-
-export default BlockEditorGuide;
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour-wrapper.tsx b/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour-wrapper.tsx
deleted file mode 100644
index 29f6b92eb1a..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour-wrapper.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import BlockEditorTour from './block-editor-tour';
-import { useBlockEditorTourOptions } from './use-block-editor-tour-options';
-
-const BlockEditorTourWrapper = () => {
- const blockEditorTourProps = useBlockEditorTourOptions();
- return <BlockEditorTour { ...blockEditorTourProps } />;
-};
-
-export default BlockEditorTourWrapper;
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour.tsx b/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour.tsx
deleted file mode 100644
index b0c3f3a5ea5..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/block-editor-tour.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * External dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Pill, TourKit } from '@woocommerce/components';
-import { __experimentalUseFeedbackBar as useFeedbackBar } from '@woocommerce/product-editor';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-
-import './style.scss';
-import BlockEditorGuide from './block-editor-guide';
-import { usePublishedProductsCount } from './use-published-products-count';
-
-interface Props {
- shouldTourBeShown: boolean;
- dismissModal: () => void;
-}
-
-const BlockEditorTour = ( { shouldTourBeShown, dismissModal }: Props ) => {
- const { isNewUser, loadingPublishedProductsCount } =
- usePublishedProductsCount();
-
- useEffect( () => {
- if ( shouldTourBeShown ) {
- recordEvent( 'block_product_editor_spotlight_view' );
- }
- }, [ shouldTourBeShown ] );
-
- const [ isGuideOpen, setIsGuideOpen ] = useState( false );
-
- const { maybeShowFeedbackBar } = useFeedbackBar();
-
- const openGuide = () => {
- setIsGuideOpen( true );
- };
-
- const getTourText = () => {
- return {
- heading: isNewUser
- ? __( 'Meet the product editing form', 'woocommerce' )
- : __( 'Welcome to the new product form!', 'woocommerce' ),
- description: isNewUser
- ? __(
- "Discover the product form's unique features with a quick overview of what's included.",
- 'woocommerce'
- )
- : __(
- "Discover its new features and improvements with a quick overview of what's included.",
- 'woocommerce'
- ),
- };
- };
-
- if ( loadingPublishedProductsCount ) {
- return null;
- }
-
- if ( isGuideOpen ) {
- return (
- <BlockEditorGuide
- isNewUser={ isNewUser }
- onCloseGuide={ ( currentPage, source ) => {
- dismissModal();
- if ( source === 'finish' ) {
- recordEvent(
- 'block_product_editor_spotlight_tell_me_more_click'
- );
- } else {
- // adding 1 to consider the TourKit as page 0
- recordEvent(
- 'block_product_editor_spotlight_dismissed',
- {
- current_page: currentPage + 1,
- }
- );
- }
- setIsGuideOpen( false );
- maybeShowFeedbackBar();
- } }
- />
- );
- } else if ( shouldTourBeShown ) {
- const { heading, description } = getTourText();
-
- return (
- <TourKit
- config={ {
- steps: [
- {
- meta: {
- name: 'woocommerce-block-editor-tour',
- primaryButton: {
- text: __(
- 'View highlights',
- 'woocommerce'
- ),
- },
- descriptions: {
- desktop: description,
- },
- heading: (
- <>
- <span>{ heading }</span>
- <Pill>
- { __( 'Beta', 'woocommerce' ) }
- </Pill>
- </>
- ),
- },
- referenceElements: {
- desktop: '#adminmenuback',
- },
- },
- ],
- closeHandler: ( _steps, _currentStepIndex, source ) => {
- if ( source === 'done-btn' ) {
- recordEvent(
- 'block_product_editor_spotlight_view_highlights'
- );
- openGuide();
- } else {
- dismissModal();
- recordEvent(
- 'block_product_editor_spotlight_dismissed',
- {
- current_page: 0,
- }
- );
- maybeShowFeedbackBar();
- }
- },
- options: {
- effects: {
- arrowIndicator: false,
- overlay: false,
- liveResize: {
- rootElementSelector: '#adminmenuback',
- resize: true,
- },
- },
- portalParentElement:
- document.getElementById( 'wpbody' ),
- popperModifiers: [
- {
- name: 'bottom-left',
- enabled: true,
- phase: 'beforeWrite',
- requires: [ 'computeStyles' ],
- fn: ( { state } ) => {
- state.styles.popper.top = 'auto';
- state.styles.popper.left = 'auto';
- state.styles.popper.bottom = '10px';
- state.styles.popper.transform =
- 'translate3d(10px, 0px, 0px)';
- },
- },
- ],
- classNames: 'woocommerce-block-editor-tourkit',
- },
- } }
- />
- );
- }
- return null;
-};
-
-export default BlockEditorTour;
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-1.png b/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-1.png
deleted file mode 100644
index 2dbf072114a..00000000000
Binary files a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-1.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-2.png b/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-2.png
deleted file mode 100644
index 2f68ecb3263..00000000000
Binary files a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-2.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-3.png b/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-3.png
deleted file mode 100644
index c4f9b471c98..00000000000
Binary files a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-3.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-4.png b/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-4.png
deleted file mode 100644
index 3afbdf8672b..00000000000
Binary files a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/guide-4.png and /dev/null differ
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/tour-header.svg b/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/tour-header.svg
deleted file mode 100644
index ac84b6014e4..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/images/tour-header.svg
+++ /dev/null
@@ -1,69 +0,0 @@
-<svg width="381" height="194" viewBox="0 0 381 194" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1865_198367)">
-<rect width="381" height="194.31" fill="#D4AAF6"/>
-<g clip-path="url(#clip1_1865_198367)">
-<rect width="272.832" height="167.123" transform="translate(54.576 27.3745)" fill="white"/>
-<g clip-path="url(#clip2_1865_198367)">
-<rect x="128.162" y="113.562" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
-<rect x="128.417" y="89.7881" width="74.9435" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
-<rect x="142.521" y="123.863" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
-<rect x="128.417" y="96.0708" width="94.2403" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
-<rect x="142.521" y="131.459" width="44.3096" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
-<rect x="128.417" y="102.354" width="33.2085" height="3.59011" rx="1.79505" fill="#E0E0E0"/>
-<rect x="142.521" y="139.055" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
-<ellipse cx="136.506" cy="125.662" rx="1.35834" ry="1.39935" fill="#007CBA"/>
-<rect x="128.412" y="122.913" width="10.7545" height="5.49692" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
-<ellipse cx="131.46" cy="133.258" rx="1.35834" ry="1.39935" fill="#CCCCCC"/>
-<rect x="128.412" y="130.51" width="10.7545" height="5.49692" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
-<ellipse cx="136.506" cy="140.855" rx="1.35834" ry="1.39935" fill="#007CBA"/>
-<rect x="128.412" y="138.106" width="10.7545" height="5.49691" rx="2.74846" stroke="#BBBBBB" stroke-width="0.500309"/>
-</g>
-<rect x="128.048" y="74.2329" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
-<g clip-path="url(#clip3_1865_198367)">
-<rect x="128.347" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
-<rect opacity="0.6" x="169.097" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
-<rect opacity="0.6" x="209.847" y="155.979" width="37.2573" height="14.7931" rx="1.79505" fill="#E0E0E0"/>
-<rect x="128.414" y="177.969" width="51.2842" height="5.92333" rx="1.79505" fill="#E0E0E0"/>
-<rect x="128.414" y="188.124" width="35.2835" height="3.38476" rx="1.69238" fill="#E0E0E0"/>
-</g>
-<g clip-path="url(#clip4_1865_198367)">
-<mask id="path-20-inside-1_1865_198367" fill="white">
-<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z"/>
-</mask>
-<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z" fill="white"/>
-<rect x="160.123" y="34.312" width="60.9476" height="4.65829" rx="1.79505" fill="#E0E0E0"/>
-<rect x="288.488" y="31.7712" width="33.3761" height="9.74006" rx="1.79505" fill="#007CBA"/>
-<rect x="258.981" y="34.312" width="24.6693" height="4.65829" rx="1.79505" fill="#E0E0E0"/>
-<rect x="125.732" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
-<rect x="125.732" y="55.6106" width="21.2833" height="1.69392" fill="#007CBA"/>
-<rect x="179.908" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
-<rect x="152.82" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
-<rect x="206.996" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
-<rect x="234.083" y="48.4114" width="21.2833" height="3.38785" rx="1.69392" fill="#E0E0E0"/>
-<rect width="17.9505" height="17.9505" transform="translate(54.127 26.9258)" fill="#23282D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M67.6536 35.7083C67.6536 33.0946 65.5234 30.9648 62.9093 30.9648C60.2904 30.9648 58.1649 33.0946 58.1649 35.7083C58.1649 38.3266 60.2904 40.4517 62.9093 40.4517C65.5234 40.4517 67.6536 38.3266 67.6536 35.7083ZM61.8561 38.2555L60.2382 33.9153C60.4992 33.9058 60.7933 33.8773 60.7933 33.8773C61.0305 33.8489 61.0021 33.3413 60.7649 33.3508C60.7649 33.3508 60.0769 33.403 59.6404 33.403C59.555 33.403 59.4649 33.403 59.3653 33.3983C60.1196 32.2409 61.4243 31.4914 62.9093 31.4914C64.0147 31.4914 65.0205 31.9041 65.7796 32.6014C65.457 32.5492 64.9968 32.7864 64.9968 33.3508C64.9968 33.6582 65.1605 33.9219 65.3446 34.2184L65.3446 34.2184L65.3446 34.2184C65.3707 34.2605 65.3973 34.3033 65.4238 34.3469C65.5899 34.6363 65.6847 34.992 65.6847 35.5138C65.6847 36.2206 65.0205 37.8855 65.0205 37.8855L63.583 33.9153C63.8392 33.9058 63.972 33.8346 63.972 33.8346C64.2092 33.8109 64.1808 33.2417 63.9436 33.256C63.9436 33.256 63.2604 33.3129 62.8144 33.3129C62.4017 33.3129 61.709 33.256 61.709 33.256C61.4718 33.2417 61.4433 33.8252 61.6805 33.8346L62.117 33.8726L62.7148 35.4901L61.8561 38.2555ZM66.4354 35.6807L66.425 35.7082C66.0812 36.6132 65.74 37.5259 65.3995 38.4368C65.2795 38.7578 65.1596 39.0785 65.0397 39.3986C66.3064 38.6681 67.1272 37.2688 67.1272 35.7082C67.1272 34.9777 66.9611 34.3042 66.629 33.6923C66.7718 34.7879 66.5525 35.3698 66.4354 35.6807ZM61.0591 39.5457C59.6453 38.8627 58.6917 37.3827 58.6917 35.7083C58.6917 35.0916 58.8008 34.5319 59.0333 34.0054L59.4596 35.1735C59.9914 36.6307 60.5238 38.0897 61.0591 39.5457ZM64.1951 39.7118L62.9711 36.4008C62.7456 37.066 62.5184 37.7312 62.2905 38.3983C62.1349 38.8539 61.9789 39.3105 61.823 39.7687C62.1645 39.873 62.5346 39.9252 62.9094 39.9252C63.3601 39.9252 63.7871 39.8493 64.1951 39.7118Z" fill="white"/>
-</g>
-<path d="M327.668 56.507H54.3712V57.8533H327.668V56.507Z" fill="#F0F0F0" mask="url(#path-20-inside-1_1865_198367)"/>
-</g>
-<path d="M335.943 125.677C340.391 121.466 339.702 105.926 339.702 104.113H340.487C340.487 105.926 339.801 121.466 344.246 125.677C347.527 128.784 349.836 129.969 363.309 129.969V130.678C349.836 130.678 347.527 131.863 344.246 134.97C339.797 139.182 340.487 154.721 340.487 156.534H339.702C339.702 154.721 340.388 139.182 335.943 134.97C332.661 131.863 330.352 130.678 316.879 130.678V129.969C330.352 129.969 332.661 128.784 335.943 125.677Z" fill="#F4C759"/>
-<path opacity="0.5" d="M296.273 118.445C298.179 116.642 297.884 109.99 297.884 109.213H298.22C298.22 109.99 297.926 116.642 299.831 118.445C301.236 119.775 302.226 120.283 307.998 120.283V120.586C302.226 120.586 301.236 121.093 299.831 122.424C297.925 124.226 298.22 130.879 298.22 131.655H297.884C297.884 130.879 298.178 124.226 296.273 122.424C294.867 121.093 293.878 120.586 288.106 120.586V120.283C293.878 120.283 294.867 119.775 296.273 118.445Z" fill="#F4C759"/>
-<path opacity="0.7" d="M304.496 158.655C306.927 156.353 306.55 147.862 306.55 146.871H306.979C306.979 147.862 306.604 156.353 309.033 158.655C310.826 160.353 312.088 161 319.45 161V161.387C312.088 161.387 310.826 162.035 309.033 163.733C306.602 166.034 306.979 174.526 306.979 175.516H306.55C306.55 174.526 306.925 166.034 304.496 163.733C302.703 162.035 301.441 161.387 294.079 161.387V161C301.441 161 302.703 160.353 304.496 158.655Z" fill="#F4C759"/>
-</g>
-<defs>
-<clipPath id="clip0_1865_198367">
-<rect width="381" height="194.31" fill="white"/>
-</clipPath>
-<clipPath id="clip1_1865_198367">
-<rect width="272.832" height="167.123" fill="white" transform="translate(54.576 27.3745)"/>
-</clipPath>
-<clipPath id="clip2_1865_198367">
-<rect width="126.102" height="61.4806" fill="white" transform="translate(127.968 89.7881)"/>
-</clipPath>
-<clipPath id="clip3_1865_198367">
-<rect width="119.371" height="48.9152" fill="white" transform="translate(128.173 155.721)"/>
-</clipPath>
-<clipPath id="clip4_1865_198367">
-<path d="M54.3712 27.113H327.668V57.1802H54.3712V27.113Z" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/style.scss b/plugins/woocommerce/client/admin/client/products/tour/block-editor/style.scss
deleted file mode 100644
index 5c155074a28..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/style.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.woocommerce-block-editor-guide {
- &__header {
- width: 312px;
- height: 222px;
- background-color: #f6f7f7; /* WP Gray 0; no var available */
- background-size: cover;
-
- &-1 {
- background-image: url(./images/guide-1.png);
- }
-
- &-2 {
- background-image: url(./images/guide-2.png);
- }
-
- &-3 {
- background-image: url(./images/guide-3.png);
- }
-
- &-4 {
- background-image: url(./images/guide-4.png);
- }
- }
-
- &.components-modal__frame {
- max-width: 312px;
- }
- &__heading,
- &__text {
- margin: $gap-small $gap-large;
- }
-
- &__heading {
- font-size: 24px;
- line-height: 30px;
- }
-
- .components-guide {
- &__page-control {
- margin-top: $gap-small;
- }
- &__footer {
- width: unset;
- margin: $gap-large $gap-large;
- .components-guide__back-button {
- left: 0;
- padding: $gap-smaller $gap-small;
- }
- .components-guide__forward-button {
- right: 0;
- padding: $gap-smaller $gap-small;
- }
- .components-guide__finish-button {
- right: 0;
- }
- }
- }
-}
-
-.woocommerce-block-editor-tourkit {
- .woocommerce-tour-kit-step {
- width: 381px;
-
- .components-card__header {
- align-items: flex-start;
- height: 194px;
- background-color: #d4aaf6; /* no var available */
- background-image: url(./images/tour-header.svg);
- border-bottom: 1px solid $gray-200;
- margin-bottom: $gap;
- }
-
- &__heading {
- .woocommerce-pill {
- margin-left: $gap-small;
- background-color: $studio-yellow-5;
- border: 0;
- }
- }
- }
-}
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts b/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts
deleted file mode 100644
index c2b1d123d73..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-block-editor-tour-options.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { optionsStore } from '@woocommerce/data';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-export const BLOCK_EDITOR_TOUR_SHOWN_OPTION =
- 'woocommerce_block_product_tour_shown';
-
-export const useBlockEditorTourOptions = () => {
- const { updateOptions } = useDispatch( optionsStore );
- const { shouldTourBeShown } = useSelect( ( select ) => {
- const { getOption, hasFinishedResolution } = select( optionsStore );
-
- const wasTourShown =
- getOption( BLOCK_EDITOR_TOUR_SHOWN_OPTION ) === 'yes' ||
- ! hasFinishedResolution( 'getOption', [
- BLOCK_EDITOR_TOUR_SHOWN_OPTION,
- ] );
-
- return {
- shouldTourBeShown: ! wasTourShown,
- };
- }, [] );
-
- const dismissModal = () => {
- updateOptions( {
- [ BLOCK_EDITOR_TOUR_SHOWN_OPTION ]: 'yes',
- } );
- };
-
- return {
- dismissModal,
- shouldTourBeShown,
- };
-};
diff --git a/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx b/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx
deleted file mode 100644
index c36ffa947a3..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/block-editor/use-published-products-count.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { productsStore } from '@woocommerce/data';
-import { useSelect } from '@wordpress/data';
-
-const PUBLISHED_PRODUCTS_QUERY_PARAMS = {
- status: 'publish' as const,
- _fields: [ 'id' as const ],
-};
-
-export const usePublishedProductsCount = () => {
- return useSelect( ( select ) => {
- const { getProductsTotalCount, hasFinishedResolution } =
- select( productsStore );
-
- const publishedProductsCount = getProductsTotalCount(
- PUBLISHED_PRODUCTS_QUERY_PARAMS,
- // @ts-expect-error Todo: type of default value is not inferred correctly.
- 0
- ) as number;
-
- const loadingPublishedProductsCount = ! hasFinishedResolution(
- 'getProductsTotalCount',
- [ PUBLISHED_PRODUCTS_QUERY_PARAMS, 0 ]
- );
-
- return {
- publishedProductsCount,
- loadingPublishedProductsCount,
- // we consider a user new if they have no published products
- isNewUser: publishedProductsCount < 1,
- };
- }, [] );
-};
diff --git a/plugins/woocommerce/client/admin/client/products/tour/components/guide/icons.tsx b/plugins/woocommerce/client/admin/client/products/tour/components/guide/icons.tsx
deleted file mode 100644
index 0880f2c19d1..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/components/guide/icons.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-import { SVG, Circle } from '@wordpress/primitives';
-import { createElement } from '@wordpress/element';
-
-export const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (
- <SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
- <Circle
- cx="4"
- cy="4"
- r="4"
- fill={ isSelected ? '#419ECD' : '#E1E3E6' }
- />
- </SVG>
-);
diff --git a/plugins/woocommerce/client/admin/client/products/tour/components/guide/index.tsx b/plugins/woocommerce/client/admin/client/products/tour/components/guide/index.tsx
deleted file mode 100644
index 4ab5c047e5c..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/components/guide/index.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { useState, useRef, createElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Modal, Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PageControl from './page-control';
-import type { GuideProps } from './types';
-
-/*
- * This component was copied from @wordpress/components since we needed
- * additional functionality and also found some issues.
- * 1: The Close button was being focused every time the page changed.
- * 2: It was not possible to know if the Guide was closed because the modal was closed or because the Finish button was clicked.
- * 3: It was not possible to know which was the current page when the modal was closed.
- * 4: It was not possible to provide a link to the Finish button.
- *
- * If/when all those are implemented at some point, we can migrate to the original component.
- */
-function Guide( {
- className,
- contentLabel,
- finishButtonText = __( 'Finish', 'woocommerce' ),
- finishButtonLink,
- onFinish,
- pages = [],
-}: GuideProps ) {
- const guideContainer = useRef< HTMLDivElement >( null );
- const [ currentPage, setCurrentPage ] = useState( 0 );
- const canGoBack = currentPage > 0;
- const canGoForward = currentPage < pages.length - 1;
-
- const goBack = () => {
- if ( canGoBack ) {
- setCurrentPage( currentPage - 1 );
- }
- };
-
- const goForward = () => {
- if ( canGoForward ) {
- setCurrentPage( currentPage + 1 );
- }
- };
-
- if ( pages.length === 0 ) {
- return null;
- }
-
- return (
- <Modal
- className={ clsx( 'components-guide', className ) }
- title={ contentLabel }
- onRequestClose={ () => {
- onFinish( currentPage, 'close' );
- } }
- onKeyDown={ ( event ) => {
- if ( event.code === 'ArrowLeft' ) {
- goBack();
- // Do not scroll the modal's contents.
- event.preventDefault();
- } else if ( event.code === 'ArrowRight' ) {
- goForward();
- // Do not scroll the modal's contents.
- event.preventDefault();
- }
- } }
- ref={ guideContainer }
- >
- <div className="components-guide__container">
- <div className="components-guide__page">
- { pages[ currentPage ].image }
-
- { pages.length > 1 && (
- <PageControl
- currentPage={ currentPage }
- numberOfPages={ pages.length }
- setCurrentPage={ setCurrentPage }
- />
- ) }
-
- { pages[ currentPage ].content }
- </div>
-
- <div className="components-guide__footer">
- { canGoBack && (
- <Button
- className="components-guide__back-button"
- variant="tertiary"
- onClick={ goBack }
- >
- { __( 'Previous', 'woocommerce' ) }
- </Button>
- ) }
- { canGoForward && (
- <Button
- className="components-guide__forward-button"
- variant="primary"
- onClick={ goForward }
- >
- { __( 'Next', 'woocommerce' ) }
- </Button>
- ) }
- { ! canGoForward && (
- <Button
- className="components-guide__finish-button"
- variant="primary"
- href={ finishButtonLink }
- target={ finishButtonLink ? '_blank' : undefined }
- rel={ finishButtonLink ? 'noopener' : undefined }
- onClick={ () => onFinish( currentPage, 'finish' ) }
- >
- { finishButtonText }
- </Button>
- ) }
- </div>
- </div>
- </Modal>
- );
-}
-
-export default Guide;
diff --git a/plugins/woocommerce/client/admin/client/products/tour/components/guide/page-control.tsx b/plugins/woocommerce/client/admin/client/products/tour/components/guide/page-control.tsx
deleted file mode 100644
index d4b01b70b9c..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/components/guide/page-control.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { PageControlIcon } from './icons';
-import type { PageControlProps } from './types';
-
-export default function PageControl( {
- currentPage,
- numberOfPages,
- setCurrentPage,
-}: PageControlProps ) {
- return (
- <ul
- className="components-guide__page-control"
- aria-label={ __( 'Guide controls', 'woocommerce' ) }
- >
- { Array.from( { length: numberOfPages } ).map( ( _, page ) => (
- <li
- key={ page }
- // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
- aria-current={ page === currentPage ? 'step' : undefined }
- >
- <Button
- key={ page }
- icon={
- <PageControlIcon
- isSelected={ page === currentPage }
- />
- }
- aria-label={ sprintf(
- /* translators: 1: current page number 2: total number of pages */
- __( 'Page %1$d of %2$d', 'woocommerce' ),
- page + 1,
- numberOfPages
- ) }
- onClick={ () => setCurrentPage( page ) }
- />
- </li>
- ) ) }
- </ul>
- );
-}
diff --git a/plugins/woocommerce/client/admin/client/products/tour/components/guide/types.ts b/plugins/woocommerce/client/admin/client/products/tour/components/guide/types.ts
deleted file mode 100644
index 04cc1b36b2b..00000000000
--- a/plugins/woocommerce/client/admin/client/products/tour/components/guide/types.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
-export type Page = {
- /**
- * Content of the page.
- */
- content: ReactNode;
- /**
- * Image displayed above the page content.
- */
- image?: ReactNode;
-};
-
-export type GuideProps = {
- /**
- * Deprecated. Use `pages` prop instead.
- *
- * @deprecated since 5.5
- */
- children?: ReactNode;
- /**
- * A custom class to add to the modal.
- */
- className?: string;
- /**
- * Used as the modal's accessibility label.
- */
- contentLabel: string;
- /**
- * Use this to customize the label of the _Finish_ button shown at the end of the guide.
- *
- * @default 'Finish'
- */
- finishButtonText?: string;
- /**
- * Use this to customize href of the _Finish_ button shown at the end of the guide.
- *
- */
- finishButtonLink?: string;
- /**
- * A function which is called when the guide is closed, either through closing the dialog or clicking the Finish button.
- */
- onFinish: ( currentPage: number, origin: 'close' | 'finish' ) => void;
- /**
- * A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.
- *
- * @default []
- */
- pages?: Page[];
-};
-
-export type PageControlProps = {
- /**
- * Current page index.
- */
- currentPage: number;
- /**
- * Total number of pages.
- */
- numberOfPages: number;
- /**
- * Called when user clicks on a `PageControlIcon` button.
- */
- setCurrentPage: ( page: number ) => void;
-};
diff --git a/plugins/woocommerce/client/admin/client/settings-email/settings-email-preview-send.tsx b/plugins/woocommerce/client/admin/client/settings-email/settings-email-preview-send.tsx
index 61ee6893bc5..d5fd07042a5 100644
--- a/plugins/woocommerce/client/admin/client/settings-email/settings-email-preview-send.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-email/settings-email-preview-send.tsx
@@ -13,8 +13,6 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import { emailPreviewNonce } from './settings-email-preview-nonce';
-// Inlined from @woocommerce/product-editor's src/utils/validate-email.ts to
-// avoid pulling the whole package in for one tiny function.
const isValidEmail = ( email: string ) => {
const re =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
diff --git a/plugins/woocommerce/client/admin/client/task-lists/fills/products/use-create-product-by-type.ts b/plugins/woocommerce/client/admin/client/task-lists/fills/products/use-create-product-by-type.ts
index 72c71b2775a..00633daf2b8 100644
--- a/plugins/woocommerce/client/admin/client/task-lists/fills/products/use-create-product-by-type.ts
+++ b/plugins/woocommerce/client/admin/client/task-lists/fills/products/use-create-product-by-type.ts
@@ -5,7 +5,6 @@ import { useDispatch } from '@wordpress/data';
import { itemsStore } from '@woocommerce/data';
import { navigateTo } from '@woocommerce/navigation';
import { getAdminLink } from '@woocommerce/settings';
-import { loadExperimentAssignment } from '@woocommerce/explat';
import { useState } from '@wordpress/element';
/**
@@ -13,10 +12,6 @@ import { useState } from '@wordpress/element';
*/
import { ProductTypeKey } from './constants';
import { createNoticesFromResponse } from '../../../lib/notices';
-import { getAdminSetting } from '~/utils/admin-settings';
-
-const EXPERIMENT_NAME =
- 'woocommerce_product_creation_experience_pricing_to_general_202406';
export const useCreateProductByType = () => {
const { createProductFromTemplate } = useDispatch( itemsStore );
@@ -47,26 +42,6 @@ export const useCreateProductByType = () => {
const createProductByType = async ( type: ProductTypeKey ) => {
setIsRequesting( true );
- if (
- type === 'physical' ||
- type === 'variable' ||
- type === 'digital' ||
- type === 'grouped' ||
- type === 'external'
- ) {
- const assignment = await loadExperimentAssignment(
- EXPERIMENT_NAME
- );
- if ( assignment.variationName === 'treatment' ) {
- const url = await getProductEditPageLink( type );
- const _feature_nonce = getAdminSetting( '_feature_nonce' );
- window.location.href =
- url +
- `&product_block_editor=1&_feature_nonce=${ _feature_nonce }`;
- return;
- }
- }
-
const url = await getProductEditPageLink( type );
if ( url ) {
navigateTo( { url } );
diff --git a/plugins/woocommerce/client/admin/config/core.json b/plugins/woocommerce/client/admin/config/core.json
index ae942d24c40..4b77768bce3 100644
--- a/plugins/woocommerce/client/admin/config/core.json
+++ b/plugins/woocommerce/client/admin/config/core.json
@@ -3,7 +3,6 @@
"activity-panels": true,
"analytics": true,
"analytics-scheduled-import": true,
- "product-block-editor": true,
"product-data-views": false,
"experimental-blocks": false,
"experimental-iapi-mini-cart": true,
diff --git a/plugins/woocommerce/client/admin/config/development.json b/plugins/woocommerce/client/admin/config/development.json
index c478e8e386f..b125fd1bbce 100644
--- a/plugins/woocommerce/client/admin/config/development.json
+++ b/plugins/woocommerce/client/admin/config/development.json
@@ -3,7 +3,6 @@
"activity-panels": true,
"analytics": true,
"analytics-scheduled-import": true,
- "product-block-editor": true,
"product-data-views": false,
"experimental-blocks": true,
"experimental-iapi-mini-cart": true,
diff --git a/plugins/woocommerce/client/admin/package.json b/plugins/woocommerce/client/admin/package.json
index 5236f880623..4aae4129113 100644
--- a/plugins/woocommerce/client/admin/package.json
+++ b/plugins/woocommerce/client/admin/package.json
@@ -69,7 +69,6 @@
"@woocommerce/navigation": "workspace:*",
"@woocommerce/number": "workspace:*",
"@woocommerce/onboarding": "workspace:*",
- "@woocommerce/product-editor": "workspace:*",
"@woocommerce/remote-logging": "workspace:*",
"@woocommerce/sanitize": "workspace:*",
"@woocommerce/tracks": "workspace:*",
diff --git a/plugins/woocommerce/client/admin/tsconfig.json b/plugins/woocommerce/client/admin/tsconfig.json
index e476f64e2ce..1ee9747a3d3 100644
--- a/plugins/woocommerce/client/admin/tsconfig.json
+++ b/plugins/woocommerce/client/admin/tsconfig.json
@@ -68,9 +68,6 @@
{
"path": "../../../../packages/js/onboarding"
},
- {
- "path": "../../../../packages/js/product-editor"
- },
{
"path": "../../../../packages/js/remote-logging"
},
diff --git a/plugins/woocommerce/client/admin/webpack.config.js b/plugins/woocommerce/client/admin/webpack.config.js
index f5626fca174..d3263dec38a 100644
--- a/plugins/woocommerce/client/admin/webpack.config.js
+++ b/plugins/woocommerce/client/admin/webpack.config.js
@@ -62,7 +62,6 @@ const wcAdminPackages = [
'tracks',
'onboarding',
'block-templates',
- 'product-editor',
'sanitize',
'settings-ui-sdk',
'remote-logging',
@@ -267,21 +266,6 @@ const jsConfig = {
},
} ),
- // product-editor's block.json files come straight from source so PHP's
- // BlockRegistry can load them without a separate package build.
- new CopyWebpackPlugin( {
- patterns: [
- {
- context: path.join(
- __dirname,
- '../../../../packages/js/product-editor/src/blocks'
- ),
- from: '**/block.json',
- to: './product-editor/blocks/[path][name][ext]',
- },
- ],
- } ),
-
// React Fast Refresh.
! isProduction && isHot && new ReactRefreshWebpackPlugin(),
diff --git a/plugins/woocommerce/client/blocks/tests/js/jest.config.js b/plugins/woocommerce/client/blocks/tests/js/jest.config.js
index 45024182e82..c6a5ff7a2c9 100644
--- a/plugins/woocommerce/client/blocks/tests/js/jest.config.js
+++ b/plugins/woocommerce/client/blocks/tests/js/jest.config.js
@@ -89,8 +89,7 @@ module.exports = {
// subpath imports through source so tests don't depend on built
// artifacts. Must come after all blocks-internal aliases above and
// before the generic build-module rewrite so @woocommerce/* subpaths
- // (e.g. @woocommerce/product-editor/build-module/utils/...) land on
- // src/ instead of build/.
+ // land on src/ instead of build/.
'^@woocommerce/([^/]+)/(?:src|build|build-module|build-types)/(.+)$':
'<rootDir>/../../../../packages/js/$1/src/$2',
'^@woocommerce/([^/]+)/(.+)$':
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php b/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
index 86349ee7d31..e1bdf292283 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
@@ -506,7 +506,7 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
'export_selected_products_nonce' => current_user_can( 'export' ) ? wp_create_nonce( 'export-selected-products' ) : null,
),
'urls' => array(
- 'add_product' => \Automattic\WooCommerce\Utilities\FeaturesUtil::feature_is_enabled( 'product_block_editor' ) ? esc_url_raw( admin_url( 'admin.php?page=wc-admin&path=/add-product' ) ) : null,
+ 'add_product' => null,
'import_products' => current_user_can( 'import' ) ? esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_importer' ) ) : null,
'export_products' => current_user_can( 'export' ) ? esc_url_raw( admin_url( 'edit.php?post_type=product&page=product_exporter' ) ) : null,
),
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-menus.php b/plugins/woocommerce/includes/admin/class-wc-admin-menus.php
index edec527db3e..da9f10ee596 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin-menus.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-menus.php
@@ -12,7 +12,6 @@ use Automattic\WooCommerce\Internal\Admin\Orders\PageController as Custom_Orders
use Automattic\WooCommerce\Internal\Admin\Logging\PageController as LoggingPageController;
use Automattic\WooCommerce\Internal\Admin\Logging\FileV2\{ FileListTable, SearchListTable };
use Automattic\WooCommerce\Internal\DataStores\Orders\CustomOrdersTableController;
-use Automattic\WooCommerce\Utilities\FeaturesUtil;
defined( 'ABSPATH' ) || exit;
@@ -39,7 +38,6 @@ class WC_Admin_Menus {
// Add menus.
add_action( 'admin_menu', array( $this, 'menu_highlight' ) );
add_action( 'admin_menu', array( $this, 'menu_order_count' ) );
- add_action( 'admin_menu', array( $this, 'maybe_add_new_product_management_experience' ) );
add_action( 'admin_menu', array( $this, 'admin_menu' ), 9 );
add_action( 'admin_menu', array( $this, 'orders_menu' ), 9 );
add_action( 'admin_menu', array( $this, 'reports_menu' ), 20 );
@@ -521,24 +519,6 @@ class WC_Admin_Menus {
);
}
- /**
- * Maybe add new management product experience.
- *
- * @return void
- */
- public function maybe_add_new_product_management_experience() {
- if ( FeaturesUtil::feature_is_enabled( 'product_block_editor' ) ) {
- global $submenu;
- if ( isset( $submenu['edit.php?post_type=product'][10] ) ) {
- // Disable phpcs since we need to override submenu classes.
- // Note that `phpcs:ignore WordPress.Variables.GlobalVariables.OverrideProhibited` does not work to disable this check.
- // phpcs:disable
- $submenu['edit.php?post_type=product'][10][2] = 'admin.php?page=wc-admin&path=/add-product';
- // phps:enableWordPress.Variables.GlobalVariables.OverrideProhibited
- }
- }
- }
-
/**
* Hide the submenu page based on slug and return the item that was hidden.
*
diff --git a/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php b/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
deleted file mode 100644
index d309f28cd2b..00000000000
--- a/plugins/woocommerce/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
+++ /dev/null
@@ -1,146 +0,0 @@
-<?php
-/**
- * REST API Layout Templates controller
- *
- * Handles requests to /layout-templates.
- *
- * @package WooCommerce\RestApi
- * @since 8.6.0
- */
-
-defined( 'ABSPATH' ) || exit;
-
-use Automattic\WooCommerce\LayoutTemplates\LayoutTemplateRegistry;
-
-/**
- * REST API Layout Templates controller class.
- */
-class WC_REST_Layout_Templates_Controller extends WC_REST_Controller {
-
- /**
- * Endpoint namespace.
- *
- * @var string
- */
- protected $namespace = 'wc/v3';
-
- /**
- * Route base.
- *
- * @var string
- */
- protected $rest_base = 'layout-templates';
-
- /**
- * Register the routes for template layouts.
- */
- public function register_routes() {
- register_rest_route(
- $this->namespace,
- '/' . $this->rest_base,
- array(
- 'methods' => WP_REST_Server::READABLE,
- 'callback' => array( $this, 'get_items' ),
- 'permission_callback' => array( $this, 'get_items_permissions_check' ),
- 'args' => array(
- 'area' => array(
- 'description' => __( 'Area to get templates for.', 'woocommerce' ),
- 'type' => 'string',
- 'default' => '',
- ),
- ),
- )
- );
-
- register_rest_route(
- $this->namespace,
- '/' . $this->rest_base . '/(?P<id>\w[\w\s\-]*)',
- array(
- 'args' => array(
- 'id' => array(
- 'description' => __( 'Unique identifier for the resource.', 'woocommerce' ),
- 'type' => 'string',
- ),
- ),
- array(
- 'methods' => WP_REST_Server::READABLE,
- 'callback' => array( $this, 'get_item' ),
- 'permission_callback' => array( $this, 'get_item_permissions_check' ),
- 'args' => array(),
- ),
- )
- );
- }
-
- /**
- * Check if a given request has access to read template layouts.
- *
- * @param WP_REST_Request $request The request.
- */
- public function get_items_permissions_check( $request ): bool {
- return true;
- }
-
- /**
- * Check if a given request has access to read a template layout.
- *
- * @param WP_REST_Request $request The request.
- */
- public function get_item_permissions_check( $request ): bool {
- return true;
- }
-
- /**
- * Handle request for template layouts.
- *
- * @param WP_REST_Request $request The request.
- */
- public function get_items( $request ) {
- $layout_templates = $this->get_layout_templates(
- array(
- 'area' => $request['area'],
- )
- );
-
- $response = rest_ensure_response( $layout_templates );
-
- return $response;
- }
-
- /**
- * Handle request for a single template layout.
- *
- * @param WP_REST_Request $request The request.
- */
- public function get_item( $request ) {
- $layout_templates = $this->get_layout_templates(
- array(
- 'id' => $request['id'],
- )
- );
-
- if ( count( $layout_templates ) !== 1 ) {
- return new WP_Error( 'woocommerce_rest_layout_template_invalid_id', __( 'Invalid layout template ID.', 'woocommerce' ), array( 'status' => 404 ) );
- }
-
- $response = rest_ensure_response( current( $layout_templates ) );
-
- return $response;
- }
-
- /**
- * Get layout templates.
- *
- * @param array $query_params Query params.
- */
- private function get_layout_templates( array $query_params ): array {
- $layout_template_registry = wc_get_container()->get( LayoutTemplateRegistry::class );
-
- return array_map(
- function( $layout_template ) {
- return $layout_template->to_json();
- },
- $layout_template_registry->instantiate_layout_templates( $query_params )
- );
- }
-}
diff --git a/plugins/woocommerce/includes/rest-api/Server.php b/plugins/woocommerce/includes/rest-api/Server.php
index 85ffd4ad8f5..beecb76651a 100644
--- a/plugins/woocommerce/includes/rest-api/Server.php
+++ b/plugins/woocommerce/includes/rest-api/Server.php
@@ -174,7 +174,6 @@ class Server {
'coupons' => 'WC_REST_Coupons_Controller',
'customer-downloads' => 'WC_REST_Customer_Downloads_Controller',
'customers' => 'WC_REST_Customers_Controller',
- 'layout-templates' => 'WC_REST_Layout_Templates_Controller',
'network-orders' => 'WC_REST_Network_Orders_Controller',
'order-notes' => 'WC_REST_Order_Notes_Controller',
'order-refunds' => 'WC_REST_Order_Refunds_Controller',
diff --git a/plugins/woocommerce/phpstan-baseline.neon b/plugins/woocommerce/phpstan-baseline.neon
index ad931acffc1..800c230cf69 100644
--- a/plugins/woocommerce/phpstan-baseline.neon
+++ b/plugins/woocommerce/phpstan-baseline.neon
@@ -28680,36 +28680,6 @@ parameters:
count: 1
path: includes/rest-api/Controllers/Version3/class-wc-rest-data-currencies-controller.php
- -
- message: '#^Method WC_REST_Layout_Templates_Controller\:\:get_item\(\) has parameter \$request with generic class WP_REST_Request but does not specify its types\: T$#'
- identifier: missingType.generics
- count: 1
- path: includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
-
- -
- message: '#^Method WC_REST_Layout_Templates_Controller\:\:get_item_permissions_check\(\) has parameter \$request with generic class WP_REST_Request but does not specify its types\: T$#'
- identifier: missingType.generics
- count: 1
- path: includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
-
- -
- message: '#^Method WC_REST_Layout_Templates_Controller\:\:get_items\(\) has parameter \$request with generic class WP_REST_Request but does not specify its types\: T$#'
- identifier: missingType.generics
- count: 1
- path: includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
-
- -
- message: '#^Method WC_REST_Layout_Templates_Controller\:\:get_items_permissions_check\(\) has parameter \$request with generic class WP_REST_Request but does not specify its types\: T$#'
- identifier: missingType.generics
- count: 1
- path: includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
-
- -
- message: '#^Method WC_REST_Layout_Templates_Controller\:\:register_routes\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller.php
-
-
message: '#^PHPDoc tag @extends has invalid value \(WC_REST_Network_Orders_V2_Controller\)\: Unexpected token "\\n ", expected ''\<'' at offset 132 on line 5$#'
identifier: phpDoc.parseError
@@ -47349,306 +47319,6 @@ parameters:
count: 1
path: src/Admin/Features/PaymentGatewaySuggestions/PaymentGatewaysController.php
- -
- message: '#^Access to property \$name on an unknown class Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_Block_Editor_Context\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Class Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init referenced with incorrect case\: Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\INIT\.$#'
- identifier: class.nameCase
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:augment_attributes\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:augment_uses_context\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:get_file_path\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:has_role_support\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:register_block\(\) has invalid return type Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_Block_Type\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:register_block\(\) should return Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_Block_Type\|false but returns WP_Block_Type\|false\.$#'
- identifier: return.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:register_categories\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:register_product_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:unregister\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Parameter \#1 \$json of function json_decode expects string, string\|false given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Parameter \$editor_context of method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockRegistry\:\:register_categories\(\) has invalid type Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_Block_Editor_Context\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockTemplateUtils\:\:get_template_content\(\) should return string but returns string\|false\.$#'
- identifier: return.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/BlockTemplateUtils.php
-
- -
- message: '#^Access to property \$data on an unknown class Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_REST_Response\.$#'
- identifier: class.notFound
- count: 2
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Action callback returns string but should not return anything\.$#'
- identifier: return.void
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Call to method meta_exists\(\) on an unknown class Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WC_Product\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Cannot call method is_block_editor\(\) on WP_Screen\|null\.$#'
- identifier: method.nonObject
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:dequeue_conflicting_styles\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:enqueue_scripts\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:enqueue_styles\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:get_product_editor_settings\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:possibly_add_template_id\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:register_layout_templates\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:register_product_templates\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:register_user_metas\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:set_current_screen_to_block_editor_if_wc_admin\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Parameter \$product of method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:possibly_add_template_id\(\) has invalid type Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WC_Product\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Parameter \$response of method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Init\:\:possibly_add_template_id\(\) has invalid type Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\WP_REST_Response\.$#'
- identifier: class.notFound
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Init.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductFormsController\:\:init\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductFormsController.php
-
- -
- message: '#^Parameter \#1 \$file_path of static method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockTemplateUtils\:\:get_template_content\(\) expects string, string\|true given\.$#'
- identifier: argument.type
- count: 2
- path: src/Admin/Features/ProductBlockEditor/ProductFormsController.php
-
- -
- message: '#^Parameter \#1 \$file_path of static method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\BlockTemplateUtils\:\:get_template_file_data\(\) expects string, string\|true given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductFormsController.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplate\:\:set_description\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplate\:\:set_icon\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplate\:\:set_layout_template_id\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplate\:\:set_order\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/ProductTemplate.php
-
- -
- message: '#^Cannot access property \$action on WP_Screen\|null\.$#'
- identifier: property.nonObject
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot access property \$base on WP_Screen\|null\.$#'
- identifier: property.nonObject
- count: 2
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot access property \$post_type on WP_Screen\|null\.$#'
- identifier: property.nonObject
- count: 2
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot call method get_meta\(\) on WC_Product\|false\.$#'
- identifier: method.nonObject
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot call method get_type\(\) on WC_Product\|false\.$#'
- identifier: method.nonObject
- count: 2
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot call method is_downloadable\(\) on WC_Product\|false\.$#'
- identifier: method.nonObject
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Cannot call method is_virtual\(\) on WC_Product\|false\.$#'
- identifier: method.nonObject
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Parameter \#1 \$product_id of method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\RedirectionController\:\:is_product_supported\(\) expects int, int\|null given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Parameter \#2 \$str of function explode expects string, string\|false\|null given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/RedirectionController.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Tracks\:\:init\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Tracks.php
-
- -
- message: '#^Parameter \#1 \$encoded_string of function parse_str expects string, string\|false\|null given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Tracks.php
-
- -
- message: '#^Parameter \#1 \$url of function wp_parse_url expects string, string\|false given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Tracks.php
-
- -
- message: '#^Parameter \#1 \$url of method Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\Tracks\:\:is_product_editor_page\(\) expects string, string\|false given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Tracks.php
-
- -
- message: '#^Parameter \#2 \$str of function explode expects string, array\<mixed\>\|string given\.$#'
- identifier: argument.type
- count: 1
- path: src/Admin/Features/ProductBlockEditor/Tracks.php
-
-
message: '#^Cannot access property \$labels on WP_Post_Type\|null\.$#'
identifier: property.nonObject
@@ -64302,330 +63972,6 @@ parameters:
count: 1
path: src/Internal/Features/FeaturesController.php
- -
- message: '#^ Parameter \#2 \$root_template of class Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group constructor is passed by reference, so it expects variables only$#'
- identifier: argument.byRef
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/AbstractProductFormTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\AbstractProductFormTemplate\:\:add_group\(\) should return Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface but returns Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockInterface\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/AbstractProductFormTemplate.php
-
- -
- message: '#^ Parameter \#2 \$root_template of class Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Section constructor is passed by reference, so it expects variables only$#'
- identifier: argument.byRef
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface\:\:cache_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface\:\:uncache_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\ContainerInterface\:\:remove_inner_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Call to function method_exists\(\) with \$this\(Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\) and ''is_detached'' will always evaluate to true\.$#'
- identifier: function.alreadyNarrowedType
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:add_section\(\) should return Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\SectionInterface but returns Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockInterface\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_add_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_add_block_error_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_add_specific_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_remove_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_remove_block_error_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:do_after_remove_specific_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:remove_block\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:remove_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Group\:\:remove_inner_block\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
-
- -
- message: '#^ Parameter \#2 \$root_template of class Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock constructor is passed by reference, so it expects variables only$#'
- identifier: argument.byRef
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface\:\:cache_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface\:\:uncache_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\ContainerInterface\:\:remove_inner_block\(\)\.$#'
- identifier: method.notFound
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Call to function method_exists\(\) with \$this\(Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\) and ''is_detached'' will always evaluate to true\.$#'
- identifier: function.alreadyNarrowedType
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_add_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_add_block_error_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_add_specific_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_remove_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_remove_block_error_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:do_after_remove_specific_block_action\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:remove_block\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:remove_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductBlock\:\:remove_inner_block\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockInterface\:\:add_block\(\)\.$#'
- identifier: method.notFound
- count: 4
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Cannot call method add_block\(\) on Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null\.$#'
- identifier: method.nonObject
- count: 3
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Cannot call method add_section\(\) on Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null\.$#'
- identifier: method.nonObject
- count: 5
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_downloadable_product_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_general_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_inventory_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_shipping_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^Parameter \#1 \$parent_block of method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\ProductVariationTemplate\:\:add_downloadable_product_blocks\(\) expects Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface, Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null given\.$#'
- identifier: argument.type
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
-
- -
- message: '#^ Parameter \#2 \$root_template of class Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Subsection constructor is passed by reference, so it expects variables only$#'
- identifier: argument.byRef
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Section.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\Section\:\:add_subsection\(\) should return Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\SubsectionInterface but returns Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockInterface\.$#'
- identifier: return.type
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/Section.php
-
- -
- message: '#^Call to an undefined method Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockInterface\:\:add_block\(\)\.$#'
- identifier: method.notFound
- count: 10
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Cannot call method add_block\(\) on Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null\.$#'
- identifier: method.nonObject
- count: 3
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Cannot call method add_section\(\) on Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null\.$#'
- identifier: method.nonObject
- count: 11
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_downloadable_product_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_general_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_inventory_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_linked_products_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_organization_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_shipping_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_variation_group_blocks\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
- -
- message: '#^Parameter \#1 \$parent_block of method Automattic\\WooCommerce\\Internal\\Features\\ProductBlockEditor\\ProductTemplates\\SimpleProductTemplate\:\:add_downloadable_product_blocks\(\) expects Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface, Automattic\\WooCommerce\\Admin\\Features\\ProductBlockEditor\\ProductTemplates\\GroupInterface\|null given\.$#'
- identifier: argument.type
- count: 1
- path: src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
-
-
message: '#^Action callback returns array but should not return anything\.$#'
identifier: return.void
@@ -70638,30 +69984,6 @@ parameters:
count: 1
path: src/Internal/Utilities/WebhookUtil.php
- -
- message: '#^@param Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface \$layout_template does not accept actual type of parameter\: object\.$#'
- identifier: parameter.phpDocType
- count: 1
- path: src/LayoutTemplates/LayoutTemplateRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\LayoutTemplates\\LayoutTemplateRegistry\:\:get_layout_template_instance\(\) should return Automattic\\WooCommerce\\Admin\\BlockTemplates\\BlockTemplateInterface but returns object\.$#'
- identifier: return.type
- count: 1
- path: src/LayoutTemplates/LayoutTemplateRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\LayoutTemplates\\LayoutTemplateRegistry\:\:register\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/LayoutTemplates/LayoutTemplateRegistry.php
-
- -
- message: '#^Method Automattic\\WooCommerce\\LayoutTemplates\\LayoutTemplateRegistry\:\:unregister_all\(\) has no return type specified\.$#'
- identifier: missingType.return
- count: 1
- path: src/LayoutTemplates/LayoutTemplateRegistry.php
-
-
message: '#^Method Automattic\\WooCommerce\\Packages\:\:deactivate_merged_packages\(\) has no return type specified\.$#'
identifier: missingType.return
diff --git a/plugins/woocommerce/src/Admin/BlockTemplates/README.md b/plugins/woocommerce/src/Admin/BlockTemplates/README.md
index 20896de71fd..2e610ffd5cf 100644
--- a/plugins/woocommerce/src/Admin/BlockTemplates/README.md
+++ b/plugins/woocommerce/src/Admin/BlockTemplates/README.md
@@ -4,12 +4,7 @@ The `Automattic\WooCommerce\Admin\BlockTemplates` namespace contains interfaces
## Usage
-Objects that implement the interfaces and fire the hooks in this namespace are instantiated using more specific APIs,
-such as:
-
-- [Product Editor Templates](../Features/ProductBlockEditor/ProductTemplates/README.md)
-
-Please see the documentation for those APIs for more information on how to do this.
+Objects that implement the interfaces and fire the hooks in this namespace are instantiated using more specific APIs.
Note: In order to use these interface type definitions, you will need to import them. For example to import the `BlockInterface`:
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php
index 0f420dbca08..74f84f80fca 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php
@@ -1,20 +1,16 @@
<?php
/**
- * WooCommerce Product Editor Block Registration
+ * WooCommerce Product Editor Block Registration compatibility shim.
*/
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
-use Automattic\WooCommerce\Blocks\Utils\Utils;
-
/**
- * Product block registration and style registration functionality.
+ * Removed product block editor block registry.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
class BlockRegistry {
-
/**
* Version that product editor APIs were deprecated in.
*/
@@ -23,323 +19,132 @@ class BlockRegistry {
/**
* Generic blocks directory.
*/
- const GENERIC_BLOCKS_DIR = 'product-editor/blocks/generic';
+ const GENERIC_BLOCKS_DIR = '';
+
/**
* Product fields blocks directory.
*/
- const PRODUCT_FIELDS_BLOCKS_DIR = 'product-editor/blocks/product-fields';
+ const PRODUCT_FIELDS_BLOCKS_DIR = '';
+
/**
* Array of all available generic blocks.
*/
- const GENERIC_BLOCKS = array(
- 'woocommerce/conditional',
- 'woocommerce/product-checkbox-field',
- 'woocommerce/product-collapsible',
- 'woocommerce/product-radio-field',
- 'woocommerce/product-pricing-field',
- 'woocommerce/product-section',
- 'woocommerce/product-section-description',
- 'woocommerce/product-subsection',
- 'woocommerce/product-subsection-description',
- 'woocommerce/product-details-section-description',
- 'woocommerce/product-tab',
- 'woocommerce/product-toggle-field',
- 'woocommerce/product-taxonomy-field',
- 'woocommerce/product-text-field',
- 'woocommerce/product-text-area-field',
- 'woocommerce/product-number-field',
- 'woocommerce/product-linked-list-field',
- 'woocommerce/product-select-field',
- 'woocommerce/product-notice-field',
- );
+ const GENERIC_BLOCKS = array();
/**
* Array of all available product fields blocks.
*/
- const PRODUCT_FIELDS_BLOCKS = array(
- 'woocommerce/product-catalog-visibility-field',
- 'woocommerce/product-custom-fields',
- 'woocommerce/product-custom-fields-toggle-field',
- 'woocommerce/product-description-field',
- 'woocommerce/product-downloads-field',
- 'woocommerce/product-images-field',
- 'woocommerce/product-inventory-email-field',
- 'woocommerce/product-sku-field',
- 'woocommerce/product-name-field',
- 'woocommerce/product-regular-price-field',
- 'woocommerce/product-sale-price-field',
- 'woocommerce/product-schedule-sale-fields',
- 'woocommerce/product-shipping-class-field',
- 'woocommerce/product-shipping-dimensions-fields',
- 'woocommerce/product-summary-field',
- 'woocommerce/product-tag-field',
- 'woocommerce/product-inventory-quantity-field',
- 'woocommerce/product-variation-items-field',
- 'woocommerce/product-password-field',
- 'woocommerce/product-list-field',
- 'woocommerce/product-has-variations-notice',
- 'woocommerce/product-single-variation-notice',
- );
+ const PRODUCT_FIELDS_BLOCKS = array();
/**
* Singleton instance.
*
- * @var BlockRegistry
+ * @var BlockRegistry|null
*/
private static $instance = null;
/**
- * Get the singleton instance.
- */
- public static function get_instance(): BlockRegistry {
- if ( ! self::$instance ) {
- self::$instance = new self();
- }
-
- return self::$instance;
- }
-
- /**
- * Constructor
- */
- protected function __construct() {
- add_filter( 'block_categories_all', array( $this, 'register_categories' ), 10, 2 );
- $this->register_product_blocks();
- }
-
- /**
- * Get a file path for a given block file.
+ * Whether the removal warning has already been logged for the current request.
*
- * @param string $path File path.
- * @param string $dir File directory.
- */
- private function get_file_path( $path, $dir ) {
- return WC_ABSPATH . WCAdminAssets::get_path( 'js' ) . trailingslashit( $dir ) . $path;
- }
-
- /**
- * Register all the product blocks.
+ * @var bool
*/
- private function register_product_blocks() {
- foreach ( self::PRODUCT_FIELDS_BLOCKS as $block_name ) {
- $this->register_block( $block_name, self::PRODUCT_FIELDS_BLOCKS_DIR );
- }
- foreach ( self::GENERIC_BLOCKS as $block_name ) {
- $this->register_block( $block_name, self::GENERIC_BLOCKS_DIR );
- }
- }
+ private static $removal_warning_logged = false;
/**
- * Register product related block categories.
- *
- * @param array[] $block_categories Array of categories for block types.
- * @param WP_Block_Editor_Context $editor_context The current block editor context.
+ * Constructor.
*/
- public function register_categories( $block_categories, $editor_context ) {
- if ( INIT::EDITOR_CONTEXT_NAME === $editor_context->name ) {
- $block_categories[] = array(
- 'slug' => 'woocommerce',
- 'title' => __( 'WooCommerce', 'woocommerce' ),
- 'icon' => null,
- );
- }
-
- return $block_categories;
- }
+ protected function __construct() {}
/**
- * Get the block name without the "woocommerce/" prefix.
- *
- * @param string $block_name Block name.
- *
- * @return string
- */
- private function remove_block_prefix( $block_name ) {
- if ( 0 === strpos( $block_name, 'woocommerce/' ) ) {
- return substr_replace( $block_name, '', 0, strlen( 'woocommerce/' ) );
- }
-
- return $block_name;
- }
-
- /**
- * Augment the attributes of a block by adding attributes that are used by the product editor.
+ * Get the singleton instance.
*
- * @param array $attributes Block attributes.
+ * @return BlockRegistry
*/
- private function augment_attributes( $attributes ) {
- global $wp_version;
- // Note: If you modify this function, also update the client-side
- // registerWooBlockType function in @woocommerce/block-templates.
- $augmented_attributes = array_merge(
- $attributes,
- array(
- '_templateBlockId' => array(
- 'type' => 'string',
- 'role' => 'content',
- ),
- '_templateBlockOrder' => array(
- 'type' => 'integer',
- 'role' => 'content',
- ),
- '_templateBlockHideConditions' => array(
- 'type' => 'array',
- 'role' => 'content',
- ),
- '_templateBlockDisableConditions' => array(
- 'type' => 'array',
- 'role' => 'content',
- ),
- 'disabled' => isset( $attributes['disabled'] ) ? $attributes['disabled'] : array(
- 'type' => 'boolean',
- 'role' => 'content',
- ),
- )
- );
- if ( ! $this->has_role_support() ) {
- foreach ( $augmented_attributes as $key => $attribute ) {
- if ( isset( $attribute['role'] ) ) {
- $augmented_attributes[ $key ]['__experimentalRole'] = $attribute['role'];
- }
- }
- }
- return $augmented_attributes;
- }
+ public static function get_instance(): BlockRegistry {
+ $instance = self::$instance;
- /**
- * Checks for block attribute role support.
- */
- private function has_role_support() {
- if ( Utils::wp_version_compare( '6.7', '>=' ) ) {
- return true;
+ if ( null === $instance ) {
+ $instance = new self();
+ self::$instance = $instance;
}
- if ( is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
- $gutenberg_version = '';
+ self::maybe_log_removal_warning();
- if ( defined( 'GUTENBERG_VERSION' ) ) {
- $gutenberg_version = GUTENBERG_VERSION;
- }
-
- if ( ! $gutenberg_version ) {
- $gutenberg_data = get_file_data(
- WP_PLUGIN_DIR . '/gutenberg/gutenberg.php',
- array( 'Version' => 'Version' )
- );
- $gutenberg_version = $gutenberg_data['Version'];
- }
- return version_compare( $gutenberg_version, '19.4', '>=' );
- }
-
- return false;
+ return $instance;
}
/**
- * Augment the uses_context of a block by adding attributes that are used by the product editor.
+ * Register product related block categories.
*
- * @param array $uses_context Block uses_context.
- */
- private function augment_uses_context( $uses_context ) {
- // Note: If you modify this function, also update the client-side
- // registerProductEditorBlockType function in @woocommerce/product-editor.
- return array_merge(
- isset( $uses_context ) ? $uses_context : array(),
- array(
- 'postType',
- )
- );
- }
-
- /**
- * Register a single block.
+ * @param array $block_categories Array of categories for block types.
+ * @param mixed $editor_context The current block editor context.
*
- * @param string $block_name Block name.
- * @param string $block_dir Block directory.
- *
- * @return WP_Block_Type|false The registered block type on success, or false on failure.
+ * @return array[]
*/
- private function register_block( $block_name, $block_dir ) {
- $block_name = $this->remove_block_prefix( $block_name );
- $block_json_file = $this->get_file_path( $block_name . '/block.json', $block_dir );
+ public function register_categories( $block_categories, $editor_context ) {
+ unset( $editor_context );
+
+ self::maybe_log_removal_warning();
- return $this->register_block_type_from_metadata_without_deprecation_notice( $block_json_file );
+ return $block_categories;
}
/**
* Check if a block is registered.
*
* @param string $block_name Block name.
+ *
+ * @return bool
*/
public function is_registered( $block_name ): bool {
- $registry = \WP_Block_Type_Registry::get_instance();
+ unset( $block_name );
- return $registry->is_registered( $block_name );
+ self::maybe_log_removal_warning();
+
+ return false;
}
/**
* Unregister a block.
*
* @param string $block_name Block name.
+ * @return void
*/
public function unregister( $block_name ) {
- $registry = \WP_Block_Type_Registry::get_instance();
+ unset( $block_name );
- if ( $registry->is_registered( $block_name ) ) {
- $registry->unregister( $block_name );
- }
+ self::maybe_log_removal_warning();
}
/**
* Register a block type from metadata stored in the block.json file.
*
* @param string $file_or_folder Path to the JSON file with metadata definition for the block or
- * path to the folder where the `block.json` file is located.
- *
- * @return \WP_Block_Type|false The registered block type on success, or false on failure.
+ * path to the folder where the `block.json` file is located.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @return false
*/
public function register_block_type_from_metadata( $file_or_folder ) {
- wc_deprecated_function(
- 'Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry::register_block_type_from_metadata, which will be removed in WooCommerce 11.0',
- self::DEPRECATED_SINCE
- );
+ unset( $file_or_folder );
+
+ self::maybe_log_removal_warning();
- return $this->register_block_type_from_metadata_without_deprecation_notice( $file_or_folder );
+ return false;
}
/**
- * Register a block type from metadata without emitting a deprecation notice for internal block registration.
- *
- * @param string $file_or_folder Path to the JSON file with metadata definition for the block or
- * path to the folder where the `block.json` file is located.
- *
- * @return \WP_Block_Type|false The registered block type on success, or false on failure.
+ * Log a warning about the removed compatibility class.
*/
- private function register_block_type_from_metadata_without_deprecation_notice( $file_or_folder ) {
- $metadata_file = ( ! str_ends_with( $file_or_folder, 'block.json' ) )
- ? trailingslashit( $file_or_folder ) . 'block.json'
- : $file_or_folder;
-
- if ( ! file_exists( $metadata_file ) ) {
- return false;
- }
-
- // We are dealing with a local file, so we can use file_get_contents.
- // phpcs:disable WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
- $metadata = json_decode( file_get_contents( $metadata_file ), true );
- if ( ! is_array( $metadata ) || ! $metadata['name'] ) {
- return false;
+ private static function maybe_log_removal_warning(): void {
+ if ( self::$removal_warning_logged || ! function_exists( 'wc_get_logger' ) ) {
+ return;
}
- $this->unregister( $metadata['name'] );
+ self::$removal_warning_logged = true;
- return register_block_type_from_metadata(
- $metadata_file,
- array(
- 'attributes' => $this->augment_attributes( isset( $metadata['attributes'] ) ? $metadata['attributes'] : array() ),
- 'uses_context' => $this->augment_uses_context( isset( $metadata['usesContext'] ) ? $metadata['usesContext'] : array() ),
- )
+ wc_get_logger()->warning(
+ 'Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry is a temporary compatibility shim and will be removed soon. Product editor extension APIs were deprecated in WooCommerce 10.9.0, and the product block editor was removed in WooCommerce 11.0.0 with no replacement.',
+ array( 'source' => 'product-block-editor' )
);
}
}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockTemplateUtils.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockTemplateUtils.php
deleted file mode 100644
index 8c641e74f14..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockTemplateUtils.php
+++ /dev/null
@@ -1,110 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-
-use Automattic\WooCommerce\LayoutTemplates\LayoutTemplateRegistry;
-
-/**
- * Utils for block templates.
- *
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-class BlockTemplateUtils {
- /**
- * Directory which contains all templates
- *
- * @var string
- */
- const TEMPLATES_ROOT_DIR = 'templates';
-
- /**
- * Directory names.
- *
- * @var array
- */
- const DIRECTORY_NAMES = array(
- 'TEMPLATES' => 'product-form',
- 'TEMPLATE_PARTS' => 'product-form/parts',
- );
-
- /**
- * Gets the directory where templates of a specific template type can be found.
- *
- * @param string $template_type wp_template or wp_template_part.
- * @return string
- */
- private static function get_templates_directory( $template_type = 'wp_template' ) {
- $root_path = dirname( __DIR__, 4 ) . '/' . self::TEMPLATES_ROOT_DIR . DIRECTORY_SEPARATOR;
- $templates_directory = $root_path . self::DIRECTORY_NAMES['TEMPLATES'];
- $template_parts_directory = $root_path . self::DIRECTORY_NAMES['TEMPLATE_PARTS'];
-
- if ( 'wp_template_part' === $template_type ) {
- return $template_parts_directory;
- }
-
- return $templates_directory;
- }
-
- /**
- * Return the path to a block template file.
- * Otherwise, False.
- *
- * @param string $slug - Template slug.
- * @return string|bool Path to the template file or false.
- */
- public static function get_block_template_path( $slug ) {
- $directory = self::get_templates_directory();
- $path = trailingslashit( $directory ) . $slug . '.php';
-
- if ( ! file_exists( $path ) ) {
- return false;
- }
-
- return $path;
- }
-
- /**
- * Get the template data from the headers.
- *
- * @param string $file_path - File path.
- * @return array Template data.
- */
- public static function get_template_file_data( $file_path ) {
- if ( ! file_exists( $file_path ) ) {
- return array();
- }
-
- $file_data = get_file_data(
- $file_path,
- array(
- 'title' => 'Title',
- 'slug' => 'Slug',
- 'description' => 'Description',
- 'product_types' => 'Product Types',
- ),
- );
-
- $file_data['product_types'] = explode( ',', trim( $file_data['product_types'] ) );
-
- return $file_data;
- }
-
- /**
- * Get the template content from the file.
- *
- * @param string $file_path - File path.
- * @return string Content.
- */
- public static function get_template_content( $file_path ) {
- if ( ! file_exists( $file_path ) ) {
- return '';
- }
-
- ob_start();
- include $file_path;
- $content = ob_get_contents();
- ob_end_clean();
-
- return $content;
- }
-}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
deleted file mode 100644
index 98b1ea548e9..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
+++ /dev/null
@@ -1,527 +0,0 @@
-<?php
-/**
- * WooCommerce Product Block Editor
- */
-
-declare(strict_types = 1);
-
-namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplate;
-use Automattic\WooCommerce\Admin\PageController;
-use Automattic\WooCommerce\Enums\ProductType;
-use Automattic\WooCommerce\LayoutTemplates\LayoutTemplateRegistry;
-
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\SimpleProductTemplate;
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\ProductVariationTemplate;
-use WC_Meta_Data;
-use WP_Block_Editor_Context;
-
-/**
- * Loads assets related to the product block editor.
- *
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-class Init {
- /**
- * Version that product editor APIs were deprecated in.
- */
- const DEPRECATED_SINCE = '10.9.0';
-
- /**
- * The context name used to identify the editor.
- */
- const EDITOR_CONTEXT_NAME = 'woocommerce/edit-product';
-
- /**
- * Supported product types.
- *
- * @var array
- */
- private $supported_product_types = array( ProductType::SIMPLE );
-
- /**
- * Registered product templates.
- *
- * @var array
- */
- private $product_templates = array();
-
- /**
- * Redirection controller.
- *
- * @var RedirectionController
- */
- private $redirection_controller;
-
- /**
- * Constructor
- */
- public function __construct() {
- if ( ! is_admin() && ! WC()->is_rest_api_request() ) {
- return;
- }
-
- array_push( $this->supported_product_types, ProductType::VARIABLE );
- array_push( $this->supported_product_types, ProductType::EXTERNAL );
- array_push( $this->supported_product_types, ProductType::GROUPED );
-
- $this->redirection_controller = new RedirectionController();
-
- if ( \Automattic\WooCommerce\Utilities\FeaturesUtil::feature_is_enabled( 'product_block_editor' ) ) {
- add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );
- add_action( 'admin_enqueue_scripts', array( $this, 'dequeue_conflicting_styles' ), 100 );
- add_action( 'get_edit_post_link', array( $this, 'update_edit_product_link' ), 10, 2 );
-
- add_filter( 'woocommerce_admin_get_user_data_fields', array( $this, 'add_user_data_fields' ) );
- add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
- add_filter( 'woocommerce_register_post_type_product_variation', array( $this, 'enable_rest_api_for_product_variation' ) );
-
- add_action( 'current_screen', array( $this, 'set_current_screen_to_block_editor_if_wc_admin' ) );
-
- add_action( 'rest_api_init', array( $this, 'register_layout_templates' ) );
- add_action( 'rest_api_init', array( $this, 'register_user_metas' ) );
-
- add_filter( 'register_block_type_args', array( $this, 'register_metadata_attribute' ) );
- add_filter( 'woocommerce_get_block_types', array( $this, 'get_block_types' ), 999, 1 );
-
- add_filter( 'woocommerce_rest_prepare_product_object', array( $this, 'possibly_add_template_id' ), 10, 2 );
- add_filter( 'woocommerce_rest_prepare_product_variation_object', array( $this, 'possibly_add_template_id' ), 10, 2 );
-
- // Make sure the block registry is initialized so that core blocks are registered.
- BlockRegistry::get_instance();
-
- $tracks = new Tracks();
- $tracks->init();
-
- $this->register_product_templates();
- }
- }
-
-
- /**
- * Adds the product template ID to the product if it doesn't exist.
- *
- * @param WP_REST_Response $response The response object.
- * @param WC_Product $product The product.
- */
- public function possibly_add_template_id( $response, $product ) {
- if ( ! $product ) {
- return $response;
- }
- if ( ! $product->meta_exists( '_product_template_id' ) ) {
- if ( has_filter( 'experimental_woocommerce_product_editor_product_template_id_for_product' ) ) {
- wc_deprecated_hook(
- 'experimental_woocommerce_product_editor_product_template_id_for_product',
- $this::DEPRECATED_SINCE,
- null,
- 'This product editor extension filter will be removed in WooCommerce 11.0.'
- );
- }
-
- /**
- * Experimental: Allows to determine a product template id based on the product data.
- *
- * @ignore
- * @since 9.1.0
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
- $product_template_id = apply_filters( 'experimental_woocommerce_product_editor_product_template_id_for_product', '', $product );
- if ( $product_template_id ) {
- $response->data['meta_data'][] = new WC_Meta_Data(
- array(
- 'key' => '_product_template_id',
- 'value' => $product_template_id,
- )
- );
- }
- }
- return $response;
- }
-
- /**
- * Enqueue scripts needed for the product form block editor.
- */
- public function enqueue_scripts() {
- if ( ! PageController::is_admin_or_embed_page() ) {
- return;
- }
-
- $editor_settings = $this->get_product_editor_settings();
-
- $script_handle = 'wc-admin-edit-product';
- wp_register_script( $script_handle, '', array( 'wp-blocks' ), '0.1.0', true );
- wp_enqueue_script( $script_handle );
- wp_add_inline_script(
- $script_handle,
- 'var productBlockEditorSettings = productBlockEditorSettings || ' . wp_json_encode( $editor_settings, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) . ';',
- 'before'
- );
- wp_add_inline_script(
- $script_handle,
- sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( $editor_settings['blockCategories'], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) ),
- 'before'
- );
- wp_tinymce_inline_scripts();
- wp_enqueue_media();
- wp_register_style( 'wc-global-presets', false ); // phpcs:ignore
- wp_add_inline_style( 'wc-global-presets', wp_get_global_stylesheet( array( 'presets' ) ) );
- wp_enqueue_style( 'wc-global-presets' );
- }
-
- /**
- * Enqueue styles needed for the rich text editor.
- */
- public function enqueue_styles() {
- if ( ! PageController::is_admin_page() ) {
- return;
- }
- wp_enqueue_style( 'wc-product-editor' );
- wp_enqueue_style( 'wp-editor' );
- wp_enqueue_style( 'wp-format-library' );
- wp_enqueue_editor();
- /**
- * Enqueue any block editor related assets.
- *
- * @since 7.1.0
- */
- do_action( 'enqueue_block_editor_assets' );
- }
-
- /**
- * Dequeue conflicting styles.
- */
- public function dequeue_conflicting_styles() {
- if ( ! PageController::is_admin_page() ) {
- return;
- }
- // Dequeuing this to avoid conflicts, until we remove the 'woocommerce-page' class.
- wp_dequeue_style( 'woocommerce-blocktheme' );
- }
-
- /**
- * Update the edit product links when the new experience is enabled.
- *
- * @param string $link The edit link.
- * @param int $post_id Post ID.
- * @return string
- */
- public function update_edit_product_link( $link, $post_id ) {
- $product = wc_get_product( $post_id );
-
- if ( ! $product ) {
- return $link;
- }
-
- if ( $product->get_type() === ProductType::SIMPLE ) {
- return admin_url( 'admin.php?page=wc-admin&path=/product/' . $product->get_id() );
- }
-
- return $link;
- }
-
- /**
- * Enables variation post type in REST API.
- *
- * @param array $args Array of post type arguments.
- * @return array Array of post type arguments.
- */
- public function enable_rest_api_for_product_variation( $args ) {
- $args['show_in_rest'] = true;
-
- return $args;
- }
-
- /**
- * Adds fields so that we can store user preferences for the variations block.
- *
- * @param array $user_data_fields User data fields.
- * @return array
- */
- public function add_user_data_fields( $user_data_fields ) {
- return array_merge(
- $user_data_fields,
- array(
- 'variable_product_block_tour_shown',
- 'local_attributes_notice_dismissed_ids',
- 'variable_items_without_price_notice_dismissed',
- 'product_advice_card_dismissed',
- )
- );
- }
-
- /**
- * Sets the current screen to the block editor if a wc-admin page.
- */
- public function set_current_screen_to_block_editor_if_wc_admin() {
- $screen = get_current_screen();
-
- // phpcs:ignore Squiz.PHP.CommentedOutCode.Found
- // (no idea why I need that phpcs:ignore above, but I'm tired trying to re-write this comment to get it to pass)
- // we can't check the 'path' query param because client-side routing is used within wc-admin,
- // so this action handler is only called on the initial page load from the server, which might
- // not be the product edit page (it mostly likely isn't).
- if ( PageController::is_admin_page() ) {
- $screen->is_block_editor( true );
-
- wp_add_inline_script(
- 'wp-blocks',
- 'wp.blocks && wp.blocks.unstable__bootstrapServerSideBlockDefinitions && wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) . ');'
- );
- }
- }
-
- /**
- * Get the product editor settings.
- */
- private function get_product_editor_settings() {
- $editor_settings['productTemplates'] = array_map(
- function ( $product_template ) {
- return $product_template->to_json();
- },
- $this->product_templates
- );
-
- $block_editor_context = new WP_Block_Editor_Context( array( 'name' => self::EDITOR_CONTEXT_NAME ) );
-
- return get_block_editor_settings( $editor_settings, $block_editor_context );
- }
-
- /**
- * Get default product templates.
- *
- * @return array The default templates.
- */
- private function get_default_product_templates() {
- $templates = array();
- $templates[] = new ProductTemplate(
- array(
- 'id' => 'standard-product-template',
- 'title' => __( 'Standard product', 'woocommerce' ),
- 'description' => __( 'A single physical or virtual product, e.g. a t-shirt or an eBook.', 'woocommerce' ),
- 'order' => 10,
- 'icon' => 'shipping',
- 'layout_template_id' => 'simple-product',
- 'product_data' => array(
- 'type' => ProductType::SIMPLE,
- ),
- )
- );
- $templates[] = new ProductTemplate(
- array(
- 'id' => 'grouped-product-template',
- 'title' => __( 'Grouped product', 'woocommerce' ),
- 'description' => __( 'A set of products that go well together, e.g. camera kit.', 'woocommerce' ),
- 'order' => 20,
- 'icon' => 'group',
- 'layout_template_id' => 'simple-product',
- 'product_data' => array(
- 'type' => ProductType::GROUPED,
- ),
- )
- );
- $templates[] = new ProductTemplate(
- array(
- 'id' => 'affiliate-product-template',
- 'title' => __( 'Affiliate product', 'woocommerce' ),
- 'description' => __( 'A link to a product sold on a different website, e.g. brand collab.', 'woocommerce' ),
- 'order' => 30,
- 'icon' => 'link',
- 'layout_template_id' => 'simple-product',
- 'product_data' => array(
- 'type' => ProductType::EXTERNAL,
- ),
- )
- );
-
- return $templates;
- }
-
- /**
- * Create default product template by custom product type if it does not have a
- * template associated yet.
- *
- * @param array $templates The registered product templates.
- * @return array The new templates.
- */
- private function create_default_product_template_by_custom_product_type( array $templates ) {
- // Getting the product types registered via the classic editor.
- $registered_product_types = wc_get_product_types();
-
- $custom_product_types = array_filter(
- $registered_product_types,
- function ( $product_type ) {
- return ! in_array( $product_type, $this->supported_product_types, true );
- },
- ARRAY_FILTER_USE_KEY
- );
-
- $templates_with_product_type = array_filter(
- $templates,
- function ( $template ) {
- $product_data = $template->get_product_data();
- return ! is_null( $product_data ) && array_key_exists( 'type', $product_data );
- }
- );
-
- $custom_product_types_on_templates = array_map(
- function ( $template ) {
- $product_data = $template->get_product_data();
- return $product_data['type'];
- },
- $templates_with_product_type
- );
-
- foreach ( $custom_product_types as $product_type => $title ) {
- if ( in_array( $product_type, $custom_product_types_on_templates, true ) ) {
- continue;
- }
-
- $templates[] = new ProductTemplate(
- array(
- 'id' => $product_type . '-product-template',
- 'title' => $title,
- 'product_data' => array(
- 'type' => $product_type,
- ),
- )
- );
- }
-
- return $templates;
- }
-
- /**
- * Register layout templates.
- */
- public function register_layout_templates() {
- $layout_template_registry = wc_get_container()->get( LayoutTemplateRegistry::class );
-
- if ( ! $layout_template_registry->is_registered( 'simple-product' ) ) {
- $layout_template_registry->register(
- 'simple-product',
- 'product-form',
- SimpleProductTemplate::class
- );
- }
-
- if ( ! $layout_template_registry->is_registered( 'product-variation' ) ) {
- $layout_template_registry->register(
- 'product-variation',
- 'product-form',
- ProductVariationTemplate::class
- );
- }
- }
-
- /**
- * Register product templates.
- */
- public function register_product_templates() {
- if ( has_filter( 'woocommerce_product_editor_product_templates' ) ) {
- wc_deprecated_hook(
- 'woocommerce_product_editor_product_templates',
- self::DEPRECATED_SINCE,
- null,
- 'This product editor extension filter will be removed in WooCommerce 11.0.'
- );
- }
-
- /**
- * Allows for new product template registration.
- *
- * @since 8.5.0
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
- $this->product_templates = apply_filters( 'woocommerce_product_editor_product_templates', $this->get_default_product_templates() );
- $this->product_templates = $this->create_default_product_template_by_custom_product_type( $this->product_templates );
-
- usort(
- $this->product_templates,
- function ( $a, $b ) {
- return $a->get_order() - $b->get_order();
- }
- );
-
- $this->redirection_controller->set_product_templates( $this->product_templates );
- }
-
- /**
- * Register user metas.
- */
- public function register_user_metas() {
- register_rest_field(
- 'user',
- 'metaboxhidden_product',
- array(
- 'get_callback' => function ( $object, $attr ) {
- $hidden = get_user_meta( $object['id'], $attr, true );
-
- if ( is_array( $hidden ) ) {
- // Ensures to always return a string array.
- return array_values( $hidden );
- }
-
- return array( 'postcustom' );
- },
- 'update_callback' => function ( $value, $object, $attr ) {
- // Update the field/meta value.
- update_user_meta( $object->ID, $attr, $value );
- },
- 'schema' => array(
- 'type' => 'array',
- 'description' => __( 'The metaboxhidden_product meta from the user metas.', 'woocommerce' ),
- 'items' => array(
- 'type' => 'string',
- ),
- 'arg_options' => array(
- 'sanitize_callback' => 'wp_parse_list',
- 'validate_callback' => 'rest_validate_request_arg',
- ),
- ),
- )
- );
- }
-
- /**
- * Registers the metadata block attribute for all block types.
- * This is a fallback/temporary solution until
- * the Gutenberg core version registers the metadata attribute.
- *
- * @see https://github.com/WordPress/gutenberg/blob/6aaa3686ae67adc1a6a6b08096d3312859733e1b/lib/compat/wordpress-6.5/blocks.php#L27-L47
- * To do: Remove this method once the Gutenberg core version registers the metadata attribute.
- *
- * @param array $args Array of arguments for registering a block type.
- * @return array $args
- */
- public function register_metadata_attribute( $args ) {
- // Setup attributes if needed.
- if ( ! isset( $args['attributes'] ) || ! is_array( $args['attributes'] ) ) {
- $args['attributes'] = array();
- }
-
- // Add metadata attribute if it doesn't exist.
- if ( ! array_key_exists( 'metadata', $args['attributes'] ) ) {
- $args['attributes']['metadata'] = array(
- 'type' => 'object',
- );
- }
-
- return $args;
- }
-
- /**
- * Filters woocommerce block types.
- *
- * @param string[] $block_types Array of woocommerce block types.
- * @return array
- */
- public function get_block_types( $block_types ) {
- if ( PageController::is_admin_page() ) {
- // Ignore all woocommerce blocks.
- return array();
- }
-
- return $block_types;
- }
-}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductFormsController.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductFormsController.php
deleted file mode 100644
index 3516ca858bf..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductFormsController.php
+++ /dev/null
@@ -1,154 +0,0 @@
-<?php
-/**
- * WooCommerce Product Forms Controller
- */
-
-namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-
-/**
- * Handle retrieval of product forms.
- *
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-class ProductFormsController {
-
- /**
- * Version that product editor APIs were deprecated in.
- */
- const DEPRECATED_SINCE = '10.9.0';
-
- /**
- * Product form templates.
- *
- * @var array
- */
- private $product_form_templates = array(
- 'simple',
- );
-
- /**
- * Set up the product forms controller.
- */
- public function init() { // phpcs:ignore WooCommerce.Functions.InternalInjectionMethod.MissingFinal, WooCommerce.Functions.InternalInjectionMethod.MissingInternalTag -- Not an injection.
- add_action( 'upgrader_process_complete', array( $this, 'migrate_templates_when_plugin_updated' ), 10, 2 );
- }
-
- /**
- * Migrate form templates after WooCommerce plugin update.
- *
- * @param \WP_Upgrader $upgrader The WP_Upgrader instance.
- * @param array $hook_extra Extra arguments passed to hooked filters.
- * @return void
- */
- public function migrate_templates_when_plugin_updated( \WP_Upgrader $upgrader, array $hook_extra ) {
- // If it is not a plugin hook type, bail early.
- $type = isset( $hook_extra['type'] ) ? $hook_extra['type'] : '';
- if ( 'plugin' !== $type ) {
- return;
- }
-
- // If it is not the WooCommerce plugin, bail early.
- $plugins = isset( $hook_extra['plugins'] ) ? $hook_extra['plugins'] : array();
- if (
- ! in_array( 'woocommerce/woocommerce.php', $plugins, true )
- ) {
- return;
- }
-
- // If the action is not install or update, bail early.
- $action = isset( $hook_extra['action'] ) ? $hook_extra['action'] : '';
- if ( 'install' !== $action && 'update' !== $action ) {
- return;
- }
-
- // Trigger the migration process.
- $this->migrate_product_form_posts( $action );
- }
-
- /**
- * Create or update a product_form post for each product form template.
- * If the post already exists, it will be updated.
- * If the post does not exist, it will be created even if the action is `update`.
- *
- * @param string $action - The action to perform. `insert` | `update`.
- * @return void
- */
- public function migrate_product_form_posts( $action ) {
- if ( has_filter( 'woocommerce_product_form_templates' ) ) {
- wc_deprecated_hook(
- 'woocommerce_product_form_templates',
- $this::DEPRECATED_SINCE,
- null,
- 'This product editor extension filter will be removed in WooCommerce 11.0.'
- );
- }
-
- /**
- * Allow extend the list of templates that should be auto-generated.
- *
- * @since 9.1.0
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- * @param array $templates List of templates to auto-generate.
- */
- $templates = apply_filters(
- 'woocommerce_product_form_templates',
- $this->product_form_templates
- );
-
- foreach ( $templates as $slug ) {
- $file_path = BlockTemplateUtils::get_block_template_path( $slug );
-
- if ( ! $file_path ) {
- continue;
- }
-
- $file_data = BlockTemplateUtils::get_template_file_data( $file_path );
-
- $posts = get_posts(
- array(
- 'name' => $slug,
- 'post_type' => 'product_form',
- 'post_status' => 'any',
- 'posts_per_page' => 1,
- )
- );
-
- /*
- * Update the the CPT post if it already exists,
- * and the action is `update`.
- */
- if ( 'update' === $action ) {
- $post = $posts[0] ?? null;
-
- if ( ! empty( $post ) ) {
- wp_update_post(
- array(
- 'ID' => $post->ID,
- 'post_title' => $file_data['title'],
- 'post_content' => BlockTemplateUtils::get_template_content( $file_path ),
- 'post_excerpt' => $file_data['description'],
- )
- );
- }
- }
-
- /*
- * Skip the post creation if the post already exists.
- */
- if ( ! empty( $posts ) ) {
- continue;
- }
-
- $post = wp_insert_post(
- array(
- 'post_title' => $file_data['title'],
- 'post_name' => $slug,
- 'post_status' => 'publish',
- 'post_type' => 'product_form',
- 'post_content' => BlockTemplateUtils::get_template_content( $file_path ),
- 'post_excerpt' => $file_data['description'],
- )
- );
- }
- }
-}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplate.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplate.php
index edb1d0fc480..fc5c52812eb 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplate.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplate.php
@@ -1,230 +1,194 @@
<?php
/**
- * WooCommerce Product Block Editor
+ * WooCommerce Product Editor Product Template compatibility shim.
*/
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
/**
- * The Product Template that represents the relation between the Product and
- * the LayoutTemplate (ProductFormTemplateInterface)
+ * Removed product editor product template value object.
*
- * @see ProductFormTemplateInterface
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
class ProductTemplate {
/**
- * The template id.
+ * Whether the removal warning has already been logged for the current request.
*
- * @var string
+ * @var bool
*/
- private $id;
+ private static $removal_warning_logged = false;
/**
- * The template title.
+ * Constructor.
*
- * @var string
- */
- private $title;
-
- /**
- * The product data.
- *
- * @var array
- */
- private $product_data;
-
- /**
- * The template order.
- *
- * @var Integer
- */
- private $order = 999;
-
- /**
- * The layout template id.
- *
- * @var string
- */
- private $layout_template_id = null;
-
- /**
- * The template description.
- *
- * @var string
- */
- private $description = null;
-
- /**
- * The template icon.
- *
- * @var string
- */
- private $icon = null;
-
- /**
- * If the template is directly selectable through the UI.
- *
- * @var boolean
- */
- private $is_selectable_by_user = true;
-
- /**
- * ProductTemplate constructor
- *
- * @param array $data The data.
+ * @param array $data Template data.
*/
public function __construct( array $data ) {
- $this->id = $data['id'];
- $this->title = $data['title'];
- $this->product_data = $data['product_data'];
-
- if ( isset( $data['order'] ) ) {
- $this->order = $data['order'];
- }
-
- if ( isset( $data['layout_template_id'] ) ) {
- $this->layout_template_id = $data['layout_template_id'];
- }
-
- if ( isset( $data['description'] ) ) {
- $this->description = $data['description'];
- }
-
- if ( isset( $data['icon'] ) ) {
- $this->icon = $data['icon'];
- }
+ unset( $data );
- if ( isset( $data['is_selectable_by_user'] ) ) {
- $this->is_selectable_by_user = $data['is_selectable_by_user'];
- }
+ self::maybe_log_removal_warning();
}
/**
* Get the template ID.
*
- * @return string The ID.
+ * @return string
*/
public function get_id() {
- return $this->id;
+ self::maybe_log_removal_warning();
+
+ return '';
}
/**
* Get the template title.
*
- * @return string The title.
+ * @return string
*/
public function get_title() {
- return $this->title;
+ self::maybe_log_removal_warning();
+
+ return '';
}
/**
* Get the layout template ID.
*
- * @return string The layout template ID.
+ * @return string|null
*/
public function get_layout_template_id() {
- return $this->layout_template_id;
+ self::maybe_log_removal_warning();
+
+ return null;
}
/**
* Set the layout template ID.
*
* @param string $layout_template_id The layout template ID.
+ * @return void
*/
public function set_layout_template_id( string $layout_template_id ) {
- $this->layout_template_id = $layout_template_id;
+ unset( $layout_template_id );
+
+ self::maybe_log_removal_warning();
}
/**
* Get the product data.
*
- * @return array The product data.
+ * @return array
*/
public function get_product_data() {
- return $this->product_data;
+ self::maybe_log_removal_warning();
+
+ return array();
}
/**
* Get the template description.
*
- * @return string The description.
+ * @return string|null
*/
public function get_description() {
- return $this->description;
+ self::maybe_log_removal_warning();
+
+ return null;
}
/**
* Set the template description.
*
* @param string $description The template description.
+ * @return void
*/
public function set_description( string $description ) {
- $this->description = $description;
+ unset( $description );
+
+ self::maybe_log_removal_warning();
}
/**
* Get the template icon.
*
- * @return string The icon.
+ * @return string|null
*/
public function get_icon() {
- return $this->icon;
+ self::maybe_log_removal_warning();
+
+ return null;
}
/**
* Set the template icon.
*
- * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/icons.
- *
- * @param string $icon The icon name from the @wordpress/components or a url for an external image resource.
+ * @param string $icon The icon name or an external image URL.
+ * @return void
*/
public function set_icon( string $icon ) {
- $this->icon = $icon;
+ unset( $icon );
+
+ self::maybe_log_removal_warning();
}
/**
* Get the template order.
*
- * @return int The order.
+ * @return int
*/
public function get_order() {
- return $this->order;
+ self::maybe_log_removal_warning();
+
+ return 999;
}
/**
* Get the selectable attribute.
*
- * @return boolean Selectable.
+ * @return bool
*/
public function get_is_selectable_by_user() {
- return $this->is_selectable_by_user;
+ self::maybe_log_removal_warning();
+
+ return false;
}
/**
* Set the template order.
*
* @param int $order The template order.
+ * @return void
*/
public function set_order( int $order ) {
- $this->order = $order;
+ unset( $order );
+
+ self::maybe_log_removal_warning();
}
/**
- * Get the product template as JSON like.
+ * Get the product template as JSON-like data.
*
- * @return array The JSON.
+ * @return array
*/
public function to_json() {
- return array(
- 'id' => $this->get_id(),
- 'title' => $this->get_title(),
- 'description' => $this->get_description(),
- 'icon' => $this->get_icon(),
- 'order' => $this->get_order(),
- 'layoutTemplateId' => $this->get_layout_template_id(),
- 'productData' => $this->get_product_data(),
- 'isSelectableByUser' => $this->get_is_selectable_by_user(),
+ self::maybe_log_removal_warning();
+
+ return array();
+ }
+
+ /**
+ * Log a warning about the removed compatibility class.
+ */
+ private static function maybe_log_removal_warning(): void {
+ if ( self::$removal_warning_logged || ! function_exists( 'wc_get_logger' ) ) {
+ return;
+ }
+
+ self::$removal_warning_logged = true;
+
+ wc_get_logger()->warning(
+ 'Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplate is a temporary compatibility shim and will be removed soon. Product editor extension APIs were deprecated in WooCommerce 10.9.0, and the product block editor was removed in WooCommerce 11.0.0 with no replacement.',
+ array( 'source' => 'product-block-editor' )
);
}
}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/GroupInterface.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/GroupInterface.php
index 2185eddbb65..fc5efd8c24d 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/GroupInterface.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/GroupInterface.php
@@ -1,29 +1,13 @@
<?php
+/**
+ * WooCommerce Product Editor group interface compatibility shim.
+ */
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockContainerInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
/**
- * Interface for group containers, which contain sections and blocks.
+ * Removed product editor group container interface.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
-interface GroupInterface extends BlockContainerInterface {
-
- /**
- * Adds a new section to the group
- *
- * @param array $block_config block config.
- * @return SectionInterface new block section.
- */
- public function add_section( array $block_config ): SectionInterface;
-
- /**
- * Adds a new block to the group.
- *
- * @param array $block_config block config.
- */
- public function add_block( array $block_config ): BlockInterface;
-}
+interface GroupInterface {}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/ProductFormTemplateInterface.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/ProductFormTemplateInterface.php
index 6e12b278211..5a16d460b40 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/ProductFormTemplateInterface.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/ProductFormTemplateInterface.php
@@ -1,54 +1,13 @@
<?php
+/**
+ * WooCommerce Product Editor product form template interface compatibility shim.
+ */
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-
/**
- * Interface for block containers.
+ * Removed product editor product form template interface.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
-interface ProductFormTemplateInterface extends BlockTemplateInterface {
-
- /**
- * Adds a new group block.
- *
- * @param array $block_config block config.
- * @return GroupInterface new group block.
- */
- public function add_group( array $block_config ): GroupInterface;
-
- /**
- * Gets Group block by id.
- *
- * @param string $group_id group id.
- * @return GroupInterface|null
- */
- public function get_group_by_id( string $group_id ): ?GroupInterface;
-
- /**
- * Gets Section block by id.
- *
- * @param string $section_id section id.
- * @return SectionInterface|null
- */
- public function get_section_by_id( string $section_id ): ?SectionInterface;
-
- /**
- * Gets subsection block by id.
- *
- * @param string $subsection_id subsection id.
- * @return SubsectionInterface|null
- */
- public function get_subsection_by_id( string $subsection_id ): ?SubsectionInterface;
-
- /**
- * Gets Block by id.
- *
- * @param string $block_id block id.
- * @return BlockInterface|null
- */
- public function get_block_by_id( string $block_id ): ?BlockInterface;
-}
+interface ProductFormTemplateInterface {}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md
deleted file mode 100644
index 68d4a5827b0..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/README.md
+++ /dev/null
@@ -1,166 +0,0 @@
-# ProductTemplates
-
-The `Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates` namespace contains interfaces for interacting with product editor templates, which are used to define the structure of the product editor form.
-
-General interfaces for interacting with block templates are located in the
-[`Automattic\WooCommerce\Admin\BlockTemplates`](../../../BlockTemplates/README.md) namespace.
-
-## Usage
-
-For more information on how to extend the product editor, please see the [Product Editor Development Handbook](../../../../../../../docs/product-editor-development/README.md).
-
-### Adding a new group to product editor templates after an existing group
-
-```php
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-function YOUR_PREFIX_add_group( BlockInterface $general_group ) {
- $parent = $general_group->get_parent();
-
- $parent->add_group(
- [
- 'id' => 'YOUR-PREFIX-group',
- 'order' => $general_group->get_order() + 5,
- 'attributes' => [
- 'title' => __( 'My Group', 'YOUR-TEXT-DOMAIN' ),
- ],
- ]
- );
-}
-
-add_action( 'woocommerce_block_template_area_product-form_after_add_block_general', 'YOUR_PREFIX_add_group' );
-```
-
-### Adding a new block to product editor templates after an existing block
-
-```php
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-function YOUR_PREFIX_add_block( BlockInterface $product_name_block ) {
- $parent = $product_name_block->get_parent();
-
- $parent->add_block(
- [
- 'id' => 'YOUR-PREFIX-block',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => $product_name_block->get_order() + 5,
- 'attributes' => [
- 'label' => __( 'My Block', 'YOUR-TEXT-DOMAIN' ),
- ],
- ]
- );
-}
-
-add_action( 'woocommerce_block_template_area_product-form_after_add_block_product-name', 'YOUR_PREFIX_add_block' );
-```
-
-### Removing a block from product editor templates
-
-```php
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-function YOUR_PREFIX_remove_block( BlockInterface $sale_price_block ) {
- $sale_price_block->remove();
-}
-
-add_action( 'woocommerce_block_template_area_product-form_after_remove_block_product-sale-price', 'YOUR_PREFIX_remove_block' );
-```
-
-### Conditionally hiding a block in product editor templates
-
-```php
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-// hide sale price block if regular_price is less than 10
-function YOUR_PREFIX_hide_block( BlockInterface $sale_price_block ) {
- $sale_price_block->add_hide_condition( 'editedProduct.regular_price < 10' );
-}
-
-add_action( 'woocommerce_block_template_area_product-form_after_add_block_product-sale-price', 'YOUR_PREFIX_hide_block' );
-```
-
-### Conditionally disabling a block in product editor templates
-
-```php
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-// disable sale price block if regular_price is not set
-function YOUR_PREFIX_hide_block( BlockInterface $sale_price_block ) {
- $sale_price_block->add_disable_condition( '!editedProduct.regular_price' );
-}
-
-add_action( 'woocommerce_block_template_area_product-form_after_add_block_product-sale-price', 'YOUR_PREFIX_hide_block' );
-```
-
-## Interfaces
-
-### GroupInterface
-
-Groups are the top-level organizational structure for product editor templates.
-They typically contain one or more sections, though they can also contain
-blocks directly.
-
-#### GroupInterface Methods
-
-- `add_section( array $block_config ): SectionInterface`
-
-Add a new section to the group.
-
-- `add_block( array $block_config ): BlockInterface`
-
-Add a new block to the group.
-
-### SectionInterface
-
-Sections are the second-level organizational structure for product editor templates.
-They typically contain one or more blocks, though they can also contain sub-sections
-if further organization is needed.
-
-#### SectionInterface Methods
-
-- `add_subsection( array $block_config ): SubsectionInterface`
-
-Add a new sub-section to the section.
-
-- `add_block( array $block_config ): BlockInterface`
-
-Add a new block to the section.
-
-### SubsectionInterface
-
-Subsections are the third-level organizational structure for product editor templates.
-They typically contain one or more blocks.
-
-#### SubsectionInterface Methods
-
-- `add_block( array $block_config ): BlockInterface`
-
-Add a new block to the subsection.
-
-### ProductFormTemplateInterface
-
-All product form templates implement this interface.
-Product form templates are used to define the structure of the product editor form.
-They contain groups as their top-level organizational structure.
-
-#### ProductFormTemplateInterface Methods
-
-- `add_group( array $block_config ): GroupInterface`
-
-Add a new group to the template.
-
-- `get_group_by_id( string $group_id ): ?GroupInterface`
-
-Gets a group by ID. Returns null if the group does not exist.
-
-- `get_section_by_id( string $section_id ): ?SectionInterface`
-
-Gets a section by ID. Returns null if the section does not exist.
-
-- `get_subsection_by_id( string $subsection_id ): ?SubsectionInterface`
-
-Gets a subsection by ID. Returns null if the subsection does not exist.
-
-- `get_block_by_id( string $block_id ): ?BlockInterface`
-
-Gets a block by ID. Returns null if the block does not exist.
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SectionInterface.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SectionInterface.php
index e3cce8d3a8f..418a120d0b2 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SectionInterface.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SectionInterface.php
@@ -1,39 +1,13 @@
<?php
+/**
+ * WooCommerce Product Editor section interface compatibility shim.
+ */
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockContainerInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
-
/**
- * Interface for section containers, which contain sub-sections and blocks.
+ * Removed product editor section container interface.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
-interface SectionInterface extends BlockContainerInterface {
-
- /**
- * Adds a new sub-section to the section.
- *
- * @param array $block_config block config.
- * @return SubsectionInterface new block sub-section.
- */
- public function add_subsection( array $block_config ): SubsectionInterface;
-
- /**
- * Adds a new block to the section.
- *
- * @param array $block_config block config.
- */
- public function add_block( array $block_config ): BlockInterface;
-
- /**
- * Adds a new sub-section to the section.
- *
- * @deprecated 8.6.0
- *
- * @param array $block_config The block data.
- */
- public function add_section( array $block_config ): SubsectionInterface;
-}
+interface SectionInterface {}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SubsectionInterface.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SubsectionInterface.php
index 7f6fa495426..32a8bfb7ad9 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SubsectionInterface.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/ProductTemplates/SubsectionInterface.php
@@ -1,20 +1,13 @@
<?php
+/**
+ * WooCommerce Product Editor subsection interface compatibility shim.
+ */
namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockContainerInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-
/**
- * Interface for subsection containers, which contain sub-sections and blocks.
+ * Removed product editor subsection container interface.
*
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
+ * @deprecated 10.9.0 Product editor extension APIs were deprecated. The product block editor was removed in 11.0.0 with no replacement.
*/
-interface SubsectionInterface extends BlockContainerInterface {
- /**
- * Adds a new block to the sub-section.
- *
- * @param array $block_config block config.
- */
- public function add_block( array $block_config ): BlockInterface;
-}
+interface SubsectionInterface {}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/README.md b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/README.md
new file mode 100644
index 00000000000..e593d1a0a3d
--- /dev/null
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/README.md
@@ -0,0 +1,7 @@
+# Product Block Editor compatibility shims
+
+This folder contains temporary compatibility shims for PHP classes and interfaces that were part of the removed Product Block Editor.
+
+The Product Editor extension APIs were deprecated in WooCommerce 10.9.0, and the Product Block Editor was removed in WooCommerce 11.0.0 with no replacement. These classes remain only to avoid fatal errors in extensions or custom code that still reference the old PHP symbols during the transition period.
+
+Do not add new Product Block Editor behavior here. Any code in this folder should be limited to compatibility with the removed APIs, should avoid reintroducing the removed editor, and may be removed in a future WooCommerce version.
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/RedirectionController.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/RedirectionController.php
deleted file mode 100644
index 24af1a389ad..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/RedirectionController.php
+++ /dev/null
@@ -1,179 +0,0 @@
-<?php
-/**
- * WooCommerce Product Editor Redirection Controller
- */
-
-namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-
-use Automattic\WooCommerce\Admin\Features\Features;
-use Automattic\WooCommerce\Enums\ProductType;
-use Automattic\WooCommerce\Internal\Admin\WCAdminAssets;
-
-/**
- * Handle redirecting to the old or new editor based on features and support.
- *
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-class RedirectionController {
- /**
- * Registered product templates.
- *
- * @var array
- */
- private $product_templates = array();
-
- /**
- * Set up the hooks used for redirection.
- */
- public function __construct() {
- if ( \Automattic\WooCommerce\Utilities\FeaturesUtil::feature_is_enabled( 'product_block_editor' ) ) {
- add_action( 'current_screen', array( $this, 'maybe_redirect_to_new_editor' ), 30, 0 );
- add_action( 'current_screen', array( $this, 'redirect_non_supported_product_types' ), 30, 0 );
- } else {
- add_action( 'current_screen', array( $this, 'maybe_redirect_to_old_editor' ), 30, 0 );
- }
- }
-
- /**
- * Check if the current screen is the legacy add product screen.
- */
- protected function is_legacy_add_new_screen(): bool {
- $screen = get_current_screen();
- return 'post' === $screen->base && 'product' === $screen->post_type && 'add' === $screen->action;
- }
-
- /**
- * Check if the current screen is the legacy edit product screen.
- */
- protected function is_legacy_edit_screen(): bool {
- $screen = get_current_screen();
- return 'post' === $screen->base
- && 'product' === $screen->post_type
- && isset( $_GET['post'] )
- && isset( $_GET['action'] )
- && 'edit' === $_GET['action'];
- }
-
- /**
- * Check if a product is supported by the new experience.
- *
- * @param integer $product_id Product ID.
- */
- protected function is_product_supported( $product_id ): bool {
- $product = $product_id ? wc_get_product( $product_id ) : null;
-
- if ( is_null( $product ) ) {
- return false;
- }
-
- $digital_product = $product->is_downloadable() || $product->is_virtual();
- $product_template_id = $product->get_meta( '_product_template_id' );
-
- foreach ( $this->product_templates as $product_template ) {
- if ( is_null( $product_template->get_layout_template_id() ) ) {
- continue;
- }
-
- $product_data = $product_template->get_product_data();
- $product_data_type = $product_data['type'];
- // Treat a variable product as a simple product since there is not a product template
- // for variable products.
- $product_type = $product->get_type() === ProductType::VARIABLE ? ProductType::SIMPLE : $product->get_type();
-
- if ( isset( $product_data_type ) && $product_data_type !== $product_type ) {
- continue;
- }
-
- if ( isset( $product_template_id ) && $product_template_id === $product_template->get_id() ) {
- return true;
- }
-
- if ( isset( $product_data_type ) ) {
- return true;
- }
- }
-
- return false;
- }
-
- /**
- * Check if a product is supported by the new experience.
- *
- * @param array $product_templates The registered product templates.
- */
- public function set_product_templates( array $product_templates ): void {
- $this->product_templates = $product_templates;
- }
-
- /**
- * Redirects from old product form to the new product form if the
- * feature `product_block_editor` is enabled.
- */
- public function maybe_redirect_to_new_editor(): void {
- if ( $this->is_legacy_add_new_screen() ) {
- wp_safe_redirect( admin_url( 'admin.php?page=wc-admin&path=/add-product' ) );
- exit();
- }
-
- if ( $this->is_legacy_edit_screen() ) {
- $product_id = isset( $_GET['post'] ) ? absint( $_GET['post'] ) : null;
- if ( ! $this->is_product_supported( $product_id ) ) {
- return;
- }
- wp_safe_redirect( admin_url( 'admin.php?page=wc-admin&path=/product/' . $product_id ) );
- exit();
- }
- }
-
- /**
- * Redirects from new product form to the old product form if the
- * feature `product_block_editor` is enabled.
- */
- public function maybe_redirect_to_old_editor(): void {
- $route = $this->get_parsed_route();
-
- if ( 'add-product' === $route['page'] ) {
- wp_safe_redirect( admin_url( 'post-new.php?post_type=product' ) );
- exit();
- }
-
- if ( 'product' === $route['page'] ) {
- wp_safe_redirect( admin_url( 'post.php?post=' . $route['product_id'] . '&action=edit' ) );
- exit();
- }
- }
-
- /**
- * Get the parsed WooCommerce Admin path.
- */
- protected function get_parsed_route(): array {
- if ( ! \Automattic\WooCommerce\Admin\PageController::is_admin_page() || ! isset( $_GET['path'] ) ) {
- return array(
- 'page' => null,
- 'product_id' => null,
- );
- }
-
- $path = esc_url_raw( wp_unslash( $_GET['path'] ) );
- $path_pieces = explode( '/', wp_parse_url( $path, PHP_URL_PATH ) );
-
- return array(
- 'page' => $path_pieces[1] ?? '',
- 'product_id' => 'product' === ( $path_pieces[1] ?? '' ) ? absint( $path_pieces[2] ?? 0 ) : null,
- );
- }
-
-
- /**
- * Redirect non supported product types to legacy editor.
- */
- public function redirect_non_supported_product_types(): void {
- $route = $this->get_parsed_route();
- $product_id = $route['product_id'];
-
- if ( 'product' === $route['page'] && ! $this->is_product_supported( $product_id ) ) {
- wp_safe_redirect( admin_url( 'post.php?post=' . $route['product_id'] . '&action=edit' ) );
- exit();
- }
- }
-}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Tracks.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Tracks.php
deleted file mode 100644
index f4d12fc41c8..00000000000
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Tracks.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-/**
- * WooCommerce Product Block Editor
- */
-
-namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
-
-/**
- * Add tracks for the product block editor.
- *
- * @deprecated 10.9.0 Product editor extension APIs will be removed in WooCommerce 11.0.
- */
-class Tracks {
-
- /**
- * Initialize the tracks.
- */
- public function init() {
- add_filter( 'woocommerce_product_source', array( $this, 'add_product_source' ) );
- }
-
- /**
- * Check if a URL is a product editor page.
- *
- * @param string $url Url to check.
- * @return boolean
- */
- protected function is_product_editor_page( $url ) {
- $query_string = wp_parse_url( wp_get_referer(), PHP_URL_QUERY );
- parse_str( $query_string, $query );
-
- if ( ! isset( $query['page'] ) || 'wc-admin' !== $query['page'] || ! isset( $query['path'] ) ) {
- return false;
- }
-
- $path_pieces = explode( '/', $query['path'] );
- $route = $path_pieces[1];
-
- return 'add-product' === $route || 'product' === $route;
- }
-
- /**
- * Update the product source if we're on the product editor page.
- *
- * @param string $source Source of product.
- * @return string
- */
- public function add_product_source( $source ) {
- if ( $this->is_product_editor_page( wp_get_referer() ) ) {
- return 'product-block-editor-v1';
- }
-
- return $source;
- }
-
-}
diff --git a/plugins/woocommerce/src/Admin/Features/ProductDataViews/Init.php b/plugins/woocommerce/src/Admin/Features/ProductDataViews/Init.php
index de004937384..363dd104d5a 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductDataViews/Init.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductDataViews/Init.php
@@ -8,7 +8,7 @@ declare( strict_types = 1 );
namespace Automattic\WooCommerce\Admin\Features\ProductDataViews;
/**
- * Loads assets related to the product block editor.
+ * Loads assets related to product data views.
*/
class Init {
/**
diff --git a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
index c6092fa6d6e..61f85ca2fad 100644
--- a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
+++ b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
@@ -10,7 +10,6 @@ use Automattic\WooCommerce\Admin\Features\Features;
use Automattic\WooCommerce\Admin\PageController;
use Automattic\WooCommerce\Admin\Settings\SettingsUIPageInterface;
use Automattic\WooCommerce\Internal\Admin\Loader;
-use Automattic\WooCommerce\Utilities\FeaturesUtil;
/**
* WCAdminAssets Class.
*/
@@ -274,31 +273,18 @@ class WCAdminAssets {
$dependencies
);
- switch ( $script ) {
- case WC_ADMIN_APP:
- // Remove wp-editor dependency if we're not on a customize store page since we don't use wp-editor in other pages.
- $is_customize_store_page = (
- PageController::is_admin_page() &&
- isset( $_GET['path'] ) && // phpcs:ignore WordPress.Security.NonceVerification.Recommended
- str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store' ) // phpcs:ignore WordPress.Security.NonceVerification.Recommended
- );
- if ( ! $is_customize_store_page ) {
- $dependencies = array_diff( $dependencies, array( 'wp-editor' ) );
- }
-
- // Remove product editor dependency from WC_ADMIN_APP when feature is disabled.
- if ( ! FeaturesUtil::feature_is_enabled( 'product_block_editor' ) ) {
- $dependencies = array_diff( $dependencies, array( 'wc-product-editor' ) );
- }
- break;
- case 'wc-product-editor':
- // Remove wp-editor dependency if the product editor feature is disabled as we don't need it.
- $is_product_data_view_page = \Automattic\WooCommerce\Admin\Features\ProductDataViews\Init::is_product_data_view_page();
- if ( ! ( FeaturesUtil::feature_is_enabled( 'product_block_editor' ) || $is_product_data_view_page ) ) {
- $dependencies = array_diff( $dependencies, array( 'wp-editor' ) );
- }
- break;
+ if ( WC_ADMIN_APP === $script ) {
+ // Remove wp-editor dependency if we're not on a customize store page since we don't use wp-editor in other pages.
+ $is_customize_store_page = (
+ PageController::is_admin_page() &&
+ isset( $_GET['path'] ) && // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+ str_starts_with( wc_clean( wp_unslash( $_GET['path'] ) ), '/customize-store' ) // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+ );
+ if ( ! $is_customize_store_page ) {
+ $dependencies = array_diff( $dependencies, array( 'wp-editor' ) );
+ }
}
+
return $dependencies;
}
@@ -329,7 +315,6 @@ class WCAdminAssets {
'wc-navigation',
'wc-block-templates',
'wc-experimental-products-app',
- 'wc-product-editor',
'wc-settings-ui-sdk',
'wc-remote-logging',
'wc-sanitize',
@@ -349,7 +334,6 @@ class WCAdminAssets {
'wc-experimental-products-app',
'wc-experimental',
'wc-navigation',
- 'wc-product-editor',
'wc-settings-ui-sdk',
WC_ADMIN_APP,
);
@@ -406,9 +390,6 @@ class WCAdminAssets {
array(
'handle' => 'wc-experimental-products-app',
),
- array(
- 'handle' => 'wc-product-editor',
- ),
array(
'handle' => 'wc-customer-effort-score',
),
@@ -574,7 +555,6 @@ class WCAdminAssets {
'wc-components',
'wc-tracks',
'wc-block-templates',
- 'wc-product-editor',
);
foreach ( $handles_for_injection as $handle ) {
$script = $wp_scripts->query( $handle, 'registered' );
diff --git a/plugins/woocommerce/src/Internal/Features/FeaturesController.php b/plugins/woocommerce/src/Internal/Features/FeaturesController.php
index 3c6789c8c1a..77aad3f10c5 100644
--- a/plugins/woocommerce/src/Internal/Features/FeaturesController.php
+++ b/plugins/woocommerce/src/Internal/Features/FeaturesController.php
@@ -302,14 +302,6 @@ class FeaturesController {
'skip_compatibility_checks' => true,
'default_plugin_compatibility' => FeaturePluginCompatibility::COMPATIBLE,
),
- 'product_block_editor' => array(
- 'name' => __( 'New product editor', 'woocommerce' ),
- 'description' => __( 'Try the new product editor (Beta)', 'woocommerce' ),
- 'is_experimental' => true,
- 'disable_ui' => false,
- 'skip_compatibility_checks' => true,
- 'default_plugin_compatibility' => FeaturePluginCompatibility::COMPATIBLE,
- ),
'cart_checkout_blocks' => array(
'name' => __( 'Cart & Checkout Blocks', 'woocommerce' ),
'description' => __( 'Optimize for faster checkout', 'woocommerce' ),
@@ -844,14 +836,6 @@ class FeaturesController {
}
}
- // We're deprecating the product block editor feature in favor of a v3 coming out.
- // We want to hide this setting in the UI for users that don't have it enabled.
- // If users have it enabled, we won't hide it until they explicitly disable it.
- if ( isset( $features['product_block_editor'] )
- && ! $this->feature_is_enabled( 'product_block_editor' ) ) {
- $features['product_block_editor']['disable_ui'] = true;
- }
-
if ( isset( $features['wc-visual-attribute'] ) && ! wp_is_block_theme() ) {
$features['wc-visual-attribute']['disable_ui'] = true;
}
@@ -2023,8 +2007,8 @@ class FeaturesController {
/**
* Changes the feature given it's id, a toggle value and nonce as a query param.
*
- * `/wp-admin/post.php?product_block_editor=1&_feature_nonce=1234`, 1 for on
- * `/wp-admin/post.php?product_block_editor=0&_feature_nonce=1234`, 0 for off
+ * `/wp-admin/post.php?feature_id=1&_feature_nonce=1234`, 1 for on
+ * `/wp-admin/post.php?feature_id=0&_feature_nonce=1234`, 0 for off
*
* @internal For exclusive usage of WooCommerce core, backwards compatibility not guaranteed.
*/
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/AbstractProductFormTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/AbstractProductFormTemplate.php
deleted file mode 100644
index 74287b54751..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/AbstractProductFormTemplate.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\GroupInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\ProductFormTemplateInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SectionInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SubsectionInterface;
-use Automattic\WooCommerce\Internal\Admin\BlockTemplates\AbstractBlockTemplate;
-
-/**
- * Block template class.
- */
-abstract class AbstractProductFormTemplate extends AbstractBlockTemplate implements ProductFormTemplateInterface {
- /**
- * Get the template area.
- */
- public function get_area(): string {
- return 'product-form';
- }
-
- /**
- * Get a group block by ID.
- *
- * @param string $group_id The group block ID.
- * @throws \UnexpectedValueException If block is not of type GroupInterface.
- */
- public function get_group_by_id( string $group_id ): ?GroupInterface {
- $group = $this->get_block( $group_id );
- if ( $group && ! $group instanceof GroupInterface ) {
- throw new \UnexpectedValueException( 'Block with specified ID is not a group.' );
- }
- return $group;
- }
-
- /**
- * Get a section block by ID.
- *
- * @param string $section_id The section block ID.
- * @throws \UnexpectedValueException If block is not of type SectionInterface.
- */
- public function get_section_by_id( string $section_id ): ?SectionInterface {
- $section = $this->get_block( $section_id );
- if ( $section && ! $section instanceof SectionInterface ) {
- throw new \UnexpectedValueException( 'Block with specified ID is not a section.' );
- }
- return $section;
- }
-
- /**
- * Get a subsection block by ID.
- *
- * @param string $subsection_id The subsection block ID.
- * @throws \UnexpectedValueException If block is not of type SubsectionInterface.
- */
- public function get_subsection_by_id( string $subsection_id ): ?SubsectionInterface {
- $subsection = $this->get_block( $subsection_id );
- if ( $subsection && ! $subsection instanceof SubsectionInterface ) {
- throw new \UnexpectedValueException( 'Block with specified ID is not a subsection.' );
- }
- return $subsection;
- }
-
- /**
- * Get a block by ID.
- *
- * @param string $block_id The block block ID.
- */
- public function get_block_by_id( string $block_id ): ?BlockInterface {
- return $this->get_block( $block_id );
- }
-
- /**
- * Add a custom block type to this template.
- *
- * @param array $block_config The block data.
- */
- public function add_group( array $block_config ): GroupInterface {
- $block = new Group( $block_config, $this->get_root_template(), $this );
- return $this->add_inner_block( $block );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/DownloadableProductTrait.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/DownloadableProductTrait.php
deleted file mode 100644
index 4b9462246da..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/DownloadableProductTrait.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-/**
- * DownloadableProductTrait
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\Features\Features;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\GroupInterface;
-
-/**
- * Downloadable Product Trait.
- */
-trait DownloadableProductTrait {
- /**
- * Adds downloadable blocks to the given parent block.
- *
- * @param GroupInterface $parent_block The parent block.
- */
- private function add_downloadable_product_blocks( $parent_block ) {
- // Downloads section.
- $product_downloads_section_group = $parent_block->add_section(
- array(
- 'id' => 'product-downloads-section-group',
- 'order' => 50,
- 'attributes' => array(
- 'blockGap' => 'unit-40',
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'postType === "product" && editedProduct.type !== "simple"',
- ),
- ),
- )
- );
-
- $product_downloads_section_group->add_block(
- array(
- 'id' => 'product-downloadable',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'downloadable',
- 'label' => __( 'Include downloads', 'woocommerce' ),
- 'checkedHelp' => __( 'Add any files you\'d like to make available for the customer to download after purchasing, such as instructions or warranty info.', 'woocommerce' ),
- 'uncheckedHelp' => __( 'Add any files you\'d like to make available for the customer to download after purchasing, such as instructions or warranty info.', 'woocommerce' ),
- ),
- )
- );
-
- $product_downloads_section_group->add_subsection(
- array(
- 'id' => 'product-downloads-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Downloads', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Downloads settings link opening tag. %2$s: Downloads settings link closing tag. */
- __( 'Add any files you\'d like to make available for the customer to download after purchasing, such as instructions or warranty info. Store-wide updates can be managed in your %1$sproduct settings%2$s.', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=downloadable' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.downloadable !== true',
- ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-downloads',
- 'blockName' => 'woocommerce/product-downloads-field',
- 'order' => 10,
- )
- );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
deleted file mode 100644
index 4f51119a80b..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Group.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-/**
- * WooCommerce Product Group Block class.
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\GroupInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SectionInterface;
-use Automattic\WooCommerce\Internal\Admin\BlockTemplates\BlockContainerTrait;
-
-/**
- * Class for Group block.
- */
-class Group extends ProductBlock implements GroupInterface {
- use BlockContainerTrait;
- // phpcs:disable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
- /**
- * Group Block constructor.
- *
- * @param array $config The block configuration.
- * @param BlockTemplateInterface $root_template The block template that this block belongs to.
- * @param ContainerInterface|null $parent The parent block container.
- *
- * @throws \ValueError If the block configuration is invalid.
- * @throws \ValueError If the parent block container does not belong to the same template as the block.
- * @throws \InvalidArgumentException If blockName key and value are passed into block configuration.
- */
- public function __construct( array $config, BlockTemplateInterface &$root_template, ?ContainerInterface &$parent = null ) { // phpcs:ignore Universal.NamingConventions.NoReservedKeywordParameterNames.parentFound
- if ( ! empty( $config['blockName'] ) ) {
- throw new \InvalidArgumentException( 'Unexpected key "blockName", this defaults to "woocommerce/product-tab".' );
- }
- if ( $config['id'] && ( empty( $config['attributes'] ) || empty( $config['attributes']['id'] ) ) ) {
- $config['attributes'] = empty( $config['attributes'] ) ? array() : $config['attributes'];
- $config['attributes']['id'] = $config['id'];
- }
- parent::__construct( array_merge( array( 'blockName' => 'woocommerce/product-tab' ), $config ), $root_template, $parent );
- }
- // phpcs:enable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
-
- /**
- * Add a section block type to this template.
- *
- * @param array $block_config The block data.
- */
- public function add_section( array $block_config ): SectionInterface {
- $block = new Section( $block_config, $this->get_root_template(), $this );
- return $this->add_inner_block( $block );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
deleted file mode 100644
index bf3be6484fe..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductBlock.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * WooCommerce Product Block class.
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
-use Automattic\WooCommerce\Internal\Admin\BlockTemplates\AbstractBlock;
-use Automattic\WooCommerce\Internal\Admin\BlockTemplates\BlockContainerTrait;
-
-/**
- * Class for Product block.
- */
-class ProductBlock extends AbstractBlock implements ContainerInterface {
- use BlockContainerTrait;
- /**
- * Adds block to the section block.
- *
- * @param array $block_config The block data.
- */
- public function &add_block( array $block_config ): BlockInterface {
- $block = new ProductBlock( $block_config, $this->get_root_template(), $this );
- return $this->add_inner_block( $block );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
deleted file mode 100644
index 53f785dca58..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/ProductVariationTemplate.php
+++ /dev/null
@@ -1,487 +0,0 @@
-<?php
-/**
- * ProductVariationTemplate
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\Features\Features;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\ProductFormTemplateInterface;
-use Automattic\WooCommerce\Enums\ProductStockStatus;
-
-/**
- * Product Variation Template.
- */
-class ProductVariationTemplate extends AbstractProductFormTemplate implements ProductFormTemplateInterface {
- use DownloadableProductTrait;
-
- /**
- * The context name used to identify the editor.
- */
- const GROUP_IDS = array(
- 'GENERAL' => 'general',
- 'PRICING' => 'pricing',
- 'INVENTORY' => 'inventory',
- 'SHIPPING' => 'shipping',
- );
-
- /**
- * The option name used check whether the single variation notice has been dismissed.
- */
- const SINGLE_VARIATION_NOTICE_DISMISSED_OPTION = 'woocommerce_single_variation_notice_dismissed';
-
- /**
- * ProductVariationTemplate constructor.
- */
- public function __construct() {
- $this->add_group_blocks();
- $this->add_general_group_blocks();
- $this->add_inventory_group_blocks();
- $this->add_shipping_group_blocks();
- }
-
- /**
- * Get the template ID.
- */
- public function get_id(): string {
- return 'product-variation';
- }
-
- /**
- * Get the template title.
- */
- public function get_title(): string {
- return __( 'Product Variation Template', 'woocommerce' );
- }
-
- /**
- * Get the template description.
- */
- public function get_description(): string {
- return __( 'Template for the product variation form', 'woocommerce' );
- }
-
- /**
- * Adds the group blocks to the template.
- */
- protected function add_group_blocks() {
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['GENERAL'],
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'General', 'woocommerce' ),
- ),
- )
- );
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['INVENTORY'],
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Inventory', 'woocommerce' ),
- ),
- )
- );
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['SHIPPING'],
- 'order' => 40,
- 'attributes' => array(
- 'title' => __( 'Shipping', 'woocommerce' ),
- ),
- )
- );
- }
-
- /**
- * Adds the general group blocks to the template.
- */
- protected function add_general_group_blocks() {
- $is_calc_taxes_enabled = wc_tax_enabled();
-
- $general_group = $this->get_group_by_id( $this::GROUP_IDS['GENERAL'] );
- $general_group->add_block(
- array(
- 'id' => 'general-single-variation-notice',
- 'blockName' => 'woocommerce/product-single-variation-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( '<strong>You’re editing details specific to this variation.</strong> Some information, like description and images, will be inherited from the main product, <noticeLink><parentProductName/></noticeLink>.', 'woocommerce' ),
- 'type' => 'info',
- 'isDismissible' => true,
- 'name' => $this::SINGLE_VARIATION_NOTICE_DISMISSED_OPTION,
- ),
- )
- );
- // Basic Details Section.
- $basic_details = $general_group->add_section(
- array(
- 'id' => 'product-variation-details-section',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Variation details', 'woocommerce' ),
- 'description' => __( 'This info will be displayed on the product page, category pages, social media, and search results.', 'woocommerce' ),
- ),
- )
- );
-
- // Product Pricing columns.
- $pricing_columns = $basic_details->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-columns',
- 'blockName' => 'core/columns',
- 'order' => 10,
- )
- );
- $pricing_column_1 = $pricing_columns->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-column-1',
- 'blockName' => 'core/column',
- 'order' => 10,
- 'attributes' => array(
- 'templateLock' => 'all',
- ),
- )
- );
- $pricing_column_1->add_block(
- array(
- 'id' => 'product-pricing-regular-price',
- 'blockName' => 'woocommerce/product-regular-price-field',
- 'order' => 10,
- 'attributes' => array(
- 'name' => 'regular_price',
- 'label' => __( 'Regular price', 'woocommerce' ),
- 'isRequired' => true,
- 'help' => $is_calc_taxes_enabled ? null : sprintf(
- /* translators: %1$s: store settings link opening tag. %2$s: store settings link closing tag.*/
- __( 'Per your %1$sstore settings%2$s, taxes are not enabled.', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=general' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $pricing_column_2 = $pricing_columns->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-column-2',
- 'blockName' => 'core/column',
- 'order' => 20,
- 'attributes' => array(
- 'templateLock' => 'all',
- ),
- )
- );
- $pricing_column_2->add_block(
- array(
- 'id' => 'product-pricing-sale-price',
- 'blockName' => 'woocommerce/product-sale-price-field',
- 'order' => 10,
- 'attributes' => array(
- 'label' => __( 'Sale price', 'woocommerce' ),
- ),
- )
- );
- $basic_details->add_block(
- array(
- 'id' => 'product-pricing-schedule-sale-fields',
- 'blockName' => 'woocommerce/product-schedule-sale-fields',
- 'order' => 20,
- )
- );
-
- if ( $is_calc_taxes_enabled ) {
- $basic_details->add_block(
- array(
- 'id' => 'product-tax-class',
- 'blockName' => 'woocommerce/product-select-field',
- 'order' => 40,
- 'attributes' => array(
- 'label' => __( 'Tax class', 'woocommerce' ),
- 'help' => sprintf(
- /* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/
- __( 'Apply a tax rate if this product qualifies for tax reduction or exemption. %1$sLearn more%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/document/setting-up-taxes-in-woocommerce/#shipping-tax-class" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- 'property' => 'tax_class',
- 'options' => SimpleProductTemplate::get_tax_classes( 'product_variation' ),
- ),
- )
- );
- }
-
- $basic_details->add_block(
- array(
- 'id' => 'product-variation-note',
- 'blockName' => 'woocommerce/product-text-area-field',
- 'order' => 20,
- 'attributes' => array(
- 'property' => 'description',
- 'label' => __( 'Note', 'woocommerce' ),
- 'help' => 'Enter an optional note displayed on the product page when customers select this variation.',
- 'lock' => array(
- 'move' => true,
- ),
- ),
- )
- );
- $basic_details->add_block(
- array(
- 'id' => 'product-variation-visibility',
- 'blockName' => 'woocommerce/product-checkbox-field',
- 'order' => 30,
- 'attributes' => array(
- 'property' => 'status',
- 'label' => __( 'Hide in product catalog', 'woocommerce' ),
- 'checkedValue' => 'private',
- 'uncheckedValue' => 'publish',
- ),
- )
- );
-
- // Images section.
- $images_section = $general_group->add_section(
- array(
- 'id' => 'product-variation-images-section',
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Image', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Images guide link opening tag. %2$s: Images guide link closing tag. */
- __( 'Drag images, upload new ones or select files from your library. For best results, use JPEG files that are 1000 by 1000 pixels or larger. %1$sHow to prepare images?%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/posts/how-to-take-professional-product-photos-top-tips" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $images_section->add_block(
- array(
- 'id' => 'product-variation-image',
- 'blockName' => 'woocommerce/product-images-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'image',
- 'multiple' => false,
- ),
- )
- );
-
- // Downloads section.
- $this->add_downloadable_product_blocks( $general_group );
- }
-
- /**
- * Adds the inventory group blocks to the template.
- */
- protected function add_inventory_group_blocks() {
- $inventory_group = $this->get_group_by_id( $this::GROUP_IDS['INVENTORY'] );
- $inventory_group->add_block(
- array(
- 'id' => 'inventory-single-variation-notice',
- 'blockName' => 'woocommerce/product-single-variation-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( '<strong>You’re editing details specific to this variation.</strong> Some information, like description and images, will be inherited from the main product, <noticeLink><parentProductName/></noticeLink>.', 'woocommerce' ),
- 'type' => 'info',
- 'isDismissible' => true,
- 'name' => $this::SINGLE_VARIATION_NOTICE_DISMISSED_OPTION,
- ),
- )
- );
- // Product Inventory Section.
- $product_inventory_section = $inventory_group->add_section(
- array(
- 'id' => 'product-variation-inventory-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Inventory', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Inventory settings link opening tag. %2$s: Inventory settings link closing tag.*/
- __( 'Set up and manage inventory for this product, including status and available quantity. %1$sManage store inventory settings%2$s', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=inventory' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_inventory_inner_section = $product_inventory_section->add_subsection(
- array(
- 'id' => 'product-variation-inventory-inner-section',
- 'order' => 10,
- )
- );
- $inventory_columns = $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-inventory-inner-columns',
- 'blockName' => 'core/columns',
- )
- );
- $inventory_columns->add_block(
- array(
- 'id' => 'product-inventory-inner-column1',
- 'blockName' => 'core/column',
- )
- )->add_block(
- array(
- 'id' => 'product-variation-sku-field',
- 'blockName' => 'woocommerce/product-sku-field',
- 'order' => 10,
- )
- );
- $inventory_columns->add_block(
- array(
- 'id' => 'product-inventory-inner-column2',
- 'blockName' => 'core/column',
- )
- )->add_block(
- array(
- 'id' => 'product-unique-id-field',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 20,
- 'attributes' => array(
- 'property' => 'global_unique_id',
- // translators: %1$s GTIN %2$s UPC %3$s EAN %4$s ISBN.
- 'label' => sprintf( __( '%1$s, %2$s, %3$s, or %4$s', 'woocommerce' ), '<abbr title="' . esc_attr__( 'Global Trade Item Number', 'woocommerce' ) . '">' . esc_html__( 'GTIN', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'Universal Product Code', 'woocommerce' ) . '">' . esc_html__( 'UPC', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'European Article Number', 'woocommerce' ) . '">' . esc_html__( 'EAN', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'International Standard Book Number', 'woocommerce' ) . '">' . esc_html__( 'ISBN', 'woocommerce' ) . '</abbr>' ),
- 'tooltip' => __( 'Enter a barcode or any other identifier unique to this product. It can help you list this product on other channels or marketplaces.', 'woocommerce' ),
- 'pattern' => array(
- 'value' => '[0-9\-]*[0-9Xx]?',
- 'message' => __( 'Enter only numbers and hyphens (-). The letter X is allowed only as the final ISBN-10 check digit.', 'woocommerce' ),
- ),
- ),
- )
- );
- $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-variation-track-stock',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 20,
- 'attributes' => array(
- 'label' => __( 'Track inventory', 'woocommerce' ),
- 'property' => 'manage_stock',
- 'disabled' => 'yes' !== get_option( 'woocommerce_manage_stock' ),
- 'disabledCopy' => sprintf(
- /* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/
- __( 'Per your %1$sstore settings%2$s, inventory management is <strong>disabled</strong>.', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=inventory' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-variation-inventory-quantity',
- 'blockName' => 'woocommerce/product-inventory-quantity-field',
- 'order' => 10,
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.manage_stock === false',
- ),
- ),
- )
- );
- $product_inventory_section->add_block(
- array(
- 'id' => 'product-variation-stock-status',
- 'blockName' => 'woocommerce/product-radio-field',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Stock status', 'woocommerce' ),
- 'property' => 'stock_status',
- 'options' => array(
- array(
- 'label' => __( 'In stock', 'woocommerce' ),
- 'value' => ProductStockStatus::IN_STOCK,
- ),
- array(
- 'label' => __( 'Out of stock', 'woocommerce' ),
- 'value' => ProductStockStatus::OUT_OF_STOCK,
- ),
- array(
- 'label' => __( 'On backorder', 'woocommerce' ),
- 'value' => ProductStockStatus::ON_BACKORDER,
- ),
- ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.manage_stock === true',
- ),
- ),
- )
- );
- }
-
- /**
- * Adds the shipping group blocks to the template.
- */
- protected function add_shipping_group_blocks() {
- $shipping_group = $this->get_group_by_id( $this::GROUP_IDS['SHIPPING'] );
- $shipping_group->add_block(
- array(
- 'id' => 'shipping-single-variation-notice',
- 'blockName' => 'woocommerce/product-single-variation-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( '<strong>You’re editing details specific to this variation.</strong> Some information, like description and images, will be inherited from the main product, <noticeLink><parentProductName/></noticeLink>.', 'woocommerce' ),
- 'type' => 'info',
- 'isDismissible' => true,
- 'name' => $this::SINGLE_VARIATION_NOTICE_DISMISSED_OPTION,
- ),
- )
- );
- // Virtual section.
- $shipping_group->add_section(
- array(
- 'id' => 'product-variation-virtual-section',
- 'order' => 20,
- )
- )->add_block(
- array(
- 'id' => 'product-variation-virtual',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'virtual',
- 'checkedValue' => false,
- 'uncheckedValue' => true,
- 'label' => __( 'This variation requires shipping or pickup', 'woocommerce' ),
- 'uncheckedHelp' => __( 'This variation will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. <a href="https://woocommerce.com/document/managing-products/#adding-a-virtual-product" target="_blank" rel="noreferrer">Read more about virtual products</a>.', 'woocommerce' ),
- ),
- )
- );
- // Product Shipping Section.
- $product_fee_and_dimensions_section = $shipping_group->add_section(
- array(
- 'id' => 'product-variation-fee-and-dimensions-section',
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Fees & dimensions', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: How to get started? link opening tag. %2$s: How to get started? link closing tag.*/
- __( 'Set up shipping costs and enter dimensions used for accurate rate calculations. %1$sHow to get started?%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/posts/how-to-calculate-shipping-costs-for-your-woocommerce-store/" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $product_fee_and_dimensions_section->add_block(
- array(
- 'id' => 'product-variation-shipping-class',
- 'blockName' => 'woocommerce/product-shipping-class-field',
- 'order' => 10,
- )
- );
- $product_fee_and_dimensions_section->add_block(
- array(
- 'id' => 'product-variation-shipping-dimensions',
- 'blockName' => 'woocommerce/product-shipping-dimensions-fields',
- 'order' => 20,
- )
- );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Section.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Section.php
deleted file mode 100644
index 7961e344abc..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Section.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-/**
- * WooCommerce Section Block class.
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SectionInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SubsectionInterface;
-
-/**
- * Class for Section block.
- */
-class Section extends ProductBlock implements SectionInterface {
- // phpcs:disable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
- /**
- * Section Block constructor.
- *
- * @param array $config The block configuration.
- * @param BlockTemplateInterface $root_template The block template that this block belongs to.
- * @param ContainerInterface|null $parent The parent block container.
- *
- * @throws \ValueError If the block configuration is invalid.
- * @throws \ValueError If the parent block container does not belong to the same template as the block.
- * @throws \InvalidArgumentException If blockName key and value are passed into block configuration.
- */
- public function __construct( array $config, BlockTemplateInterface &$root_template, ?ContainerInterface &$parent = null ) { // phpcs:ignore Universal.NamingConventions.NoReservedKeywordParameterNames.parentFound
- if ( ! empty( $config['blockName'] ) ) {
- throw new \InvalidArgumentException( 'Unexpected key "blockName", this defaults to "woocommerce/product-section".' );
- }
- parent::__construct( array_merge( array( 'blockName' => 'woocommerce/product-section' ), $config ), $root_template, $parent );
- }
- // phpcs:enable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
-
- /**
- * Add a sub-section block type to this template.
- *
- * @param array $block_config The block data.
- */
- public function add_subsection( array $block_config ): SubsectionInterface {
- $block = new Subsection( $block_config, $this->get_root_template(), $this );
- return $this->add_inner_block( $block );
- }
-
- /**
- * Add a sub-section block type to this template.
- *
- * @deprecated 8.6.0
- *
- * @param array $block_config The block data.
- */
- public function add_section( array $block_config ): SubsectionInterface {
- wc_deprecated_function( 'add_section', '8.6.0', 'add_subsection' );
- return $this->add_subsection( $block_config );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
deleted file mode 100644
index 220b0585279..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php
+++ /dev/null
@@ -1,1204 +0,0 @@
-<?php
-/**
- * SimpleProductTemplate
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\Features\Features;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\ProductFormTemplateInterface;
-use Automattic\WooCommerce\Enums\CatalogVisibility;
-use Automattic\WooCommerce\Enums\ProductStockStatus;
-use Automattic\WooCommerce\Enums\ProductTaxStatus;
-use WC_Tax;
-
-/**
- * Simple Product Template.
- */
-class SimpleProductTemplate extends AbstractProductFormTemplate implements ProductFormTemplateInterface {
- use DownloadableProductTrait;
-
- /**
- * The context name used to identify the editor.
- */
- const GROUP_IDS = array(
- 'GENERAL' => 'general',
- 'ORGANIZATION' => 'organization',
- 'INVENTORY' => 'inventory',
- 'SHIPPING' => 'shipping',
- 'VARIATIONS' => 'variations',
- 'LINKED_PRODUCTS' => 'linked-products',
- );
-
- /**
- * SimpleProductTemplate constructor.
- */
- public function __construct() {
- $this->add_group_blocks();
- $this->add_general_group_blocks();
- $this->add_organization_group_blocks();
- $this->add_inventory_group_blocks();
- $this->add_shipping_group_blocks();
- $this->add_variation_group_blocks();
- $this->add_linked_products_group_blocks();
- }
-
- /**
- * Get the template ID.
- */
- public function get_id(): string {
- return 'simple-product';
- }
-
- /**
- * Get the template title.
- */
- public function get_title(): string {
- return __( 'Simple Product Template', 'woocommerce' );
- }
-
- /**
- * Get the template description.
- */
- public function get_description(): string {
- return __( 'Template for the simple product form', 'woocommerce' );
- }
-
- /**
- * Adds the group blocks to the template.
- */
- private function add_group_blocks() {
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['GENERAL'],
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'General', 'woocommerce' ),
- ),
- )
- );
-
- // Variations tab.
- $variations_hide_conditions = array();
- $variations_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "grouped"',
- );
- $variations_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "external"',
- );
-
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['VARIATIONS'],
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Variations', 'woocommerce' ),
- ),
- 'hideConditions' => $variations_hide_conditions,
- )
- );
-
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['ORGANIZATION'],
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Organization', 'woocommerce' ),
- ),
- )
- );
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['INVENTORY'],
- 'order' => 50,
- 'attributes' => array(
- 'title' => __( 'Inventory', 'woocommerce' ),
- ),
- )
- );
- $shipping_hide_conditions = array();
- $shipping_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "grouped"',
- );
- $shipping_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "external"',
- );
-
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['SHIPPING'],
- 'order' => 60,
- 'attributes' => array(
- 'title' => __( 'Shipping', 'woocommerce' ),
- ),
- 'hideConditions' => $shipping_hide_conditions,
- )
- );
-
- // Linked Products tab.
- $this->add_group(
- array(
- 'id' => $this::GROUP_IDS['LINKED_PRODUCTS'],
- 'order' => 70,
- 'attributes' => array(
- 'title' => __( 'Linked products', 'woocommerce' ),
- ),
- )
- );
- }
-
- /**
- * Adds the general group blocks to the template.
- */
- private function add_general_group_blocks() {
- $is_calc_taxes_enabled = wc_tax_enabled();
- $general_group = $this->get_group_by_id( $this::GROUP_IDS['GENERAL'] );
- $general_group->add_block(
- array(
- 'id' => 'product_variation_notice_general_tab',
- 'blockName' => 'woocommerce/product-has-variations-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( 'This product has options, such as size or color. You can manage each variation\'s images, downloads, and other details individually.', 'woocommerce' ),
- 'buttonText' => __( 'Go to Variations', 'woocommerce' ),
- 'type' => 'info',
- ),
- )
- );
- // Basic Details Section.
- $basic_details = $general_group->add_section(
- array(
- 'id' => 'basic-details',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Basic details', 'woocommerce' ),
- 'description' => __( 'This info will be displayed on the product page, category pages, social media, and search results.', 'woocommerce' ),
- ),
- )
- );
- $basic_details->add_block(
- array(
- 'id' => 'product-details-section-description',
- 'blockName' => 'woocommerce/product-details-section-description',
- 'order' => 10,
- )
- );
- $basic_details->add_block(
- array(
- 'id' => 'product-name',
- 'blockName' => 'woocommerce/product-name-field',
- 'order' => 10,
- 'attributes' => array(
- 'name' => 'Product name',
- 'autoFocus' => true,
- 'metadata' => array(
- 'bindings' => array(
- 'value' => array(
- 'source' => 'woocommerce/entity-product',
- 'args' => array(
- 'prop' => 'name',
- ),
- ),
- ),
- ),
- ),
- )
- );
-
- // Product Pricing columns.
- $pricing_columns = $basic_details->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-columns',
- 'blockName' => 'core/columns',
- 'order' => 10,
- )
- );
- $pricing_column_1 = $pricing_columns->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-column-1',
- 'blockName' => 'core/column',
- 'order' => 10,
- 'attributes' => array(
- 'templateLock' => 'all',
- ),
- )
- );
- $pricing_column_1->add_block(
- array(
- 'id' => 'product-pricing-regular-price',
- 'blockName' => 'woocommerce/product-regular-price-field',
- 'order' => 10,
- 'attributes' => array(
- 'name' => 'regular_price',
- 'label' => __( 'Regular price', 'woocommerce' ),
- 'help' => $is_calc_taxes_enabled ? null : sprintf(
- /* translators: %1$s: store settings link opening tag. %2$s: store settings link closing tag.*/
- __( 'Per your %1$sstore settings%2$s, taxes are not enabled.', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=general' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- array(
- 'expression' => 'editedProduct.type === "grouped"',
- ),
- ),
- )
- );
- $pricing_column_2 = $pricing_columns->add_block(
- array(
- 'id' => 'product-pricing-group-pricing-column-2',
- 'blockName' => 'core/column',
- 'order' => 20,
- 'attributes' => array(
- 'templateLock' => 'all',
- ),
- )
- );
- $pricing_column_2->add_block(
- array(
- 'id' => 'product-pricing-sale-price',
- 'blockName' => 'woocommerce/product-sale-price-field',
- 'order' => 10,
- 'attributes' => array(
- 'label' => __( 'Sale price', 'woocommerce' ),
- ),
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- array(
- 'expression' => 'editedProduct.type === "grouped"',
- ),
- ),
- )
- );
- $basic_details->add_block(
- array(
- 'id' => 'product-pricing-schedule-sale-fields',
- 'blockName' => 'woocommerce/product-schedule-sale-fields',
- 'order' => 20,
- )
- );
-
- if ( $is_calc_taxes_enabled ) {
- $basic_details->add_block(
- array(
- 'id' => 'product-sale-tax',
- 'blockName' => 'woocommerce/product-radio-field',
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Charge sales tax on', 'woocommerce' ),
- 'property' => 'tax_status',
- 'options' => array(
- array(
- 'label' => __( 'Product and shipping', 'woocommerce' ),
- 'value' => ProductTaxStatus::TAXABLE,
- ),
- array(
- 'label' => __( 'Only shipping', 'woocommerce' ),
- 'value' => 'shipping',
- ),
- array(
- 'label' => __( "Don't charge tax", 'woocommerce' ),
- 'value' => 'none',
- ),
- ),
- ),
- )
- );
- $pricing_advanced_block = $basic_details->add_block(
- array(
- 'id' => 'product-pricing-advanced',
- 'blockName' => 'woocommerce/product-collapsible',
- 'order' => 40,
- 'attributes' => array(
- 'toggleText' => __( 'Advanced', 'woocommerce' ),
- 'initialCollapsed' => true,
- 'persistRender' => true,
- ),
- )
- );
- $pricing_advanced_block->add_block(
- array(
- 'id' => 'product-tax-class',
- 'blockName' => 'woocommerce/product-select-field',
- 'order' => 10,
- 'attributes' => array(
- 'label' => __( 'Tax class', 'woocommerce' ),
- 'help' => sprintf(
- /* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/
- __( 'Apply a tax rate if this product qualifies for tax reduction or exemption. %1$sLearn more%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/document/setting-up-taxes-in-woocommerce/#shipping-tax-class" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- 'property' => 'tax_class',
- 'options' => self::get_tax_classes(),
- ),
- )
- );
- }
-
- $basic_details->add_block(
- array(
- 'id' => 'product-summary',
- 'blockName' => 'woocommerce/product-text-area-field',
- 'order' => 50,
- 'attributes' => array(
- 'label' => __( 'Summary', 'woocommerce' ),
- 'help' => __(
- "Summarize this product in 1-2 short sentences. We'll show it at the top of the page.",
- 'woocommerce'
- ),
- 'property' => 'short_description',
- 'lock' => array(
- 'move' => true,
- ),
- ),
- )
- );
-
- // Description section.
- $description_section = $general_group->add_section(
- array(
- 'id' => 'product-description-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Description', 'woocommerce' ),
- 'description' => __( 'What makes this product unique? What are its most important features? Enrich the product page by adding rich content using blocks.', 'woocommerce' ),
- ),
- )
- );
-
- $description_field_block = $description_section->add_block(
- array(
- 'id' => 'product-description',
- 'blockName' => 'woocommerce/product-description-field',
- 'order' => 10,
- )
- );
-
- $description_field_block->add_block(
- array(
- 'id' => 'product-description__content',
- 'blockName' => 'woocommerce/product-summary-field',
- 'order' => 10,
- 'attributes' => array(
- 'helpText' => null,
- 'label' => null,
- 'property' => 'description',
- 'lock' => array(
- 'move' => true,
- ),
- ),
- )
- );
-
- // External/Affiliate section.
- $buy_button_section = $general_group->add_section(
- array(
- 'id' => 'product-buy-button-section',
- 'order' => 30,
- 'attributes' => array(
- 'title' => __( 'Buy button', 'woocommerce' ),
- 'description' => __( 'Add a link and choose a label for the button linked to a product sold elsewhere.', 'woocommerce' ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type !== "external"',
- ),
- ),
- )
- );
-
- $buy_button_section->add_block(
- array(
- 'id' => 'product-external-url',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'external_url',
- 'label' => __( 'Link to the external product', 'woocommerce' ),
- 'placeholder' => __( 'Enter the external URL to the product', 'woocommerce' ),
- 'suffix' => true,
- 'type' => array(
- 'value' => 'url',
- 'message' => __( 'Link to the external product is an invalid URL.', 'woocommerce' ),
- ),
- ),
- )
- );
-
- $button_text_columns = $buy_button_section->add_block(
- array(
- 'id' => 'product-button-text-columns',
- 'blockName' => 'core/columns',
- 'order' => 20,
- )
- );
-
- $button_text_columns->add_block(
- array(
- 'id' => 'product-button-text-column1',
- 'blockName' => 'core/column',
- 'order' => 10,
- )
- )->add_block(
- array(
- 'id' => 'product-button-text',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'button_text',
- 'label' => __( 'Buy button text', 'woocommerce' ),
- ),
- )
- );
-
- $button_text_columns->add_block(
- array(
- 'id' => 'product-button-text-column2',
- 'blockName' => 'core/column',
- 'order' => 20,
- )
- );
-
- // Product list section.
- $product_list_section = $general_group->add_section(
- array(
- 'id' => 'product-list-section',
- 'order' => 35,
- 'attributes' => array(
- 'title' => __( 'Products in this group', 'woocommerce' ),
- 'description' => __( 'Make a collection of related products, enabling customers to purchase multiple items together.', 'woocommerce' ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type !== "grouped"',
- ),
- ),
- )
- );
-
- $product_list_section->add_block(
- array(
- 'id' => 'product-list',
- 'blockName' => 'woocommerce/product-list-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'grouped_products',
- ),
- )
- );
-
- // Images section.
- $images_section = $general_group->add_section(
- array(
- 'id' => 'product-images-section',
- 'order' => 40,
- 'attributes' => array(
- 'title' => __( 'Images', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Images guide link opening tag. %2$s: Images guide link closing tag. */
- __( 'Drag images, upload new ones or select files from your library. For best results, use JPEG files that are 1000 by 1000 pixels or larger. %1$sHow to prepare images?%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/posts/how-to-take-professional-product-photos-top-tips" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $images_section->add_block(
- array(
- 'id' => 'product-images',
- 'blockName' => 'woocommerce/product-images-field',
- 'order' => 10,
- 'attributes' => array(
- 'images' => array(),
- 'property' => 'images',
- ),
- )
- );
-
- // Downloads section.
- $this->add_downloadable_product_blocks( $general_group );
- }
-
- /**
- * Adds the organization group blocks to the template.
- */
- private function add_organization_group_blocks() {
- $organization_group = $this->get_group_by_id( $this::GROUP_IDS['ORGANIZATION'] );
- // Product Catalog Section.
- $product_catalog_section = $organization_group->add_section(
- array(
- 'id' => 'product-catalog-section',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Product catalog', 'woocommerce' ),
- 'description' => __( 'Help customers find this product by assigning it to categories, adding extra details, and managing its visibility in your store and other channels.', 'woocommerce' ),
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-categories',
- 'blockName' => 'woocommerce/product-taxonomy-field',
- 'order' => 10,
- 'attributes' => array(
- 'slug' => 'product_cat',
- 'property' => 'categories',
- 'label' => __( 'Categories', 'woocommerce' ),
- 'createTitle' => __( 'Create new category', 'woocommerce' ),
- 'dialogNameHelpText' => __( 'Shown to customers on the product page.', 'woocommerce' ),
- 'parentTaxonomyText' => __( 'Parent category', 'woocommerce' ),
- 'placeholder' => __( 'Search or create categories…', 'woocommerce' ),
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-tags',
- 'blockName' => 'woocommerce/product-tag-field',
- 'attributes' => array(
- 'name' => 'tags',
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-catalog-search-visibility',
- 'blockName' => 'woocommerce/product-catalog-visibility-field',
- 'order' => 20,
- 'attributes' => array(
- 'label' => __( 'Hide in product catalog', 'woocommerce' ),
- 'visibility' => CatalogVisibility::SEARCH,
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-catalog-catalog-visibility',
- 'blockName' => 'woocommerce/product-catalog-visibility-field',
- 'order' => 30,
- 'attributes' => array(
- 'label' => __( 'Hide from search results', 'woocommerce' ),
- 'visibility' => CatalogVisibility::CATALOG,
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-enable-product-reviews',
- 'blockName' => 'woocommerce/product-checkbox-field',
- 'order' => 40,
- 'attributes' => array(
- 'label' => __( 'Enable product reviews', 'woocommerce' ),
- 'property' => 'reviews_allowed',
- ),
- )
- );
- $product_catalog_section->add_block(
- array(
- 'id' => 'product-post-password',
- 'blockName' => 'woocommerce/product-password-field',
- 'order' => 50,
- 'attributes' => array(
- 'label' => __( 'Require a password', 'woocommerce' ),
- ),
- )
- );
- // Attributes section.
- $product_attributes_section = $organization_group->add_section(
- array(
- 'id' => 'product-attributes-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Attributes', 'woocommerce' ),
- 'description' => __( 'Use global attributes to allow shoppers to filter and search for this product. Use custom attributes to provide detailed product information.', 'woocommerce' ),
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_attributes_section->add_block(
- array(
- 'id' => 'product-attributes',
- 'blockName' => 'woocommerce/product-attributes-field',
- 'order' => 10,
- )
- );
-
- if ( Features::is_enabled( 'product-custom-fields' ) ) {
- $organization_group->add_section(
- array(
- 'id' => 'product-custom-fields-wrapper-section',
- 'order' => 30,
- )
- )->add_block(
- array(
- 'id' => 'product-custom-fields-toggle',
- 'blockName' => 'woocommerce/product-custom-fields-toggle-field',
- 'order' => 10,
- 'attributes' => array(
- 'label' => __( 'Show custom fields', 'woocommerce' ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-custom-fields-section',
- 'blockName' => 'woocommerce/product-section',
- 'order' => 10,
- 'attributes' => array(
- 'blockGap' => 'unit-30',
- 'title' => __( 'Custom fields', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Custom fields guide link opening tag. %2$s: Custom fields guide link closing tag. */
- __( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or for internal inventory organization. %1$sRead more about custom fields%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/document/custom-product-fields/" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-custom-fields',
- 'blockName' => 'woocommerce/product-custom-fields',
- 'order' => 10,
- )
- );
- }
- }
-
- /**
- * Get the tax classes as select options.
- *
- * @param string $post_type The post type.
- * @return array Array of options.
- */
- public static function get_tax_classes( $post_type = 'product' ) {
- $tax_classes = array();
-
- if ( 'product_variation' === $post_type ) {
- $tax_classes[] = array(
- 'label' => __( 'Same as main product', 'woocommerce' ),
- 'value' => 'parent',
- );
- }
-
- // Add standard class.
- $tax_classes[] = array(
- 'label' => __( 'Standard rate', 'woocommerce' ),
- 'value' => '',
- );
-
- $classes = WC_Tax::get_tax_rate_classes();
-
- foreach ( $classes as $tax_class ) {
- $tax_classes[] = array(
- 'label' => $tax_class->name,
- 'value' => $tax_class->slug,
- );
- }
-
- return $tax_classes;
- }
-
- /**
- * Adds the inventory group blocks to the template.
- */
- private function add_inventory_group_blocks() {
- $inventory_group = $this->get_group_by_id( $this::GROUP_IDS['INVENTORY'] );
- $inventory_group->add_block(
- array(
- 'id' => 'product_variation_notice_inventory_tab',
- 'blockName' => 'woocommerce/product-has-variations-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( 'This product has options, such as size or color. You can now manage each variation\'s inventory and other details individually.', 'woocommerce' ),
- 'buttonText' => __( 'Go to Variations', 'woocommerce' ),
- 'type' => 'info',
- ),
- )
- );
- // Product Inventory Section.
- $product_inventory_section = $inventory_group->add_section(
- array(
- 'id' => 'product-inventory-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Inventory', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: Inventory settings link opening tag. %2$s: Inventory settings link closing tag.*/
- __( 'Set up and manage inventory for this product, including status and available quantity. %1$sManage store inventory settings%2$s', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=inventory' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_inventory_inner_section = $product_inventory_section->add_subsection(
- array(
- 'id' => 'product-inventory-inner-section',
- 'order' => 10,
- )
- );
- $inventory_columns = $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-inventory-inner-columns',
- 'blockName' => 'core/columns',
- )
- );
- $inventory_columns->add_block(
- array(
- 'id' => 'product-inventory-inner-column1',
- 'blockName' => 'core/column',
- )
- )->add_block(
- array(
- 'id' => 'product-sku-field',
- 'blockName' => 'woocommerce/product-sku-field',
- 'order' => 10,
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
- $inventory_columns->add_block(
- array(
- 'id' => 'product-inventory-inner-column2',
- 'blockName' => 'core/column',
- )
- )->add_block(
- array(
- 'id' => 'product-unique-id-field',
- 'blockName' => 'woocommerce/product-text-field',
- 'order' => 20,
- 'attributes' => array(
- 'property' => 'global_unique_id',
- // translators: %1$s GTIN %2$s UPC %3$s EAN %4$s ISBN.
- 'label' => sprintf( __( '%1$s, %2$s, %3$s, or %4$s', 'woocommerce' ), '<abbr title="' . esc_attr__( 'Global Trade Item Number', 'woocommerce' ) . '">' . esc_html__( 'GTIN', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'Universal Product Code', 'woocommerce' ) . '">' . esc_html__( 'UPC', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'European Article Number', 'woocommerce' ) . '">' . esc_html__( 'EAN', 'woocommerce' ) . '</abbr>', '<abbr title="' . esc_attr__( 'International Standard Book Number', 'woocommerce' ) . '">' . esc_html__( 'ISBN', 'woocommerce' ) . '</abbr>' ),
- 'tooltip' => __( 'Enter a barcode or any other identifier unique to this product. It can help you list this product on other channels or marketplaces.', 'woocommerce' ),
- 'pattern' => array(
- 'value' => '[0-9\-]*[0-9Xx]?',
- 'message' => __( 'Enter only numbers and hyphens (-). The letter X is allowed only as the final ISBN-10 check digit.', 'woocommerce' ),
- ),
- ),
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
-
- $manage_stock = 'yes' === get_option( 'woocommerce_manage_stock' );
- $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-track-stock',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 20,
- 'attributes' => array(
- 'label' => __( 'Track inventory', 'woocommerce' ),
- 'property' => 'manage_stock',
- 'disabled' => ! $manage_stock,
- 'disabledCopy' => ! $manage_stock ? sprintf(
- /* translators: %1$s: Learn more link opening tag. %2$s: Learn more link closing tag.*/
- __( 'Per your %1$sstore settings%2$s, inventory management is <strong>disabled</strong>.', 'woocommerce' ),
- '<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=inventory' ) . '" target="_blank" rel="noreferrer">',
- '</a>'
- ) : null,
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "external" || editedProduct.type === "grouped"',
- ),
- ),
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
- $product_inventory_quantity_hide_conditions = array(
- array(
- 'expression' => 'editedProduct.manage_stock === false',
- ),
- );
- $product_inventory_quantity_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "grouped"',
- );
- $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-inventory-quantity',
- 'blockName' => 'woocommerce/product-inventory-quantity-field',
- 'order' => 30,
- 'hideConditions' => $product_inventory_quantity_hide_conditions,
- )
- );
- $product_stock_status_hide_conditions = array(
- array(
- 'expression' => 'editedProduct.manage_stock === true',
- ),
- );
- $product_stock_status_hide_conditions[] = array(
- 'expression' => 'editedProduct.type === "grouped"',
- );
- $product_inventory_section->add_block(
- array(
- 'id' => 'product-stock-status',
- 'blockName' => 'woocommerce/product-radio-field',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Stock status', 'woocommerce' ),
- 'property' => 'stock_status',
- 'options' => array(
- array(
- 'label' => __( 'In stock', 'woocommerce' ),
- 'value' => ProductStockStatus::IN_STOCK,
- ),
- array(
- 'label' => __( 'Out of stock', 'woocommerce' ),
- 'value' => ProductStockStatus::OUT_OF_STOCK,
- ),
- array(
- 'label' => __( 'On backorder', 'woocommerce' ),
- 'value' => ProductStockStatus::ON_BACKORDER,
- ),
- ),
- ),
- 'hideConditions' => $product_stock_status_hide_conditions,
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
-
- $product_inventory_section->add_block(
- array(
- 'id' => 'product-purchase-note',
- 'blockName' => 'woocommerce/product-text-area-field',
- 'order' => 20,
- 'attributes' => array(
- 'property' => 'purchase_note',
- 'label' => __( 'Post-purchase note', 'woocommerce' ),
- 'placeholder' => __( 'Enter an optional note attached to the order confirmation message sent to the shopper.', 'woocommerce' ),
- 'lock' => array(
- 'move' => true,
- ),
- ),
- )
- );
-
- $product_inventory_advanced = $product_inventory_section->add_block(
- array(
- 'id' => 'product-inventory-advanced',
- 'blockName' => 'woocommerce/product-collapsible',
- 'order' => 30,
- 'attributes' => array(
- 'toggleText' => __( 'Advanced', 'woocommerce' ),
- 'initialCollapsed' => true,
- 'persistRender' => true,
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "grouped"',
- ),
- ),
- )
- );
- $product_inventory_advanced_wrapper = $product_inventory_advanced->add_block(
- array(
- 'blockName' => 'woocommerce/product-section',
- 'order' => 10,
- 'attributes' => array(
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_inventory_advanced_wrapper->add_block(
- array(
- 'id' => 'product-out-of-stock',
- 'blockName' => 'woocommerce/product-radio-field',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'When out of stock', 'woocommerce' ),
- 'property' => 'backorders',
- 'options' => array(
- array(
- 'label' => __( 'Allow purchases', 'woocommerce' ),
- 'value' => 'yes',
- ),
- array(
- 'label' => __(
- 'Allow purchases, but notify customers',
- 'woocommerce'
- ),
- 'value' => 'notify',
- ),
- array(
- 'label' => __( "Don't allow purchases", 'woocommerce' ),
- 'value' => 'no',
- ),
- ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.manage_stock === false',
- ),
- ),
- )
- );
- $product_inventory_advanced_wrapper->add_block(
- array(
- 'id' => 'product-inventory-email',
- 'blockName' => 'woocommerce/product-inventory-email-field',
- 'order' => 20,
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.manage_stock === false',
- ),
- ),
- )
- );
-
- $product_inventory_advanced_wrapper->add_block(
- array(
- 'id' => 'product-limit-purchase',
- 'blockName' => 'woocommerce/product-checkbox-field',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __(
- 'Restrictions',
- 'woocommerce'
- ),
- 'label' => __(
- 'Limit purchases to 1 item per order',
- 'woocommerce'
- ),
- 'property' => 'sold_individually',
- 'tooltip' => __(
- 'When checked, customers will be able to purchase only 1 item in a single order. This is particularly useful for items that have limited quantity, like art or handmade goods.',
- 'woocommerce'
- ),
- ),
- )
- );
- }
-
- /**
- * Adds the shipping group blocks to the template.
- */
- private function add_shipping_group_blocks() {
- $shipping_group = $this->get_group_by_id( $this::GROUP_IDS['SHIPPING'] );
- $shipping_group->add_block(
- array(
- 'id' => 'product_variation_notice_shipping_tab',
- 'blockName' => 'woocommerce/product-has-variations-notice',
- 'order' => 10,
- 'attributes' => array(
- 'content' => __( 'This product has options, such as size or color. You can now manage each variation\'s shipping settings and other details individually.', 'woocommerce' ),
- 'buttonText' => __( 'Go to Variations', 'woocommerce' ),
- 'type' => 'info',
- ),
- )
- );
- // Virtual section.
- $shipping_group->add_section(
- array(
- 'id' => 'product-virtual-section',
- 'order' => 10,
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type !== "simple"',
- ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-virtual',
- 'blockName' => 'woocommerce/product-toggle-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'virtual',
- 'checkedValue' => false,
- 'uncheckedValue' => true,
- 'label' => __( 'This product requires shipping or pickup', 'woocommerce' ),
- 'uncheckedHelp' => __( 'This product will not trigger your customer\'s shipping calculator in cart or at checkout. This product also won\'t require your customers to enter their shipping details at checkout. <a href="https://woocommerce.com/document/managing-products/#adding-a-virtual-product" target="_blank" rel="noreferrer">Read more about virtual products</a>.', 'woocommerce' ),
- ),
- )
- );
- // Product Shipping Section.
- $product_fee_and_dimensions_section = $shipping_group->add_section(
- array(
- 'id' => 'product-fee-and-dimensions-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Fees & dimensions', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: How to get started? link opening tag. %2$s: How to get started? link closing tag.*/
- __( 'Set up shipping costs and enter dimensions used for accurate rate calculations. %1$sHow to get started?%2$s', 'woocommerce' ),
- '<a href="https://woocommerce.com/posts/how-to-calculate-shipping-costs-for-your-woocommerce-store/" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- );
- $product_fee_and_dimensions_section->add_block(
- array(
- 'id' => 'product-shipping-class',
- 'blockName' => 'woocommerce/product-shipping-class-field',
- 'order' => 10,
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
- $product_fee_and_dimensions_section->add_block(
- array(
- 'id' => 'product-shipping-dimensions',
- 'blockName' => 'woocommerce/product-shipping-dimensions-fields',
- 'order' => 20,
- 'disableConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "variable"',
- ),
- ),
- )
- );
- }
-
- /**
- * Adds the variation group blocks to the template.
- */
- private function add_variation_group_blocks() {
- $variation_group = $this->get_group_by_id( $this::GROUP_IDS['VARIATIONS'] );
- if ( ! $variation_group ) {
- return;
- }
-
- $variation_group->add_section(
- array(
- 'id' => 'product-variation-options-section',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Variation options', 'woocommerce' ),
- 'description' => __( 'Add and manage attributes used for product options, such as size and color.', 'woocommerce' ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-variation-options',
- 'blockName' => 'woocommerce/product-variations-options-field',
- 'order' => 10,
- )
- );
-
- $variation_group->add_section(
- array(
- 'id' => 'product-variation-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Variations', 'woocommerce' ),
- 'description' => __( 'Manage individual product combinations created from options.', 'woocommerce' ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-variation-items',
- 'blockName' => 'woocommerce/product-variation-items-field',
- 'order' => 10,
- )
- );
- }
-
- /**
- * Adds the linked products group blocks to the template.
- */
- private function add_linked_products_group_blocks() {
- $linked_products_group = $this->get_group_by_id( $this::GROUP_IDS['LINKED_PRODUCTS'] );
- if ( ! isset( $linked_products_group ) ) {
- return;
- }
-
- $linked_products_group->add_section(
- array(
- 'id' => 'product-linked-upsells-section',
- 'order' => 10,
- 'attributes' => array(
- 'title' => __( 'Upsells', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: "Learn more about linked products" link opening tag. %2$s: "Learn more about linked products" link closing tag. */
- __( 'Upsells are typically products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales. %1$sLearn more about linked products%2$s', 'woocommerce' ),
- '<br /><a href="https://woocommerce.com/document/related-products-up-sells-and-cross-sells/" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-linked-upsells',
- 'blockName' => 'woocommerce/product-linked-list-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'upsell_ids',
- 'emptyState' => array(
- 'image' => 'ShoppingBags',
- 'tip' => __(
- 'Tip: Upsells are products that are extra profitable or better quality or more expensive. Experiment with combinations to boost sales.',
- 'woocommerce'
- ),
- 'isDismissible' => true,
- ),
- ),
- )
- );
-
- $linked_products_group->add_section(
- array(
- 'id' => 'product-linked-cross-sells-section',
- 'order' => 20,
- 'attributes' => array(
- 'title' => __( 'Cross-sells', 'woocommerce' ),
- 'description' => sprintf(
- /* translators: %1$s: "Learn more about linked products" link opening tag. %2$s: "Learn more about linked products" link closing tag. */
- __( 'By suggesting complementary products in the cart using cross-sells, you can significantly increase the average order value. %1$sLearn more about linked products%2$s', 'woocommerce' ),
- '<br /><a href="https://woocommerce.com/document/related-products-up-sells-and-cross-sells/" target="_blank" rel="noreferrer">',
- '</a>'
- ),
- ),
- 'hideConditions' => array(
- array(
- 'expression' => 'editedProduct.type === "external" || editedProduct.type === "grouped"',
- ),
- ),
- )
- )->add_block(
- array(
- 'id' => 'product-linked-cross-sells',
- 'blockName' => 'woocommerce/product-linked-list-field',
- 'order' => 10,
- 'attributes' => array(
- 'property' => 'cross_sell_ids',
- 'emptyState' => array(
- 'image' => 'CashRegister',
- 'tip' => __(
- 'Tip: By suggesting complementary products in the cart using cross-sells, you can significantly increase the average order value.',
- 'woocommerce'
- ),
- 'isDismissible' => true,
- ),
- ),
- )
- );
- }
-}
diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Subsection.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Subsection.php
deleted file mode 100644
index cc049cc642c..00000000000
--- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/Subsection.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-/**
- * WooCommerce Subsection Block class.
- */
-
-namespace Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SubsectionInterface;
-
-/**
- * Class for Subsection block.
- */
-class Subsection extends ProductBlock implements SubsectionInterface {
- // phpcs:disable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
- /**
- * Subsection Block constructor.
- *
- * @param array $config The block configuration.
- * @param BlockTemplateInterface $root_template The block template that this block belongs to.
- * @param ContainerInterface|null $parent The parent block container.
- *
- * @throws \ValueError If the block configuration is invalid.
- * @throws \ValueError If the parent block container does not belong to the same template as the block.
- * @throws \InvalidArgumentException If blockName key and value are passed into block configuration.
- */
- public function __construct( array $config, BlockTemplateInterface &$root_template, ?ContainerInterface &$parent = null ) { // phpcs:ignore Universal.NamingConventions.NoReservedKeywordParameterNames.parentFound
- if ( ! empty( $config['blockName'] ) ) {
- throw new \InvalidArgumentException( 'Unexpected key "blockName", this defaults to "woocommerce/product-subsection".' );
- }
- parent::__construct( array_merge( array( 'blockName' => 'woocommerce/product-subsection' ), $config ), $root_template, $parent );
- }
- // phpcs:enable Squiz.Commenting.FunctionCommentThrowTag.WrongNumber
-}
diff --git a/plugins/woocommerce/src/LayoutTemplates/LayoutTemplateRegistry.php b/plugins/woocommerce/src/LayoutTemplates/LayoutTemplateRegistry.php
deleted file mode 100644
index 14d87f8ec15..00000000000
--- a/plugins/woocommerce/src/LayoutTemplates/LayoutTemplateRegistry.php
+++ /dev/null
@@ -1,192 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\LayoutTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-
-use Automattic\WooCommerce\Internal\Admin\BlockTemplates\BlockTemplateLogger;
-
-/**
- * Layout template registry.
- */
-final class LayoutTemplateRegistry {
-
- /**
- * Class instance.
- *
- * @var LayoutTemplateRegistry|null
- */
- private static $instance = null;
-
- /**
- * Layout templates info.
- *
- * @var array
- */
- protected $layout_templates_info = array();
-
- /**
- * Layout template instances.
- *
- * @var array
- */
- protected $layout_template_instances = array();
-
- /**
- * Get the instance of the class.
- */
- public static function get_instance(): LayoutTemplateRegistry {
- if ( null === self::$instance ) {
- self::$instance = new self();
- }
-
- return self::$instance;
- }
-
- /**
- * Unregister all layout templates.
- */
- public function unregister_all() {
- $this->layout_templates_info = array();
- $this->layout_template_instances = array();
- }
-
- /**
- * Check if a layout template is registered.
- *
- * @param string $layout_template_id Layout template ID.
- */
- public function is_registered( $layout_template_id ): bool {
- return isset( $this->layout_templates_info[ $layout_template_id ] );
- }
-
- /**
- * Register a single layout template.
- *
- * @param string $layout_template_id Layout template ID.
- * @param string $layout_template_area Layout template area.
- * @param string $layout_template_class_name Layout template class to register.
- *
- * @throws \ValueError If a layout template with the same ID already exists.
- * @throws \ValueError If the specified layout template area is empty.
- * @throws \ValueError If the specified layout template class does not exist.
- * @throws \ValueError If the specified layout template class does not implement the BlockTemplateInterface.
- */
- public function register( $layout_template_id, $layout_template_area, $layout_template_class_name ) {
- if ( $this->is_registered( $layout_template_id ) ) {
- throw new \ValueError( 'A layout template with the specified ID already exists in the registry.' );
- }
-
- if ( empty( $layout_template_area ) ) {
- throw new \ValueError( 'The specified layout template area is empty.' );
- }
-
- if ( ! class_exists( $layout_template_class_name ) ) {
- throw new \ValueError( 'The specified layout template class does not exist.' );
- }
-
- if ( ! is_subclass_of( $layout_template_class_name, BlockTemplateInterface::class ) ) {
- throw new \ValueError( 'The specified layout template class does not implement the BlockTemplateInterface.' );
- }
-
- $this->layout_templates_info[ $layout_template_id ] = array(
- 'id' => $layout_template_id,
- 'area' => $layout_template_area,
- 'class_name' => $layout_template_class_name,
- );
- }
-
- /**
- * Instantiate the matching layout templates and return them.
- *
- * @param array $query_params Query params.
- */
- public function instantiate_layout_templates( array $query_params = array() ): array {
- // Make sure the block template logger is initialized before the templates are created,
- // so that the logger will collect the template events.
- $logger = BlockTemplateLogger::get_instance();
-
- $layout_templates = array();
-
- $layout_templates_info = $this->get_matching_layout_templates_info( $query_params );
- foreach ( $layout_templates_info as $layout_template_info ) {
- $layout_template = $this->get_layout_template_instance( $layout_template_info );
-
- $layout_template_id = $layout_template->get_id();
-
- $layout_templates[ $layout_template_id ] = $layout_template;
-
- $logger->log_template_events_to_file( $layout_template_id );
- }
-
- return $layout_templates;
- }
-
- /**
- * Instantiate a single layout template and return it.
- *
- * @param array $layout_template_info Layout template info.
- */
- private function get_layout_template_instance( $layout_template_info ): BlockTemplateInterface {
- $class_name = $layout_template_info['class_name'];
-
- // Return the instance if it already exists.
-
- $layout_template_instance = isset( $this->layout_template_instances[ $class_name ] )
- ? $this->layout_template_instances[ $class_name ]
- : null;
-
- if ( ! empty( $layout_template_instance ) ) {
- return $layout_template_instance;
- }
-
- // Instantiate the layout template.
-
- $layout_template_instance = new $class_name();
- $this->layout_template_instances[ $class_name ] = $layout_template_instance;
-
- // Call the after instantiation hooks.
-
- /**
- * Fires after a layout template is instantiated.
- *
- * @param string $layout_template_id Layout template ID.
- * @param string $layout_template_area Layout template area.
- * @param BlockTemplateInterface $layout_template Layout template instance.
- *
- * @since 8.6.0
- */
- do_action( 'woocommerce_layout_template_after_instantiation', $layout_template_info['id'], $layout_template_info['area'], $layout_template_instance );
-
- // Call the old, deprecated, register hook.
- wc_do_deprecated_action( 'woocommerce_block_template_register', array( $layout_template_instance ), '8.6.0', 'woocommerce_layout_template_after_instantiation' );
-
- return $layout_template_instance;
- }
-
- /**
- * Get matching layout templates info.
- *
- * @param array $query_params Query params.
- */
- private function get_matching_layout_templates_info( array $query_params = array() ): array {
- $area_to_match = isset( $query_params['area'] ) ? $query_params['area'] : null;
- $id_to_match = isset( $query_params['id'] ) ? $query_params['id'] : null;
-
- $matching_layout_templates_info = array();
-
- foreach ( $this->layout_templates_info as $layout_template_info ) {
- if ( ! empty( $area_to_match ) && $layout_template_info['area'] !== $area_to_match ) {
- continue;
- }
-
- if ( ! empty( $id_to_match ) && $layout_template_info['id'] !== $id_to_match ) {
- continue;
- }
-
- $matching_layout_templates_info[] = $layout_template_info;
- }
-
- return $matching_layout_templates_info;
- }
-}
diff --git a/plugins/woocommerce/tests/e2e-pw/fixtures/block-editor-fixtures.ts b/plugins/woocommerce/tests/e2e-pw/fixtures/block-editor-fixtures.ts
deleted file mode 100644
index b4e79309193..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/fixtures/block-editor-fixtures.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { test as baseTest } from './fixtures';
-import { ADMIN_STATE_PATH } from '../playwright.config';
-import { wpCLI } from '../utils/cli';
-
-export const test = baseTest.extend( {
- page: async ( { page, restApi }, use ) => {
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled yes'
- );
-
- // Disable the product editor tour
- await restApi.post( 'wc-admin/options', {
- woocommerce_block_product_tour_shown: 'yes',
- } );
-
- await use( page );
-
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled no'
- );
- },
- storageState: ADMIN_STATE_PATH,
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-grouped-product-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-grouped-product-block-editor.spec.ts
deleted file mode 100644
index 0a4161ed873..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-grouped-product-block-editor.spec.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { test } from '../../../fixtures/block-editor-fixtures';
-import { tags, expect } from '../../../fixtures/fixtures';
-import { clickOnTab } from '../../../utils/simple-products';
-import { getFakeProduct } from '../../../utils/data';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
-
-const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
-
-const productData = {
- name: `Grouped product Name ${ new Date().getTime().toString() }`,
- summary: 'This is a product summary',
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const groupedProducts: any[] = [];
-
-test.describe( 'General tab', { tag: tags.GUTENBERG }, () => {
- test.describe( 'Grouped product', () => {
- test.beforeAll( async ( { restApi } ) => {
- for ( let i = 0; i < 2; i++ ) {
- await restApi
- .post( `${ WC_API_PATH }/products`, getFakeProduct() )
- .then( ( response ) =>
- groupedProducts.push( response.data )
- );
- }
- } );
-
- test.afterAll( async ( { restApi } ) => {
- for ( const p of groupedProducts ) {
- await restApi
- .delete( `${ WC_API_PATH }/products/${ p.id }`, {
- force: true,
- } )
- .catch( ( err ) => {
- console.log( err );
- } );
- }
- } );
- test.skip(
- isTrackingSupposedToBeEnabled,
- 'The block product editor is not being tested'
- );
-
- test( 'can create a grouped product', async ( { page } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- await clickOnTab( 'General', page );
- const waitForProductResponse = page.waitForResponse(
- ( response ) =>
- response.url().includes( '/wp-json/wc/v3/products/' ) &&
- response.status() === 200
- );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- .fill( productData.name );
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .fill( productData.summary );
-
- await page
- .getByRole( 'button', {
- name: 'Change product type',
- } )
- .click();
-
- await page
- .locator( '.components-dropdown__content' )
- .getByText( 'Grouped product' )
- .click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product type changed.' );
-
- await waitForProductResponse;
-
- await page
- .locator( '[data-title="Product section"]' )
- .getByText( 'Add products' )
- .click();
-
- await page
- .getByRole( 'heading', {
- name: 'Add products to this group',
- } )
- .isVisible();
-
- for ( const product of groupedProducts ) {
- await page
- .locator(
- '.woocommerce-add-products-modal__form-group-content'
- )
- .getByPlaceholder( 'Search for products' )
- .fill( product.name );
-
- // await page.pause();
- await page.getByText( product.name ).click();
- }
-
- await page
- .locator( '.woocommerce-add-products-modal__actions' )
- .getByRole( 'button', {
- name: 'Add',
- } )
- .click();
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- const element = page.locator( 'div.components-snackbar__content' );
- const textContent = await element.innerText();
-
- await expect( textContent ).toMatch( 'Product type changed.' );
-
- await page.waitForResponse(
- ( response ) =>
- response.url().includes( '/wp-json/wc/v3/products/' ) &&
- response.status() === 200
- );
-
- const title = page.locator( '.woocommerce-product-header__title' );
-
- // Save product ID
- const productIdRegex = /product%2F(\d+)/;
- const url = page.url();
- const productIdMatch = productIdRegex.exec( url );
- const productId = productIdMatch ? productIdMatch[ 1 ] : null;
-
- await expect( productId ).toBeDefined();
- await expect( title ).toHaveText( productData.name );
-
- await page.goto( `?post_type=product&p=${ productId }` );
-
- await expect(
- page.getByRole( 'heading', { name: productData.name } )
- ).toBeVisible();
-
- for ( const product of groupedProducts ) {
- await expect(
- page.getByRole( 'link', { name: product.name } ).first()
- ).toBeVisible();
- }
- } );
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-simple-product-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-simple-product-block-editor.spec.ts
deleted file mode 100644
index f7de8ff3cc7..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-simple-product-block-editor.spec.ts
+++ /dev/null
@@ -1,521 +0,0 @@
-/**
- * External dependencies
- */
-import { insertBlock } from '@woocommerce/e2e-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { test } from '../../../fixtures/block-editor-fixtures';
-import { clickOnTab } from '../../../utils/simple-products';
-import { tags, expect } from '../../../fixtures/fixtures';
-import { checkCartContent } from '../../../utils/cart';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
-
-const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
-
-const productData = {
- name: `Simple product Name ${ new Date().getTime().toString() }`,
- summary: 'This is a product summary',
- descriptionTitle: 'Product Description title',
- descriptionParagraph: 'This is a product description',
- descriptionSimple: 'This is a product simple description',
- productPrice: '100',
- salePrice: '90',
- customFields: [
- { name: `custom-field_${ Date.now() }`, value: 'custom_1' },
- ],
- sku: `sku_${ Date.now() }`,
- gtin: `${ Date.now() }`,
- shipping: {
- shippingClassName: `shipping-class_${ Date.now() }`,
- weight: '2',
- length: '20',
- width: '10',
- height: '30',
- },
-};
-
-test.describe.configure( { mode: 'serial' } );
-
-test.describe( 'General tab', { tag: [ tags.GUTENBERG ] }, () => {
- test.describe( 'Simple product form', () => {
- test(
- 'renders each block without error',
- { tag: tags.COULD_BE_LOWER_LEVEL_TEST },
- async ( { page } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- await clickOnTab( 'General', page );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- .isVisible();
-
- await expect(
- page.locator( '.block-editor-warning' )
- ).toHaveCount( 0 );
- }
- );
- } );
-
- test.describe( 'Create product', () => {
- let productId;
-
- test.skip(
- // skip(condition, description) can be used at runtime to skip a test
- // eslint-disable-next-line jest/valid-title
- isTrackingSupposedToBeEnabled,
- 'The block product editor is not being tested'
- );
-
- test( 'can create a simple product', async ( { page } ) => {
- await test.step( 'add new product', async () => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- } );
-
- await test.step( 'add product name', async () => {
- await clickOnTab( 'General', page );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- // Have to use pressSequentially in order for the SKU to be auto-updated
- // before we move to the SKU field and attempt to fill it in; otherwise,
- // the SKU field can sometimes end up getting auto-updated after we have filled it in,
- // wiping out the value we entered.
- .pressSequentially( productData.name );
- } );
-
- await test.step( 'add simple product description', async () => {
- const descriptionSimpleParagraph = page.locator(
- '[data-template-block-id="product-description__content"] > p'
- );
-
- await descriptionSimpleParagraph.fill(
- productData.descriptionSimple
- );
- } );
-
- await test.step( 'add full product description', async () => {
- // Helps to ensure that block toolbar appears, by letting the editor
- // know that the user is done typing.
- await page.keyboard.press( 'Escape' );
-
- await page.getByText( 'Full editor' ).click();
-
- const timestamp = Date.now().toString();
- await insertBlock( page, 'Heading', timestamp );
-
- const editorCanvasLocator = page.frameLocator(
- 'iframe[name="editor-canvas"]'
- );
-
- await editorCanvasLocator
- .locator( '[data-title="Heading"]' )
- .fill( productData.descriptionTitle );
-
- await editorCanvasLocator
- .locator( '[data-title="Heading"]' )
- .blur();
-
- await insertBlock( page, 'Paragraph', timestamp );
-
- await editorCanvasLocator
- .locator( '[data-title="Paragraph"]' )
- .last()
- .fill( productData.descriptionParagraph );
-
- await page.getByRole( 'button', { name: 'Done' } ).click();
- } );
-
- await test.step( 'verify full product description', async () => {
- const previewContainerIframe = page
- .locator( '.block-editor-block-preview__container' )
- .frameLocator( 'iframe[title="Editor canvas"]' );
-
- const descriptionTitle = previewContainerIframe.locator(
- '[data-title="Heading"]'
- );
- const descriptionInitialParagraph = previewContainerIframe
- .locator( '[data-title="Paragraph"]' )
- .first();
- const descriptionSecondParagraph = previewContainerIframe
- .locator( '[data-title="Paragraph"]' )
- .last();
-
- await expect( descriptionTitle ).toHaveText(
- productData.descriptionTitle
- );
- await expect( descriptionInitialParagraph ).toHaveText(
- productData.descriptionSimple
- );
- await expect( descriptionSecondParagraph ).toHaveText(
- productData.descriptionParagraph
- );
-
- await descriptionTitle.click();
-
- await expect(
- page.getByText( 'Edit in full editor' )
- ).toBeVisible();
- } );
-
- await test.step( 'add product summary', async () => {
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .fill( productData.summary );
-
- // Blur the summary field to hide the toolbar before clicking on the regular price field.
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .blur();
- } );
-
- await test.step( 'add product price', async () => {
- const regularPrice = page
- .locator( 'input[name="regular_price"]' )
- .first();
- await regularPrice.waitFor( { state: 'visible' } );
- await regularPrice.click();
- await regularPrice.fill( productData.productPrice );
-
- const salePrice = page
- .locator( 'input[name="sale_price"]' )
- .first();
- await salePrice.waitFor( { state: 'visible' } );
- await salePrice.click();
- await salePrice.fill( productData.salePrice );
- } );
-
- await test.step( 'add custom fields', async () => {
- await clickOnTab( 'Organization', page );
-
- const customFieldsAddNewButton = page
- .getByLabel( 'Block: Product custom fields toggle control' )
- .getByRole( 'button', { name: 'Add new' } );
-
- // When re-running the test without resetting the env,
- // the custom fields toggle might be already checked,
- // so we need to check if the "Add new" button is already visible.
- //
- // eslint-disable-next-line playwright/no-conditional-in-test
- if ( ! ( await customFieldsAddNewButton.isVisible() ) ) {
- // Toggle the "Show custom fields" so that the "Add new" button is visible
-
- const customFieldsToggle = page.getByRole( 'checkbox', {
- name: 'Show custom fields',
- } );
-
- await customFieldsToggle.scrollIntoViewIfNeeded();
-
- // click() is used instead of check() because
- // Playwright sometimes has issues with custom checkboxes:
- // - https://github.com/microsoft/playwright/issues/13470
- // - https://github.com/microsoft/playwright/issues/20893
- // - https://github.com/microsoft/playwright/issues/27016
- //
- // eslint-disable-next-line playwright/no-conditional-in-test
- if ( ! ( await customFieldsToggle.isChecked() ) ) {
- await customFieldsToggle.click();
- }
-
- await customFieldsToggle.isEnabled();
- }
-
- await expect( customFieldsAddNewButton ).toBeVisible();
-
- await customFieldsAddNewButton.click();
-
- // Add custom fields modal
- const modal = page.locator(
- '.woocommerce-product-custom-fields__create-modal'
- );
-
- await expect(
- modal.getByText( 'Add custom fields' )
- ).toBeVisible();
-
- const nameInput = modal.getByLabel( 'Name' );
- // Have to use pressSequentially in order to get the dropdown to show up and be able to select the option
- await nameInput.pressSequentially(
- productData.customFields[ 0 ].name
- );
-
- await expect(
- modal.getByRole(
- 'option',
- productData.customFields[ 0 ].name
- )
- ).toBeVisible();
-
- await nameInput.press( 'Enter' );
-
- const valueInput = modal.getByLabel( 'Value' );
- await valueInput.fill( productData.customFields[ 0 ].value );
-
- await modal
- .getByRole( 'button', { name: 'Add', exact: true } )
- .click();
-
- await expect(
- modal.getByText( 'Add custom fields' )
- ).toBeHidden();
-
- await expect(
- page.getByText( productData.customFields[ 0 ].name )
- ).toBeVisible();
- await expect(
- page.getByText( productData.customFields[ 0 ].value )
- ).toBeVisible();
- } );
-
- await test.step( 'add inventory details', async () => {
- await clickOnTab( 'Inventory', page );
-
- await page
- .getByLabel( 'SKU (Stock Keeping Unit)' )
- .fill( productData.sku );
- await page
- .getByLabel( 'GTIN, UPC, EAN, or ISBN' )
- .fill( productData.gtin );
- } );
-
- await test.step( 'add shipping details', async () => {
- await clickOnTab( 'Shipping', page );
-
- // Shipping class
- await page
- .getByLabel( 'Shipping class', { exact: true } )
- //.locator( 'select[name="shipping_class"]' )
- .selectOption( 'Add new shipping class' );
-
- // New shipping class modal
- const modal = page.locator(
- '.woocommerce-add-new-shipping-class-modal'
- );
-
- await expect(
- modal.getByText( 'New shipping class' )
- ).toBeVisible();
-
- await modal
- .getByLabel( 'Name (Required)' )
- .fill( productData.shipping.shippingClassName );
-
- await modal.getByText( 'Add' ).click();
-
- await expect(
- modal.getByText( 'New shipping class' )
- ).toBeHidden();
-
- await expect(
- page.getByLabel( 'Shipping class', { exact: true } )
- ).toHaveValue( productData.shipping.shippingClassName );
-
- // Shipping dimensions
- await page
- .getByLabel( 'Width A' )
- .fill( productData.shipping.width );
- await page
- .getByLabel( 'Length B' )
- .fill( productData.shipping.length );
- await page
- .getByLabel( 'Height C' )
- .fill( productData.shipping.height );
- await page
- .getByLabel( 'Weight' )
- .fill( productData.shipping.weight );
- } );
-
- await test.step( 'publish the product', async () => {
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product published' );
-
- const title = page.locator(
- '.woocommerce-product-header__title'
- );
-
- // Save product ID
- const productIdRegex = /product%2F(\d+)/;
- const url = page.url();
- const productIdMatch = productIdRegex.exec( url );
- // This isn't really a conditional branch in the test;
- // just making sure we don't blow up if the regex doesn't match
- // (it will be caught in the expect below).
- // eslint-disable-next-line playwright/no-conditional-in-test
- productId = productIdMatch ? productIdMatch[ 1 ] : null;
-
- expect( productId ).toBeDefined();
- await expect( title ).toHaveText( productData.name );
- } );
-
- // Note for future refactoring: It would be good to reuse the verification step
- // from product-create-simple.spec.js, as both tests are just verifying that the
- // product was created correctly by looking at the front end.
- await test.step( 'verify the saved product in frontend', async () => {
- const permalink = await page
- .locator( '.product-details-section__product-link a' )
- .getAttribute( 'href' );
-
- await page.goto( permalink );
-
- // Verify product name
- await expect(
- page.getByRole( 'heading', {
- name: productData.name,
- } )
- ).toBeVisible();
-
- // Verify price
- await expect(
- page.getByText( productData.productPrice ).first()
- ).toBeVisible();
- await expect(
- page.getByText( productData.salePrice ).first()
- ).toBeVisible();
-
- // Verify summary
- await expect(
- page
- .locator( '#wp--skip-link--target' )
- .getByText( productData.summary )
- ).toBeVisible();
-
- // Verify description
- await page.getByRole( 'tab', { name: 'Description' } ).click();
-
- await expect(
- page.getByRole( 'heading', {
- name: productData.descriptionTitle,
- } )
- ).toBeVisible();
- await expect(
- page
- .getByLabel( 'Description' )
- .getByText( productData.descriptionSimple )
- ).toBeVisible();
- await expect(
- page
- .getByLabel( 'Description' )
- .getByText( productData.descriptionParagraph )
- ).toBeVisible();
-
- // Verify inventory details
- await expect(
- page.getByText( `SKU: ${ productData.sku }` )
- ).toBeVisible();
- // Note: GTIN is not displayed in the front end in the theme used in the test
-
- // Note: Shipping class is not displayed in the front end in the theme used in the test
-
- // Verify shipping dimensions
- await page
- .getByRole( 'tab', { name: 'Additional information' } )
- .click();
-
- await expect(
- page.getByText( `Weight ${ productData.shipping.weight }` )
- ).toBeVisible();
- await expect(
- page.getByText(
- `Dimensions ${ productData.shipping.length } × ${ productData.shipping.width } × ${ productData.shipping.height }`
- )
- ).toBeVisible();
- } );
- } );
-
- test( 'can not create a product with duplicated SKU', async ( {
- page,
- } ) => {
- await test.step( 'add new product', async () => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- } );
-
- await test.step( 'add product name', async () => {
- await clickOnTab( 'General', page );
- await page
- .locator( '//input[@placeholder="e.g. 12 oz Coffee Mug"]' )
- // Have to use pressSequentially in order for the SKU to be auto-updated
- // before we move to the SKU field and attempt to fill it in; otherwise,
- // the SKU field can sometimes end up getting auto-updated after we have filled it in,
- // wiping out the value we entered.
- .pressSequentially( productData.name );
- } );
-
- await test.step( 'add product price', async () => {
- const regularPrice = page
- .locator( 'input[name="regular_price"]' )
- .first();
- await regularPrice.waitFor( { state: 'visible' } );
- await regularPrice.click();
- await regularPrice.fill( productData.productPrice );
- } );
-
- await test.step( 'add inventory details', async () => {
- await clickOnTab( 'Inventory', page );
-
- await page
- .getByLabel( 'SKU (Stock Keeping Unit)' )
- .fill( productData.sku );
- } );
-
- await test.step( 'publish the product', async () => {
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- await expect(
- page.locator( '.components-snackbar__content' )
- ).toContainText( 'Invalid or duplicated SKU.' );
- } );
- } );
-
- // Note for future refactoring: It would be good to reuse the verification step
- // from product-create-simple.spec.js, as both tests are just verifying that the
- // product that was created can be added to the cart in the front end.
- test( 'can a shopper add the simple product to the cart', async ( {
- page,
- } ) => {
- await page.context().clearCookies();
-
- await page.goto( `?post_type=product&p=${ productId }` );
-
- await page.locator( 'button[name="add-to-cart"]' ).click();
- await page.getByRole( 'link', { name: 'View cart' } ).click();
-
- await checkCartContent(
- false,
- page,
- [
- {
- data: {
- name: productData.name,
- price: productData.salePrice,
- },
- qty: 1,
- },
- ],
- 0
- );
- } );
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-variable-product-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-variable-product-block-editor.spec.ts
deleted file mode 100644
index 0da28b87696..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/create-variable-product-block-editor.spec.ts
+++ /dev/null
@@ -1,480 +0,0 @@
-/**
- * Internal dependencies
- */
-import { test } from '../../../fixtures/block-editor-fixtures';
-import { clickOnTab } from '../../../utils/simple-products';
-import { disableVariableProductBlockTour } from '../../../utils/product-block-editor';
-import { variableProducts as utils } from '../../../utils';
-import attributes from './fixtures/attributes';
-import tabs from './data/tabs';
-import { waitForGlobalAttributesLoaded } from './helpers/wait-for-global-attributes-loaded';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const {
- createVariableProduct,
- deleteProductsAddedByTests,
- showVariableProductTour,
- productAttributes,
-} = utils;
-
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product&tab=variations';
-
-const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
-
-const productData = {
- name: `Variable product Name ${ new Date().getTime().toString() }`,
- summary: 'This is a product summary',
-};
-
-const sizeAttribute = attributes.find(
- ( attribute ) => attribute.name === 'Size'
-);
-
-const termsLength = sizeAttribute.terms.length;
-
-let productId_editVariations,
- productId_deleteVariations,
- productId_singleVariation;
-
-test.describe( 'Variations tab', { tag: tags.GUTENBERG }, () => {
- test.describe( 'Create variable products', () => {
- test.beforeAll( async ( { browser } ) => {
- productId_editVariations = await createVariableProduct(
- productAttributes
- );
- productId_deleteVariations = await createVariableProduct(
- productAttributes
- );
- productId_singleVariation = await createVariableProduct(
- productAttributes
- );
- await showVariableProductTour( browser, false );
- } );
-
- test.afterAll( async () => {
- await deleteProductsAddedByTests();
- } );
- test.skip(
- isTrackingSupposedToBeEnabled,
- 'The block product editor is not being tested'
- );
-
- test( 'can create a variation option and publish the product', async ( {
- page,
- } ) => {
- await test.step( 'Load new product editor, disable tour', async () => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- await disableVariableProductBlockTour( { page } );
- } );
-
- await test.step( 'Click on General tab, enter product name and summary', async () => {
- await clickOnTab( 'General', page );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- .fill( productData.name );
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .fill( productData.summary );
- } );
-
- await test.step( 'Click on Variations tab, add a new attribute', async () => {
- await clickOnTab( 'Variations', page );
- await page
- .getByRole( 'heading', { name: 'Variation options' } )
- .isVisible();
-
- await page
- .locator( '.woocommerce-attribute-field' )
- .getByRole( 'button', {
- name: 'Add options',
- } )
- .click();
- } );
-
- let newAttrData;
- await test.step( 'Create global attribute', async () => {
- await page
- .getByRole( 'heading', { name: 'Add variation options' } )
- .isVisible();
-
- await page.waitForLoadState( 'domcontentloaded' );
-
- /*
- * Check the app loads the attributes,
- * based on the Spinner visibility.
- */
- await waitForGlobalAttributesLoaded( page );
-
- // Attribute combobox input
- const attributeInputLocator = page
- .getByRole( 'dialog' )
- .getByRole( 'combobox' )
- .first();
-
- await attributeInputLocator.fill( sizeAttribute.name );
-
- await page.locator( 'text=Create "Size"' ).click();
-
- // Wait for the create-attribute async request to finish
- const newAttrResponse = await page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- `wp-json/wc/v3/products/attributes?name=${ sizeAttribute.name }&generate_slug=true`
- ) && response.status() === 201
- );
-
- newAttrData = await newAttrResponse.json();
- } );
-
- await test.step( 'Add new terms to the attribute', async () => {
- const FormTokenFieldLocator = page.locator(
- 'td.woocommerce-new-attribute-modal__table-attribute-value-column'
- );
-
- const FormTokenFieldInputLocator =
- FormTokenFieldLocator.locator(
- 'input[id^="components-form-token-input-"]'
- );
-
- for ( const term of sizeAttribute.terms ) {
- const apiResponsePromise = page.waitForResponse(
- ( response ) => {
- const urlToMatch = `/wp-json/wc/v3/products/attributes/${ newAttrData.id }/terms?name=${ term.name }&slug=${ term.slug }`;
-
- return (
- response
- .url()
- .includes( encodeURI( urlToMatch ) ) &&
- response.status() === 201
- );
- }
- );
-
- // Fill the input field with the option
- await FormTokenFieldInputLocator.fill( term.name );
- await FormTokenFieldInputLocator.press( 'Enter' );
-
- await apiResponsePromise;
-
- /*
- * Check the new option is added to the list,
- * by checking the last aria-hidden
- */
- const newAriaHiddenTokenLocator =
- FormTokenFieldLocator.locator(
- 'span.components-form-token-field__token-text > span[aria-hidden="true"]'
- ).last();
-
- await expect( newAriaHiddenTokenLocator ).toHaveText(
- term.name
- );
- }
-
- await page
- .locator( '.woocommerce-new-attribute-modal__buttons' )
- .getByRole( 'button', {
- name: 'Add',
- } )
- .click();
- } );
-
- await test.step( 'Add prices to variations', async () => {
- await expect(
- page.getByText(
- `${ termsLength } variations do not have prices. Variations that do not have prices will not be visible to customers.Set prices`
- )
- ).toBeVisible();
-
- page.on( 'dialog', ( dialog ) => dialog.accept( '50' ) );
-
- await page
- .getByRole( 'button', { name: 'Set prices' } )
- .click();
-
- await expect( page.getByText( '50' ).nth( 2 ) ).toBeVisible();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( `${ termsLength } variations updated.` );
-
- await expect(
- page.getByRole( 'button', {
- name: `Select all (${ termsLength })`,
- } )
- ).toBeVisible();
- } );
-
- await test.step( 'Publish the product', async () => {
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- const snackbarLocator = page.locator(
- 'div.components-snackbar__content'
- );
-
- // Wait for the snackbar to appear
- await snackbarLocator.waitFor( {
- state: 'visible',
- timeout: 20000,
- } );
-
- // Verify that the first message is the expected one
- await expect( snackbarLocator.nth( 0 ) ).toHaveText(
- `${ sizeAttribute.terms.length } variations updated.`
- );
-
- // Verify that the second message is the expected one
- await expect( snackbarLocator.nth( 1 ) ).toHaveText(
- /Product published/
- );
- } );
- } );
-
- test( 'can edit a variation', async ( { page } ) => {
- await page.goto(
- `wp-admin/admin.php?page=wc-admin&path=/product/${ productId_editVariations }`
- );
-
- await disableVariableProductBlockTour( { page } );
-
- await clickOnTab( 'Variations', page );
-
- await page
- .getByRole( 'button', { name: 'Generate from options' } )
- .click();
-
- const getVariationsResponsePromise = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- `/wp-json/wc/v3/products/${ productId_editVariations }/variations`
- ) && response.status() === 200
- );
-
- await clickOnTab( 'Variations', page );
-
- await getVariationsResponsePromise;
-
- // Wait for response only to avoid flaky filling regular price below in Inventory tab
- const waitResponse = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- 'wp-json/wc-admin/options?options=woocommerce_dimension_unit'
- ) && response.status() === 200
- );
-
- await page
- .locator( '.woocommerce-product-variations__table-body > div' )
- .first()
- .getByText( 'Edit' )
- .click();
-
- await page
- .locator( '.woocommerce-product-tabs' )
- .getByRole( 'tab', { name: 'General' } )
- .click();
-
- await page
- .getByLabel( 'Regular price', { exact: true } )
- .waitFor( { state: 'visible' } );
-
- await waitResponse;
-
- await page.getByLabel( 'Regular price', { exact: true } ).click();
-
- await page
- .getByLabel( 'Regular price', { exact: true } )
- .fill( '100' );
-
- await page
- .locator( '.woocommerce-product-tabs' )
- .getByRole( 'tab', { name: 'Inventory' } )
- .click();
-
- await page
- .locator( '[name="woocommerce-product-sku"]' )
- .fill( `product-sku-${ new Date().getTime().toString() }` );
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Update',
- } )
- .click();
- const element = page.locator( 'div.components-snackbar__content' );
- await expect( await element.innerText() ).toMatch(
- /Product updated./
- );
-
- await page
- .locator( '.woocommerce-product-header__back-tooltip-wrapper' )
- .getByRole( 'button', {
- name: 'Main product',
- } )
- .click();
-
- await expect(
- page
- .locator(
- '.woocommerce-product-variations__table-body > div'
- )
- .first()
- ).toBeVisible();
- } );
-
- test( 'can delete a variation', async ( { page } ) => {
- await page.goto(
- `wp-admin/admin.php?page=wc-admin&path=/product/${ productId_deleteVariations }`
- );
-
- const getVariationsResponsePromise = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- `/wp-json/wc/v3/products/${ productId_deleteVariations }/variations`
- ) && response.status() === 200
- );
-
- await clickOnTab( 'Variations', page );
-
- await getVariationsResponsePromise;
-
- await page
- .getByRole( 'button', { name: 'Generate from options' } )
- .click();
-
- await getVariationsResponsePromise;
-
- await page.getByLabel( 'Actions', { exact: true } ).first().click();
-
- await page.getByLabel( 'Delete variation' ).click();
-
- await expect(
- page
- .getByLabel( 'Dismiss this notice' )
- .getByText( '1 variation deleted.' )
- ).toBeVisible();
-
- await page.waitForSelector(
- 'div.woocommerce-product-variations-pagination__info',
- { timeout: 20000 }
- ); // test was timing out before page loaded
-
- await expect(
- await page
- .locator(
- '.woocommerce-product-variations__table-body > div'
- )
- .count()
- ).toEqual( 5 );
- } );
-
- test(
- 'can see variations warning and click the CTA',
- { tag: tags.COULD_BE_LOWER_LEVEL_TEST },
- async ( { page } ) => {
- await page.goto(
- `wp-admin/admin.php?page=wc-admin&path=/product/${ productId_deleteVariations }`
- );
-
- for ( const tab of tabs ) {
- const { name: tabName, noteText } = tab;
- await clickOnTab( tabName, page );
-
- const notices = page.locator(
- 'p.woocommerce-product-notice__content'
- );
-
- const noticeCount = await notices.count();
-
- for ( let i = 0; i < noticeCount; i++ ) {
- const notice = notices.nth( i );
- if ( await notice.isVisible() ) {
- await expect( notice ).toHaveText( noteText );
- }
- }
-
- await page
- .locator( '.woocommerce-product-notice__content' )
- .getByRole( 'button', { name: 'Go to Variations' } )
- .click();
-
- await expect(
- page.getByRole( 'heading', {
- name: 'Variation options',
- } )
- ).toBeVisible();
- }
- }
- );
-
- test(
- 'can see single variation warning and click the CTA',
- { tag: tags.COULD_BE_LOWER_LEVEL_TEST },
- async ( { page } ) => {
- await page.goto(
- `wp-admin/admin.php?page=wc-admin&path=/product/${ productId_singleVariation }&tab=variations`
- );
-
- await page
- .getByRole( 'button', { name: 'Generate from options' } )
- .click();
-
- await expect(
- page.getByText(
- 'variations do not have prices. Variations that do not have prices will not be visible to customers.Set prices'
- )
- ).toBeVisible();
-
- await page
- .getByRole( 'link', { name: 'Edit', exact: true } )
- .first()
- .click();
-
- const notices = page.getByText(
- 'You’re editing details specific to this variation.'
- );
-
- const noticeCount = await notices.count();
-
- const noteText =
- 'You’re editing details specific to this variation.';
-
- for ( let i = 0; i < noticeCount; i++ ) {
- const notice = notices.nth( i );
- if ( await notice.isVisible() ) {
- await expect( notice ).toHaveText( noteText );
- }
- }
-
- await page
- .locator( '.woocommerce-product-notice__content > a' )
- .first()
- .click();
-
- await expect(
- page.getByRole( 'heading', {
- name: 'Variation options',
- } )
- ).toBeVisible();
- }
- );
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/data/tabs.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/data/tabs.ts
deleted file mode 100644
index 9790c4f197e..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/data/tabs.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * Tabs (groups) define the main menu (header) of the product edit page.
- * Each tab has a name and a note text that is displayed below the tab name.
- */
-const tabs = [
- {
- name: 'General',
- noteText:
- "This product has options, such as size or color. You can manage each variation's images, downloads, and other details individually.",
- },
- {
- name: 'Inventory',
- noteText:
- "This product has options, such as size or color. You can now manage each variation's inventory and other details individually.",
- },
- {
- name: 'Shipping',
- noteText:
- "This product has options, such as size or color. You can now manage each variation's shipping settings and other details individually.",
- },
-];
-
-export default tabs;
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/disable-block-product-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/disable-block-product-editor.spec.ts
deleted file mode 100644
index c0f893ff44f..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/disable-block-product-editor.spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import { test, expect, type Page } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import {
- clickAddNewMenuItem,
- expectBlockProductEditor,
- expectOldProductEditor,
-} from '../../../utils/simple-products';
-import { toggleBlockProductTour } from '../../../utils/tours';
-import { tags } from '../../../fixtures/fixtures';
-import { ADMIN_STATE_PATH } from '../../../playwright.config';
-import { wpCLI } from '../../../utils/cli';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-async function dismissFeedbackModalIfShown( page: Page ) {
- try {
- await page
- .getByRole( 'button', { name: 'Skip' } )
- .click( { timeout: 10000 } );
- } catch ( error ) {}
-}
-
-test.describe.serial(
- 'Disable block product editor',
- { tag: tags.GUTENBERG },
- () => {
- test.use( { storageState: ADMIN_STATE_PATH } );
-
- test.beforeAll( async ( { request } ) => {
- await toggleBlockProductTour( request, false );
- } );
-
- test.beforeEach( async () => {
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled yes'
- );
- } );
-
- test.afterAll( async () => {
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled no'
- );
- } );
-
- // expectBlockProductEditor function contains the assertion
- // eslint-disable-next-line playwright/expect-expect
- test( 'is hooked up to sidebar "Add New"', async ( { page } ) => {
- await page.goto( 'wp-admin/edit.php?post_type=product' );
- await clickAddNewMenuItem( page );
- await expectBlockProductEditor( page );
- } );
-
- // expectOldProductEditor function contains the assertion
- // eslint-disable-next-line playwright/expect-expect
- test( 'can be disabled from the header', async ( { page } ) => {
- await page.goto(
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product'
- );
-
- try {
- // dismiss feature highlight if shown
- await page
- .getByRole( 'button', { name: 'Close Tour' } )
- .click( { timeout: 5000 } );
- } catch ( e ) {}
-
- // turn off block product editor from the header
- await page.locator( 'button[aria-label="Options"]' ).click();
- await page
- .getByRole( 'menuitem', {
- name: 'Turn off the new product editor',
- } )
- .click();
- await dismissFeedbackModalIfShown( page );
- await expectOldProductEditor( page );
- } );
-
- // expectOldProductEditor function contains the assertion
- // eslint-disable-next-line playwright/expect-expect
- test( 'can be disabled from settings', async ( { page } ) => {
- await page.goto(
- 'wp-admin/admin.php?page=wc-settings&tab=advanced§ion=features'
- );
-
- await page
- .locator( '#woocommerce_feature_product_block_editor_enabled' )
- .click();
-
- await page
- .getByRole( 'button', {
- name: 'Save changes',
- } )
- .click();
-
- await expect(
- page
- .locator( '#message' )
- .getByText( 'Your settings have been saved' )
- ).toBeVisible();
- await page.goto( 'wp-admin/edit.php?post_type=product' );
- await clickAddNewMenuItem( page );
- await expectOldProductEditor( page );
- } );
- }
-);
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/fixtures/attributes.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/fixtures/attributes.ts
deleted file mode 100644
index 05fdec9dcd7..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/fixtures/attributes.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Attributes data
- * These attributes represent the attributes
- * that the user can assign to a product.
- */
-const attributes = [
- {
- name: 'Color',
- terms: [
- { name: 'Red', slug: 'red' },
- { name: 'Blue', slug: 'blue' },
- { name: 'Green', slug: 'green' },
- ],
- },
- {
- name: 'Size',
- terms: [
- { name: 'Small', slug: 'small' },
- { name: 'Medium', slug: 'medium' },
- { name: 'Large', slug: 'large' },
- { name: 'Extra Large', slug: 'extra-large' },
- { name: 'Extra Extra Large', slug: 'extra-extra-large' },
- ],
- },
- {
- name: 'Style',
- terms: [
- { name: 'Modern', slug: 'modern' },
- { name: 'Classic', slug: 'classic' },
- { name: 'Vintage', slug: 'vintage' },
- ],
- },
-];
-
-export default attributes;
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/skip-tests.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/skip-tests.ts
deleted file mode 100644
index de8f5ca7932..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/skip-tests.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { test } from '../../../../fixtures/block-editor-fixtures';
-
-// eslint-disable-next-line jest/no-export
-export const skipTestsForDeprecatedFeature = () =>
- test.skip(
- () => true,
- 'Experimental block-based product editor is officially deprecated since 10.2. See: https://developer.woocommerce.com/2025/07/23/10-1-pre-release-updates/#:~:text=%F0%9F%8C%85%20Say%20sayonara,the%20near%20future'
- );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/wait-for-global-attributes-loaded.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/wait-for-global-attributes-loaded.ts
deleted file mode 100644
index f7e557195a4..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/helpers/wait-for-global-attributes-loaded.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import type { Page } from '@playwright/test';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const wp: any;
-
-/**
- * Waits for the global attributes to be loaded on the page.
- *
- * This function waits until the `hasFinishedResolution` selector
- * from the `wc/admin/products/attributes` store indicates that
- * the product attributes are no longer loading.
- *
- * @param {Object} page - The Playwright Page object.
- * @return {Promise<void>} A promise that resolves when the global attributes are loaded.
- */
-export async function waitForGlobalAttributesLoaded( page: Page ) {
- await page.waitForFunction( () => {
- const storeId = 'wc/admin/products/attributes';
- const attributeSortCriteria = { order_by: 'name' };
-
- const isLoadingAttributes = ! wp.data
- .select( storeId )
- .hasFinishedResolution( 'getProductAttributes', [
- attributeSortCriteria,
- ] );
-
- return ! isLoadingAttributes;
- } );
-}
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/linked-product-tab-product-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/linked-product-tab-product-block-editor.spec.ts
deleted file mode 100644
index 7ed4a3a0dd6..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/linked-product-tab-product-block-editor.spec.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { test } from '../../../fixtures/block-editor-fixtures';
-import { helpers } from '../../../utils';
-import { tags, expect } from '../../../fixtures/fixtures';
-import { clickOnTab } from '../../../utils/simple-products';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
-
-const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
-
-const uniqueId = helpers.random();
-let categoryId = 0;
-const categoryName = `cat_${ uniqueId }`;
-const productName = `Product ${ uniqueId }`;
-const productData = {
- name: `Linked ${ productName }`,
- summary: 'This is a product summary',
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const linkedProductsData: any[] = [],
- productIds: number[] = [];
-let productId: string | null = null;
-
-test.describe( 'General tab', { tag: tags.GUTENBERG }, () => {
- test.describe( 'Linked product', () => {
- test.beforeAll( async ( { restApi } ) => {
- await restApi
- .post( `${ WC_API_PATH }/products/categories`, {
- name: categoryName,
- } )
- .then( ( response ) => {
- categoryId = response.data.id;
- } );
-
- for ( let i = 1; i <= 5; i++ ) {
- const product = {
- name: `Product ${ uniqueId } ${ i }`,
- regular_price: `${ i }0000`,
- sale_price: `${ i }000`,
- type: 'simple',
- categories: [ { id: categoryId } ],
- };
- await restApi
- .post( `${ WC_API_PATH }/products`, product )
- .then( ( response ) => {
- productIds.push( response.data.id );
- linkedProductsData.push( product );
- } );
- }
- } );
-
- test.afterAll( async ( { restApi } ) => {
- for ( const aProductId of productIds ) {
- await restApi.delete(
- `${ WC_API_PATH }/products/${ aProductId }`,
- {
- force: true,
- }
- );
- }
- await restApi.delete( `${ WC_API_PATH }/products/${ productId }`, {
- force: true,
- } );
-
- await restApi.delete(
- `${ WC_API_PATH }/products/categories/${ categoryId }`,
- {
- force: true,
- }
- );
- } );
-
- test.skip(
- isTrackingSupposedToBeEnabled,
- 'The block product editor is not being tested'
- );
-
- test( 'can create a product with linked products', async ( {
- page,
- } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- await clickOnTab( 'General', page );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- .fill( productData.name );
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .fill( productData.summary );
-
- // Include in category
- await clickOnTab( 'Organization', page );
- const waitForCategoriesResponse = page.waitForResponse(
- ( response ) =>
- response.url().includes( '/wp-json/wp/v2/product_cat' ) &&
- response.status() === 200
- );
- await page.getByLabel( 'Categories' ).click();
- await waitForCategoriesResponse;
- await page.getByLabel( categoryName ).check();
- await page.getByLabel( `Remove Uncategorized` ).click();
- await expect(
- page.getByLabel( `Remove ${ categoryName }` )
- ).toBeVisible();
-
- const waitForProductsSearchResponse = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes( '/wp-json/wc/v3/products?search' ) &&
- response.status() === 200
- );
- await clickOnTab( 'Linked products', page );
- await waitForProductsSearchResponse;
-
- await expect(
- page.getByRole( 'heading', {
- name: 'Cross-sells',
- } )
- ).toBeVisible();
-
- await page
- .locator(
- '.wp-block-woocommerce-product-linked-list-field__form-group-content'
- )
- .first()
- .getByRole( 'combobox' )
- .fill( productName );
-
- await page.getByText( linkedProductsData[ 0 ].name ).click();
-
- const chooseProductsResponsePromise = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- '/wp-json/wc/v3/products/suggested-products'
- ) && response.status() === 200
- );
-
- await page.getByText( 'Choose products for me' ).first().click();
- await chooseProductsResponsePromise;
-
- await expect(
- page.getByRole( 'row', { name: productName } )
- ).toHaveCount( 4 );
-
- const upsellsRows = page.locator(
- 'div.woocommerce-product-list div[role="table"] div[role="rowgroup"] div[role="row"]'
- );
-
- await expect( upsellsRows ).toHaveCount( 4 );
-
- await page
- .locator(
- '.wp-block-woocommerce-product-linked-list-field__form-group-content'
- )
- .last()
- .getByRole( 'combobox' )
- .fill( linkedProductsData[ 1 ].name );
-
- await page
- .getByText( linkedProductsData[ 1 ].name )
- .first()
- .click();
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product published' );
-
- const title = page.locator( '.woocommerce-product-header__title' );
-
- // Save product ID
- const productIdRegex = /product%2F(\d+)/;
- const url = page.url();
- const productIdMatch = productIdRegex.exec( url );
- productId = productIdMatch ? productIdMatch[ 1 ] : null;
-
- await expect( productId ).toBeDefined();
- await expect( title ).toHaveText( productData.name );
-
- await page.goto( `?post_type=product&p=${ productId }` );
-
- await expect(
- page.getByRole( 'heading', {
- name: productData.name,
- level: 1,
- } )
- ).toBeVisible();
-
- const productsList = page.locator(
- 'section.upsells.products ul > li'
- );
-
- await expect( productsList ).toHaveCount( 4 );
- } );
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/organization-tab-product-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/organization-tab-product-block-editor.spec.ts
deleted file mode 100644
index a9f76d8dca7..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/organization-tab-product-block-editor.spec.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * External dependencies
- */
-import { faker } from '@faker-js/faker';
-
-/**
- * Internal dependencies
- */
-import { test } from '../../../fixtures/block-editor-fixtures';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { clickOnTab } from '../../../utils/simple-products';
-import { getFakeCategory } from '../../../utils/data';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
-
-const isTrackingSupposedToBeEnabled = !! process.env.ENABLE_TRACKING;
-
-const productData = {
- name: faker.commerce.productName(),
- summary: 'This is a product summary',
- productPrice: '100',
- salePrice: '90',
-};
-
-const categoryName = getFakeCategory().name;
-
-const tagName = `my-tag-${ new Date().getTime().toString() }`;
-
-test.describe.configure( { mode: 'serial' } );
-
-test.describe( 'General tab', { tag: tags.GUTENBERG }, () => {
- test.describe( 'Create product - Organization tab', () => {
- let productId;
-
- test.skip(
- isTrackingSupposedToBeEnabled,
- 'The block product editor is not being tested'
- );
-
- test( 'can create a simple product with categories, tags and with password required', async ( {
- page,
- } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
- await clickOnTab( 'General', page );
- await page
- .getByPlaceholder( 'e.g. 12 oz Coffee Mug' )
- .fill( productData.name );
-
- const regularPrice = page
- .locator( 'input[name="regular_price"]' )
- .first();
- await regularPrice.waitFor( { state: 'visible' } );
- await regularPrice.click();
- await regularPrice.fill( productData.productPrice );
-
- const salePrice = page
- .locator( 'input[name="sale_price"]' )
- .first();
- await salePrice.waitFor( { state: 'visible' } );
- await salePrice.click();
- await salePrice.fill( productData.salePrice );
-
- await page
- .locator(
- '[data-template-block-id="basic-details"] .components-summary-control'
- )
- .last()
- .fill( productData.summary );
-
- await clickOnTab( 'Organization', page );
-
- await page.getByLabel( 'Categories' ).click();
-
- await page.locator( 'text=Create new' ).click();
-
- await page
- .locator( '[id^="taxonomy_name-"]' )
- .first()
- .fill( categoryName );
-
- await page
- .locator( '.woocommerce-create-new-taxonomy-modal__buttons' )
- .getByRole( 'button', {
- name: 'Create',
- } )
- .click();
-
- await page.getByLabel( 'Tags' ).click();
-
- await page.locator( 'text=Create new' ).click();
-
- await page
- .locator( '[id^="inspector-text-control-"]' )
- .first()
- .fill( tagName );
-
- await page
- .locator( '.woocommerce-create-new-tag-modal__buttons' )
- .getByRole( 'button', {
- name: 'Save',
- } )
- .click();
-
- await page
- .getByRole( 'checkbox', { name: 'Require a password' } )
- .first()
- .check();
-
- await page
- .locator( '[id^="post_password-"]' )
- .first()
- .fill( 'password' );
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .getByRole( 'button', {
- name: 'Publish',
- } )
- .click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product published' );
-
- const title = page.locator( '.woocommerce-product-header__title' );
-
- // Save product ID
- const productIdRegex = /product%2F(\d+)/;
- const url = page.url();
- const productIdMatch = productIdRegex.exec( url );
- productId = productIdMatch ? productIdMatch[ 1 ] : null;
-
- await expect( productId ).toBeDefined();
- await expect( title ).toHaveText( productData.name );
-
- await page.goto( `?post_type=product&p=${ productId }` );
-
- await page
- .locator( 'input[name="post_password"]' )
- .fill( 'password' );
-
- await page.getByRole( 'button', { name: 'Enter' } ).click();
-
- await expect(
- page.getByRole( 'heading', {
- name: productData.name,
- level: 1,
- } )
- ).toBeVisible();
-
- await expect(
- page.getByRole( 'link', { name: categoryName } ).first()
- ).toBeVisible();
-
- await expect(
- page.getByRole( 'link', { name: tagName } )
- ).toBeVisible();
- } );
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-attributes-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-attributes-block-editor.spec.ts
deleted file mode 100644
index b13ce91edcc..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-attributes-block-editor.spec.ts
+++ /dev/null
@@ -1,514 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-import type { Page } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import { test as baseTest } from '../../../fixtures/block-editor-fixtures';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { updateProduct } from '../../../utils/product-block-editor';
-import { clickOnTab } from '../../../utils/simple-products';
-import attributesData from './fixtures/attributes';
-import { waitForGlobalAttributesLoaded } from './helpers/wait-for-global-attributes-loaded';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-async function waitForAttributeList( page: Page ) {
- // The list child is different in case there are no results versus when there already are some attributes, so we need to wait for either one to be visible.
- await Promise.race( [
- // in case there's at least one attribute
- // eslint-disable-next-line playwright/missing-playwright-await
- expect(
- page.getByRole( 'listbox' ).getByRole( 'option' ).first()
- ).toBeVisible(),
- // in case there are no attributes
- // eslint-disable-next-line playwright/missing-playwright-await
- expect(
- page
- .getByRole( 'listbox' )
- .getByText( 'Nothing yet. Type to create.' )
- ).toBeVisible(),
- ] );
-}
-
-const test = baseTest.extend( {
- product: async ( { restApi }, use ) => {
- let product;
-
- await restApi
- .post( `${ WC_API_PATH }/products`, {
- name: `Product ${ Date.now() }`,
- type: 'simple',
- } )
- .then( ( response ) => {
- product = response.data;
- } );
-
- await use( product );
-
- // Cleanup
- await restApi.delete( `${ WC_API_PATH }/products/${ product.id }`, {
- force: true,
- } );
- },
- attributes: async ( { restApi }, use ) => {
- let attribute;
- let terms;
-
- await restApi
- .post( `${ WC_API_PATH }/products/attributes`, {
- name: `Color_${ Date.now() }`,
- slug: `pa_color_${ Date.now() }`,
- } )
- .then( ( response ) => {
- attribute = response.data;
- } );
-
- await restApi
- .post(
- `${ WC_API_PATH }/products/attributes/${ attribute.id }/terms/batch`,
- {
- create: [
- {
- name: 'red',
- },
- {
- name: 'blue',
- },
- ],
- }
- )
- .then( ( response ) => {
- terms = response.data.create;
- } );
-
- await use( { attribute, terms } );
-
- // Cleanup
- await restApi.delete(
- `${ WC_API_PATH }/products/attributes/${ attribute.id }`
- );
- },
- productWithAttributes: async ( { restApi, product, attributes }, use ) => {
- let updatedProduct;
- attributes.attribute.options = attributes.terms.map(
- ( term ) => term.name
- );
- attributes.attribute.visible = true;
-
- await restApi
- .put( `${ WC_API_PATH }/products/${ product.id }`, {
- attributes: [ attributes.attribute ],
- } )
- .then( ( response ) => {
- updatedProduct = response.data;
- } );
-
- await use( updatedProduct );
- },
-} );
-
-test(
- 'add local attribute (with terms) to the Product',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- await test.step( 'go to product editor -> Organization tab -> Click on `Add new`', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- await clickOnTab( 'Organization', page );
-
- await page
- .getByRole( 'heading', { name: 'Attributes' } )
- .isVisible();
-
- await page
- // Using a selector because there are many "Add new" buttons on the page
- .locator( '.woocommerce-add-attribute-list-item__add-button' )
- .click();
-
- await page
- .getByRole( 'heading', { name: 'Add variation options' } )
- .isVisible();
-
- await page.waitForLoadState( 'domcontentloaded' );
-
- // Confirm the Add button is disabled
- await expect(
- page.getByRole( 'button', { name: 'Add attributes' } )
- ).toBeDisabled();
- } );
-
- await test.step( 'create local attributes with terms', async () => {
- /*
- * attributeRowsLocator are the rows that contains
- * the Attribute combobox and the Term FormTokenField.
- */
- const attributeRowsLocator = page.locator(
- '.woocommerce-new-attribute-modal__table-row'
- );
-
- // First, check the app loads the attributes,
- await waitForGlobalAttributesLoaded( page );
-
- for ( const attribute of attributesData ) {
- const attributeRowLocator = attributeRowsLocator.last();
-
- const attributeComboboxLocator = attributeRowLocator
- .locator(
- 'input[aria-describedby^="components-form-token-suggestions-howto-combobox-control"]'
- )
- .last();
-
- // Create new (local) product attribute.
- await attributeComboboxLocator.fill( attribute.name );
- await page
- .locator( `text=Create "${ attribute.name }"` )
- .click();
-
- const FormTokenFieldLocator = attributeRowLocator.locator(
- 'td.woocommerce-new-attribute-modal__table-attribute-value-column'
- );
-
- // Term FormTokenField input locator
- const FormTokenFieldInputLocator =
- FormTokenFieldLocator.locator(
- 'input[id^="components-form-token-input-"]'
- );
-
- // Add terms to the attribute.
- for ( const term of attribute.terms ) {
- await FormTokenFieldInputLocator.fill( term.name );
- await FormTokenFieldInputLocator.press( 'Enter' );
- }
-
- // Terms accepted, so the Add button should be enabled.
- await expect(
- page.getByRole( 'button', { name: 'Add attributes' } )
- ).toBeEnabled();
-
- await page.getByLabel( 'Add another attribute' ).click();
-
- // Attribute no defined, so the Add button should be disabled.
- await expect(
- page.getByRole( 'button', { name: 'Add attributes' } )
- ).toBeDisabled();
- }
- } );
-
- // Remove the last row, as it was added by the last click on "Add another attribute".
- await page
- .getByRole( 'button', { name: 'Remove attribute' } )
- .last()
- .click();
-
- await expect(
- page.getByRole( 'button', { name: 'Add attributes' } )
- ).toBeEnabled();
-
- // Add the product attributes
- await page.getByRole( 'button', { name: 'Add attributes' } ).click();
-
- await test.step( 'verify attributes in product editor', async () => {
- // Locate the main attributes list element
- const attributesListLocator = page.locator(
- '[data-template-block-id="product-attributes-section"]'
- );
- await expect( attributesListLocator ).toBeVisible();
-
- const attributeRowsLocator =
- attributesListLocator.getByRole( 'listitem' );
-
- for ( const attribute of attributesData ) {
- const attributeRowLocator = attributeRowsLocator.filter( {
- has: page.getByText( attribute.name, { exact: true } ),
- } );
- await expect( attributeRowLocator ).toBeVisible();
-
- // UI only shows 3 terms, so we need to check if the term is visible.
- const shownTerms = attribute.terms.slice( 0, 3 ).entries();
-
- // Check if there are more terms than three.
- const moreThanThreeTerms = attribute.terms.length > 3;
-
- for ( const [ index, term ] of shownTerms ) {
- /*
- * Disabling the eslint rule because the text
- * is different when there are more than three terms.
- */
- const termLabel =
- // eslint-disable-next-line playwright/no-conditional-in-test
- moreThanThreeTerms && index === 2
- ? '+ 3 more'
- : term.name;
- // Pick the term element/locator
- const termLocator = attributeRowLocator
- .locator( `[aria-hidden="true"]` )
- .filter( {
- has: page.getByText( termLabel, {
- exact: true,
- } ),
- } );
-
- // Verify the term is visible
- await expect( termLocator ).toBeVisible();
-
- // Verify the term text
- await expect( termLocator ).toContainText( termLabel );
- }
- }
- } );
-
- await test.step( 'update the product', async () => {
- await updateProduct( { page, expect } );
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- // Verify attributes in store frontend
- await page.goto( product.permalink );
-
- // Verify attributes in store frontend
- for ( const attribute of attributesData ) {
- const item = page.getByRole( 'row' ).filter( {
- has: page.getByText( attribute.name, { exact: true } ),
- } );
- await expect( item ).toBeVisible();
- await expect( item ).toContainText( attribute.name );
- }
- } );
- }
-);
-
-test(
- 'can add existing attributes',
- { tag: tags.GUTENBERG },
- async ( { page, product, attributes } ) => {
- await test.step( 'go to product editor, Organization tab', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- await page.getByRole( 'tab', { name: 'Organization' } ).click();
- } );
-
- await test.step( 'add an existing attribute', async () => {
- await page
- .getByRole( 'button', { name: 'Add new' } )
- .first()
- .click();
-
- await page.waitForLoadState( 'domcontentloaded' );
-
- await page
- .locator( '.woocommerce-attributes-combobox input' )
- .click();
-
- // Unless we wait for the list to be visible, the attribute name will be filled too soon and the test will fail.
- await waitForAttributeList( page );
-
- await page
- .locator( '.woocommerce-attributes-combobox input' )
- .fill( attributes.attribute.name );
- await page
- .getByRole( 'option', { name: attributes.attribute.name } )
- .first()
- .click();
-
- await page.getByPlaceholder( 'Search or create value' ).click();
-
- for ( const term of attributes.terms ) {
- await page.getByText( term.name, { exact: true } ).click();
- }
-
- await page.keyboard.press( 'Escape' );
-
- // Add attributes
- await page
- .getByRole( 'button', { name: 'Add attributes' } )
- .click();
- } );
-
- const attributeRowLocator = page.getByRole( 'listitem' ).filter( {
- has: page.getByText( attributes.attribute.name, { exact: true } ),
- } );
-
- await test.step( 'verify attributes in product editor', async () => {
- await expect( attributeRowLocator ).toBeVisible();
- for ( const term of attributes.terms ) {
- await expect( attributeRowLocator ).toContainText( term.name );
- }
- } );
-
- await test.step( 'update the product', async () => {
- await updateProduct( { page, expect } );
- } );
-
- await test.step( 'verify attributes in product editor after product update', async () => {
- await expect( attributeRowLocator ).toBeVisible();
- for ( const term of attributes.terms ) {
- await expect( attributeRowLocator ).toContainText( term.name );
- }
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- await page.goto( product.permalink );
-
- const item = page.getByRole( 'row' ).filter( {
- has: page.getByText( attributes.attribute.name, {
- exact: true,
- } ),
- } );
- await expect( item ).toBeVisible();
- for ( const term of attributes.terms ) {
- await expect( item ).toContainText( term.name );
- }
- } );
- }
-);
-
-test(
- 'can update product attributes',
- { tag: tags.GUTENBERG },
- async ( { page, productWithAttributes } ) => {
- const attribute = productWithAttributes.attributes[ 0 ];
-
- await test.step( 'go to product editor, Organization tab', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ productWithAttributes.id }&action=edit`
- );
- await page.getByRole( 'tab', { name: 'Organization' } ).click();
-
- // Sometimes the attribute's terms take a while to load, and we need to reload and retry.
- // See https://github.com/woocommerce/woocommerce/issues/44925
- await expect(
- async () => {
- await page.getByRole( 'button', { name: 'Edit' } ).click();
- await expect(
- page.locator(
- `button[aria-label="Remove ${ attribute.options[ 0 ] }"]`
- )
- ).toBeVisible();
- },
- {
- message: "wait for the attribute's terms to load",
- }
- ).toPass();
- } );
-
- await test.step( "update product's attribute terms", async () => {
- await page
- .getByLabel( `Remove ${ attribute.options[ 0 ] }` )
- .click();
-
- await page.getByLabel( 'Edit attribute' ).click();
- } );
-
- let attributeRowLocator = page.getByRole( 'listitem' ).filter( {
- has: page.getByText( attribute.name, {
- exact: true,
- } ),
- } );
-
- await test.step( 'verify attributes in product editor', async () => {
- await expect(
- attributeRowLocator,
- 'The attribute item is still displayed'
- ).toBeVisible();
- await expect(
- attributeRowLocator,
- 'The remaining term is still displayed'
- ).toContainText( attribute.options[ 1 ] );
- await expect(
- attributeRowLocator,
- 'The removed term is not displayed'
- ).not.toContainText( attribute.options[ 0 ] );
- } );
-
- await test.step( 'update the product', async () => {
- await updateProduct( { page, expect } );
- } );
-
- await test.step( 'verify attributes in product editor after product update', async () => {
- await expect(
- attributeRowLocator,
- 'The attribute item is still displayed'
- ).toBeVisible();
- await expect(
- attributeRowLocator,
- 'The remaining term is still displayed'
- ).toContainText( attribute.options[ 1 ] );
- await expect(
- attributeRowLocator,
- 'The removed term is not displayed'
- ).not.toContainText( attribute.options[ 0 ] );
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- await page.goto( productWithAttributes.permalink );
-
- attributeRowLocator = page.getByRole( 'row' ).filter( {
- has: page.getByText( attribute.name, { exact: true } ),
- } );
- await expect( attributeRowLocator ).toBeVisible();
- await expect(
- attributeRowLocator,
- 'The remaining term is still displayed'
- ).toContainText( attribute.options[ 1 ] );
- await expect(
- attributeRowLocator,
- 'The removed term is not displayed'
- ).not.toContainText( attribute.options[ 0 ] );
- } );
- }
-);
-
-test(
- 'can remove product attributes',
- { tag: tags.GUTENBERG },
- async ( { page, productWithAttributes, attributes } ) => {
- await test.step( 'go to product editor, Organization tab', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ productWithAttributes.id }&action=edit`
- );
- const getAttributesResponsePromise = page.waitForResponse(
- ( response ) =>
- response.url().includes( '/terms?attribute_id=' ) &&
- response.status() === 200
- );
- await page.getByRole( 'tab', { name: 'Organization' } ).click();
- await getAttributesResponsePromise;
- await page
- .getByLabel( 'Block: Product attributes' )
- .waitFor( { state: 'visible' } );
- await page
- .getByLabel( 'Block: Product attributes' )
- .scrollIntoViewIfNeeded();
- } );
-
- const attributeItemLocator = page.getByRole( 'listitem' ).filter( {
- has: page.getByText( attributes.attribute.name, { exact: true } ),
- } );
- page.on( 'dialog', ( dialog ) => dialog.accept() );
-
- await test.step( "remove product's attribute", async () => {
- await attributeItemLocator
- .getByLabel( 'Remove' )
- .click( { delay: 1000 } );
- } );
-
- await test.step( 'verify the change in product editor', async () => {
- await expect( attributeItemLocator ).toBeHidden();
- } );
-
- await test.step( 'update the product', async () => {
- await updateProduct( { page, expect } );
- } );
-
- await test.step( 'verify the change in product editor after update', async () => {
- await expect( attributeItemLocator ).toBeHidden();
- } );
- }
-);
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-edit-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-edit-block-editor.spec.ts
deleted file mode 100644
index d907dfc3a66..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-edit-block-editor.spec.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { test as baseTest } from '../../../fixtures/block-editor-fixtures';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const test = baseTest.extend( {
- product: async ( { restApi }, use ) => {
- let product;
-
- await restApi
- .post( `${ WC_API_PATH }/products`, {
- id: 0,
- name: `Product ${ Date.now() }`,
- type: 'simple',
- description: `This product is a longer description of the awesome product ${ Date.now() }`,
- short_description: `This product is pretty awesome ${ Date.now() }`,
- regular_price: '12.99',
- } )
- .then( ( response ) => {
- product = response.data;
- } );
-
- await use( product );
-
- // Cleanup
- await restApi.delete( `${ WC_API_PATH }/products/${ product.id }`, {
- force: true,
- } );
- },
-} );
-
-test(
- 'can update the general information of a product',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
-
- const updatedProduct = {
- name: `Product ${ Date.now() }`,
- description: `Updated description for the awesome product ${ Date.now() }`,
- short_description: `Updated summary for the awesome product ${ Date.now() }`,
- };
-
- const nameTextbox = page.getByLabel( 'Name' ).getByRole( 'textbox' );
- const summaryTextbox = page
- .getByLabel( 'Block: Product textarea block' )
- .getByRole( 'textbox' );
- const descriptionTextbox = page
- .getByLabel( 'Block: Product description' )
- .getByRole( 'textbox' );
-
- await test.step( 'edit the product name', async () => {
- await nameTextbox.fill( updatedProduct.name );
- } );
-
- await test.step( 'edit the product description and summary', async () => {
- // Need to clear the textbox before filling it, otherwise the text will be appended.
- await descriptionTextbox.clear();
- await descriptionTextbox.fill( updatedProduct.description );
-
- await summaryTextbox.clear();
- await summaryTextbox.fill( updatedProduct.short_description );
- } );
-
- await test.step( 'publish the updated product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify the changes', async () => {
- await expect.soft( nameTextbox ).toHaveValue( updatedProduct.name );
-
- await expect
- .soft( summaryTextbox )
- .toHaveText( updatedProduct.short_description );
-
- await expect
- .soft( descriptionTextbox )
- .toHaveText( updatedProduct.description );
- } );
- }
-);
-
-test.describe( 'Publish dropdown options', { tag: tags.GUTENBERG }, () => {
- test( 'can schedule a product publication', async ( { page, product } ) => {
- await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .first()
- .locator( 'button[aria-label="More options"]' )
- .click();
-
- await page.getByText( 'Schedule publish' ).click();
-
- await expect(
- page.getByRole( 'heading', { name: 'Schedule product' } )
- ).toBeVisible();
-
- await page
- .locator( '.woocommerce-schedule-publish-modal' )
- .locator( 'button[aria-label="View next month"]' )
- .click();
-
- await page
- .locator( '.woocommerce-schedule-publish-modal' )
- .getByText( '14' )
- .click();
-
- await page.getByRole( 'button', { name: 'Schedule' } ).click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' ).first()
- ).toContainText( 'Product scheduled for' );
- } );
- test( 'can duplicate a product', async ( { page, product } ) => {
- await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
- await page
- .locator( '.woocommerce-product-header__actions' )
- .first()
- .locator( 'button[aria-label="More options"]' )
- .click();
-
- await page.getByText( 'Copy to a new draft' ).click();
-
- await expect(
- page.getByLabel( 'Dismiss this notice' ).first()
- ).toContainText( 'Product successfully duplicated' );
-
- await expect(
- page.getByRole( 'heading', { name: `${ product.name } (Copy)` } )
- ).toBeVisible();
-
- await expect(
- page
- .locator( '.woocommerce-product-header__visibility-tags' )
- .getByText( 'Draft' )
- .first()
- ).toBeVisible();
-
- await page
- .locator( '.woocommerce-product-header__actions' )
- .first()
- .locator( 'button[aria-label="More options"]' )
- .click();
-
- await page.getByText( 'Move to trash' ).click();
- } );
- test( 'can delete a product', async ( { page, product } ) => {
- await page.goto( `wp-admin/post.php?post=${ product.id }&action=edit` );
- await page
- .locator( '.woocommerce-product-header__actions' )
- .first()
- .locator( 'button[aria-label="More options"]' )
- .click();
-
- await page.getByText( 'Move to trash' ).click();
-
- await expect(
- page.getByRole( 'heading', { name: 'Products' } ).first()
- ).toBeVisible();
- } );
-} );
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-images-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-images-block-editor.spec.ts
deleted file mode 100644
index 2ad26314b6f..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-images-block-editor.spec.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-import type { Page } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import { test as baseTest } from '../../../fixtures/block-editor-fixtures';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-async function selectImagesInLibrary( page: Page, imagesNames: string[] ) {
- const dataIds: string[] = [];
-
- await page.getByRole( 'tab', { name: 'Media Library' } ).click();
-
- // Select the given images
- for ( const imageName of imagesNames ) {
- await page
- .getByRole( 'searchbox', { name: 'Search' } )
- .fill( imageName );
- const imageLocator = page.getByLabel( imageName ).nth( 0 );
- await imageLocator.click();
- await expect( imageLocator ).toBeChecked();
- const dataId = await imageLocator.getAttribute( 'data-id' );
- if ( dataId !== null ) {
- dataIds.push( dataId );
- }
- }
-
- await page.getByRole( 'button', { name: 'Select', exact: true } ).click();
-
- return dataIds;
-}
-
-const test = baseTest.extend( {
- product: async ( { restApi }, use ) => {
- let product;
-
- await restApi
- .post( `${ WC_API_PATH }/products`, {
- name: `Product ${ Date.now() }`,
- type: 'simple',
- description: `This is a description of the awesome product ${ Date.now() }`,
- short_description: `This product is pretty awesome ${ Date.now() }`,
- regular_price: '12.99',
- } )
- .then( ( response ) => {
- product = response.data;
- } );
-
- await use( product );
-
- // Cleanup
- await restApi.delete( `${ WC_API_PATH }/products/${ product.id }`, {
- force: true,
- } );
- },
- productWithGallery: async ( { restApi, product }, use ) => {
- let productWithGallery;
- await restApi
- .put( `${ WC_API_PATH }/products/${ product.id }`, {
- images: [
- {
- src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_front.jpg',
- },
- {
- src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_2_back.jpg',
- },
- {
- src: 'http://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2013/06/T_3_front.jpg',
- },
- ],
- } )
- .then( ( response ) => {
- productWithGallery = response.data;
- } );
-
- await use( productWithGallery );
- },
-} );
-
-test(
- 'can add images',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- const images = [ 'image-01', 'image-02' ];
-
- await test.step( 'navigate to product edit page', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- } );
-
- await test.step( 'add images', async () => {
- await page.getByText( 'Choose an image' ).click();
- const dataIds = await selectImagesInLibrary( page, images );
-
- await expect(
- page.getByLabel( 'Block: Product images' ).locator( 'img' )
- ).toHaveCount( images.length );
-
- for ( const dataId of dataIds ) {
- await expect(
- page
- .getByLabel( 'Block: Product images' )
- .locator( `img[id="${ dataId }"]` )
- ).toBeVisible();
- }
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify product image was set', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- for ( const image of images ) {
- await expect(
- // By scopping the locator to the link, we exclude the zoom image and
- // ensure the correct image is displayed.
- page.locator( `a > img[src*="${ image }"]` )
- ).toBeVisible();
- }
- } );
- }
-);
-
-test(
- 'can replace an image',
- { tag: tags.GUTENBERG },
- async ( { page, productWithGallery } ) => {
- const initialImagesCount = productWithGallery.images.length;
- const newImageName = 'image-01';
- const replacedImgLocator = page
- .getByLabel( 'Block: Product images' )
- .locator( 'img' )
- .nth( 1 );
- let dataIds = [];
-
- await test.step( 'navigate to product edit page', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
- );
- } );
-
- await test.step( 'replace an image', async () => {
- await replacedImgLocator.click();
- await page
- .getByRole( 'toolbar', { name: 'Options' } )
- .getByLabel( 'Options' )
- .click();
- await page.getByRole( 'menuitem', { name: 'Replace' } ).click();
- dataIds = await selectImagesInLibrary( page, [ newImageName ] );
-
- expect( await replacedImgLocator.getAttribute( 'src' ) ).toContain(
- newImageName
- );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify product image was set', async () => {
- await expect( replacedImgLocator ).toHaveId( dataIds[ 0 ] );
- await expect(
- page.getByLabel( 'Block: Product images' ).locator( 'img' )
- ).toHaveCount( initialImagesCount );
-
- // Verify image in store frontend
- await page.goto( productWithGallery.permalink );
- await expect(
- // By scopping the locator to the link, we exclude the zoom image and
- // ensure the correct image is displayed.
- page.locator( `a > img[src*="${ newImageName }"]` )
- ).toBeVisible();
- } );
- }
-);
-
-test(
- 'can remove an image',
- { tag: tags.GUTENBERG },
- async ( { page, productWithGallery } ) => {
- const initialImagesCount = productWithGallery.images.length;
- const removedImgLocator = page
- .getByLabel( 'Block: Product images' )
- .locator( 'img' )
- .nth( 1 );
-
- await test.step( 'navigate to product edit page', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
- );
- } );
-
- await test.step( 'remove an image', async () => {
- await removedImgLocator.click();
- await page
- .getByRole( 'toolbar', { name: 'Options' } )
- .getByLabel( 'Options' )
- .click();
- await page.getByRole( 'menuitem', { name: 'Remove' } ).click();
-
- await expect(
- page.getByLabel( 'Block: Product images' ).locator( 'img' )
- ).toHaveCount( initialImagesCount - 1 );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify product image was set', async () => {
- await expect(
- page.getByLabel( 'Block: Product images' ).locator( 'img' )
- ).toHaveCount( initialImagesCount - 1 );
-
- // Verify image in store frontend
- await page.goto( productWithGallery.permalink );
- await expect(
- page.locator( '.woocommerce-product-gallery ol img' )
- ).toHaveCount( initialImagesCount - 1 );
- } );
- }
-);
-
-test(
- 'can set an image as cover',
- { tag: tags.GUTENBERG },
- async ( { page, productWithGallery } ) => {
- const newCoverImgLocator = page
- .getByLabel( 'Block: Product images' )
- .locator( 'img' )
- .nth( 1 );
-
- await test.step( 'navigate to product edit page', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ productWithGallery.id }&action=edit`
- );
- } );
-
- const newCoverImgId = await newCoverImgLocator.getAttribute( 'id' );
-
- await test.step( 'remove an image', async () => {
- await newCoverImgLocator.click();
- await page.getByLabel( 'Set as cover' ).click();
-
- await expect(
- page.getByRole( 'button', { name: 'Cover' } ).locator( 'img' )
- ).toHaveId( newCoverImgId );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify product image was set', async () => {
- await expect(
- page.getByRole( 'button', { name: 'Cover' } ).locator( 'img' )
- ).toHaveId( newCoverImgId );
- } );
- }
-);
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-inventory-block-editor.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-inventory-block-editor.spec.ts
deleted file mode 100644
index 676a4c8ec74..00000000000
--- a/plugins/woocommerce/tests/e2e-pw/tests/product/block-editor/product-inventory-block-editor.spec.ts
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * External dependencies
- */
-import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { test as baseTest } from '../../../fixtures/block-editor-fixtures';
-import { expect, tags } from '../../../fixtures/fixtures';
-import { skipTestsForDeprecatedFeature } from './helpers/skip-tests';
-
-skipTestsForDeprecatedFeature();
-
-const test = baseTest.extend( {
- product: async ( { restApi }, use ) => {
- let product;
-
- await restApi
- .post( `${ WC_API_PATH }/products`, {
- name: `Product ${ Date.now() }`,
- type: 'simple',
- regular_price: '12.99',
- stock_status: 'instock',
- } )
- .then( ( response ) => {
- product = response.data;
- } );
-
- await use( product );
-
- // Cleanup
- await restApi.delete( `${ WC_API_PATH }/products/${ product.id }`, {
- force: true,
- } );
- },
- page: async ( { page, product }, use ) => {
- await test.step( 'go to product editor, inventory tab', async () => {
- // This wait for response is only to avoid flakiness when filling SKU field
- const waitResponse = page.waitForResponse(
- ( response ) =>
- response
- .url()
- .includes(
- 'wp-json/wc-admin/options?options=woocommerce_dimension_unit'
- ) && response.status() === 200
- );
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- await page.getByRole( 'tab', { name: 'Inventory' } ).click();
- await waitResponse;
- } );
-
- await use( page );
- },
-} );
-
-test(
- 'can update sku',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- const sku = `SKU_${ Date.now() }`;
-
- await test.step( 'update the sku value', async () => {
- await page.locator( '[name="woocommerce-product-sku"]' ).click();
- await page
- .locator( '[name="woocommerce-product-sku"]' )
- .fill( sku );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify the change in product editor', async () => {
- await expect(
- page.locator( '[name="woocommerce-product-sku"]' )
- ).toHaveValue( sku );
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await expect( page.getByText( `SKU: ${ sku }` ) ).toBeVisible();
- } );
- }
-);
-
-test(
- 'can update stock status',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- await test.step( 'update the sku value', async () => {
- await page.getByLabel( 'Out of stock' ).check();
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify the change in product editor', async () => {
- await expect( page.getByLabel( 'Out of stock' ) ).toBeChecked();
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await expect( page.getByText( 'Out of stock' ) ).toBeVisible();
- } );
- }
-);
-
-test(
- 'can track stock quantity',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- await test.step( 'enable track stock quantity', async () => {
- await page.getByLabel( 'Track inventory' ).check();
- // await closeTourModal( { page, timeout: 2000 } );
- await page.getByRole( 'button', { name: 'Advanced' } ).click();
- await page.getByLabel( "Don't allow purchases" ).check();
- } );
-
- const quantity = '2';
-
- await test.step( 'update available quantity', async () => {
- await page.locator( '[name="stock_quantity"]' ).clear();
- await page.locator( '[name="stock_quantity"]' ).fill( quantity );
- await expect(
- page.locator( '[name="stock_quantity"]' )
- ).toHaveValue( quantity );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify the change in product editor', async () => {
- await expect(
- page.locator( '[name="stock_quantity"]' )
- ).toHaveValue( quantity );
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await expect(
- page.getByText( `${ quantity } in stock` )
- ).toBeVisible();
- } );
-
- await test.step( 'return to product editor', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- await page.getByRole( 'tab', { name: 'Inventory' } ).click();
- } );
-
- await test.step( 'update available quantity', async () => {
- await page.locator( '[name="stock_quantity"]' ).fill( '0' );
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify the change in product editor', async () => {
- await expect(
- page.locator( '[name="stock_quantity"]' )
- ).toHaveValue( '0' );
- } );
-
- await test.step( 'verify the changes in the store frontend', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await expect( page.getByText( 'Out of stock' ) ).toBeVisible();
- } );
- }
-);
-
-test(
- 'can limit purchases',
- { tag: tags.GUTENBERG },
- async ( { page, product } ) => {
- await test.step( 'ensure limit purchases is disabled', async () => {
- // await closeTourModal( { page, timeout: 2000 } );
- await page.getByRole( 'button', { name: 'Advanced' } ).click();
- await expect(
- page.getByLabel( 'Limit purchases to 1 item per order' )
- ).not.toBeChecked();
- } );
-
- await test.step( 'add 2 items to cart', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await page.getByLabel( 'Product quantity' ).fill( '2' );
- await page.locator( 'button[name="add-to-cart"]' ).click();
- await expect(
- page.getByText(
- new RegExp(
- `2 × ["|“]${ product.name }["|”] have been added to your cart.`
- )
- )
- ).toBeVisible();
- } );
-
- await test.step( 'return to product editor', async () => {
- await page.goto(
- `wp-admin/post.php?post=${ product.id }&action=edit`
- );
- await page.getByRole( 'tab', { name: 'Inventory' } ).click();
- } );
-
- await test.step( 'enable limit purchases', async () => {
- await page.getByRole( 'button', { name: 'Advanced' } ).click();
- await page
- .getByLabel( 'Limit purchases to 1 item per order' )
- .check();
- } );
-
- await test.step( 'update the product', async () => {
- await page.getByRole( 'button', { name: 'Update' } ).click();
- // Verify product was updated
- await expect(
- page.getByLabel( 'Dismiss this notice' )
- ).toContainText( 'Product updated' );
- } );
-
- await test.step( 'verify you cannot order more than 1 item', async () => {
- // Verify image in store frontend
- await page.goto( product.permalink );
-
- await page.locator( 'button[name="add-to-cart"]' ).click();
- await page.locator( 'button[name="add-to-cart"]' ).click();
-
- await expect(
- page.getByText(
- new RegExp(
- `You cannot add another .${ product.name }. to your cart`
- )
- )
- ).toBeVisible();
- } );
- }
-);
diff --git a/plugins/woocommerce/tests/metrics/specs/product-editor.spec.js b/plugins/woocommerce/tests/metrics/specs/product-editor.spec.js
deleted file mode 100644
index 7e52583c012..00000000000
--- a/plugins/woocommerce/tests/metrics/specs/product-editor.spec.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/* eslint-disable @woocommerce/dependency-group, jest/expect-expect, jest/no-test-callback, array-callback-return, jest/no-identical-title */
-
-/**
- * WordPress dependencies
- */
-import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
-
-/**
- * Internal dependencies
- */
-import { getTotalBlockingTime, median } from '../utils';
-import { wpCLI } from '../../e2e-pw/utils/cli';
-
-// See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
-const BROWSER_IDLE_WAIT = 1000;
-const NEW_EDITOR_ADD_PRODUCT_URL =
- 'wp-admin/admin.php?page=wc-admin&path=%2Fadd-product';
-
-const results = {
- totalBlockingTime: [],
- cumulativeLayoutShift: [],
- largestContentfulPaint: [],
- type: [],
-};
-
-test.describe( 'Product editor performance', () => {
- test.use( {
- metrics: async ( { page }, use ) => {
- await use( new Metrics( { page } ) );
- },
- } );
-
- test.beforeAll( async () => {
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled yes'
- );
- } );
-
- test.afterAll( async ( {}, testInfo ) => {
- const medians = {};
- Object.keys( results ).forEach( ( metric ) => {
- medians[ metric ] = median( results[ metric ] );
- } );
- await testInfo.attach( 'results', {
- body: JSON.stringify( { 'product-editor': medians }, null, 2 ),
- contentType: 'application/json',
- } );
-
- await wpCLI(
- 'wp option set woocommerce_feature_product_block_editor_enabled no'
- );
- } );
-
- test.describe( 'Loading', () => {
- const samples = 2;
- const throwaway = 1;
- const iterations = samples + throwaway;
- for ( let i = 1; i <= iterations; i++ ) {
- test( `Run the test (${ i } of ${ iterations })`, async ( {
- page,
- metrics,
- } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
-
- // Wait for the Preview button.
- await page
- .locator( '[aria-label="Preview in new tab"]' )
- .first()
- .waitFor();
-
- // Get the durations.
- const loadingDurations = await metrics.getLoadingDurations();
-
- // Measure CLS
- const cumulativeLayoutShift =
- await metrics.getCumulativeLayoutShift();
-
- // Measure LCP
- const largestContentfulPaint =
- await metrics.getLargestContentfulPaint();
-
- // Measure TBT
- const totalBlockingTime = await getTotalBlockingTime(
- page,
- BROWSER_IDLE_WAIT
- );
-
- // Save the results.
- if ( i > throwaway ) {
- Object.entries( loadingDurations ).forEach(
- ( [ metric, duration ] ) => {
- const metricKey =
- metric === 'timeSinceResponseEnd'
- ? 'firstBlock'
- : metric;
- if ( ! results[ metricKey ] ) {
- results[ metricKey ] = [];
- }
- results[ metricKey ].push( duration );
- }
- );
- results.totalBlockingTime = results.tbt || [];
- results.totalBlockingTime.push( totalBlockingTime );
- results.cumulativeLayoutShift =
- results.cumulativeLayoutShift || [];
- results.cumulativeLayoutShift.push( cumulativeLayoutShift );
- results.largestContentfulPaint =
- results.largestContentfulPaint || [];
- results.largestContentfulPaint.push(
- largestContentfulPaint
- );
- }
- } );
- }
- } );
-
- test.describe( 'Typing', () => {
- test( 'Run the test', async ( { page, metrics } ) => {
- await page.goto( NEW_EDITOR_ADD_PRODUCT_URL );
-
- // Wait for the Preview button.
- await page
- .locator( '[aria-label="Preview in new tab"]' )
- .first()
- .waitFor();
-
- // FTUX tour on first run through
- try {
- await page
- .getByLabel( 'Close Tour' )
- .click( { timeout: 3000 } );
- } catch ( e ) {
- // eslint-disable-next-line no-console -- We want to see this in the console.
- console.log( 'Tour was not visible, skipping.' );
- }
-
- const input = page.getByPlaceholder( 'e.g. 12 oz Coffee Mug' );
-
- // The first character typed triggers a longer time (isTyping change).
- // It can impact the stability of the metric, so we exclude it. It
- // probably deserves a dedicated metric itself, though.
- const samples = 10;
- const throwaway = 1;
- const iterations = samples + throwaway;
-
- // Start tracing.
- await metrics.startTracing();
-
- // Type the testing sequence into the empty input.
- await input.type( 'x'.repeat( iterations ), {
- delay: BROWSER_IDLE_WAIT,
- // The extended timeout is needed because the typing is very slow
- // and the `delay` value itself does not extend it.
- timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
- } );
-
- // Stop tracing.
- await metrics.stopTracing();
-
- // Get the durations.
- const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
- metrics.getTypingEventDurations();
-
- // Save the results.
- results.type = [];
- for ( let i = throwaway; i < iterations; i++ ) {
- results.type.push(
- keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
- );
- }
- } );
- } );
-} );
-
-/* eslint-enable @woocommerce/dependency-group, jest/expect-expect, jest/no-test-callback, array-callback-return, jest/no-identical-title */
diff --git a/plugins/woocommerce/tests/php/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller-tests.php b/plugins/woocommerce/tests/php/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller-tests.php
deleted file mode 100644
index 1d21586d223..00000000000
--- a/plugins/woocommerce/tests/php/includes/rest-api/Controllers/Version3/class-wc-rest-layout-templates-controller-tests.php
+++ /dev/null
@@ -1,111 +0,0 @@
-<?php
-
-use Automattic\WooCommerce\LayoutTemplates\LayoutTemplateRegistry;
-
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\SimpleProductTemplate;
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\ProductVariationTemplate;
-
-use Automattic\WooCommerce\Tests\LayoutTemplates\TestLayoutTemplate;
-
-/**
- * class WC_REST_Layout_Templates_Controller_Tests.
- * Layout Templates Controller tests for V3 REST API.
- */
-class WC_REST_Layout_Templates_Controller_Tests extends WC_REST_Unit_Test_Case {
- /**
- * Runs before each test.
- */
- public function setUp(): void {
- parent::setUp();
-
- $layout_template_registry = wc_get_container()->get( LayoutTemplateRegistry::class );
-
- $layout_template_registry->unregister_all();
-
- $layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
- $layout_template_registry->register( 'simple-product', 'product-form', SimpleProductTemplate::class );
- $layout_template_registry->register( 'product-variation', 'product-form', ProductVariationTemplate::class );
- }
-
- /**
- * Test getting all layout templates.
- */
- public function test_get_all_items() {
- $this->setExpectedDeprecated( 'woocommerce_block_template_after_add_block' );
- $this->setExpectedDeprecated( 'woocommerce_block_template_after_add_hide_condition' );
-
- $response = $this->do_rest_get_request( 'layout-templates' );
-
- $this->assertEquals( 200, $response->get_status() );
-
- $data = $response->get_data();
-
- $this->assertNotEmpty( $data );
-
- $this->assertCount( 3, $data );
-
- $this->assertArrayHasKey( 'test-layout-template', $data );
- $this->assertArrayHasKey( 'simple-product', $data );
- $this->assertArrayHasKey( 'product-variation', $data );
- }
-
- /**
- * Test getting all layout templates for a specific area.
- */
- public function test_get_all_items_for_area() {
- $response = $this->do_rest_get_request( 'layout-templates', array( 'area' => 'product-form' ) );
-
- $this->assertEquals( 200, $response->get_status() );
-
- $data = $response->get_data();
-
- $this->assertNotEmpty( $data );
-
- $this->assertCount( 2, $data );
-
- $this->assertArrayHasKey( 'simple-product', $data );
- $this->assertArrayHasKey( 'product-variation', $data );
- }
-
- /**
- * Test getting all layout templates for an invalid area.
- */
- public function test_get_all_items_for_invalid_area() {
- $response = $this->do_rest_get_request( 'layout-templates', array( 'area' => 'invalid-area' ) );
-
- $this->assertEquals( 200, $response->get_status() );
-
- $data = $response->get_data();
-
- $this->assertEmpty( $data );
- }
-
- /**
- * Test getting a single layout template.
- */
- public function test_get_single_item() {
- $response = $this->do_rest_get_request( 'layout-templates/test-layout-template' );
-
- $this->assertEquals( 200, $response->get_status() );
-
- $data = $response->get_data();
-
- $this->assertNotEmpty( $data );
-
- $this->assertEquals( 'test-layout-template', $data['id'] );
- $this->assertEquals( 'test', $data['area'] );
-
- $this->assertArrayHasKey( 'title', $data );
- $this->assertArrayHasKey( 'description', $data );
- $this->assertArrayHasKey( 'blockTemplates', $data );
- }
-
- /**
- * Test getting a single layout template with invalid id.
- */
- public function test_get_single_item_with_invalid_id() {
- $response = $this->do_rest_get_request( 'layout-templates/invalid-layout-template' );
-
- $this->assertEquals( 404, $response->get_status() );
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php
deleted file mode 100644
index 63ee582db0d..00000000000
--- a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php
+++ /dev/null
@@ -1,113 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Tests\Admin\ProductBlockEditor;
-
-use WC_Unit_Test_Case;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry;
-
-/**
- * Tests for the BlockRegistry class.
- */
-class BlockRegistryTest extends WC_Unit_Test_Case {
- /**
- * Setup test case.
- */
- public function setUp(): void {
- $this->markTestSkipped( 'Skipping until we can figure out why these tests are so flaky.' );
- }
-
- /**
- * Test that generic blocks are registered.
- */
- public function test_generic_blocks_registered() {
- $block_registry = BlockRegistry::get_instance();
-
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/conditional' ), 'Conditional component not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-checkbox-field' ), 'Checkbox field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-collapsible' ), 'Collapsible component not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-radio-field' ), 'Radio field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-pricing-field' ), 'Pricing field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-section' ), 'Section component not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-subsection' ), 'Subsection component not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-tab' ), 'Tab component not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-toggle-field' ), 'Toggle field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-taxonomy-field' ), 'Taxonomy field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-text-field' ), 'Text field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-number-field' ), 'Number field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-select-field' ), 'Select field not registered.' );
- }
-
- /**
- * Test that product fields blocks are registered.
- */
- public function test_product_fields_blocks_registered() {
- $block_registry = BlockRegistry::get_instance();
-
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-catalog-visibility-field' ), 'Catalog visibility field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-custom-fields' ), 'Custom fields not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-custom-fields-toggle-field' ), 'Custom fields toggle field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-description-field' ), 'Description field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-downloads-field' ), 'Downloads field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-images-field' ), 'Images field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-inventory-email-field' ), 'Inventory email field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-sku-field' ), 'SKU field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-name-field' ), 'Name field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-regular-price-field' ), 'Regular price not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-schedule-sale-fields' ), 'Schedule sale fields not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-shipping-class-field' ), 'Shipping class field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-shipping-dimensions-fields' ), 'Shipping dimensions not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-summary-field' ), 'Summary field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-tag-field' ), 'Tag field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-inventory-quantity-field' ), 'Inventory quantity field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-variation-items-field' ), 'Variation items field not registered.' );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-password-field', 'Password field not registered.' ) );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-list-field', 'List field not registered.' ) );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-has-variations-notice', 'Has variation notice not registered.' ) );
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-single-variation-notice', 'Single variation notice not registered.' ) );
- }
-
- /**
- * Test registering a block type.
- */
- public function test_register_block_type_from_metadata() {
- $block_registry = BlockRegistry::get_instance();
-
- $this->assertFalse( $block_registry->is_registered( 'woocommerce-test/test-block' ), 'Block type already registered.' );
-
- $block_type = $block_registry->register_block_type_from_metadata( trailingslashit( __DIR__ ) . 'test-block' );
-
- $this->assertTrue( $block_registry->is_registered( 'woocommerce-test/test-block' ), 'Block type not registered.' );
-
- $this->assertInstanceOf( \WP_Block_Type::class, $block_type, 'Block type not an instance of WP_Block_Type.' );
-
- // Make sure basic properties are set.
- $this->assertEquals( 'woocommerce-test/test-block', $block_type->name, 'Block type name not correct.' );
- $this->assertEquals( 'Test Block', $block_type->title, 'Block type title not correct.' );
-
- // Make sure defined attributes are set.
- $this->assertArrayHasKey( 'label', $block_type->attributes, 'Block type missing label attribute.' );
-
- // Make sure augmented template attributes are set.
- $this->assertArrayHasKey( '_templateBlockId', $block_type->attributes, 'Block type missing _templateBlockId attribute.' );
- $this->assertArrayHasKey( '_templateBlockOrder', $block_type->attributes, 'Block type missing _templateBlockOrder attribute.' );
- $this->assertArrayHasKey( '_templateBlockHideConditions', $block_type->attributes, 'Block type missing _templateBlockHideConditions attribute.' );
- $this->assertArrayHasKey( '_templateBlockDisableConditions', $block_type->attributes, 'Block type missing _templateBlockDisableConditions attribute.' );
- $this->assertArrayHasKey( 'disabled', $block_type->attributes, 'Block type missing disabled attribute.' );
-
- // Make sure usesContext is set.
- $this->assertContains( 'postType', $block_type->uses_context, 'Block type uses_context missing postType.' );
- }
-
- /**
- * Test unregistering a block type.
- */
- public function test_unregister() {
- $block_registry = BlockRegistry::get_instance();
-
- $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-checkbox-field' ), 'Checkbox field not registered.' );
-
- $block_registry->unregister( 'woocommerce/product-checkbox-field' );
-
- $this->assertFalse( $block_registry->is_registered( 'woocommerce/product-checkbox-field' ), 'Checkbox field still registered.' );
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplate.php b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplate.php
deleted file mode 100644
index 4cde1311153..00000000000
--- a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplate.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Tests\Admin\ProductBlockEditor\ProductTemplates;
-
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\AbstractProductFormTemplate;
-use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\ProductFormTemplateInterface;
-
-class CustomProductFormTemplate extends AbstractProductFormTemplate implements ProductFormTemplateInterface {
- /**
- * SimpleProductTemplate constructor.
- */
- public function __construct() {
- $general_group = $this->add_group(
- [
- 'id' => 'general',
- 'order' => 10,
- 'attributes' => [
- 'title' => 'General',
- ],
- ]
- );
- $basic_details = $general_group->add_section(
- [
- 'id' => 'basic-details',
- 'attributes' => [
- 'title' => 'Basic details',
- 'description' => 'Description',
- ],
- ]
- );
- $basic_details->add_block(
- [
- 'id' => 'product-name',
- 'blockName' => 'woocommerce/product-name-field',
- 'attributes' => [
- 'name' => 'Product name',
- 'autoFocus' => true,
- ],
- ]
- );
- $pricing_group = $this->add_group(
- [
- 'id' => 'pricing',
- 'order' => 20,
- 'attributes' => [
- 'title' => 'Pricing',
- ],
- ]
- );
- $product_pricing_section = $pricing_group->add_section(
- [
- 'id' => 'product-pricing-section',
- 'attributes' => [
- 'title' => 'Pricing',
- 'description' => '',
- 'blockGap' => 'unit-40',
- ],
- ]
- );
- $product_pricing_section->add_block(
- [
- 'id' => 'product-pricing-group-pricing-columns',
- 'blockName' => 'core/columns',
- ]
- );
- $inventory_group = $this->add_group(
- array(
- 'id' => 'inventory',
- 'order' => 20,
- 'attributes' => array(
- 'title' => 'Pricing',
- ),
- )
- );
- $product_inventory_section = $inventory_group->add_section(
- array(
- 'id' => 'product-inventory-section',
- 'attributes' => array(
- 'title' => 'Inventory',
- 'description' => '',
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_inventory_inner_section = $product_inventory_section->add_subsection(
- array(
- 'id' => 'product-stock-subsection',
- 'attributes' => array(
- 'title' => 'Stock',
- 'description' => '',
- 'blockGap' => 'unit-40',
- ),
- )
- );
- $product_inventory_inner_section->add_block(
- array(
- 'id' => 'product-inventory-sku',
- 'blockName' => 'woocommerce/product-sku-field',
- )
- );
- }
- /**
- * Get the template ID.
- */
- public function get_id(): string {
- return 'custom-product';
- }
-
- /**
- * Get the template title.
- */
- public function get_title(): string {
- return 'Custom Product Template';
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplateTest.php b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplateTest.php
deleted file mode 100644
index 47133a37219..00000000000
--- a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/ProductTemplates/CustomProductFormTemplateTest.php
+++ /dev/null
@@ -1,166 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Tests\Admin\ProductBlockEditor\ProductTemplates;
-
-use WC_Unit_Test_Case;
-
-/**
- * Tests for the CustomBlockTemplate class.
- */
-class CustomProductFormTemplateTest extends WC_Unit_Test_Case {
- /**
- * Test getting the template ID.
- */
- public function test_get_id() {
- $template = new CustomProductFormTemplate();
- $this->assertEquals( $template->get_id(), 'custom-product' );
- }
-
- /**
- * Test get group block by id.
- */
- public function test_get_group_by_id() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_group_by_id( 'general' );
- $this->assertEquals( $block->get_attributes()['title'], 'General' );
- }
-
- /**
- * Test throw error get group block with section id.
- */
- public function test_get_group_by_id_with_section_id() {
- $template = new CustomProductFormTemplate();
-
- $this->expectException( \UnexpectedValueException::class );
- $template->get_group_by_id('basic-details' );
- }
-
- /**
- * Test get section block by id.
- */
- public function test_get_section_by_id() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_section_by_id( 'product-pricing-section' );
- $this->assertEquals( $block->get_attributes()['title'], 'Pricing' );
- }
-
- /**
- * Test throw error get section block with section id.
- */
- public function test_get_section_by_id_with_block_id() {
- $template = new CustomProductFormTemplate();
- $this->expectException( \UnexpectedValueException::class );
- $template->get_section_by_id( 'product-pricing-group-pricing-columns' );
- }
-
- /**
- * Test get subsection block by id.
- */
- public function test_get_subsection_by_id() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_subsection_by_id( 'product-stock-subsection' );
- $this->assertEquals( $block->get_attributes()['title'], 'Stock' );
- }
-
- /**
- * Test throw error get subsection block with block id.
- */
- public function test_get_subsection_by_id_with_block_id() {
- $template = new CustomProductFormTemplate();
- $this->expectException( \UnexpectedValueException::class );
- $template->get_subsection_by_id( 'product-inventory-sku' );
- }
-
- /**
- * Test get block by id.
- */
- public function test_get_block_by_id() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_block_by_id( 'product-name' );
- $this->assertEquals( $block->get_attributes()['name'], 'Product name' );
- }
-
- /**
- * Test add custom block to section.
- */
- public function test_add_custom_block_to_section() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_section_by_id( 'product-pricing-section' );
- $new_block = $block->add_block( [
- 'id' => 'test-block-id',
- 'blockName' => 'test-block-name',
- 'attributes' => [
- 'name' => 'A name'
- ]
- ] );
-
- $this->assertEquals( $new_block->get_parent(), $block );
- }
-
- /**
- * Test add custom block to subsection.
- */
- public function test_add_custom_block_to_subsection() {
- $template = new CustomProductFormTemplate();
- $block = $template->get_subsection_by_id( 'product-stock-subsection' );
- $new_block = $block->add_block(
- array(
- 'id' => 'my-test-block-id',
- 'blockName' => 'my-test-block-name',
- 'attributes' => array(
- 'name' => 'A block name',
- ),
- )
- );
-
- $this->assertEquals( $new_block->get_parent(), $block );
- }
-
- /**
- * Test add custom group.
- */
- public function test_add_custom_group() {
- $template = new CustomProductFormTemplate();
- $new_group = $template->add_group( [
- 'id' => 'new-group',
- 'order' => 0,
- 'attributes' => [
- 'title' => 'Group title'
- ]
- ] );
-
- $this->assertEquals( $new_group->get_parent(), $template );
- }
-
- /**
- * Test throw error when passing blockName to add_group.
- */
- public function test_passing_blockname_to_add_group() {
- $template = new CustomProductFormTemplate();
- $this->expectException( \InvalidArgumentException::class );
- $template->add_group( [
- 'id' => 'new-group',
- 'blockName' => 'block-name',
- 'order' => 0,
- 'attributes' => [
- 'title' => 'Group title'
- ]
- ] );
- }
-
- /**
- * Test throw error when passing blockName to add_section.
- */
- public function test_passing_blockname_to_add_section() {
- $template = new CustomProductFormTemplate();
- $group = $template->get_group_by_id( 'general' );
- $this->expectException( \InvalidArgumentException::class );
- $group->add_section( [
- 'id' => 'new-section',
- 'blockName' => 'block-name',
- 'attributes' => [
- 'title' => 'Section title'
- ]
- ] );
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/test-block/block.json b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/test-block/block.json
deleted file mode 100644
index 9e827f8ab8b..00000000000
--- a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/test-block/block.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "$schema": "https://schemas.wp.org/trunk/block.json",
- "apiVersion": 3,
- "name": "woocommerce-test/test-block",
- "version": "0.1.0",
- "title": "Test Block",
- "category": "widgets",
- "attributes": {
- "label": {
- "type": "string"
- }
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/LayoutTemplates/LayoutTemplateRegistryTest.php b/plugins/woocommerce/tests/php/src/LayoutTemplates/LayoutTemplateRegistryTest.php
deleted file mode 100644
index c9005d51c8c..00000000000
--- a/plugins/woocommerce/tests/php/src/LayoutTemplates/LayoutTemplateRegistryTest.php
+++ /dev/null
@@ -1,240 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Tests\LayoutTemplates;
-
-use Automattic\WooCommerce\LayoutTemplates\LayoutTemplateRegistry;
-
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\SimpleProductTemplate;
-use Automattic\WooCommerce\Internal\Features\ProductBlockEditor\ProductTemplates\ProductVariationTemplate;
-
-use WC_Unit_Test_Case;
-
-/**
- * Tests for the LayoutTemplateRegistry class.
- */
-class LayoutTemplateRegistryTest extends WC_Unit_Test_Case {
- /**
- * Layout template registry.
- *
- * @var LayoutTemplateRegistry
- */
- protected $layout_template_registry;
-
- /**
- * Layout templates to register.
- *
- * @var array
- */
- protected $layout_templates_to_register;
-
- /**
- * Runs before each test.
- */
- public function setUp(): void {
- $this->layout_template_registry = new LayoutTemplateRegistry();
-
- $this->layout_templates_to_register = array(
- 'test-layout-template' => array(
- 'area' => 'test',
- 'class_name' => TestLayoutTemplate::class,
- ),
- 'simple-product' => array(
- 'area' => 'product-form',
- 'class_name' => SimpleProductTemplate::class,
- ),
- 'product-variation' => array(
- 'area' => 'product-form',
- 'class_name' => ProductVariationTemplate::class,
- ),
- );
- }
-
- /**
- * Test registering a layout template.
- */
- public function test_register() {
- $this->assertFalse( $this->layout_template_registry->is_registered( 'test-layout-template' ) );
-
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
-
- $this->assertTrue( $this->layout_template_registry->is_registered( 'test-layout-template' ) );
- }
-
- /**
- * Test registering a layout template with an existing ID.
- */
- public function test_register_duplicate_id() {
- $this->expectException( \ValueError::class );
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
- }
-
- /**
- * Test registering a layout template with an empty area.
- */
- public function test_register_empty_area() {
- $this->expectException( \ValueError::class );
- $this->layout_template_registry->register( 'test-layout-template', '', TestLayoutTemplate::class );
- }
-
- /**
- * Test registering a layout template with a non-existing class.
- */
- public function test_register_non_existing_class() {
- $this->expectException( \ValueError::class );
- $this->layout_template_registry->register( 'test-layout-template', 'test', 'NonExistingClass' );
- }
-
- /**
- * Test registering a layout template with a class that does not implement the BlockTemplateInterface.
- */
- public function test_register_non_block_template_class() {
- $this->expectException( \ValueError::class );
- $this->layout_template_registry->register( 'test-layout-template', 'test', \stdClass::class );
- }
-
- /**
- * Test unregistering a layout template.
- */
- public function test_unregister() {
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
-
- $this->assertTrue( $this->layout_template_registry->is_registered( 'test-layout-template' ) );
-
- $this->layout_template_registry->unregister_all( 'test-layout-template' );
-
- $this->assertFalse( $this->layout_template_registry->is_registered( 'test-layout-template' ) );
- }
-
- /**
- * Test instantiating layout templates.
- */
- public function test_instantiate() {
- foreach ( $this->layout_templates_to_register as $template_id => $template_info ) {
- $this->layout_template_registry->register( $template_id, $template_info['area'], $template_info['class_name'] );
- }
-
- $layout_templates = $this->layout_template_registry->instantiate_layout_templates();
-
- $this->assertCount( 3, $layout_templates );
-
- foreach ( $layout_templates as $layout_template ) {
- $template_info = $this->layout_templates_to_register[ $layout_template->get_id() ];
- $this->assertInstanceOf( $template_info['class_name'], $layout_template );
- }
- }
-
- /**
- * Test instantiating layout templates with area query param.
- */
- public function test_instantiate_with_area_query_param() {
- foreach ( $this->layout_templates_to_register as $template_id => $template_info ) {
- $this->layout_template_registry->register( $template_id, $template_info['area'], $template_info['class_name'] );
- }
-
- $layout_templates = $this->layout_template_registry->instantiate_layout_templates(
- array( 'area' => 'product-form' )
- );
-
- $this->assertCount( 2, $layout_templates );
-
- foreach ( $layout_templates as $layout_template ) {
- $template_info = $this->layout_templates_to_register[ $layout_template->get_id() ];
- $this->assertInstanceOf( $template_info['class_name'], $layout_template );
- }
- }
-
- /**
- * Test instantiating layout templates with id query param.
- */
- public function test_instantiate_with_id_query_param() {
- foreach ( $this->layout_templates_to_register as $template_id => $template_info ) {
- $this->layout_template_registry->register( $template_id, $template_info['area'], $template_info['class_name'] );
- }
-
- $layout_templates = $this->layout_template_registry->instantiate_layout_templates(
- array( 'id' => 'simple-product' )
- );
-
- $this->assertCount( 1, $layout_templates );
-
- foreach ( $layout_templates as $layout_template ) {
- $template_info = $this->layout_templates_to_register[ $layout_template->get_id() ];
- $this->assertInstanceOf( $template_info['class_name'], $layout_template );
- }
- }
-
- /**
- * Test layout templates are only instantiated once.
- */
- public function test_cached_instances() {
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
-
- $layout_templates = $this->layout_template_registry->instantiate_layout_templates(
- array( 'id' => 'test-layout-template' )
- );
-
- $layout_templates_again = $this->layout_template_registry->instantiate_layout_templates(
- array( 'id' => 'test-layout-template' )
- );
-
- $this->assertCount( 1, $layout_templates );
- $this->assertCount( 1, $layout_templates_again );
-
- $this->assertSame( current( $layout_templates_again ), current( $layout_templates ) );
- }
-
- /**
- * Test layout template instantiation actions are fired.
- */
- public function test_instantiation_actions() {
- $after_instantiation_hook_called = false;
-
- $after_instantiation_hook = function( string $layout_template_id, string $area, $layout_template ) use ( &$after_instantiation_hook_called ) {
- $after_instantiation_hook_called = true;
-
- $this->assertEquals( 'test-layout-template', $layout_template_id );
- $this->assertEquals( 'test', $area );
-
- $this->assertInstanceOf( TestLayoutTemplate::class, $layout_template );
- };
-
- $deprecated_register_hook_called = false;
-
- $deprecated_register_hook = function( $layout_template ) use ( &$deprecated_register_hook_called ) {
- $deprecated_register_hook_called = true;
-
- $this->assertInstanceOf( TestLayoutTemplate::class, $layout_template );
-
- $this->assertEquals( 'test-layout-template', $layout_template->get_id() );
- $this->assertEquals( 'test', $layout_template->get_area() );
-
- };
-
- try {
- add_action( 'woocommerce_layout_template_after_instantiation', $after_instantiation_hook, 10, 3 );
-
- add_action( 'woocommerce_block_template_register', $deprecated_register_hook );
-
- $this->layout_template_registry->register( 'test-layout-template', 'test', TestLayoutTemplate::class );
-
- $this->layout_template_registry->instantiate_layout_templates(
- array( 'id' => 'test-layout-template' )
- );
-
- $this->assertTrue(
- $after_instantiation_hook_called,
- 'woocommerce_layout_template_after_instantiation hook was not called.'
- );
-
- $this->assertTrue(
- $deprecated_register_hook_called,
- 'woocommerce_block_template_register hook was not called.'
- );
- } finally {
- remove_action( 'woocommerce_layout_template_after_instantiation', $after_instantiation_hook );
-
- remove_action( 'woocommerce_block_template_register', $deprecated_register_hook );
- }
- }
-}
diff --git a/plugins/woocommerce/tests/php/src/LayoutTemplates/TestLayoutTemplate.php b/plugins/woocommerce/tests/php/src/LayoutTemplates/TestLayoutTemplate.php
deleted file mode 100644
index 77d3aaaf939..00000000000
--- a/plugins/woocommerce/tests/php/src/LayoutTemplates/TestLayoutTemplate.php
+++ /dev/null
@@ -1,98 +0,0 @@
-<?php
-
-namespace Automattic\WooCommerce\Tests\LayoutTemplates;
-
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockInterface;
-use Automattic\WooCommerce\Admin\BlockTemplates\BlockTemplateInterface;
-
-/**
- * Test layout template.
- */
-class TestLayoutTemplate implements BlockTemplateInterface {
- /**
- * Get the layout template ID.
- */
- public function get_id(): string {
- return 'test-layout-template';
- }
-
- /**
- * Get the layout template title.
- */
- public function get_title(): string {
- return 'Test layout template';
- }
-
- /**
- * Get the layout template description.
- */
- public function get_description(): string {
- return 'A test layout template';
- }
-
- /**
- * Get the layout template area.
- */
- public function get_area(): string {
- return 'test';
- }
-
- /**
- * Get the layout template blocks.
- *
- * @param string $id_base Block ID base.
- */
- public function generate_block_id( string $id_base ): string {
- return $id_base . '-test';
- }
-
- /**
- * Get the layout template blocks.
- */
- public function &get_root_template(): BlockTemplateInterface {
- return $this;
- }
-
- /**
- * Get the layout template blocks.
- *
- * @param string $block_id Block ID.
- */
- public function get_block( string $block_id ): ?BlockInterface {
- return null;
- }
-
- /**
- * Get the layout template blocks.
- *
- * @param string $block_id Block ID.
- */
- public function remove_block( string $block_id ) {
- }
-
- /**
- * Get the layout template blocks.
- */
- public function remove_blocks() {
- }
-
- /**
- * Get the layout template blocks.
- */
- public function get_formatted_template(): array {
- return array();
- }
-
- /**
- * Get the layout template blocks.
- */
- public function to_json(): array {
- return array(
- 'id' => $this->get_id(),
- 'title' => $this->get_title(),
- 'description' => $this->get_description(),
- 'area' => $this->get_area(),
- 'blockTemplates' => array(),
- );
- }
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d19d017410..b93adc1cc7d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,9 +75,6 @@ catalogs:
'@wordpress/dom-ready':
specifier: 4.19.1
version: 4.19.1
- '@wordpress/edit-post':
- specifier: 8.19.7
- version: 8.19.7
'@wordpress/editor':
specifier: 14.19.7
version: 14.19.7
@@ -2363,256 +2360,6 @@ importers:
specifier: 5.1.x
version: 5.1.4(webpack@5.97.1)
- packages/js/product-editor:
- dependencies:
- '@types/lodash':
- specifier: ^4.14.202
- version: 4.17.24
- '@types/prop-types':
- specifier: ^15.7.11
- version: 15.7.15
- '@types/wordpress__blocks':
- specifier: catalog:wp-min
- version: 12.5.18(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@woocommerce/admin-layout':
- specifier: workspace:*
- version: link:../admin-layout
- '@woocommerce/block-templates':
- specifier: workspace:*
- version: link:../block-templates
- '@woocommerce/components':
- specifier: workspace:*
- version: link:../components
- '@woocommerce/currency':
- specifier: workspace:*
- version: link:../currency
- '@woocommerce/customer-effort-score':
- specifier: workspace:*
- version: link:../customer-effort-score
- '@woocommerce/data':
- specifier: workspace:*
- version: link:../data
- '@woocommerce/experimental':
- specifier: workspace:*
- version: link:../experimental
- '@woocommerce/expression-evaluation':
- specifier: workspace:*
- version: link:../expression-evaluation
- '@woocommerce/navigation':
- specifier: workspace:*
- version: link:../navigation
- '@woocommerce/number':
- specifier: workspace:*
- version: link:../number
- '@woocommerce/sanitize':
- specifier: workspace:*
- version: link:../sanitize
- '@woocommerce/settings':
- specifier: 1.0.0
- version: 1.0.0
- '@woocommerce/tracks':
- specifier: workspace:*
- version: link:../tracks
- '@wordpress/api-fetch':
- specifier: catalog:wp-min
- version: 7.19.2
- '@wordpress/block-editor':
- specifier: catalog:wp-min
- version: 14.14.6(@babel/core@7.25.7)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(webpack-virtual-modules@0.6.2)(webpack@5.97.1)
- '@wordpress/blocks':
- specifier: catalog:wp-min
- version: 14.8.2(react@18.3.1)
- '@wordpress/components':
- specifier: catalog:wp-min
- version: 29.5.4(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose':
- specifier: catalog:wp-min
- version: 7.19.2(react@18.3.1)
- '@wordpress/core-data':
- specifier: catalog:wp-min
- version: 7.19.6(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/data':
- specifier: ^10.0.2
- version: 10.19.2(react@18.3.1)
- '@wordpress/dataviews':
- specifier: ^4.4.1
- version: 4.22.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/date':
- specifier: catalog:wp-min
- version: 5.19.1
- '@wordpress/deprecated':
- specifier: catalog:wp-min
- version: 4.19.1
- '@wordpress/edit-post':
- specifier: catalog:wp-min
- version: 8.19.7(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/editor':
- specifier: catalog:wp-min
- version: 14.19.7(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/element':
- specifier: catalog:wp-min
- version: 6.19.1
- '@wordpress/hooks':
- specifier: catalog:wp-min
- version: 4.19.1
- '@wordpress/html-entities':
- specifier: catalog:wp-min
- version: 4.19.1
- '@wordpress/i18n':
- specifier: catalog:wp-min
- version: 5.19.1
- '@wordpress/icons':
- specifier: 10.6.0
- version: 10.6.0(react@18.3.1)
- '@wordpress/interface':
- specifier: catalog:wp-min
- version: 9.4.4(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/keyboard-shortcuts':
- specifier: catalog:wp-min
- version: 5.19.2(react@18.3.1)
- '@wordpress/keycodes':
- specifier: catalog:wp-min
- version: 4.19.1
- '@wordpress/media-utils':
- specifier: catalog:wp-min
- version: 5.19.2
- '@wordpress/plugins':
- specifier: catalog:wp-min
- version: 7.19.4(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/preferences':
- specifier: catalog:wp-min
- version: 4.19.4(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis':
- specifier: ^1.19.1
- version: 1.44.0
- '@wordpress/url':
- specifier: catalog:wp-min
- version: 4.19.2
- clsx:
- specifier: 2.1.x
- version: 2.1.1
- lodash:
- specifier: ^4.17.21
- version: 4.17.21
- moment:
- specifier: ^2.29.4
- version: 2.30.1
- prop-types:
- specifier: ^15.8.1
- version: 15.8.1
- react-router-dom:
- specifier: ~6.3.0
- version: 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- devDependencies:
- '@babel/core':
- specifier: 7.25.7
- version: 7.25.7
- '@babel/runtime':
- specifier: 7.25.7
- version: 7.25.7
- '@testing-library/dom':
- specifier: ^10.4.x
- version: 10.4.1
- '@testing-library/jest-dom':
- specifier: ^6.x.x
- version: 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.14)(jest@29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))
- '@testing-library/react':
- specifier: ^16.x.x
- version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@testing-library/react-hooks':
- specifier: 8.0.1
- version: 8.0.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)
- '@testing-library/user-event':
- specifier: 13.5.0
- version: 13.5.0(@testing-library/dom@10.4.1)
- '@types/jest':
- specifier: 29.5.x
- version: 29.5.14
- '@types/react':
- specifier: 18.3.x
- version: 18.3.28
- '@types/testing-library__jest-dom':
- specifier: ^5.14.9
- version: 5.14.9
- '@types/wordpress__block-editor':
- specifier: catalog:wp-min
- version: 14.21.8(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@types/wordpress__block-library':
- specifier: catalog:wp-min
- version: 2.6.3
- '@types/wordpress__edit-post':
- specifier: catalog:wp-min
- version: 8.4.2(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@woocommerce/eslint-plugin':
- specifier: workspace:*
- version: link:../eslint-plugin
- '@woocommerce/internal-build':
- specifier: workspace:*
- version: link:../internal-build
- '@woocommerce/internal-js-tests':
- specifier: workspace:*
- version: link:../internal-js-tests
- '@wordpress/browserslist-config':
- specifier: next
- version: 6.43.1-next.v.202604091042.0
- copy-webpack-plugin:
- specifier: 13.0.x
- version: 13.0.1(webpack@5.97.1(@swc/core@1.15.24))
- css-loader:
- specifier: 6.11.x
- version: 6.11.0(webpack@5.97.1(@swc/core@1.15.24))
- eslint:
- specifier: ^8.55.0
- version: 8.57.1
- jest:
- specifier: 29.5.x
- version: 29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3))
- jest-cli:
- specifier: 29.5.x
- version: 29.5.0(@types/node@24.12.2)(babel-plugin-macros@3.1.0)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3))
- jest-environment-jsdom:
- specifier: 29.5.x
- version: 29.5.0
- mini-css-extract-plugin:
- specifier: 2.9.x
- version: 2.9.4(webpack@5.97.1)
- postcss:
- specifier: 8.4.x
- version: 8.4.49
- postcss-loader:
- specifier: 4.3.x
- version: 4.3.0(postcss@8.4.49)(webpack@5.97.1)
- react:
- specifier: 18.3.x
- version: 18.3.1
- react-dom:
- specifier: 18.3.x
- version: 18.3.1(react@18.3.1)
- react-test-renderer:
- specifier: 18.3.x
- version: 18.3.1(react@18.3.1)
- rimraf:
- specifier: 5.0.5
- version: 5.0.5
- sass-loader:
- specifier: 10.5.x
- version: 10.5.2(sass@1.69.5)(webpack@5.97.1(@swc/core@1.15.24))
- ts-jest:
- specifier: 29.1.x
- version: 29.1.5(@babel/core@7.25.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.25.7))(jest@29.5.0(@types/node@24.12.2)(node-notifier@8.0.2)(ts-node@10.9.2(@swc/core@1.15.24)(@types/node@24.12.2)(typescript@5.7.3)))(typescript@5.7.3)
- typescript:
- specifier: 5.7.x
- version: 5.7.3
- webpack:
- specifier: 5.97.x
- version: 5.97.1(@swc/core@1.15.24)(webpack-cli@5.1.4)
- webpack-cli:
- specifier: 5.1.x
- version: 5.1.4(webpack@5.97.1)
- webpack-remove-empty-scripts:
- specifier: 1.0.x
- version: 1.0.4(webpack@5.97.1)
-
packages/js/remote-logging:
dependencies:
'@woocommerce/tracks':
@@ -3059,9 +2806,6 @@ importers:
'@woocommerce/expression-evaluation':
specifier: workspace:*
version: link:../../packages/js/expression-evaluation
- '@woocommerce/product-editor':
- specifier: workspace:*
- version: link:../../packages/js/product-editor
'@woocommerce/remote-logging':
specifier: workspace:*
version: link:../../packages/js/remote-logging
@@ -3222,9 +2966,6 @@ importers:
'@woocommerce/onboarding':
specifier: workspace:*
version: link:../../../../packages/js/onboarding
- '@woocommerce/product-editor':
- specifier: workspace:*
- version: link:../../../../packages/js/product-editor
'@woocommerce/remote-logging':
specifier: workspace:*
version: link:../../../../packages/js/remote-logging
@@ -4844,10 +4585,6 @@ packages:
react: ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
- '@arraypress/waveform-player@1.2.1':
- resolution: {integrity: sha512-PsgOZStUN+1GnY0tujbwk2PYE3HMT/Vl3wEvunqH16hIJWzisf8GEngy5EbswTAjQ1aV3Tk4XBkAskc8eslY1A==}
- engines: {node: '>=14.0.0'}
-
'@automattic/calypso-color-schemes@2.1.1':
resolution: {integrity: sha512-X5gmQEDJVtw8N9NARgZGM/pmalfapV8ZyRzEn2o0sCLmTAXGYg6A28ucLCQdBIn1l9t2rghBDFkY71vyqjyyFQ==}
@@ -9392,22 +9129,6 @@ packages:
react-test-renderer:
optional: true
- '@testing-library/react-hooks@8.0.1':
- resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
- engines: {node: '>=12'}
- peerDependencies:
- '@types/react': 18.3.x
- react: ^16.9.0 || ^17.0.0
- react-dom: ^16.9.0 || ^17.0.0
- react-test-renderer: ^16.9.0 || ^17.0.0
- peerDependenciesMeta:
- '@types/react':
- optional: true
- react-dom:
- optional: true
- react-test-renderer:
- optional: true
-
'@testing-library/react@15.0.7':
resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==}
engines: {node: '>=18'}
@@ -10511,13 +10232,6 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
- '@wordpress/block-library@9.44.0':
- resolution: {integrity: sha512-cEjbVhY1E1CZIcH3+PcSPiNRPONj/cXQRF3Bj7GPjKkmGv2oiZWEt2gWGSKCSdVyeOZ2buxONWYYCa/NEKv02w==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- peerDependencies:
- react: ^18.0.0
- react-dom: ^18.0.0
-
'@wordpress/block-serialization-default-parser@4.58.0':
resolution: {integrity: sha512-++fowmFEJC+1SwiCGuLPO9k+g3rgI2SCAA/p8/Bc1rNgnKB+rowzmQvSIIlRpcUkmOxHOrH5uruOEX27Ksg6uw==}
engines: {node: '>=12'}
@@ -10708,13 +10422,6 @@ packages:
peerDependencies:
react: ^18.0.0
- '@wordpress/core-commands@1.44.0':
- resolution: {integrity: sha512-70jikdUfOWJFFpgn6tPtiVfOyya6gC02M3OW+veHCSDJBIuxN6K85WxLKP/nsCIHG0UD3VYPjiRA6q/jyxpPIA==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- peerDependencies:
- react: ^18.0.0
- react-dom: ^18.0.0
-
'@wordpress/core-data@6.35.0':
resolution: {integrity: sha512-VnESF55nkAkKHQVwj0Oo8AU6w/yWjg/RQb+wKqJRnDuHEKHDAF5PI+9lYmcAsbXdnAc2yyf3lwBGk4w8m4uxlA==}
engines: {node: '>=12'}
@@ -10914,13 +10621,6 @@ packages:
'@playwright/test': '>=1'
'@types/node': ^20.17.10
- '@wordpress/edit-post@8.19.7':
- resolution: {integrity: sha512-zTc3Ed0z0hnZDtwXre8nLwdihMWlAm9xPLchp04tLGA+GmtZ7+Xq9GkHcc3ktSmjOrwZN1i8HfouggjrjL9pyg==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- peerDependencies:
- react: ^18.0.0
- react-dom: ^18.0.0
-
'@wordpress/edit-site@5.15.0':
resolution: {integrity: sha512-EJh9yv7HpQCCEIxSvHyzWAksXx75bRr3ftIhyAT+y7XjyIONJ9uD7UH2vOFXfFRxU4RwZTxL/VTdo0W2BB2Nig==}
engines: {node: '>=12'}
@@ -11204,10 +10904,6 @@ packages:
resolution: {integrity: sha512-ycGjtPEBlTKJjIfWoGFwrCU9Uu+BIVx6jlOCS6wo5HviMeznxCckPjG1EYKn+CbXMcyvyBVZXUP9FvFq7GP4Og==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- '@wordpress/interactivity-router@2.44.0':
- resolution: {integrity: sha512-lpq1y1dPzgh5FjxAhsEYp9QcBED+eWOwUyQCKio+WE0dGBRnFf5Sghr2d+e99TDvhrQvB11Zal7pNCnPps9iWw==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
-
'@wordpress/interactivity@5.7.0':
resolution: {integrity: sha512-zB2CZwj4TWpE5OJtFfpma1OYvrsLTMgWpRJ2ojRuNqBruZfQAUqOXsn6JyTTWs6bgyd4dr/WOZay4Wr4isleUw==}
engines: {node: '>=12'}
@@ -11216,13 +10912,12 @@ packages:
resolution: {integrity: sha512-RAWbve3ewgYFJMRKlIcM+6eRCsFHf1VFA2k0OxlePDGECjwl4u8eDXZ+B5YIQMVZZBVDOqsX5JPToxHIMawisg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- '@wordpress/interactivity@6.44.0':
- resolution: {integrity: sha512-6I400T3iMrlsQW9s7H+vQVPWhS7EkWQbcAJCw4XHvqpyWi5NpCrH0fCmbbm9PrQ1hPZbqjspZsYg2o7JqOJJGA==}
+ '@wordpress/interactivity@6.23.0':
+ resolution: {integrity: sha512-/BfwDVjrjCczBXyXCcM6izMiWlRrgRTU/23WE555nW8xmGzpVUrp/6pSXUWYWsxNUAee/8PJ41W6BBUyhqMSsQ==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- '@wordpress/interactivity@https://codeload.github.com/woocommerce/gutenberg/tar.gz/96b89ddfd6344b417a6e2fcd3748be856bb55b16#path:/packages/interactivity':
- resolution: {path: /packages/interactivity, tarball: https://codeload.github.com/woocommerce/gutenberg/tar.gz/96b89ddfd6344b417a6e2fcd3748be856bb55b16}
- version: 6.23.0
+ '@wordpress/interactivity@6.44.0':
+ resolution: {integrity: sha512-6I400T3iMrlsQW9s7H+vQVPWhS7EkWQbcAJCw4XHvqpyWi5NpCrH0fCmbbm9PrQ1hPZbqjspZsYg2o7JqOJJGA==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
'@wordpress/interface@5.35.0':
@@ -11362,10 +11057,6 @@ packages:
resolution: {integrity: sha512-eypqgXMOSaxBfcp9Jk2uxpjouXttQrWIHLLn/ZaLJRBND0inA676ZqRGsstnW+ej+1w8336hdwv3LmbSVtzGzg==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- '@wordpress/latex-to-mathml@1.12.0':
- resolution: {integrity: sha512-osmcIXqNNQIR5AkDFxATXoBuBPrMKWTsGVGSBfnnWzJNdFRBsZSIv9HlFFJVuvwEKQMYha11rbRFFRiKgKN/gg==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
-
'@wordpress/media-editor@0.7.0':
resolution: {integrity: sha512-N30ZV3BVLivV8+chVT6JRk9DZuDg66wvmppStcCPhq32reBJR9qphAcSGiSVxsMfJ0/GLM7OSWAPbAVe6K/f5g==}
engines: {node: '>=18.12.0', npm: '>=8.19.2'}
@@ -11966,13 +11657,6 @@ packages:
react: ^18.0.0
react-dom: ^18.0.0
- '@wordpress/widgets@4.44.0':
- resolution: {integrity: sha512-wYTWr6/CBip7ZMNwwiV/UyB5mi7W4wR8IU8HcZKwxg/H+Nmwb8MKnVurmAKuxHZvbsmlzLVuBLDqzA5yL1XfmQ==}
- engines: {node: '>=18.12.0', npm: '>=8.19.2'}
- peerDependencies:
- react: ^18.0.0
- react-dom: ^18.0.0
-
'@wordpress/wordcount@3.58.0':
resolution: {integrity: sha512-cxmOOh8d4VeIC3B9HcqhlTQePmNkNrPeHQLj6xWHfC0Elflj+kYAjsTwkjVQ3tBMC4+mQzva1O8tFSVh02gs7w==}
engines: {node: '>=12'}
@@ -16541,9 +16225,6 @@ packages:
html-dom-parser@3.1.2:
resolution: {integrity: sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==}
- html-dom-parser@5.1.2:
- resolution: {integrity: sha512-9nD3Rj3/FuQt83AgIa1Y3ruzspwFFA54AJbQnohXN+K6fL1/bhcDQJJY5Ne4L4A163ADQFVESd/0TLyNoV0mfg==}
-
html-element-map@1.4.0:
resolution: {integrity: sha512-jiTQtpaVnCcT1KDghMcmvbB5Q1AAWyBsGNuJZiHOWwN5GIVZGKqCWj9ddOFxLLz8ELYL2dwv2TaeS4dMdc/Pkw==}
engines: {node: '>= 0.4'}
@@ -16577,15 +16258,6 @@ packages:
peerDependencies:
react: 0.14 || 15 || 16 || 17 || 18
- html-react-parser@5.2.11:
- resolution: {integrity: sha512-WnSQVn/D1UTj64nSz5y8MriL+MrbsZH80Ytr1oqKqs8DGZnphWY1R1pl3t7TY3rpqTSu+FHA21P80lrsmrdNBA==}
- peerDependencies:
- '@types/react': 18.3.x
- react: 0.14 || 15 || 16 || 17 || 18 || 19
- peerDependenciesMeta:
- '@types/react':
- optional: true
-
html-tags@3.3.1:
resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
engines: {node: '>=8'}
@@ -16611,9 +16283,6 @@ packages:
webpack:
optional: true
- htmlparser2@10.0.0:
- resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
-
htmlparser2@10.1.0:
resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
@@ -16869,9 +16538,6 @@ packages:
inline-style-parser@0.1.1:
resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
- inline-style-parser@0.2.7:
- resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
-
inquirer@6.5.2:
resolution: {integrity: sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==}
engines: {node: '>=6.0.0'}
@@ -20907,9 +20573,6 @@ packages:
react-property@2.0.0:
resolution: {integrity: sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==}
- react-property@2.0.2:
- resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==}
-
react-refresh@0.11.0:
resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
engines: {node: '>=0.10.0'}
@@ -22400,15 +22063,9 @@ packages:
style-to-js@1.1.1:
resolution: {integrity: sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==}
- style-to-js@1.1.21:
- resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
-
style-to-object@0.3.0:
resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
- style-to-object@1.0.14:
- resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
-
stylehacks@5.1.1:
resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
engines: {node: ^10 || ^12 || >=14.0}
@@ -22657,10 +22314,6 @@ packages:
telejson@7.2.0:
resolution: {integrity: sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==}
- temml@0.10.34:
- resolution: {integrity: sha512-f3b5CaPwPvMviA+CtHy0qoIGWvzpRrNpXmGRc/Y1jc9gAYy+xOlndJFyn7Vfcz7cBcS8QRvv8z0EEH59sHCQxg==}
- engines: {node: '>=18.13.0'}
-
temp-dir@2.0.0:
resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
engines: {node: '>=8'}
@@ -24334,8 +23987,6 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
- '@arraypress/waveform-player@1.2.1': {}
-
'@automattic/calypso-color-schemes@2.1.1': {}
'@automattic/calypso-color-schemes@4.0.0': {}
@@ -31343,16 +30994,6 @@ snapshots:
react-dom: 18.3.1(react@18.3.1)
react-test-renderer: 18.3.1(react@18.3.1)
- '@testing-library/react-hooks@8.0.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-test-renderer@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@babel/runtime': 7.25.7
- react: 18.3.1
- react-error-boundary: 3.1.4(react@18.3.1)
- optionalDependencies:
- '@types/react': 18.3.28
- react-dom: 18.3.1(react@18.3.1)
- react-test-renderer: 18.3.1(react@18.3.1)
-
'@testing-library/react@15.0.7(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.7
@@ -31927,22 +31568,6 @@ snapshots:
- react-dom
- supports-color
- '@types/wordpress__edit-post@8.4.2(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@types/react': 18.3.28
- '@wordpress/components': 28.13.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/editor': 14.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/element': 6.44.0
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react-dom'
- - react
- - react-dom
- - stylelint
- - supports-color
-
'@types/wordpress__edit-post@8.4.2(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)':
dependencies:
'@types/react': 18.3.28
@@ -33443,64 +33068,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/block-library@9.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@arraypress/waveform-player': 1.2.1
- '@wordpress/a11y': 4.45.0
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/autop': 4.44.0
- '@wordpress/base-styles': 6.20.0
- '@wordpress/blob': 4.44.0
- '@wordpress/block-editor': 15.17.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/blocks': 15.17.0(react@18.3.1)
- '@wordpress/components': 32.6.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/date': 5.45.0
- '@wordpress/deprecated': 4.45.0
- '@wordpress/dom': 4.45.0
- '@wordpress/element': 6.44.0
- '@wordpress/escape-html': 3.45.0
- '@wordpress/hooks': 4.45.0
- '@wordpress/html-entities': 4.45.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/interactivity': 6.44.0
- '@wordpress/interactivity-router': 2.44.0
- '@wordpress/keyboard-shortcuts': 5.44.0(react@18.3.1)
- '@wordpress/keycodes': 4.45.0
- '@wordpress/latex-to-mathml': 1.12.0
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/patterns': 2.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/primitives': 4.45.0(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/reusable-blocks': 5.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/rich-text': 7.45.0(react@18.3.1)
- '@wordpress/server-side-render': 6.20.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/upload-media': 0.29.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/url': 4.44.0
- '@wordpress/viewport': 6.44.0(react@18.3.1)
- '@wordpress/wordcount': 4.44.0
- change-case: 4.1.2
- clsx: 2.1.1
- colord: 2.9.3
- fast-average-color: 9.5.2
- fast-deep-equal: 3.1.3
- html-react-parser: 5.2.11(@types/react@18.3.28)(react@18.3.1)
- memize: 2.1.1
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
- remove-accents: 0.5.0
- uuid: 9.0.1
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/block-serialization-default-parser@4.58.0':
dependencies:
'@babel/runtime': 7.25.7
@@ -34611,31 +34178,6 @@ snapshots:
- utf-8-validate
- vite
- '@wordpress/core-commands@1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@wordpress/block-editor': 15.17.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/commands': 1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/element': 6.44.0
- '@wordpress/html-entities': 4.45.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/router': 1.44.0(react@18.3.1)
- '@wordpress/url': 4.44.0
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/core-data@6.35.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.7
@@ -35279,50 +34821,6 @@ snapshots:
- supports-color
- utf-8-validate
- '@wordpress/edit-post@8.19.7(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@babel/runtime': 7.25.7
- '@wordpress/a11y': 4.45.0
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/block-editor': 14.21.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/block-library': 9.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/blocks': 14.15.0(react@18.3.1)
- '@wordpress/commands': 1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/components': 29.12.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-commands': 1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/deprecated': 4.44.0
- '@wordpress/dom': 4.44.0
- '@wordpress/editor': 14.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/element': 6.44.0
- '@wordpress/hooks': 4.44.0
- '@wordpress/html-entities': 4.44.0
- '@wordpress/i18n': 5.26.0
- '@wordpress/icons': 10.32.0(react@18.3.1)
- '@wordpress/keyboard-shortcuts': 5.44.0(react@18.3.1)
- '@wordpress/keycodes': 4.44.0
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/plugins': 7.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/preferences': 4.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/url': 4.44.0
- '@wordpress/viewport': 6.44.0(react@18.3.1)
- '@wordpress/warning': 3.44.0
- '@wordpress/widgets': 4.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- clsx: 2.1.1
- memize: 2.1.1
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/edit-site@5.15.0(patch_hash=63381743e38412fb89154386a5d169639ca10f8315407527829db669201fce9b)(@babel/helper-module-imports@7.28.6)(@babel/types@7.29.0)(@emotion/is-prop-valid@1.4.0)(@preact/signals-core@1.14.1)(@types/react@18.3.28)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.7
@@ -35501,65 +34999,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/editor@14.19.7(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@babel/runtime': 7.25.7
- '@wordpress/a11y': 4.19.1
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/blob': 4.44.0
- '@wordpress/block-editor': 14.21.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/blocks': 14.15.0(react@18.3.1)
- '@wordpress/commands': 1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/components': 29.12.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/dataviews': 4.22.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/date': 5.45.0
- '@wordpress/deprecated': 4.45.0
- '@wordpress/dom': 4.45.0
- '@wordpress/element': 6.44.0
- '@wordpress/fields': 0.11.6(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/hooks': 4.45.0
- '@wordpress/html-entities': 4.45.0
- '@wordpress/i18n': 5.26.0
- '@wordpress/icons': 10.32.0(react@18.3.1)
- '@wordpress/interface': 9.29.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)
- '@wordpress/keyboard-shortcuts': 5.44.0(react@18.3.1)
- '@wordpress/keycodes': 4.45.0
- '@wordpress/media-utils': 5.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/patterns': 2.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/plugins': 7.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/preferences': 4.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/reusable-blocks': 5.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/rich-text': 7.45.0(react@18.3.1)
- '@wordpress/server-side-render': 5.23.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/url': 4.44.0
- '@wordpress/warning': 3.45.0
- '@wordpress/wordcount': 4.44.0
- change-case: 4.1.2
- client-zip: 2.5.0
- clsx: 2.1.1
- date-fns: 3.6.0
- deepmerge: 4.3.1
- fast-deep-equal: 3.1.3
- is-plain-object: 5.0.0
- memize: 2.1.1
- react: 18.3.1
- react-autosize-textarea: 7.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- react-dom: 18.3.1(react@18.3.1)
- remove-accents: 0.5.0
- uuid: 9.0.1
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/editor@14.19.7(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))':
dependencies:
'@babel/runtime': 7.25.7
@@ -35745,73 +35184,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/editor@14.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/a11y': 4.45.0
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/base-styles': 6.20.0
- '@wordpress/blob': 4.44.0
- '@wordpress/block-editor': 15.17.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/block-serialization-default-parser': 5.44.0
- '@wordpress/blocks': 15.17.0(react@18.3.1)
- '@wordpress/commands': 1.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/components': 32.6.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/dataviews': 14.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/date': 5.44.0
- '@wordpress/deprecated': 4.44.0
- '@wordpress/dom': 4.44.0
- '@wordpress/element': 6.44.0
- '@wordpress/fields': 0.36.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/global-styles-engine': 1.11.0(react@18.3.1)
- '@wordpress/global-styles-ui': 1.11.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/hooks': 4.44.0
- '@wordpress/html-entities': 4.44.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/interface': 9.29.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)
- '@wordpress/keyboard-shortcuts': 5.44.0(react@18.3.1)
- '@wordpress/keycodes': 4.44.0
- '@wordpress/media-editor': 0.7.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/media-fields': 0.9.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/media-utils': 5.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/patterns': 2.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/plugins': 7.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/preferences': 4.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/reusable-blocks': 5.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/rich-text': 7.44.0(react@18.3.1)
- '@wordpress/server-side-render': 6.20.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/upload-media': 0.29.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/url': 4.44.0
- '@wordpress/views': 1.11.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/warning': 3.44.0
- '@wordpress/wordcount': 4.44.0
- change-case: 4.1.2
- client-zip: 2.5.0
- clsx: 2.1.1
- colord: 2.9.3
- date-fns: 3.6.0
- diff: 4.0.4
- fast-deep-equal: 3.1.3
- memize: 2.1.1
- react: 18.3.1
- react-autosize-textarea: 7.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- react-dom: 18.3.1(react@18.3.1)
- remove-accents: 0.5.0
- uuid: 9.0.1
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/editor@14.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)':
dependencies:
'@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -36205,47 +35577,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/fields@0.11.6(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@babel/runtime': 7.25.7
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/blob': 4.44.0
- '@wordpress/block-editor': 14.21.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/blocks': 14.15.0(react@18.3.1)
- '@wordpress/components': 29.12.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/dataviews': 4.22.0(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/date': 5.45.0
- '@wordpress/element': 6.44.0
- '@wordpress/hooks': 4.45.0
- '@wordpress/html-entities': 4.45.0
- '@wordpress/i18n': 5.26.0
- '@wordpress/icons': 10.32.0(react@18.3.1)
- '@wordpress/media-utils': 5.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/patterns': 2.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/primitives': 4.45.0(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/router': 1.44.0(react@18.3.1)
- '@wordpress/url': 4.44.0
- '@wordpress/warning': 3.45.0
- change-case: 4.1.2
- client-zip: 2.5.0
- clsx: 2.1.1
- react: 18.3.1
- remove-accents: 0.5.0
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - date-fns
- - react-dom
- - stylelint
- - supports-color
-
'@wordpress/fields@0.11.6(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))':
dependencies:
'@babel/runtime': 7.25.7
@@ -36370,48 +35701,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/fields@0.36.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@react-spring/web': 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/base-styles': 6.20.0
- '@wordpress/blob': 4.44.0
- '@wordpress/blocks': 15.17.0(react@18.3.1)
- '@wordpress/components': 32.6.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/dataviews': 14.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/date': 5.45.0
- '@wordpress/element': 6.44.0
- '@wordpress/hooks': 4.45.0
- '@wordpress/html-entities': 4.45.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/media-utils': 5.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/patterns': 2.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/primitives': 4.45.0(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/router': 1.44.0(react@18.3.1)
- '@wordpress/url': 4.44.0
- '@wordpress/warning': 3.45.0
- '@wordpress/wordcount': 4.44.0
- change-case: 4.1.2
- client-zip: 2.5.0
- clsx: 2.1.1
- react: 18.3.1
- remove-accents: 0.5.0
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - date-fns
- - react-dom
- - stylelint
- - supports-color
-
'@wordpress/fields@0.36.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)':
dependencies:
'@react-spring/web': 9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -36714,13 +36003,7 @@ snapshots:
'@wordpress/interactivity-router@2.19.1':
dependencies:
'@wordpress/a11y': 4.45.0
- '@wordpress/interactivity': https://codeload.github.com/woocommerce/gutenberg/tar.gz/96b89ddfd6344b417a6e2fcd3748be856bb55b16#path:/packages/interactivity
-
- '@wordpress/interactivity-router@2.44.0':
- dependencies:
- '@wordpress/a11y': 4.45.0
- '@wordpress/interactivity': 6.44.0
- es-module-lexer: 1.7.0
+ '@wordpress/interactivity': 6.23.0
'@wordpress/interactivity@5.7.0(@preact/signals-core@1.14.1)':
dependencies:
@@ -36736,12 +36019,12 @@ snapshots:
'@preact/signals': 1.3.4(preact@10.29.1)
preact: 10.29.1
- '@wordpress/interactivity@6.44.0':
+ '@wordpress/interactivity@6.23.0':
dependencies:
'@preact/signals': 1.3.4(preact@10.29.1)
preact: 10.29.1
- '@wordpress/interactivity@https://codeload.github.com/woocommerce/gutenberg/tar.gz/96b89ddfd6344b417a6e2fcd3748be856bb55b16#path:/packages/interactivity':
+ '@wordpress/interactivity@6.44.0':
dependencies:
'@preact/signals': 1.3.4(preact@10.29.1)
preact: 10.29.1
@@ -37009,10 +36292,6 @@ snapshots:
dependencies:
'@wordpress/i18n': 6.18.1-next.v.202605131032.0
- '@wordpress/latex-to-mathml@1.12.0':
- dependencies:
- temml: 0.10.34
-
'@wordpress/media-editor@0.7.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))':
dependencies:
'@babel/runtime': 7.25.7
@@ -37195,35 +36474,6 @@ snapshots:
- stylelint
- supports-color
- '@wordpress/media-utils@5.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/base-styles': 6.20.0
- '@wordpress/blob': 4.44.0
- '@wordpress/components': 32.6.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/dataviews': 14.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/element': 6.44.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/media-fields': 0.9.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/private-apis': 1.44.0
- '@wordpress/ui': 0.11.0(@date-fns/tz@1.4.1)(@types/react@18.3.28)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@14.16.1)
- '@wordpress/views': 1.11.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- clsx: 2.1.1
- react: 18.3.1
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - date-fns
- - react-dom
- - stylelint
- - supports-color
-
'@wordpress/media-utils@5.44.0(@emotion/is-prop-valid@1.4.0)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@wordpress/api-fetch': 7.44.0
@@ -39068,31 +38318,6 @@ snapshots:
- supports-color
- utf-8-validate
- '@wordpress/widgets@4.44.0(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
- dependencies:
- '@wordpress/api-fetch': 7.44.0
- '@wordpress/base-styles': 6.20.0
- '@wordpress/block-editor': 15.17.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/blocks': 15.17.0(react@18.3.1)
- '@wordpress/components': 32.6.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- '@wordpress/compose': 7.44.0(react@18.3.1)
- '@wordpress/core-data': 7.44.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.4.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(stylelint@16.26.1(typescript@5.7.3))
- '@wordpress/data': 10.44.0(react@18.3.1)
- '@wordpress/element': 6.44.0
- '@wordpress/i18n': 6.18.0
- '@wordpress/icons': 12.2.0(react@18.3.1)
- '@wordpress/notices': 5.44.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
- clsx: 2.1.1
- react: 18.3.1
- react-dom: 18.3.1(react@18.3.1)
- transitivePeerDependencies:
- - '@date-fns/tz'
- - '@emotion/is-prop-valid'
- - '@types/react'
- - '@types/react-dom'
- - stylelint
- - supports-color
-
'@wordpress/wordcount@3.58.0':
dependencies:
'@babel/runtime': 7.25.7
@@ -45111,11 +44336,6 @@ snapshots:
domhandler: 5.0.3
htmlparser2: 8.0.1
- html-dom-parser@5.1.2:
- dependencies:
- domhandler: 5.0.3
- htmlparser2: 10.0.0
-
html-element-map@1.4.0:
dependencies:
array.prototype.filter: 1.0.4
@@ -45161,16 +44381,6 @@ snapshots:
react-property: 2.0.0
style-to-js: 1.1.1
- html-react-parser@5.2.11(@types/react@18.3.28)(react@18.3.1):
- dependencies:
- domhandler: 5.0.3
- html-dom-parser: 5.1.2
- react: 18.3.1
- react-property: 2.0.2
- style-to-js: 1.1.21
- optionalDependencies:
- '@types/react': 18.3.28
-
html-tags@3.3.1: {}
html-void-elements@1.0.5: {}
@@ -45208,13 +44418,6 @@ snapshots:
optionalDependencies:
webpack: 5.97.1(@swc/core@1.15.24)(esbuild@0.18.20)(webpack-cli@5.1.4)
- htmlparser2@10.0.0:
- dependencies:
- domelementtype: 2.3.0
- domhandler: 5.0.3
- domutils: 3.2.2
- entities: 6.0.1
-
htmlparser2@10.1.0:
dependencies:
domelementtype: 2.3.0
@@ -45506,8 +44709,6 @@ snapshots:
inline-style-parser@0.1.1: {}
- inline-style-parser@0.2.7: {}
-
inquirer@6.5.2:
dependencies:
ansi-escapes: 3.2.0
@@ -50855,8 +50056,6 @@ snapshots:
react-property@2.0.0: {}
- react-property@2.0.2: {}
-
react-refresh@0.11.0: {}
react-refresh@0.14.2: {}
@@ -52624,18 +51823,10 @@ snapshots:
dependencies:
style-to-object: 0.3.0
- style-to-js@1.1.21:
- dependencies:
- style-to-object: 1.0.14
-
style-to-object@0.3.0:
dependencies:
inline-style-parser: 0.1.1
- style-to-object@1.0.14:
- dependencies:
- inline-style-parser: 0.2.7
-
stylehacks@5.1.1(postcss@8.4.49):
dependencies:
browserslist: 4.28.2
@@ -53177,8 +52368,6 @@ snapshots:
dependencies:
memoizerific: 1.11.3
- temml@0.10.34: {}
-
temp-dir@2.0.0: {}
temp@0.8.4:
diff --git a/tools/compare-perf/log-to-codevitals.js b/tools/compare-perf/log-to-codevitals.js
index cee21636561..9d3b4d01eab 100644
--- a/tools/compare-perf/log-to-codevitals.js
+++ b/tools/compare-perf/log-to-codevitals.js
@@ -9,10 +9,6 @@ const resultsFiles = [
file: 'editor.performance-results.json',
metricsPrefix: 'editor-',
},
- {
- file: 'product-editor.performance-results.json',
- metricsPrefix: 'product-editor-',
- },
{
file: 'frontend.performance-results.json',
metricsPrefix: 'frontend-',
diff --git a/tools/storybook/webpack.config.js b/tools/storybook/webpack.config.js
index 3238658b1e8..f4abde792d3 100644
--- a/tools/storybook/webpack.config.js
+++ b/tools/storybook/webpack.config.js
@@ -3,7 +3,6 @@
*/
const path = require( 'path' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const webpack = require( 'webpack' );
/**
* External dependencies
@@ -56,7 +55,6 @@ module.exports = ( storybookConfig ) => {
storybookConfig.resolve.modules = [
path.join( __dirname, '../../plugins/woocommerce/client/admin/client' ),
- path.join( __dirname, '../../packages/js/product-editor/src' ),
'node_modules',
];
@@ -88,13 +86,6 @@ module.exports = ( storybookConfig ) => {
),
to: `./onboarding-css/[name][ext]`,
},
- {
- from: path.resolve(
- __dirname,
- `../../packages/js/product-editor/build-style/*.css`
- ),
- to: `./product-editor-css/[name][ext]`,
- },
{
from: path.resolve(
__dirname,