Redux support for ImageWidget: `[image] String value found, but an object is required`

I see now this is a core error. If we are supposed to be able to do this, I guess we'd have to have a patch that worked that we can use since it won't make it into core before Barcelona.

If we are not supposed to do this or this can't be addressed until after Barcelona, I would assume that all images in components must be a slot for now... perhaps okay for the demo, but that's not always the best UX as it would depend on the component.

I'm wondering if this would be fixed by 📌 Fix the visually broken "image" component instance: use FileUriItem's computed `url` property, not the stored `value` property Active or if this something in the client side in the vein of 🌱 [META] Redux sync on ALL prop types, not just ones with a single [value] property Active ?

Lauri thinks this is a bug.

from slack:

I’m hesitant to move forward until this is fixed since, if it’s not fixed, it changes our approach.

Precise STR would help 🙏 Better yet, when you reproduce it, look in the network inspector at the request body for the last request to /api/preview/…. Find the entry for image and you'll see exactly what the value is that is being sent for it. That'll determine where the root cause lies: back or front end.

wim leers → credited tedbow → .

Figured out the root cause while pairing with @tedbow!

I figured out the root cause: this happens when uploading a new image using the ImageWidget.

There simply is no Redux support yet for ImageWidget. That's what 🌱 [META] Redux sync on ALL prop types, not just ones with a single [value] property Active is for.

As of yesterday, 📌 Media Library integration (includes introducing a new main content renderer/`_wrapper_format`) Fixed landed and introduced hardcoded special support for MediaLibraryWidget, with experience_builder_preprocess_media_library_item__widget() generating a data-media-file attribute containing the updated field properties.

Phased solution:

1. IMMEDIATE WORK-AROUND: Just install the Media Library module and use the Media Library Widget 👍
2. MR here: introduce similar behavior for ImageWidget, and piggy-back on what #3454173 introduced for Media.
3. Long-term: generic solution in 🌱 [META] Redux sync on ALL prop types, not just ones with a single [value] property Active .

MR incoming.

Note: AFAICT this will need to call ImageItem::preSave() for it to work, which is called by massageFormValuesTemporaryRemoveThisExclamationExclamationExclamation(). But that is only called upon actually saving an entity, and ever since 🐛 Unable to save node article form — remove obsolete TwoTerribleTextAreasWidget + fix duplicate `XB:image` SDC Fixed , that's not called at all anymore.

YouTube is still processing but here's a screen recording:

https://youtu.be/Qt_9atfSoks

Steps to reproduce

• Update demo_design_system (I've added the test component)
• Delete XB component config and clear cache
• Drag "Testing title with image" component into desktop area
• Try to change the title on the sidebar

I have the media library installed already so how does that work around this? I am missing something

Discussed with @kristen pol and she mentioned that the workaround from #10 to install Media Library is not addressing this for her. It's also visible in the video posted in #14 that Media Library has been enabled.

I was able to reproduce this locally with the steps from #14 even with Media Library enabled.

In 🌱 [META] Redux sync on ALL prop types, not just ones with a single [value] property Active I am working on a holistic solution that will likely address what is reported here + expanding support for many previously unsupported prop/field types. What was reported here requires functionality that hasn't been built yet - but it is actively being worked on.

Hi, I know this issue is postponed for now

but while working on a different issue 3472900 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Needs review , I did run into this too and I was able to found some interesting things

setFormState was settings image to '' (empty string) because the prior state had an entry xb_component_props[9acb612e-748c-4f69-b07e-66b95e5d173e][image][media_library_selection]

Javascript while running the below, replace the entry image with image: ''

          setFormState((prior: object) => {
            // Use the "checked" property when present so the value is boolean.
            // Additional prop types might require similar type conversion so
            // don't be shocked if it becomes trickier than just this ternary.
            const newState = { ...prior, [target.name]: value };
            storeUpdateCallback(newState);
            return newState;
          });

There is a fix for this issue here:

🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Needs review

along with a fix for textarea props as well.

📌 Redux Sync all single-value types in the SDC test all props form Fixed landed, so I think @bnjmnm will soon(ish) get to this 👍

Should it be put back to active @wim leers?

@kristen pol No, see @bnjmnm's comment at #18. It's assigned to him. He'll reopen this when relevant. He's actively working on this space 👍

Using MR from 🐛 XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading Needs review ...

It took me a few tries, but I made it through all components except the last one in one go... I had to side step some issues (e.g. dragging certain things, can't upload), but this is SO DEMOABLE if you know what *not* to do :D

https://youtu.be/SAir2OxwMS4