Skip to content

[14.2.0-rc] Block Grid layout stylesheet not using correct URL #16897

@rickbutterfield

Description

@rickbutterfield

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

14.2.0-rc

Bug summary

When configuring a layout stylesheet against a Block Grid, the URL it is trying to be loaded from includes the backoffice path as part of the URL

Specifics

Screenshot of the network requests failing, going to the incorrect URL
image

Screenshot of the config returned from /umbraco/management/api/v1/data-type with the correct stylesheet URLs
image

I think the culprit is this part of block-grid-manager.context.ts

if (layoutStylesheet) {
    // Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
    return this.#appUrl! + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
}

When running the Backoffice project locally, appUrl will always resolve to http://localhost:5173, whereas when running within the context of a C# project, appUrl will resolve to the backoffice path.

A few lines down (L60-62) show where #appUrl is populated, and includes getBackofficePath():

this.#initAppUrl = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
    this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
});

Steps to reproduce

  • Blank v14.2.0-rc installation
  • Create a test CSS file inside /wwwroot
  • Configure a Block Grid datatype to have a layout stylesheet pointing to the above CSS file
  • Check the browser console

Expected result / actual result

Expected result:
If a stylesheet is configured from /wwwroot/css/test.css, the loaded file should be seen as /css/test.css in the Network tab of dev tool

Actual result:
Stylesheet tries to be loaded from /umbracocss/test.css

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions