Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

point gilles gauthier — bloc auto not working

Browse Source
This commit is contained in:
Antoine M 2023-08-21 17:34:15 +02:00
parent 234c175da0
commit db8c085163
22 changed files with 716 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
blocks/points-cles/build/render.php
View File

@ -12,7 +12,6 @@ foreach ($block->inner_blocks as $inner_block) {
<section class="wp-block-homegrade-content-blocks-points-cles"> <section class="wp-block-homegrade-content-blocks-points-cles">
<div class="wp-block-homegrade-content-blocks-points-cles__titling"> <div class="wp-block-homegrade-content-blocks-points-cles__titling">
<div class="icon"> <div class="icon">
<p></p>
<img src="<?php echo plugin_dir_url(dirname(__DIR__)) ?>points-cles/src/img/icon_feather_key.png" alt="" /> <img src="<?php echo plugin_dir_url(dirname(__DIR__)) ?>points-cles/src/img/icon_feather_key.png" alt="" />
</div> </div>
<h3 class=""><?php echo __("Les points clés", "homegrade-blocks__texte-fonctionnel") ?></h3> <h3 class=""><?php echo __("Les points clés", "homegrade-blocks__texte-fonctionnel") ?></h3>

1
blocks/points-cles/src/render.php
View File

@ -12,7 +12,6 @@ foreach ($block->inner_blocks as $inner_block) {
<section class="wp-block-homegrade-content-blocks-points-cles"> <section class="wp-block-homegrade-content-blocks-points-cles">
<div class="wp-block-homegrade-content-blocks-points-cles__titling"> <div class="wp-block-homegrade-content-blocks-points-cles__titling">
<div class="icon"> <div class="icon">
<p></p>
<img src="<?php echo plugin_dir_url(dirname(__DIR__)) ?>points-cles/src/img/icon_feather_key.png" alt="" /> <img src="<?php echo plugin_dir_url(dirname(__DIR__)) ?>points-cles/src/img/icon_feather_key.png" alt="" />
</div> </div>
<h3 class=""><?php echo __("Les points clés", "homegrade-blocks__texte-fonctionnel") ?></h3> <h3 class=""><?php echo __("Les points clés", "homegrade-blocks__texte-fonctionnel") ?></h3>

2
blocks/questions-container/build/render.php
View File

@ -13,6 +13,6 @@ echo '</pre>';
<section id="questions-container-<?php echo $relatedPostId ?>" class="questions-container-block"> <section id="questions-container-<?php echo $relatedPostId ?>" class="questions-container-block">
<h2><?php echo $relatedPost->post_title ?></h2> <h2 class="questions-container-block__title"><?php echo $relatedPost->post_title ?></h2>
<?php echo $relatedPost->post_content ?> <?php echo $relatedPost->post_content ?>
</section> </section>

2
blocks/questions-container/src/render.php
View File

@ -13,6 +13,6 @@ echo '</pre>';
<section id="questions-container-<?php echo $relatedPostId ?>" class="questions-container-block"> <section id="questions-container-<?php echo $relatedPostId ?>" class="questions-container-block">
<h2><?php echo $relatedPost->post_title ?></h2> <h2 class="questions-container-block__title"><?php echo $relatedPost->post_title ?></h2>
<?php echo $relatedPost->post_content ?> <?php echo $relatedPost->post_content ?>
</section> </section>

2
build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-element', 'wp-i18n', 'wp-rich-text'), 'version' => '3747f4557b961486077b'); <?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '73b19c142a0db4f81c24');

55
build/index.css Normal file
View File

@ -0,0 +1,55 @@
/*!**********************************************************************************************************************************************************************************!*\
!*** 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/tooltip.css ***!
\**********************************************************************************************************************************************************************************/
.popover_tooltip_field {
.components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}
.tooltip-word {
padding-top: 12px;
position: relative;
cursor: default;
text-underline-offset: 4px;
text-decoration-style: dashed;
text-decoration-color: red;
}
.tooltip-popup {
background-color: yellow;
position: absolute;
top: -6px;
left: 50%;
text-align: center;
transform: translate(-50%, -100%);
padding: 10px;
}
.tooltip-popup:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);
}
.tooltip-popup p {
margin: 0 !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.css ***!
\***********************************************************************************************************************************************************************************/
.brochure-download-icon {
margin: 0 0px 0 6px;
display: inline-block;
transform: translateY(-1px);
}
/*# sourceMappingURL=index.css.map*/

1
build/index.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAAA;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;AAEA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,wBAAwB;CACxB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,kBAAkB;CAClB,iCAAiC;CACjC,aAAa;AACd;AACA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,oBAAoB;AACrB;;;;;ACvCA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip.css","webpack://multi-blocks/./src/format-types/brochure.css"],"sourcesContent":[".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\r\n.tooltip-word {\r\n\tpadding-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-popup {\r\n\tbackground-color: yellow;\r\n\tposition: absolute;\r\n\ttop: -6px;\r\n\tleft: 50%;\r\n\ttext-align: center;\r\n\ttransform: translate(-50%, -100%);\r\n\tpadding: 10px;\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\tleft: 50%;\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 p {\r\n\tmargin: 0 !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":""}

291
build/index.js
View File

@ -2,6 +2,68 @@
/******/ "use strict"; /******/ "use strict";
/******/ var __webpack_modules__ = ({ /******/ var __webpack_modules__ = ({
/***/ "./node_modules/@wordpress/icons/build-module/library/check.js":
/*!*********************************************************************!*\
!*** ./node_modules/@wordpress/icons/build-module/library/check.js ***!
\*********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* 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_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const check = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (check);
//# sourceMappingURL=check.js.map
/***/ }),
/***/ "./node_modules/@wordpress/icons/build-module/library/trash.js":
/*!*********************************************************************!*\
!*** ./node_modules/@wordpress/icons/build-module/library/trash.js ***!
\*********************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* 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_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const trash = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M20 5h-5.7c0-1.3-1-2.3-2.3-2.3S9.7 3.7 9.7 5H4v2h1.5v.3l1.7 11.1c.1 1 1 1.7 2 1.7h5.7c1 0 1.8-.7 2-1.7l1.7-11.1V7H20V5zm-3.2 2l-1.7 11.1c0 .1-.1.2-.3.2H9.1c-.1 0-.3-.1-.3-.2L7.2 7h9.6z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (trash);
//# sourceMappingURL=trash.js.map
/***/ }),
/***/ "./blocks/utilities.js": /***/ "./blocks/utilities.js":
/*!*****************************!*\ /*!*****************************!*\
!*** ./blocks/utilities.js ***! !*** ./blocks/utilities.js ***!
@ -36,10 +98,10 @@ function getThematiqueFamilySlug(thematique_slug) {
/***/ }), /***/ }),
/***/ "./src/format-types/highlight.js": /***/ "./src/format-types/brochure.js":
/*!***************************************!*\ /*!**************************************!*\
!*** ./src/format-types/highlight.js ***! !*** ./src/format-types/brochure.js ***!
\***************************************/ \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
@ -47,12 +109,14 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* 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__ = __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_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_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/check.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/trash.js");
@ -61,36 +125,177 @@ __webpack_require__.r(__webpack_exports__);
const HighlightFormatButton = ({ const BrochureLinkFormatButton = props => {
...props const {
}) => { isActive,
// console.log(isActive); value,
// console.log(value); onChange
// console.log(props); } = props;
console.log(props); const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
// console.log(props.contentRef.current.innerHTML); const [linkValue, setLinkValue] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)("");
const activeFormat = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.getActiveFormats)(props.value).filter(format => format.type === "block-course/brochure-format")[0];
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_2__.RichTextToolbarButton, { // console.log(activeFormat);
icon: "edit", console.log((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.getActiveFormats)(props.value));
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)("Highlight", "blocks-course"), function handleFormat() {
onClick: () => { setIsPopoverOpen(!isPopoverOpen);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, { onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
type: "block-course/highlight", type: "block-course/brochure-format",
attributes: { attributes: {
style: "background-color: #f0ff00" href: linkValue.url,
} target: "_blank",
})); dataId: linkValue.id.toString(),
style: "text-decoration: underline;"
}
}));
}
function removeFormat() {
setIsPopoverOpen(false);
setLinkValue("");
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
type: "block-course/brochure-format"
}));
}
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__.BlockControls, null, isPopoverOpen && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Popover, {
onClose: () => setIsPopoverOpen(false),
className: "popover_tooltip_field"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.__experimentalLinkControl, {
suggestionsQuery: {
type: "attachment"
}, },
isActive: props.isActive value: linkValue,
})); onChange: value => {
console.log(value);
setLinkValue(value);
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
variant: "primary",
onClick: () => {
setIsPopoverOpen(!isPopoverOpen);
handleFormat();
}
}, "Valider")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
isActive: isActive,
icon: !isActive ? "book" : _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: !isActive ? "Ajouter un lien brochure" : "Supprimer le lien brochure",
onClick: () => !isActive ? setIsPopoverOpen(!isPopoverOpen) : removeFormat()
}))));
}; };
(0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)("block-course/highlight", { (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)("block-course/brochure-format", {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)("Highlight", "blocks-course"), title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Brochure", "blocks-course"),
tagName: "span", tagName: "a",
className: "myclass", className: "brochure-link-format",
edit: HighlightFormatButton edit: BrochureLinkFormatButton
}); });
/***/ }),
/***/ "./src/format-types/tooltip.js":
/*!*************************************!*\
!*** ./src/format-types/tooltip.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_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/check.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "./node_modules/@wordpress/icons/build-module/library/trash.js");
const TooltipFormatButton = props => {
const {
isActive,
value,
onChange
} = props;
const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const [popoverText, setPopoverText] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)("");
function handleFormat() {
setIsPopoverOpen(!isPopoverOpen);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
type: "block-course/tooltip",
attributes: {
"data-tooltip": popoverText,
style: "text-decoration: underline;"
}
}));
}
function removeFormat() {
setIsPopoverOpen(false);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
type: "block-course/tooltip"
}));
}
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__.BlockControls, null, isPopoverOpen && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Popover, {
onClose: () => setIsPopoverOpen(false),
className: "popover_tooltip_field"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.TextareaControl, {
label: "Text explicatif",
help: "Texte apparraissant au survol de la tooltip",
onChange: value => setPopoverText(value)
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
variant: "primary",
onClick: () => {
setIsPopoverOpen(false);
handleFormat();
}
}, "Valider")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
isActive: isActive,
icon: !isActive ? "admin-comments" : _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: !isActive ? "Ajouter une tooltip" : "Supprimer la tooltip",
onClick: () => {
!isActive ? setIsPopoverOpen(true) : removeFormat();
}
}))));
};
(0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)("block-course/tooltip", {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Tooltip", "blocks-course"),
tagName: "span",
className: "tooltip-word",
edit: TooltipFormatButton
});
/***/ }),
/***/ "./src/format-types/brochure.css":
/*!***************************************!*\
!*** ./src/format-types/brochure.css ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/format-types/tooltip.css":
/*!**************************************!*\
!*** ./src/format-types/tooltip.css ***!
\**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }), /***/ }),
/***/ "@wordpress/block-editor": /***/ "@wordpress/block-editor":
@ -133,6 +338,16 @@ module.exports = window["wp"]["i18n"];
/***/ }), /***/ }),
/***/ "@wordpress/primitives":
/*!************************************!*\
!*** external ["wp","primitives"] ***!
\************************************/
/***/ ((module) => {
module.exports = window["wp"]["primitives"];
/***/ }),
/***/ "@wordpress/rich-text": /***/ "@wordpress/rich-text":
/*!**********************************!*\ /*!**********************************!*\
!*** external ["wp","richText"] ***! !*** external ["wp","richText"] ***!
@ -218,8 +433,14 @@ var __webpack_exports__ = {};
!*** ./src/index.js ***! !*** ./src/index.js ***!
\**********************/ \**********************/
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _format_types_highlight_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./format-types/highlight.js */ "./src/format-types/highlight.js"); /* harmony import */ var _format_types_tooltip_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./format-types/tooltip.css */ "./src/format-types/tooltip.css");
/* harmony import */ var _blocks_utilities_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../blocks/utilities.js */ "./blocks/utilities.js"); /* harmony import */ var _format_types_tooltip_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./format-types/tooltip.js */ "./src/format-types/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_brochure_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./format-types/brochure.css */ "./src/format-types/brochure.css");
/* harmony import */ var _format_types_brochure_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./format-types/brochure.js */ "./src/format-types/brochure.js");
})(); })();

