handling hasIconTitle toggle

This commit is contained in:
Antoine M 2023-11-24 17:08:46 +01:00
parent 39b6befd5f
commit 9a354713c2
7 changed files with 74 additions and 20 deletions

View File

@ -28,6 +28,10 @@
"type": "boolean",
"default": true
},
"hasTitleIcon": {
"type": "boolean",
"default": true
},
"hasLogo": {
"type": "boolean",
"default": false

View File

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

View File

@ -202,6 +202,7 @@ function Edit({
title,
iconName,
hasTitle,
hasTitleIcon,
hasLogo,
variant,
logoAlt,
@ -236,6 +237,11 @@ function Edit({
title: undefined
});
}
function onhasTitleIconChange() {
setAttributes({
hasTitleIcon: !hasTitleIcon
});
}
function onVariantChange(variant) {
setAttributes({
variant
@ -283,13 +289,17 @@ function Edit({
label: "Afficher le titre",
checked: hasTitle,
onChange: onHasTitleChange
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
label: "Icone pour le titre",
checked: hasTitleIcon,
onChange: onhasTitleIconChange
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.ToggleControl, {
label: "Attacher un logo",
checked: hasLogo,
onChange: onHasLogoChange
})), hasLogo && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.PanelBody, {
className: "homegrade-blocks-highlight__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Logo", "homegrade-blocks__texte-backoffice")
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Logo", "homegrade-blocks")
}, logoUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: logoUrl,
alt: logoAlt
@ -301,7 +311,7 @@ function Edit({
allowedTypes: ["image"],
accept: "image/*",
onSelect: setLogoAttributes,
name: !logoUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter un Logo", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
name: !logoUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter un Logo", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks")
}), logoUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.Button, {
className: "custom-flow-button",
variant: "primary",
@ -333,8 +343,8 @@ function Edit({
className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
})
}, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-highlight__titling"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-highlight__titling ${!hasTitleIcon ? "homegrade-blocks-highlight__titling--has-no-icon" : ""}`
}, hasTitleIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "icon"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: iconPicture,
@ -361,7 +371,7 @@ function Edit({
allowedTypes: ["image"],
accept: "image/*",
onSelect: setLogoAttributes,
name: !logoUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter Logo", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
name: !logoUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter Logo", "homegrade-blocks") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks")
}), logoUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: logoUrl,
alt: logoAlt
@ -447,6 +457,7 @@ function save({
title,
iconName,
hasTitle,
hasTitleIcon,
variant,
hasLogo,
logoAlt,
@ -470,8 +481,8 @@ function save({
className: `homegrade-blocks-highlight ${variant ? `homegrade-blocks-highlight--${variant}` : ""}`
})
}, hasTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-highlight__titling"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-highlight__titling ${!hasTitleIcon ? "homegrade-blocks-highlight__titling--has-no-icon" : ""}`
}, hasTitleIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "icon"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
clas: true,
@ -636,7 +647,7 @@ module.exports = window["wp"]["primitives"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string","source":"html","selector":"h3"},"iconName":{"type":"string","default":"key"},"hasTitle":{"type":"boolean","default":true},"hasLogo":{"type":"boolean","default":false},"logoId":{"type":"number"},"logoAlt":{"type":"string"},"logoUrl":{"type":"string"},"variant":{"type":"string","default":"classic"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/highlight","version":"0.1.0","title":"Mise en avant","category":"homegrade-blocks","description":"Bloc pour mettre en avant des informations importantes","supports":{"html":false,"anchor":true},"textdomain":"homegrade-blocks__texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","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"}}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -28,6 +28,10 @@
"type": "boolean",
"default": true
},
"hasTitleIcon": {
"type": "boolean",
"default": true
},
"hasLogo": {
"type": "boolean",
"default": false

View File

@ -28,6 +28,7 @@ export default function Edit({ attributes, setAttributes }) {
title,
iconName,
hasTitle,
hasTitleIcon,
hasLogo,
variant,
logoAlt,
@ -63,6 +64,11 @@ export default function Edit({ attributes, setAttributes }) {
title: undefined,
});
}
function onhasTitleIconChange() {
setAttributes({
hasTitleIcon: !hasTitleIcon,
});
}
function onVariantChange(variant) {
setAttributes({ variant });
}
@ -116,6 +122,11 @@ export default function Edit({ attributes, setAttributes }) {
checked={hasTitle}
onChange={onHasTitleChange}
/>
<ToggleControl
label="Icone pour le titre"
checked={hasTitleIcon}
onChange={onhasTitleIconChange}
/>
<ToggleControl
label="Attacher un logo"
checked={hasLogo}
@ -191,10 +202,18 @@ export default function Edit({ attributes, setAttributes }) {
})}
>
{hasTitle && (
<div className="homegrade-blocks-highlight__titling">
<div className="icon">
<img src={iconPicture} alt="" />
</div>
<div
className={`homegrade-blocks-highlight__titling ${
!hasTitleIcon
? "homegrade-blocks-highlight__titling--has-no-icon"
: ""
}`}
>
{hasTitleIcon && (
<div className="icon">
<img src={iconPicture} alt="" />
</div>
)}
<RichText
className="homegrade-blocks-highlight__block-title"
onChange={onTitleChange}

View File

@ -7,8 +7,16 @@ import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
export default function save({ attributes }) {
const { title, iconName, hasTitle, variant, hasLogo, logoAlt, logoUrl } =
attributes;
const {
title,
iconName,
hasTitle,
hasTitleIcon,
variant,
hasLogo,
logoAlt,
logoUrl,
} = attributes;
function getIconPicture() {
switch (iconName) {
case "key":
@ -35,10 +43,18 @@ export default function save({ attributes }) {
})}
>
{hasTitle && (
<div className="homegrade-blocks-highlight__titling">
<div className="icon">
<img clas src={iconPicture} alt="" />
</div>
<div
className={`homegrade-blocks-highlight__titling ${
!hasTitleIcon
? "homegrade-blocks-highlight__titling--has-no-icon"
: ""
}`}
>
{hasTitleIcon && (
<div className="icon">
<img clas src={iconPicture} alt="" />
</div>
)}
<RichText.Content
tagName="h3"