handling RichText titles in legend instead of only text

blocks/focused-schema/build/focus-point/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '1319ed32fb73ad4846fc');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '03f0f2272eca0b9ca8ee');

blocks/focused-schema/build/focus-point/index.js

@@ -27,6 +27,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 function Edit({
   attributes,
   setAttributes,
@@ -89,9 +90,18 @@ function Edit({
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
       className: `homegrade-blocks-focus-point-caption`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
-    className: "focus-point-title"
+    tagName: "span",
-  }, focusTitle), focusCaptionDescription));
+    className: "focus-point-title",
+    value: focusTitle,
+    onChange: value => {
+      handleChangeTitle(value);
+    }
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
+    tagName: "span",
+    value: focusCaptionDescription,
+    onChange: handleChangeCaptionDescription
+  })));
 }
 
 /***/ }),
@@ -175,9 +185,14 @@ function save({
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
       className: `homegrade-blocks-focus-point-caption`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
-    className: "focus-point-title"
+    tagName: "span",
-  }, focusTitle), focusCaptionDescription);
+    className: "focus-point-title",
+    value: focusTitle
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
+    tagName: "span",
+    value: focusCaptionDescription
+  }));
 }
 
 /***/ }),

blocks/focused-schema/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '01f12954d4948ce2f9fa');
+<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '75fb291b951b2d937a72');

blocks/focused-schema/build/index.js

@@ -246,6 +246,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 function Edit({
   attributes,
   setAttributes,
@@ -308,9 +309,18 @@ function Edit({
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
       className: `homegrade-blocks-focus-point-caption`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
-    className: "focus-point-title"
+    tagName: "span",
-  }, focusTitle), focusCaptionDescription));
+    className: "focus-point-title",
+    value: focusTitle,
+    onChange: value => {
+      handleChangeTitle(value);
+    }
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
+    tagName: "span",
+    value: focusCaptionDescription,
+    onChange: handleChangeCaptionDescription
+  })));
 }
 
 /***/ }),
@@ -394,9 +404,14 @@ function save({
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
       className: `homegrade-blocks-focus-point-caption`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("span", {
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
-    className: "focus-point-title"
+    tagName: "span",
-  }, focusTitle), focusCaptionDescription);
+    className: "focus-point-title",
+    value: focusTitle
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
+    tagName: "span",
+    value: focusCaptionDescription
+  }));
 }
 
 /***/ }),

blocks/focused-schema/build/style-index.css

