From e5175f488bf8ba6d7932483d3b85b8d0dacc2161 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Oct 2026 07:01:41 +0000
Subject: [PATCH 1/4] feat(field-toolbar): show the Edit button for Taxonomy
 fields

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PhGzeBieWdXYBvXLHnWDDf
---
 .../components/__test__/fieldToolbar.test.tsx | 54 +++++++++++++++++++
 .../components/icons/fields/index.ts          |  1 +
 src/visualBuilder/utils/constants.ts          |  1 +
 3 files changed, 56 insertions(+)

diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
index 4d8ccbea..dc479f22 100644
--- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -796,4 +796,58 @@ describe("FieldToolbarComponent", () => {
             ).toBeDisabled();
         });
     });
+
+    describe("Taxonomy field toolbar", () => {
+        const taxonomySchema = {
+            data_type: "taxonomy",
+            display_name: "Taxonomies",
+            uid: "taxonomies",
+            multiple: true,
+            mandatory: false,
+            non_localizable: false,
+            unique: false,
+            taxonomies: [{ taxonomy_uid: "colors", non_localizable: false }],
+        } as unknown as ISchemaFieldMap;
+
+        const termMetadata: CslpData = {
+            ...mockMultipleFieldMetadata,
+            fieldPath: "taxonomies",
+            fieldPathWithIndex: "taxonomies",
+            multipleFieldMetadata: {
+                index: 1,
+                parentDetails: {
+                    parentPath: "taxonomies",
+                    parentCslpValue: "entry.ct.en-us",
+                },
+            },
+            instance: { fieldPathWithIndex: "taxonomies.1" },
+        };
+
+        test("renders the Edit button for a Taxonomy field", async () => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(taxonomySchema)
+            );
+            const { container } = render(
+                <FieldToolbarComponent
+                    eventDetails={{
+                        ...mockEventDetails,
+                        fieldMetadata: termMetadata,
+                    }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+
+            expect(
+                await findByTestId(
+                    container,
+                    "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button",
+                    {},
+                    { timeout: 1000 }
+                )
+            ).toBeInTheDocument();
+        });
+    });
 });
diff --git a/src/visualBuilder/components/icons/fields/index.ts b/src/visualBuilder/components/icons/fields/index.ts
index 3bdcdfd9..21428463 100644
--- a/src/visualBuilder/components/icons/fields/index.ts
+++ b/src/visualBuilder/components/icons/fields/index.ts
@@ -11,4 +11,5 @@ export const fieldIcons: Partial<Record<FieldDataType, React.FC>> = {
     isodate: EditIcon,
     url: EditIcon,
     select: EditIcon,
+    taxonomy: EditIcon,
 };
