Commit 9055e83ade for woocommerce
commit 9055e83adeeb94ba5f39ac6c5b2917dd7df6d0e3
Author: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Fri Dec 12 14:05:12 2025 +0200
Product Editor: Remove editor mode and unused rich text components (#62428)
* Product Editor: Remove editor mode and unused rich text components
* Add changefile(s) from automation for the following project(s): @woocommerce/product-editor, @woocommerce/components
---------
Co-authored-by: github-actions <github-actions@github.com>
diff --git a/packages/js/components/changelog/62428-remove-editor-mode-and-unused-rich-text-components b/packages/js/components/changelog/62428-remove-editor-mode-and-unused-rich-text-components
new file mode 100644
index 0000000000..d01699b53b
--- /dev/null
+++ b/packages/js/components/changelog/62428-remove-editor-mode-and-unused-rich-text-components
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Product Editor: Remove editor mode and unused rich text components
+
diff --git a/packages/js/components/src/index.ts b/packages/js/components/src/index.ts
index a618bf2193..2b26451d68 100644
--- a/packages/js/components/src/index.ts
+++ b/packages/js/components/src/index.ts
@@ -36,7 +36,6 @@ export { default as ProductRating } from './rating/product';
export { default as Rating } from './rating';
export { default as ReportFilters } from './filters';
export { default as ReviewRating } from './rating/review';
-export { RichTextEditor as __experimentalRichTextEditor } from './rich-text-editor';
export * from './search';
export { default as SearchListControl } from './search-list-control';
export { default as SearchListItem } from './search-list-control/item';
diff --git a/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx b/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx
deleted file mode 100644
index 1333a7f3c3..0000000000
--- a/packages/js/components/src/rich-text-editor/editor-writing-flow.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useInstanceId } from '@wordpress/compose';
-import { BlockInstance, createBlock } from '@wordpress/blocks';
-import { createElement, useEffect } from '@wordpress/element';
-import {
- BlockList,
- ObserveTyping,
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore No types for this exist yet.
- BlockTools,
- store as blockEditorStore,
- WritingFlow,
-} from '@wordpress/block-editor';
-
-type EditorWritingFlowProps = {
- blocks: BlockInstance[];
- onChange: ( changes: BlockInstance[] ) => void;
- placeholder?: string;
-};
-
-export const EditorWritingFlow = ( {
- blocks,
- onChange,
- placeholder = '',
-}: EditorWritingFlowProps ) => {
- const instanceId = useInstanceId( EditorWritingFlow );
- const firstBlock = blocks[ 0 ];
- const isEmpty = ! blocks.length;
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore This action is available in the block editor data store.
- const { insertBlock, selectBlock, __unstableSetEditorMode } =
- useDispatch( blockEditorStore );
-
- const { selectedBlockClientIds, editorMode } = useSelect( ( select ) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore This selector is available in the block editor data store.
- const { getSelectedBlockClientIds, __unstableGetEditorMode } =
- select( blockEditorStore );
- return {
- editorMode: __unstableGetEditorMode(),
- selectedBlockClientIds: getSelectedBlockClientIds(),
- };
- }, [] );
-
- // This is a workaround to prevent focusing the block on initialization.
- // Changing to a mode other than "edit" ensures that no initial position
- // is found and no element gets subsequently focused.
- // See https://github.com/WordPress/gutenberg/blob/411b6eee8376e31bf9db4c15c92a80524ae38e9b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js#L42
- const setEditorIsInitializing = ( isInitializing: boolean ) => {
- if ( typeof __unstableSetEditorMode !== 'function' ) {
- return;
- }
-
- __unstableSetEditorMode( isInitializing ? 'initialized' : 'edit' );
- };
-
- useEffect( () => {
- if ( selectedBlockClientIds?.length || ! firstBlock ) {
- return;
- }
-
- setEditorIsInitializing( true );
- selectBlock( firstBlock.clientId );
- }, [ firstBlock, selectedBlockClientIds ] );
-
- useEffect( () => {
- if ( isEmpty ) {
- const initialBlock = createBlock( 'core/paragraph', {
- content: '',
- placeholder,
- } );
- insertBlock( initialBlock );
- onChange( [ initialBlock ] );
- }
- }, [ isEmpty ] );
-
- const maybeSetEditMode = () => {
- if ( editorMode === 'edit' ) {
- return;
- }
- setEditorIsInitializing( false );
- };
-
- return (
- /* Gutenberg handles the keyboard events when focusing the content editable area. */
- /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
- <div
- className="woocommerce-rich-text-editor__writing-flow"
- id={ `woocommerce-rich-text-editor__writing-flow-${ instanceId }` }
- style={ {
- cursor: isEmpty ? 'text' : 'initial',
- } }
- >
- <BlockTools>
- <WritingFlow
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore These are forwarded as props to the WritingFlow component.
- onClick={ maybeSetEditMode }
- onFocus={ maybeSetEditMode }
- >
- <ObserveTyping>
- <BlockList />
- </ObserveTyping>
- </WritingFlow>
- </BlockTools>
- </div>
- /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
- );
-};
diff --git a/packages/js/components/src/rich-text-editor/index.ts b/packages/js/components/src/rich-text-editor/index.ts
deleted file mode 100644
index 7694675b91..0000000000
--- a/packages/js/components/src/rich-text-editor/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './rich-text-editor';
-export { registerBlocks as registerRichTextEditorBlocks } from './utils/register-blocks';
diff --git a/packages/js/components/src/rich-text-editor/rich-text-editor.tsx b/packages/js/components/src/rich-text-editor/rich-text-editor.tsx
deleted file mode 100644
index 89838c3b1f..0000000000
--- a/packages/js/components/src/rich-text-editor/rich-text-editor.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * External dependencies
- */
-import { BaseControl, Popover, SlotFillProvider } from '@wordpress/components';
-import { BlockEditorProvider } from '@wordpress/block-editor';
-import { BlockInstance } from '@wordpress/blocks';
-import { createElement, useEffect, useState, useRef } from '@wordpress/element';
-import { debounce } from 'lodash';
-import { uploadMedia } from '@wordpress/media-utils';
-import { useUser } from '@woocommerce/data';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { EditorWritingFlow } from './editor-writing-flow';
-
-type RichTextEditorProps = {
- blocks: BlockInstance[];
- label?: string;
- onChange: ( changes: BlockInstance[] ) => void;
- entryId?: string;
- placeholder?: string;
-};
-
-export const RichTextEditor: React.VFC< RichTextEditorProps > = ( {
- blocks,
- label,
- onChange,
- placeholder = '',
-} ) => {
- const blocksRef = useRef( blocks );
- const { currentUserCan } = useUser();
- const [ , setRefresh ] = useState( 0 );
-
- // If there is a props change we need to update the ref and force re-render.
- // Note: Because this component is memoized and because we don't re-render
- // when this component initiates a change, a prop change won't force the re-render
- // you'd expect. A change to the blocks must come from outside the editor.
- const forceRerender = () => {
- setRefresh( ( refresh ) => refresh + 1 );
- };
-
- useEffect( () => {
- blocksRef.current = blocks;
- forceRerender();
- }, [ blocks ] );
-
- const debounceChange = debounce( ( updatedBlocks ) => {
- onChange( updatedBlocks );
- blocksRef.current = updatedBlocks;
- forceRerender();
- }, 200 );
-
- const mediaUpload = currentUserCan( 'upload_files' )
- ? ( {
- onError,
- ...rest
- }: {
- onError: ( message: string ) => void;
- } ) => {
- uploadMedia(
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore The upload function passes the remaining required props.
- {
- onError: ( { message } ) => onError( message ),
- ...rest,
- }
- );
- }
- : undefined;
-
- return (
- <div className="woocommerce-rich-text-editor">
- { label && (
- <BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
- ) }
- <SlotFillProvider>
- <BlockEditorProvider
- value={ blocksRef.current }
- settings={ {
- bodyPlaceholder: '',
- hasFixedToolbar: true,
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore This property was recently added in the block editor data store.
- __experimentalClearBlockSelection: false,
- mediaUpload,
- } }
- onInput={ debounceChange }
- onChange={ debounceChange }
- >
- <ShortcutProvider>
- <EditorWritingFlow
- blocks={ blocksRef.current }
- onChange={ onChange }
- placeholder={ placeholder }
- />
- </ShortcutProvider>
- { /* @ts-expect-error Popover is missing Slot type: https://github.com/WordPress/gutenberg/blob/dd042a265afc0d4679858220441dd45c98b27ed3/packages/components/src/popover/index.tsx#L521 */ }
- <Popover.Slot />
- </BlockEditorProvider>
- </SlotFillProvider>
- </div>
- );
-};
diff --git a/packages/js/components/src/rich-text-editor/stories/rich-text-editor.story.tsx b/packages/js/components/src/rich-text-editor/stories/rich-text-editor.story.tsx
deleted file mode 100644
index a5bd1772f0..0000000000
--- a/packages/js/components/src/rich-text-editor/stories/rich-text-editor.story.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { createElement } from '@wordpress/element';
-import { createRegistry, RegistryProvider } from '@wordpress/data';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { store as coreDataStore } from '@wordpress/core-data';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-// eslint-disable-next-line @woocommerce/dependency-group
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { RichTextEditor } from '../';
-
-const registry = createRegistry();
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-registry.register( coreDataStore );
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
-registry.register( blockEditorStore );
-
-export const Basic = () => {
- return (
- <RegistryProvider value={ registry }>
- <RichTextEditor blocks={ [] } onChange={ () => null } />
- </RegistryProvider>
- );
-};
-
-export const MultipleEditors = () => {
- return (
- <RegistryProvider value={ registry }>
- <RichTextEditor blocks={ [] } onChange={ () => null } />
- <br />
- <RichTextEditor blocks={ [] } onChange={ () => null } />
- </RegistryProvider>
- );
-};
-
-export default {
- title: 'Experimental/RichTextEditor',
- component: RichTextEditor,
-};
diff --git a/packages/js/components/src/rich-text-editor/style.scss b/packages/js/components/src/rich-text-editor/style.scss
deleted file mode 100644
index 722e98d31b..0000000000
--- a/packages/js/components/src/rich-text-editor/style.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-$toolbar-height: 40px;
-
-.woocommerce-rich-text-editor {
- .woocommerce-rich-text-editor__writing-flow {
- border: 1px solid $gray-600;
- border-radius: 2px;
- background: $white;
- }
-
- * {
- box-sizing: border-box;
- }
-
- .block-editor-block-contextual-toolbar.is-fixed,
- .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
- .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
- border-color: $gray-600;
- }
-
- /* hide block boundary background styling */
- .rich-text:focus *[data-rich-text-format-boundary] {
- background: none !important;
- }
- .block-editor-block-list__layout
- .block-editor-block-list__block.is-multi-selected::after {
- box-shadow: none;
- outline: none;
- }
- .block-editor-block-list__layout
- .block-editor-block-list__block:not([contenteditable]):focus::after {
- box-shadow: none;
- outline: none;
- }
-
- .block-editor-writing-flow {
- padding: $gap-small;
- }
-
- /* Within the writing flow reset some of the css resets used elsewhere */
- .block-editor-writing-flow ul,
- .block-editor-writing-flow ol {
- list-style: revert;
- padding: revert;
- }
-
- .components-accessible-toolbar {
- height: $toolbar-height;
- width: 100%;
- background-color: $white;
- border-color: $gray-700;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
-
- .components-button {
- height: $toolbar-height;
- }
- }
-
- .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
- height: calc( $toolbar-height / 2 );
- }
-
- .block-editor-block-contextual-toolbar.is-fixed,
- .components-toolbar-group {
- min-height: $toolbar-height;
- }
-
- .wp-block-quote {
- border-left: 0.25em solid currentColor;
- margin: 0 0 1.75em 0;
- padding-left: 1em;
-
- cite {
- font-size: 11px;
- }
- }
-}
diff --git a/packages/js/components/src/rich-text-editor/utils/register-blocks.ts b/packages/js/components/src/rich-text-editor/utils/register-blocks.ts
deleted file mode 100644
index 905a89e4bd..0000000000
--- a/packages/js/components/src/rich-text-editor/utils/register-blocks.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { BlockInstance, getBlockType } from '@wordpress/blocks';
-import {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore We need this to import the block modules for registration.
- __experimentalGetCoreBlocks,
- registerCoreBlocks as wpRegisterCoreBlocks,
-} from '@wordpress/block-library';
-
-export const PARAGRAPH_BLOCK_ID = 'core/paragraph';
-export const HEADING_BLOCK_ID = 'core/heading';
-export const LIST_BLOCK_ID = 'core/list';
-export const LIST_ITEM_BLOCK_ID = 'core/list-item';
-export const QUOTE_BLOCK_ID = 'core/quote';
-export const IMAGE_BLOCK_ID = 'core/image';
-export const VIDEO_BLOCK_ID = 'core/video';
-
-const ALLOWED_CORE_BLOCKS = [
- PARAGRAPH_BLOCK_ID,
- HEADING_BLOCK_ID,
- LIST_BLOCK_ID,
- LIST_ITEM_BLOCK_ID,
- QUOTE_BLOCK_ID,
- IMAGE_BLOCK_ID,
- VIDEO_BLOCK_ID,
-];
-
-const registerCoreBlocks = () => {
- const coreBlocks = __experimentalGetCoreBlocks();
- const blocks = coreBlocks.filter( ( block: BlockInstance ) => {
- const isRegistered = !! getBlockType( block.name );
- return ! isRegistered && ALLOWED_CORE_BLOCKS.includes( block.name );
- } );
-
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore An argument is allowed to specify which blocks to register.
- wpRegisterCoreBlocks( blocks );
-};
-
-export const registerBlocks = () => {
- registerCoreBlocks();
-};
diff --git a/packages/js/components/src/style.scss b/packages/js/components/src/style.scss
index b2885097f1..786d33dfbb 100644
--- a/packages/js/components/src/style.scss
+++ b/packages/js/components/src/style.scss
@@ -32,7 +32,6 @@
@import 'pill/style.scss';
@import 'product-image/style.scss';
@import 'rating/style.scss';
-@import 'rich-text-editor/style.scss';
@import 'search/style.scss';
@import 'search-list-control/style.scss';
@import 'section-header/style.scss';
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
new file mode 100644
index 0000000000..d01699b53b
--- /dev/null
+++ b/packages/js/product-editor/changelog/62428-remove-editor-mode-and-unused-rich-text-components
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Product Editor: Remove editor mode and unused rich text components
+
diff --git a/packages/js/product-editor/src/components/details-description-field/details-description-field.tsx b/packages/js/product-editor/src/components/details-description-field/details-description-field.tsx
deleted file mode 100644
index c7f4400402..0000000000
--- a/packages/js/product-editor/src/components/details-description-field/details-description-field.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- useFormContext,
- __experimentalRichTextEditor as RichTextEditor,
-} from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { BlockInstance, serialize, parse } from '@wordpress/blocks';
-import { useState, createElement } from '@wordpress/element';
-
-export const DetailsDescriptionField = () => {
- const { setValue, values } = useFormContext< Product >();
- const [ descriptionBlocks, setDescriptionBlocks ] = useState<
- BlockInstance[]
- >( parse( values.description || '' ) );
-
- return (
- <RichTextEditor
- label={ __( 'Description', 'woocommerce' ) }
- blocks={ descriptionBlocks }
- onChange={ ( blocks ) => {
- setDescriptionBlocks( blocks );
- if ( ! descriptionBlocks.length ) {
- return;
- }
- setValue( 'description', serialize( blocks ) );
- } }
- placeholder={ __(
- 'Describe this product. What makes it unique? What are its most important features?',
- 'woocommerce'
- ) }
- />
- );
-};
diff --git a/packages/js/product-editor/src/components/details-description-field/index.ts b/packages/js/product-editor/src/components/details-description-field/index.ts
deleted file mode 100644
index c9c0bf9e9d..0000000000
--- a/packages/js/product-editor/src/components/details-description-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './details-description-field';
diff --git a/packages/js/product-editor/src/components/details-feature-field/details-feature-field.tsx b/packages/js/product-editor/src/components/details-feature-field/details-feature-field.tsx
deleted file mode 100644
index b4333983a3..0000000000
--- a/packages/js/product-editor/src/components/details-feature-field/details-feature-field.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { CheckboxControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
- useFormContext,
- Link,
- __experimentalTooltip as Tooltip,
-} from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { recordEvent } from '@woocommerce/tracks';
-import {
- createElement,
- Fragment,
- createInterpolateElement,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getCheckboxTracks } from '../../utils';
-import { PRODUCT_DETAILS_SLUG } from '../../constants';
-
-export const DetailsFeatureField = () => {
- const { getCheckboxControlProps } = useFormContext< Product >();
-
- return (
- <CheckboxControl
- // @ts-expect-error label type is wrong
- label={
- <>
- { __( 'Feature this product', 'woocommerce' ) }
- <Tooltip
- text={ createInterpolateElement(
- __(
- 'Include this product in a featured section on your website with a widget or shortcode. <moreLink />',
- 'woocommerce'
- ),
- {
- moreLink: (
- <Link
- href="https://woocommerce.com/document/woocommerce-shortcodes/#products"
- target="_blank"
- type="external"
- onClick={ () =>
- recordEvent(
- 'add_product_learn_more',
- {
- category:
- PRODUCT_DETAILS_SLUG,
- }
- )
- }
- >
- { __( 'Learn more', 'woocommerce' ) }
- </Link>
- ),
- }
- ) }
- />
- </>
- }
- { ...getCheckboxControlProps(
- 'featured',
- getCheckboxTracks( 'featured' )
- ) }
- />
- );
-};
diff --git a/packages/js/product-editor/src/components/details-feature-field/index.ts b/packages/js/product-editor/src/components/details-feature-field/index.ts
deleted file mode 100644
index 230f4b8e7e..0000000000
--- a/packages/js/product-editor/src/components/details-feature-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './details-feature-field';
diff --git a/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx b/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx
deleted file mode 100644
index f5f1c3c644..0000000000
--- a/packages/js/product-editor/src/components/details-name-field/details-name-field.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * External dependencies
- */
-import { Button, TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { cleanForSlug } from '@wordpress/url';
-import { useFormContext } from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import {
- useState,
- createElement,
- createInterpolateElement,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { PRODUCT_DETAILS_SLUG } from '../../constants';
-import { EditProductLinkModal } from '../edit-product-link-modal';
-import { useProductHelper } from '../../hooks/use-product-helper';
-import { getPermalinkParts } from '../../utils';
-
-export const DetailsNameField = ( {} ) => {
- const { updateProductWithStatus } = useProductHelper();
- const [ showProductLinkEditModal, setShowProductLinkEditModal ] =
- useState( false );
- const { getInputProps, values, touched, errors, setValue, resetForm } =
- useFormContext< Product >();
-
- const { prefix: permalinkPrefix, suffix: permalinkSuffix } =
- getPermalinkParts( values );
-
- const hasNameError = () => {
- return Boolean( touched.name ) && Boolean( errors.name );
- };
-
- const setSkuIfEmpty = () => {
- if ( values.sku || ! values.name?.length ) {
- return;
- }
- setValue( 'sku', cleanForSlug( values.name ) );
- };
- return (
- <div>
- <TextControl
- label={ createInterpolateElement(
- __( 'Name <required />', 'woocommerce' ),
- {
- required: (
- <span className="woocommerce-product-form__optional-input">
- { __( '(required)', 'woocommerce' ) }
- </span>
- ),
- }
- ) }
- name={ `${ PRODUCT_DETAILS_SLUG }-name` }
- placeholder={ __( 'e.g. 12 oz Coffee Mug', 'woocommerce' ) }
- { ...getInputProps( 'name', {
- onBlur: setSkuIfEmpty,
- } ) }
- />
- { values.id && ! hasNameError() && permalinkPrefix && (
- <span className="woocommerce-product-form__secondary-text product-details-section__product-link">
- { __( 'Product link', 'woocommerce' ) }
- :
- <a
- href={ values.permalink }
- target="_blank"
- rel="noreferrer"
- >
- { permalinkPrefix }
- { values.slug || cleanForSlug( values.name ) }
- { permalinkSuffix }
- </a>
- <Button
- variant="link"
- onClick={ () => setShowProductLinkEditModal( true ) }
- >
- { __( 'Edit', 'woocommerce' ) }
- </Button>
- </span>
- ) }
- { showProductLinkEditModal && (
- <EditProductLinkModal
- permalinkPrefix={ permalinkPrefix || '' }
- permalinkSuffix={ permalinkSuffix || '' }
- product={ values }
- onCancel={ () => setShowProductLinkEditModal( false ) }
- onSaved={ () => setShowProductLinkEditModal( false ) }
- saveHandler={ async ( slug ) => {
- const updatedProduct = await updateProductWithStatus(
- values.id,
- {
- slug,
- },
- values.status,
- true
- );
- if ( updatedProduct && updatedProduct.id ) {
- // only reset the updated slug and permalink fields.
- resetForm(
- {
- ...values,
- slug: updatedProduct.slug,
- permalink: updatedProduct.permalink,
- },
- touched,
- errors
- );
-
- return {
- slug: updatedProduct.slug,
- permalink: updatedProduct.permalink,
- };
- }
- } }
- />
- ) }
- </div>
- );
-};
diff --git a/packages/js/product-editor/src/components/details-name-field/index.ts b/packages/js/product-editor/src/components/details-name-field/index.ts
deleted file mode 100644
index b9dcfbe518..0000000000
--- a/packages/js/product-editor/src/components/details-name-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './details-name-field';
diff --git a/packages/js/product-editor/src/components/details-summary-field/details-summary-field.tsx b/packages/js/product-editor/src/components/details-summary-field/details-summary-field.tsx
deleted file mode 100644
index a255c8a505..0000000000
--- a/packages/js/product-editor/src/components/details-summary-field/details-summary-field.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
- useFormContext,
- __experimentalRichTextEditor as RichTextEditor,
-} from '@woocommerce/components';
-import { Product } from '@woocommerce/data';
-import { BlockInstance, serialize, parse } from '@wordpress/blocks';
-import { useState, createElement } from '@wordpress/element';
-
-export const DetailsSummaryField = () => {
- const { setValue, values } = useFormContext< Product >();
- const [ summaryBlocks, setSummaryBlocks ] = useState< BlockInstance[] >(
- parse( values.short_description || '' )
- );
-
- return (
- <RichTextEditor
- label={ __( 'Summary', 'woocommerce' ) }
- blocks={ summaryBlocks }
- onChange={ ( blocks ) => {
- setSummaryBlocks( blocks );
- if ( ! summaryBlocks.length ) {
- return;
- }
- setValue( 'short_description', serialize( blocks ) );
- } }
- placeholder={ __(
- "Summarize this product in 1-2 short sentences. We'll show it at the top of the page.",
- 'woocommerce'
- ) }
- />
- );
-};
diff --git a/packages/js/product-editor/src/components/details-summary-field/index.ts b/packages/js/product-editor/src/components/details-summary-field/index.ts
deleted file mode 100644
index 3fb8108864..0000000000
--- a/packages/js/product-editor/src/components/details-summary-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './details-summary-field';
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
index a38afb28ae..179c45bcf8 100644
--- 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
@@ -27,8 +27,6 @@ import {
import {
NavigableToolbar,
store as blockEditorStore,
- // @ts-expect-error ToolSelector exists in WordPress components.
- ToolSelector,
BlockToolbar,
} from '@wordpress/block-editor';
@@ -57,40 +55,34 @@ export function HeaderToolbar( {
useState( true );
const isLargeViewport = useViewportMatch( 'medium' );
const inserterButton = useRef< HTMLButtonElement | null >( null );
- const {
- isInserterEnabled,
- isTextModeEnabled,
- hasBlockSelection,
- hasFixedToolbar,
- } = useSelect( ( select ) => {
- const {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore These selectors are available in the block data store.
- hasInserterItems,
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore These selectors are available in the block data store.
- getBlockRootClientId,
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore These selectors are available in the block data store.
- getBlockSelectionEnd,
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore These selectors are available in the block data store.
- __unstableGetEditorMode: getEditorMode,
- // @ts-expect-error These selectors are available in the block data store.
- getBlockSelectionStart,
- } = select( blockEditorStore );
- const { get: getPreference } = select( preferencesStore );
+ const { isInserterEnabled, hasBlockSelection, hasFixedToolbar } = useSelect(
+ ( select ) => {
+ const {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore These selectors are available in the block data store.
+ hasInserterItems,
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore These selectors are available in the block data store.
+ getBlockRootClientId,
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore These selectors are available in the block data store.
+ getBlockSelectionEnd,
+ // @ts-expect-error These selectors are available in the block data store.
+ getBlockSelectionStart,
+ } = select( blockEditorStore );
+ const { get: getPreference } = select( preferencesStore );
- return {
- isTextModeEnabled: getEditorMode() === 'text',
- isInserterEnabled: hasInserterItems(
- getBlockRootClientId( getBlockSelectionEnd() ?? '' ) ??
- undefined
- ),
- hasBlockSelection: !! getBlockSelectionStart(),
- hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
- };
- }, [] );
+ return {
+ isInserterEnabled: hasInserterItems(
+ getBlockRootClientId( getBlockSelectionEnd() ?? '' ) ??
+ undefined
+ ),
+ hasBlockSelection: !! getBlockSelectionStart(),
+ hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+ };
+ },
+ []
+ );
const toggleInserter = useCallback(
() => setIsInserterOpened( ! isInserterOpened ),
@@ -136,14 +128,6 @@ export function HeaderToolbar( {
aria-expanded={ isInserterOpened }
showTooltip
/>
- { isLargeViewport && (
- <ToolbarItem
- as={ ToolSelector }
- // @ts-expect-error the prop size is passed to the ToolSelector component
- disabled={ isTextModeEnabled }
- size="compact"
- />
- ) }
{ /* @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 */ }
diff --git a/packages/js/product-editor/src/components/index.ts b/packages/js/product-editor/src/components/index.ts
index 074645ed10..80b37d9c79 100644
--- a/packages/js/product-editor/src/components/index.ts
+++ b/packages/js/product-editor/src/components/index.ts
@@ -5,10 +5,6 @@ export {
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 { DetailsNameField as __experimentalDetailsNameField } from './details-name-field';
-export { DetailsFeatureField as __experimentalDetailsFeatureField } from './details-feature-field';
-export { DetailsSummaryField as __experimentalDetailsSummaryField } from './details-summary-field';
-export { DetailsDescriptionField as __experimentalDetailsDescriptionField } from './details-description-field';
export { WooProductMoreMenuItem as __experimentalWooProductMoreMenuItem } from './header';
export {
PluginHeaderItemModal as __experimentalPluginHeaderItemModal,
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
index 64753f99ec..a66b19fd03 100644
--- a/packages/js/product-editor/src/components/product-section-layout/style.scss
+++ b/packages/js/product-editor/src/components/product-section-layout/style.scss
@@ -12,8 +12,7 @@
padding: $gap-large;
.components-base-control,
- .components-dropdown,
- .woocommerce-rich-text-editor {
+ .components-dropdown {
&:not(:first-child):not(.components-radio-control) {
margin-top: $gap-large - $gap-smaller;
margin-bottom: 0;
diff --git a/packages/js/product-editor/src/constants.ts b/packages/js/product-editor/src/constants.ts
index 2f42e6afcb..0d79e4674e 100644
--- a/packages/js/product-editor/src/constants.ts
+++ b/packages/js/product-editor/src/constants.ts
@@ -49,8 +49,6 @@ export const VARIANT_INVENTORY_SECTION_ADVANCED_ID = `variant/${ INVENTORY_SECTI
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_DETAILS_SLUG = 'product-details';
-
export const PRODUCT_SCHEDULED_SALE_SLUG = 'product-scheduled-sale';
export const TRACKS_SOURCE = 'product-block-editor-v1';