2
build/index.js.map
View File

File diff suppressed because one or more lines are too long

88
index.php
View File

@ -13,39 +13,83 @@
* *
*/ */
/* ---------------------------
BLOCK CATEGORY
---------------------------*/
function wpblock_add_block_categories($categories)
{
return array_merge(
[
[
'slug' => 'homegrade-blocks',
'title' => __('Blocs Homegrade ', 'block-course'),
'icon' => 'heart',
],
],
$categories
);
}
add_action('block_categories', 'wpblock_add_block_categories', 25, 2);
// ####### REGISTER BLOCKS
/* ---------------------------
REGISTER BLOCKS
---------------------------*/
function create_block_multiblocks_block_init() function create_block_multiblocks_block_init()
{ {
register_block_type(__DIR__ . '/blocka/build'); register_block_type(__DIR__ . '/blocks/chapter-header/build');
register_block_type(__DIR__ . '/blocks/rich-paragraph/build');
register_block_type(__DIR__ . '/blocks/picture-banner/build'); register_block_type(__DIR__ . '/blocks/picture-banner/build');
register_block_type(__DIR__ . '/blocks/points-cles/build'); register_block_type(__DIR__ . '/blocks/points-cles/build');
register_block_type(__DIR__ . '/blocks/rich-paragraph/build');
register_block_type(__DIR__ . '/blocks/content-heading/build'); register_block_type(__DIR__ . '/blocks/content-heading/build');
register_block_type(__DIR__ . '/blocks/questions-container/build'); register_block_type(__DIR__ . '/blocks/questions-container/build');
register_block_type(__DIR__ . '/blocks/questions-container-auto/build'); register_block_type(__DIR__ . '/blocks/questions-container-auto/build');
register_block_type(__DIR__ . '/blocks/highlight/build'); register_block_type(__DIR__ . '/blocks/highlight/build');
register_block_type(__DIR__ . '/blocks/chapter-header/build');
} }
add_action('init', 'create_block_multiblocks_block_init'); add_action('init', 'create_block_multiblocks_block_init');
// ####### ENQUEUE EDITOR JS CONTEXT
/* ---------------------------
ENQUEUE EDITOR JS CONTEXT
---------------------------*/
function homegrade_blocks_enqueue_editor_assets() function homegrade_blocks_enqueue_editor_assets()
{ {
$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php'); $asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
wp_enqueue_script('homegrade-blocks-script', plugins_url('build/index.js', __FILE__), $asset_file['dependencies'], $asset_file['version']); wp_enqueue_script('homegrade-blocks-script', plugins_url('build/index.js', __FILE__), $asset_file['dependencies'], $asset_file['version']);
// wp_enqueue_script( 'blocks-course-plugin-boilerplate-script', plugins_url('build/index.js', __FILE__), $asset_file['dependencies'], $asset_file['version']); wp_enqueue_style('blocks-course-plugin-boilerplate-style', plugins_url('build/index.css', __FILE__));
// wp_enqueue_style( 'blocks-course-plugin-boilerplate-style', plugins_url('build/index.css', __FILE__) );
} }
add_action('enqueue_block_editor_assets', 'homegrade_blocks_enqueue_editor_assets'); add_action('enqueue_block_editor_assets', 'homegrade_blocks_enqueue_editor_assets');
// ####### HANDLE BLOCKS TEMPLATE
/* -------------------------------------
ENQUEUE SCRIPTS AND STYLES FOR FRONT
-------------------------------------*/
function blocks_course_plugin_enqueue_assets()
{
$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
wp_enqueue_script('homegrade-blocks-tooltipjs', plugin_dir_url(__FILE__) . 'src/format-types/tooltip-front.js');
wp_enqueue_style('homegrade-blocks-tooltipcss', plugin_dir_url(__FILE__) . 'src/format-types/tooltip.css');
wp_enqueue_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure-front.js');
wp_enqueue_style('homegrade-blocks-brochurecss', plugin_dir_url(__FILE__) . 'src/format-types/brochure.css');
wp_localize_script('homegrade-blocks-brochurejs', 'img_path_datas', array(
'downloadIconPath' => plugin_dir_url(__FILE__) . '/src/img/icon_brochure_download.svg'
));
}
add_action('wp_enqueue_scripts', 'blocks_course_plugin_enqueue_assets');
/* ---------------------------
ALLOWED BLOCKS
---------------------------*/
function homegrade_allowed_block_types($allowed_blocks, $editor_context) function homegrade_allowed_block_types($allowed_blocks, $editor_context)
{ {
@ -88,30 +132,8 @@ function homegrade_allowed_block_types($allowed_blocks, $editor_context)
// return array_keys($blocks); // return array_keys($blocks);
} }
function wpblock_add_block_categories($categories)
{
return array_merge(
[
[
'slug' => 'homegrade-blocks',
'title' => __('Blocs Homegrade ', 'block-course'),
'icon' => 'heart',
],
],
$categories
);
}
add_action('block_categories', 'wpblock_add_block_categories', 25, 2);
function blocks_course_plugin_enqueue_assets()
{
$asset_file = include(plugin_dir_path(__FILE__) . 'build/index.asset.php');
wp_enqueue_script('homegrade-content-blocks', plugins_url('build/filters/filters.js', __FILE__), $asset_file['dependencies'], $asset_file['version']);
}
add_action('enqueue_block_editor_assets', 'blocks_course_plugin_enqueue_assets');
/* -------------------------------------
POST TYPE TEMPLATES
-------------------------------------*/
include_once('templates.php'); include_once('templates.php');