diff --git a/src/visualBuilder/utils/constants.ts b/src/visualBuilder/utils/constants.ts
index 82576dea..5ecee1d6 100644
--- a/src/visualBuilder/utils/constants.ts
+++ b/src/visualBuilder/utils/constants.ts
@@ -46,6 +46,7 @@ export const ALLOWED_MODAL_EDITABLE_FIELD: FieldDataType[] = [
     FieldDataType.ISODATE,
     FieldDataType.URL,
     FieldDataType.SELECT,
+    FieldDataType.TAXONOMY,
 ];
 
 export const ALLOWED_REPLACE_FIELDS: FieldDataType[] = [

From a84b2c21de75564e182cb521fd37853786dc3226 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Oct 2026 07:06:41 +0000
Subject: [PATCH 2/4] feat(field-toolbar): give Taxonomy fields the whole-field
 toolbar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PhGzeBieWdXYBvXLHnWDDf
---
 src/visualBuilder/components/FieldToolbar.tsx | 16 ++--
 .../components/__test__/fieldToolbar.test.tsx | 90 +++++++++++++++++++
 .../__test__/handleIndividualFields.test.ts   | 17 ++++
 3 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index a72b6538..dc5318a9 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -151,7 +151,7 @@ function FieldToolbarComponent(
     let Icon = null;
     let fieldType = null;
     let isWholeMultipleField = false;
-    let isMultipleSelect = false;
+    let isEditedAsOneValue = false;
     const APP_LIST_MIN_WIDTH = 230;
 
     let disableFieldActions = false;
@@ -196,10 +196,12 @@ function FieldToolbarComponent(
         isCustomFieldWholeMultiple =
             fieldType === FieldDataType.CUSTOM_FIELD && isMultiple && isWholeMultipleField;
 
-        // A multiple Select edits as one field, so a value click gets the whole-field toolbar.
-        isMultipleSelect = fieldType === FieldDataType.SELECT && isMultiple;
+        // A multiple Select or Taxonomy edits as one value, so a value click gets the whole-field toolbar.
+        isEditedAsOneValue =
+            (fieldType === FieldDataType.SELECT && isMultiple) ||
+            fieldType === FieldDataType.TAXONOMY;
 
-        if (isCustomFieldWholeMultiple || isMultipleSelect) {
+        if (isCustomFieldWholeMultiple || isEditedAsOneValue) {
             isModalEditable = true;
         } else {
             isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
@@ -263,9 +265,9 @@ function FieldToolbarComponent(
                 // propagation to be stopped, should ideally only attach onClick to fieldpath dropdown
                 e.preventDefault();
                 e.stopPropagation();
-                // Multiple Select is edited as one value; a value click must not bind to its index
+                // Multiple Select and Taxonomy are edited as one value; a value click must not bind to its index
                 handleEdit(
-                    isMultipleSelect
+                    isEditedAsOneValue
                         ? {
                               ...fieldMetadata,
                               instance: {
@@ -514,7 +516,7 @@ function FieldToolbarComponent(
                                 disabled={disableFieldActions}
                             />
                         ) : null}
-                        {isMultiple && !isWholeMultipleField && !isMultipleSelect ? (
+                        {isMultiple && !isWholeMultipleField && !isEditedAsOneValue ? (
                             <>
                                 <button
                                     data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button"
diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
index dc479f22..96180609 100644
--- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -849,5 +849,95 @@ describe("FieldToolbarComponent", () => {
                 )
             ).toBeInTheDocument();
         });
+
+        const TAX_EDIT_ID =
+            "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button";
+        const TAX_PREFIX =
+            "visual-builder__focused-toolbar__multiple-field-toolbar";
+
+        const renderTaxonomy = async (fieldMetadata: CslpData) => {
+            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
+                Promise.resolve(taxonomySchema)
+            );
+            const view = render(
+                <FieldToolbarComponent
+                    eventDetails={{ ...mockEventDetails, fieldMetadata }}
+                    hideOverlay={vi.fn()}
+                />
+            );
+            await act(async () => {
+                await new Promise((r) => setTimeout(r, 0));
+            });
+            return view;
+        };
+
+        const expectNoMoveOrDelete = (container: HTMLElement) => {
+            for (const id of ["move-left", "move-right", "delete"]) {
+                expect(
+                    container.querySelector(
+                        `[data-testid="${TAX_PREFIX}__${id}-button"]`
+                    )
+                ).not.toBeInTheDocument();
+            }
+        };
+
+        test("term click shows edit without move or delete", async () => {
+            const { container } = await renderTaxonomy(termMetadata);
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeInTheDocument();
+            expectNoMoveOrDelete(container);
+        });
+
+        test("whole-list click shows edit without move or delete", async () => {
+            const { container } = await renderTaxonomy({
+                ...termMetadata,
+                multipleFieldMetadata: { index: -1, parentDetails: null },
+                instance: { fieldPathWithIndex: "taxonomies" },
+            });
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeInTheDocument();
+            expectNoMoveOrDelete(container);
+        });
+
+        test("term click sends whole-field metadata on edit", async () => {
+            const { container } = await renderTaxonomy(termMetadata);
+
+            fireEvent.click(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            );
+
+            expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,
+                {
+                    fieldMetadata: {
+                        ...termMetadata,
+                        instance: { fieldPathWithIndex: "taxonomies" },
+                        multipleFieldMetadata: {
+                            ...termMetadata.multipleFieldMetadata,
+                            index: -1,
+                        },
+                    },
+                }
+            );
+            expect(termMetadata.instance.fieldPathWithIndex).toBe(
+                "taxonomies.1"
+            );
+        });
+
+        test("edit button is disabled when the taxonomy field is disabled", async () => {
+            vi.mocked(isFieldDisabled).mockReturnValue({
+                isDisabled: true,
+                reason: "",
+            } as ReturnType<typeof isFieldDisabled>);
+            const { container } = await renderTaxonomy(termMetadata);
+
+            expect(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            ).toBeDisabled();
+        });
     });
 });
diff --git a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
index fee6716c..5a2f7514 100644
--- a/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
+++ b/src/visualBuilder/utils/__test__/handleIndividualFields.test.ts
@@ -176,6 +176,23 @@ describe("handleIndividualFields", () => {
         expect(handleAddButtonsForMultiple).not.toHaveBeenCalled();
     });
 
+    it("still adds instance buttons for a multiple Taxonomy field", async () => {
+        const fieldSchema = {
+            data_type: "taxonomy",
+            multiple: true,
+            taxonomies: [{ taxonomy_uid: "colors" }],
+        };
+
+        (FieldSchemaMap.getFieldSchema as Mock).mockResolvedValue(fieldSchema);
+        (getFieldData as Mock).mockResolvedValue([{ term_uid: "red" }]);
+        (getFieldType as Mock).mockReturnValue(FieldDataType.TAXONOMY);
+        (isFieldDisabled as Mock).mockReturnValue({ isDisabled: false });
+
+        await handleIndividualFields(eventDetails, elements);
+
+        expect(handleAddButtonsForMultiple).toHaveBeenCalled();
+    });
+
     it("still adds instance buttons for a multiple single-line text", async () => {
         const fieldSchema = {
             data_type: "text",

From 9b34a1d09119d56347a220fc08d4e5277d3c870f Mon Sep 17 00:00:00 2001
From: SahilCs15 <sahil.chalke@contentstack.com>
Date: Wed, 28 Oct 2026 12:58:25 +0530
Subject: [PATCH 3/4] refactor(field-toolbar): split isEditedAsOneValue into
 isMultipleSelect and isTaxonomyField

---
 src/visualBuilder/components/FieldToolbar.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index dc5318a9..82007f6b 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -151,7 +151,8 @@ function FieldToolbarComponent(
     let Icon = null;
     let fieldType = null;
     let isWholeMultipleField = false;
-    let isEditedAsOneValue = false;
+    let isMultipleSelect = false;
+    let isTaxonomyField = false;
     const APP_LIST_MIN_WIDTH = 230;
 
     let disableFieldActions = false;
@@ -197,11 +198,10 @@ function FieldToolbarComponent(
             fieldType === FieldDataType.CUSTOM_FIELD && isMultiple && isWholeMultipleField;
 
         // A multiple Select or Taxonomy edits as one value, so a value click gets the whole-field toolbar.
-        isEditedAsOneValue =
-            (fieldType === FieldDataType.SELECT && isMultiple) ||
-            fieldType === FieldDataType.TAXONOMY;
+        isMultipleSelect = fieldType === FieldDataType.SELECT && isMultiple;
+        isTaxonomyField = fieldType === FieldDataType.TAXONOMY;
 
-        if (isCustomFieldWholeMultiple || isEditedAsOneValue) {
+        if (isCustomFieldWholeMultiple || isMultipleSelect || isTaxonomyField) {
             isModalEditable = true;
         } else {
             isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType) && !isWholeMultipleField;
@@ -267,7 +267,7 @@ function FieldToolbarComponent(
                 e.stopPropagation();
                 // Multiple Select and Taxonomy are edited as one value; a value click must not bind to its index
                 handleEdit(
-                    isEditedAsOneValue
+                    isMultipleSelect || isTaxonomyField
                         ? {
                               ...fieldMetadata,
                               instance: {
@@ -516,7 +516,7 @@ function FieldToolbarComponent(
                                 disabled={disableFieldActions}
                             />
                         ) : null}
-                        {isMultiple && !isWholeMultipleField && !isEditedAsOneValue ? (
+                        {isMultiple && !isWholeMultipleField && !isMultipleSelect && !isTaxonomyField ? (
                             <>
                                 <button
                                     data-testid="visual-builder__focused-toolbar__multiple-field-toolbar__move-left-button"

From 2d2036c05ec48b10cb853a1e1aee09e1a536b079 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Oct 2026 07:38:12 +0000
Subject: [PATCH 4/4] fix(field-toolbar): explain Taxonomy add buttons and tidy
 Taxonomy toolbar tests

Note why Select skips canvas add buttons while Taxonomy keeps them, and
that Taxonomy is always multiple. Drop a duplicate Edit button test, keep
the Taxonomy test setup at the top of its block, and cover a Taxonomy
inside a modular block keeping its parent index on Edit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PhGzeCtGiaD8r2BWLkqEWx
---
 src/visualBuilder/components/FieldToolbar.tsx |  1 +
 .../components/__test__/fieldToolbar.test.tsx | 70 ++++++++++++-------
 .../utils/handleIndividualFields.ts           |  3 +-
 3 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/visualBuilder/components/FieldToolbar.tsx b/src/visualBuilder/components/FieldToolbar.tsx
index 82007f6b..c4196cb2 100644
--- a/src/visualBuilder/components/FieldToolbar.tsx
+++ b/src/visualBuilder/components/FieldToolbar.tsx
@@ -199,6 +199,7 @@ function FieldToolbarComponent(
 
         // A multiple Select or Taxonomy edits as one value, so a value click gets the whole-field toolbar.
         isMultipleSelect = fieldType === FieldDataType.SELECT && isMultiple;
+        // Taxonomy is always multiple, so unlike Select no isMultiple check is needed.
         isTaxonomyField = fieldType === FieldDataType.TAXONOMY;
 
         if (isCustomFieldWholeMultiple || isMultipleSelect || isTaxonomyField) {
diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
index 96180609..8105623d 100644
--- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
+++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx
@@ -823,33 +823,6 @@ describe("FieldToolbarComponent", () => {
             instance: { fieldPathWithIndex: "taxonomies.1" },
         };
 
-        test("renders the Edit button for a Taxonomy field", async () => {
-            vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() =>
-                Promise.resolve(taxonomySchema)
-            );
-            const { container } = render(
-                <FieldToolbarComponent
-                    eventDetails={{
-                        ...mockEventDetails,
-                        fieldMetadata: termMetadata,
-                    }}
-                    hideOverlay={vi.fn()}
-                />
-            );
-            await act(async () => {
-                await new Promise((r) => setTimeout(r, 0));
-            });
-
-            expect(
-                await findByTestId(
-                    container,
-                    "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button",
-                    {},
-                    { timeout: 1000 }
-                )
-            ).toBeInTheDocument();
-        });
-
         const TAX_EDIT_ID =
             "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button";
         const TAX_PREFIX =
@@ -890,6 +863,49 @@ describe("FieldToolbarComponent", () => {
             expectNoMoveOrDelete(container);
         });
 
+        test("term click inside a modular block keeps the parent index on edit", async () => {
+            const blockTermMetadata: CslpData = {
+                ...termMetadata,
+                fieldPath: "blocks.section.taxonomies",
+                fieldPathWithIndex: "blocks.0.section.taxonomies",
+                multipleFieldMetadata: {
+                    index: 2,
+                    parentDetails: {
+                        parentPath: "blocks.0.section.taxonomies",
+                        parentCslpValue: "entry.ct.en-us",
+                    },
+                },
+                instance: {
+                    fieldPathWithIndex: "blocks.0.section.taxonomies.2",
+                },
+            };
+            const { container } = await renderTaxonomy(blockTermMetadata);
+
+            fireEvent.click(
+                await findByTestId(container, TAX_EDIT_ID, {}, { timeout: 1000 })
+            );
+
+            expect(visualBuilderPostMessage?.send).toHaveBeenCalledWith(
+                VisualBuilderPostMessageEvents.OPEN_FIELD_EDIT_MODAL,
+                {
+                    fieldMetadata: {
+                        ...blockTermMetadata,
+                        instance: {
+                            fieldPathWithIndex: "blocks.0.section.taxonomies",
+                        },
+                        multipleFieldMetadata: {
+                            ...blockTermMetadata.multipleFieldMetadata,
+                            index: -1,
+                        },
+                    },
+                }
+            );
+            expect(blockTermMetadata.instance.fieldPathWithIndex).toBe(
+                "blocks.0.section.taxonomies.2"
+            );
+            expect(blockTermMetadata.multipleFieldMetadata.index).toBe(2);
+        });
+
         test("whole-list click shows edit without move or delete", async () => {
             const { container } = await renderTaxonomy({
                 ...termMetadata,
diff --git a/src/visualBuilder/utils/handleIndividualFields.ts b/src/visualBuilder/utils/handleIndividualFields.ts
index 05b0d4ba..953cdf8d 100644
--- a/src/visualBuilder/utils/handleIndividualFields.ts
+++ b/src/visualBuilder/utils/handleIndividualFields.ts
@@ -70,7 +70,8 @@ export async function handleIndividualFields(
         fieldType
     );
 
-    // A canvas add button patches an { $fieldValue } item into the Select's plain array
+    // Select skips add buttons: they would patch a { $fieldValue } item into its plain array.
+    // Taxonomy keeps them: the editor opens its term picker on add-instance.
     if (isFieldMultiple(fieldSchema) && fieldType !== FieldDataType.SELECT) {
         if (!isCustomFieldMultipleInstance(fieldSchema, fieldMetadata) && lastEditedField !== editableElement) {
             const addButtonLabel =