yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poc custom view guide

Browse Source
This commit is contained in:
Niels Lyngsø
2024-08-02 14:44:20 +02:00
parent 1b4f119362
commit 31481c9bca
13 changed files with 119 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
View File

@@ -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',

1
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
View File

@@ -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',

10
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
View File

@@ -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"></umb-property>
</uui-box>
<uui-box headline=${this.localize.term('blockEditor_headlineCustomView')}>
<umb-property-layout label=${this.localize.term('blockEditor_labelCustomView')}>
<umb-block-type-custom-view-guide
slot="editor"
block-editor-type=${UMB_BLOCK_GRID}></umb-block-type-custom-view-guide>
</umb-property-layout>
</uui-box>
<uui-box headline=${this.localize.term('blockEditor_headlineCatalogueAppearance')}>
<umb-property
label=${this.localize.term('blockEditor_labelBackgroundColor')}

103
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts Normal file
View File

@@ -0,0 +1,103 @@
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, customElement, state, property, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { umbExtensionsRegistry, type ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
@customElement('umb-block-type-custom-view-guide')
export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
#contentTypeAlias?: string;
#blockEditorType?: string;
@property({ type: String, attribute: 'block-editor-type' })
get blockEditorType() {
return this.#blockEditorType;
}
set blockEditorType(value) {
this.#blockEditorType = value;
this.#loadManifests();
}
@state()
private _manifests?: Array<ManifestBlockEditorCustomView>;
#repository = new UmbDocumentTypeDetailRepository(this);
constructor() {
super();
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
this.observe(
await context.propertyValueByAlias<string | undefined>('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` <div>
${repeat(
this._manifests,
(x) => x.alias,
(x) => html`
<uui-ref-node standalone name=${x.name} detail=${x.alias}>
<umb-icon slot="icon" name=${'icon-flowerpot'}></umb-icon
></uui-ref-node>
`,
)}
</div>`
: 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;
}
}

1
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/index.ts
View File

@@ -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';

1
src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts
View File

@@ -1,2 +1,3 @@
export * from './components/index.js';
export * from './types.js';
export * from './workspace/index.js';

3
src/Umbraco.Web.UI.Client/src/packages/block/block-type/manifests.ts
View File

@@ -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<ManifestTypes> = [...workspaceManifests, ...propertyEditorManifests];
export const manifests: Array<ManifestTypes> = [...workspaceManifests];

13
src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/block-type-group-configuration/manifests.ts
View File

@@ -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',
},
};

34
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
View File

@@ -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`<div>umb-property-editor-ui-block-type-group-configuration</div>`;
}
static override styles = [UmbTextStyles];
}
export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-block-type-group-configuration': UmbPropertyEditorUIBlockGridGroupConfigurationElement;
}
}

19
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
View File

@@ -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<UmbPropertyEditorUIBlockGridGroupConfigurationElement> = {
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<typeof UmbPropertyEditorUIBlockGridGroupConfigurationElement>;
export const Overview: Story = {
render: () =>
html`<umb-property-editor-ui-block-type-group-configuration></umb-property-editor-ui-block-type-group-configuration>`,
};

23
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
View File

@@ -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`
<umb-property-editor-ui-block-type-group-configuration></umb-property-editor-ui-block-type-group-configuration>
`);
});
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);
});
}
});

4
src/Umbraco.Web.UI.Client/src/packages/block/block-type/property-editors/manifests.ts
View File

@@ -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<ManifestTypes> = [blockTypeGroupManifest];

1
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './block-type-workspace.context-token.js';