57
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@wordpress/icons": "^9.30.0",
"@wordpress/rich-text": "^6.16.0" "@wordpress/rich-text": "^6.16.0"
}, },
"devDependencies": { "devDependencies": {
@ -4308,6 +4309,19 @@
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
"integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==" "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
}, },
"node_modules/@wordpress/icons": {
"version": "9.30.0",
"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.30.0.tgz",
"integrity": "sha512-9fiFmsUcS1zYS0DzBFyywiItuRHIlxduo3MQifB8ekQ5bZGl6ZLl1lzIqaY1mmdc12bLB+Sxd9SeIcC2t08FfA==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.16.0",
"@wordpress/primitives": "^3.37.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/is-shallow-equal": { "node_modules/@wordpress/is-shallow-equal": {
"version": "4.39.0", "version": "4.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-4.39.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-4.39.0.tgz",
@ -4405,6 +4419,19 @@
"prettier": ">=2" "prettier": ">=2"
} }
}, },
"node_modules/@wordpress/primitives": {
"version": "3.37.0",
"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.37.0.tgz",
"integrity": "sha512-d+TioEE+T4Hye0CKIQwxTQVdMOFnk/GJW1BS0NatNWKcwaj3nQszxHkWAUWYg401dKx+TDeYae4He1ufur5AWA==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.16.0",
"classnames": "^2.3.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/priority-queue": { "node_modules/@wordpress/priority-queue": {
"version": "2.39.0", "version": "2.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-2.39.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-2.39.0.tgz",
@ -5760,6 +5787,11 @@
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
"dev": true "dev": true
}, },
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-webpack-plugin": { "node_modules/clean-webpack-plugin": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz", "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
@ -19691,6 +19723,16 @@
} }
} }
}, },
"@wordpress/icons": {
"version": "9.30.0",
"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.30.0.tgz",
"integrity": "sha512-9fiFmsUcS1zYS0DzBFyywiItuRHIlxduo3MQifB8ekQ5bZGl6ZLl1lzIqaY1mmdc12bLB+Sxd9SeIcC2t08FfA==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.16.0",
"@wordpress/primitives": "^3.37.0"
}
},
"@wordpress/is-shallow-equal": { "@wordpress/is-shallow-equal": {
"version": "4.39.0", "version": "4.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-4.39.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-4.39.0.tgz",
@ -19753,6 +19795,16 @@
"dev": true, "dev": true,
"requires": {} "requires": {}
}, },
"@wordpress/primitives": {
"version": "3.37.0",
"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.37.0.tgz",
"integrity": "sha512-d+TioEE+T4Hye0CKIQwxTQVdMOFnk/GJW1BS0NatNWKcwaj3nQszxHkWAUWYg401dKx+TDeYae4He1ufur5AWA==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.16.0",
"classnames": "^2.3.1"
}
},
"@wordpress/priority-queue": { "@wordpress/priority-queue": {
"version": "2.39.0", "version": "2.39.0",
"resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-2.39.0.tgz", "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-2.39.0.tgz",
@ -20744,6 +20796,11 @@
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==",
"dev": true "dev": true
}, },
"classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clean-webpack-plugin": { "clean-webpack-plugin": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz", "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"@wordpress/scripts": "^26.9.0" "@wordpress/scripts": "^26.9.0"
}, },
"dependencies": { "dependencies": {
"@wordpress/icons": "^9.30.0",
"@wordpress/rich-text": "^6.16.0" "@wordpress/rich-text": "^6.16.0"
} }
} }

