Merge pull request #2213 from rickbutterfield/v14/bugfix/block-layout…

…-stylesheet-url

Fix Block Grid `layoutStylesheet` not using correct URL

src/mocks/data/data-type/data-type.data.ts

@@ -702,6 +702,10 @@ export const data: Array<UmbMockDataTypeModel> = [
 				alias: 'blockGroups',
 				value: [{ key: 'demo-block-group-id', name: 'Demo Blocks' }],
 			},
+      {
+        alias: 'layoutStylesheet',
+        value: '/wwwroot/css/umbraco-blockgridlayout.css'
+      },
 			{
 				alias: 'blocks',
 				value: [

src/packages/block/block-grid/context/block-grid-manager.context.ts

@@ -1,7 +1,7 @@
 import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
 import type { UmbBlockGridWorkspaceData } from '../index.js';
 import { UmbArrayState, appendToFrozenArray, pushAtToUniqueArray } from '@umbraco-cms/backoffice/observable-api';
-import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
+import { removeLastSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -29,7 +29,7 @@ export class UmbBlockGridManagerContext<
 
 		if (layoutStylesheet) {
 			// Cause we await initAppUrl in setting the _editorConfiguration, we can trust the appUrl begin here.
-			return this.#appUrl! + removeInitialSlashFromPath(transformServerPathToClientPath(layoutStylesheet));
+			return removeLastSlashFromPath(this.#appUrl!) + transformServerPathToClientPath(layoutStylesheet);
 		}
 		return undefined;
 	});

src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -6,13 +6,13 @@ import { html, customElement, property, state, ifDefined } from '@umbraco-cms/ba
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-import { removeInitialSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
+import { removeLastSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-block-type-card')
 export class UmbBlockTypeCardElement extends UmbLitElement {
 	//
 	#init: Promise<void>;
-	#appUrl?: string;
+	#appUrl: string = '';
 
 	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
 		this,
@@ -28,7 +28,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		value = transformServerPathToClientPath(value);
 		if (value) {
 			this.#init.then(() => {
-				this._iconFile = this.#appUrl + removeInitialSlashFromPath(value);
+				this._iconFile = removeLastSlashFromPath(this.#appUrl) + value;
 			});
 		} else {
 			this._iconFile = undefined;

src/packages/block/block-type/types.ts

@@ -1,4 +1,5 @@
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
+export type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/extension-registry';
 
 export interface UmbBlockTypeGroup {
 	name?: string;

src/packages/core/utils/index.ts

@@ -12,6 +12,7 @@ export * from './path/path-decode.function.js';
 export * from './path/path-encode.function.js';
 export * from './path/path-folder-name.function.js';
 export * from './path/remove-initial-slash-from-path.function.js';
+export * from './path/remove-last-slash-from-path.function.js';
 export * from './path/stored-path.function.js';
 export * from './path/transform-server-path-to-client-path.function.js';
 export * from './path/umbraco-path.function.js';

src/packages/core/utils/path/remove-initial-slash-from-path.function.ts

@@ -1,5 +1,5 @@
 /**
- *
+ * Removes the initial slash from a path, if the first character is a slash.
  * @param path
  */
 export function removeInitialSlashFromPath(path: string) {

src/packages/core/utils/path/remove-last-slash-from-path.function.ts

@@ -0,0 +1,7 @@
+/**
+ * Remove the last slash from a path, if the last character is a slash.
+ * @param path
+ */
+export function removeLastSlashFromPath(path: string) {
+	return path.endsWith('/') ? path.slice(undefined, -1) : path;
+}