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

refactoring and cleaning blocks

Browse Source
This commit is contained in:
Antoine M 2023-08-31 17:22:46 +02:00
parent 14071448dc
commit 4c8f206c59
47 changed files with 491 additions and 679 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/content-heading/build/index.asset.php
View File

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

13
blocks/content-heading/build/index.js
View File

@ -49,14 +49,6 @@ function Edit({
onClick: () => { onClick: () => {
onChangeHeadingLevel("h3"); onChangeHeadingLevel("h3");
} }
// label={
// !isActive
// ? "Ajouter un lien brochure"
// : "Supprimer le lien brochure"
// }
// onClick={() =>
// !isActive ? setIsPopoverOpen(!isPopoverOpen) : removeFormat()
// }
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
isActive: headingLevel === "h4", isActive: headingLevel === "h4",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
@ -70,7 +62,6 @@ function Edit({
onChangeHeadingLevel("h5"); onChangeHeadingLevel("h5");
} }
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, { }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
className: "wp-block-homegrade-content-blocks-content-heading",
onChange: value => setAttributes({ onChange: value => setAttributes({
title: value title: value
}), }),
@ -152,9 +143,7 @@ function save({
} = attributes; } = attributes;
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_1__.RichText.Content, { 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_1__.RichText.Content, {
tagName: headingLevel, tagName: headingLevel,
value: title value: title,
// className="homegrade-blocks-custom-heading"
,
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-custom-heading` className: `homegrade-blocks-custom-heading`
}) })

2
blocks/content-heading/build/index.js.map
View File

File diff suppressed because one or more lines are too long

34
blocks/content-heading/src/edit.js
View File

@ -2,32 +2,11 @@ import { __ } from "@wordpress/i18n";
import { import {
useBlockProps, useBlockProps,
HeadingLevelDropdown,
InnerBlocks,
RichText, RichText,
InspectorControls,
AlignmentToolbar,
BlockControls, BlockControls,
PanelColorSettings,
ContrastChecker,
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import { import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
ToolbarGroup, import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
ToolbarButton,
PanelBody,
ToggleControl,
TextControl,
ColorPalette,
ColorPicker,
} from "@wordpress/components";
import {
check,
trash,
headingLevel3,
headingLevel4,
headingLevel5,
heading,
} from "@wordpress/icons";
import "./editor.scss"; import "./editor.scss";
@ -48,14 +27,6 @@ export default function Edit({ attributes, setAttributes }) {
onClick={() => { onClick={() => {
onChangeHeadingLevel("h3"); onChangeHeadingLevel("h3");
}} }}
// label={
// !isActive
// ? "Ajouter un lien brochure"
// : "Supprimer le lien brochure"
// }
// onClick={() =>
// !isActive ? setIsPopoverOpen(!isPopoverOpen) : removeFormat()
// }
/> />
<ToolbarButton <ToolbarButton
isActive={headingLevel === "h4"} isActive={headingLevel === "h4"}
@ -75,7 +46,6 @@ export default function Edit({ attributes, setAttributes }) {
</BlockControls> </BlockControls>
<RichText <RichText
className="wp-block-homegrade-content-blocks-content-heading"
onChange={(value) => setAttributes({ title: value })} onChange={(value) => setAttributes({ title: value })}
value={title} value={title}
placeholder={__( placeholder={__(

3
blocks/content-heading/src/save.js
View File

@ -1,4 +1,4 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, RichText } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { title, headingLevel } = attributes; const { title, headingLevel } = attributes;
@ -8,7 +8,6 @@ export default function save({ attributes }) {
<RichText.Content <RichText.Content
tagName={headingLevel} tagName={headingLevel}
value={title} value={title}
// className="homegrade-blocks-custom-heading"
{...useBlockProps.save({ {...useBlockProps.save({
className: `homegrade-blocks-custom-heading`, className: `homegrade-blocks-custom-heading`,
})} })}

2
blocks/picture-banner/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '5d8a90ca5c5919d18241'); <?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f073dc5f029a71961853');

75
blocks/picture-banner/build/index.js
View File

@ -46,18 +46,18 @@ function Edit({
imagePosition imagePosition
} = attributes; } = attributes;
const [blobUrl, setBlobUrl] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(); const [blobUrl, setBlobUrl] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)();
const onUploadError = message => { function onUploadError(message) {
noticeOperations.removeAllNotices(); // Remove all previous notices noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(message); noticeOperations.createErrorNotice(message);
}; }
const removeCoverImg = () => { function removeCoverImg() {
setAttributes({ setAttributes({
coverUrl: undefined, coverUrl: undefined,
coverId: undefined, coverId: undefined,
coverAlt: "" coverAlt: ""
}); });
}; }
const updateImage = image => { function updateCoverImage(image) {
if (!image || !image.url) { if (!image || !image.url) {
setAttributes({ setAttributes({
coverUrl: undefined, coverUrl: undefined,
@ -71,7 +71,9 @@ function Edit({
coverId: image.id, coverId: image.id,
coverAlt: image.alt coverAlt: image.alt
}); });
}; }
// Si l'upload s'est mal passé -> reset
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (!coverId && (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) { if (!coverId && (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) {
setAttributes({ setAttributes({
@ -80,6 +82,8 @@ function Edit({
}); });
} }
}, []); }, []);
// Gestion de l'url temporaire
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl // Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if ((0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) { if ((0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl)) {
@ -101,8 +105,6 @@ function Edit({
}, },
value: imagePosition, value: imagePosition,
onChange: focalPoint => { onChange: focalPoint => {
// console.log("focalPoint");
// console.log(focalPoint);
setAttributes({ setAttributes({
imagePosition: focalPoint imagePosition: focalPoint
}); });
@ -126,7 +128,7 @@ function Edit({
name: "Remplacer l'image", name: "Remplacer l'image",
disableMediaButtons: coverUrl, disableMediaButtons: coverUrl,
icon: "trash", icon: "trash",
onSelect: updateImage, onSelect: updateCoverImage,
onError: onUploadError, onError: onUploadError,
accept: "image/*" // On upload Allow only images accept: "image/*" // On upload Allow only images
, ,
@ -140,11 +142,11 @@ function Edit({
icon: "trash", icon: "trash",
title: "Supprimer l'image", title: "Supprimer l'image",
onClick: removeCoverImg onClick: removeCoverImg
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)() ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { className: `homegrade-content-blocks-picture-banner ${(0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) ? "is-loading" : ""} ${heightFixed ? "fixed-height" : ""} `
className: `picture-container ${(0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) ? "is-loading" : ""} ${heightFixed ? "fixed-height" : ""} ` })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: coverUrl, src: coverUrl,
alt: coverAlt, alt: coverAlt,
style: { style: {
@ -153,7 +155,7 @@ function Edit({
}), (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Spinner, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.MediaPlaceholder, { }), (0,_wordpress_blob__WEBPACK_IMPORTED_MODULE_5__.isBlobURL)(coverUrl) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Spinner, null)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.MediaPlaceholder, {
disableMediaButtons: coverUrl, disableMediaButtons: coverUrl,
icon: "admin-appearance", icon: "admin-appearance",
onSelect: updateImage, onSelect: updateCoverImage,
onError: onUploadError, onError: onUploadError,
accept: "image/*" // On upload Allow only images accept: "image/*" // On upload Allow only images
, ,
@ -180,42 +182,13 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js"); /* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/block.json"); /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
/**
* Registers a new block provided a unique name and an object defining its behavior.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* All files containing `style` keyword are bundled together. The code used
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
/**
* Internal dependencies
*/
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, { (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
/**
* @see ./edit.js
*/
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"], edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
/**
* @see ./save.js
*/
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"] save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
}); });
@ -247,20 +220,18 @@ function save({
heightFixed, heightFixed,
imagePosition imagePosition
} = attributes; } = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-content-blocks-picture-banner` className: `homegrade-content-blocks-picture-banner ${heightFixed ? "fixed-height" : ""}`
}) })
}, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, coverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
className: `picture-container ${heightFixed ? "fixed-height" : ""}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: coverUrl, src: coverUrl,
alt: coverAlt, alt: coverAlt,
style: { style: {
objectPosition: `${imagePosition.x * 100}% ${imagePosition.y * 100}%` objectPosition: `${imagePosition.x * 100}% ${imagePosition.y * 100}%`
}, },
className: `wp-image-${coverId}` className: `wp-image-${coverId}`
}))); }));
} }
/***/ }), /***/ }),

2
blocks/picture-banner/build/index.js.map
View File

File diff suppressed because one or more lines are too long

4
blocks/picture-banner/build/style-index.css
View File

@ -9,12 +9,10 @@
*/ */
.wp-block-homegrade-content-blocks-picture-banner { .wp-block-homegrade-content-blocks-picture-banner {
margin-bottom: 20px; margin-bottom: 20px;
}
.wp-block-homegrade-content-blocks-picture-banner .picture-container {
overflow: hidden; overflow: hidden;
border-radius: 22px; border-radius: 22px;
} }
.wp-block-homegrade-content-blocks-picture-banner .picture-container.fixed-height img { .wp-block-homegrade-content-blocks-picture-banner.fixed-height img {
width: 100%; width: 100%;
height: 200px; height: 200px;
-o-object-fit: cover; -o-object-fit: cover;

2
blocks/picture-banner/build/style-index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;AACF;AACG;EACC;EACA;EACA;KAAA;EACA;KAAA;AACJ,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.wp-block-homegrade-content-blocks-picture-banner {\n\tmargin-bottom: 20px;\n\t.picture-container {\n\t\toverflow: hidden;\n\t\tborder-radius: 22px;\n\t\t&.fixed-height {\n\t\t\timg {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 200px;\n\t\t\t\tobject-fit: cover;\n\t\t\t\tobject-position: center;\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""} {"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;EACA;EACA;AAAD;AAEE;EACC;EACA;EACA;KAAA;EACA;KAAA;AAAH,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.wp-block-homegrade-content-blocks-picture-banner {\n\tmargin-bottom: 20px;\n\toverflow: hidden;\n\tborder-radius: 22px;\n\t&.fixed-height {\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 200px;\n\t\t\tobject-fit: cover;\n\t\t\tobject-position: center;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}

40
blocks/picture-banner/src/edit.js
View File

@ -10,7 +10,6 @@ import {
import { import {
ToolbarGroup, ToolbarGroup,
ToolbarButton, ToolbarButton,
ToolbarDropdownMenu,
Spinner, Spinner,
withNotices, withNotices,
FocalPointPicker, FocalPointPicker,
@ -31,19 +30,19 @@ function Edit({
attributes; attributes;
const [blobUrl, setBlobUrl] = useState(); const [blobUrl, setBlobUrl] = useState();
const onUploadError = (message) => { function onUploadError(message) {
noticeOperations.removeAllNotices(); // Remove all previous notices noticeOperations.removeAllNotices();
noticeOperations.createErrorNotice(message); noticeOperations.createErrorNotice(message);
}; }
const removeCoverImg = () => { function removeCoverImg() {
setAttributes({ setAttributes({
coverUrl: undefined, coverUrl: undefined,
coverId: undefined, coverId: undefined,
coverAlt: "", coverAlt: "",
}); });
}; }
const updateImage = (image) => { function updateCoverImage(image) {
if (!image || !image.url) { if (!image || !image.url) {
setAttributes({ setAttributes({
coverUrl: undefined, coverUrl: undefined,
@ -57,12 +56,16 @@ function Edit({
coverId: image.id, coverId: image.id,
coverAlt: image.alt, coverAlt: image.alt,
}); });
}; }
// Si l'upload s'est mal passé -> reset
useEffect(() => { useEffect(() => {
if (!coverId && isBlobURL(coverUrl)) { if (!coverId && isBlobURL(coverUrl)) {
setAttributes({ coverUrl: undefined, coverAlt: "" }); setAttributes({ coverUrl: undefined, coverAlt: "" });
} }
}, []); }, []);
// Gestion de l'url temporaire
useEffect(() => { useEffect(() => {
// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl // Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
if (isBlobURL(coverUrl)) { if (isBlobURL(coverUrl)) {
@ -88,8 +91,6 @@ function Edit({
}} }}
value={imagePosition} value={imagePosition}
onChange={(focalPoint) => { onChange={(focalPoint) => {
// console.log("focalPoint");
// console.log(focalPoint);
setAttributes({ imagePosition: focalPoint }); setAttributes({ imagePosition: focalPoint });
}} }}
/> />
@ -118,7 +119,7 @@ function Edit({
name="Remplacer l'image" name="Remplacer l'image"
disableMediaButtons={coverUrl} disableMediaButtons={coverUrl}
icon="trash" icon="trash"
onSelect={updateImage} onSelect={updateCoverImage}
onError={onUploadError} onError={onUploadError}
accept="image/*" // On upload Allow only images accept="image/*" // On upload Allow only images
allowedTypes={["image"]} // Onlibrary Allow only images allowedTypes={["image"]} // Onlibrary Allow only images
@ -135,13 +136,15 @@ function Edit({
)} )}
</BlockControls> </BlockControls>
<section {...useBlockProps()}>
{coverUrl && (
<div <div
className={`picture-container ${ {...useBlockProps({
className: `homegrade-content-blocks-picture-banner ${
isBlobURL(coverUrl) ? "is-loading" : "" isBlobURL(coverUrl) ? "is-loading" : ""
} ${heightFixed ? "fixed-height" : ""} `} } ${heightFixed ? "fixed-height" : ""} `,
})}
> >
{coverUrl && (
<>
<img <img
src={coverUrl} src={coverUrl}
alt={coverAlt} alt={coverAlt}
@ -153,18 +156,19 @@ function Edit({
/> />
{isBlobURL(coverUrl) && <Spinner />} {isBlobURL(coverUrl) && <Spinner />}
</div> </>
)} )}
<MediaPlaceholder <MediaPlaceholder
disableMediaButtons={coverUrl} disableMediaButtons={coverUrl}
icon="admin-appearance" icon="admin-appearance"
onSelect={updateImage} onSelect={updateCoverImage}
onError={onUploadError} onError={onUploadError}
accept="image/*" // On upload Allow only images accept="image/*" // On upload Allow only images
allowedTypes={["image"]} // Onlibrary Allow only images allowedTypes={["image"]} // Onlibrary Allow only images
notices={noticeUI} // En cas d'erreur d'upload notices={noticeUI} // En cas d'erreur d'upload
/> />
</section> </div>
</> </>
); );
} }

38
blocks/picture-banner/src/index.js
View File

@ -1,39 +1,11 @@
/** import { registerBlockType } from "@wordpress/blocks";
* Registers a new block provided a unique name and an object defining its behavior. import "./style.scss";
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
import { registerBlockType } from '@wordpress/blocks';
/** import Edit from "./edit";
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. import save from "./save";
* All files containing `style` keyword are bundled together. The code used import metadata from "./block.json";
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
import './style.scss';
/**
* Internal dependencies
*/
import Edit from './edit';
import save from './save';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType(metadata.name, { registerBlockType(metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit, edit: Edit,
/**
* @see ./save.js
*/
save, save,
}); });

20
blocks/picture-banner/src/save.js
View File

@ -1,23 +1,16 @@
import { import { useBlockProps } from "@wordpress/block-editor";
useBlockProps,
MediaPlaceholder,
RichText,
BlockControls,
MediaReplaceFlow,
} from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { coverUrl, coverId, coverAlt, heightFixed, imagePosition } = const { coverUrl, coverId, coverAlt, heightFixed, imagePosition } =
attributes; attributes;
return ( return (
<section <div
{...useBlockProps.save({ {...useBlockProps.save({
className: `homegrade-content-blocks-picture-banner`, className: `homegrade-content-blocks-picture-banner ${
heightFixed ? "fixed-height" : ""
}`,
})} })}
> >
{coverUrl && ( {coverUrl && (
<div
className={`picture-container ${heightFixed ? "fixed-height" : ""}`}
>
<img <img
src={coverUrl} src={coverUrl}
alt={coverAlt} alt={coverAlt}
@ -28,8 +21,7 @@ export default function save({ attributes }) {
}} }}
className={`wp-image-${coverId}`} className={`wp-image-${coverId}`}
/> />
</div>
)} )}
</section> </div>
); );
} }

2
blocks/picture-banner/src/style.scss
View File

@ -7,7 +7,6 @@
.wp-block-homegrade-content-blocks-picture-banner { .wp-block-homegrade-content-blocks-picture-banner {
margin-bottom: 20px; margin-bottom: 20px;
.picture-container {
overflow: hidden; overflow: hidden;
border-radius: 22px; border-radius: 22px;
&.fixed-height { &.fixed-height {
@ -19,4 +18,3 @@
} }
} }
} }
}

2
blocks/questions-container/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => '0b6b72dd5b7cf42b9c8a'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => 'd119409565df9cba01b5');

1
blocks/questions-container/build/index.js
View File

@ -107,7 +107,6 @@ function OptionsSelectControl({
return null; return null;
}); });
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
console.log(relatedPossiblePages);
if (relatedPossiblePages) { if (relatedPossiblePages) {
setRelatedQuestionPages(buildSelectOptions(relatedPossiblePages)); setRelatedQuestionPages(buildSelectOptions(relatedPossiblePages));
} }

2
blocks/questions-container/build/index.js.map
View File

File diff suppressed because one or more lines are too long

1
blocks/questions-container/src/OptionsSelectControl.js
View File

@ -89,7 +89,6 @@ export default function OptionsSelectControl({ setAttributes, relatedPostId }) {
}); });
useEffect(() => { useEffect(() => {
console.log(relatedPossiblePages);
if (relatedPossiblePages) { if (relatedPossiblePages) {
setRelatedQuestionPages(buildSelectOptions(relatedPossiblePages)); setRelatedQuestionPages(buildSelectOptions(relatedPossiblePages));
} }

13
blocks/vocabulaire-summary/build/block.json
View File

@ -5,24 +5,25 @@
"version": "0.1.0", "version": "0.1.0",
"title": "Vocabulaire de la fiche", "title": "Vocabulaire de la fiche",
"category": "homegrade-blocks", "category": "homegrade-blocks",
"icon": "testimonial", "icon": {
"foreground": "#DF1E1E",
"src": "testimonial"
},
"description": "Pour afficher tout le vocabulaire contenu dans la fiche", "description": "Pour afficher tout le vocabulaire contenu dans la fiche",
"supports": { "supports": {
"html": false "html": false,
"multiple": false
}, },
"textdomain": "homegrade-blocks", "textdomain": "homegrade-blocks",
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"viewScript": "file:./frontend.js", "viewScript": "file:./frontend.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": { "attributes": {
"tooltipWords": { "tooltipWords": {
"type": "array", "type": "array",
"default": [] "default": []
},
"thematiqueName": {
"type": "string",
"default": ""
} }
} }
} }

2
blocks/vocabulaire-summary/build/frontend.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '2e7c7fcf1637e390f7ca'); <?php return array('dependencies' => array(), 'version' => '2d7b588bd723edf3035b');

1
blocks/vocabulaire-summary/build/frontend.js
View File

@ -20,7 +20,6 @@ window.addEventListener("DOMContentLoaded", event => {
}); });
} }
function closeAccordion(wordDetail) { function closeAccordion(wordDetail) {
console.log("will close");
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper"); let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
contentDefinitionWrapper.style.height = "0px"; contentDefinitionWrapper.style.height = "0px";
setTimeout(() => { setTimeout(() => {

2
blocks/vocabulaire-summary/build/frontend.js.map
View File

@ -1 +1 @@
{"version":3,"file":"frontend.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD;EACA,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAChD,uCACD,CAAC;EACD,MAAMC,YAAY,GAAGH,kBAAkB,CAACI,gBAAgB,CAAC,SAAS,CAAC;EAEnE,SAASC,aAAaA,CAACC,UAAU,EAAE;IAClC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IACD,IAAIM,0BAA0B,GAAGF,UAAU,CAACJ,aAAa,CACxD,gDACD,CAAC;IACDI,UAAU,CAACG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;IACvCH,UAAU,CAACG,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;IAEzCF,wBAAwB,CAACG,KAAK,CAACC,MAAM,GACpCH,0BAA0B,CAACI,YAAY,GAAG,IAAI;IAC/C;;IAEAN,UAAU,CAACR,gBAAgB,CAAC,eAAe,EAAE,MAAM;MAClDQ,UAAU,CAACO,eAAe,CAAC,YAAY,CAAC;IACzC,CAAC,CAAC;EACH;EACA,SAASC,cAAcA,CAACR,UAAU,EAAE;IACnCS,OAAO,CAACC,GAAG,CAAC,YAAY,CAAC;IACzB,IAAIT,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IAEDK,wBAAwB,CAACG,KAAK,CAACC,MAAM,GAAG,KAAK;IAE7CM,UAAU,CAAC,MAAM;MAChBX,UAAU,CAACO,eAAe,CAAC,MAAM,CAAC;IACnC,CAAC,EAAE,GAAG,CAAC;EACR;EACA;EACA,SAASK,YAAYA,CAACZ,UAAU,EAAE;IACjC,IAAIa,MAAM,GAAGb,UAAU,CAACc,YAAY,CAAC,MAAM,CAAC;IAC5C,IAAIC,SAAS,GAAGf,UAAU,CAACc,YAAY,CAAC,YAAY,CAAC;IAErD,IAAID,MAAM,IAAI,IAAI,IAAIE,SAAS,IAAI,IAAI,EAAE;MACxChB,aAAa,CAACC,UAAU,CAAC;IAC1B;IACA,IAAIa,MAAM,IAAI,MAAM,EAAE;MACrBL,cAAc,CAACR,UAAU,CAAC;IAC3B;EACD;;EAEA;EACAgB,KAAK,CAACC,IAAI,CAACpB,YAAY,CAAC,CAACqB,OAAO,CAAElB,UAAU,IAAK;IAChDA,UAAU,CAACR,gBAAgB,CAAC,OAAO,EAAGC,KAAK,IAAK;MAC/CA,KAAK,CAAC0B,cAAc,CAAC,CAAC;MACtBP,YAAY,CAACZ,UAAU,CAAC;IACzB,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://vocabulaire-summary/./src/frontend.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\t// GETTING ELEMENTS FROM THE DOM\r\n\tconst vocabulaireSummary = document.querySelector(\r\n\t\t\".homegrade-blocks-vocabulaire-summary\"\r\n\t);\r\n\tconst wordsDetails = vocabulaireSummary.querySelectorAll(\"details\");\r\n\r\n\tfunction openAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\t\tlet contentDefinitionParagraph = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content\"\r\n\t\t);\r\n\t\twordDetail.setAttribute(\"open\", \"true\");\r\n\t\twordDetail.setAttribute(\"is_opening\", \"\");\r\n\r\n\t\tcontentDefinitionWrapper.style.height =\r\n\t\t\tcontentDefinitionParagraph.offsetHeight + \"px\";\r\n\t\t// remove is opening after css transition\r\n\r\n\t\twordDetail.addEventListener(\"transitionend\", () => {\r\n\t\t\twordDetail.removeAttribute(\"is_opening\");\r\n\t\t});\r\n\t}\r\n\tfunction closeAccordion(wordDetail) {\r\n\t\tconsole.log(\"will close\");\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\r\n\t\tcontentDefinitionWrapper.style.height = \"0px\";\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\twordDetail.removeAttribute(\"open\");\r\n\t\t}, 300);\r\n\t}\r\n\t// HANDLING CLICK\r\n\tfunction toggleActive(wordDetail) {\r\n\t\tlet isOpen = wordDetail.getAttribute(\"open\");\r\n\t\tlet isOpening = wordDetail.getAttribute(\"is_opening\");\r\n\r\n\t\tif (isOpen == null && isOpening == null) {\r\n\t\t\topenAccordion(wordDetail);\r\n\t\t}\r\n\t\tif (isOpen == \"true\") {\r\n\t\t\tcloseAccordion(wordDetail);\r\n\t\t}\r\n\t}\r\n\r\n\t// HANDLING CLICK\r\n\tArray.from(wordsDetails).forEach((wordDetail) => {\r\n\t\twordDetail.addEventListener(\"click\", (event) => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\ttoggleActive(wordDetail);\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","vocabulaireSummary","document","querySelector","wordsDetails","querySelectorAll","openAccordion","wordDetail","contentDefinitionWrapper","contentDefinitionParagraph","setAttribute","style","height","offsetHeight","removeAttribute","closeAccordion","console","log","setTimeout","toggleActive","isOpen","getAttribute","isOpening","Array","from","forEach","preventDefault"],"sourceRoot":""} {"version":3,"file":"frontend.js","mappings":";;;;;AAAAA,MAAM,CAACC,gBAAgB,CAAC,kBAAkB,EAAGC,KAAK,IAAK;EACtD;EACA,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAChD,uCACD,CAAC;EACD,MAAMC,YAAY,GAAGH,kBAAkB,CAACI,gBAAgB,CAAC,SAAS,CAAC;EAEnE,SAASC,aAAaA,CAACC,UAAU,EAAE;IAClC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IACD,IAAIM,0BAA0B,GAAGF,UAAU,CAACJ,aAAa,CACxD,gDACD,CAAC;IACDI,UAAU,CAACG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;IACvCH,UAAU,CAACG,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;IAEzCF,wBAAwB,CAACG,KAAK,CAACC,MAAM,GACpCH,0BAA0B,CAACI,YAAY,GAAG,IAAI;IAC/C;;IAEAN,UAAU,CAACR,gBAAgB,CAAC,eAAe,EAAE,MAAM;MAClDQ,UAAU,CAACO,eAAe,CAAC,YAAY,CAAC;IACzC,CAAC,CAAC;EACH;EACA,SAASC,cAAcA,CAACR,UAAU,EAAE;IACnC,IAAIC,wBAAwB,GAAGD,UAAU,CAACJ,aAAa,CACtD,wDACD,CAAC;IAEDK,wBAAwB,CAACG,KAAK,CAACC,MAAM,GAAG,KAAK;IAE7CI,UAAU,CAAC,MAAM;MAChBT,UAAU,CAACO,eAAe,CAAC,MAAM,CAAC;IACnC,CAAC,EAAE,GAAG,CAAC;EACR;EACA;EACA,SAASG,YAAYA,CAACV,UAAU,EAAE;IACjC,IAAIW,MAAM,GAAGX,UAAU,CAACY,YAAY,CAAC,MAAM,CAAC;IAC5C,IAAIC,SAAS,GAAGb,UAAU,CAACY,YAAY,CAAC,YAAY,CAAC;IAErD,IAAID,MAAM,IAAI,IAAI,IAAIE,SAAS,IAAI,IAAI,EAAE;MACxCd,aAAa,CAACC,UAAU,CAAC;IAC1B;IACA,IAAIW,MAAM,IAAI,MAAM,EAAE;MACrBH,cAAc,CAACR,UAAU,CAAC;IAC3B;EACD;;EAEA;EACAc,KAAK,CAACC,IAAI,CAAClB,YAAY,CAAC,CAACmB,OAAO,CAAEhB,UAAU,IAAK;IAChDA,UAAU,CAACR,gBAAgB,CAAC,OAAO,EAAGC,KAAK,IAAK;MAC/CA,KAAK,CAACwB,cAAc,CAAC,CAAC;MACtBP,YAAY,CAACV,UAAU,CAAC;IACzB,CAAC,CAAC;EACH,CAAC,CAAC;AACH,CAAC,CAAC,C","sources":["webpack://vocabulaire-summary/./src/frontend.js"],"sourcesContent":["window.addEventListener(\"DOMContentLoaded\", (event) => {\r\n\t// GETTING ELEMENTS FROM THE DOM\r\n\tconst vocabulaireSummary = document.querySelector(\r\n\t\t\".homegrade-blocks-vocabulaire-summary\"\r\n\t);\r\n\tconst wordsDetails = vocabulaireSummary.querySelectorAll(\"details\");\r\n\r\n\tfunction openAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\t\tlet contentDefinitionParagraph = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content\"\r\n\t\t);\r\n\t\twordDetail.setAttribute(\"open\", \"true\");\r\n\t\twordDetail.setAttribute(\"is_opening\", \"\");\r\n\r\n\t\tcontentDefinitionWrapper.style.height =\r\n\t\t\tcontentDefinitionParagraph.offsetHeight + \"px\";\r\n\t\t// remove is opening after css transition\r\n\r\n\t\twordDetail.addEventListener(\"transitionend\", () => {\r\n\t\t\twordDetail.removeAttribute(\"is_opening\");\r\n\t\t});\r\n\t}\r\n\tfunction closeAccordion(wordDetail) {\r\n\t\tlet contentDefinitionWrapper = wordDetail.querySelector(\r\n\t\t\t\".homegrade-blocks-vocabulaire-summary__content-wrapper\"\r\n\t\t);\r\n\r\n\t\tcontentDefinitionWrapper.style.height = \"0px\";\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\twordDetail.removeAttribute(\"open\");\r\n\t\t}, 300);\r\n\t}\r\n\t// HANDLING CLICK\r\n\tfunction toggleActive(wordDetail) {\r\n\t\tlet isOpen = wordDetail.getAttribute(\"open\");\r\n\t\tlet isOpening = wordDetail.getAttribute(\"is_opening\");\r\n\r\n\t\tif (isOpen == null && isOpening == null) {\r\n\t\t\topenAccordion(wordDetail);\r\n\t\t}\r\n\t\tif (isOpen == \"true\") {\r\n\t\t\tcloseAccordion(wordDetail);\r\n\t\t}\r\n\t}\r\n\r\n\t// HANDLING CLICK\r\n\tArray.from(wordsDetails).forEach((wordDetail) => {\r\n\t\twordDetail.addEventListener(\"click\", (event) => {\r\n\t\t\tevent.preventDefault();\r\n\t\t\ttoggleActive(wordDetail);\r\n\t\t});\r\n\t});\r\n});\r\n"],"names":["window","addEventListener","event","vocabulaireSummary","document","querySelector","wordsDetails","querySelectorAll","openAccordion","wordDetail","contentDefinitionWrapper","contentDefinitionParagraph","setAttribute","style","height","offsetHeight","removeAttribute","closeAccordion","setTimeout","toggleActive","isOpen","getAttribute","isOpening","Array","from","forEach","preventDefault"],"sourceRoot":""}

2
blocks/vocabulaire-summary/build/index.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'db2e165aea172016cf17'); <?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '4da44f9f4582d3fdcce4');

9
blocks/vocabulaire-summary/build/index.css
View File

@ -1,13 +1,4 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\ /*!****************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/ \****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
border: 1px dotted #f00;
}
/*# sourceMappingURL=index.css.map*/

120
blocks/vocabulaire-summary/build/index.js
View File

@ -70,6 +70,14 @@ __webpack_require__.r(__webpack_exports__);
function Edit({
attributes,
setAttributes
}) {
let {
tooltipWords
} = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
function CurrentThematiqueDisplay({ function CurrentThematiqueDisplay({
id id
}) { }) {
@ -121,22 +129,10 @@ function buildTooltipWords(editorContent) {
}); });
return filteredTooltipWords; return filteredTooltipWords;
} }
function Edit({
attributes,
setAttributes
}) {
let {
tooltipWords,
thematiqueName
} = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const currentPost = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPost()); const currentPost = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPost());
const currentTaxonomies = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques")); const currentTaxonomies = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/editor").getCurrentPostAttribute("thematiques"));
let fetchedCurrentThematique = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomies[0] // or currentPost.thematiques[0] works as well let currentThematique = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core").getEntityRecord("taxonomy", "thematiques", currentTaxonomies[0] // or currentPost.thematiques[0] works as well
), [currentTaxonomies]); ), [currentTaxonomies]);
if (!currentPost || !currentPost.content) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, "Loading...");
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (currentPost.content) { if (currentPost.content) {
let newTooltipWords = buildTooltipWords(currentPost.content); let newTooltipWords = buildTooltipWords(currentPost.content);
@ -145,19 +141,13 @@ function Edit({
}); });
} }
}, [currentPost]); }, [currentPost]);
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (!fetchedCurrentThematique) return;
setAttributes({
thematiqueName: fetchedCurrentThematique.name
});
}, [fetchedCurrentThematique, currentPost]);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-vocabulaire-summary` className: `homegrade-blocks-vocabulaire-summary`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
className: "homegrade-blocks-vocabulaire-summary__title" className: "homegrade-blocks-vocabulaire-summary__title"
}, "Vocabulaire \u2014 ", thematiqueName), tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", { }, "Vocabulaire \u2014", " ", currentThematique && currentThematique.name ? currentThematique.name : "{...pas de thématique}"), tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
className: "question" className: "question"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "open-close-icon" className: "open-close-icon"
@ -185,98 +175,18 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss"); /* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js"); /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/edit.js");
/* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./save */ "./src/save.js"); /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./block.json */ "./src/block.json");
/**
* Registers a new block provided a unique name and an object defining its behavior.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* All files containing `style` keyword are bundled together. The code used
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
/**
* Internal dependencies
*/
// import save from "./save";
/** (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
* Every block starts by registering a new block type definition. edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_4__.name, {
/**
* @see ./edit.js
*/
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"],
/**
* @see ./save.js
*/
save: _save__WEBPACK_IMPORTED_MODULE_3__["default"]
}); });
/***/ }), /***/ }),
/***/ "./src/save.js":
/*!*********************!*\
!*** ./src/save.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* 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_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./img/chevron_down.svg */ "./src/img/chevron_down.svg");
function save({
attributes,
setAttributes
}) {
let {
tooltipWords,
thematiqueName
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-vocabulaire-summary`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", {
className: "homegrade-blocks-vocabulaire-summary__title"
}, "Vocabulaire \u2014 ", thematiqueName), " ", tooltipWords && tooltipWords.map(elem => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("details", {
className: "question"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("summary", null, elem.tooltipText, " ", (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "open-close-icon"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: _img_chevron_down_svg__WEBPACK_IMPORTED_MODULE_2__["default"],
className: "open-close-cta",
alt: ""
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-vocabulaire-summary__content-wrapper"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "homegrade-blocks-vocabulaire-summary__content"
}, elem.tooltipDefinition)))));
}
/***/ }),
/***/ "./src/editor.scss": /***/ "./src/editor.scss":
/*!*************************!*\ /*!*************************!*\
!*** ./src/editor.scss ***! !*** ./src/editor.scss ***!
@ -377,7 +287,7 @@ module.exports = window["wp"]["i18n"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":"testimonial","description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","viewScript":"file:./frontend.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"tooltipWords":{"type":"array","default":[]},"thematiqueName":{"type":"string","default":""}}}'); module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/vocabulaire-summary","version":"0.1.0","title":"Vocabulaire de la fiche","category":"homegrade-blocks","icon":{"foreground":"#DF1E1E","src":"testimonial"},"description":"Pour afficher tout le vocabulaire contenu dans la fiche","supports":{"html":false,"multiple":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","viewScript":"file:./frontend.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"tooltipWords":{"type":"array","default":[]}}}');
/***/ }) /***/ })

2
blocks/vocabulaire-summary/build/index.js.map
View File

File diff suppressed because one or more lines are too long

27
blocks/vocabulaire-summary/build/render.php Normal file
View File

@ -0,0 +1,27 @@
<?php
$tooltipWords = $attributes['tooltipWords'];
global $post;
$thematique = get_the_terms($post->ID, 'thematiques')[0];
?>
<section class="homegrade-blocks-vocabulaire-summary">
<h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire <?php echo $thematique->name ? " — " . $thematique->name : ""; ?>
</h3>
<?php foreach ($tooltipWords as $word) : ?>
<details class="question">
<summary>
<?php echo $word['tooltipText']; ?>
<div class="open-close-icon">
<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
</div>
</summary>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
</div>
</details>
<?php endforeach; ?>
</section>

13
blocks/vocabulaire-summary/src/block.json
View File

@ -5,24 +5,25 @@
"version": "0.1.0", "version": "0.1.0",
"title": "Vocabulaire de la fiche", "title": "Vocabulaire de la fiche",
"category": "homegrade-blocks", "category": "homegrade-blocks",
"icon": "testimonial", "icon": {
"foreground": "#DF1E1E",
"src": "testimonial"
},
"description": "Pour afficher tout le vocabulaire contenu dans la fiche", "description": "Pour afficher tout le vocabulaire contenu dans la fiche",
"supports": { "supports": {
"html": false "html": false,
"multiple": false
}, },
"textdomain": "homegrade-blocks", "textdomain": "homegrade-blocks",
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"viewScript": "file:./frontend.js", "viewScript": "file:./frontend.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"render": "file:./render.php",
"attributes": { "attributes": {
"tooltipWords": { "tooltipWords": {
"type": "array", "type": "array",
"default": [] "default": []
},
"thematiqueName": {
"type": "string",
"default": ""
} }
} }
} }

28
blocks/vocabulaire-summary/src/edit.js
View File

@ -7,6 +7,11 @@ import { useSelect, useDispatch } from "@wordpress/data";
import { useEffect } from "@wordpress/element"; import { useEffect } from "@wordpress/element";
import { useEntityProp } from "@wordpress/core-data"; import { useEntityProp } from "@wordpress/core-data";
import chevronDown from "./img/chevron_down.svg"; import chevronDown from "./img/chevron_down.svg";
export default function Edit({ attributes, setAttributes }) {
let { tooltipWords } = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
function CurrentThematiqueDisplay({ id }) { function CurrentThematiqueDisplay({ id }) {
const { record, isResolving } = useEntityRecord( const { record, isResolving } = useEntityRecord(
"taxonomy", "taxonomy",
@ -37,7 +42,6 @@ function getCurrentThematique(id) {
} }
return record; return record;
} }
function buildTooltipWords(editorContent) { function buildTooltipWords(editorContent) {
// Parsing Content // Parsing Content
const parser = new DOMParser(); const parser = new DOMParser();
@ -69,17 +73,15 @@ function buildTooltipWords(editorContent) {
return filteredTooltipWords; return filteredTooltipWords;
} }
export default function Edit({ attributes, setAttributes }) {
let { tooltipWords, thematiqueName } = attributes;
let [hasFetchedDatas, setHasFetchedDatas] = useState(false);
const currentPost = useSelect((select) => const currentPost = useSelect((select) =>
select("core/editor").getCurrentPost() select("core/editor").getCurrentPost()
); );
const currentTaxonomies = useSelect((select) => const currentTaxonomies = useSelect((select) =>
select("core/editor").getCurrentPostAttribute("thematiques") select("core/editor").getCurrentPostAttribute("thematiques")
); );
let fetchedCurrentThematique = useSelect(
let currentThematique = useSelect(
(select) => (select) =>
select("core").getEntityRecord( select("core").getEntityRecord(
"taxonomy", "taxonomy",
@ -89,10 +91,6 @@ export default function Edit({ attributes, setAttributes }) {
[currentTaxonomies] [currentTaxonomies]
); );
if (!currentPost || !currentPost.content) {
return <p>Loading...</p>;
}
useEffect(() => { useEffect(() => {
if (currentPost.content) { if (currentPost.content) {
let newTooltipWords = buildTooltipWords(currentPost.content); let newTooltipWords = buildTooltipWords(currentPost.content);
@ -100,11 +98,6 @@ export default function Edit({ attributes, setAttributes }) {
} }
}, [currentPost]); }, [currentPost]);
useEffect(() => {
if (!fetchedCurrentThematique) return;
setAttributes({ thematiqueName: fetchedCurrentThematique.name });
}, [fetchedCurrentThematique, currentPost]);
return ( return (
<section <section
{...useBlockProps({ {...useBlockProps({
@ -112,7 +105,10 @@ export default function Edit({ attributes, setAttributes }) {
})} })}
> >
<h3 className="homegrade-blocks-vocabulaire-summary__title"> <h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire — {thematiqueName} Vocabulaire —{" "}
{currentThematique && currentThematique.name
? currentThematique.name
: "{...pas de thématique}"}
</h3> </h3>
{tooltipWords && {tooltipWords &&
tooltipWords.map((elem) => ( tooltipWords.map((elem) => (

9
blocks/vocabulaire-summary/src/editor.scss
View File

@ -1,9 +0,0 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
.wp-block-create-block-multiblocks {
border: 1px dotted #f00;
}

1
blocks/vocabulaire-summary/src/frontend.js
View File

@ -24,7 +24,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
}); });
} }
function closeAccordion(wordDetail) { function closeAccordion(wordDetail) {
console.log("will close");
let contentDefinitionWrapper = wordDetail.querySelector( let contentDefinitionWrapper = wordDetail.querySelector(
".homegrade-blocks-vocabulaire-summary__content-wrapper" ".homegrade-blocks-vocabulaire-summary__content-wrapper"
); );

39
blocks/vocabulaire-summary/src/index.js
View File

@ -1,39 +1,10 @@
/** import { registerBlockType } from "@wordpress/blocks";
* Registers a new block provided a unique name and an object defining its behavior. import "./style.scss";
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
import { registerBlockType } from '@wordpress/blocks';
/** import Edit from "./edit";
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. // import save from "./save";
* All files containing `style` keyword are bundled together. The code used import metadata from "./block.json";
* gets applied both to the front of your site and to the editor.
*
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
*/
import './style.scss';
/**
* Internal dependencies
*/
import Edit from './edit';
import save from './save';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType(metadata.name, { registerBlockType(metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit, edit: Edit,
/**
* @see ./save.js
*/
save,
}); });

27
blocks/vocabulaire-summary/src/render.php Normal file
View File

@ -0,0 +1,27 @@
<?php
$tooltipWords = $attributes['tooltipWords'];
global $post;
$thematique = get_the_terms($post->ID, 'thematiques')[0];
?>
<section class="homegrade-blocks-vocabulaire-summary">
<h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire <?php echo $thematique->name ? " — " . $thematique->name : ""; ?>
</h3>
<?php foreach ($tooltipWords as $word) : ?>
<details class="question">
<summary>
<?php echo $word['tooltipText']; ?>
<div class="open-close-icon">
<img src="<?php echo plugins_url('/', dirname(__FILE__)) . 'src/img/chevron_down.svg' ?>" class="open-close-cta" alt="" />
</div>
</summary>
<div class="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p class="homegrade-blocks-vocabulaire-summary__content">
<?php echo $word['tooltipDefinition']; ?>
</p>
</div>
</details>
<?php endforeach; ?>
</section>

34
blocks/vocabulaire-summary/src/save.js
View File

@ -1,34 +0,0 @@
import { useBlockProps } from "@wordpress/block-editor";
import chevronDown from "./img/chevron_down.svg";
export default function save({ attributes, setAttributes }) {
let { tooltipWords, thematiqueName } = attributes;
return (
<section
{...useBlockProps.save({
className: `homegrade-blocks-vocabulaire-summary`,
})}
>
<h3 className="homegrade-blocks-vocabulaire-summary__title">
Vocabulaire — {thematiqueName}
</h3>{" "}
{tooltipWords &&
tooltipWords.map((elem) => (
<details className="question">
<summary>
{elem.tooltipText}{" "}
<div className="open-close-icon">
<img src={chevronDown} className="open-close-cta" alt="" />
</div>
</summary>
<div className="homegrade-blocks-vocabulaire-summary__content-wrapper">
<p className="homegrade-blocks-vocabulaire-summary__content">
{elem.tooltipDefinition}
</p>
</div>
</details>
))}
</section>
);
}

2
build/index.asset.php
View File

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

40
build/index.css
View File

@ -1,13 +1,6 @@
/*!**********************************************************************************************************************************************************************************!*\ /*!******************************************************************************************************************************************************************************************!*\
!*** 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 ***! !*** 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/tooltip.css ***!
\**********************************************************************************************************************************************************************************/ \******************************************************************************************************************************************************************************************/
.popover_tooltip_field {
.components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}
.tooltip-word { .tooltip-word {
padding-top: 12px; padding-top: 12px;
position: relative; position: relative;
@ -22,9 +15,12 @@
position: absolute; position: absolute;
top: -6px; top: -6px;
left: 50%; left: 50%;
text-align: center; text-align: left;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
padding: 10px; padding: 10px;
max-width: 300px;
width: -moz-max-content;
width: max-content;
} }
.tooltip-popup:after { .tooltip-popup:after {
content: ""; content: "";
@ -38,13 +34,27 @@
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);
} }
.tooltip-popup p { .tooltip-popup__title {
font-weight: bold;
color: black !important;
padding-bottom: 10px;
}
.tooltip-popup__definition {
color: black !important;
margin: 0 !important; margin: 0 !important;
} }
/*!***********************************************************************************************************************************************************************************!*\ /* FOR THE EDITOR */
!*** 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 ***! .popover_tooltip_field {
\***********************************************************************************************************************************************************************************/ .components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}
/*!********************************************************************************************************************************************************************************************!*\
!*** 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 ***!
\********************************************************************************************************************************************************************************************/
.brochure-download-icon { .brochure-download-icon {
margin: 0 0px 0 6px; margin: 0 0px 0 6px;
display: inline-block; display: inline-block;

2
build/index.css.map
View File

@ -1 +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":""} {"version":3,"file":"index.css","mappings":";;;AAAA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,wBAAwB;CACxB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,iCAAiC;CACjC,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;AACnB;AACA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;AACrB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;AChDA;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\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: left;\r\n\ttransform: translate(-50%, -100%);\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\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__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\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":""}

129
build/index.js
View File

@ -98,10 +98,10 @@ function getThematiqueFamilySlug(thematique_slug) {
/***/ }), /***/ }),
/***/ "./src/format-types/brochure.js": /***/ "./src/format-types/brochure/brochure.js":
/*!**************************************!*\ /*!***********************************************!*\
!*** ./src/format-types/brochure.js ***! !*** ./src/format-types/brochure/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__);
@ -125,6 +125,7 @@ __webpack_require__.r(__webpack_exports__);
const formatName = "homegrade-format/brochure-format";
const BrochureLinkFormatButton = props => { const BrochureLinkFormatButton = props => {
const { const {
isActive, isActive,
@ -133,14 +134,11 @@ const BrochureLinkFormatButton = props => {
} = props; } = props;
const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false); const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const [linkValue, setLinkValue] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(""); 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 === "homegrade-format/brochure-format")[0]; const activeFormat = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.getActiveFormats)(value).filter(format => format.type === formatName)[0];
function setFormat() {
// console.log(activeFormat);
// console.log(getActiveFormats(props.value));
function handleFormat() {
setIsPopoverOpen(!isPopoverOpen); setIsPopoverOpen(!isPopoverOpen);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, { onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.applyFormat)(value, {
type: "homegrade-format/brochure-format", type: formatName,
attributes: { attributes: {
href: linkValue.url, href: linkValue.url,
target: "_blank", target: "_blank",
@ -153,19 +151,21 @@ const BrochureLinkFormatButton = props => {
setIsPopoverOpen(false); setIsPopoverOpen(false);
setLinkValue(""); setLinkValue("");
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, { onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.toggleFormat)(value, {
type: "homegrade-format/brochure-format" type: formatName
})); }));
} }
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, { 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), onClose: () => setIsPopoverOpen(false),
className: "popover_tooltip_field" className: "popover_tooltip_field"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.__experimentalLinkControl, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.__experimentalLinkControl
// prefetch pdf attachment
, {
suggestionsQuery: { suggestionsQuery: {
type: "attachment" type: "attachment",
subtype: "pdf"
}, },
value: linkValue, value: linkValue,
onChange: value => { onChange: value => {
// console.log(value);
setLinkValue(value); setLinkValue(value);
} }
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
@ -173,9 +173,11 @@ const BrochureLinkFormatButton = props => {
variant: "primary", variant: "primary",
onClick: () => { onClick: () => {
setIsPopoverOpen(!isPopoverOpen); setIsPopoverOpen(!isPopoverOpen);
handleFormat(); setFormat();
} }
}, "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, { }, "Valider")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarGroup, {
className: "test"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
isActive: isActive, isActive: isActive,
icon: !isActive ? "book" : _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"], icon: !isActive ? "book" : _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: !isActive ? "Ajouter un lien brochure" : "Supprimer le lien brochure", label: !isActive ? "Ajouter un lien brochure" : "Supprimer le lien brochure",
@ -183,7 +185,7 @@ const BrochureLinkFormatButton = props => {
})))); }))));
}; };
(0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)("homegrade-format/brochure-format", { (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_1__.registerFormatType)("homegrade-format/brochure-format", {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Brochure", "homegrade-format"), title: "Lien Brochure",
tagName: "a", tagName: "a",
className: "brochure-link-format", className: "brochure-link-format",
edit: BrochureLinkFormatButton edit: BrochureLinkFormatButton
@ -191,10 +193,10 @@ const BrochureLinkFormatButton = props => {
/***/ }), /***/ }),
/***/ "./src/format-types/tooltip.js": /***/ "./src/format-types/tooltip/tooltip.js":
/*!*************************************!*\ /*!*********************************************!*\
!*** ./src/format-types/tooltip.js ***! !*** ./src/format-types/tooltip/tooltip.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__);
@ -228,29 +230,24 @@ const Edit = props => {
onChange onChange
} = props; } = props;
const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false); const [isPopoverOpen, setIsPopoverOpen] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const [popoverText, setPopoverText] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)("");
const [pendingDefinition, setPendingDefinition] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false); const [pendingDefinition, setPendingDefinition] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const activeFormat = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.getActiveFormats)(props.value).filter(format => format.type === formatName)[0]; const activeFormat = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.getActiveFormats)(value).filter(format => format.type === formatName)[0];
// console.log(activeFormat); const lang = getAdminLanguageFromCookie("wp-wpml_current_language");
// console.log(value); function getAdminLanguageFromCookie(c_name) {
var c_value = document.cookie,
const post = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => { c_start = c_value.indexOf(" " + c_name + "=");
if (activeFormat && activeFormat.attributes.definitionId) { if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
return select("core").getEntityRecord("postType", "vocabulaire", activeFormat.attributes.definitionId); if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
} }
}); c_value = unescape(c_value.substring(c_start, c_end));
if (post && pendingDefinition) {
// console.log("#### Retrieved Post");
// console.log(post);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.applyFormat)(value, {
type: formatName,
attributes: {
dataTooltipDefinition: post.acf.definition,
definitionId: activeFormat.attributes.definitionId,
dataTooltipWord: activeFormat.attributes.dataTooltipWord
} }
})); return c_value;
setPendingDefinition(false);
} }
function removeFormat() { function removeFormat() {
setIsPopoverOpen(false); setIsPopoverOpen(false);
@ -259,7 +256,6 @@ const Edit = props => {
})); }));
} }
function setFormat(postDatas) { function setFormat(postDatas) {
// console.log(postDatas);
setPendingDefinition(true); setPendingDefinition(true);
setIsPopoverOpen(false); setIsPopoverOpen(false);
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.applyFormat)(value, { onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.applyFormat)(value, {
@ -270,6 +266,22 @@ const Edit = props => {
} }
})); }));
} }
const post = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => {
if (activeFormat && activeFormat.attributes.definitionId) {
return select("core").getEntityRecord("postType", "vocabulaire", activeFormat.attributes.definitionId);
}
});
if (post && pendingDefinition) {
onChange((0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.applyFormat)(value, {
type: formatName,
attributes: {
dataTooltipDefinition: post.acf.definition,
definitionId: activeFormat.attributes.definitionId,
dataTooltipWord: activeFormat.attributes.dataTooltipWord
}
}));
setPendingDefinition(false);
}
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, { 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), onClose: () => setIsPopoverOpen(false),
className: "popover_tooltip_field" className: "popover_tooltip_field"
@ -283,7 +295,8 @@ const Edit = props => {
} : "", } : "",
suggestionsQuery: { suggestionsQuery: {
type: "post", type: "post",
subtype: "vocabulaire" subtype: "vocabulaire",
lang: lang
}, },
isCollapsed: true, isCollapsed: true,
onChange: postDatas => setFormat(postDatas) onChange: postDatas => setFormat(postDatas)
@ -294,9 +307,7 @@ const Edit = props => {
onClick: () => { onClick: () => {
setIsPopoverOpen(true); setIsPopoverOpen(true);
} }
}), isActive && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton }), isActive && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarButton, {
// isActive={isActive}
, {
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
label: "Supprimer la tooltip", label: "Supprimer la tooltip",
onClick: () => { onClick: () => {
@ -318,10 +329,10 @@ const Edit = props => {
/***/ }), /***/ }),
/***/ "./src/format-types/brochure.css": /***/ "./src/format-types/brochure/brochure.css":
/*!***************************************!*\ /*!************************************************!*\
!*** ./src/format-types/brochure.css ***! !*** ./src/format-types/brochure/brochure.css ***!
\***************************************/ \************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
@ -330,10 +341,10 @@ __webpack_require__.r(__webpack_exports__);
/***/ }), /***/ }),
/***/ "./src/format-types/tooltip.css": /***/ "./src/format-types/tooltip/tooltip.css":
/*!**************************************!*\ /*!**********************************************!*\
!*** ./src/format-types/tooltip.css ***! !*** ./src/format-types/tooltip/tooltip.css ***!
\**************************************/ \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
@ -487,11 +498,11 @@ var __webpack_exports__ = {};
!*** ./src/index.js ***! !*** ./src/index.js ***!
\**********************/ \**********************/
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* 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 _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_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./format-types/tooltip.js */ "./src/format-types/tooltip.js"); /* 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 _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_brochure_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./format-types/brochure/brochure.css */ "./src/format-types/brochure/brochure.css");
/* harmony import */ var _format_types_brochure_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./format-types/brochure.js */ "./src/format-types/brochure.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");

2
build/index.js.map
View File

File diff suppressed because one or more lines are too long

8
index.php
View File

@ -79,10 +79,10 @@ add_action('enqueue_block_editor_assets', 'homegrade_blocks_enqueue_editor_asset
function blocks_course_plugin_enqueue_assets() function blocks_course_plugin_enqueue_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-tooltipjs', plugin_dir_url(__FILE__) . 'src/format-types/tooltip-front.js'); wp_enqueue_script('homegrade-blocks-tooltipjs', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip-front.js');
wp_enqueue_style('homegrade-blocks-tooltipcss', plugin_dir_url(__FILE__) . 'src/format-types/tooltip.css'); 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-front.js'); wp_enqueue_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');
wp_enqueue_style('homegrade-blocks-brochurecss', plugin_dir_url(__FILE__) . 'src/format-types/brochure.css'); wp_enqueue_style('homegrade-blocks-brochurecss', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure.css');
wp_localize_script('homegrade-blocks-brochurejs', 'img_path_datas', array( wp_localize_script('homegrade-blocks-brochurejs', 'img_path_datas', array(
'downloadIconPath' => plugin_dir_url(__FILE__) . '/src/img/icon_brochure_download.svg' 'downloadIconPath' => plugin_dir_url(__FILE__) . '/src/img/icon_brochure_download.svg'

6
src/format-types/brochure-front.js → src/format-types/brochure/brochure-front.js
View File

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

0
src/format-types/brochure.css → src/format-types/brochure/brochure.css
View File

32
src/format-types/brochure.js → src/format-types/brochure/brochure.js
View File

@ -1,4 +1,4 @@
import { registerFormatType, toggleFormat, getActiveFormats } from "@wordpress/rich-text"; import { registerFormatType, toggleFormat, applyFormat, getActiveFormats } from "@wordpress/rich-text";
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor"; import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, Button } from "@wordpress/components"; import { Popover, Button } from "@wordpress/components";
@ -8,22 +8,20 @@ import { check, trash } from "@wordpress/icons";
import { useState } from "@wordpress/element"; import { useState } from "@wordpress/element";
const formatName = "homegrade-format/brochure-format";
const BrochureLinkFormatButton = (props) => { const BrochureLinkFormatButton = (props) => {
const { isActive, value, onChange } = props; const { isActive, value, onChange } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [linkValue, setLinkValue] = useState(""); const [linkValue, setLinkValue] = useState("");
const activeFormat = getActiveFormats(props.value).filter( const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];
(format) => format.type === "homegrade-format/brochure-format"
)[0];
// console.log(activeFormat); function setFormat() {
// console.log(getActiveFormats(props.value));
function handleFormat() {
setIsPopoverOpen(!isPopoverOpen); setIsPopoverOpen(!isPopoverOpen);
onChange( onChange(
toggleFormat(value, { applyFormat(value, {
type: "homegrade-format/brochure-format", type: formatName,
attributes: { attributes: {
href: linkValue.url, href: linkValue.url,
target: "_blank", target: "_blank",
@ -38,7 +36,7 @@ const BrochureLinkFormatButton = (props) => {
setLinkValue(""); setLinkValue("");
onChange( onChange(
toggleFormat(value, { toggleFormat(value, {
type: "homegrade-format/brochure-format", type: formatName,
}) })
); );
} }
@ -51,28 +49,34 @@ const BrochureLinkFormatButton = (props) => {
onClose={() => setIsPopoverOpen(false)} onClose={() => setIsPopoverOpen(false)}
className='popover_tooltip_field'> className='popover_tooltip_field'>
<LinkControl <LinkControl
// prefetch pdf attachment
suggestionsQuery={{ suggestionsQuery={{
type: "attachment", type: "attachment",
subtype: "pdf",
}} }}
value={linkValue} value={linkValue}
onChange={(value) => { onChange={(value) => {
// console.log(value);
setLinkValue(value); setLinkValue(value);
}} }}
/> />
<Button <Button
icon={check} icon={check}
variant='primary' variant='primary'
onClick={() => { onClick={() => {
setIsPopoverOpen(!isPopoverOpen); setIsPopoverOpen(!isPopoverOpen);
handleFormat(); setFormat();
}}> }}>
Valider Valider
</Button> </Button>
</Popover> </Popover>
)} )}
<ToolbarGroup> <ToolbarGroup className='test'>
<ToolbarButton <ToolbarButton
isActive={isActive} isActive={isActive}
icon={!isActive ? "book" : trash} icon={!isActive ? "book" : trash}
@ -92,7 +96,7 @@ const BrochureLinkFormatButton = (props) => {
}; };
registerFormatType("homegrade-format/brochure-format", { registerFormatType("homegrade-format/brochure-format", {
title: __("Brochure", "homegrade-format"), title: "Lien Brochure",
tagName: "a", tagName: "a",
className: "brochure-link-format", className: "brochure-link-format",
edit: BrochureLinkFormatButton, edit: BrochureLinkFormatButton,

14
src/format-types/tooltip-front.js → src/format-types/tooltip/tooltip-front.js
View File

@ -1,5 +1,4 @@
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener("DOMContentLoaded", (event) => {
// let tooltips = document.querySelectorAll(".tooltip-word");
let tooltipWords = document.querySelectorAll("[data-tooltip-definition]"); let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
tooltipWords.forEach((tooltipWord) => { tooltipWords.forEach((tooltipWord) => {
@ -7,11 +6,16 @@ window.addEventListener("DOMContentLoaded", (event) => {
const tooltipPopup = document.createElement("div"); const tooltipPopup = document.createElement("div");
tooltipPopup.className = "tooltip-popup"; tooltipPopup.className = "tooltip-popup";
const tooltipContent = tooltipWord.getAttribute("data-tooltip-definition"); const tooltipDefinition = document.createElement("p");
const tooltipContentParagraph = document.createElement("p"); tooltipDefinition.textContent = tooltipWord.getAttribute("data-tooltip-definition");
tooltipContentParagraph.textContent = tooltipContent; tooltipDefinition.className = "tooltip-popup__definition";
tooltipPopup.appendChild(tooltipContentParagraph); const tooltipTitle = document.createElement("h5");
tooltipTitle.textContent = tooltipWord.getAttribute("data-tooltip-word");
tooltipTitle.className = "tooltip-popup__title";
tooltipPopup.appendChild(tooltipTitle);
tooltipPopup.appendChild(tooltipDefinition);
tooltipWord.appendChild(tooltipPopup); tooltipWord.appendChild(tooltipPopup);
}); });

27
src/format-types/tooltip.css → src/format-types/tooltip/tooltip.css
View File

@ -1,10 +1,3 @@
.popover_tooltip_field {
.components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}
.tooltip-word { .tooltip-word {
padding-top: 12px; padding-top: 12px;
position: relative; position: relative;
@ -19,9 +12,11 @@
position: absolute; position: absolute;
top: -6px; top: -6px;
left: 50%; left: 50%;
text-align: center; text-align: left;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
padding: 10px; padding: 10px;
max-width: 300px;
width: max-content;
} }
.tooltip-popup:after { .tooltip-popup:after {
content: ""; content: "";
@ -35,6 +30,20 @@
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08); box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);
} }
.tooltip-popup p { .tooltip-popup__title {
font-weight: bold;
color: black !important;
padding-bottom: 10px;
}
.tooltip-popup__definition {
color: black !important;
margin: 0 !important; margin: 0 !important;
} }
/* FOR THE EDITOR */
.popover_tooltip_field {
.components-popover__content {
padding: 10px !important;
min-width: 200px;
}
}

74
src/format-types/tooltip.js → src/format-types/tooltip/tooltip.js
View File

@ -4,7 +4,7 @@ import { registerFormatType, toggleFormat, applyFormat, getActiveFormats } from
import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor"; import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, ToolbarGroup, ToolbarButton } from "@wordpress/components"; import { Popover, ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { trash } from "@wordpress/icons"; import { trash } from "@wordpress/icons";
import { useState, useEffect } from "@wordpress/element"; import { useState } from "@wordpress/element";
import { useSelect } from "@wordpress/data"; // pour les querry import { useSelect } from "@wordpress/data"; // pour les querry
const formatName = "homegrade-format/tooltip"; const formatName = "homegrade-format/tooltip";
@ -12,39 +12,26 @@ const formatName = "homegrade-format/tooltip";
const Edit = (props) => { const Edit = (props) => {
const { isActive, value, onChange } = props; const { isActive, value, onChange } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [popoverText, setPopoverText] = useState("");
const [pendingDefinition, setPendingDefinition] = useState(false); const [pendingDefinition, setPendingDefinition] = useState(false);
const activeFormat = getActiveFormats(props.value).filter((format) => format.type === formatName)[0]; const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];
// console.log(activeFormat); const lang = getAdminLanguageFromCookie("wp-wpml_current_language");
// console.log(value); function getAdminLanguageFromCookie(c_name) {
var c_value = document.cookie,
const post = useSelect((select) => { c_start = c_value.indexOf(" " + c_name + "=");
if (activeFormat && activeFormat.attributes.definitionId) { if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
return select("core").getEntityRecord( if (c_start == -1) {
"postType", c_value = null;
"vocabulaire", } else {
activeFormat.attributes.definitionId c_start = c_value.indexOf("=", c_start) + 1;
); var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
} }
}); c_value = unescape(c_value.substring(c_start, c_end));
}
if (post && pendingDefinition) { return c_value;
// console.log("#### Retrieved Post");
// console.log(post);
onChange(
applyFormat(value, {
type: formatName,
attributes: {
dataTooltipDefinition: post.acf.definition,
definitionId: activeFormat.attributes.definitionId,
dataTooltipWord: activeFormat.attributes.dataTooltipWord,
},
})
);
setPendingDefinition(false);
} }
function removeFormat() { function removeFormat() {
setIsPopoverOpen(false); setIsPopoverOpen(false);
onChange( onChange(
@ -54,7 +41,6 @@ const Edit = (props) => {
); );
} }
function setFormat(postDatas) { function setFormat(postDatas) {
// console.log(postDatas);
setPendingDefinition(true); setPendingDefinition(true);
setIsPopoverOpen(false); setIsPopoverOpen(false);
@ -69,6 +55,30 @@ const Edit = (props) => {
); );
} }
const post = useSelect((select) => {
if (activeFormat && activeFormat.attributes.definitionId) {
return select("core").getEntityRecord(
"postType",
"vocabulaire",
activeFormat.attributes.definitionId
);
}
});
if (post && pendingDefinition) {
onChange(
applyFormat(value, {
type: formatName,
attributes: {
dataTooltipDefinition: post.acf.definition,
definitionId: activeFormat.attributes.definitionId,
dataTooltipWord: activeFormat.attributes.dataTooltipWord,
},
})
);
setPendingDefinition(false);
}
return ( return (
<> <>
<BlockControls> <BlockControls>
@ -93,6 +103,7 @@ const Edit = (props) => {
suggestionsQuery={{ suggestionsQuery={{
type: "post", type: "post",
subtype: "vocabulaire", subtype: "vocabulaire",
lang: lang,
}} }}
isCollapsed={true} isCollapsed={true}
onChange={(postDatas) => setFormat(postDatas)} onChange={(postDatas) => setFormat(postDatas)}
@ -111,7 +122,6 @@ const Edit = (props) => {
/> />
{isActive && ( {isActive && (
<ToolbarButton <ToolbarButton
// isActive={isActive}
icon={trash} icon={trash}
label={"Supprimer la tooltip"} label={"Supprimer la tooltip"}
onClick={() => { onClick={() => {

8
src/index.js
View File

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