Overview
| Parent issue | #3499919: [Meta] Plan for in-browser code components |
| Related / Blocked by |
Code components are not available under "Components" in the library by default. They're listed under "Code" (done in #3499947: Managing code components in library). This means they can't be used for editing content of the page — until they're added to components.
Add a button on the component editing UI (done in #3499988: Editing code components) that allows users to add a code component to components.
As a result of this issue, the component should be ready to use just as any other SDC or block.
Proposed resolution
Consult how this change needs to be represented in the code component's config entity (done in #3499927: Config entity for storing code components). After this change the code component should be picked up by the component source plugin done in #3498889: ComponentSource plugin for code components, and as a result, be listed under "Components". It should no longer be visible under "Code".
Out of scope:
Choosing a component group — more questions need to be addressed in #3499964: Component groups for primary components (theme-provided SDCs + code components).
User interface changes

| Comment | File | Size | Author |
|---|---|---|---|
| #10 | xb-code-components-adding-to-components.jpg | 217.23 KB | balintbrews |
| xb-code-components-add-to-components.jpg | 88.18 KB | balintbrews |
Issue fork experience_builder-3500071
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
balintbrewsComment #3
balintbrewsIn case #3506108: Editing code components as overrides, step 1 lands sooner, we need to make sure that code components that are overrides can't be added to the components.
Comment #4
wim leersThe way this was implemented in #3499927: Config entity for storing code components + #3498889: ComponentSource plugin for code components:
JavaScriptComponentconfig entity) has itsstatusset totrue.\Drupal\experience_builder\EntityHandlers\JavascriptComponentStorage::doPostSave()to create the correspondingComponentconfig entity.This is already implemented and tested on the back end.
So the UI shown in the issue summary should only need to
PATCHthe config entity (using the/xb/api/config/js_component/…) and setstatustotrue.Comment #5
nagwani commentedComment #6
balintbrewsComment #8
balintbrewsComment #10
balintbrewsComment #12
wim leersTo make this actually have the effect we intend it to have, we need to fix the back end: #3508947: JavaScriptComponent's `status` must be respected by the corresponding `Component`.
Comment #13
wim leersComment #14
nagwani commented