FEATURE Introducing the boule format type

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '0cf4273f82f41f81d701');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '1dd4bad8f85ef781800d');

build/index.css

@@ -71,6 +71,18 @@
 	}
 }
 
+/*!**************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/format-types/boule/boule.css ***!
+  \**************************************************************************************************************************************************************************************/
+.boule {
+  display: inline-block !important;
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 50% !important;
+  break-word: break-all !important;
+  text-align: center !important;
+}
+
 /*!********************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/format-types/brochure/brochure.css ***!
   \********************************************************************************************************************************************************************************************/

build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,uBAAuB;CACvB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,kBAAkB;CAClB,qBAAqB;AACtB;;AAEA;CACC,kBAAkB;CAClB,QAAQ;CACR,SAAS;CACT,sCAAsC;CACtC,iCAAiC;CACjC,gBAAgB;CAChB,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;CAClB,yBAAyB;AAC1B;AACA;CACC,aAAa;AACd;;AAEA;;CAEC;EACC,cAAc;CACf;AACD;;AAEA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,eAAe;CACf,+BAA+B;CAC/B,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CACpB,wBAAwB;AACzB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;ACnEA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\t/* padding-top: 12px; */\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-container {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.tooltip-popup {\r\n\tposition: absolute;\r\n\ttop: 0px;\r\n\tleft: 50%;\r\n\t/* transform: translate(-50%, -98%); */\r\n\ttransform: translate(-50%, -100%);\r\n\ttext-align: left;\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n\t--tooltip-x-position: 50%;\r\n}\r\n.tooltip-popup[aria-hidden=\"true\"] {\r\n\tdisplay: none;\r\n}\r\n\r\n.tooltip-container:hover,\r\n.tooltip-container:focus-visible {\r\n\t.tooltip-popup {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\t/* left: 50%; */\r\n\tleft: var(--tooltip-x-position);\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n\tmargin-top: 0 !important;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,uBAAuB;CACvB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,kBAAkB;CAClB,qBAAqB;AACtB;;AAEA;CACC,kBAAkB;CAClB,QAAQ;CACR,SAAS;CACT,sCAAsC;CACtC,iCAAiC;CACjC,gBAAgB;CAChB,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;CAClB,yBAAyB;AAC1B;AACA;CACC,aAAa;AACd;;AAEA;;CAEC;EACC,cAAc;CACf;AACD;;AAEA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,eAAe;CACf,+BAA+B;CAC/B,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;CACpB,wBAAwB;AACzB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;ACnEA;EACE,gCAAgC;EAChC,sBAAsB;EACtB,uBAAuB;EACvB,6BAA6B;EAC7B,gCAAgC;EAChC,6BAA6B;AAC/B;;;;;ACPA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/boule/boule.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\t/* padding-top: 12px; */\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-container {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.tooltip-popup {\r\n\tposition: absolute;\r\n\ttop: 0px;\r\n\tleft: 50%;\r\n\t/* transform: translate(-50%, -98%); */\r\n\ttransform: translate(-50%, -100%);\r\n\ttext-align: left;\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n\t--tooltip-x-position: 50%;\r\n}\r\n.tooltip-popup[aria-hidden=\"true\"] {\r\n\tdisplay: none;\r\n}\r\n\r\n.tooltip-container:hover,\r\n.tooltip-container:focus-visible {\r\n\t.tooltip-popup {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\t/* left: 50%; */\r\n\tleft: var(--tooltip-x-position);\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n\tmargin-top: 0 !important;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".boule {\r\n  display: inline-block !important;\r\n  width: 30px !important;\r\n  height: 30px !important;\r\n  border-radius: 50% !important;\r\n  break-word: break-all !important;\r\n  text-align: center !important;\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""}

build/index.js

@@ -88,6 +88,49 @@ function getAdminLanguageFromCookie(c_name) {
 
 /***/ }),
 
+/***/ "./src/format-types/boule/boule.js":
+/*!*****************************************!*\
+  !*** ./src/format-types/boule/boule.js ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/rich-text */ "@wordpress/rich-text");
+/* harmony import */ var _wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
+
+
+
+const formatName = 'homegrade-format/boule';
+const BouleButton = props => {
+  const {
+    isActive,
+    value,
+    onChange
+  } = props;
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichTextToolbarButton, {
+    icon: "editor-code",
+    title: "Boule",
+    onClick: () => {
+      onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
+        type: formatName
+      }));
+    },
+    isActive: isActive
+  });
+};
+(0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)(formatName, {
+  title: 'Boule',
+  tagName: 'span',
+  className: 'boule',
+  edit: BouleButton
+});
+
+/***/ }),
+
 /***/ "./src/format-types/brochure/brochure.js":
 /*!***********************************************!*\
   !*** ./src/format-types/brochure/brochure.js ***!
@@ -344,6 +387,18 @@ const Edit = props => {
   edit: Edit
 });
 
+/***/ }),
+
+/***/ "./src/format-types/boule/boule.css":
+/*!******************************************!*\
+  !*** ./src/format-types/boule/boule.css ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
 /***/ }),
 
 /***/ "./src/format-types/brochure/brochure.css":