21
src/format-types/brochure-front.js Normal file
View File

@ -0,0 +1,21 @@
// import downloadBrochureIcon from "../img/icon_brochure_download.svg";
window.addEventListener("DOMContentLoaded", (event) => {
// let tooltips = document.querySelectorAll(".tooltip-word");
let brochureLinks = document.querySelectorAll(".brochure-link-format");
// console.log("SALUT");
// console.log(tooltips);
// alert("SALUT");
const iconSrc = img_path_datas.downloadIconPath;
brochureLinks.forEach((brochureLink) => {
console.log(brochureLink);
const brochureLinkIcon = document.createElement("img");
brochureLinkIcon.src = iconSrc;
brochureLinkIcon.classList.add("brochure-download-icon");
brochureLinkIcon.alt = "";
brochureLink.appendChild(brochureLinkIcon);
});
});

5
src/format-types/brochure.css Normal file
View File

@ -0,0 +1,5 @@
.brochure-download-icon {
margin: 0 0px 0 6px;
display: inline-block;
transform: translateY(-1px);
}

99
src/format-types/brochure.js Normal file
View File

@ -0,0 +1,99 @@
import { registerFormatType, toggleFormat, getActiveFormats } from "@wordpress/rich-text";
import { __ } from "@wordpress/i18n";
import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, Button } from "@wordpress/components";
import { ToolbarGroup, ToolbarButton, TextareaControl } from "@wordpress/components";
import { check, trash } from "@wordpress/icons";
import { useState } from "@wordpress/element";
const BrochureLinkFormatButton = (props) => {
const { isActive, value, onChange } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [linkValue, setLinkValue] = useState("");
const activeFormat = getActiveFormats(props.value).filter(
(format) => format.type === "block-course/brochure-format"
)[0];
// console.log(activeFormat);
console.log(getActiveFormats(props.value));
function handleFormat() {
setIsPopoverOpen(!isPopoverOpen);
onChange(
toggleFormat(value, {
type: "block-course/brochure-format",
attributes: {
href: linkValue.url,
target: "_blank",
dataId: linkValue.id.toString(),
style: "text-decoration: underline;",
},
})
);
}
function removeFormat() {
setIsPopoverOpen(false);
setLinkValue("");
onChange(
toggleFormat(value, {
type: "block-course/brochure-format",
})
);
}
return (
<>
<BlockControls>
{isPopoverOpen && (
<Popover
onClose={() => setIsPopoverOpen(false)}
className='popover_tooltip_field'>
<LinkControl
suggestionsQuery={{
type: "attachment",
}}
value={linkValue}
onChange={(value) => {
console.log(value);
setLinkValue(value);
}}
/>
<Button
icon={check}
variant='primary'
onClick={() => {
setIsPopoverOpen(!isPopoverOpen);
handleFormat();
}}>
Valider
</Button>
</Popover>
)}
<ToolbarGroup>
<ToolbarButton
isActive={isActive}
icon={!isActive ? "book" : trash}
label={
!isActive
? "Ajouter un lien brochure"
: "Supprimer le lien brochure"
}
onClick={() =>
!isActive ? setIsPopoverOpen(!isPopoverOpen) : removeFormat()
}
/>
</ToolbarGroup>
</BlockControls>
</>
);
};
registerFormatType("block-course/brochure-format", {
title: __("Brochure", "blocks-course"),
tagName: "a",
className: "brochure-link-format",
edit: BrochureLinkFormatButton,
});

