extending block with subtitle feature

blocks/tips-to-know/build/index.asset.php

@@ -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');

blocks/tips-to-know/build/index.js

@@ -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,
+      tipTitle
-      tipIconId,
+    });
-      tipIconAlt,
+  }
-      tipIconUrl
+  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"}}}');
 
 /***/ }),
 

blocks/tips-to-know/build/tip/block.json

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

blocks/tips-to-know/build/tip/index.asset.php

@@ -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');

blocks/tips-to-know/build/tip/index.js

@@ -36,14 +36,18 @@ function Edit({
     tipTitle,
     tipIconId,
     tipIconAlt,
-    tipIconUrl
+    tipIconUrl,
+    hasTipSubtitle,
+    tipSubtitle
   } = attributes;
   function onChangeTipTitle(tipTitle) {
     setAttributes({
-      tipTitle,
+      tipTitle
-      tipIconId,
+    });
-      tipIconAlt,
+  }
-      tipIconUrl
+  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"}}}');
 
 /***/ })
 

blocks/tips-to-know/src/tip/block.json

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

blocks/tips-to-know/src/tip/edit.js

@@ -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={[

blocks/tips-to-know/src/tip/save.js

@@ -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>