🇮🇱Israel @heyyo

I remember I had trouble to add a SDC without prop, until I found it's not enough to not add the props key, but instead we need to declare an empty props structure.

https://www.drupal.org/docs/develop/theming-drupal/using-single-director... →

props:
  type: object
  properties: {}

Maybe that's the issue @Laurii encountered

I don't think we should assume, uploading an image, means creates a code component.
This image could be used as an example of creating a page, or even used in an existing component.
What about to force prompt text, if there is an uploaded image ?

Similar to this issue #3511093

It looks like, work in this previous issue wasn't enough
https://www.drupal.org/project/experience_builder/issues/3528368 🐛 Add warning if XB is installed from drupal config but without xb_stark Active

I tried to make this user guide as interesting as I could for an XB beginner.

Feel free to improve it, and correct all my language mistakes 📝

heyyo → made their first commit to this issue’s fork.

I can share my experience with Extend (modules listing).
In my configuration, with Gin as admin theme, the INP is really bad with latest Drupal 11.X.
The search input could be completely stuck for 20 seconds, just after typing one extra character or removing one. I did the same test with Claro it went down to 2 or 3 seconds stuck, still really bad.
With this patch, search for module is instant, but initial INP is little bit high. ( with the patch I made, before knowing about this issue 🐛 Extend: Filter modules list by search strings could be stuck Active , the first INP was good too, to be checked)

• 2 Videos attached with Gin about modules filtering without patch and with patch.
• And one video containing all parts listed by Nic also in Gin module (5.0.3). All my tests were succesfull

I confirm similar speed with the patch of the issue you mentioned and my patch. Both are filtering instantly.
I tested in Claro and in Gin too, where this slowness is really more visible ( 2s for Claro, 18s for Gin when adding/removing character)
So no doubt my issue could be closed.

Sure on it

In this video I'm showing before vs after patch (from 0:50s)
its' look like I do nothing in the video after typing gro but I typed on on my keyboard, Drupal is just stuck from more or less 10 to 18 seconds

heyyo → created an issue.

I confirm, that margin-top/margin-block issue is fixed with the other issue:
https://www.drupal.org/project/experience_builder/issues/3534490 🐛 Cannot use `h-screen` from Tailwind with XB Active

Your MR definitely helps !
3 times faster 🔥

Yes my test was against 0.x, but after I saw another issue on the same bug, didn't test it yet.
https://www.drupal.org/project/experience_builder/issues/3534490 🐛 Cannot use `h-screen` from Tailwind with XB Active

Can you share that SDC (or point me towards somewhere it lives in a repo)?

It's a local playground for now, still unsure to contribute.
But it's a custom theme with daisyui/tailwind, and this bug appears just by applying the tailwind class mt-{y} or my-{y}
which sets only margin-top or margin-block, nothing related to height of the container.
I didn't test outside tailwind, to see we have the same issue

I wonder if we can make use of a meta property on slots in the definition to flag a slot as inline?

Will be great

In terms of the space, this is needed for the sake of drop-targets. I guess we could hide that unless something was being dragged but that might make dropping difficult if when drag start occurs we added back collapsed/empty slots

When editing, for sure we need to keep displaying slots.
But my issue is about after clicking Preview, in this case I think empty slots shouldn't take any space

I experienced the same bug, just by setting margin-top, or margin-block (but not margin-bottom).
Video attached.

heyyo → created an issue.

@heyyo That is incredibly fast testing! 😮 Thanks!

You are the superman, man ! @wim
You are in all issues, commenting, testing, coding, patching, reviewing always nicely and with humor

Looks like I missed a bunch of cases; sorry — absolutely didn’t mean to waste your time 🫣

Waste my time ? When you and all developers are making such a great product, giving from your time for so many intense days.

🎤 is back to @laurii 😂

