Unable to save node article form — remove obsolete TwoTerribleTextAreasWidget + fix duplicate `XB:image` SDC

In the Components prop editor, some required fields don’t have values, which is why the error occurs.

Did you git pull and then reinstall XB using the documented steps?

Tests are passing, and the tests explicitly test those steps.

I am facing this on a fresh install, also when I am trying to upload an image then I get an error:

TypeError: str_starts_with(): Argument #1 ($haystack) must be of type string, null given in str_starts_with() (line 255 of /var/www/html/modules/experience_builder/src/Plugin/Field/FieldWidget/TwoTerribleTextAreasWidget.php).

here is the Stack trace

#0 /var/www/html/modules/experience_builder/src/Plugin/Field/FieldWidget/TwoTerribleTextAreasWidget.php(255): str_starts_with()
#1 /var/www/html/core/lib/Drupal/Core/Field/WidgetBase.php(505): Drupal\experience_builder\Plugin\Field\FieldWidget\TwoTerribleTextAreasWidget->massageFormValues()
#2 /var/www/html/core/lib/Drupal/Core/Entity/Entity/EntityFormDisplay.php(244): Drupal\Core\Field\WidgetBase->extractFormValues()
#3 /var/www/html/core/lib/Drupal/Core/Entity/ContentEntityForm.php(334): Drupal\Core\Entity\Entity\EntityFormDisplay->extractFormValues()
#4 /var/www/html/core/lib/Drupal/Core/Entity/EntityForm.php(301): Drupal\Core\Entity\ContentEntityForm->copyFormValuesToEntity()
#5 /var/www/html/core/lib/Drupal/Core/Entity/ContentEntityForm.php(155): Drupal\Core\Entity\EntityForm->buildEntity()
#6 /var/www/html/core/lib/Drupal/Core/Entity/ContentEntityForm.php(186): Drupal\Core\Entity\ContentEntityForm->buildEntity()
#7 [internal function]: Drupal\Core\Entity\ContentEntityForm->validateForm()
#8 /var/www/html/core/lib/Drupal/Core/Form/FormValidator.php(82): call_user_func_array()
#9 /var/www/html/core/lib/Drupal/Core/Form/FormValidator.php(274): Drupal\Core\Form\FormValidator->executeValidateHandlers()
#10 /var/www/html/core/lib/Drupal/Core/Form/FormValidator.php(118): Drupal\Core\Form\FormValidator->doValidateForm()
#11 /var/www/html/core/lib/Drupal/Core/Form/FormBuilder.php(585): Drupal\Core\Form\FormValidator->validateForm()
#12 /var/www/html/core/lib/Drupal/Core/Form/FormBuilder.php(321): Drupal\Core\Form\FormBuilder->processForm()
#13 /var/www/html/core/lib/Drupal/Core/Controller/FormController.php(73): Drupal\Core\Form\FormBuilder->buildForm()
#14 [internal function]: Drupal\Core\Controller\FormController->getContentResult()
#15 /var/www/html/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array()
#16 /var/www/html/core/lib/Drupal/Core/Render/Renderer.php(593): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#17 /var/www/html/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(121): Drupal\Core\Render\Renderer->executeInRenderContext()
#18 /var/www/html/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext()
#19 /var/www/html/vendor/symfony/http-kernel/HttpKernel.php(183): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#20 /var/www/html/vendor/symfony/http-kernel/HttpKernel.php(76): Symfony\Component\HttpKernel\HttpKernel->handleRaw()
#21 /var/www/html/core/lib/Drupal/Core/StackMiddleware/Session.php(53): Symfony\Component\HttpKernel\HttpKernel->handle()
#22 /var/www/html/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\Core\StackMiddleware\Session->handle()
#23 /var/www/html/core/lib/Drupal/Core/StackMiddleware/ContentLength.php(28): Drupal\Core\StackMiddleware\KernelPreHandle->handle()
#24 /var/www/html/core/modules/big_pipe/src/StackMiddleware/ContentLength.php(32): Drupal\Core\StackMiddleware\ContentLength->handle()
#25 /var/www/html/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\big_pipe\StackMiddleware\ContentLength->handle()
#26 /var/www/html/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\page_cache\StackMiddleware\PageCache->pass()
#27 /var/www/html/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Drupal\page_cache\StackMiddleware\PageCache->handle()
#28 /var/www/html/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle()
#29 /var/www/html/core/lib/Drupal/Core/StackMiddleware/AjaxPageState.php(36): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle()
#30 /var/www/html/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\Core\StackMiddleware\AjaxPageState->handle()
#31 /var/www/html/core/lib/Drupal/Core/DrupalKernel.php(709): Drupal\Core\StackMiddleware\StackedHttpKernel->handle()
#32 /var/www/html/index.php(19): Drupal\Core\DrupalKernel->handle()
#33 {main}

