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

  1. HARD blocker: Design: to define what the UX in the client must be
  2. 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
  3. 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.

Command icon 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

lauriii created an issue. See original summary.

wim leers’s picture

Title: Allow saving component compositions as sections » [later phase] Allow saving component compositions as sections
lauriii’s picture

Linking #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.

wim leers’s picture

Component: Page builder » Config management
wim leers’s picture

Title: [later phase] Allow saving component compositions as sections » [later phase] [needs design] Allow saving component compositions as sections
Issue tags: +Needs design
Parent issue: #3450592: [META] Front-end Kanban issue tracker »

Not actionable yet, so removing from https://contribkanban.com/board/experience_builder.

wim leers’s picture

Title: [later phase] [needs design] Allow saving component compositions as sections » [needs design] Allow saving component compositions as sections
Version: » 0.x-dev

This is part of the #3455753: Milestone 0.2.0: Early preview scope.

bostonjillian’s picture

Assigned: lauriii » bostonjillian
wim leers’s picture

Title: [needs design] Allow saving component compositions as sections » [needs design] [PP-3] Allow saving component compositions as sections
Issue summary: View changes
Related issues: +#3479643: Introduce a `Pattern` config entity, +#3479982: HTTP API to read+write PageTemplate and Pattern config entities

#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.

bostonjillian’s picture

Issue summary: View changes
StatusFileSize
new1.41 MB
bostonjillian’s picture

kristen pol’s picture

Yay!

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?

jessebaker’s picture

@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.

lauriii’s picture

@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.

kristen pol’s picture

Good news 🙏

bostonjillian’s picture

Issue summary: View changes
StatusFileSize
new2.21 MB
new835.57 KB
new950.24 KB
new887.36 KB
new894.43 KB
bostonjillian’s picture

I'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.

wim leers’s picture

Title: [needs design] [PP-3] Allow saving component compositions as sections » [needs design] [PP-2] Allow saving component compositions as sections
lauriii’s picture

Title: [needs design] [PP-2] Allow saving component compositions as sections » [PP-2] Allow saving component compositions as sections
Issue tags: -Needs design
lauriii’s picture

Assigned: bostonjillian » Unassigned
jessebaker’s picture

Status: Postponed » Needs review

I'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!

wim leers’s picture

Title: [PP-2] Allow saving component compositions as sections » [PP-1] Allow saving component compositions as sections

hooroomoo changed the visibility of the branch 3459229-save-section to hidden.

hooroomoo changed the visibility of the branch 3459229-save-section to active.

hooroomoo’s picture

Looks good to me, just one question about LayoutNode type vs. RootNode type.

hooroomoo’s picture

Title: [PP-1] Allow saving component compositions as sections » Allow saving component compositions as sections
Status: Needs review » Fixed

Thanks 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

hooroomoo’s picture

Title: Allow saving component compositions as sections » Allow saving component compositions as sections (frontend only)

Renaming title to emphasize it is frontend only

hooroomoo’s picture

Status: Fixed » Closed (fixed)

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