53
src/format-types/highlight.js
View File

@ -1,53 +0,0 @@
import { registerFormatType, toggleFormat } from "@wordpress/rich-text";
import { RichTextToolbarButton } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText, BlockControls, InspectorControls } from "@wordpress/block-editor";
import {
ToolbarGroup,
ToolbarButton,
DropdownMenu,
ToolbarDropdownMenu,
PanelBody,
TextControl,
TextareaControl,
ToggleControl,
SelectControl,
} from "@wordpress/components";
import { getActiveFormats, getActiveObject } from "@wordpress/rich-text";
import { LinkControl } from "@wordpress/block-editor";
const HighlightFormatButton = ({ ...props }) => {
// console.log(isActive);
// console.log(value);
// console.log(props);
console.log(props);
// console.log(props.contentRef.current.innerHTML);
return (
<>
<RichTextToolbarButton
icon='edit'
title={__("Highlight", "blocks-course")}
onClick={() => {
onChange(
toggleFormat(value, {
type: "block-course/highlight",
attributes: {
style: "background-color: #f0ff00",
},
})
);
}}
isActive={props.isActive}></RichTextToolbarButton>
</>
);
};
registerFormatType("block-course/highlight", {
title: __("Highlight", "blocks-course"),
tagName: "span",
className: "myclass",
edit: HighlightFormatButton,
});

