Milestone 0.1.0: Experience Builder Demo

[…], meaning we should have a URL where we can point users to, and they will be immediately launched to the Experience Builder editing experience. In other words, the user can edit a single page with a predefined design system.

See #3450311-8: CI: host static version of UI in GitLab Pages — Field Widgets presumably need non-static responses, although I'm sure we could spend extra time working to make it static, for demo purposes.

Sounds good - we can use MSW to mock all the endpoints so it is static - at present we're only booting MSW if the NODE_ENV is not production but we could use different environment flavours to change the handlers we use. E.g. we could have a NODE_ENV=demo

Hi, I want to join this initiative on Starshot. I am the web developer for Massachusetts Bay Community College in Wellesley, Massachusetts, USA. It is a Massachusetts state government affiliated organization. I have used Drupal since 2011, Drupal 6 at Kaspersky Lab (Security Software based in Moscow) North American Headquarters in Woburn, MA. I have built the website for Massachusetts Bay Community College in Drupal 7 with the Omega responsive theme.

https://www.massbay.edu. I made all of the design and code development and layout and it is hosted on Pantheon.io software/platform as a service. The update to Drupal 8, 9, 10 has been difficult for us. I made a sub-domain in Drupal 10, also in Pantheon.io: https://live-directory2024.pantheonsite.io/. In itself it's easy to use, but the difficulty is in customizing themes and layouts and building features beyond the basic templates. I have just finished Mike Anello's Professional Module Development class and am taking Treehouse Twig Templating to catch up to the codebase changes.

I'm a big fan of Drupal and the ability to build whatever we want with the vetting of a developer community. I've attended Design4Drupal since it began at MIT about 10 years ago. The school needed a lot of convincing to stay with Drupal and not switch to WordPress or listen to other CMS. vendors giving them a sales pitch :). We are going to launch our Drupal 10 website this summer but it took a lot of time, work and money. The best I can tell them is that we will have an easier path to keep the site in Drupal which has great security and user experience once built!! I will sign up for issues, I have downloaded the phenaproxima prototype, I am workin on a Mac with brew, composer, git, PHP Storm, the newest Shiva PHP and Xdebug, and phpstan and phpcs and phpcbf. The current MassBay site is built with JQuery but the new one will be Next JS and PatternLab, I am transitionion also to plain vanilla Javascript to avoid frameworks which will then be discontinued.

Thanks!!! I'm in touch with Ms. Chumillas on LinkedIN -- <3 Barcelona and just came back from Geneva, CERN and Patek Phillippe and the mix of languages was enlightening, I can see why Tim Berners-Lee invented WWW on top of DARPA internet.

Best regards,
Wendy Walsh
MassBay Community College

Subsequent milestone created: #3455753: Milestone 0.2.0: Early preview — it's a child issue of this one.

Selecting a component variant

There are 0 mentions of "component variant" in the product requirements.

"Component variants" are being proposed for the SDC subsystem at #3390712: Add component variants to SDC, but it's uncertain whether that will be ready.

Is that what you're referring to?

To expand on #7: we discussed "component variants" during those first ~8 weeks … because we were extrapolating from the product requirmeents.

But all of that was about creating variants of components by using design tokens. But none of how design tokens is supposed to A) be represented, B) connect to SDCs, is defined at this point. 3 weeks ago, I met with @ckrina, @jponch, @e0ipso and @mherchel. I haven't heard news from @ckrina. The big challenge for design tokens will be to get as many components as possible to use the same set of widely used, "standardized" design tokens. Because … when that's not the case, you'd have to manually remap components' design tokens to the design tokens that you're using in your site's design system. That's the main challenge that was identified in that meeting.

(That's an oversimplification actually — because there's a distinction between different levels/layers of tokens: semantic, primary, terminal … and even those names are not necessarily agreed upon yet!)

@e0ipso shared a demo of an early implementation of design token support in SDC. But that's only a small part of the challenge — the key challenge is the above: the naming of the design tokens and attempting to get all components to use the same design token naming scheme.

Back to @lauriii to keep that table up-to-date now.

Went through all 10 user stories together with @lauriii and @jessebaker. Updated status + links 👍

