diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index c74158ac83..a6468f4f6c 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -2403,6 +2403,7 @@ export default { tabClipboard: 'Clipboard', tabBlockSettings: 'Settings', headlineAdvanced: 'Advanced', + headlineCustomView: 'Custom View', forceHideContentEditor: 'Hide content editor', forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay', gridInlineEditing: 'Inline editing', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 7e0e77d5cd..f1b6833566 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -2470,6 +2470,7 @@ export default { tabClipboard: 'Clipboard', tabBlockSettings: 'Settings', headlineAdvanced: 'Advanced', + headlineCustomView: 'Custom View', forceHideContentEditor: 'Hide content editor', forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay.', gridInlineEditing: 'Inline editing', diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts index d34cf5d569..b107595f8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts @@ -1,7 +1,10 @@ +import { UMB_BLOCK_GRID } from '../../types.js'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry'; +// Getting umb-block-type-custom-view-guide element +import '@umbraco-cms/backoffice/block-type'; @customElement('umb-block-grid-type-workspace-view-advanced') export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement { @@ -21,6 +24,13 @@ export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement alias="hideContentEditor" property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"> + + + + + ; + + #repository = new UmbDocumentTypeDetailRepository(this); + + constructor() { + super(); + + this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => { + this.observe( + await context.propertyValueByAlias('contentElementTypeKey'), + async (value) => { + if (!value) return; + const { asObservable } = await this.#repository.requestByUnique(value); + this.observe( + asObservable(), + (model) => { + this.#contentTypeAlias = model?.alias; + this.#loadManifests(); + }, + 'observeContentType', + ); + }, + 'observeContentElementTypeKey', + ); + }); + } + + #loadManifests() { + console.log('this.#blockEditorType', this.#blockEditorType, 'this.#contentTypeAlias', this.#contentTypeAlias); + if (!this.#blockEditorType || !this.#contentTypeAlias) return; + new UmbExtensionsManifestInitializer( + this, + umbExtensionsRegistry, + 'blockEditorCustomView', + this.#extensionFilterMethod, + async (customViews) => { + this._manifests = customViews.map((x) => x.manifest); + }, + 'manifestInitializer', + ); + } + + #extensionFilterMethod = (manifest: ManifestBlockEditorCustomView) => { + if (!this.#blockEditorType || !this.#contentTypeAlias) return false; + if ( + manifest.forContentTypeAlias && + !stringOrStringArrayContains(manifest.forContentTypeAlias, this.#contentTypeAlias!) + ) { + return false; + } + if (manifest.forBlockEditor && !stringOrStringArrayContains(manifest.forBlockEditor, this.#blockEditorType)) { + return false; + } + return true; + }; + + override render() { + return this._manifests && this._manifests.length > 0 + ? html`
+ ${repeat( + this._manifests, + (x) => x.alias, + (x) => html` + + + `, + )} +
` + : html`No custom view matches the current block editor type and content type.`; + } +} + +export default UmbBlockTypeCustomViewGuideElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-block-type-custom-view-guide': UmbBlockTypeCustomViewGuideElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts index 2ce6e9bff7..f04aaabb29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts @@ -1,2 +1,3 @@ export * from './block-type-card/index.js'; export * from './input-block-type/index.js'; +export * from './block-type-custom-view-guide/block-type-custom-view-guide.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts index d07544f196..814adba5f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts @@ -1,2 +1,3 @@ export * from './components/index.js'; export * from './types.js'; +export * from './workspace/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/manifests.ts index c3415bb2c0..71c165c901 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/manifests.ts @@ -1,5 +1,4 @@ import { manifests as workspaceManifests } from './workspace/manifests.js'; -import { manifests as propertyEditorManifests } from './property-editors/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; -export const manifests: Array = [...workspaceManifests, ...propertyEditorManifests]; +export const manifests: Array = [...workspaceManifests]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/manifests.ts deleted file mode 100644 index 8160246fa7..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/manifests.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry'; - -export const manifest: ManifestPropertyEditorUi = { - type: 'propertyEditorUi', - alias: 'BlockTypeGroupConfiguration', - name: 'Block Group Configuration Property Editor UI', - js: () => import('./property-editor-ui-block-type-group-configuration.element.js'), - meta: { - label: 'Block Grid Group Configuration', - icon: 'icon-autofill', - group: 'blocks', - }, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.element.ts deleted file mode 100644 index 29b6c04770..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.element.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; -import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -/** - * @element umb-property-editor-ui-block-type-group-configuration - */ -@customElement('umb-property-editor-ui-block-type-group-configuration') -export class UmbPropertyEditorUIBlockGridGroupConfigurationElement - extends UmbLitElement - implements UmbPropertyEditorUiElement -{ - @property() - value = ''; - - @property({ type: Object, attribute: false }) - public config?: UmbPropertyEditorConfigCollection; - - override render() { - return html`
umb-property-editor-ui-block-type-group-configuration
`; - } - - static override styles = [UmbTextStyles]; -} - -export default UmbPropertyEditorUIBlockGridGroupConfigurationElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-property-editor-ui-block-type-group-configuration': UmbPropertyEditorUIBlockGridGroupConfigurationElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.stories.ts deleted file mode 100644 index 97b1de48e0..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.stories.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { UmbPropertyEditorUIBlockGridGroupConfigurationElement } from './property-editor-ui-block-type-group-configuration.element.js'; -import type { Meta, StoryObj } from '@storybook/web-components'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -import './property-editor-ui-block-type-group-configuration.element.js'; - -const meta: Meta = { - title: 'Property Editor UIs/Block Grid Group Configuration', - component: 'umb-property-editor-ui-block-type-group-configuration', - id: 'umb-property-editor-ui-block-type-group-configuration', -}; - -export default meta; -type Story = StoryObj; - -export const Overview: Story = { - render: () => - html``, -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.test.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.test.ts deleted file mode 100644 index ba1f28624b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/property-editor-ui-block-type-group-configuration.test.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { UmbPropertyEditorUIBlockGridGroupConfigurationElement } from './property-editor-ui-block-type-group-configuration.element.js'; -import { expect, fixture, html } from '@open-wc/testing'; -import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils'; - -describe('UmbPropertyEditorUIBlockGridGroupConfigurationElement', () => { - let element: UmbPropertyEditorUIBlockGridGroupConfigurationElement; - - beforeEach(async () => { - element = await fixture(html` - - `); - }); - - it('is defined with its own instance', () => { - expect(element).to.be.instanceOf(UmbPropertyEditorUIBlockGridGroupConfigurationElement); - }); - - if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) { - it('passes the a11y audit', async () => { - await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); - }); - } -}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/manifests.ts deleted file mode 100644 index 971433dd0d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/manifests.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { manifest as blockTypeGroupManifest } from './block-type-group-configuration/manifests.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; - -export const manifests: Array = [blockTypeGroupManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/index.ts new file mode 100644 index 0000000000..04228760c1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/index.ts @@ -0,0 +1 @@ +export * from './block-type-workspace.context-token.js';