26
src/format-types/tooltip-front.js Normal file
View File

@ -0,0 +1,26 @@
window.addEventListener("DOMContentLoaded", (event) => {
// let tooltips = document.querySelectorAll(".tooltip-word");
let tooltipWords = document.querySelectorAll("[data-tooltip]");
// console.log("SALUT");
// console.log(tooltips);
// alert("SALUT");
tooltipWords.forEach((tooltipWord) => {
tooltipWord.addEventListener("mouseover", (event) => {
const tooltipPopup = document.createElement("div");
tooltipPopup.className = "tooltip-popup";
const tooltipContent = tooltipWord.getAttribute("data-tooltip");
const tooltipContentParagraph = document.createElement("p");
tooltipContentParagraph.textContent = tooltipContent;
tooltipPopup.appendChild(tooltipContentParagraph);
tooltipWord.appendChild(tooltipPopup);
});
tooltipWord.addEventListener("mouseout", function () {
const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
tooltipPopup.remove();
});
});
});

40
src/format-types/tooltip.css Normal file
View File

@ -0,0 +1,40 @@
.popover_tooltip_field {
.components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}
.tooltip-word {
padding-top: 12px;
position: relative;
cursor: default;
text-underline-offset: 4px;
text-decoration-style: dashed;
text-decoration-color: red;
}
.tooltip-popup {
background-color: yellow;
position: absolute;
top: -6px;
left: 50%;
text-align: center;
transform: translate(-50%, -100%);
padding: 10px;
}
.tooltip-popup:after {
content: "";
display: block;
background-color: white;
position: absolute;
top: 100%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);
}
.tooltip-popup p {
margin: 0 !important;
}