@lauriii will create some additional issues.

#3463988: HTTP API: new /xb/api/entity-form/{entity_type}/{entity}/{entity_form_mode} route to load form for editing entity fields (meta + non-meta) is in. #3469235: Make "page data" tab in right sidebar work for user stories 8 + 9 is now actionable.

Note that the SDDS team did build off of the original Figma designs:

https://www.figma.com/design/aADVsc8fdsENnUaKePvVpg/Experience-Builder-D...

but were asked to ditch those (we are renaming those components to old-component-name :) in lieu of the new designs that were sent less than 2 weeks ago:

Target Pages for Barcelona > Kasey’s Homepage

https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---D...

so we should update the link but I'm hesitant to update the summary myself :D

that were sent less than 2 weeks ago

I know nothing about that 😳

Who sent those? Why the sudden change? And most importantly: where?! 🤪

IOW: why was that not written publicly in #3454125: Implement temporary design system for the DrupalCon Barcelona demo?! I just commented there on August 22 in comment 53 (#3454125-53: Implement temporary design system for the DrupalCon Barcelona demo), the prior comment was by @kristen pol on July 19 in #51 (#3454125-51: Implement temporary design system for the DrupalCon Barcelona demo). If there's no comment on the d.o issue, then most of us will simply not know, and the community at large definitely cannot know.

Apologies but been doing 70+ hour weeks and trying to keep people busy so I didn’t think about it until I was going through issues yesterday. Lauri already was aware of this request from Suzanne btw.

🤗😭 I know the feeling. 😬 70+ hours is not sustainable, hope you can cut that down to healthier levels ASAP! 🤞

#3463618: Include component props form in undo is in — updated user story 10 to 🟢 🥳

#3469442: Impossible to drop a component into an empty column of the two is in!

#3471102: Unable to scroll component list is in 🥳

This one seems to be missing from the curated short list, but I’m on phone and have no power so hard for me to review and navigate well

#3469856: The component preview should have a background: include theme's global asset libraries for component preview

#3471083: Prop select lists don't affect the component is fixed.

#30: I think you meant to remove it? 😅

#3471171: Allow components to use textarea in favor of input is also in, removing.

#3471511: `enum` data shapes: error when choosing "- None -" in `<select>` is necessary too, to avoid the - None - option appearing for the type: string, enum: […] prop shapes.

#3469516: Declare explicit runtime dependency on `justinrainbow/json-schema` was missing.

#3470550: Component config entities are incomplete: missing entries for optional props, causing errors in ComponentPropsForm landed 🚢

#3458503: Improve the page hierarchy display landed 🚢

#3454173: Media Library integration (includes introducing a new main content renderer/`_wrapper_format`) landed 🚢

Replacing #36's #3471950: [PP-1] Media library should use styles from Claro with #3471978: Make the Media Library dialog look like the admin theme without materially affecting anything outside of the dialog (possibly use an iframe for CSS isolation).

#3469516: Declare explicit runtime dependency on `justinrainbow/json-schema` landed.

#3463300: Implement the concept of sections within the client landed 🚢

#3470973: Retain the placement of components within the preview when inserting a component landed 🚢

#3462310: Component props form: map textarea, bool, and select elements to React components (previously titled make form elements match design) semi-landed (🛥️ ← smaller), #3472199: Component props form: style plain text, link, textarea, bool, and select elements is taking its place.

@lauriii was being trolled by Google Chrome — he literally couldn't type anything anymore 🙃 So, making this change on his behalf 😄

#3471154: Allow deleting component instances by pressing "Delete" or "Backspace" landed 🚢

#3472029: Adding a component with slots does not show the slots in the layers view was marked as a duplicate of #3471085: Adding a component with slots does not register the slots as children by Jesse.

• #3469822: Highlight slot with a border where component/section is about to be placed landed 🚢
• #3463798: No upward auto-scroll when components are dragged landed 🚢

#3469436: Fix the visually broken "image" component instance: use FileUriItem's computed `url` property, not the stored `value` property landed 🚢

#3471085: Adding a component with slots does not register the slots as children landed 🚢

