- { variation.attributes.map( ( attribute ) => {
- const tag = (
- /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
- /* @ts-ignore Additional props are not required. */
-
- );
+ { variation.attributes
+ .filter( ( attribute ) =>
+ variableAttributeTags.includes(
+ attribute.option
+ )
+ )
+ .map( ( attribute ) => {
+ const tag = (
+ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+ /* @ts-ignore Additional props are not required. */
+
+ );
- return attribute.option.length <=
- PRODUCT_VARIATION_TITLE_LIMIT ? (
- tag
- ) : (
-
- { tag }
-
- );
- } ) }
+ return attribute.option.length <=
+ PRODUCT_VARIATION_TITLE_LIMIT ? (
+ tag
+ ) : (
+
+ { tag }
+
+ );
+ } ) }
void;
+ onChange: ( attributes: ProductAttribute[] ) => void;
productId?: number;
};
@@ -79,11 +79,11 @@ export function useProductAttributes( {
};
const getAugmentedAttributes = (
- atts: ProductAttribute[],
+ atts: EnhancedProductAttribute[],
variation: boolean,
startPosition: number
- ) => {
- return atts.map( ( attribute, index ) => ( {
+ ): ProductAttribute[] => {
+ return atts.map( ( { isDefault, terms, ...attribute }, index ) => ( {
...attribute,
variation,
position: startPosition + index,
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
new file mode 100644
index 00000000000..e105654997d
--- /dev/null
+++ b/packages/js/product-editor/src/hooks/use-product-variations-helper.ts
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { useCallback, useState } from '@wordpress/element';
+import {
+ Product,
+ EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
+} from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { EnhancedProductAttribute } from './use-product-attributes';
+
+export function useProductVariationsHelper() {
+ const [ productId ] = useEntityProp< number >(
+ 'postType',
+ 'product',
+ 'id'
+ );
+ const { saveEntityRecord } = useDispatch( 'core' );
+ const {
+ generateProductVariations: _generateProductVariations,
+ invalidateResolutionForStoreSelector,
+ } = useDispatch( EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME );
+
+ const [ isGenerating, setIsGenerating ] = useState( false );
+
+ const generateProductVariations = useCallback(
+ async ( attributes: EnhancedProductAttribute[] ) => {
+ setIsGenerating( true );
+
+ const updateProductAttributes = async () => {
+ const hasVariableAttribute = attributes.some(
+ ( attr ) => attr.variation
+ );
+ await saveEntityRecord< Promise< Product > >(
+ 'postType',
+ 'product',
+ {
+ id: productId,
+ type: hasVariableAttribute ? 'variable' : 'simple',
+ attributes,
+ }
+ );
+ };
+
+ return updateProductAttributes()
+ .then( () => {
+ return _generateProductVariations< { count: number } >( {
+ product_id: productId,
+ } );
+ } )
+ .then( ( data ) => {
+ if ( data.count > 0 ) {
+ invalidateResolutionForStoreSelector(
+ 'getProductVariations'
+ );
+ return invalidateResolutionForStoreSelector(
+ 'getProductVariationsTotalCount'
+ );
+ }
+ } )
+ .finally( () => {
+ setIsGenerating( false );
+ } );
+ },
+ []
+ );
+
+ return {
+ generateProductVariations,
+ isGenerating,
+ };
+}
diff --git a/packages/js/product-editor/src/utils/index.ts b/packages/js/product-editor/src/utils/index.ts
index a546a1a8653..bf3e695d1c6 100644
--- a/packages/js/product-editor/src/utils/index.ts
+++ b/packages/js/product-editor/src/utils/index.ts
@@ -22,7 +22,7 @@ import { isValidEmail } from './validate-email';
export * from './create-ordered-children';
export * from './sort-fills-by-order';
-export * from './init-blocks';
+export * from './init-block';
export * from './product-apifetch-middleware';
export * from './sift';
diff --git a/packages/js/product-editor/src/utils/init-block.ts b/packages/js/product-editor/src/utils/init-block.ts
index 31ab31bd3c5..06404008120 100644
--- a/packages/js/product-editor/src/utils/init-block.ts
+++ b/packages/js/product-editor/src/utils/init-block.ts
@@ -2,38 +2,30 @@
* External dependencies
*/
import {
+ Block,
BlockConfiguration,
- BlockEditProps,
registerBlockType,
} from '@wordpress/blocks';
-import { ComponentType } from 'react';
-type BlockRepresentation = {
- name: string;
- metadata: BlockConfiguration;
- settings: Partial< Omit< BlockConfiguration, 'edit' > > & {
- readonly edit?:
- | ComponentType<
- BlockEditProps< object > & {
- context?: Record< string, unknown >;
- }
- >
- | undefined;
- };
-};
+interface BlockRepresentation< T extends Record< string, object > > {
+ name?: string;
+ metadata: BlockConfiguration< T >;
+ settings: Partial< BlockConfiguration< T > >;
+}
/**
* Function to register an individual block.
*
- * @param {Object} block The block to be registered.
- *
- * @return {WPBlockType|void} The block, if it has been successfully registered;
- * otherwise `undefined`.
+ * @param block The block to be registered.
+ * @return The block, if it has been successfully registered; otherwise `undefined`.
*/
-export default function initBlock( block: BlockRepresentation ) {
+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 {
if ( ! block ) {
return;
}
const { metadata, settings, name } = block;
- return registerBlockType( { name, ...metadata }, settings );
+ return registerBlockType< T >( { name, ...metadata }, settings );
}
diff --git a/packages/js/product-editor/src/utils/init-blocks.ts b/packages/js/product-editor/src/utils/init-blocks.ts
deleted file mode 100644
index 06404008120..00000000000
--- a/packages/js/product-editor/src/utils/init-blocks.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import {
- Block,
- BlockConfiguration,
- registerBlockType,
-} from '@wordpress/blocks';
-
-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 {
- if ( ! block ) {
- return;
- }
- const { metadata, settings, name } = block;
- return registerBlockType< T >( { name, ...metadata }, settings );
-}
diff --git a/plugins/woocommerce-admin/client/products/fields/options/index.ts b/plugins/woocommerce-admin/client/products/fields/options/index.ts
deleted file mode 100644
index 5f30ef383a5..00000000000
--- a/plugins/woocommerce-admin/client/products/fields/options/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './options';
diff --git a/plugins/woocommerce-admin/client/products/fields/options/options.tsx b/plugins/woocommerce-admin/client/products/fields/options/options.tsx
deleted file mode 100644
index f4bd7ae1b98..00000000000
--- a/plugins/woocommerce-admin/client/products/fields/options/options.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Product, ProductAttribute } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import { useFormContext } from '@woocommerce/components';
-import { AttributeControl } from '@woocommerce/product-editor/src/components/attribute-control';
-import { useProductAttributes } from '@woocommerce/product-editor/src/hooks/use-product-attributes';
-
-/**
- * Internal dependencies
- */
-import { useProductVariationsHelper } from '../../hooks/use-product-variations-helper';
-
-type OptionsProps = {
- value: ProductAttribute[];
- onChange: ( value: ProductAttribute[] ) => void;
- productId?: number;
-};
-
-export const Options: React.FC< OptionsProps > = ( {
- value,
- onChange,
- productId,
-} ) => {
- const { values } = useFormContext< Product >();
- const { generateProductVariations } = useProductVariationsHelper();
-
- const { attributes, handleChange } = useProductAttributes( {
- allAttributes: value,
- isVariationAttributes: true,
- onChange: ( newAttributes ) => {
- onChange( newAttributes );
- generateProductVariations( {
- ...values,
- attributes: newAttributes,
- } );
- },
- productId,
- } );
-
- return (
-
{
- recordEvent( 'product_add_options_modal_add_button_click' );
- } }
- onChange={ handleChange }
- onNewModalCancel={ () => {
- recordEvent( 'product_add_options_modal_cancel_button_click' );
- } }
- onNewModalOpen={ () => {
- if ( ! attributes.length ) {
- recordEvent( 'product_add_first_option_button_click' );
- return;
- }
- recordEvent( 'product_add_option_button' );
- } }
- uiStrings={ {
- emptyStateSubtitle: __( 'No options yet', 'woocommerce' ),
- newAttributeListItemLabel: __( 'Add option', 'woocommerce' ),
- newAttributeModalTitle: __( 'Add options', 'woocommerce' ),
- globalAttributeHelperMessage: __(
- `You can change the option's name in {{link}}Attributes{{/link}}.`,
- 'woocommerce'
- ),
- } }
- onRemove={ () =>
- recordEvent(
- 'product_remove_option_confirmation_confirm_click'
- )
- }
- onRemoveCancel={ () =>
- recordEvent( 'product_remove_option_confirmation_cancel_click' )
- }
- />
- );
-};
diff --git a/plugins/woocommerce-admin/client/products/fills/product-form-fills.tsx b/plugins/woocommerce-admin/client/products/fills/product-form-fills.tsx
index 179650d0b33..fa1c59c2d0f 100644
--- a/plugins/woocommerce-admin/client/products/fills/product-form-fills.tsx
+++ b/plugins/woocommerce-admin/client/products/fills/product-form-fills.tsx
@@ -20,7 +20,6 @@ import { PricingSectionFills } from './pricing-section';
import { InventorySectionFills } from './inventory-section';
import { AttributesSectionFills } from './attributes-section';
import { ImagesSectionFills } from './images-section';
-import { OptionsSection } from '../sections/options-section';
import { ProductVariationsSection } from '../sections/product-variations-section';
import {
TAB_GENERAL_ID,
@@ -113,7 +112,6 @@ const Tabs = () => {
tabProps={ tabPropData.options }
>
<>
-
diff --git a/plugins/woocommerce-admin/client/products/hooks/use-product-variations-helper.ts b/plugins/woocommerce-admin/client/products/hooks/use-product-variations-helper.ts
deleted file mode 100644
index f999a67be3e..00000000000
--- a/plugins/woocommerce-admin/client/products/hooks/use-product-variations-helper.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { AUTO_DRAFT_NAME } from '@woocommerce/product-editor';
-import { useDispatch } from '@wordpress/data';
-import { useCallback, useState } from '@wordpress/element';
-import {
- Product,
- EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
- PRODUCTS_STORE_NAME,
-} from '@woocommerce/data';
-import { useFormContext } from '@woocommerce/components';
-
-export function useProductVariationsHelper() {
- const {
- generateProductVariations: _generateProductVariations,
- invalidateResolutionForStoreSelector,
- } = useDispatch( EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME );
- const { createProduct, updateProduct } = useDispatch( PRODUCTS_STORE_NAME );
- const { resetForm } = useFormContext< Product >();
-
- const [ isGenerating, setIsGenerating ] = useState( false );
-
- const generateProductVariations = useCallback(
- async ( product: Partial< Product > ) => {
- setIsGenerating( true );
-
- const createOrUpdateProduct = product.id
- ? () =>
- updateProduct< Promise< Product > >(
- product.id,
- product
- )
- : () => {
- return createProduct< Promise< Product > >( {
- ...product,
- status: 'auto-draft',
- name: product.name || AUTO_DRAFT_NAME,
- } );
- };
-
- return createOrUpdateProduct()
- .then( ( createdOrUpdatedProduct ) => {
- if ( ! product.id ) {
- resetForm( {
- ...createdOrUpdatedProduct,
- name: product.name || '',
- } );
- }
- return _generateProductVariations( {
- product_id: createdOrUpdatedProduct.id,
- } );
- } )
- .then( () => {
- return invalidateResolutionForStoreSelector(
- 'getProductVariations'
- );
- } )
- .finally( () => {
- setIsGenerating( false );
- } );
- },
- []
- );
-
- return {
- generateProductVariations,
- isGenerating,
- };
-}
diff --git a/plugins/woocommerce-admin/client/products/sections/options-section.scss b/plugins/woocommerce-admin/client/products/sections/options-section.scss
deleted file mode 100644
index 8090c6112dd..00000000000
--- a/plugins/woocommerce-admin/client/products/sections/options-section.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.woocommerce-product-options-section.woocommerce-form-section {
- .woocommerce-form-section__content {
- padding: 0;
- border: 0;
- }
-}
diff --git a/plugins/woocommerce-admin/client/products/sections/options-section.tsx b/plugins/woocommerce-admin/client/products/sections/options-section.tsx
deleted file mode 100644
index 821ffe9e9ab..00000000000
--- a/plugins/woocommerce-admin/client/products/sections/options-section.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Link, useFormContext } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-
-/**
- * Internal dependencies
- */
-import './options-section.scss';
-import { ProductSectionLayout } from '../layout/product-section-layout';
-import { Options } from '../fields/options';
-
-export const OptionsSection: React.FC = () => {
- const {
- getInputProps,
- values: { id: productId },
- } = useFormContext< Product >();
-
- return (
-
-
- { __(
- 'Add and manage options, such as size and color, for customers to choose on the product page.',
- 'woocommerce'
- ) }
-
- {
- recordEvent( 'learn_more_about_options_help' );
- } }
- >
- { __( 'Learn more about options', 'woocommerce' ) }
-
-
- }
- >
-
-
- );
-};
diff --git a/plugins/woocommerce/changelog/update-39453_simple_to_variable_product b/plugins/woocommerce/changelog/update-39453_simple_to_variable_product
new file mode 100644
index 00000000000..61811ccbfca
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-39453_simple_to_variable_product
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Remove unused variation option components
diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
index c9852fe88b9..470054b98b7 100644
--- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
+++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
@@ -46,6 +46,7 @@ class Init {
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', array( $this, 'add_product_template' ) );
@@ -778,6 +779,21 @@ class Init {
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',
+ )
+ );
+ }
+
/**
* Sets the current screen to the block editor if a wc-admin page.
*/