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 ***!
\****************************************************************************************************************************************************************************************************************************************/
.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 {
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 {
background-color: #e04d42;
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
})))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(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, {
allowedBlocks: ["homegrade-content-blocks/timeline-step"]
@ -190,9 +190,14 @@ __webpack_require__.r(__webpack_exports__);
function save({
attributes
}) {
let {
hasStepPictures,
stepPictureFormat,
hasStepIcons
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._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));
}
@ -227,6 +232,7 @@ __webpack_require__.r(__webpack_exports__);
function Edit({
attributes,
setAttributes,
@ -238,6 +244,8 @@ function Edit({
timelineStepImageUrl,
timelineStepImageId,
timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconId,
timelineStepIconAlt,
@ -255,18 +263,23 @@ function Edit({
});
}
function setImageAttributes(media) {
console.log(media);
if (!media || !media.url) {
setAttributes({
timelineStepImageUrl: null,
timelineStepImageId: null,
timelineStepImageAlt: null
timelineStepImageAlt: null,
timelineStepImageCaption: null,
timelineStepImageDescription: null
});
return;
}
setAttributes({
timelineStepImageUrl: media.url,
timelineStepImageId: media.id,
timelineStepImageAlt: media?.alt
timelineStepImageAlt: media?.alt,
timelineStepImageCaption: media?.caption,
timelineStepImageDescription: media?.description
});
}
function removeImageAttributes() {
@ -292,6 +305,13 @@ function Edit({
timelineStepIconAlt: media?.alt
});
}
function removeIconAttributes() {
setAttributes({
timelineStepIconUrl: null,
timelineStepIconId: null,
timelineStepIconAlt: null
});
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (hasStepPicture === false) {
setImageAttributes(null);
@ -304,7 +324,7 @@ function Edit({
}, [hasStepIcon]);
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, {
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")
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
@ -318,31 +338,34 @@ function Edit({
accept: "image/*",
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")
}), (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",
variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer"
}))), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
label: "Supprimer",
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")
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
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,
mediaUrl: timelineStepIconUrl,
allowedTypes: ["image"],
accept: "image/*",
onSelect: setIconAttributes
// name={
// !timelineStepIconUrl
// ? __(
// "Ajouter une Image",
// "homegrade-blocks__texte-backoffice"
// )
// : __("Remplacer Image", "homegrade-blocks__texte-backoffice")
// }
}))), (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, {
onSelect: setIconAttributes,
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 && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button",
variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
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, {
mediaId: timelineStepImageId,
mediaUrl: timelineStepImageUrl,
allowedTypes: ["image"],
@ -369,8 +392,17 @@ function Edit({
}), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
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", {
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, {
tagName: "h3",
className: "homegrade-blocks-timeline-step__title",
@ -385,7 +417,7 @@ function Edit({
onChange: onChangeTimelineDescription
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph"]
}))));
})))));
}
/***/ }),
@ -456,9 +488,12 @@ function save({
const {
timelineStepTitle,
timelineStepSubtitle,
timelineStepImageId,
timelineStepImageUrl,
timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconAlt,
hasStepPicture,
hasStepIcon
} = attributes;
@ -466,13 +501,24 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
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"
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
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", {
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, {
tagName: "h3",
className: "homegrade-blocks-timeline-step__title",
@ -481,7 +527,7 @@ function save({
tagName: "p",
className: "homegrade-blocks-timeline-step__subtitle",
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.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": {
"type": "number"
},
"timelineStepImageCaption": {
"type": "string"
},
"timelineStepImageDescription": {
"type": "string"
},
"timelineStepImageAlt": {
"type": "string",
"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({
attributes,
setAttributes,
@ -41,6 +42,8 @@ function Edit({
timelineStepImageUrl,
timelineStepImageId,
timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconId,
timelineStepIconAlt,
@ -58,18 +61,23 @@ function Edit({
});
}
function setImageAttributes(media) {
console.log(media);
if (!media || !media.url) {
setAttributes({
timelineStepImageUrl: null,
timelineStepImageId: null,
timelineStepImageAlt: null
timelineStepImageAlt: null,
timelineStepImageCaption: null,
timelineStepImageDescription: null
});
return;
}
setAttributes({
timelineStepImageUrl: media.url,
timelineStepImageId: media.id,
timelineStepImageAlt: media?.alt
timelineStepImageAlt: media?.alt,
timelineStepImageCaption: media?.caption,
timelineStepImageDescription: media?.description
});
}
function removeImageAttributes() {
@ -95,6 +103,13 @@ function Edit({
timelineStepIconAlt: media?.alt
});
}
function removeIconAttributes() {
setAttributes({
timelineStepIconUrl: null,
timelineStepIconId: null,
timelineStepIconAlt: null
});
}
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
if (hasStepPicture === false) {
setImageAttributes(null);
@ -107,7 +122,7 @@ function Edit({
}, [hasStepIcon]);
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, {
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")
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
@ -121,31 +136,34 @@ function Edit({
accept: "image/*",
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")
}), (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",
variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer"
}))), hasStepIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, {
label: "Supprimer",
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")
}, timelineStepIconUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepIconUrl,
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,
mediaUrl: timelineStepIconUrl,
allowedTypes: ["image"],
accept: "image/*",
onSelect: setIconAttributes
// name={
// !timelineStepIconUrl
// ? __(
// "Ajouter une Image",
// "homegrade-blocks__texte-backoffice"
// )
// : __("Remplacer Image", "homegrade-blocks__texte-backoffice")
// }
}))), (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, {
onSelect: setIconAttributes,
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 && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button, {
className: "custom-flow-button",
variant: "primary",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
label: "Supprimer",
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, {
mediaId: timelineStepImageId,
mediaUrl: timelineStepImageUrl,
allowedTypes: ["image"],
@ -172,8 +190,17 @@ function Edit({
}), timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
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", {
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, {
tagName: "h3",
className: "homegrade-blocks-timeline-step__title",
@ -188,7 +215,7 @@ function Edit({
onChange: onChangeTimelineDescription
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
allowedBlocks: ["core/paragraph"]
}))));
})))));
}
/***/ }),
@ -259,9 +286,12 @@ function save({
const {
timelineStepTitle,
timelineStepSubtitle,
timelineStepImageId,
timelineStepImageUrl,
timelineStepImageAlt,
timelineStepImageCaption,
timelineStepImageDescription,
timelineStepIconUrl,
timelineStepIconAlt,
hasStepPicture,
hasStepIcon
} = attributes;
@ -269,13 +299,24 @@ function save({
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
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"
}, timelineStepImageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
src: timelineStepImageUrl,
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", {
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, {
tagName: "h3",
className: "homegrade-blocks-timeline-step__title",
@ -284,7 +325,7 @@ function save({
tagName: "p",
className: "homegrade-blocks-timeline-step__subtitle",
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.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>
<section
{...useBlockProps({
className: `homegrade-blocks-timeline`,
className: `homegrade-blocks-timeline ${
hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
}`,
})}
>
<InnerBlocks

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

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

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

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

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

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

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

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

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

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