I need the exact steps to reproduce, because I cannot reproduce this 🫠

Are you doing these steps that are in CONTRIBUTING.md?

# See it in action + recommended development environment
1. Drupal 11 (preferably a git clone, for git archeology — 10.3 will work too).
2. `composer require drush/drush`
3. `drush si standard`
4. `drush pm:install experience_builder`
5. Browse to `/node/add/article` — you'll see a `🪄 XB Demo ✨` field. Don't touch that — just enter a title for the article and hit save: a component is rendered using the article title 🤓
6. If you're curious: look at the code, step through it with a debugger, and join us!
7. If you want to run *all* tests locally, including the OpenAPI spec one: `composer require league/openapi-psr7-validator webflo/drupal-finder devizzent/cebe-php-openapi --dev`

Hi @wim leers, Yes I am following the same steps. Here is the screenshots for same.

Drupal standard installation

Image upload in hero field

Database log for the error

@gauravvvv Try uploading an image with a simpler file name like banner.jpeg That will work

@Wim Leers Images with spaces in the file like Filename here.jpg will throw the error. However, this works on a normal image field

The Image field throws the below error for images with Spaces in the filename.

Exception: [src] Invalid URL format in Drupal\experience_builder\Plugin\Adapter\AdapterBase->validateConformanceToJsonSchemaType() (line 68 of /var/www/html/web/modules/experience_builder/src/Plugin/Adapter/AdapterBase.php).

I can reproduce the error from #4 with the steps from #5.

Oh, I did remember facing this issue, but a fresh setup with 11.x and using a different image made it work. However, I understand that it is related to how the image is named.

I can reproduce this too. I am using 10.3.2 and a git clone of the xb repo.

I don't understand this bit

Browse to `/node/add/article` — you'll see a `🪄 XB Demo ✨` field. Don't touch that — just enter a title for the article and hit save: a component is rendered using the article title

Mainly because we need to add the required image.
I have tried an image named image,jpg after reading this and the problem persists.

What I can notice is there are a lot of required fields like the one below.
These disable the save button.

If I select something I CAN "save" the node.
But then getting hero field is required.

Upload an image and get Ops....

Follow up / fresh installation d11

I get the same log as #4

This is the browser console when upload an image named one.jpg or a.jpg (keeping names short for reason above.)

I pair-debugged this with @lauriii, because I could not reproduce this.

1. Determining the root cause for the str_starts_with() error (full stack trace: #4) is not worth it — we should just get rid of TwoTerribleTextAreasWidget now that A) enough of the XB PoC UI is working, B) 📌 HTTP API: update /xb-component/{component_id} to list possible prop sources for current entity context Fixed will surface the available choices.

   It is out of scope for 🌱 Milestone 0.1.0: Experience Builder Demo Active to support dynamic prop sources (see https://git.drupalcode.org/project/experience_builder/-/blob/0.x/docs/da...), and designs for that do not exist yet.

   Conclusion: simply delete TwoTerribleTextAreasWidget, which implicitly means making the XB field's tree structure non-editable, because the XB PoC UI does not yet support saving. This is fine, because the UX of that widget was … terrible anyway (and even intentionally so). The default value in config/optional/field.field.node.article.field_xb_demo.yml will continue dictating the tree structure for now.

2. Once that was fixed, we ran into a subsequent problem, which @siramsay reported in #11. Debugging led to the root cause: the SDC subsystem in Drupal core has a critical bug with not detecting duplicate plugin IDs, resulting in a race condition/environment-specific behavior. Created 📌 ComponentPluginManager should detect if an extension provides two different components that resolve to the same plugin ID Active for that.
   XB is triggering that bug since 📌 Introduce an example set of representative SDC components; transition from "component list" to "component tree" Fixed , because it introduced components/simple/image/image.component.yml in addition to the pre-existing components/image/image.component.yml 🤪 For now, update the former to use the schema of the latter, but add a @todo to update the schema to the simpler form.

Opened 📌 Update XB's `image` SDC to comply with best practices, and document those best practices Needs review for #13.2.

Diffstat: +3,−330

Wim Leers → credited f.mazeikis → .

@f.mazeikis DM'd me telling me he ran into problems with the experience_builder:image component. So I pointed him to the fix here … and that's why he reviewed it and it's now in 👍

Retroactively tagging , because this was blocking 📌 Auto-create/update Component config entities for all discovered SDCs that meet XB's minimum criteria Fixed .

Automatically closed - issue fixed for 2 weeks with no activity.