81
src/format-types/tooltip.js Normal file
View File

@ -0,0 +1,81 @@
import { registerFormatType, toggleFormat } from "@wordpress/rich-text";
import { __ } from "@wordpress/i18n";
import { BlockControls } from "@wordpress/block-editor";
import { Popover, Button } from "@wordpress/components";
import { ToolbarGroup, ToolbarButton, TextareaControl, ToggleControl, SelectControl } from "@wordpress/components";
import { check, trash } from "@wordpress/icons";
import { useState } from "@wordpress/element";
const TooltipFormatButton = (props) => {
const { isActive, value, onChange } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [popoverText, setPopoverText] = useState("");
function handleFormat() {
setIsPopoverOpen(!isPopoverOpen);
onChange(
toggleFormat(value, {
type: "block-course/tooltip",
attributes: {
"data-tooltip": popoverText,
style: "text-decoration: underline;",
},
})
);
}
function removeFormat() {
setIsPopoverOpen(false);
onChange(
toggleFormat(value, {
type: "block-course/tooltip",
})
);
}
return (
<>
<BlockControls>
{isPopoverOpen && (
<Popover
onClose={() => setIsPopoverOpen(false)}
className='popover_tooltip_field'>
<TextareaControl
label='Text explicatif'
help='Texte apparraissant au survol de la tooltip'
onChange={(value) => setPopoverText(value)}
/>
<Button
icon={check}
variant='primary'
onClick={() => {
setIsPopoverOpen(false);
handleFormat();
}}>
Valider
</Button>
</Popover>
)}
<ToolbarGroup>
<ToolbarButton
isActive={isActive}
icon={!isActive ? "admin-comments" : trash}
label={!isActive ? "Ajouter une tooltip" : "Supprimer la tooltip"}
onClick={() => {
!isActive ? setIsPopoverOpen(true) : removeFormat();
}}
/>
</ToolbarGroup>
</BlockControls>
</>
);
};
registerFormatType("block-course/tooltip", {
title: __("Tooltip", "blocks-course"),
tagName: "span",
className: "tooltip-word",
edit: TooltipFormatButton,
});

