🇺🇸United States @hooroomoo

I am not sure what the difference between the backend items in the map: HTTP endpoint: dynamic props sources and Handle dynamic props is...

I wonder if its the same thing but we just didn't realize when we created this map together. I see only 4 backend tickets got created instead of 5 so maybe it is a duplicate? But I'm not certain.

hooroomoo → created an issue.

hooroomoo → created an issue.

hooroomoo → created an issue. See original summary → .

hooroomoo → created an issue.

hooroomoo → created an issue.

hooroomoo → created an issue.

hooroomoo → created an issue.

hooroomoo → created an issue.

transferring credits from ✨ Content templates, the boss battle: create a UI for editing templates Active

My preference would be the first way (not flat). And yes the frontend can construct the 'layout_url' => '/xb/api/v0/layout-template/node/page/full/ given the response.

$view_modes = [
      'node' => [
        'page' => [
          'full' => [
            // Whether template has auto-save changes. This can be tru even if
            // existing_template is false since we auto-save templates before
            // first publishing without creating a new saved template.
            'auto-save-changes' => TRUE,
            // Where the there is an existing template saved.
            'existing_template' => TRUE,
            // The ID does require an exisitng template because it is based on
            // entity props that can't be changed.
            'template_id' => 'node.page.full',
          ]
          'teaser' => [
            'auto-save-changes' => FALSE,
            'existing_template' => FALSE,
            'template_id' => 'node.teaser.full',
          ]
        ]
        'article' => [
          'full' => [
            'auto-save-changes' => FALSE,
            'existing_template' => TRUE,
            'template_id' => 'node.article.page',
          ]
          'teaser' => [
            'auto-save-changes' => TRUE,
            'existing_template' => TRUE,
            'template_id' => 'node.article.teaser',
          ]
        ]
      ],
    ];

hooroomoo → created an issue.

I believe https://www.npmjs.com/package/@drupal/xb-cli should get a new tag now

Current state of MR (things are hardcoded and the UI is missing some things still e.g. showing the layers menu in the left sidebar when editing a content template ):

Front can make GET request to xb/api/v0/layout-template/node/article/full/1 and then receives the HTML to render the template. Here I added two components to the template.

Next publish the template (POST) to xb/api/v0/layout-template/node/article/full/1. PATCH also works to edit a prop. But still need to add the ability to set a component prop as a field which I'll add tomorrow to prove it works. @tedbow provided a hardcoded list of dynamic suggestions in the backend.

Can see that the content template is now being used for all articles.

Next step on the frontend side:
1. Add the ability to set a component prop as a field in the UI

@wim leers Sorry about that! I understand it was not clear and is confusing. I'm just going to close this issue and continue work on ✨ Content templates, the boss battle: create a UI for editing templates Active .

I pushed all the changes from here to 3518248-layout-controller

hooroomoo → made their first commit to this issue’s fork.

Also would be great to have this by the content templates work so the url for editing a content template can be independent of the entity type and entity in the route

balintbrews → credited hooroomoo → .

hooroomoo → created an issue.

balintbrews → credited hooroomoo → .

hooroomoo → changed the visibility of the branch xb-1346 to hidden.

hooroomoo → changed the visibility of the branch 3538602-code-editor-can to hidden.

hooroomoo → created an issue.

hooroomoo → changed the visibility of the branch 3508317-browsers-undo-state to hidden.

Merged but assigning back to @bnjmnm to add screenshots/gif

Opened 2 follow-ups.

1. ✨ [PP-1] Navigate to page/component that's causing a publish error within the same tab Active
2. 🐛 source.pointer value from publish error response is inconsistent sometimes Active for #8 📌 Link Publish errors to the page + component instance that's causing the error Active

hooroomoo → created an issue.

This will unblock ✨ [PP-1] Navigate to page/component that's causing a publish error within the same tab Active

hooroomoo → created an issue.

Closing this as a duplicate of ✨ Move entity type and ID from base path and into routing parameters Active

I snuck the fix for this in 📌 Followup for #3503412: Allow Content Author to set site's homepage from navigator Active so this should be already fixed in 1.x

@wim-leers

