In order to accelerate the creation of content, allow content creators and builders store component compositions as sections (also called as "patterns" or "helpers"). Unlike components that are configured using props, sections allow content creators to change the internals of the section, e.g. removing an image component.
At this first stage, we only allow create and delete operations for sections, meaning that there's no separate UI for someone to edit a section. In other words, in the beginning, the only way to edit a section would be to delete and re-create it.
Design progress
The following GIF is a 90% concept for the requirements of creating, renaming, and deleting a section.

10/29 update: Designs have been updated to better reflect section behavior. Sections use groups of non-synced elements + components that have been saved for reuse in the library. When initially creating a section, a modal appears to name that section in both the library and on the canvas. That section can be renamed in the library; however, it will not be reflected on the canvas as they are not synced. Similarly, deleting a section from the library does not affect any instance of that section used on the canvas.
Individual screens of note




Link to the figma file: https://www.figma.com/design/Ps3m4APGHIILsBrm0Uj31N/Experience-Builder?n...
Blockers
HARD blocker: Design: to define what the UX in the client must be- SOFT blocker: Back-end: HTTP APIs for the client to talk to the server → #3479982: HTTP API to read+write PageTemplate and Pattern config entities
- SOFT blocker: Back-end: a way to represent these "component compositions" aka "sections" aka "patterns" → #3479643: Introduce a `Pattern` config entity
The two soft blockers will allow removing the hardcoded hackery that was introduced in #3463300: Implement the concept of sections within the client.
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | RENAME.jpg | 894.43 KB | bostonjillian |
| #15 | Edit in XB - view in library.jpg | 887.36 KB | bostonjillian |
| #15 | Edit in XB - create section modal.jpg | 950.24 KB | bostonjillian |
| #15 | Deleted section.jpg | 835.57 KB | bostonjillian |
| #15 | Finalsectionprototype.gif | 2.21 MB | bostonjillian |
Issue fork experience_builder-3459229
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
wim leersThis is not meant for #3454094: Milestone 0.1.0: Experience Builder Demo nor for #3455753: Milestone 0.2.0: Early preview, right?
Comment #3
lauriiiLinking #3463300: Implement the concept of sections within the client which is an issue to implement this capability in the UI. This issue would focus on storing this information in the backend.
Comment #4
wim leersComment #5
wim leersNot actionable yet, so removing from https://contribkanban.com/board/experience_builder.
Comment #6
wim leersThis is part of the #3455753: Milestone 0.2.0: Early preview scope.
Comment #7
bostonjillian commentedComment #8
wim leers#7: 🥳
FYI, the UI pieces are blocked on design (yay for @bostonjillian working on this!), but that doesn't mean the back-end pieces cannot already be built! Missing config entity infrastructure has a precise definition of what is needed at #3479643: Introduce a `Pattern` config entity, and #3479982: HTTP API to read+write PageTemplate and Pattern config entities will make it possible to let the client list/read/create/edit/delete "component compositions" aka "sections" aka "patterns" 👍
So this is postponed on 3 distinct things ⇒ prefixing title with
[PP-3].But note that only the design part is a hard blocker.
Comment #9
bostonjillian commentedComment #10
bostonjillian commentedComment #11
kristen polYay!
Is it true that deleting a section would remove it wherever it’s used? I guess it makes sense.
Is there any plans for archiving a section so it’s still shown where previously added but not available for adding to new things? Or perhaps tagging and hiding as part of the categorization feature that’s being designed?
Comment #12
jessebaker commented@kristen pol that screenshot certainly appears to be showing that, however I am not sure it's a good idea or technically necessary. I have a design sync call later today and I'll seek clarification on this.
Comment #13
lauriii@bostonjillian is out this week but in the meanwhile I'd like to clarify that when sections are added, it gets stored as a copy. This means that deleting a section from the library would not result in those sections being removed from where it has been used (e.g., individual pages). This is their difference from components. That popup would make sense for components.
Comment #14
kristen polGood news 🙏
Comment #15
bostonjillian commentedComment #16
bostonjillian commentedI'm back! Thank you @kristenpol and @jessebaker for your feedback, especially the clarification on the delete behavior.
Lauri and I met to review, iterate, and make design decisions on sections. Here's a quick overview of where we landed:
10/29 update: Designs have been updated to better reflect section behavior. Sections use groups of non-synced elements + components that have been saved for reuse in the library. When initially creating a section, a modal appears to name that section in both the library and on the canvas. That section can be renamed in the library; however, it will not be reflected on the canvas as they are not synced. Similarly, deleting a section from the library does not affect any instance of that section used on the canvas.
I also added a link to the Figma file if anyone is interested in getting a closer look.
Comment #18
wim leers#3479982: HTTP API to read+write PageTemplate and Pattern config entities landed, so that reduces the postponedness.
Comment #19
lauriiiComment #20
lauriiiComment #21
jessebaker commentedI'm leaving [PP-2] in the title, however, I was able to make progress on the front end side of this ticket and have raised an MR that can be merged even though ultimately clicking "Save to library" won't actually work yet - it does allow you to get all the way to that pont!
Comment #22
wim leers#3479982: HTTP API to read+write PageTemplate and Pattern config entities is in, we're now just waiting for #3479982: HTTP API to read+write PageTemplate and Pattern config entities!
Comment #25
hooroomooLooks good to me, just one question about LayoutNode type vs. RootNode type.
Comment #27
hooroomooThanks all!
Created follow-up to integrate the frontend with the backend, after the backend patterns work is done:
#3486203: Integrate saving sections with the backend: (de)normalize Pattern config entities using the client-side data model
Comment #28
hooroomooRenaming title to emphasize it is frontend only
Comment #30
hooroomooComment #31
wim leers#3486203: Integrate saving sections with the backend: (de)normalize Pattern config entities using the client-side data model is now unblocked!