Applying the 2 patches on last dev of XB(#e9d0d1c6d)
- https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...
- https://git.drupalcode.org/project/experience_builder/-/merge_requests/1...

Rebuild of the bundle + clear cache of drupal + disable cache in browser console

1. Rename a prop from paddingInline to padding_inline + drush cr
Viewing or editing a page using previous prop name we got the error:
`OutOfRangeException

'padding_inline' is not a prop on the component 'Single-directory component: Linno Container'.`

  private function getDefaultStaticPropSource(string $prop_name, bool $validate_prop_name = TRUE): StaticPropSource {
    assert(isset($this->configuration['prop_field_definitions']));
    assert(is_array($this->configuration['prop_field_definitions']));
    $component_schema = $this->getSdcPlugin()->metadata->schema ?? [];
    if ($validate_prop_name && !array_key_exists($prop_name, $component_schema['properties'] ?? [])) {
      throw new \OutOfRangeException(sprintf("'%s' is not a prop on the component '%s'.", $prop_name, $this->getComponentDescription()));
    }

2. Deleting a prop from a SDC with content using this prop + drush cr
Exact same error than in 1.

3. Adding a new prop to an existing SDC with existing content + drush cr
- Visiting a previous page, the page is ok
- Editing the page, then selecting the SDC to edit: impossible we got the error "An unexpected error has occurred while rendering the component's form. SyntaxError: Unexpected token '<', "

heyyo → created an issue.

It looks like it's working great 🎉

Thanks a lot for the quick work in this issue, I'm offline for now, I'll check tomorrow 🙏

I also got an error, when adding a new prop(enum) to an existing sdc.
It's impossible to edit previous version of this same sdc.

Error in drupal logs when we want to edit this SDC:
Path: /xb/api/v0/form/component-instance/xb_page/10
Message:
TypeError: array_key_exists(): Argument #2 ($array) must be of type array, null given in array_key_exists() (line 151 of /var/www/html/web/modules/contrib/experience_builder/src/Plugin/ExperienceBuilder/ComponentSource/GeneratedFieldExplicitInputUxComponentSourceBase.php).

Is there any workaround ? except recreating the page using it ?

heyyo → created an issue.

Another one which surprised me, was the paste of text into the chat with CTRL+V. If a component was copied previously, instead of pasting the text, it pastes the component into the viewport.
Workaround, use the paste from contextual menu(right click)

heyyo → created an issue.

griffynh → credited heyyo → .

My idea is to regenerate response only if prop is not required and invalid enum value

If enums prop is not required, maybe we can just removed non valid option, instead of regenerating the response again, also we can enter into infinite loop if LLM is stubborn 😄

right payload is ok, so backend issue.

I just checked, the POST request xb/api/v0/config/pattern doesn't contain the full tree of the selected component.

I also saw this issue outside xb-demo, and I didn't have any region enabled in my theme to be managed by XB.

And not a bug, but more a feature request, today it's possible to insert SDC, but what about blocks and patterns (sections) ?
It will be a great addition if we were able to place a section, and let the LLM to fill existing props according prompt, should decrease unexpected results of llm

A more problematic issue, sometimes LLM will set value of enums which doesn't exist, so it will trigger an error in XB to the impossibility to render the sdc

Another issue I encountered was with SDC which has multiple slots.
If in the prompt, we specify to insert components inside a slot by providing it's name, the LLM will always insert the SDC into the first slot.
Following the advice of Akhil to better understand what's the going on, prompting something like insert a button in all slots of a specified component will do work.

I suppose the instructions given to LLM should be improved, but I have to mention it doesn't happen all the time.
I don't even remember which prompt I used to obtain such behavior, maybe also related to the abilities of the LLM picked.

I also opened a child issue regarding the impossibility to set link for a button component for example or src of an image.

🐛 Impossible to set a URL or SRC of an SDC with AI Active

heyyo → created an issue.

Getting this error sometimes

Error: Call to a member function getReadableOutput() on null in Drupal\xb_ai\Controller\XbBuilder->render() (line 219 of /var/www/html/web/modules/contrib/experience_builder/modules/xb_ai/src/Controller/XbBuilder.php).

Testing extensively AI capability, it's getting really impressive !

I found in the instructions, something incorrect regarding slots.

If a component has `slots`, you **MUST** fill those slots with valid, appropriate child components. **There can be no empty slots.** Decompose complex requests into a logical hierarchy of parent and child components.

LLM are not forced to fill slot, it's completely valid to have empty slot, I'm not even sure we can set slot to be required.

For example I have a heading component that has optional 'Badge' slot to add a badge at the end.

Confirmed, just tested last MT, working perfectly !
Modifying a boolean, doesn't affect other boolean anymore.
And exiting form, and returning doesn't set all boolean to true anymore.
So it's working great, I will be able to play with slider container with 30 props, and maybe 25 boolean :-)

I really think I did rebuilt the bundle, but you never know. I'll try to recheck in 2/3 hours from now.
The components I'm using are custom ones not available online, I may release the custom them based mainly on daisyUI and tailwind.
But I did reproduce the same bug with 2 different SDC.

Hi ,
I'm trying to test this boolean prop, it works better, but it looks like there is still an issue, when mutiple boolean exist in the sdc.
Changing value to boolean, will change other boolean too...
Video attached to show this weird bug

This morning around 6AM UTC time, I pulled last commit on 0.x after larowlan requested me to do so.
The bug was still present. I don't know the exact commit, I pulled another time after that.

I'm not sure I really know how it should behave, but it's quite critical in my mind.

We can't ask to clients to delete all their content using old sdc components, and recreate them.

But after my discussion with larowlan, I had the impression that larowlan thought it was possible to handle this scenario too with component versions. After that, it's above my knowledge :-)

Just to inform you, even with newer commit of XB(#a3799e20d3) I have the same exact issue using OpenAI
With those versions:

        "drupal/ai": "^1.1",
        "drupal/ai_agents": "^1.1",
        "drupal/ai_provider_openai": "^1.1",

On this callback /xb/api/v0/config/js_component, I received this status code 422 Unprocessable Entity

With this error:
{
"errors": [
{
"detail": "Unable to find class\/interface \u0022function\u0022 specified in the prop \u0022onButtonClick\u0022 for the component \u0022experience_builder:herobanner\u0022.",
"source": {
"pointer": ""
}
},
{
"detail": "The value you selected is not a valid choice.",
"source": {
"pointer": "props.onButtonClick.type"
}
}
]
}

After step debugging the code it shows the validation of ApiConfigControllers:validate fails because of the react component generated by OpenAI which contains an onButtonClick without declaring it...

heyyo → created an issue.

heyyo → created an issue.

heyyo → created an issue.

This latest change broke the possibility to select 'None' value from any select.
We got not this validation error: data must be equal to one of the allowed values

heyyo → created an issue.

Exact steps with latest dev:

0. Check the status property of the SDC Druplicon with drush, we see status: true
drush cget experience_builder.component.sdc.experience_builder.druplicon
1. Disable druplicon in UI : /admin/appearance/component.
2. check again the status property. As expected status turned now to false
You can also the SDC component is not available anymore in XB UI
drush cget experience_builder.component.sdc.experience_builder.druplicon
3. execute drush cr
4. check again the status property. Status turned back to true !
drush cget experience_builder.component.sdc.experience_builder.druplicon

heyyo → created an issue.

I want this closed as you do, don't worry 😛

I was happy to read that the boolean SDC issue has been fixed, but it looks like it didn't.
I suppose it was marked as duplicate by mistake, thinking the issue was for code components but it is for SDC components.

Thank you for your detailed explanation, makes totally sense.

Really nice design, and I see and will be able not to only resize the sidebar, but to also to close both sidebar and to minimize, and maximize the right one too :-)

One of a client didn't want to use XB for Article page because of this, he wanted to be able to write article in full page.

Some questions about this new UX which looks great !
1. Why it was an issue to have sidebars on top of canvas ? It was/is still possible to drag and zoom.
2. Will it be still possible to see desktop and mobile at same time ? It's quite handy to have both at the same time.
3. Any plan to make right sidebar (maybe left too) resizable ? I can image a prop with ckeditor could need lots of space for example

Thank you for pointing me to this Elements future functionality.

But I don't understand how it's related to my issue 🤔🙃 ?

If I understood correctly, Elements will be the base of bigger components, like image, button, heading, vidéo...

But how the organization of the props in the generated form of my SDC ( here a slider) is related to those special components.
I'm trying to follow you but I'm lost 😂

heyyo → created an issue.

By default XB adds a 'None' value to the SELECT OPTIONS, which is great.
But it doesn't seem possible to set this None value as the default value.

What I tried:
- Not to add examples at all
- examples: []
- examples: [NULL]
- examples: ['']

All of them return the same error
Twig\Error\RuntimeError: An exception has been thrown during the rendering of a template ("[linno_theme:select/select] Does not have a value in the enumeration ["ratio-32x9","ratio-21x9"]. The provided value is: ""."). in Twig\Template->yield() (line 1 of themes/custom/linno_theme/components/select/select.twig).

heyyo → created an issue.

larowlan → credited heyyo → .

Looks good to me.
Even if I don't understand why we need example(s) for enum, which already provides a fixed list of options for the select...

I edited the code example for the color format, where the default colors palette should probably be an enum and not several default values.

Also not sure which data format would be the best adapted for named steps in a range.
Enum won't bet enough, we need key/value options.

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

heyyo → created an issue.

Wouah 230X faster, impressive, I will have to try this !

heyyo → created an issue.

kristen pol → credited heyyo → .

kristen pol → credited heyyo → .

heyyo → changed the visibility of the branch 3511654-demo-homepage-recipe to hidden.

heyyo → changed the visibility of the branch 3511654- to hidden.

heyyo → made their first commit to this issue’s fork.

kristen pol → credited heyyo → .

Implemented in this latest MR.
Responsive SDC component Footer Panel, with 3 slots: left, right, bottom

Implemented in this latest MR.
Responsive SDC component Footer Panel, with 3 slots: left, right, bottom

heyyo → made their first commit to this issue’s fork.

I understood why applying applying xb-demo recipe during the site install shows errors related to components not found.

xb-demo recipe has a dependency on starshot_demo_content, which provides the demo page. But the starshot_demo theme which contains the needed SDC components is not yet installed and not yet the active theme, so components are not available yet.

1. So removing this dependency in xb-demo

recipes:
  - starshot_demo_content

2. Then ddev drush cr, to make SDC components available. Any other way ?
3. Then apply ddev drush recipe ../recipes/starshot_demo_content

Weird.
Maybe ddev version issue ?
I'm using ddev version v1.24.3.

I didn't test on D11.

This is the command I just used to test with latest xb-demo repo.

mkdir xb-demo-new
cd xb-demo-new
ddev config --project-type=drupal11 --docroot=web
ddev composer create phenaproxima/xb-demo --stability=dev
ddev start

cd web/themes/contrib/demo_design_system
git remote add demo_design_system-3511654 https://git.drupalcode.org/issue/demo_design_system-3511654.git
git fetch demo_design_system-3511654
git checkout '3511654-convert-sdds-page--front.html.twig'

ddev drush site:install --account-name=admin --account-pass=admin -y
ddev drush cr
ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
ddev drush cr

The last part should not be necessary, but if not, the installation of xb-demo recipe doesn't find starshot_demo sdc components not really sure why. So as workaround, clearing the cache and reapply starshot_demo_content recipe does the trick.

ddev drush cr
ddev drush recipe themes/contrib/demo_design_system/starshot_demo/recipes/starshot_demo_content/
ddev drush cr

kristen pol → credited heyyo → .

I tried to test it. I'm not sure how everything should work.

1. One new bug, adding an image for Hero , and the publishing the page, the image disappear, and we have error message inside the settings of this SDC. See screenshot
2. In the above section, I added the new SDC Header Panel, in the fist column I tried to add branding block, but it's not present, not sure how to make it available.
3. The navigation block is available but doesn't show anything once included. Not sure what's need to be done to make it work
4. Small issue button tertiary is not right color
5. Some images have wrong path. See screenshot

Here what I achieved so far

The tricky part was to figuring out which media target id for each component image (components.input).
The export of XB page, especially media inside component is for now not supported by default_content module ✨ Experience Builder support Active .

In the MR I don't use article, but xb_page :-)

heyyo → created an issue. See original summary → .