extending to handle custom lateral cover

blocks/timeline/build/block.json

@@ -14,6 +14,19 @@
   "editorStyle": "file:./index.css",
   "style": "file:./style-index.css",
   "attributes": {
+    "hasLateralCover": {
+      "type": "boolean",
+      "default": false
+    },
+    "lateralCoverId": {
+      "type": "number"
+    },
+    "lateralCoverUrl": {
+      "type": "string"
+    },
+    "lateralCoverAlt": {
+      "type": "string"
+    },
     "hasStepPictures": {
       "type": "boolean",
       "default": true

blocks/timeline/build/index.asset.php

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

blocks/timeline/build/index.css

@@ -4,6 +4,9 @@
 .homegrade-blocks-timeline--has-step-icons:before {
   z-index: 0 !important;
 }
+.homegrade-blocks-timeline .components-placeholder {
+  max-height: 300px;
+}
 .homegrade-blocks-timeline .homegrade-blocks-timeline-step__icon .please-add-icon {
   text-align: center;
   color: #e04d42;
@@ -14,6 +17,10 @@
   margin-bottom: 30px;
 }
 
+.homegrade-blocks-timeline__panel-body > img {
+  max-height: 150px;
+}
+
 .homegrade-blocks-timeline-step__panel-body .components-tip {
   margin: 10px 0;
 }

blocks/timeline/build/index.css.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"file":"index.css","mappings":";;;AAEE;EACC;AADH;AAIC;EACC;AAFF;AAOG;EACC;EACA;EACA;EACA;AALJ;AAQE;EACC;AANH;;AAYC;EACC;AATF;;AAaC;EACC;AAVF;AAaE;EACC;AAXH;AAcC;EACC;EACA;AAZF;AAcC;EACC;AAZF;AAcC;EACC;EACA;EAAA;AAZF;AAcC;EACC;EACA;EACA;EACA;AAZF,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\t.components-placeholder {\r\n\t\tmax-height: 300px;\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> img {\r\n\t\tmax-height: 150px;\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":""}

blocks/timeline/build/index.js

@@ -2,6 +2,243 @@
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "../_components/Image.jsx":
+/*!********************************!*\
+  !*** ../_components/Image.jsx ***!
+  \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ Image)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+
+function Image({
+  imageUrl,
+  imageAlt,
+  imageProportion
+}) {
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: imageUrl,
+    alt: imageAlt,
+    className: `homegrade-blocks-components-image homegrade-blocks-components-image--${imageProportion}-ratio`
+  });
+}
+
+/***/ }),
+
+/***/ "../_components/ImageMediaPlaceholder.jsx":
+/*!************************************************!*\
+  !*** ../_components/ImageMediaPlaceholder.jsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ ImageMediaPlaceholder)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
+
+
+function ImageMediaPlaceholder({
+  imageId,
+  imageAlt,
+  imageUrl,
+  setAttributes
+}) {
+  function setImageAttributes(image) {
+    setAttributes({
+      imageId: image.id,
+      imageAlt: image.alt,
+      imageUrl: image.url
+    });
+  }
+  function removeImageAttributes() {
+    setAttributes({
+      imageId: null,
+      imageAlt: null,
+      imageUrl: null
+    });
+  }
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, !imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.MediaPlaceholder, {
+    accept: "image/*",
+    allowedTypes: ["image"],
+    onSelect: setImageAttributes,
+    multiple: false,
+    handleUpload: true
+  }));
+}
+
+/***/ }),
+
+/***/ "../_components/ImagePanelBody.jsx":
+/*!*****************************************!*\
+  !*** ../_components/ImagePanelBody.jsx ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ ImagePanelBody)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
+
+
+
+
+
+function ImagePanelBody({
+  imageUrl,
+  imageAlt,
+  imageId,
+  imageProportion,
+  setAttributes
+}) {
+  function setImageAttributes(image) {
+    setAttributes({
+      imageId: image.id,
+      imageAlt: image.alt,
+      imageUrl: image.url
+    });
+  }
+  function removeImageAttributes() {
+    setAttributes({
+      imageId: null,
+      imageAlt: null,
+      imageUrl: null
+    });
+  }
+  function onImageProportionChange(imageProportion) {
+    console.log(imageProportion);
+    setAttributes({
+      imageProportion
+    });
+  }
+  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_components__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
+    className: "homegrade-blocks-components-image__panel-body",
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image", "homegrade-blocks__texte-backoffice")
+  }, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: imageUrl,
+    alt: imageAlt
+  }), (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: imageId,
+    mediaUrl: imageUrl,
+    allowedTypes: ["image"],
+    accept: "image/*",
+    onSelect: setImageAttributes,
+    name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
+  }), imageUrl && (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_2__.Button, {
+    className: "custom-flow-button",
+    variant: "primary",
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__["default"],
+    label: "Supprimer",
+    onClick: removeImageAttributes
+  }))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.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_2__.Tip, null, "Si besoin, Utilisez le champ \"Description\" de la m\xE9diath\xE8que pour donner afficher une description de votre image"), imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControl, {
+    label: "Proportion",
+    className: "homegrade-blocks-components-image__ratio-selector",
+    isBlock: true,
+    onChange: onImageProportionChange,
+    value: imageProportion
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+    variant: "primary",
+    label: "Original",
+    value: "original"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+    variant: "primary",
+    label: "Moyen",
+    value: "medium"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.__experimentalToggleGroupControlOption, {
+    variant: "primary",
+    label: "Carr\xE9",
+    value: "square"
+  }))));
+}
+
+/***/ }),
+
+/***/ "../_components/ImagePanelBodyContent.jsx":
+/*!************************************************!*\
+  !*** ../_components/ImagePanelBodyContent.jsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ ImagePanelBody)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
+/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
+
+
+
+
+
+function ImagePanelBody({
+  imageUrl,
+  imageAlt,
+  imageId,
+  imageProportion,
+  setAttributes
+}) {
+  function setImageAttributes(image) {
+    setAttributes({
+      imageId: image.id,
+      imageAlt: image.alt,
+      imageUrl: image.url
+    });
+  }
+  function removeImageAttributes() {
+    setAttributes({
+      imageId: null,
+      imageAlt: null,
+      imageUrl: null
+    });
+  }
+  return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: imageUrl,
+    alt: imageAlt
+  }), (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: imageId,
+    mediaUrl: imageUrl,
+    allowedTypes: ["image"],
+    accept: "image/*",
+    onSelect: setImageAttributes,
+    name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
+  }), imageUrl && (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_2__.Button, {
+    className: "custom-flow-button",
+    variant: "primary",
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__["default"],
+    label: "Supprimer",
+    onClick: removeImageAttributes
+  }))));
+}
+
+/***/ }),
+
 /***/ "./src/edit.js":
 /*!*********************!*\
   !*** ./src/edit.js ***!
@@ -24,6 +261,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
+/* harmony import */ var _components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../_components/ImageMediaPlaceholder */ "../_components/ImageMediaPlaceholder.jsx");
+/* harmony import */ var _components_Image__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../_components/Image */ "../_components/Image.jsx");
+/* harmony import */ var _components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../_components/ImagePanelBody */ "../_components/ImagePanelBody.jsx");
+/* harmony import */ var _components_ImagePanelBodyContent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../_components/ImagePanelBodyContent */ "../_components/ImagePanelBodyContent.jsx");
+
+
+
 
 
 