7
src/img/icon_brochure_download.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.005" height="15.005" viewBox="0 0 15.005 15.005">
<g id="Icon_feather-download" data-name="Icon feather-download" transform="translate(-3.5 -3.5)">
<path id="Tracé_18404" data-name="Tracé 18404" d="M17.5,22.5v2.89a1.445,1.445,0,0,1-1.445,1.445H5.945A1.445,1.445,0,0,1,4.5,25.39V22.5" transform="translate(0 -9.33)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_18405" data-name="Tracé 18405" d="M10.5,15l3.612,3.612L17.725,15" transform="translate(-3.11 -5.443)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_18406" data-name="Tracé 18406" d="M18,13.17V4.5" transform="translate(-6.998)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

6
src/index.js
View File

@ -1,2 +1,6 @@
import "./format-types/highlight.js"; import "./format-types/tooltip.css";
import "./format-types/tooltip.js";
import "../blocks/utilities.js"; import "../blocks/utilities.js";
import "./format-types/brochure.css";
import "./format-types/brochure.js";

4
templates.php
View File

@ -1,5 +1,7 @@
<?php <?php
/* ---------------------------
BLOCK TEMPLATE
---------------------------*/
function blocks_course_plugin_register_template($args, $post_type) function blocks_course_plugin_register_template($args, $post_type)
{ {
if ($post_type == 'conseils') { if ($post_type == 'conseils') {