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

fecatoring timeline to handle icons and captions

Browse Source
This commit is contained in:
Antoine M 2023-10-18 14:59:34 +02:00
parent b0bb96954d
commit e76b003f81
15 changed files with 339 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/timeline/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-i18n', 'wp-primitives'), 'version' => 'd17b816af1e1c29986b9'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '181e808e8d1c28dfc203');

15
blocks/timeline/build/index.css
View File

@ -1,10 +1,25 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\ /*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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 ***!
\****************************************************************************************************************************************************************************************************************************************/ \****************************************************************************************************************************************************************************************************************************************/
.homegrade-blocks-timeline--has-step-icons:before {
z-index: 0 !important;
}
.homegrade-blocks-timeline .homegrade-blocks-timeline-step__icon .please-add-icon {
text-align: center;
color: #e04d42;
font-weight: 600;
margin: auto;
}
.homegrade-blocks-timeline .homegrade-blocks-timeline-step .block-editor-media-placeholder { .homegrade-blocks-timeline .homegrade-blocks-timeline-step .block-editor-media-placeholder {
margin-bottom: 30px; margin-bottom: 30px;
} }
.homegrade-blocks-timeline-step__panel-body .components-tip {
margin: 10px 0;
}
.homegrade-blocks-timeline-step__panel-body--icon img {
max-height: 60px;
}
.homegrade-blocks-timeline-step__panel-body .components-dropdown .components-toolbar__control { .homegrade-blocks-timeline-step__panel-body .components-dropdown .components-toolbar__control {
background-color: #e04d42; background-color: #e04d42;
color: white; color: white;

2
blocks/timeline/build/index.css.map
View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AAEE;EACC;AADH;;AAYC;EACC;EACA;AATF;AAWC;EACC;AATF;AAWC;EACC;EACA;EAAA;AATF;AAWC;EACC;EACA;EACA;EACA;AATF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-timeline {\r\n\t.homegrade-blocks-timeline-step {\r\n\t\t.block-editor-media-placeholder {\r\n\t\t\tmargin-bottom: 30px;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.homegrade-blocks-timeline__panel-body {\r\n\t// label {\r\n\t// \ttext-transform: uppercase;\r\n\t// }\r\n}\r\n.homegrade-blocks-timeline-step__panel-body {\r\n\t.components-dropdown .components-toolbar__control {\r\n\t\tbackground-color: #e04d42;\r\n\t\tcolor: white;\r\n\t}\r\n\timg {\r\n\t\tdisplay: block;\r\n\t}\r\n\t.components-dropdown {\r\n\t\tdisplay: block;\r\n\t\twidth: fit-content;\r\n\t}\r\n\t.media-replace-container {\r\n\t\tpadding: 10px 0;\r\n\t\tdisplay: flex;\r\n\t\tgap: 10px;\r\n\t\talign-items: center;\r\n\t\t// margin-top: 10px;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""} {"version":3,"file":"index.css","mappings":";;;AAEE;EACC;AADH;AAOG;EACC;EACA;EACA;EACA;AALJ;AAQE;EACC;AANH;;AAiBC;EACC;AAdF;AAiBE;EACC;AAfH;AAkBC;EACC;EACA;AAhBF;AAkBC;EACC;AAhBF;AAkBC;EACC;EACA;EAAA;AAhBF;AAkBC;EACC;EACA;EACA;EACA;AAhBF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-timeline {\r\n\t&--has-step-icons {\r\n\t\t&:before {\r\n\t\t\tz-index: 0 !important;\r\n\t\t}\r\n\t}\r\n\r\n\t.homegrade-blocks-timeline-step {\r\n\t\t&__icon {\r\n\t\t\t.please-add-icon {\r\n\t\t\t\ttext-align: center;\r\n\t\t\t\tcolor: #e04d42;\r\n\t\t\t\tfont-weight: 600;\r\n\t\t\t\tmargin: auto;\r\n\t\t\t}\r\n\t\t}\r\n\t\t.block-editor-media-placeholder {\r\n\t\t\tmargin-bottom: 30px;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.homegrade-blocks-timeline__panel-body {\r\n\t// label {\r\n\t// \ttext-transform: uppercase;\r\n\t// }\r\n}\r\n.homegrade-blocks-timeline-step__panel-body {\r\n\t.components-tip {\r\n\t\tmargin: 10px 0;\r\n\t}\r\n\t&--icon {\r\n\t\timg {\r\n\t\t\tmax-height: 60px;\r\n\t\t}\r\n\t}\r\n\t.components-dropdown .components-toolbar__control {\r\n\t\tbackground-color: #e04d42;\r\n\t\tcolor: white;\r\n\t}\r\n\timg {\r\n\t\tdisplay: block;\r\n\t}\r\n\t.components-dropdown {\r\n\t\tdisplay: block;\r\n\t\twidth: fit-content;\r\n\t}\r\n\t.media-replace-container {\r\n\t\tpadding: 10px 0;\r\n\t\tdisplay: flex;\r\n\t\tgap: 10px;\r\n\t\talign-items: center;\r\n\t\t// margin-top: 10px;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

98
blocks/timeline/build/index.js
View File

@ -107,7 +107,7 @@ function Edit({
onChange: handleStepPictureFormatChange onChange: handleStepPictureFormatChange
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { })))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({ ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
className: `homegrade-blocks-timeline` className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""}`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
allowedBlocks: ["homegrade-content-blocks/timeline-step"] allowedBlocks: ["homegrade-content-blocks/timeline-step"]
@ -190,9 +190,14 @@ __webpack_require__.r(__webpack_exports__);
function save({ function save({
attributes attributes
}) { }) {
let {
hasStepPictures,
stepPictureFormat,
hasStepIcons
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-timeline` className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""}`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)); }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
} }
@ -227,6 +232,7 @@ __webpack_require__.r(__webpack_exports__);
function Edit({ function Edit({
attributes, attributes,
setAttributes, setAttributes,
@ -238,6 +244,8 @@ function Edit({
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageId, timelineStepImageId,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl, timelineStepIconUrl,
timelineStepIconId, timelineStepIconId,
timelineStepIconAlt, timelineStepIconAlt,
@ -255,18 +263,23 @@ function Edit({
}); });
} }
function setImageAttributes(media) { function setImageAttributes(media) {
console.log(media);
if (!media || !media.url) { if (!media || !media.url) {
setAttributes({ setAttributes({
timelineStepImageUrl: null, timelineStepImageUrl: null,
timelineStepImageId: null, timelineStepImageId: null,
timelineStepImageAlt: null timelineStepImageAlt: null,
timelineStepImageCaption: null,
timelineStepImageDescription: null
}); });
return; return;
} }
setAttributes({ setAttributes({
timelineStepImageUrl: media.url, timelineStepImageUrl: media.url,
timelineStepImageId: media.id, timelineStepImageId: media.id,
timelineStepImageAlt: media?.alt timelineStepImageAlt: media?.alt,
timelineStepImageCaption: media?.caption,
timelineStepImageDescription: media?.description
}); });
} }
function removeImageAttributes() { function removeImageAttributes() {
@ -292,6 +305,13 @@ function Edit({
timelineStepIconAlt: media?.alt timelineStepIconAlt: media?.alt
}); });
} }
function removeIconAttributes() {
setAttributes({
timelineStepIconUrl: null,
timelineStepIconId: null,
timelineStepIconAlt: null
});
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (hasStepPicture === false) { if (hasStepPicture === false) {
setImageAttributes(null); setImageAttributes(null);
@ -304,7 +324,7 @@ function Edit({
}, [hasStepIcon]); }, [hasStepIcon]);
console.log(_wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"]); console.log(_wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"]);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-timeline-step__panel-body", className: "homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--image",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice") title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice")
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
@ -318,31 +338,34 @@ function Edit({
accept: "image/*", accept: "image/*",
onSelect: setImageAttributes, onSelect: setImageAttributes,
name: !timelineStepImageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice") name: !timelineStepImageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, { }), timelineStepImageUrl && (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_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button", className: "custom-flow-button",
variant: "primary", variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer" label: "Supprimer",
}))), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { onClick: removeImageAttributes
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "Si besoin, Utilisez le champ \"L\xE9gende\"de la m\xE9diath\xE8que pour afficher un copyright"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "Si besoin, Utilisez le champ \"Description\" de la m\xE9diath\xE8que pour donner afficher une description de votre image")), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--icon",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice") title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl, src: timelineStepIconUrl,
alt: timelineStepIconAlt alt: timelineStepIconAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "media-replace-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: timelineStepIconId, mediaId: timelineStepIconId,
mediaUrl: timelineStepIconUrl, mediaUrl: timelineStepIconUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
accept: "image/*", accept: "image/*",
onSelect: setIconAttributes onSelect: setIconAttributes,
// name={ name: !timelineStepIconUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
// !timelineStepIconUrl }), timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
// ? __( className: "custom-flow-button",
// "Ajouter une Image", variant: "primary",
// "homegrade-blocks__texte-backoffice" icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
// ) label: "Supprimer",
// : __("Remplacer Image", "homegrade-blocks__texte-backoffice") onClick: removeIconAttributes
// } })))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (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_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (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_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: timelineStepImageId, mediaId: timelineStepImageId,
mediaUrl: timelineStepImageUrl, mediaUrl: timelineStepImageUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
@ -369,8 +392,17 @@ function Edit({
}), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
alt: timelineStepImageAlt alt: timelineStepImageAlt
}), timelineStepImageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, timelineStepImageDescription), timelineStepImageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, timelineStepImageCaption)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-timeline-step__content`
}, hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__icon"
}, !timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "please-add-icon"
}, "Ajoutez une icone !"), timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
alt: timelineStepIconAlt
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__content" className: "homegrade-blocks-timeline-step__text-content"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
tagName: "h3", tagName: "h3",
className: "homegrade-blocks-timeline-step__title", className: "homegrade-blocks-timeline-step__title",
@ -385,7 +417,7 @@ function Edit({
onChange: onChangeTimelineDescription onChange: onChangeTimelineDescription
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph"] allowedBlocks: ["core/paragraph"]
})))); })))));
} }
/***/ }), /***/ }),
@ -456,9 +488,12 @@ function save({
const { const {
timelineStepTitle, timelineStepTitle,
timelineStepSubtitle, timelineStepSubtitle,
timelineStepImageId,
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconAlt,
hasStepPicture, hasStepPicture,
hasStepIcon hasStepIcon
} = attributes; } = attributes;
@ -466,13 +501,24 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-timeline-step` className: `homegrade-blocks-timeline-step`
}) })
}, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: "homegrade-blocks-timeline-step__cover" className: "homegrade-blocks-timeline-step__cover"
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
alt: timelineStepImageAlt alt: timelineStepImageAlt
}), (timelineStepImageDescription || timelineStepImageCaption) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, timelineStepImageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "description"
}, timelineStepImageDescription), timelineStepImageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "caption"
}, timelineStepImageCaption))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-timeline-step__content`
}, hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__icon"
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
alt: timelineStepIconAlt
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__content" className: "homegrade-blocks-timeline-step__text-content"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
tagName: "h3", tagName: "h3",
className: "homegrade-blocks-timeline-step__title", className: "homegrade-blocks-timeline-step__title",
@ -481,7 +527,7 @@ function save({
tagName: "p", tagName: "p",
className: "homegrade-blocks-timeline-step__subtitle", className: "homegrade-blocks-timeline-step__subtitle",
value: timelineStepSubtitle value: timelineStepSubtitle
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))); }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
} }
/***/ }), /***/ }),
@ -651,7 +697,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
\**************************************/ \**************************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/timeline-step","version":"0.1.0","title":"Étape de timeline","category":"homegrade-blocks","description":"Bloc d\'étape de timeline","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"timelineStepTitle":{"type":"string","default":""},"timelineStepSubtitle":{"type":"string","default":""},"timelineStepImageUrl":{"type":"string"},"timelineStepImageId":{"type":"number"},"timelineStepImageAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"timelineStepIconUrl":{"type":"string"},"timelineStepIconId":{"type":"number"},"timelineStepIconAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"hasStepIcon":{"type":"boolean","default":true},"hasStepPicture":{"type":"boolean","default":true}}}'); module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/timeline-step","version":"0.1.0","title":"Étape de timeline","category":"homegrade-blocks","description":"Bloc d\'étape de timeline","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"timelineStepTitle":{"type":"string","default":""},"timelineStepSubtitle":{"type":"string","default":""},"timelineStepImageUrl":{"type":"string"},"timelineStepImageId":{"type":"number"},"timelineStepImageCaption":{"type":"string"},"timelineStepImageDescription":{"type":"string"},"timelineStepImageAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"timelineStepIconUrl":{"type":"string"},"timelineStepIconId":{"type":"number"},"timelineStepIconAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"hasStepIcon":{"type":"boolean","default":true},"hasStepPicture":{"type":"boolean","default":true}}}');
/***/ }) /***/ })