Steps to reproduce the bug I mentioned in https://git.drupalcode.org/project/experience_builder/-/merge_requests/1.... I reproduced this on MR!1360

1. Create the code component below. Text and link required prop.
2. Click add to components.
3. Add two instances of the component on the page (xb_page).
4. Edit the url prop to be empty on both of the instances that are on the page.
5. Publish the xb_page that the 2 components are on.
6. This is the error message i get:

uuid: 6c21e124-4d78-408b-8896-1a26a28bcbdc
langcode: en
status: true
dependencies: {  }
machineName: c1
name: c1
required:
  - text
  - url
props:
  text:
    title: text
    type: string
    examples:
      - hello
  url:
    title: url
    type: string
    examples:
      - 'https://www.hello.com'
    format: uri
slots: {  }
js:
  original: |
    // See https://project.pages.drupalcode.org/experience_builder/ for documentation on how to build a code component

    const Component = ({
      text,
      url,
    }) => {
      return (
        <div className="text-3xl">
          {text}
        <br></br>
          {url}
        </div>
      );
    };

    export default Component;
  compiled: |
    // See https://project.pages.drupalcode.org/experience_builder/ for documentation on how to build a code component
    import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
    const Component = ({ text, url })=>{
        return /*#__PURE__*/ _jsxs("div", {
            className: "text-3xl",
            children: [
                text,
                /*#__PURE__*/ _jsx("br", {}),
                url
            ]
        });
    };
    export default Component;
css:
  original: ''
  compiled: ''

doing followup #2 for the frontend code improvement review feedback that didn't get addressed yet here 📌 Allow CMS Author to set site's homepage from navigation Postponed

Adding credit for the FE review feedback received in 📌 Allow CMS Author to set site's homepage from navigation Postponed that i'm addressing here

hooroomoo → changed the visibility of the branch 3503412-fe-followup to hidden.

hooroomoo → created an issue.

Thanks @mayur-sose. Good catch. It is because the frontend is checking the auto-save endpoint of staged_config_update for the homepage and after we publish the page, the auto-save endpoint doesn't have that anymore.

Yep TC8 is expected behavior. We hide the "Set as homepage" option if the page is already set as the homepage. Although it should not appear again after a reload which I don't see myself.

TC10: If the homepage hasn't been set yet the api returns a 404 and we call it to know which page to render the home icon for. I'm gonna try to find a way to work around this in my FE follow-up MR.

TC11: Hm I'm not able to reproduce this. What do you mean by showing incorrectly?

I discovered if you remove the outer div to the above component, it looks like it works as expected on animationend . So maybe the problem is the border is getting recalculated using the .spin-in-container parent div position instead of the .spin-in-box inner div that the animation is actually on?

Below is GIF with the parent div .spin-in-container commented out

Seeing the slot rendering weird

Posting the component i was testing with here:

const SpinInComponent = ({slot1}) => {
  return (
    <div className="spin-in-container">
      <div className="spin-in-box">{slot1}</div>
    </div>
  );
};

export default SpinInComponent;

.spin-in-container {
  width: 300px;
}
.spin-in-box {
  background-color: #3498DB;
  color: white;
  padding: 20px 40px;
  border-radius: 8px;
  font-size: 1.2em;
  text-align: center;
  animation: spinIn 2s ease-out forwards;
  height: 100px;
  width: 300px;
}
@keyframes spinIn {
  0% {
    transform: translateX(-100%) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(360deg);
  }

hooroomoo → made their first commit to this issue’s fork.

Assigning to myself to work on the frontend followups. I plan to open a separate MR here.

wim leers → credited hooroomoo → .

I was asked to add the frontend parts to the MR so feel free to assign to me after but i will just start on it today

hooroomoo → made their first commit to this issue’s fork.

I want to confirm something with the src url later but the frontend part is pretty much done ready for a review.

@wim-leers

Getting 422 Error from the backend when you do Add to components because the poster values we use fail the validation because it looks like the validation checks for image file name extensions:

https://placehold.co/1080x1920?text=Vertical
https://placehold.co/1920x1080?text=Widescreen

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → made their first commit to this issue’s fork.