handling toggleControl to remove cta

This commit is contained in:
Antoine M 2023-10-19 15:29:21 +02:00
parent fddc0c7fd7
commit e5bbf38473
6 changed files with 72 additions and 34 deletions

View File

@ -22,6 +22,10 @@
"pageHeaderDescription": {
"type": "string"
},
"hasCta": {
"type": "boolean",
"default": false
},
"cta": {
"type": "object"
}

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '28b0c09903b2dee6748e');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'c36bb5ed25b531e20cc1');

View File

@ -36,6 +36,7 @@ function Edit({
const {
pageHeaderTitle,
pageHeaderDescription,
hasCta,
cta
} = attributes;
const pageTitle = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
@ -51,17 +52,28 @@ function Edit({
return cover;
}
});
function handleOnChangeTitle(newTitle) {
function onChangeTitle(newTitle) {
setAttributes({
pageHeaderTitle: newTitle
});
}
function handleOnChangeDescription(newDescription) {
function onChangeHasCta(newHasCta) {
console.log("newHasCta", newHasCta);
setAttributes({
hasCta: !hasCta
});
if (!newHasCta) {
setAttributes({
cta: undefined
});
}
}
function onChangeDescription(newDescription) {
setAttributes({
pageHeaderDescription: newDescription
});
}
function handleOnChangeCTA(newCtaValue) {
function onChangeCTA(newCtaValue) {
setAttributes({
cta: {
title: !cta || !cta.title ? newCtaValue.title : cta.title,
@ -83,7 +95,11 @@ function Edit({
return (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_block_editor__WEBPACK_IMPORTED_MODULE_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
className: "homegrade-blocks-content-page-header__panel-cta",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Call to action", "homegrade-blocks__texte-fonctionnel")
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.TextControl, {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
label: "Afficher un call to action",
checked: hasCta,
onChange: onChangeHasCta
}), hasCta && (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_5__.TextControl, {
label: "Titre du cta",
value: cta && cta.title ? cta.title : "",
onChange: onChangeTextControl
@ -91,11 +107,8 @@ function Edit({
label: "Lien du cta",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Call to action", "homegrade-blocks__texte-fonctionnel"),
value: cta,
onChange: e => {
console.log("loading", e);
handleOnChangeCTA(e);
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
onChange: onChangeCTA
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
className: `homegrade-blocks-content-page-header block-content-page-header`
})
@ -105,13 +118,13 @@ function Edit({
tagName: "h2",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Titre du Bloc Header", "homegrade"),
value: pageHeaderTitle,
onChange: handleOnChangeTitle
onChange: onChangeTitle
// style={{ textAlign: props.attributes.alignment }}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
tagName: "p",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le texte d'introduction de cette page", "homegrade"),
value: pageHeaderDescription,
onChange: handleOnChangeDescription
onChange: onChangeDescription
// style={{ textAlign: props.attributes.alignment }}
}), cta && cta.title && cta.url && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", {
href: cta.url
@ -254,7 +267,7 @@ module.exports = window["wp"]["i18n"];
\************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"pageHeaderTitle":{"type":"string"},"pageHeaderDescription":{"type":"string"},"cta":{"type":"object"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"pageHeaderTitle":{"type":"string"},"pageHeaderDescription":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"}}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -22,6 +22,10 @@
"pageHeaderDescription": {
"type": "string"
},
"hasCta": {
"type": "boolean",
"default": false
},
"cta": {
"type": "object"
}

View File

@ -8,10 +8,10 @@ import {
InspectorControls,
__experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";
import { PanelBody, TextControl } from "@wordpress/components";
import { PanelBody, TextControl, ToggleControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
const { pageHeaderTitle, pageHeaderDescription, cta } = attributes;
const { pageHeaderTitle, pageHeaderDescription, hasCta, cta } = attributes;
const pageTitle = useSelect((select) => {
const { getEditedPostAttribute } = select("core/editor");
@ -26,13 +26,20 @@ export default function Edit({ attributes, setAttributes }) {
}
});
function handleOnChangeTitle(newTitle) {
function onChangeTitle(newTitle) {
setAttributes({ pageHeaderTitle: newTitle });
}
function handleOnChangeDescription(newDescription) {
function onChangeHasCta(newHasCta) {
console.log("newHasCta", newHasCta);
setAttributes({ hasCta: !hasCta });
if (!newHasCta) {
setAttributes({ cta: undefined });
}
}
function onChangeDescription(newDescription) {
setAttributes({ pageHeaderDescription: newDescription });
}
function handleOnChangeCTA(newCtaValue) {
function onChangeCTA(newCtaValue) {
setAttributes({
cta: {
title: !cta || !cta.title ? newCtaValue.title : cta.title,
@ -59,20 +66,30 @@ export default function Edit({ attributes, setAttributes }) {
className="homegrade-blocks-content-page-header__panel-cta"
title={__("Call to action", "homegrade-blocks__texte-fonctionnel")}
>
<TextControl
label="Titre du cta"
value={cta && cta.title ? cta.title : ""}
onChange={onChangeTextControl}
/>
<LinkControl
label="Lien du cta"
title={__("Call to action", "homegrade-blocks__texte-fonctionnel")}
value={cta}
onChange={(e) => {
console.log("loading", e);
handleOnChangeCTA(e);
}}
<ToggleControl
label="Afficher un call to action"
checked={hasCta}
onChange={onChangeHasCta}
/>
{hasCta && (
<>
<TextControl
label="Titre du cta"
value={cta && cta.title ? cta.title : ""}
onChange={onChangeTextControl}
/>
<LinkControl
label="Lien du cta"
title={__(
"Call to action",
"homegrade-blocks__texte-fonctionnel"
)}
value={cta}
onChange={onChangeCTA}
/>
</>
)}
</PanelBody>
</InspectorControls>
<section
@ -87,7 +104,7 @@ export default function Edit({ attributes, setAttributes }) {
tagName="h2"
placeholder={__("Ajouter ici le Titre du Bloc Header", "homegrade")}
value={pageHeaderTitle}
onChange={handleOnChangeTitle}
onChange={onChangeTitle}
// style={{ textAlign: props.attributes.alignment }}
/>
<RichText
@ -97,7 +114,7 @@ export default function Edit({ attributes, setAttributes }) {
"homegrade"
)}
value={pageHeaderDescription}
onChange={handleOnChangeDescription}
onChange={onChangeDescription}
// style={{ textAlign: props.attributes.alignment }}
/>
{cta && cta.title && cta.url && <a href={cta.url}>{cta.title}</a>}