2
blocks/timeline/build/index.js.map
View File

File diff suppressed because one or more lines are too long

6
blocks/timeline/build/timeline-step/block.json
View File

@ -27,6 +27,12 @@
"timelineStepImageId": { "timelineStepImageId": {
"type": "number" "type": "number"
}, },
"timelineStepImageCaption": {
"type": "string"
},
"timelineStepImageDescription": {
"type": "string"
},
"timelineStepImageAlt": { "timelineStepImageAlt": {
"type": "string", "type": "string",
"source": "attribute", "source": "attribute",

2
blocks/timeline/build/timeline-step/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' => 'cdf5fd0662ba5ec07221'); <?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'ca09a65ad3167763d811');

89
blocks/timeline/build/timeline-step/index.js
View File

@ -30,6 +30,7 @@ __webpack_require__.r(__webpack_exports__);
function Edit({ function Edit({
attributes, attributes,
setAttributes, setAttributes,
@ -41,6 +42,8 @@ function Edit({
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageId, timelineStepImageId,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl, timelineStepIconUrl,
timelineStepIconId, timelineStepIconId,
timelineStepIconAlt, timelineStepIconAlt,
@ -58,18 +61,23 @@ function Edit({
}); });
} }
function setImageAttributes(media) { function setImageAttributes(media) {
console.log(media);
if (!media || !media.url) { if (!media || !media.url) {
setAttributes({ setAttributes({
timelineStepImageUrl: null, timelineStepImageUrl: null,
timelineStepImageId: null, timelineStepImageId: null,
timelineStepImageAlt: null timelineStepImageAlt: null,
timelineStepImageCaption: null,
timelineStepImageDescription: null
}); });
return; return;
} }
setAttributes({ setAttributes({
timelineStepImageUrl: media.url, timelineStepImageUrl: media.url,
timelineStepImageId: media.id, timelineStepImageId: media.id,
timelineStepImageAlt: media?.alt timelineStepImageAlt: media?.alt,
timelineStepImageCaption: media?.caption,
timelineStepImageDescription: media?.description
}); });
} }
function removeImageAttributes() { function removeImageAttributes() {
@ -95,6 +103,13 @@ function Edit({
timelineStepIconAlt: media?.alt timelineStepIconAlt: media?.alt
}); });
} }
function removeIconAttributes() {
setAttributes({
timelineStepIconUrl: null,
timelineStepIconId: null,
timelineStepIconAlt: null
});
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (hasStepPicture === false) { if (hasStepPicture === false) {
setImageAttributes(null); setImageAttributes(null);
@ -107,7 +122,7 @@ function Edit({
}, [hasStepIcon]); }, [hasStepIcon]);
console.log(_wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"]); console.log(_wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"]);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-timeline-step__panel-body", className: "homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--image",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice") title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice")
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
@ -121,31 +136,34 @@ function Edit({
accept: "image/*", accept: "image/*",
onSelect: setImageAttributes, onSelect: setImageAttributes,
name: !timelineStepImageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice") name: !timelineStepImageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, { }), timelineStepImageUrl && (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_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button", className: "custom-flow-button",
variant: "primary", variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer" label: "Supprimer",
}))), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { onClick: removeImageAttributes
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "Si besoin, Utilisez le champ \"L\xE9gende\"de la m\xE9diath\xE8que pour afficher un copyright"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "Si besoin, Utilisez le champ \"Description\" de la m\xE9diath\xE8que pour donner afficher une description de votre image")), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
className: "homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--icon",
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice") title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice")
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl, src: timelineStepIconUrl,
alt: timelineStepIconAlt alt: timelineStepIconAlt
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "media-replace-container"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: timelineStepIconId, mediaId: timelineStepIconId,
mediaUrl: timelineStepIconUrl, mediaUrl: timelineStepIconUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
accept: "image/*", accept: "image/*",
onSelect: setIconAttributes onSelect: setIconAttributes,
// name={ name: !timelineStepIconUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
// !timelineStepIconUrl }), timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
// ? __( className: "custom-flow-button",
// "Ajouter une Image", variant: "primary",
// "homegrade-blocks__texte-backoffice" icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
// ) label: "Supprimer",
// : __("Remplacer Image", "homegrade-blocks__texte-backoffice") onClick: removeIconAttributes
// } })))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (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_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (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_block_editor__WEBPACK_IMPORTED_MODULE_3__.MediaReplaceFlow, {
mediaId: timelineStepImageId, mediaId: timelineStepImageId,
mediaUrl: timelineStepImageUrl, mediaUrl: timelineStepImageUrl,
allowedTypes: ["image"], allowedTypes: ["image"],
@ -172,8 +190,17 @@ function Edit({
}), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
alt: timelineStepImageAlt alt: timelineStepImageAlt
}), timelineStepImageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, timelineStepImageDescription), timelineStepImageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", null, timelineStepImageCaption)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-timeline-step__content`
}, hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__icon"
}, !timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "please-add-icon"
}, "Ajoutez une icone !"), timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
alt: timelineStepIconAlt
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__content" className: "homegrade-blocks-timeline-step__text-content"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
tagName: "h3", tagName: "h3",
className: "homegrade-blocks-timeline-step__title", className: "homegrade-blocks-timeline-step__title",
@ -188,7 +215,7 @@ function Edit({
onChange: onChangeTimelineDescription onChange: onChangeTimelineDescription
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, { }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph"] allowedBlocks: ["core/paragraph"]
})))); })))));
} }
/***/ }), /***/ }),
@ -259,9 +286,12 @@ function save({
const { const {
timelineStepTitle, timelineStepTitle,
timelineStepSubtitle, timelineStepSubtitle,
timelineStepImageId,
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconAlt,
hasStepPicture, hasStepPicture,
hasStepIcon hasStepIcon
} = attributes; } = attributes;
@ -269,13 +299,24 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-timeline-step` className: `homegrade-blocks-timeline-step`
}) })
}, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, hasStepPicture && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figure", {
className: "homegrade-blocks-timeline-step__cover" className: "homegrade-blocks-timeline-step__cover"
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", { }, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl, src: timelineStepImageUrl,
alt: timelineStepImageAlt alt: timelineStepImageAlt
}), (timelineStepImageDescription || timelineStepImageCaption) && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("figcaption", null, timelineStepImageDescription && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "description"
}, timelineStepImageDescription), timelineStepImageCaption && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("p", {
className: "caption"
}, timelineStepImageCaption))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `homegrade-blocks-timeline-step__content`
}, hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__icon"
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
alt: timelineStepIconAlt
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "homegrade-blocks-timeline-step__content" className: "homegrade-blocks-timeline-step__text-content"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, { }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
tagName: "h3", tagName: "h3",
className: "homegrade-blocks-timeline-step__title", className: "homegrade-blocks-timeline-step__title",
@ -284,7 +325,7 @@ function save({
tagName: "p", tagName: "p",
className: "homegrade-blocks-timeline-step__subtitle", className: "homegrade-blocks-timeline-step__subtitle",
value: timelineStepSubtitle value: timelineStepSubtitle
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))); }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))));
} }
/***/ }), /***/ }),
@ -410,7 +451,7 @@ module.exports = window["wp"]["primitives"];
\**************************************/ \**************************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/timeline-step","version":"0.1.0","title":"Étape de timeline","category":"homegrade-blocks","description":"Bloc d\'étape de timeline","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"timelineStepTitle":{"type":"string","default":""},"timelineStepSubtitle":{"type":"string","default":""},"timelineStepImageUrl":{"type":"string"},"timelineStepImageId":{"type":"number"},"timelineStepImageAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"timelineStepIconUrl":{"type":"string"},"timelineStepIconId":{"type":"number"},"timelineStepIconAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"hasStepIcon":{"type":"boolean","default":true},"hasStepPicture":{"type":"boolean","default":true}}}'); module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/timeline-step","version":"0.1.0","title":"Étape de timeline","category":"homegrade-blocks","description":"Bloc d\'étape de timeline","supports":{"html":false},"editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"timelineStepTitle":{"type":"string","default":""},"timelineStepSubtitle":{"type":"string","default":""},"timelineStepImageUrl":{"type":"string"},"timelineStepImageId":{"type":"number"},"timelineStepImageCaption":{"type":"string"},"timelineStepImageDescription":{"type":"string"},"timelineStepImageAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"timelineStepIconUrl":{"type":"string"},"timelineStepIconId":{"type":"number"},"timelineStepIconAlt":{"type":"string","source":"attribute","selector":"img","attribute":"alt","default":""},"hasStepIcon":{"type":"boolean","default":true},"hasStepPicture":{"type":"boolean","default":true}}}');
/***/ }) /***/ })

2
blocks/timeline/build/timeline-step/index.js.map
View File

File diff suppressed because one or more lines are too long

4
blocks/timeline/src/edit.js
View File

@ -104,7 +104,9 @@ export default function Edit({
</InspectorControls> </InspectorControls>
<section <section
{...useBlockProps({ {...useBlockProps({
className: `homegrade-blocks-timeline`, className: `homegrade-blocks-timeline ${
hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
}`,
})} })}
> >
<InnerBlocks <InnerBlocks

22
blocks/timeline/src/editor.scss
View File

@ -1,5 +1,19 @@
.homegrade-blocks-timeline { .homegrade-blocks-timeline {
&--has-step-icons {
&:before {
z-index: 0 !important;
}
}
.homegrade-blocks-timeline-step { .homegrade-blocks-timeline-step {
&__icon {
.please-add-icon {
text-align: center;
color: #e04d42;
font-weight: 600;
margin: auto;
}
}
.block-editor-media-placeholder { .block-editor-media-placeholder {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -12,6 +26,14 @@
// } // }
} }
.homegrade-blocks-timeline-step__panel-body { .homegrade-blocks-timeline-step__panel-body {
.components-tip {
margin: 10px 0;
}
&--icon {
img {
max-height: 60px;
}
}
.components-dropdown .components-toolbar__control { .components-dropdown .components-toolbar__control {
background-color: #e04d42; background-color: #e04d42;
color: white; color: white;

6
blocks/timeline/src/save.js
View File

@ -1,10 +1,14 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
let { hasStepPictures, stepPictureFormat, hasStepIcons } = attributes;
return ( return (
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `homegrade-blocks-timeline`, className: `homegrade-blocks-timeline ${
hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
}`,
})} })}
> >
<InnerBlocks.Content /> <InnerBlocks.Content />

6
blocks/timeline/src/timeline-step/block.json
View File

@ -27,6 +27,12 @@
"timelineStepImageId": { "timelineStepImageId": {
"type": "number" "type": "number"
}, },
"timelineStepImageCaption": {
"type": "string"
},
"timelineStepImageDescription": {
"type": "string"
},
"timelineStepImageAlt": { "timelineStepImageAlt": {
"type": "string", "type": "string",
"source": "attribute", "source": "attribute",

150
blocks/timeline/src/timeline-step/edit.js
View File

@ -19,7 +19,7 @@ import {
import { useEffect } from "@wordpress/element"; import { useEffect } from "@wordpress/element";
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor"; import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons"; import { trash } from "@wordpress/icons";
import { Tip } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
let { let {
timelineStepTitle, timelineStepTitle,
@ -27,6 +27,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageId, timelineStepImageId,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl, timelineStepIconUrl,
timelineStepIconId, timelineStepIconId,
timelineStepIconAlt, timelineStepIconAlt,
@ -41,11 +43,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
setAttributes({ timelineStepSubtitle }); setAttributes({ timelineStepSubtitle });
} }
function setImageAttributes(media) { function setImageAttributes(media) {
console.log(media);
if (!media || !media.url) { if (!media || !media.url) {
setAttributes({ setAttributes({
timelineStepImageUrl: null, timelineStepImageUrl: null,
timelineStepImageId: null, timelineStepImageId: null,
timelineStepImageAlt: null, timelineStepImageAlt: null,
timelineStepImageCaption: null,
timelineStepImageDescription: null,
}); });
return; return;
} }
@ -53,9 +58,10 @@ export default function Edit({ attributes, setAttributes, ...props }) {
timelineStepImageUrl: media.url, timelineStepImageUrl: media.url,
timelineStepImageId: media.id, timelineStepImageId: media.id,
timelineStepImageAlt: media?.alt, timelineStepImageAlt: media?.alt,
timelineStepImageCaption: media?.caption,
timelineStepImageDescription: media?.description,
}); });
} }
function removeImageAttributes() { function removeImageAttributes() {
setAttributes({ setAttributes({
timelineStepImageUrl: null, timelineStepImageUrl: null,
@ -81,6 +87,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}); });
} }
function removeIconAttributes() {
setAttributes({
timelineStepIconUrl: null,
timelineStepIconId: null,
timelineStepIconAlt: null,
});
}
useEffect(() => { useEffect(() => {
if (hasStepPicture === false) { if (hasStepPicture === false) {
setImageAttributes(null); setImageAttributes(null);
@ -99,7 +113,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<InspectorControls> <InspectorControls>
{hasStepPicture && ( {hasStepPicture && (
<PanelBody <PanelBody
className="homegrade-blocks-timeline-step__panel-body" className="homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--image"
title={__("Image", "homegrade-blocks__texte-backoffice")} title={__("Image", "homegrade-blocks__texte-backoffice")}
> >
{timelineStepImageUrl && ( {timelineStepImageUrl && (
@ -118,35 +132,59 @@ export default function Edit({ attributes, setAttributes, ...props }) {
: __("Remplacer", "homegrade-blocks__texte-backoffice") : __("Remplacer", "homegrade-blocks__texte-backoffice")
} }
/> />
<Button {timelineStepImageUrl && (
className="custom-flow-button" <>
variant="primary" <Button
icon={trash} className="custom-flow-button"
label="Supprimer" variant="primary"
/> icon={trash}
label="Supprimer"
onClick={removeImageAttributes}
/>
</>
)}
</div> </div>
<Tip>
Si besoin, Utilisez le champ "Légende"de la médiathèque pour
afficher un copyright
</Tip>
<Tip>
Si besoin, Utilisez le champ "Description" de la médiathèque pour
donner afficher une description de votre image
</Tip>
</PanelBody> </PanelBody>
)} )}
{hasStepIcon && ( {hasStepIcon && (
<PanelBody title={__("Icone", "homegrade-blocks__texte-backoffice")}> <PanelBody
className="homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--icon"
title={__("Icone", "homegrade-blocks__texte-backoffice")}
>
{timelineStepIconUrl && ( {timelineStepIconUrl && (
<img src={timelineStepIconUrl} alt={timelineStepIconAlt} /> <img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
)} )}
<MediaReplaceFlow <div className="media-replace-container">
mediaId={timelineStepIconId} <MediaReplaceFlow
mediaUrl={timelineStepIconUrl} mediaId={timelineStepIconId}
allowedTypes={["image"]} mediaUrl={timelineStepIconUrl}
accept="image/*" allowedTypes={["image"]}
onSelect={setIconAttributes} accept="image/*"
// name={ onSelect={setIconAttributes}
// !timelineStepIconUrl name={
// ? __( !timelineStepIconUrl
// "Ajouter une Image", ? __("Ajouter", "homegrade-blocks__texte-backoffice")
// "homegrade-blocks__texte-backoffice" : __("Remplacer", "homegrade-blocks__texte-backoffice")
// ) }
// : __("Remplacer Image", "homegrade-blocks__texte-backoffice") />
// } {timelineStepIconUrl && (
/> <Button
className="custom-flow-button"
variant="primary"
icon={trash}
label="Supprimer"
onClick={removeIconAttributes}
/>
)}
</div>
</PanelBody> </PanelBody>
)} )}
</InspectorControls> </InspectorControls>
@ -192,31 +230,49 @@ export default function Edit({ attributes, setAttributes, ...props }) {
{timelineStepImageUrl && ( {timelineStepImageUrl && (
<img src={timelineStepImageUrl} alt={timelineStepImageAlt} /> <img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
)} )}
{timelineStepImageDescription && (
<p>{timelineStepImageDescription}</p>
)}
{timelineStepImageCaption && <p>{timelineStepImageCaption}</p>}
</div> </div>
)} )}
<div className="homegrade-blocks-timeline-step__content"> <div className={`homegrade-blocks-timeline-step__content`}>
<RichText {hasStepIcon && (
tagName="h3" <div className="homegrade-blocks-timeline-step__icon">
className="homegrade-blocks-timeline-step__title" {!timelineStepIconUrl && (
placeholder={__( <p className="please-add-icon">Ajoutez une icone !</p>
"Date ou Titre de l'étape", )}
"homegrade-blocks__texte-backoffice"
)} {timelineStepIconUrl && (
value={timelineStepTitle} <img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
onChange={onChangeTimelineStepTitle} )}
/> </div>
<RichText )}
tagName="h2"
className="homegrade-blocks-timeline-step__subtitle" <div className="homegrade-blocks-timeline-step__text-content">
placeholder={__( <RichText
"Titre / Sous-titre de l'étape", tagName="h3"
"homegrade-blocks__texte-backoffice" className="homegrade-blocks-timeline-step__title"
)} placeholder={__(
value={timelineStepSubtitle} "Date ou Titre de l'étape",
onChange={onChangeTimelineDescription} "homegrade-blocks__texte-backoffice"
/> )}
<InnerBlocks allowedBlocks={["core/paragraph"]} /> value={timelineStepTitle}
onChange={onChangeTimelineStepTitle}
/>
<RichText
tagName="h2"
className="homegrade-blocks-timeline-step__subtitle"
placeholder={__(
"Titre / Sous-titre de l'étape",
"homegrade-blocks__texte-backoffice"
)}
value={timelineStepSubtitle}
onChange={onChangeTimelineDescription}
/>
<InnerBlocks allowedBlocks={["core/paragraph"]} />
</div>
</div> </div>
</div> </div>
</> </>

52
blocks/timeline/src/timeline-step/save.js
View File

@ -4,9 +4,12 @@ export default function save({ attributes }) {
const { const {
timelineStepTitle, timelineStepTitle,
timelineStepSubtitle, timelineStepSubtitle,
timelineStepImageId,
timelineStepImageUrl, timelineStepImageUrl,
timelineStepImageAlt, timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconAlt,
hasStepPicture, hasStepPicture,
hasStepIcon, hasStepIcon,
} = attributes; } = attributes;
@ -17,24 +20,43 @@ export default function save({ attributes }) {
})} })}
> >
{hasStepPicture && ( {hasStepPicture && (
<div className="homegrade-blocks-timeline-step__cover"> <figure className="homegrade-blocks-timeline-step__cover">
{timelineStepImageUrl && ( {timelineStepImageUrl && (
<img src={timelineStepImageUrl} alt={timelineStepImageAlt} /> <img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
)} )}
</div> {(timelineStepImageDescription || timelineStepImageCaption) && (
<figcaption>
{timelineStepImageDescription && (
<p className="description">{timelineStepImageDescription}</p>
)}
{timelineStepImageCaption && (
<p className="caption">{timelineStepImageCaption}</p>
)}
</figcaption>
)}
</figure>
)} )}
<div className="homegrade-blocks-timeline-step__content"> <div className={`homegrade-blocks-timeline-step__content`}>
<RichText.Content {hasStepIcon && (
tagName="h3" <div className="homegrade-blocks-timeline-step__icon">
className="homegrade-blocks-timeline-step__title" {timelineStepIconUrl && (
value={timelineStepTitle} <img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
/> )}
<RichText.Content </div>
tagName="p" )}
className="homegrade-blocks-timeline-step__subtitle" <div className="homegrade-blocks-timeline-step__text-content">
value={timelineStepSubtitle} <RichText.Content
/> tagName="h3"
<InnerBlocks.Content /> className="homegrade-blocks-timeline-step__title"
value={timelineStepTitle}
/>
<RichText.Content
tagName="p"
className="homegrade-blocks-timeline-step__subtitle"
value={timelineStepSubtitle}
/>
<InnerBlocks.Content />
</div>
</div> </div>
</div> </div>
); );