@@ -42,7 +287,11 @@ function Edit({
   let {
     hasStepPictures,
     stepPictureFormat,
-    hasStepIcons
+    hasStepIcons,
+    hasLateralCover,
+    lateralCoverId,
+    lateralCoverAlt,
+    lateralCoverUrl
   } = attributes;
   let children = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => select("core/block-editor").getBlocksByClientId(clientId)[0].innerBlocks);
   function handleStepPictureFormatChange(stepPictureFormat) {
@@ -60,6 +309,36 @@ function Edit({
       hasStepIcons: !hasStepIcons
     });
   }
+  function onChangeImagesDispositionType(disposition) {
+    console.log(disposition);
+    if (disposition === "hasStepPictures") {
+      setAttributes({
+        hasStepPictures: true,
+        hasLateralCover: false
+      });
+      removeLateralCoverAttributes();
+    }
+    if (disposition === "hasLateralCover") {
+      setAttributes({
+        hasStepPictures: false,
+        hasLateralCover: true
+      });
+    }
+  }
+  function setLateralCoverAttributes(cover) {
+    setAttributes({
+      lateralCoverId: cover.id,
+      lateralCoverAlt: cover.alt,
+      lateralCoverUrl: cover.url
+    });
+  }
+  function removeLateralCoverAttributes() {
+    setAttributes({
+      lateralCoverId: null,
+      lateralCoverAlt: null,
+      lateralCoverUrl: null
+    });
+  }
   function updateChildrensProps(children) {
     children.forEach(child => {
       (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.dispatch)("core/block-editor").updateBlockAttributes(child.clientId, {
@@ -73,22 +352,37 @@ function Edit({
       updateChildrensProps(children);
     }
   }, [children, hasStepPictures, hasStepIcons]);
+  const TEMPLATE = [["homegrade-content-blocks/timeline-step", {
+    timelineStepTitle: "Etape 1",
+    timelineStepSubtitle: "sous titre"
+  }], ["homegrade-content-blocks/timeline-step", {
+    timelineStepTitle: "Etape 2",
+    timelineStepSubtitle: "sous titre"
+  }]];
   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_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, {
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Variantes de Timeline", "homegrade-blocks__texte-backoffice"),
-    className: "homegrade-blocks-timeline__panel-body"
+    className: "homegrade-blocks-timeline__panel-body homegrade-blocks-components-image__panel-body"
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("label", {
     htmlFor: ""
   }, "Icones"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FormToggle, {
     label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icones", "homegrade-blocks__texte-backoffice"),
     checked: hasStepIcons,
     onChange: onChangehasStepIcons
-  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("label", {
+  })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.__experimentalToggleGroupControl, {
-    htmlFor: ""
+    label: "Type d'image",
-  }, "Images"), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.FormToggle, {
+    className: "homegrade-blocks-components-image__ratio-selector",
-    label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icones", "homegrade-blocks__texte-backoffice"),
+    isBlock: true,
-    checked: hasStepPictures,
+    onChange: onChangeImagesDispositionType,
-    onChange: onChangehasStepPictures
+    value: hasStepPictures ? "hasStepPictures" : "hasLateralCover"
-  })), hasStepPictures && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.RadioControl
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.__experimentalToggleGroupControlOption, {
+    variant: "hasStepPictures",
+    label: "Images par ligne",
+    value: "hasStepPictures"
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.__experimentalToggleGroupControlOption, {
+    variant: "lateralCover",
+    label: "Illustration lat\xE9arale",
+    value: "hasLateralCover"
+  }))), hasStepPictures && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.RadioControl
   // label={__("Tailles des images", "textdomain")}
   , {
     help: "Taille des images",
@@ -104,12 +398,42 @@ function Edit({
       value: "xl"
     }],
     onChange: handleStepPictureFormatChange
-  })))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
+  })), lateralCoverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: lateralCoverUrl,
+    alt: lateralCoverAlt
+  }), hasLateralCover && (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_4__.MediaReplaceFlow, {
+    mediaId: lateralCoverId,
+    mediaUrl: lateralCoverUrl,
+    allowedTypes: ["image"],
+    accept: "image/*",
+    onSelect: setLateralCoverAttributes,
+    name: !lateralCoverUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter", "homegrade-blocks__texte-backoffice") : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Remplacer", "homegrade-blocks__texte-backoffice")
+  }), lateralCoverUrl && (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_6__.Button, {
+    className: "custom-flow-button",
+    variant: "primary",
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__["default"],
+    label: "Supprimer",
+    onClick: removeLateralCoverAttributes
+  }))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
     ...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
