From dc8a212c4e56fae08ad9cb697dd91d9cbe8c209d Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 10 Sep 2026 16:25:53 +0000 Subject: [PATCH 1/2] fix(dvz-ui): revert shared preview serializer, scope TCDICORE-601 fix to tabbed-posts PR #296's fix for TCDICORE-601 changed PreviewComponent.tsx (the shared postMessage serializer used by every embeddable block's editor preview) to comma-join any array attribute instead of JSON.stringify-ing it. That broke other blocks whose attributes are arrays of objects (e.g. `filters` consumed via `ff.forEach(f => ...)` in big-number, sankeychart, datalabel, data-paragraph, big-number-trend; map's `legendBreaks`), turning them into unparseable "[object Object],[object Object]" strings and producing "error parsing value:..." console errors. Revert PreviewComponent.tsx to unconditionally JSON.stringify object/array attributes, restoring pre-PR-296 behavior for all blocks. Reapply the original TCDICORE-601 fix scoped only to the tabbed-posts embeddable component: `categories` now arrives in the editor preview as a JSON-stringified string (e.g. "[5,7]") rather than a real array, so normalizedCategories detects a JSON-array-shaped string and converts it to the comma-separated format ("5,7") that PostProvider's REST query expects, matching the front-end BlockSave.js `categories.toString()` format. Other blocks (e.g. featuredtabs) are intentionally left untouched. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01Djs2dCDdodPfCVcoXjbL8c --- .../tabbed-posts-category-fix-scoped.md | 20 ++++++++++++++++ .../src/embeddable/tabbedposts/index.jsx | 23 ++++++++++++++++--- .../dvz-ui/src/layout/PreviewComponent.tsx | 4 +--- 3 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 .changeset/tabbed-posts-category-fix-scoped.md diff --git a/.changeset/tabbed-posts-category-fix-scoped.md b/.changeset/tabbed-posts-category-fix-scoped.md new file mode 100644 index 000000000..1ed005ce6 --- /dev/null +++ b/.changeset/tabbed-posts-category-fix-scoped.md @@ -0,0 +1,20 @@ +--- +"@devgateway/dvz-ui-react": patch +--- + +Revert the PR #296 fix for TCDICORE-601, which comma-joined all array/object +attributes in `PreviewComponent.tsx` before postMessage'ing them to the +block-editor preview iframe. That change was a shared choke point used by +every embeddable block, and it broke any block whose attribute is an array of +objects (e.g. `filters`, map `legendBreaks`) by turning it into an +unparseable `"[object Object],[object Object]"` string. + +`PreviewComponent.tsx` now always JSON-stringifies object/array attributes +again, restoring pre-PR-296 behavior for every block except Tabbed Posts. + +The original TCDICORE-601 problem — the Tabbed Posts editor preview sending +`categories` as `"[5,7]"` instead of the front-end's comma-separated `"5,7"` +— is now fixed locally inside the Tabbed Posts embeddable component +(`tabbedposts/index.jsx`), which detects a JSON-array-shaped `categories` +string and normalizes it to the comma-separated format the REST API expects, +without changing how any other block's attributes are serialized. diff --git a/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx b/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx index ca84c7f70..90f494655 100644 --- a/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx +++ b/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx @@ -270,9 +270,26 @@ const Wrapper = (props) => { editing = pageModuleProps.editing; } const locale = props.intl.locale; - const normalizedCategories = Array.isArray(categories) - ? categories.join(',').toString() - : categories; + // `categories` is a WP array attribute (e.g. [5, 7]). PostProvider/the REST API + // expects a comma-separated string ("5,7"), matching BlockSave.js's + // `categories.toString()` on the front end. + // In the block-editor preview, attributes are postMessage'd through + // PreviewComponent, which JSON-stringifies arrays/objects, so `categories` + // arrives here as the string "[5,7]" rather than a real array. Detect that + // JSON-array-shaped string and normalize it the same way. + let normalizedCategories = categories; + if (Array.isArray(categories)) { + normalizedCategories = categories.join(','); + } else if (typeof categories === 'string') { + try { + const parsedCategories = JSON.parse(categories); + if (Array.isArray(parsedCategories)) { + normalizedCategories = parsedCategories.join(','); + } + } catch (e) { + // Not JSON — already a plain string (e.g. "5,7"), use as-is. + } + } const scrollable = useScrolls === 'true'; const conditionalHeight = scrollable ? height : undefined; diff --git a/packages/dvz-ui/src/layout/PreviewComponent.tsx b/packages/dvz-ui/src/layout/PreviewComponent.tsx index 51be2cc5c..a0088b656 100644 --- a/packages/dvz-ui/src/layout/PreviewComponent.tsx +++ b/packages/dvz-ui/src/layout/PreviewComponent.tsx @@ -28,9 +28,7 @@ const PreviewComponentParameterParser = () => { const newParams: Record = { ...paramPropsRef.current }; Object.keys(data).forEach(k => { newParams["data-" + k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()] = - typeof data[k] === 'object' - ? (Array.isArray(data[k]) ? data[k].join(',') : JSON.stringify(data[k])) - : data[k]; + typeof data[k] === 'object' ? JSON.stringify(data[k]) : data[k]; }); setParamProps(newParams); } From 0cc41ca675b6f242f3af259c7af167374c98e379 Mon Sep 17 00:00:00 2001 From: Timothy Mugo Date: Thu, 10 Sep 2026 19:41:08 +0300 Subject: [PATCH 2/2] chore: remove unused comments --- packages/dvz-ui/src/embeddable/tabbedposts/index.jsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx b/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx index 90f494655..35a688385 100644 --- a/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx +++ b/packages/dvz-ui/src/embeddable/tabbedposts/index.jsx @@ -269,14 +269,7 @@ const Wrapper = (props) => { previewMode = pageModuleProps.previewMode; editing = pageModuleProps.editing; } - const locale = props.intl.locale; - // `categories` is a WP array attribute (e.g. [5, 7]). PostProvider/the REST API - // expects a comma-separated string ("5,7"), matching BlockSave.js's - // `categories.toString()` on the front end. - // In the block-editor preview, attributes are postMessage'd through - // PreviewComponent, which JSON-stringifies arrays/objects, so `categories` - // arrives here as the string "[5,7]" rather than a real array. Detect that - // JSON-array-shaped string and normalize it the same way. + const locale = props.intl.locale; let normalizedCategories = categories; if (Array.isArray(categories)) { normalizedCategories = categories.join(',');