FEATURE FIX Changing icons injection behaviour and opting for and php exposed url to fix svg injection problem with non admin editors
This commit is contained in:
Nonimart
parent
42bc69f0af
commit
04bc117f64
|
|
@ -20,7 +20,7 @@
|
|||
"source": "html",
|
||||
"selector": "h3"
|
||||
},
|
||||
"iconName": {
|
||||
"iconUrl": {
|
||||
"type": "string",
|
||||
"default": "key"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
|
|
|
|||
9
blocks/highlight/highlight.php
Normal file
9
blocks/highlight/highlight.php
Normal file
|
|
@ -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/']
|
||||
);
|
||||
});
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
"source": "html",
|
||||
"selector": "h3"
|
||||
},
|
||||
"iconName": {
|
||||
"iconUrl": {
|
||||
"type": "string",
|
||||
"default": "key"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,111 +1,288 @@
|
|||
import { createBlock } from "@wordpress/blocks";
|
||||
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
||||
import { useSelect } from "@wordpress/data";
|
||||
import { createBlock } from '@wordpress/blocks';
|
||||
import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
|
||||
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 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';
|
||||
|
||||
const v1 = {
|
||||
// v2 — prior version (icons imported in JS, no persistent iconUrl attribute)
|
||||
const v2 = {
|
||||
attributes: {
|
||||
title: {
|
||||
type: "string",
|
||||
source: "html",
|
||||
selector: "h3",
|
||||
type: 'string',
|
||||
source: 'html',
|
||||
selector: 'h3',
|
||||
},
|
||||
iconName: {
|
||||
type: "string",
|
||||
default: "key",
|
||||
type: 'string',
|
||||
default: 'key',
|
||||
},
|
||||
hasTitle: {
|
||||
type: "boolean",
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
},
|
||||
hasTitleIcon: {
|
||||
type: "boolean",
|
||||
hasIcon: {
|
||||
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",
|
||||
default: "classic",
|
||||
type: 'string',
|
||||
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
|
||||
? "homegrade-blocks-highlight__titling--has-no-icon"
|
||||
: ""
|
||||
!hasTitleIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
|
||||
}`}
|
||||
>
|
||||
{hasTitleIcon && (
|
||||
|
|
@ -159,4 +334,4 @@ const v1 = {
|
|||
},
|
||||
};
|
||||
|
||||
export default [v1];
|
||||
export default [v2KSES, v2, v1];
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
|||
<>
|
||||
<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
|
||||
label="Afficher le titre"
|
||||
checked={hasTitle}
|
||||
onChange={onHasTitleChange}
|
||||
/>
|
||||
<ToggleControl
|
||||
label="Afficher une Icone"
|
||||
checked={hasIcon}
|
||||
onChange={onhasIconChange}
|
||||
/>
|
||||
<ToggleControl label="Afficher le titre" 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",
|
||||
value: "top",
|
||||
description: "Seulement lorsque le titre est ACTIVÉ",
|
||||
label: 'Avant le titre',
|
||||
value: 'top',
|
||||
description: 'Seulement lorsque le titre est ACTIVÉ',
|
||||
},
|
||||
{
|
||||
label: "Coté",
|
||||
value: "side",
|
||||
label: 'Coté',
|
||||
value: 'side',
|
||||
disabled: hasTitle,
|
||||
description: "Seulement lorsque le titre est DÉSACTIVÉ",
|
||||
description: 'Seulement lorsque le titre est DÉSACTIVÉ',
|
||||
},
|
||||
]}
|
||||
selected={iconPosition}
|
||||
/>
|
||||
)}
|
||||
<ToggleControl
|
||||
label="Attacher un logo"
|
||||
checked={hasLogo}
|
||||
onChange={onHasLogoChange}
|
||||
/>
|
||||
<ToggleControl 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")
|
||||
: __("Remplacer", "homegrade-blocks")
|
||||
? __('Ajouter un Logo', 'homegrade-blocks')
|
||||
: __('Remplacer', 'homegrade-blocks')
|
||||
}
|
||||
/>
|
||||
{logoUrl && (
|
||||
|
|
@ -231,130 +183,127 @@ export default function Edit({ attributes, setAttributes }) {
|
|||
</InspectorControls>
|
||||
<BlockControls>
|
||||
<ToolbarButton
|
||||
title={"Clé"}
|
||||
icon={"admin-network"}
|
||||
isActive={iconName === "key"}
|
||||
onClick={() => onIconChange("key")}
|
||||
title={'Clé'}
|
||||
icon={'admin-network'}
|
||||
isActive={iconName === 'key'}
|
||||
onClick={() => onIconChange('key')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Lien"}
|
||||
icon={"admin-links"}
|
||||
isActive={iconName === "chain"}
|
||||
onClick={() => onIconChange("chain")}
|
||||
title={'Lien'}
|
||||
icon={'admin-links'}
|
||||
isActive={iconName === 'chain'}
|
||||
onClick={() => onIconChange('chain')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Homegrade"}
|
||||
icon={"admin-home"}
|
||||
isActive={iconName === "house"}
|
||||
onClick={() => onIconChange("house")}
|
||||
title={'Homegrade'}
|
||||
icon={'admin-home'}
|
||||
isActive={iconName === 'house'}
|
||||
onClick={() => onIconChange('house')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Inspiration"}
|
||||
icon={"lightbulb"}
|
||||
isActive={iconName === "bulb"}
|
||||
onClick={() => onIconChange("bulb")}
|
||||
title={'Inspiration'}
|
||||
icon={'lightbulb'}
|
||||
isActive={iconName === 'bulb'}
|
||||
onClick={() => onIconChange('bulb')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Attention"}
|
||||
icon={"warning"}
|
||||
isActive={iconName === "warning"}
|
||||
onClick={() => onIconChange("warning")}
|
||||
title={'Attention'}
|
||||
icon={'warning'}
|
||||
isActive={iconName === 'warning'}
|
||||
onClick={() => onIconChange('warning')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Acoustique"}
|
||||
icon={"controls-volumeon"}
|
||||
isActive={iconName === "acoustic"}
|
||||
onClick={() => onIconChange("acoustic")}
|
||||
title={'Acoustique'}
|
||||
icon={'controls-volumeon'}
|
||||
isActive={iconName === 'acoustic'}
|
||||
onClick={() => onIconChange('acoustic')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Documentation"}
|
||||
icon={"book-alt"}
|
||||
isActive={iconName === "documentation"}
|
||||
onClick={() => onIconChange("documentation")}
|
||||
title={'Documentation'}
|
||||
icon={'book-alt'}
|
||||
isActive={iconName === 'documentation'}
|
||||
onClick={() => onIconChange('documentation')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Recherche"}
|
||||
icon={"search"}
|
||||
isActive={iconName === "search"}
|
||||
onClick={() => onIconChange("search")}
|
||||
title={'Recherche'}
|
||||
icon={'search'}
|
||||
isActive={iconName === 'search'}
|
||||
onClick={() => onIconChange('search')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Notification"}
|
||||
icon={"bell"}
|
||||
isActive={iconName === "notification"}
|
||||
onClick={() => onIconChange("notification")}
|
||||
title={'Notification'}
|
||||
icon={'bell'}
|
||||
isActive={iconName === 'notification'}
|
||||
onClick={() => onIconChange('notification')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Info"}
|
||||
icon={"info"}
|
||||
isActive={iconName === "info"}
|
||||
onClick={() => onIconChange("info")}
|
||||
title={'Info'}
|
||||
icon={'info'}
|
||||
isActive={iconName === 'info'}
|
||||
onClick={() => onIconChange('info')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Euro"}
|
||||
icon={"money-alt"}
|
||||
isActive={iconName === "euro"}
|
||||
onClick={() => onIconChange("euro")}
|
||||
title={'Euro'}
|
||||
icon={'money-alt'}
|
||||
isActive={iconName === 'euro'}
|
||||
onClick={() => onIconChange('euro')}
|
||||
/>
|
||||
<ToolbarButton
|
||||
title={"Astuce"}
|
||||
icon={"thumbs-up"}
|
||||
isActive={iconName === "tip"}
|
||||
onClick={() => onIconChange("tip")}
|
||||
title={'Astuce'}
|
||||
icon={'thumbs-up'}
|
||||
isActive={iconName === '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={__(
|
||||
"Insérez un titre",
|
||||
"homegrade-blocks__texte-fonctionnel"
|
||||
)}
|
||||
placeholder={__('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/list",
|
||||
"core/buttons",
|
||||
"core/button",
|
||||
"core/colums",
|
||||
"core/colum",
|
||||
"homegrade-content-blocks/text-image",
|
||||
"homegrade-content-blocks/content-heading",
|
||||
"homegrade-content-blocks/staff-member",
|
||||
'core/paragraph',
|
||||
'core/list',
|
||||
'core/buttons',
|
||||
'core/button',
|
||||
'core/colums',
|
||||
'core/colum',
|
||||
'homegrade-content-blocks/text-image',
|
||||
'homegrade-content-blocks/content-heading',
|
||||
'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")
|
||||
: __("Remplacer", "homegrade-blocks")
|
||||
? __('Ajouter Logo', 'homegrade-blocks')
|
||||
: __('Remplacer', 'homegrade-blocks')
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user