FEATURE FIX Changing icons injection behaviour and opting for and php exposed url to fix svg injection problem with non admin editors

blocks/highlight/build/block.json

@@ -20,7 +20,7 @@
       "source": "html",
       "selector": "h3"
     },
-    "iconName": {
+    "iconUrl": {
       "type": "string",
       "default": "key"
     },

blocks/highlight/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '5e5d7d1fc3323c17a47b');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '8cdbe6d5e08fd9883c1a');

blocks/highlight/build/index.css

@@ -1,6 +1,6 @@
-/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+/*!****************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.3_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.89.0_webpack@5.99.9/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
+  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
-  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+  \****************************************************************************************************************************************************************************************************************************************************/
 /**
  * The following styles get applied inside the editor only.
  *

blocks/highlight/build/style-index.css

@@ -1,6 +1,6 @@
-/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+/*!***************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.3_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.89.0_webpack@5.99.9/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
+  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
-  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+  \***************************************************************************************************************************************************************************************************************************************************/
 /**
  * The following styles get applied both on the front of your site
  * and in the editor.

blocks/highlight/highlight.php

@@ -0,0 +1,9 @@
+<?php
+
+add_action('enqueue_block_editor_assets', function () {
+	wp_localize_script(
+		'homegrade-content-blocks-highlight-editor-script',
+		'HOMEGRADE_HIGHLIGHT',
+		['iconsBaseUrl' => plugin_dir_url(__FILE__) . 'src/img/']
+	);
+});

blocks/highlight/src/block.json

@@ -20,7 +20,7 @@
 			"source": "html",
 			"selector": "h3"
 		},
-		"iconName": {
+		"iconUrl": {
 			"type": "string",
 			"default": "key"
 		},

blocks/highlight/src/deprecated.js

@@ -1,111 +1,288 @@
-import { createBlock } from "@wordpress/blocks";
+import { createBlock } from '@wordpress/blocks';
-import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
+import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
-import { useSelect } from "@wordpress/data";
+import { useSelect } from '@wordpress/data';
 
-import keyIcon from "./img/icon_key.svg";
+import keyIcon from './img/icon_key.svg';
-import chainIcon from "./img/icon_chain.svg";
+import chainIcon from './img/icon_chain.svg';
-import houseIcon from "./img/icon_house.svg";
+import houseIcon from './img/icon_house.svg';
-import bulbIcon from "./img/icon_bulb.svg";
+import bulbIcon from './img/icon_bulb.svg';
-import warningIcon from "./img/icon_warning.svg";
+import warningIcon from './img/icon_warning.svg';
-import acousticIcon from "./img/icon_acoustic.svg";
+import acousticIcon from './img/icon_acoustic.svg';
-import documentationIcon from "./img/icon_documentation.svg";
+import documentationIcon from './img/icon_documentation.svg';
-import notificationIcon from "./img/icon_notification.svg";
+import notificationIcon from './img/icon_notification.svg';
-import searchIcon from "./img/icon_search.svg";
+import searchIcon from './img/icon_search.svg';
-import infoIcon from "./img/icon_info.svg";
+import infoIcon from './img/icon_info.svg';
-import tipIcon from "./img/icon_tip.svg";
+import tipIcon from './img/icon_tip.svg';
-import euroIcon from "./img/icon_euro.svg";
+import euroIcon from './img/icon_euro.svg';
 
-const v1 = {
+// v2 — prior version (icons imported in JS, no persistent iconUrl attribute)
+const v2 = {
 	attributes: {
 		title: {
-			type: "string",
+			type: 'string',
-			source: "html",
+			source: 'html',
-			selector: "h3",
+			selector: 'h3',
 		},
 		iconName: {
-			type: "string",
+			type: 'string',
-			default: "key",
+			default: 'key',
 		},
 		hasTitle: {
-			type: "boolean",
+			type: 'boolean',
 			default: true,
 		},
-		hasTitleIcon: {
+		hasIcon: {
-			type: "boolean",
+			type: 'boolean',
 			default: true,
 		},
 		hasLogo: {
-			type: "boolean",
+			type: 'boolean',
 			default: false,
 		},
 		logoId: {
-			type: "number",
+			type: 'number',
 		},
 		logoAlt: {
-			type: "string",
+			type: 'string',
 		},
 		logoUrl: {
-			type: "string",
+			type: 'string',
 		},
 		variant: {
-			type: "string",
+			type: 'string',
-			default: "classic",
+			default: 'classic',
+		},
+		iconPosition: {
+			type: 'string',
+			default: 'top',
+		},
+		// Read historical <img src> to ensure the deprecated save matches exactly
+		iconUrl: {
+			type: 'string',
+			source: 'attribute',
+			selector: '.icon .icon__image',
+			attribute: 'src',
 		},
 	},
-
 	save({ attributes }) {
 		const {
 			title,
 			iconName,
 			hasTitle,
-			hasTitleIcon,
+			hasIcon,
 			hasLogo,
-			logoId,
 			logoAlt,
 			logoUrl,
 			variant,
+			iconPosition,
+			iconUrl,
 		} = attributes;
 
 		function getIconPicture() {
 			switch (iconName) {
-				case "key":
+				case 'key':
+					return keyIcon;
+				case 'chain':
+					return chainIcon;
+				case 'house':
+					return houseIcon;
+				case 'bulb':
+					return bulbIcon;
+				case 'warning':
+					return warningIcon;
+				case 'acoustic':
+					return acousticIcon;
+				case 'documentation':
+					return documentationIcon;
+				case 'notification':
+					return notificationIcon;
+				case 'search':
+					return searchIcon;
+				case 'info':
+					return infoIcon;
+				case 'tip':
+					return tipIcon;
+				case 'euro':
+					return euroIcon;
+				default:
+					return '';
+			}
+		}
+		// Use exact stored src when present for perfect match
+		const iconPicture = iconUrl || getIconPicture();
+
+		return (
+			<section
+				{...useBlockProps.save({
+					className: `homegrade-blocks-highlight ${
+						variant ? `homegrade-blocks-highlight--${variant}` : ''
+					}`,
+				})}
+			>
+				{hasTitle && (
+					<div
+						className={`homegrade-blocks-highlight__titling ${
+							!hasIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
+						}`}
+					>
+						{hasIcon && iconPosition === 'top' && (
+							<div className="icon">
+								<img className="icon__image" src={iconPicture} alt="" />
+							</div>
+						)}
+
+						<RichText.Content
+							tagName="h3"
+							value={title}
+							className="homegrade-blocks-highlight__block-title"
+						/>
+					</div>
+				)}
+				<div className="homegrade-blocks-highlight__content">
+					{hasIcon && iconPosition === 'side' && !hasTitle && (
+						<div className="icon">
+							<img src={iconPicture} alt="" />
+						</div>
+					)}
+
+					<div className="homegrade-blocks-highlight__content__innerblocks">
+						<InnerBlocks.Content />
+					</div>
+					{hasLogo && logoUrl && (
+						<div className="homegrade-blocks-highlight__logo">
+							<img src={logoUrl} alt={logoAlt} />
+						</div>
+					)}
+				</div>
+			</section>
+		);
+	},
+	migrate(attributes) {
+		// Compute iconUrl from iconName for the new version (stored attribute),
+		// using file URL mapping so next save writes http(s) src instead of data URI.
+		const ICON_FILES = {
+			key: 'icon_key.svg',
+			chain: 'icon_chain.svg',
+			house: 'icon_house.svg',
+			bulb: 'icon_bulb.svg',
+			warning: 'icon_warning.svg',
+			acoustic: 'icon_acoustic.svg',
+			documentation: 'icon_documentation.svg',
+			notification: 'icon_notification.svg',
+			search: 'icon_search.svg',
+			info: 'icon_info.svg',
+			tip: 'icon_tip.svg',
+			euro: 'icon_euro.svg',
+		};
+		let iconUrl = '';
+		const filename = ICON_FILES[attributes.iconName];
+		if (filename) {
+			// Prefer PHP-exposed public base URL when available (robust in all environments)
+			const baseUrl =
+				typeof HOMEGRADE_HIGHLIGHT !== 'undefined' && HOMEGRADE_HIGHLIGHT?.iconsBaseUrl
+					? HOMEGRADE_HIGHLIGHT.iconsBaseUrl
+					: '';
+			if (baseUrl) {
+				iconUrl = baseUrl + filename;
+			} else {
+				// Fallback: rely on bundler URL resolution
+				try {
+					iconUrl = new URL(`./img/${filename}`, import.meta.url).toString();
+				} catch (e) {
+					iconUrl = '';
+				}
+			}
+		}
+
+		return {
+			...attributes,
+			iconUrl,
+		};
+	},
+};
+
+const v1 = {
+	attributes: {
+		title: {
+			type: 'string',
+			source: 'html',
+			selector: 'h3',
+		},
+		iconName: {
+			type: 'string',
+			default: 'key',
+		},
+		hasTitle: {
+			type: 'boolean',
+			default: true,
+		},
+		hasTitleIcon: {
+			type: 'boolean',
+			default: true,
+		},
+		hasLogo: {
+			type: 'boolean',
+			default: false,
+		},
+		logoId: {
+			type: 'number',
+		},
+		logoAlt: {
+			type: 'string',
+		},
+		logoUrl: {
+			type: 'string',
+		},
+		variant: {
+			type: 'string',
+			default: 'classic',
+		},
+	},
+
+	save({ attributes }) {
+		const { title, iconName, hasTitle, hasTitleIcon, hasLogo, logoId, logoAlt, logoUrl, variant } =
+			attributes;
+
+		function getIconPicture() {
+			switch (iconName) {
+				case 'key':
 					return keyIcon;
 
-				case "chain":
+				case 'chain':
 					return chainIcon;
 
-				case "house":
+				case 'house':
 					return houseIcon;
 
-				case "bulb":
+				case 'bulb':
 					return bulbIcon;
 
-				case "warning":
+				case 'warning':
 					return warningIcon;
 
-				case "acoustic":
+				case 'acoustic':
 					return acousticIcon;
 
-				case "documentation":
+				case 'documentation':
 					return documentationIcon;
 
-				case "notification":
+				case 'notification':
 					return notificationIcon;
 
-				case "search":
+				case 'search':
 					return searchIcon;
 
-				case "info":
+				case 'info':
 					return infoIcon;
 
-				case "tip":
+				case 'tip':
 					return tipIcon;
 
-				case "euro":
+				case 'euro':
 					return euroIcon;
 
 				default:
-					return "";
+					return '';
 			}
 		}
 		const iconPicture = getIconPicture();
@@ -114,16 +291,14 @@ const v1 = {
 			<section
 				{...useBlockProps.save({
 					className: `homegrade-blocks-highlight ${
-						variant ? `homegrade-blocks-highlight--${variant}` : ""
+						variant ? `homegrade-blocks-highlight--${variant}` : ''
 					}`,
 				})}
 			>
 				{hasTitle && (
 					<div
 						className={`homegrade-blocks-highlight__titling ${
-							!hasTitleIcon
+							!hasTitleIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
-								? "homegrade-blocks-highlight__titling--has-no-icon"
-								: ""
 						}`}
 					>
 						{hasTitleIcon && (
@@ -159,4 +334,4 @@ const v1 = {
 	},
 };
 
-export default [v1];
+export default [v2KSES, v2, v1];

blocks/highlight/src/edit.js

@@ -1,17 +1,5 @@
-import { __ } from "@wordpress/i18n";
+import { __ } from '@wordpress/i18n';
-import "./editor.scss";
+import './editor.scss';
-import keyIcon from "./img/icon_key.svg";
-import chainIcon from "./img/icon_chain.svg";
-import houseIcon from "./img/icon_house.svg";
-import bulbIcon from "./img/icon_bulb.svg";
-import warningIcon from "./img/icon_warning.svg";
-import acousticIcon from "./img/icon_acoustic.svg";
-import documentationIcon from "./img/icon_documentation.svg";
-import notificationIcon from "./img/icon_notification.svg";
-import searchIcon from "./img/icon_search.svg";
-import infoIcon from "./img/icon_info.svg";
-import tipIcon from "./img/icon_tip.svg";
-import euroIcon from "./img/icon_euro.svg";
 
 import {
 	RichText,
@@ -20,9 +8,9 @@ import {
 	InnerBlocks,
 	InspectorControls,
 	MediaReplaceFlow,
-} from "@wordpress/block-editor";
+} from '@wordpress/block-editor';
 
-import { trash } from "@wordpress/icons";
+import { trash } from '@wordpress/icons';
 import {
 	Button,
 	ToolbarButton,
@@ -31,12 +19,13 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	RadioControl,
-} from "@wordpress/components";
+} from '@wordpress/components';
 
 export default function Edit({ attributes, setAttributes }) {
 	const {
 		title,
 		iconName,
+		iconUrl,
 		hasTitle,
 		hasIcon,
 		hasLogo,
@@ -47,51 +36,28 @@ export default function Edit({ attributes, setAttributes }) {
 		iconPosition,
 	} = attributes;
 
-	function getIconPicture() {
+	const ICON_FILES = {
-		switch (iconName) {
+		key: 'icon_key.svg',
-			case "key":
+		chain: 'icon_chain.svg',
-				return keyIcon;
+		house: 'icon_house.svg',
-
+		bulb: 'icon_bulb.svg',
-			case "chain":
+		warning: 'icon_warning.svg',
-				return chainIcon;
+		acoustic: 'icon_acoustic.svg',
-
+		documentation: 'icon_documentation.svg',
-			case "house":
+		notification: 'icon_notification.svg',
-				return houseIcon;
+		search: 'icon_search.svg',
-
+		info: 'icon_info.svg',
-			case "bulb":
+		tip: 'icon_tip.svg',
-				return bulbIcon;
+		euro: 'icon_euro.svg',
-
+	};
-			case "warning":
+	const getIconUrl = (iconName) => {
-				return warningIcon;
+		if (!iconName) return '';
-
+		return HOMEGRADE_HIGHLIGHT.iconsBaseUrl + ICON_FILES[iconName];
-			case "acoustic":
+	};
-				return acousticIcon;
-
-			case "documentation":
-				return documentationIcon;
-
-			case "notification":
-				return notificationIcon;
-
-			case "search":
-				return searchIcon;
-
-			case "info":
-				return infoIcon;
-
-			case "tip":
-				return tipIcon;
-
-			case "euro":
-				return euroIcon;
-
-			default:
-				return "";
-		}
-	}
 
 	function onIconChange(newIconName) {
-		setAttributes({ iconName: newIconName });
+		const newIconUrl = getIconUrl(newIconName);
+		setAttributes({ iconName: newIconName, iconUrl: newIconUrl });
 	}
 	function onTitleChange(title) {
 		setAttributes({ title });
@@ -133,8 +99,6 @@ export default function Edit({ attributes, setAttributes }) {
 		});
 	}
 
-	let iconPicture = getIconPicture();
-
 	function handleIconPositionChange(newPosition) {
 		setAttributes({ iconPosition: newPosition });
 	}
@@ -143,7 +107,7 @@ export default function Edit({ attributes, setAttributes }) {
 		<>
 			<InspectorControls>
 				<PanelBody
-					title={__("Variantes", "homegrade-blocks__texte-fonctionnel")}
+					title={__('Variantes', 'homegrade-blocks__texte-fonctionnel')}
 					initialOpen={true}
 				>
 					<ToggleGroupControl
@@ -156,16 +120,8 @@ export default function Edit({ attributes, setAttributes }) {
 						<ToggleGroupControlOption label="Warning" value="warning" />
 						<ToggleGroupControlOption label="Gris" value="gray" />
 					</ToggleGroupControl>
-					<ToggleControl
+					<ToggleControl label="Afficher le titre" checked={hasTitle} onChange={onHasTitleChange} />
-						label="Afficher le titre"
+					<ToggleControl label="Afficher une Icone" checked={hasIcon} onChange={onhasIconChange} />
-						checked={hasTitle}
-						onChange={onHasTitleChange}
-					/>
-					<ToggleControl
-						label="Afficher une Icone"
-						checked={hasIcon}
-						onChange={onhasIconChange}
-					/>
 
 					{hasIcon && (
 						<RadioControl
@@ -174,30 +130,26 @@ export default function Edit({ attributes, setAttributes }) {
 							onChange={handleIconPositionChange}
 							options={[
 								{
-									label: "Avant le titre",
+									label: 'Avant le titre',
-									value: "top",
+									value: 'top',
-									description: "Seulement lorsque le titre est ACTIVÉ",
+									description: 'Seulement lorsque le titre est ACTIVÉ',
 								},
 								{
-									label: "Coté",
+									label: 'Coté',
-									value: "side",
+									value: 'side',
 									disabled: hasTitle,
-									description: "Seulement lorsque le titre est DÉSACTIVÉ",
+									description: 'Seulement lorsque le titre est DÉSACTIVÉ',
 								},
 							]}
 							selected={iconPosition}
 						/>
 					)}
-					<ToggleControl
+					<ToggleControl label="Attacher un logo" checked={hasLogo} onChange={onHasLogoChange} />
-						label="Attacher un logo"
-						checked={hasLogo}
-						onChange={onHasLogoChange}
-					/>
 				</PanelBody>
 				{hasLogo && (
 					<PanelBody
 						className="homegrade-blocks-highlight__panel-body"
-						title={__("Logo", "homegrade-blocks")}
+						title={__('Logo', 'homegrade-blocks')}
 					>
 						{logoUrl && <img src={logoUrl} alt={logoAlt} />}
 
@@ -205,13 +157,13 @@ export default function Edit({ attributes, setAttributes }) {
 							<MediaReplaceFlow
 								mediaId={logoId}
 								mediaUrl={logoUrl}
-								allowedTypes={["image"]}
+								allowedTypes={['image']}
 								accept="image/*"
 								onSelect={setLogoAttributes}
 								name={
 									!logoUrl
-										? __("Ajouter un Logo", "homegrade-blocks")
+										? __('Ajouter un Logo', 'homegrade-blocks')
-										: __("Remplacer", "homegrade-blocks")
+										: __('Remplacer', 'homegrade-blocks')
 								}
 							/>
 							{logoUrl && (
@@ -231,130 +183,127 @@ export default function Edit({ attributes, setAttributes }) {
 			</InspectorControls>
 			<BlockControls>
 				<ToolbarButton
-					title={"Clé"}
+					title={'Clé'}
-					icon={"admin-network"}
+					icon={'admin-network'}
-					isActive={iconName === "key"}
+					isActive={iconName === 'key'}
-					onClick={() => onIconChange("key")}
+					onClick={() => onIconChange('key')}
 				/>
 				<ToolbarButton
-					title={"Lien"}
+					title={'Lien'}
-					icon={"admin-links"}
+					icon={'admin-links'}
-					isActive={iconName === "chain"}
+					isActive={iconName === 'chain'}
-					onClick={() => onIconChange("chain")}
+					onClick={() => onIconChange('chain')}
 				/>
 				<ToolbarButton
-					title={"Homegrade"}
+					title={'Homegrade'}
-					icon={"admin-home"}
+					icon={'admin-home'}
-					isActive={iconName === "house"}
+					isActive={iconName === 'house'}
-					onClick={() => onIconChange("house")}
+					onClick={() => onIconChange('house')}
 				/>
 				<ToolbarButton
-					title={"Inspiration"}
+					title={'Inspiration'}
-					icon={"lightbulb"}
+					icon={'lightbulb'}
-					isActive={iconName === "bulb"}
+					isActive={iconName === 'bulb'}
-					onClick={() => onIconChange("bulb")}
+					onClick={() => onIconChange('bulb')}
 				/>
 				<ToolbarButton
-					title={"Attention"}
+					title={'Attention'}
-					icon={"warning"}
+					icon={'warning'}
-					isActive={iconName === "warning"}
+					isActive={iconName === 'warning'}
-					onClick={() => onIconChange("warning")}
+					onClick={() => onIconChange('warning')}
 				/>
 				<ToolbarButton
-					title={"Acoustique"}
+					title={'Acoustique'}
-					icon={"controls-volumeon"}
+					icon={'controls-volumeon'}
-					isActive={iconName === "acoustic"}
+					isActive={iconName === 'acoustic'}
-					onClick={() => onIconChange("acoustic")}
+					onClick={() => onIconChange('acoustic')}
 				/>
 				<ToolbarButton
-					title={"Documentation"}
+					title={'Documentation'}
-					icon={"book-alt"}
+					icon={'book-alt'}
-					isActive={iconName === "documentation"}
+					isActive={iconName === 'documentation'}
-					onClick={() => onIconChange("documentation")}
+					onClick={() => onIconChange('documentation')}
 				/>
 				<ToolbarButton
-					title={"Recherche"}
+					title={'Recherche'}
-					icon={"search"}
+					icon={'search'}
-					isActive={iconName === "search"}
+					isActive={iconName === 'search'}
-					onClick={() => onIconChange("search")}
+					onClick={() => onIconChange('search')}
 				/>
 				<ToolbarButton
-					title={"Notification"}
+					title={'Notification'}
-					icon={"bell"}
+					icon={'bell'}
-					isActive={iconName === "notification"}
+					isActive={iconName === 'notification'}
-					onClick={() => onIconChange("notification")}
+					onClick={() => onIconChange('notification')}
 				/>
 				<ToolbarButton
-					title={"Info"}
+					title={'Info'}
-					icon={"info"}
+					icon={'info'}
-					isActive={iconName === "info"}
+					isActive={iconName === 'info'}
-					onClick={() => onIconChange("info")}
+					onClick={() => onIconChange('info')}
 				/>
 				<ToolbarButton
-					title={"Euro"}
+					title={'Euro'}
-					icon={"money-alt"}
+					icon={'money-alt'}
-					isActive={iconName === "euro"}
+					isActive={iconName === 'euro'}
-					onClick={() => onIconChange("euro")}
+					onClick={() => onIconChange('euro')}
 				/>
 				<ToolbarButton
-					title={"Astuce"}
+					title={'Astuce'}
-					icon={"thumbs-up"}
+					icon={'thumbs-up'}
-					isActive={iconName === "tip"}
+					isActive={iconName === 'tip'}
-					onClick={() => onIconChange("tip")}
+					onClick={() => onIconChange('tip')}
 				/>
 			</BlockControls>
 			<section
 				{...useBlockProps({
 					className: `homegrade-blocks-highlight ${
-						variant ? `homegrade-blocks-highlight--${variant}` : ""
+						variant ? `homegrade-blocks-highlight--${variant}` : ''
 					}`,
 				})}
 			>
 				{hasTitle && (
 					<div
 						className={`homegrade-blocks-highlight__titling ${
-							!hasIcon ? "homegrade-blocks-highlight__titling--has-no-icon" : ""
+							!hasIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
 						}`}
 					>
-						{hasIcon && iconPosition === "top" && (
+						{hasIcon && iconPosition === 'top' && (
 							<div className="icon">
-								<img src={iconPicture} alt="" />
+								<img className="icon__image" src={iconUrl} alt="" />
 							</div>
 						)}
 						<RichText
 							className="homegrade-blocks-highlight__block-title"
 							onChange={onTitleChange}
 							value={title}
-							placeholder={__(
+							placeholder={__('Insérez un titre', 'homegrade-blocks__texte-fonctionnel')}
-								"Insérez un titre",
-								"homegrade-blocks__texte-fonctionnel"
-							)}
 							tagName="h3"
 							allowedFormats={[]}
 						/>
 					</div>
 				)}
 				<div className="homegrade-blocks-highlight__content">
-					{hasIcon && iconPosition === "side" && !hasTitle && (
+					{hasIcon && iconPosition === 'side' && !hasTitle && (
 						<div className="icon">
-							<img src={iconPicture} alt="" />
+							<img className="icon__image" src={iconUrl} alt="" />
 						</div>
 					)}
 
 					<div className="homegrade-blocks-highlight__content__innerblocks">
 						<InnerBlocks
 							allowedBlocks={[
-								"core/paragraph",
+								'core/paragraph',
-								"core/list",
+								'core/list',
-								"core/buttons",
+								'core/buttons',
-								"core/button",
+								'core/button',
-								"core/colums",
+								'core/colums',
-								"core/colum",
+								'core/colum',
-								"homegrade-content-blocks/text-image",
+								'homegrade-content-blocks/text-image',
-								"homegrade-content-blocks/content-heading",
+								'homegrade-content-blocks/content-heading',
-								"homegrade-content-blocks/staff-member",
+								'homegrade-content-blocks/staff-member',
 							]}
-							template={[["core/paragraph"]]}
+							template={[['core/paragraph']]}
 						/>
 					</div>
 
@@ -364,13 +313,13 @@ export default function Edit({ attributes, setAttributes }) {
 								<MediaReplaceFlow
 									mediaId={logoId}
 									mediaUrl={logoUrl}
-									allowedTypes={["image"]}
+									allowedTypes={['image']}
 									accept="image/*"
 									onSelect={setLogoAttributes}
 									name={
 										!logoUrl
-											? __("Ajouter Logo", "homegrade-blocks")
+											? __('Ajouter Logo', 'homegrade-blocks')
-											: __("Remplacer", "homegrade-blocks")
+											: __('Remplacer', 'homegrade-blocks')
 									}
 								/>
 							)}

blocks/highlight/src/save.js

@@ -1,22 +1,11 @@
-import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
+import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
-import { __ } from "@wordpress/i18n";
+import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from "@wordpress/data"; // pour les querry
+import { useSelect, useDispatch } from '@wordpress/data'; // pour les querry
-import keyIcon from "./img/icon_key.svg";
-import chainIcon from "./img/icon_chain.svg";
-import houseIcon from "./img/icon_house.svg";
-import bulbIcon from "./img/icon_bulb.svg";
-import warningIcon from "./img/icon_warning.svg";
-import acousticIcon from "./img/icon_acoustic.svg";
-import documentationIcon from "./img/icon_documentation.svg";
-import notificationIcon from "./img/icon_notification.svg";
-import searchIcon from "./img/icon_search.svg";
-import infoIcon from "./img/icon_info.svg";
-import tipIcon from "./img/icon_tip.svg";
-import euroIcon from "./img/icon_euro.svg";
 
 export default function save({ attributes }) {
 	const {
 		title,
+		iconUrl,
 		iconName,
 		hasTitle,
 		hasIcon,
@@ -26,67 +15,51 @@ export default function save({ attributes }) {
 		logoUrl,
 		iconPosition,
 	} = attributes;
-	function getIconPicture() {
-		switch (iconName) {
-			case "key":
-				return keyIcon;
 
-			case "chain":
+	const ICON_FILES = {
-				return chainIcon;
+		key: 'icon_key.svg',
-
+		chain: 'icon_chain.svg',
-			case "house":
+		house: 'icon_house.svg',
-				return houseIcon;
+		bulb: 'icon_bulb.svg',
-
+		warning: 'icon_warning.svg',
-			case "bulb":
+		acoustic: 'icon_acoustic.svg',
-				return bulbIcon;
+		documentation: 'icon_documentation.svg',
-
+		notification: 'icon_notification.svg',
-			case "warning":
+		search: 'icon_search.svg',
-				return warningIcon;
+		info: 'icon_info.svg',
-
+		tip: 'icon_tip.svg',
-			case "acoustic":
+		euro: 'icon_euro.svg',
-				return acousticIcon;
+	};
-
+	const buildIconUrlFromName = () => {
-			case "documentation":
+		const filename = ICON_FILES[iconName];
-				return documentationIcon;
+		if (!filename) return '';
-
+		try {
-			case "notification":
+			return new URL(`./img/${filename}`, import.meta.url).toString();
-				return notificationIcon;
+		} catch (e) {
-
+			return '';
-			case "search":
-				return searchIcon;
-
-			case "info":
-				return infoIcon;
-
-			case "tip":
-				return tipIcon;
-
-			case "euro":
-				return euroIcon;
-
-			default:
-				return "";
 		}
-	}
+	};
-	let iconPicture = getIconPicture();
+	const isLikelyIconName = (value) =>
+		typeof value === 'string' && Object.keys(ICON_FILES).includes(value);
+	const resolvedIconUrl = !iconUrl || isLikelyIconName(iconUrl) ? buildIconUrlFromName() : iconUrl;
 
 	return (
 		<section
 			{...useBlockProps.save({
 				className: `homegrade-blocks-highlight ${
-					variant ? `homegrade-blocks-highlight--${variant}` : ""
+					variant ? `homegrade-blocks-highlight--${variant}` : ''
 				}`,
 			})}
 		>
 			{hasTitle && (
 				<div
 					className={`homegrade-blocks-highlight__titling ${
-						!hasIcon ? "homegrade-blocks-highlight__titling--has-no-icon" : ""
+						!hasIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
 					}`}
 				>
-					{hasIcon && iconPosition === "top" && (
+					{hasIcon && iconPosition === 'top' && (
 						<div className="icon">
-							<img className="icon__image" src={iconPicture} alt="" />
+							<img className="icon__image" src={resolvedIconUrl} alt="" />
 						</div>
 					)}
 
@@ -98,9 +71,9 @@ export default function save({ attributes }) {
 				</div>
 			)}
 			<div className="homegrade-blocks-highlight__content">
-				{hasIcon && iconPosition === "side" && !hasTitle && (
+				{hasIcon && iconPosition === 'side' && !hasTitle && (
 					<div className="icon">
-						<img src={iconPicture} alt="" />
+						<img className="icon__image" src={resolvedIconUrl} alt="" />
 					</div>
 				)}
 

homegrade-blocks.php

@@ -312,5 +312,5 @@ function wpdocs_load_textdomain()
 }
 
 
-
+require_once(__DIR__ . '/blocks/highlight/highlight.php');
 require_once(__DIR__ . '/acf-blocks/google-map/map-api-key.php');