extending block with subtitle feature

This commit is contained in:
Antoine M 2023-11-10 10:31:41 +01:00
parent d135328112
commit f70a613e29
10 changed files with 150 additions and 25 deletions

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'f9fad6778ea57f6a2472');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'edbffd91e4982329b8e4');

View File

@ -35,7 +35,7 @@ function Edit({
setAttributes,
clientId
}) {
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_5__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.Tip, null, "salut"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
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)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.useBlockProps)({
className: `homegrade-blocks-tips-to-know`
})
@ -151,14 +151,18 @@ function Edit({
tipTitle,
tipIconId,
tipIconAlt,
tipIconUrl
tipIconUrl,
hasTipSubtitle,
tipSubtitle
} = attributes;
function onChangeTipTitle(tipTitle) {
setAttributes({
tipTitle,
tipIconId,
tipIconAlt,
tipIconUrl
tipTitle
});
}
function onChangeTipSubtitle(tipSubtitle) {
setAttributes({
tipSubtitle
});
}
function setTipIconAttributes(tipIcon) {
@ -178,6 +182,16 @@ function Edit({
tipIconUrl: null
});
}
function onChangeHasTipSubtitle(newsHasTipSubtitle) {
setAttributes({
hasTipSubtitle: !hasTipSubtitle
});
if (newsHasTipSubtitle) {
setAttributes({
tipSubtitle: ""
});
}
}
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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
@ -200,7 +214,14 @@ function Edit({
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
onClick: removeTipIconAttributes
}))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-tips-to-know__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Sous-Titre", "homegrade-blocks__texte-backoffice")
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "Utiliser des Sous-titres",
checked: hasTipSubtitle,
onChange: onChangeHasTipSubtitle
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `homegrade-blocks-tips-to-know__tip`
})
@ -222,6 +243,12 @@ function Edit({
tagName: "h4",
value: tipTitle,
onChange: onChangeTipTitle
}), hasTipSubtitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
className: "homegrade-blocks-tips-to-know__tip-subtitle",
tagName: "h5",
placeholder: "Sous-titre",
value: tipSubtitle,
onChange: onChangeTipSubtitle
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph", "core/list"],
template: [["core/paragraph", {
@ -298,7 +325,9 @@ function save({
const {
tipTitle,
tipIconAlt,
tipIconUrl
tipIconUrl,
hasTipSubtitle,
tipSubtitle
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
@ -315,6 +344,10 @@ function save({
className: "homegrade-blocks-tips-to-know__tip-title",
tagName: "h4",
value: tipTitle
}), hasTipSubtitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: tipSubtitle,
className: "homegrade-blocks-tips-to-know__tip-subtitle",
tagName: "h5"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)));
}
@ -608,7 +641,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
\****************************/
/***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/tip","version":"0.1.0","title":"Tip","category":"homegrade-blocks","description":"pour insérer un conseil ou une astuce avec une mise en page particulière","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tipTitle":{"type":"string","default":"Titre du conseil"},"tipIconId":{"type":"number"},"tipIconUrl":{"type":"string"},"tipIconAlt":{"type":"string"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/tip","version":"0.1.0","title":"Tip","category":"homegrade-blocks","description":"pour insérer un conseil ou une astuce avec une mise en page particulière","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tipTitle":{"type":"string","default":"Titre du conseil"},"hasTipSubtitle":{"type":"boolean","default":false},"tipSubtitle":{"type":"string"},"tipIconId":{"type":"number"},"tipIconUrl":{"type":"string"},"tipIconAlt":{"type":"string"}}}');
/***/ }),

File diff suppressed because one or more lines are too long

View File

@ -17,6 +17,13 @@
"type": "string",
"default": "Titre du conseil"
},
"hasTipSubtitle": {
"type": "boolean",
"default": false
},
"tipSubtitle": {
"type": "string"
},
"tipIconId": {
"type": "number"
},

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'edabf76346ea76f10266');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'a263b3a2c75a004803e9');

View File