-      className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""}`
+      className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""}
+					${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
+  }, hasLateralCover && !lateralCoverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.MediaPlaceholder, {
-    allowedBlocks: ["homegrade-content-blocks/timeline-step"]
+    accept: "image/*",
+    allowedTypes: ["image"],
+    onSelect: setLateralCoverAttributes,
+    multiple: false,
+    handleUpload: true
+  }), hasLateralCover && lateralCoverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    className: "homegrade-blocks-timeline__lateral-cover",
+    src: lateralCoverUrl,
+    alt: lateralCoverAlt
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
+    allowedBlocks: ["homegrade-content-blocks/timeline-step"],
+    template: TEMPLATE
   })));
 }
 
@@ -192,13 +516,23 @@ function save({
   let {
     hasStepPictures,
     stepPictureFormat,
-    hasStepIcons
+    hasStepIcons,
+    hasLateralCover,
+    lateralCoverUrl,
+    lateralCoverAlt
   } = attributes;
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
     ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
-      className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""}`
+      className: `homegrade-blocks-timeline ${hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""} ${hasStepPictures ? "homegrade-blocks-timeline--has-step-pictures" : "homegrade-blocks-timeline--has-no-step-pictures"}
+				${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`
     })
-  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null));
+  }, hasLateralCover && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    className: "homegrade-blocks-timeline__lateral-cover",
+    src: lateralCoverUrl,
+    alt: lateralCoverAlt
+  }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
+    className: "homegrade-blocks-timeline__innercontent"
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)));
 }
 
 /***/ }),
