-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2167 from umbraco/v14/feature/block-type-custom-v…
…iew-guide Block type custom view guide
- Loading branch information
Showing
557 changed files
with
881 additions
and
677 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
138 changes: 138 additions & 0 deletions
138
...lock-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; | ||
import { html, customElement, state, property, css } from '@umbraco-cms/backoffice/external/lit'; | ||
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property'; | ||
import { | ||
UMB_MANIFEST_VIEWER_MODAL, | ||
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'; | ||
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; | ||
|
||
@customElement('umb-block-type-custom-view-guide') | ||
export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement { | ||
#contentTypeName?: string; | ||
#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.#contentTypeName = model?.name; | ||
this.#contentTypeAlias = model?.alias; | ||
this.#loadManifests(); | ||
}, | ||
'observeContentType', | ||
); | ||
}, | ||
'observeContentElementTypeKey', | ||
); | ||
}); | ||
} | ||
|
||
#loadManifests() { | ||
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; | ||
}; | ||
|
||
async #viewManifest(manifest: ManifestBlockEditorCustomView) { | ||
const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); | ||
modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest }); | ||
} | ||
|
||
async #generateManifest() { | ||
const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); | ||
|
||
const manifest = { | ||
type: 'blockEditorCustomView', | ||
alias: 'Local.blockEditorCustomView.' + this.#contentTypeAlias, | ||
name: 'Block Editor Custom View for ' + this.#contentTypeName, | ||
element: '[replace with path to your web component js file...]', | ||
forContentTypeAlias: this.#contentTypeAlias, | ||
forBlockEditor: this.#blockEditorType, | ||
}; | ||
modalManager.open(this, UMB_MANIFEST_VIEWER_MODAL, { data: manifest }); | ||
} | ||
|
||
override render() { | ||
return this._manifests && this._manifests.length > 0 | ||
? html` <div> | ||
<umb-ref-manifest | ||
standalone | ||
@open=${() => this.#viewManifest(this._manifests![0])} | ||
.manifest=${this._manifests[0]}></umb-ref-manifest> | ||
</div>` | ||
: html`<uui-button | ||
id="add-button" | ||
look="placeholder" | ||
label="Generate manifest for this Block Type" | ||
type="button" | ||
color="default" | ||
@click=${() => this.#generateManifest()}></uui-button>`; | ||
} | ||
|
||
static override styles = [ | ||
css` | ||
#add-button { | ||
text-align: center; | ||
width: 100%; | ||
} | ||
`, | ||
]; | ||
} | ||
|
||
export default UmbBlockTypeCustomViewGuideElement; | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
'umb-block-type-custom-view-guide': UmbBlockTypeCustomViewGuideElement; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './components/index.js'; | ||
export * from './types.js'; | ||
export * from './workspace/index.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 changes: 0 additions & 13 deletions
13
src/packages/block/block-type/property-editors/block-type-group-configuration/manifests.ts
This file was deleted.
Oops, something went wrong.
34 changes: 0 additions & 34 deletions
34
...ock-type-group-configuration/property-editor-ui-block-type-group-configuration.element.ts
This file was deleted.
Oops, something went wrong.
19 changes: 0 additions & 19 deletions
19
...ock-type-group-configuration/property-editor-ui-block-type-group-configuration.stories.ts
This file was deleted.
Oops, something went wrong.
23 changes: 0 additions & 23 deletions
23
.../block-type-group-configuration/property-editor-ui-block-type-group-configuration.test.ts
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './block-type-workspace.context-token.js'; |
1 change: 0 additions & 1 deletion
1
src/packages/core/content-type/modals/composition-picker/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1 @@ | ||
export * from './composition-picker-modal.element.js'; | ||
export * from './composition-picker-modal.token.js'; |
8 changes: 8 additions & 0 deletions
8
src/packages/core/content-type/modals/composition-picker/manifest.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; | ||
|
||
export const manifest: ManifestModal = { | ||
type: 'modal', | ||
alias: 'Umb.Modal.CompositionPicker', | ||
name: 'ContentType Composition Picker Modal', | ||
element: () => import('./composition-picker-modal.element.js'), | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,3 @@ | ||
import type { ManifestModal } from '@umbraco-cms/backoffice/extension-registry'; | ||
import { manifest } from './composition-picker/manifest.js'; | ||
|
||
const modals: Array<ManifestModal> = [ | ||
{ | ||
type: 'modal', | ||
alias: 'Umb.Modal.CompositionPicker', | ||
name: 'ContentType Composition Picker Modal', | ||
element: () => import('./composition-picker/composition-picker-modal.element.js'), | ||
}, | ||
]; | ||
|
||
export const manifests = modals; | ||
export const manifests = [manifest]; |
Oops, something went wrong.