Support for Experience Builder

Created on 7 January 2025, 7 months ago

Goals

There's no detailed plan at the moment. The repository for this issue holds some code; when and how this will find its way to the main module is unknown.

Status

A tree of XB components (as edited in the XB UI) can produce... some kind of (JSON) output.

See details and installation instructions in modules/custom_elements_xb/README.md.

Next steps

  • test more complicated Single Directory Components (only simple ones have been seen to work so far)
  • support for blocks
  • talk to front end people and see how the output should change, to be useful
📌 Task
Status

Active

Version

3.0

Component

Code

Created by

🇳🇱Netherlands roderik Amsterdam,NL / Budapest,HU

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @roderik
  • 🇳🇱Netherlands roderik Amsterdam,NL / Budapest,HU
  • 🇳🇱Netherlands roderik Amsterdam,NL / Budapest,HU
  • Merge request !116Draft: First version, renders basic SDCs. → (Closed) created by fago
  • 🇦🇹Austria fago Vienna

    I had the opportunity to dive into this a bit at DrupalDevDays. XB already does a great job rendering into components, so we should be able to re-use that and build upon it perfectly fine. There is the "hydated-component-tree" which we could use, see ComponentTreeHydrated. Or, we simply use the generated render-array consisting of nested components and blocks, and process into the tree of custom elements. (Similar to what we do with layout builder). Code-components are rendered as astro-islands, so could be output as astro-island component also.

    I clarified with balint brews that we do not need to handle auto-saving storage or something, preview is going to work differently anyway. Then we should be able to do all this as simple CE-field formatter.

    Created 📌 First-class experience builder support Active for the overall plan.

  • 🇦🇹Austria fago Vienna

    It seems 📌 Support for Experience Builder Active is the next step and the way to go. This will integrate with 📌 Improve mapping render-arrays to custom elements Active but does not depend on it - on the contrary, figuring out the conversion strategy for XB-component render trees might help getting the solution for 📌 Improve mapping render-arrays to custom elements Active right. So let's do the conversion for XB-render trees first.

  • 🇦🇹Austria fago Vienna

    For reference, this is a ultimatively simple render-array as produced by XB:

    {
        "a548b48d-58a8-4077-aa04-da9405a6f418": {
            "12345678-1234-1234-1234-123456789abc": {
                "#type": "component_container",
                "#component": {
                    "#type": "component",
                    "#component": "xb_test_sdc:props-no-slots",
                    "#props": {
                        "heading": "Hello from XB Component!",
                        "xb_uuid": "12345678-1234-1234-1234-123456789abc",
                        "xb_slot_ids": [],
                        "xb_is_preview": false
                    },
                    "#attached": {
                        "library": [
                            "core\/components.xb_test_sdc--props-no-slots"
                        ]
                    },
                    "#cache": {
                        "contexts": [],
                        "tags": [
                            "config:experience_builder.component.sdc.xb_test_sdc.props-no-slots"
                        ],
                        "max-age": -1
                    }
                },
                "#component_context": "Content Test Node (1), field field_component_tree",
                "#component_uuid": "12345678-1234-1234-1234-123456789abc",
                "#is_preview": false
            }
        }
    

    Let's convert render arrays like this to custom elements as a first step.

  • Merge request !126Basic converter and test → (Merged) created by fago
  • 🇦🇹Austria fago Vienna

    I've added a MR with test-coverage which successfully renders the XB output into a tree of custom elements.
    It's for sure not perfect, but it should lay the foundation on how we do it, so we can improve the output as later step.

    Next, we need to integrate this into the entity rendering pipeline either via auto-processing, a dedicated formatter, or global detection in the entity ce-display.

  • 🇦🇹Austria fago Vienna
  • 🇦🇹Austria fago Vienna
  • Pipeline finished with Failed
    5 days ago
    #556384
  • Pipeline finished with Failed
    5 days ago
    #556388
  • 🇦🇹Austria fago Vienna
  • 🇦🇹Austria fago Vienna

    finally got it green on CI also. Getting CI work was a bit tricky since experience_builder only works with Drupal >11.2 now.

    Disclosure: I've used AI (Claude Code) to help coding this, in particular the test case. I worked over all non-test code and reviewed all code changes of course.

  • 🇸🇮Slovenia useernamee Ljubljana

    Kernel test is very detailed and I think it thoroughly covers the XB to CE conversion.

  • Pipeline finished with Skipped
    1 day ago
    #558627
    • fago → committed cef231be on 3.x
      Issue #3498005 by fago: Render a tree of XB components into custom...
  • 🇦🇹Austria fago Vienna

    Merged into 3.x-dev! Next step: 📌 Integrate experience builder with entity-custom-elements-generation Active

Production build 0.71.5 2024