@@ -231,7 +565,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 function Edit({
   attributes,
   setAttributes,
@@ -262,7 +595,6 @@ function Edit({
     });
   }
   function setImageAttributes(media) {
-    console.log(media);
     if (!media || !media.url) {
       setAttributes({
         timelineStepImageUrl: null,
@@ -685,7 +1017,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","version":"0.1.0","title":"Timeline","category":"homegrade-blocks","description":"Pour la création de timeline","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasStepPictures":{"type":"boolean","default":true},"hasStepIcons":{"type":"boolean","default":true},"stepPictureFormat":{"type":"string","default":"md"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/timeline","version":"0.1.0","title":"Timeline","category":"homegrade-blocks","description":"Pour la création de timeline","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"hasLateralCover":{"type":"boolean","default":false},"lateralCoverId":{"type":"number"},"lateralCoverUrl":{"type":"string"},"lateralCoverAlt":{"type":"string"},"hasStepPictures":{"type":"boolean","default":true},"hasStepIcons":{"type":"boolean","default":true},"stepPictureFormat":{"type":"string","default":"md"}}}');
 
 /***/ }),
 

blocks/timeline/build/timeline-step/index.asset.php

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

blocks/timeline/build/timeline-step/index.js

@@ -30,7 +30,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 function Edit({
   attributes,
   setAttributes,
@@ -61,7 +60,6 @@ function Edit({
     });
   }
   function setImageAttributes(media) {
-    console.log(media);
     if (!media || !media.url) {
       setAttributes({
         timelineStepImageUrl: null,

blocks/timeline/build/timeline-step/style-index.css

@@ -0,0 +1,4 @@
+/*!*****************************************************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/timeline-step/style.scss ***!
+  \*****************************************************************************************************************************************************************************************************************************************************/
+

blocks/timeline/src/block.json

@@ -14,6 +14,19 @@
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
 	"attributes": {
+		"hasLateralCover": {
+			"type": "boolean",
+			"default": false
+		},
+		"lateralCoverId": {
+			"type": "number"
+		},
+		"lateralCoverUrl": {
+			"type": "string"
+		},
+		"lateralCoverAlt": {
+			"type": "string"
+		},
 		"hasStepPictures": {
 			"type": "boolean",
 			"default": true

blocks/timeline/src/edit.js

@@ -2,21 +2,41 @@ import { __ } from "@wordpress/i18n";
 import "./editor.scss";
 import "./timeline-step";
 
-import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
+import {
-import { InspectorControls } from "@wordpress/block-editor";
+	useBlockProps,
+	RichText,
+	InnerBlocks,
+	InspectorControls,
+	MediaReplaceFlow,
+	MediaPlaceholder,
+} from "@wordpress/block-editor";
+
 import { useEffect } from "@wordpress/element";
 import { useSelect, dispatch } from "@wordpress/data";
-
 import {
 	PanelBody,
 	PanelRow,
+	Button,
 	RadioControl,
 	FormToggle,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from "@wordpress/components";
 import { trash } from "@wordpress/icons";
-
+import ImageMediaPlaceholder from "../../_components/ImageMediaPlaceholder";
+import Image from "../../_components/Image";
+import ImagePanelBody from "../../_components/ImagePanelBody";
+import ImagePanelBodyContent from "../../_components/ImagePanelBodyContent";
 export default function Edit({ attributes, setAttributes, clientId }) {
-	let { hasStepPictures, stepPictureFormat, hasStepIcons } = attributes;
+	let {
+		hasStepPictures,
+		stepPictureFormat,
+		hasStepIcons,
+		hasLateralCover,
+		lateralCoverId,
+		lateralCoverAlt,
+		lateralCoverUrl,
+	} = attributes;
 
 	let children = useSelect(
 		(select) =>
@@ -32,6 +52,30 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 	function onChangehasStepIcons() {
 		setAttributes({ hasStepIcons: !hasStepIcons });
 	}
+	function onChangeImagesDispositionType(disposition) {
+		console.log(disposition);
+		if (disposition === "hasStepPictures") {
+			setAttributes({ hasStepPictures: true, hasLateralCover: false });
+			removeLateralCoverAttributes();
+		}
+		if (disposition === "hasLateralCover") {
+			setAttributes({ hasStepPictures: false, hasLateralCover: true });
+		}
+	}
+	function setLateralCoverAttributes(cover) {
+		setAttributes({
+			lateralCoverId: cover.id,
+			lateralCoverAlt: cover.alt,
+			lateralCoverUrl: cover.url,
+		});
+	}
+	function removeLateralCoverAttributes() {
+		setAttributes({
+			lateralCoverId: null,
+			lateralCoverAlt: null,
+			lateralCoverUrl: null,
+		});
+	}
 
 	function updateChildrensProps(children) {
 		children.forEach((child) => {
@@ -48,6 +92,23 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 		}
 	}, [children, hasStepPictures, hasStepIcons]);
 
+	const TEMPLATE = [
+		[
+			"homegrade-content-blocks/timeline-step",
+			{
+				timelineStepTitle: "Etape 1",
+				timelineStepSubtitle: "sous titre",
+			},
+		],
+		[
+			"homegrade-content-blocks/timeline-step",
+			{
+				timelineStepTitle: "Etape 2",
+				timelineStepSubtitle: "sous titre",
+			},
+		],
+	];
+
 	return (
 		<>
 			<InspectorControls>
@@ -56,7 +117,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 						"Variantes de Timeline",
 						"homegrade-blocks__texte-backoffice"
 					)}
-					className={"homegrade-blocks-timeline__panel-body"}
+					className={
+						"homegrade-blocks-timeline__panel-body homegrade-blocks-components-image__panel-body"
+					}
 				>
 					<PanelRow>
 						<label htmlFor="">Icones</label>
@@ -66,13 +129,26 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 							onChange={onChangehasStepIcons}
 						/>
 					</PanelRow>
+
 					<PanelRow>
-						<label htmlFor="">Images</label>
+						<ToggleGroupControl
-						<FormToggle
+							label="Type d'image"
-							label={__("Icones", "homegrade-blocks__texte-backoffice")}
+							className="homegrade-blocks-components-image__ratio-selector"
-							checked={hasStepPictures}
+							isBlock
-							onChange={onChangehasStepPictures}
+							onChange={onChangeImagesDispositionType}
-						/>
+							value={hasStepPictures ? "hasStepPictures" : "hasLateralCover"}
+						>
+							<ToggleGroupControlOption
+								variant="hasStepPictures"
+								label="Images par ligne"
+								value="hasStepPictures"
+							/>
+							<ToggleGroupControlOption
+								variant="lateralCover"
+								label="Illustration latéarale"
+								value="hasLateralCover"
+							/>
+						</ToggleGroupControl>
 					</PanelRow>
 					{hasStepPictures && (
 						<PanelRow>
@@ -89,17 +165,66 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 							/>
 						</PanelRow>
 					)}
+					{lateralCoverUrl && (
+						<img src={lateralCoverUrl} alt={lateralCoverAlt} />
+					)}
+
+					{hasLateralCover && (
+						<div className="media-replace-container">
+							<MediaReplaceFlow
+								mediaId={lateralCoverId}
+								mediaUrl={lateralCoverUrl}
+								allowedTypes={["image"]}
+								accept="image/*"
+								onSelect={setLateralCoverAttributes}
+								name={
+									!lateralCoverUrl
+										? __("Ajouter", "homegrade-blocks__texte-backoffice")
+										: __("Remplacer", "homegrade-blocks__texte-backoffice")
+								}
+							/>
+							{lateralCoverUrl && (
+								<>
+									<Button
+										className="custom-flow-button"
+										variant="primary"
+										icon={trash}
+										label="Supprimer"
+										onClick={removeLateralCoverAttributes}
+									/>
+								</>
+							)}
+						</div>
+					)}
 				</PanelBody>
 			</InspectorControls>
 			<section
 				{...useBlockProps({
 					className: `homegrade-blocks-timeline ${
 						hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
-					}`,
+					}
+					${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`,
 				})}
 			>
+				{hasLateralCover && !lateralCoverUrl && (
+					<MediaPlaceholder
+						accept="image/*"
+						allowedTypes={["image"]}
+						onSelect={setLateralCoverAttributes}
+						multiple={false}
+						handleUpload={true}
+					/>
+				)}
+				{hasLateralCover && lateralCoverUrl && (
+					<img
+						className="homegrade-blocks-timeline__lateral-cover"
+						src={lateralCoverUrl}
+						alt={lateralCoverAlt}
+					/>
+				)}
 				<InnerBlocks
 					allowedBlocks={["homegrade-content-blocks/timeline-step"]}
+					template={TEMPLATE}
 				/>
 			</section>
 		</>

blocks/timeline/src/editor.scss

@@ -4,6 +4,9 @@
 			z-index: 0 !important;
 		}
 	}
+	.components-placeholder {
+		max-height: 300px;
+	}
 
 	.homegrade-blocks-timeline-step {
 		&__icon {
@@ -21,9 +24,9 @@
 }
 
 .homegrade-blocks-timeline__panel-body {
-	// label {
+	> img {
-	// 	text-transform: uppercase;
+		max-height: 150px;
-	// }
+	}
 }
 .homegrade-blocks-timeline-step__panel-body {
 	.components-tip {

blocks/timeline/src/save.js

@@ -1,17 +1,32 @@
 import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
 
 export default function save({ attributes }) {
-	let { hasStepPictures, stepPictureFormat, hasStepIcons } = attributes;
+	let {
+		hasStepPictures,
+		stepPictureFormat,
+		hasStepIcons,
+		hasLateralCover,
+		lateralCoverUrl,
+		lateralCoverAlt,
+	} = attributes;
 
 	return (
 		<section
 			{...useBlockProps.save({
 				className: `homegrade-blocks-timeline ${
 					hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
-				}`,
+				} ${
+					hasStepPictures
+						? "homegrade-blocks-timeline--has-step-pictures"
+						: "homegrade-blocks-timeline--has-no-step-pictures"
+				}
+				${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`,
 			})}
 		>
-			<InnerBlocks.Content />
+			{hasLateralCover && <img className="homegrade-blocks-timeline__lateral-cover" src={lateralCoverUrl} alt={lateralCoverAlt} />}
+			<div className="homegrade-blocks-timeline__innercontent">
+				<InnerBlocks.Content />
+			</div>
 		</section>
 	);
 }