@@ -517,9 +572,13 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _format_types_tooltip_tooltip_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./format-types/tooltip/tooltip.css */ "./src/format-types/tooltip/tooltip.css");
 /* harmony import */ var _format_types_tooltip_tooltip_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./format-types/tooltip/tooltip.js */ "./src/format-types/tooltip/tooltip.js");
-/* harmony import */ var _blocks_utilities_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../blocks/utilities.js */ "./blocks/utilities.js");
+/* harmony import */ var _format_types_boule_boule_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./format-types/boule/boule.css */ "./src/format-types/boule/boule.css");
-/* harmony import */ var _format_types_brochure_brochure_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./format-types/brochure/brochure.css */ "./src/format-types/brochure/brochure.css");
+/* harmony import */ var _blocks_utilities_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../blocks/utilities.js */ "./blocks/utilities.js");
-/* harmony import */ var _format_types_brochure_brochure_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./format-types/brochure/brochure.js */ "./src/format-types/brochure/brochure.js");
+/* harmony import */ var _format_types_brochure_brochure_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./format-types/brochure/brochure.css */ "./src/format-types/brochure/brochure.css");
+/* harmony import */ var _format_types_brochure_brochure_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./format-types/brochure/brochure.js */ "./src/format-types/brochure/brochure.js");
+/* harmony import */ var _format_types_boule_boule_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./format-types/boule/boule.js */ "./src/format-types/boule/boule.js");
+
+
 
 
 

homegrade-blocks.php

@@ -160,6 +160,7 @@ function homegrade_blocks_plugin_enqueue_assets()
 		wp_enqueue_style('homegrade-blocks-tooltipcss', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip.css');
 		wp_enqueue_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');
 	}
+	wp_enqueue_style('homegrade-blocks-boulecss', plugin_dir_url(__FILE__) . 'src/format-types/boule/boule.css');
 
 	// #PASSING TRANSLATIONS
 	wp_register_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');

src/format-types/boule/boule.css

@@ -0,0 +1,8 @@
+.boule {
+  display: inline-block !important;
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 50% !important;
+  break-word: break-all !important;
+  text-align: center !important;
+}

src/format-types/boule/boule.js

@@ -0,0 +1,28 @@
+import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+
+const formatName = 'homegrade-format/boule';
+
+const BouleButton = (props) => {
+  const { isActive, value, onChange } = props;
+  return (
+    <RichTextToolbarButton
+      icon="editor-code"
+      title="Boule"
+      onClick={() => {
+        onChange(
+          toggleFormat(value, {
+            type: formatName,
+          })
+        );
+      }}
+      isActive={isActive}
+    />
+  );
+};
+registerFormatType(formatName, {
+  title: 'Boule',
+  tagName: 'span',
+  className: 'boule',
+  edit: BouleButton,
+});

src/index.js

@@ -1,9 +1,11 @@
-import "./format-types/tooltip/tooltip.css";
+import './format-types/tooltip/tooltip.css';
-import "./format-types/tooltip/tooltip.js";
+import './format-types/tooltip/tooltip.js';
+import './format-types/boule/boule.css';
 
-import "../blocks/utilities.js";
+import '../blocks/utilities.js';
-import "./format-types/brochure/brochure.css";
+import './format-types/brochure/brochure.css';
-import "./format-types/brochure/brochure.js";
+import './format-types/brochure/brochure.js';
+import './format-types/boule/boule.js';
 
 // import React from "react";