Bugfix: Use the EyeDropper Color Picker for choosing colors in blocks

src/assets/lang/bs.ts

@@ -2219,8 +2219,8 @@ export default {
 		forceHideContentEditor: 'Sakrij uređivač sadržaja',
 		forceHideContentEditorHelp:
 			'Sakrijte dugme za uređivanje sadržaja i uređivač sadržaja iz preklapanja Block Editor.',
-		girdInlineEditing: 'Inline editovanje',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Inline editovanje',
+		gridInlineEditingHelp:
 			'Omogućava inline uređivanje za prvo svojstvo. Dodatna svojstva se mogu uređivati u prekrivaču.',
 		blockHasChanges: 'Izmijenili ste ovaj sadržaj. Jeste li sigurni da ih želite odbaciti?',
 		confirmCancelBlockCreationHeadline: 'Odbaciti kreiranje?',

src/assets/lang/cy-gb.ts

@@ -2469,8 +2469,8 @@ export default {
 		getSampleDescription:
 			"Bydd hyn yn ychwanegu Blociau sylfaenol ac yn eich helpu i ddechrau gyda'r Golygydd Grid Bloc. Fe gewch Blociau ar gyfer Pennawd, Testun Cyfoethog, Delwedd, yn ogystal â Chynllun Dwy Golofn.",
 		getSampleButton: 'Gosod',
-		girdInlineEditing: 'Golygu mewnol',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Golygu mewnol',
+		gridInlineEditingHelp:
 			'Yn galluogi golygu mewnol ar gyfer yr Eiddo cyntaf. Gellir golygu priodweddau ychwanegol yn y droshaen.',
 		areaAllowedBlocksEmpty:
 			'Yn ddiofyn, caniateir pob math bloc mewn Ardal, Defnyddiwch yr opsiwn hwn i ganiatáu mathau dethol yn unig.',

src/assets/lang/da-dk.ts

@@ -2237,7 +2237,7 @@ export default {
 		addCustomStylesheet: 'Tilføj stylesheet',
 		headlineEditorAppearance: 'Redigerings udseende',
 		headlineDataModels: 'Data modeller',
-		headlineCatalogueAppearance: 'katalog udseende',
+		headlineCatalogueAppearance: 'Katalog udseende',
 		labelBackgroundColor: 'Baggrunds farve',
 		labelIconColor: 'Ikon farve',
 		labelContentElementType: 'Indholds model',
@@ -2268,8 +2268,8 @@ export default {
 		headlineAdvanced: 'Avanceret',
 		forceHideContentEditor: 'Skjul indholdseditoren',
 		forceHideContentEditorHelp: 'Skjul indholds redigerings knappen samt indholdseditoren i Blok Redigerings vinduet',
-		girdInlineEditing: 'Direkte redigering',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Direkte redigering',
+		gridInlineEditingHelp:
 			'Tilføjer direkte redigering a det første felt. Yderligere felter optræder kun i redigerings vinduet.',
 		blockHasChanges: 'Du har lavet ændringer til dette indhold. Er du sikker på at du vil kassere dem?',
 		confirmCancelBlockCreationHeadline: 'Annuller oprettelse?',

src/assets/lang/en-us.ts

@@ -2403,8 +2403,8 @@ export default {
 		headlineAdvanced: 'Advanced',
 		forceHideContentEditor: 'Hide content editor',
 		forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay',
-		girdInlineEditing: 'Inline editing',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Inline editing',
+		gridInlineEditingHelp:
 			'Enables inline editing for the first Property. Additional properties can be edited in the overlay.',
 		blockHasChanges: 'You have made changes to this content. Are you sure you want to discard them?',
 		confirmCancelBlockCreationHeadline: 'Discard creation?',

src/assets/lang/en.ts

@@ -2466,8 +2466,8 @@ export default {
 		headlineAdvanced: 'Advanced',
 		forceHideContentEditor: 'Hide content editor',
 		forceHideContentEditorHelp: 'Hide the content edit button and the content editor from the Block Editor overlay.',
-		girdInlineEditing: 'Inline editing',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Inline editing',
+		gridInlineEditingHelp:
 			'Enables inline editing for the first Property. Additional properties can be edited in the overlay.',
 		blockHasChanges: 'You have made changes to this content. Are you sure you want to discard them?',
 		confirmCancelBlockCreationHeadline: 'Discard creation?',

src/assets/lang/hr-hr.ts

@@ -2279,8 +2279,8 @@ export default {
 		headlineAdvanced: 'Napredno',
 		forceHideContentEditor: 'Sakrij uređivač sadržaja',
 		forceHideContentEditorHelp: 'Sakrij gumb za uređivanje sadržaja i uređivač sadržaja iz preklapanja Block Editor.',
-		girdInlineEditing: 'Inline uređivanje',
-		girdInlineEditingHelp:
+		gridInlineEditing: 'Inline uređivanje',
+		gridInlineEditingHelp:
 			'Omogućava inline uređivanje za prvo svojstvo. Dodatna svojstva se mogu uređivati u prekrivaču.',
 		blockHasChanges: 'Izmijenili ste ovaj sadržaj. Jeste li sigurni da ih želite odbaciti?',
 		confirmCancelBlockCreationHeadline: 'Odbaciti kreiranje?',

src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts

@@ -7,31 +7,33 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
 export class UmbBlockGridTypeWorkspaceViewAdvancedElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	override render() {
 		return html`
-			<uui-box headline="Advanced">
+			<uui-box headline=${this.localize.term('blockEditor_headlineAdvanced')}>
 				<umb-property
-					label="Overlay size"
+					label=${this.localize.term('blockEditor_labelEditorSize')}
 					alias="editorSize"
 					property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
 				<umb-property
-					label="Inline editing"
+					label=${this.localize.term('blockEditor_gridInlineEditing')}
 					alias="inlineEditing"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
 				<umb-property
-					label="Hide content editor"
+					label=${this.localize.term('blockEditor_forceHideContentEditor')}
 					alias="hideContentEditor"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
 			</uui-box>
-			<uui-box headline="Catalogue appearance">
+			<uui-box headline=${this.localize.term('blockEditor_headlineCatalogueAppearance')}>
 				<umb-property
-					label="Background color"
+					label=${this.localize.term('blockEditor_labelBackgroundColor')}
 					alias="backgroundColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
-					label="Icon color"
+					label=${this.localize.term('blockEditor_labelIconColor')}
 					alias="iconColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
-					label="Thumbnail"
+					label=${this.localize.term('blockEditor_thumbnail')}
 					alias="thumbnail"
 					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
 					.config=${[

src/packages/block/block-list/workspace/views/block-list-type-workspace-view.element.ts

@@ -7,20 +7,20 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-
 export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
 	override render() {
 		return html`
-			<uui-box headline="Editor Appearance">
+			<uui-box headline=${this.localize.term('blockEditor_headlineEditorAppearance')}>
 				<umb-property
-					label="Label"
+					label=${this.localize.term('general_label')}
 					alias="label"
 					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
 				<umb-property
-					label="Overlay size"
+					label=${this.localize.term('blockEditor_labelEditorSize')}
 					alias="editorSize"
 					property-editor-ui-alias="Umb.PropertyEditorUi.OverlaySize"></umb-property>
 			</uui-box>
-			<uui-box headline="Data models">
+			<uui-box headline=${this.localize.term('blockEditor_headlineDataModels')}>
 				<!-- TODO: implement readonly mode for umb-property -->
 				<umb-property
-					label="Content Model"
+					label=${this.localize.term('blockEditor_labelContentElementType')}
 					alias="contentElementTypeKey"
 					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
 					readonly
@@ -35,7 +35,7 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 						},
 					]}></umb-property>
 				<umb-property
-					label="Settings Model"
+					label=${this.localize.term('blockEditor_labelSettingsElementType')}
 					alias="settingsElementTypeKey"
 					property-editor-ui-alias="Umb.PropertyEditorUi.DocumentTypePicker"
 					.config=${[
@@ -49,17 +49,19 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 						},
 					]}></umb-property>
 			</uui-box>
-			<uui-box headline="Catalogue appearance">
+			<uui-box headline=${this.localize.term('blockEditor_headlineCatalogueAppearance')}>
 				<umb-property
-					label="Background color"
+					label=${this.localize.term('blockEditor_labelBackgroundColor')}
 					alias="backgroundColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
-					label="Icon color"
+					label=${this.localize.term('blockEditor_labelIconColor')}
 					alias="iconColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
-					label="Thumbnail"
+					label=${this.localize.term('blockEditor_thumbnail')}
 					alias="thumbnail"
 					property-editor-ui-alias="Umb.PropertyEditorUi.StaticFilePicker"
 					.config=${[
@@ -69,9 +71,9 @@ export class UmbBlockListTypeWorkspaceViewSettingsElement extends UmbLitElement
 						},
 					]}></umb-property>
 			</uui-box>
-			<uui-box headline="Advanced">
+			<uui-box headline=${this.localize.term('blockEditor_headlineAdvanced')}>
 				<umb-property
-					label="Hide Content Editor"
+					label=${this.localize.term('blockEditor_forceHideContentEditor')}
 					alias="forceHideContentEditorInOverlay"
 					property-editor-ui-alias="Umb.PropertyEditorUi.Toggle"></umb-property>
 			</uui-box>

src/packages/block/block-rte/workspace/views/block-rte-type-workspace-view.element.ts

@@ -57,11 +57,13 @@ export class UmbBlockRteTypeWorkspaceViewSettingsElement extends UmbLitElement i
 				<umb-property
 					label="Background color"
 					alias="backgroundColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
 					label="Icon color"
 					alias="iconColor"
-					property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.EyeDropper"
+					.config=${[{ alias: 'showAlpha', value: true }]}></umb-property>
 				<umb-property
 					label="Thumbnail"
 					alias="thumbnail"

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

@@ -99,7 +99,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 				.background=${this.backgroundColor}>
 				${this._iconFile
 					? html`<img src=${this._iconFile} alt="" />`
-					: html`<umb-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></umb-icon>`}
+					: html`<umb-icon name=${this._fallbackIcon ?? ''} color=${ifDefined(this.iconColor)}></umb-icon>`}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;

src/packages/core/components/icon/icon.element.ts

@@ -1,6 +1,7 @@
 import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, ifDefined, css, styleMap } from '@umbraco-cms/backoffice/external/lit';
+import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
@@ -10,45 +11,60 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
  */
 @customElement('umb-icon')
 export class UmbIconElement extends UmbLitElement {
+	#color?: string;
+	#fallbackColor?: string;
+
 	@state()
 	private _icon?: string;
 
 	@state()
-	private _color?: string;
+	private _style: StyleInfo = {};
 
+	/**
+	 * Color alias or a color code directly.\
+	 * If a color has been set via the name property, this property will override it.
+	 * */
 	@property({ type: String })
 	public set color(value: string) {
-		if (!value) return;
-		this.#setColorStyle(value);
-	}
-	public get color(): string {
-		return this._color ?? '';
+		this.#color = value;
+		this.#updateColorStyle();
 	}
-
-	#setColorStyle(value: string) {
-		const alias = value.replace('color-', '');
-		const variable = extractUmbColorVariable(alias);
-		this._color = alias ? (variable ? `--uui-icon-color: var(${variable})` : `--uui-icon-color: ${alias}`) : undefined;
+	public get color(): string | undefined {
+		return this.#color || this.#fallbackColor;
 	}
 
+	/**
+	 * The icon name. Can be appended with a color.\
+	 * Example **icon-heart color-red**
+	 */
 	@property({ type: String })
 	public set name(value: string | undefined) {
-		const [icon, alias] = value ? value.split(' ') : [];
-
-		if (alias) {
-			this.#setColorStyle(alias);
-		} else {
-			this._color = undefined;
-		}
-
+		const [icon, color] = value ? value.split(' ') : [];
+		this.#fallbackColor = color;
 		this._icon = icon;
+		this.#updateColorStyle();
 	}
 	public get name(): string | undefined {
 		return this._icon;
 	}
 
+	#updateColorStyle() {
+		const value = this.#color || this.#fallbackColor;
+
+		if (!value) {
+			this._style = { '--uui-icon-color': undefined };
+			return;
+		}
+
+		const color = value.replace('color-', '');
+		const variable = extractUmbColorVariable(color);
+		const styling = variable ? `var(${variable})` : color;
+
+		this._style = { '--uui-icon-color': styling };
+	}
+
 	override render() {
-		return html`<uui-icon name=${ifDefined(this._icon)} style=${ifDefined(this._color)}></uui-icon>`;
+		return html`<uui-icon name=${ifDefined(this._icon)} style=${styleMap(this._style)}></uui-icon>`;
 	}
 
 	static override styles = [