@@ -15,6 +15,7 @@
   counter-reset: myOrderedListItemsCounter;
 }
 .homegrade-blocks-focused-schema figcaption ol li {
+  line-height: 1.3;
   list-style-type: none;
   position: relative;
   padding: 8px;

blocks/focused-schema/build/style-index.css.map

@@ -1 +1 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAKE;EACC;EACA;AAHH;AAKG;EACC;EACA;EACA;EACA;AAHJ;AAKG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHJ;AAQC;EACC;EACA;EACA;EACA;EACA;AANF;AAQE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANH;AAUC;EACC;EACA;EACA;AARF;AAUE;EAEC;AATH;AAsBC;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBF;AAwBE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBH;AA+BC;EACC;AA7BF;;AAmCA;EACC;EACA;AAhCD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet {\n\t\tposition: absolute !important;\n\t\tborder-radius: 50%;\n\t\ttransition: scale 0.2s ease-in-out;\n\t\tz-index: 1;\n\t\ttransform: translateX(-50%);\n\n\t\t&__index {\n\t\t\tfont-weight: 700;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tposition: relative;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet:hover {\n\t\tscale: 1.2;\n\t\tfilter: brightness(1.2) hue-rotate(10deg);\n\t\tz-index: 1;\n\n\t\t& + .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t\t// background-color: red;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t// ~ .homegrade-blocks-focus-point-bullet {\n\t\t// \t// background-color: yellow !important;\n\t\t// \tz-index: 1;\n\t\t// }\n\t\t// .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t// \tdisplay: flex;\n\t\t// \tz-index: 999;\n\t\t// \tposition: absolute;\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t\tleft: calc(44%);\n\t\ttop: 25%;\n\t\ttransform: translate(-50%, calc(-100%));\n\n\t\tbackground-color: white;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t// &__tooltip-container {\n\t\t// \t&__title {\n\t\t// \t\twidth: auto;\n\t\t// \t\tmin-width: 100px;\n\t\t// \t}\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container:hover {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAQC;EACC;AADF;AAKE;EACC;EACA;AAHH;AAKG;EACC;EACA;EACA;EACA;EACA;AAHJ;AAKG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAHJ;AAQC;EACC;EACA;EACA;EACA;EACA;AANF;AAQE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AANH;AAUC;EACC;EACA;EACA;AARF;AAUE;EAEC;AATH;AAsBC;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBF;AAwBE;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBH;AA+BC;EACC;AA7BF;;AAmCA;EACC;EACA;AAhCD,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.homegrade-blocks-focused-schema {\n\tfigure {\n\t\tposition: relative;\n\t}\n\n\tfigcaption {\n\t\tol {\n\t\t\tpadding-top: 20px;\n\t\t\tcounter-reset: myOrderedListItemsCounter;\n\n\t\t\tli {\n\t\t\t\tline-height: 1.3;\n\t\t\t\tlist-style-type: none;\n\t\t\t\tposition: relative;\n\t\t\t\tpadding: 8px;\n\t\t\t\tpadding-left: 50px;\n\t\t\t}\n\t\t\tli:before {\n\t\t\t\tcontent: \"\";\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: translateY(3px);\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: red;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcounter-increment: myOrderedListItemsCounter;\n\t\t\t\tcontent: counter(myOrderedListItemsCounter);\n\t\t\t\tmargin-right: 0.5em;\n\t\t\t\tfont-weight: 700;\n\t\t\t}\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet {\n\t\tposition: absolute !important;\n\t\tborder-radius: 50%;\n\t\ttransition: scale 0.2s ease-in-out;\n\t\tz-index: 1;\n\t\ttransform: translateX(-50%);\n\n\t\t&__index {\n\t\t\tfont-weight: 700;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tposition: relative;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: 16px;\n\t\t}\n\t}\n\n\t.homegrade-blocks-focus-point-bullet:hover {\n\t\tscale: 1.2;\n\t\tfilter: brightness(1.2) hue-rotate(10deg);\n\t\tz-index: 1;\n\n\t\t& + .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t\t// background-color: red;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t// ~ .homegrade-blocks-focus-point-bullet {\n\t\t// \t// background-color: yellow !important;\n\t\t// \tz-index: 1;\n\t\t// }\n\t\t// .homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\t// \tdisplay: flex;\n\t\t// \tz-index: 999;\n\t\t// \tposition: absolute;\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container {\n\t\tz-index: 999;\n\t\tposition: absolute;\n\t\tleft: calc(44%);\n\t\ttop: 25%;\n\t\ttransform: translate(-50%, calc(-100%));\n\n\t\tbackground-color: white;\n\t\tborder-radius: 14px;\n\t\tpadding: 10px;\n\n\t\twidth: max-content;\n\t\tmin-width: 70px;\n\t\tmax-width: 220px;\n\t\ttext-align: center;\n\t\tdisplay: none;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbox-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n\n\t\t&:after {\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tbackground-color: white;\n\t\t\tposition: absolute;\n\t\t\ttop: 100%;\n\t\t\tleft: 50%;\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\ttransform: translate(-50%, -50%) rotate(45deg);\n\t\t\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);\n\t\t\tz-index: 999;\n\t\t}\n\t\t// &__tooltip-container {\n\t\t// \t&__title {\n\t\t// \t\twidth: auto;\n\t\t// \t\tmin-width: 100px;\n\t\t// \t}\n\t\t// }\n\t}\n\t.homegrade-blocks-focus-point-bullet__tooltip-container:hover {\n\t\tdisplay: flex;\n\t}\n}\n\n//***** TOOLTIP\n\n.tooltip-title {\n\tfont-weight: bold;\n\tmargin-right: 6px;\n}\n"],"names":[],"sourceRoot":""}

blocks/focused-schema/src/focus-point/edit.js

@@ -2,7 +2,7 @@ import { __ } from "@wordpress/i18n";
 import { useBlockProps } from "@wordpress/block-editor";
 import "./editor.scss";
 import { InspectorControls } from "@wordpress/block-editor";
-
+import { RichText } from "@wordpress/block-editor";
 import {
 	PanelBody,
 	FocalPointPicker,
@@ -79,8 +79,21 @@ export default function Edit({
 					className: `homegrade-blocks-focus-point-caption`,
 				})}
 			>
-				<span className="focus-point-title">{focusTitle}</span>
+				<RichText
-				{focusCaptionDescription}
+					tagName="span"
+					className="focus-point-title"
+					value={focusTitle}
+					onChange={(value) => {
+						handleChangeTitle(value);
+					}}
+				/>
+				<RichText
+					tagName="span"
+					value={focusCaptionDescription}
+					onChange={handleChangeCaptionDescription}
+				/>
+				{/* <span className="focus-point-title">{focusTitle}</span> */}
+				{/* {focusCaptionDescription} */}
 			</li>
 		</>
 	);

blocks/focused-schema/src/focus-point/save.js

@@ -8,8 +8,14 @@ export default function save({ attributes }) {
 				className: `homegrade-blocks-focus-point-caption`,
 			})}
 		>
-			<span className="focus-point-title">{focusTitle}</span>
+			{/* <span className="focus-point-title">{focusTitle}</span> */}
-			{focusCaptionDescription}
+			<RichText.Content
+				tagName="span"
+				className="focus-point-title"
+				value={focusTitle}
+			/>
+			<RichText.Content tagName="span" value={focusCaptionDescription} />
+			{/* {focusCaptionDescription} */}
 		</li>
 	);
 }

blocks/focused-schema/src/style.scss

@@ -16,6 +16,7 @@
 			counter-reset: myOrderedListItemsCounter;
 
 			li {
+				line-height: 1.3;
 				list-style-type: none;
 				position: relative;
 				padding: 8px;