@ -36,14 +36,18 @@ function Edit({
tipTitle,
tipIconId,
tipIconAlt,
tipIconUrl
tipIconUrl,
hasTipSubtitle,
tipSubtitle
} = attributes;
function onChangeTipTitle(tipTitle) {
setAttributes({
tipTitle,
tipIconId,
tipIconAlt,
tipIconUrl
tipTitle
});
}
function onChangeTipSubtitle(tipSubtitle) {
setAttributes({
tipSubtitle
});
}
function setTipIconAttributes(tipIcon) {
@ -63,6 +67,16 @@ function Edit({
tipIconUrl: null
});
}
function onChangeHasTipSubtitle(newsHasTipSubtitle) {
setAttributes({
hasTipSubtitle: !hasTipSubtitle
});
if (newsHasTipSubtitle) {
setAttributes({
tipSubtitle: ""
});
}
}
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_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
@ -85,7 +99,14 @@ function Edit({
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
onClick: removeTipIconAttributes
}))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-tips-to-know__panel-body",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Sous-Titre", "homegrade-blocks__texte-backoffice")
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToggleControl, {
label: "Utiliser des Sous-titres",
checked: hasTipSubtitle,
onChange: onChangeHasTipSubtitle
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `homegrade-blocks-tips-to-know__tip`
})
@ -107,6 +128,12 @@ function Edit({
tagName: "h4",
value: tipTitle,
onChange: onChangeTipTitle
}), hasTipSubtitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
className: "homegrade-blocks-tips-to-know__tip-subtitle",
tagName: "h5",
placeholder: "Sous-titre",
value: tipSubtitle,
onChange: onChangeTipSubtitle
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph", "core/list"],
template: [["core/paragraph", {
@ -183,7 +210,9 @@ function save({
const {
tipTitle,
tipIconAlt,
tipIconUrl
tipIconUrl,
hasTipSubtitle,
tipSubtitle
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
@ -200,6 +229,10 @@ function save({
className: "homegrade-blocks-tips-to-know__tip-title",
tagName: "h4",
value: tipTitle
}), hasTipSubtitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: tipSubtitle,
className: "homegrade-blocks-tips-to-know__tip-subtitle",
tagName: "h5"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)));
}
@ -326,7 +359,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/tip","version":"0.1.0","title":"Tip","category":"homegrade-blocks","description":"pour insérer un conseil ou une astuce avec une mise en page particulière","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tipTitle":{"type":"string","default":"Titre du conseil"},"tipIconId":{"type":"number"},"tipIconUrl":{"type":"string"},"tipIconAlt":{"type":"string"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/tip","version":"0.1.0","title":"Tip","category":"homegrade-blocks","description":"pour insérer un conseil ou une astuce avec une mise en page particulière","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tipTitle":{"type":"string","default":"Titre du conseil"},"hasTipSubtitle":{"type":"boolean","default":false},"tipSubtitle":{"type":"string"},"tipIconId":{"type":"number"},"tipIconUrl":{"type":"string"},"tipIconAlt":{"type":"string"}}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -17,6 +17,13 @@
"type": "string",
"default": "Titre du conseil"
},
"hasTipSubtitle": {
"type": "boolean",
"default": false
},
"tipSubtitle": {
"type": "string"
},
"tipIconId": {
"type": "number"
},

View File

@ -10,14 +10,24 @@ import {
MediaPlaceholder,
} from "@wordpress/block-editor";
import { PanelBody, Button } from "@wordpress/components";
import { PanelBody, Button, ToggleControl } from "@wordpress/components";
import { trash } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes }) {
const { tipTitle, tipIconId, tipIconAlt, tipIconUrl } = attributes;
const {
tipTitle,
tipIconId,
tipIconAlt,
tipIconUrl,
hasTipSubtitle,
tipSubtitle,
} = attributes;
function onChangeTipTitle(tipTitle) {
setAttributes({ tipTitle, tipIconId, tipIconAlt, tipIconUrl });
setAttributes({ tipTitle });
}
function onChangeTipSubtitle(tipSubtitle) {
setAttributes({ tipSubtitle });
}
function setTipIconAttributes(tipIcon) {
@ -39,6 +49,13 @@ export default function Edit({ attributes, setAttributes }) {
});
}
function onChangeHasTipSubtitle(newsHasTipSubtitle) {
setAttributes({ hasTipSubtitle: !hasTipSubtitle });
if (newsHasTipSubtitle) {
setAttributes({ tipSubtitle: "" });
}
}
return (
<>
<InspectorControls>
@ -75,6 +92,16 @@ export default function Edit({ attributes, setAttributes }) {
)}
</div>
</PanelBody>
<PanelBody
className="homegrade-blocks-tips-to-know__panel-body"
title={__("Sous-Titre", "homegrade-blocks__texte-backoffice")}
>
<ToggleControl
label="Utiliser des Sous-titres"
checked={hasTipSubtitle}
onChange={onChangeHasTipSubtitle}
/>
</PanelBody>
</InspectorControls>
<div
{...useBlockProps({
@ -100,6 +127,15 @@ export default function Edit({ attributes, setAttributes }) {
value={tipTitle}
onChange={onChangeTipTitle}
/>
{hasTipSubtitle && (
<RichText
className="homegrade-blocks-tips-to-know__tip-subtitle"
tagName="h5"
placeholder="Sous-titre"
value={tipSubtitle}
onChange={onChangeTipSubtitle}
/>
)}
<InnerBlocks
allowedBlocks={["core/paragraph", "core/list"]}
template={[

View File

@ -1,7 +1,8 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
const { tipTitle, tipIconAlt, tipIconUrl } = attributes;
const { tipTitle, tipIconAlt, tipIconUrl, hasTipSubtitle, tipSubtitle } =
attributes;
return (
<div
@ -18,6 +19,14 @@ export default function save({ attributes }) {
tagName="h4"
value={tipTitle}
/>
{hasTipSubtitle && (
<RichText.Content
value={tipSubtitle}
className="homegrade-blocks-tips-to-know__tip-subtitle"
tagName="h5"
/>
)}
<InnerBlocks.Content />
</div>
</div>