@bnjmnm reported over at #3471511-15: `enum` data shapes: error when choosing "- None -" in `<select>` that #3471511 will be solved as part of #3463842: [META] Redux sync on ALL prop types, not just ones with a single [value] property! 🚀 And over at #3472192-18: Redux support for ImageWidget: `[image] String value found, but an object is required`, that that too will likely be addressed as part of #3463842.

Bumped #3463842 to the top priority, since it will likely close 3 issues on the list 👍

#3470933: Close the insert panel when clicking outside the panel landed 🚢

resaving to see currently assigned issue status

#3471070: `/xb-components` takes multiple seconds when *many* SDCs are present is a soft blocker for #3469856: The component preview should have a background: include theme's global asset libraries for component preview per https://git.drupalcode.org/project/experience_builder/-/merge_requests/2..., so added.

(It is not a hard blocker, but #3469856 is likely to make #3471070 more noticeable, and hence it's important to get that out of the way.)

I updated the list to replace #3472243: Adjust page hierarchy styles to avoid elements moving which I marked 'Closed as duplicate' and replaced it with #3470594: Refine dragging behavior and design in Layers menu which will address
https://www.drupal.org/project/experience_builder/issues/3472243#comment...

Refreshing IS.

#65 x-posted with #64. Fixing that.

Hmm... this isn't on the list but has been one of our main blockers:

#3472900: XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading

#3473155: Redux Sync all single-value types in the SDC test all props form landed 🚢

#3473659: Sort component list alphabetically landed 🚢

#3471169: Allow dragging components to top/bottom of page and in between adjacent components with slots landed 🚢

Removed #3472192: Redux support for ImageWidget: `[image] String value found, but an object is required` thanks to #3474226: Make Media Library a dependency.

#3472299: Update default config to make a fresh install result in an XB UI with an empty canvas landed. 🚢

@jessebaker and I met with @lauriii this AM. Lauri has since boarded a plane on his way to Barcelona, and will be out for a few days prior to DrupalCon.

He conveyed @Dries is very satisfied with the Experience Builder demo he recorded.

He also conveyed that the Acquia UX team has made significant changes to the design.

That means:

1. #3472199: Component props form: style plain text, link, textarea, bool, and select elements (1.)
2. #3470931: Cleaning up the component insert panel (1.)
3. #3470594: Refine dragging behavior and design in Layers menu (7.)
4. #3471978: Make the Media Library dialog look like the admin theme without materially affecting anything outside of the dialog (possibly use an iframe for CSS isolation) (3.)

no longer are top priorities.

The first 3 aren't because they would then need to change anyway due to design changes.

The 4th isn't because the only thing that we could've finished in time before DrupalCon wouldn't have been possible, since the complexity of the correct/long-term solution would take a significant amount of time (see @bnjmnm's write-up at #3471978-10: Make the Media Library dialog look like the admin theme without materially affecting anything outside of the dialog (possibly use an iframe for CSS isolation)), so this was only among the top priorities for a temporary/throwaway solution prior to DrupalCon. Which no longer makes sense to do with the XB demo recording for DrupalCon already final.

Everything else is not subject to change, so we should still wrap those up.

#3472900: XBEndpointRenderer & processResponseAssets() do not support `ajaxPageState` ⇒ duplicate CSS/JS loading landed 🚢

#3469856: The component preview should have a background: include theme's global asset libraries for component preview landed 🚢

#3469677: Remove flickering when preview is being updated landed 🚢

#3469855: Emptying a required value through the UI crashes the app (empty <input>, selecting "None" option in <select> …) landed 🚢

#3469673: Keyboard commands to zoom in and out should only impact the preview canvas landed 🚢

[deleted] (Wim beat me to it. 😊)

#3469672: The XB annotations and labels should not change size when zooming landed 🚢 — and with that, our backlog is cleared. 😊🏁

Will tag 0.1.0-alpha release tomorrow morning, right on time for DrupalCon 😁

Go team! 🙌

https://www.drupal.org/project/experience_builder/releases/0.1.0-alpha1 🏁

See y'all in #3455753: Milestone 0.2.0: Early preview.