{hasTitleIcon && (
@@ -159,4 +334,4 @@ const v1 = {
},
};
-export default [v1];
+export default [v2KSES, v2, v1];
diff --git a/blocks/highlight/src/edit.js b/blocks/highlight/src/edit.js
index e66c762..b1aea46 100644
--- a/blocks/highlight/src/edit.js
+++ b/blocks/highlight/src/edit.js
@@ -1,17 +1,5 @@
-import { __ } from "@wordpress/i18n";
-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 { __ } from '@wordpress/i18n';
+import './editor.scss';
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() {
- switch (iconName) {
- 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 "";
- }
- }
+ 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',
+ };
+ const getIconUrl = (iconName) => {
+ if (!iconName) return '';
+ return HOMEGRADE_HIGHLIGHT.iconsBaseUrl + ICON_FILES[iconName];
+ };
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 }) {
<>
-
-
+
+
{hasIcon && (
)}
-
+
{hasLogo && (
{logoUrl &&
}
@@ -205,13 +157,13 @@ export default function Edit({ attributes, setAttributes }) {
{logoUrl && (
@@ -231,130 +183,127 @@ export default function Edit({ attributes, setAttributes }) {
onIconChange("key")}
+ title={'Clé'}
+ icon={'admin-network'}
+ isActive={iconName === 'key'}
+ onClick={() => onIconChange('key')}
/>
onIconChange("chain")}
+ title={'Lien'}
+ icon={'admin-links'}
+ isActive={iconName === 'chain'}
+ onClick={() => onIconChange('chain')}
/>
onIconChange("house")}
+ title={'Homegrade'}
+ icon={'admin-home'}
+ isActive={iconName === 'house'}
+ onClick={() => onIconChange('house')}
/>
onIconChange("bulb")}
+ title={'Inspiration'}
+ icon={'lightbulb'}
+ isActive={iconName === 'bulb'}
+ onClick={() => onIconChange('bulb')}
/>
onIconChange("warning")}
+ title={'Attention'}
+ icon={'warning'}
+ isActive={iconName === 'warning'}
+ onClick={() => onIconChange('warning')}
/>
onIconChange("acoustic")}
+ title={'Acoustique'}
+ icon={'controls-volumeon'}
+ isActive={iconName === 'acoustic'}
+ onClick={() => onIconChange('acoustic')}
/>
onIconChange("documentation")}
+ title={'Documentation'}
+ icon={'book-alt'}
+ isActive={iconName === 'documentation'}
+ onClick={() => onIconChange('documentation')}
/>
onIconChange("search")}
+ title={'Recherche'}
+ icon={'search'}
+ isActive={iconName === 'search'}
+ onClick={() => onIconChange('search')}
/>
onIconChange("notification")}
+ title={'Notification'}
+ icon={'bell'}
+ isActive={iconName === 'notification'}
+ onClick={() => onIconChange('notification')}
/>
onIconChange("info")}
+ title={'Info'}
+ icon={'info'}
+ isActive={iconName === 'info'}
+ onClick={() => onIconChange('info')}
/>
onIconChange("euro")}
+ title={'Euro'}
+ icon={'money-alt'}
+ isActive={iconName === 'euro'}
+ onClick={() => onIconChange('euro')}
/>
onIconChange("tip")}
+ title={'Astuce'}
+ icon={'thumbs-up'}
+ isActive={iconName === 'tip'}
+ onClick={() => onIconChange('tip')}
/>
{hasTitle && (
- {hasIcon && iconPosition === "top" && (
+ {hasIcon && iconPosition === 'top' && (
-

+
)}
)}
- {hasIcon && iconPosition === "side" && !hasTitle && (
+ {hasIcon && iconPosition === 'side' && !hasTitle && (
-

+
)}
@@ -364,13 +313,13 @@ export default function Edit({ attributes, setAttributes }) {
)}
diff --git a/blocks/highlight/src/save.js b/blocks/highlight/src/save.js
index f0aaae6..133c6ef 100644
--- a/blocks/highlight/src/save.js
+++ b/blocks/highlight/src/save.js
@@ -1,22 +1,11 @@
-import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
-import { __ } from "@wordpress/i18n";
-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";
+import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data'; // pour les querry
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":
- 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 "";
+ 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',
+ };
+ const buildIconUrlFromName = () => {
+ const filename = ICON_FILES[iconName];
+ if (!filename) return '';
+ try {
+ return new URL(`./img/${filename}`, import.meta.url).toString();
+ } catch (e) {
+ return '';
}
- }
- let iconPicture = getIconPicture();
+ };
+ const isLikelyIconName = (value) =>
+ typeof value === 'string' && Object.keys(ICON_FILES).includes(value);
+ const resolvedIconUrl = !iconUrl || isLikelyIconName(iconUrl) ? buildIconUrlFromName() : iconUrl;
return (
{hasTitle && (
- {hasIcon && iconPosition === "top" && (
+ {hasIcon && iconPosition === 'top' && (
-

+
)}
@@ -98,9 +71,9 @@ export default function save({ attributes }) {
)}
- {hasIcon && iconPosition === "side" && !hasTitle && (
+ {hasIcon && iconPosition === 'side' && !hasTitle && (
-

+
)}
diff --git a/homegrade-blocks.php b/homegrade-blocks.php
index 4f1d4d2..eb3821f 100644
--- a/homegrade-blocks.php
+++ b/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');