extending block to handle custom title and custom lateral cover

blocks/content-page-header/build/block.json

@@ -35,6 +35,23 @@
     },
     "cta": {
       "type": "object"
+    },
+    "hasCustomImage": {
+      "type": "boolean",
+      "default": false
+    },
+    "imageUrl": {
+      "type": "string"
+    },
+    "imageAlt": {
+      "type": "string"
+    },
+    "imageId": {
+      "type": "number"
+    },
+    "imageProportion": {
+      "type": "string",
+      "default": "original"
     }
   }
 }

blocks/content-page-header/build/index.asset.php

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

blocks/content-page-header/build/index.js

@@ -2,6 +2,250 @@
 /******/ 	"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() {
+    console.log("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
+    });
+  }
+  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, 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 ***!
@@ -23,6 +267,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
 /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/trash.js");
+/* harmony import */ var _components_ImageMediaPlaceholder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../_components/ImageMediaPlaceholder */ "../_components/ImageMediaPlaceholder.jsx");
+/* harmony import */ var _components_Image__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../_components/Image */ "../_components/Image.jsx");
+/* harmony import */ var _components_ImagePanelBody__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../_components/ImagePanelBody */ "../_components/ImagePanelBody.jsx");
+/* harmony import */ var _components_ImagePanelBodyContent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../_components/ImagePanelBodyContent */ "../_components/ImagePanelBodyContent.jsx");
+
+
+
+
 
 
 
@@ -40,7 +293,12 @@ function Edit({
     pageHeaderTitle,
     pageHeaderDescription,
     hasCta,
-    cta
+    cta,
+    hasCustomImage,
+    imageId,
+    imageAlt,
+    imageUrl,
+    imageProportion
   } = attributes;
   const pageTitle = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
     const {
@@ -51,8 +309,8 @@ function Edit({
   const pageIcon = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
     const currentPost = select("core/editor").getCurrentPost();
     if (currentPost && currentPost.acf && currentPost.acf.page_icon) {
-      let cover = select("core").getMedia(currentPost.acf.page_icon);
+      let Image = select("core").getMedia(currentPost.acf.page_icon);
-      return cover;
+      return Image;
     }
   });
   function onChangeBlockCustomTitle(blockCustomTitle) {
@@ -75,6 +333,30 @@ function Edit({
       });
     }
   }
+  function onChangeHasCustomImage(newHasAutoImage) {
+    setAttributes({
+      hasCustomImage: !hasCustomImage
+    });
+    if (!newHasAutoImage) {
+      console.log("newHasAutoImage", newHasAutoImage);
+      // setAttributes({ blockCustomTitle: undefined });
+    }
+  }
+
+  function setImageAttributes(image) {
+    setAttributes({
+      imageId: image.id,
+      imageAlt: image.alt,
+      imageUrl: image.url
+    });
+  }
+  function removeImageAttributes() {
+    setAttributes({
+      imageId: null,
+      imageAlt: null,
+      imageUrl: null
+    });
+  }
   function onChangeHasCta(newHasCta) {
     setAttributes({
       hasCta: !hasCta
@@ -109,7 +391,6 @@ function Edit({
       }
     });
   }
-  console.log(blockCustomTitle);
   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_5__.PanelBody, {
     className: "homegrade-blocks-content-page-header__panel-cta",
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Titre du bloc", "homegrade-blocks__texte-backoffice")
@@ -118,6 +399,31 @@ function Edit({
     checked: !hasCustomTitle,
     onChange: onChangeHasCustomTitle
   }), !hasCustomTitle && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.Tip, null, "Le titre est automatiquement g\xE9n\xE9r\xE9 \xE0 partir du titre de la page")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
+    className: "homegrade-blocks-components-image__panel-body",
+    title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Image d'accompagnement", "homegrade-blocks__texte-backoffice")
+  }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
+    label: "Couverture automatique",
+    checked: !hasCustomImage,
+    onChange: onChangeHasCustomImage
+  }), !hasCustomImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.Tip, null, "La couverture est automatiquement g\xE9n\xE9r\xE9 \xE0 partir de l'icone de la page"), hasCustomImage && (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_4__.MediaReplaceFlow, {
+    mediaId: imageId,
+    mediaUrl: imageUrl,
+    allowedTypes: ["image"],
+    accept: "image/*",
+    onSelect: setImageAttributes,
+    name: !imageUrl ? (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter votre image manuellement", "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_5__.Button, {
+    className: "custom-flow-button",
+    variant: "primary",
+    icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__["default"],
+    label: "Supprimer",
+    onClick: removeImageAttributes
+  }))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
     className: "homegrade-blocks-content-page-header__panel-cta",
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Call to action", "homegrade-blocks__texte-backoffice")
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
@@ -158,10 +464,14 @@ function Edit({
     // style={{ textAlign: props.attributes.alignment }}
   }), cta && cta.title && cta.url && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", {
     href: cta.url
-  }, cta.title)), pageIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+  }, cta.title)), pageIcon && !hasCustomImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     className: "block-content-page-header__page-icon",
     src: pageIcon.source_url,
     alt: ""
+  }), hasCustomImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+    src: imageUrl,
+    alt: imageAlt,
+    className: "block-content-page-header__page-icon"
   })));
 }
 
@@ -229,6 +539,37 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "../../node_modules/@wordpress/icons/build-module/library/trash.js":
+/*!*************************************************************************!*\
+  !*** ../../node_modules/@wordpress/icons/build-module/library/trash.js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
+/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
+
+
+/**
+ * WordPress dependencies
+ */
+
+const trash = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
+  d: "M20 5h-5.7c0-1.3-1-2.3-2.3-2.3S9.7 3.7 9.7 5H4v2h1.5v.3l1.7 11.1c.1 1 1 1.7 2 1.7h5.7c1 0 1.8-.7 2-1.7l1.7-11.1V7H20V5zm-3.2 2l-1.7 11.1c0 .1-.1.2-.3.2H9.1c-.1 0-.3-.1-.3-.2L7.2 7h9.6z"
+}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (trash);
+//# sourceMappingURL=trash.js.map
+
 /***/ }),
 
 /***/ "@wordpress/block-editor":
@@ -291,13 +632,23 @@ module.exports = window["wp"]["i18n"];
 
 /***/ }),
 
+/***/ "@wordpress/primitives":
+/*!************************************!*\
+  !*** external ["wp","primitives"] ***!
+  \************************************/
+/***/ ((module) => {
+
+module.exports = window["wp"]["primitives"];
+
+/***/ }),
+
 /***/ "./src/block.json":
 /*!************************!*\
   !*** ./src/block.json ***!
   \************************/
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"pageHeaderDescription":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"}}}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-page-header","version":"0.1.0","title":"Content page header","category":"homegrade-blocks","icon":"smiley","description":"Bloc bannière/header de contenu de premier niveau pour les pages de contenu","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php","attributes":{"hasCustomTitle":{"type":"boolean","default":false},"blockCustomTitle":{"type":"string"},"pageHeaderTitle":{"type":"string"},"pageHeaderDescription":{"type":"string"},"hasCta":{"type":"boolean","default":false},"cta":{"type":"object"},"hasCustomImage":{"type":"boolean","default":false},"imageUrl":{"type":"string"},"imageAlt":{"type":"string"},"imageId":{"type":"number"},"imageProportion":{"type":"string","default":"original"}}}');
 
 /***/ })
 

blocks/content-page-header/build/render.php

@@ -5,6 +5,11 @@ $pageHeaderDescription = $attributes['pageHeaderDescription'] ?? null;
 $cta = $attributes['cta'] ?? null;
 $pageIcon = get_field('page_icon');
 
+$hasCustomImage = $attributes['hasCustomImage'] ?? null;
+$customImageUrl = $attributes['imageUrl'] ?? null;
+$customImageAlt = $attributes['imageAlt'] ?? null;
+
+$customTitle = $attributes['blockCustomTitle'] ?? null;
 
 ?>
 
@@ -14,6 +19,9 @@ $pageIcon = get_field('page_icon');
 		<?php if (!$attributes['hasCustomTitle']) : ?>
 			<h1><?php echo get_the_title() ?></h1>
 		<?php endif; ?>
+		<?php if ($attributes['hasCustomTitle'] && $customTitle) : ?>
+			<h1><?php echo $customTitle ?></h1>
+		<?php endif; ?>
 		<h2><?php echo $pageHeaderTitle ?> </h2>
 		<p><?php echo $pageHeaderDescription  ?> </p>
 		<?php if ($cta && $cta['title'] && $cta['url']) : ?>
@@ -21,6 +29,11 @@ $pageIcon = get_field('page_icon');
 		<?php endif; ?>
 	</div>
 
+	<?php if ($pageIcon && !$hasCustomImage) : ?>
 		<img class="block-content-page-header__page-icon" src="<?php echo $pageIcon['url'] ?>" alt="">
+	<?php endif; ?>
+	<?php if ($hasCustomImage && $customImageUrl) : ?>
+		<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
+	<?php endif; ?>
 
 </section>

blocks/content-page-header/src/block.json

@@ -35,6 +35,23 @@
 		},
 		"cta": {
 			"type": "object"
+		},
+		"hasCustomImage": {
+			"type": "boolean",
+			"default": false
+		},
+		"imageUrl": {
+			"type": "string"
+		},
+		"imageAlt": {
+			"type": "string"
+		},
+		"imageId": {
+			"type": "number"
+		},
+		"imageProportion": {
+			"type": "string",
+			"default": "original"
 		}
 	}
 }

blocks/content-page-header/src/edit.js

@@ -5,11 +5,25 @@ import {
 	useBlockProps,
 	RichText,
 	BlockControls,
+	MediaReplaceFlow,
 	InspectorControls,
 	__experimentalLinkControl as LinkControl,
 } from "@wordpress/block-editor";
-import { PanelBody, TextControl, ToggleControl } from "@wordpress/components";
+
-import { Tip } from "@wordpress/components";
+import {
+	PanelBody,
+	TextControl,
+	ToggleControl,
+	Button,
+	Tip,
+} 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 }) {
 	const {
 		blockCustomTitle,
@@ -18,6 +32,11 @@ export default function Edit({ attributes, setAttributes }) {
 		pageHeaderDescription,
 		hasCta,
 		cta,
+		hasCustomImage,
+		imageId,
+		imageAlt,
+		imageUrl,
+		imageProportion,
 	} = attributes;
 
 	const pageTitle = useSelect((select) => {
@@ -28,8 +47,8 @@ export default function Edit({ attributes, setAttributes }) {
 	const pageIcon = useSelect((select) => {
 		const currentPost = select("core/editor").getCurrentPost();
 		if (currentPost && currentPost.acf && currentPost.acf.page_icon) {
-			let cover = select("core").getMedia(currentPost.acf.page_icon);
+			let Image = select("core").getMedia(currentPost.acf.page_icon);
-			return cover;
+			return Image;
 		}
 	});
 
@@ -45,6 +64,27 @@ export default function Edit({ attributes, setAttributes }) {
 			setAttributes({ blockCustomTitle: undefined });
 		}
 	}
+	function onChangeHasCustomImage(newHasAutoImage) {
+		setAttributes({ hasCustomImage: !hasCustomImage });
+		if (!newHasAutoImage) {
+			console.log("newHasAutoImage", newHasAutoImage);
+			// setAttributes({ blockCustomTitle: undefined });
+		}
+	}
+	function setImageAttributes(image) {
+		setAttributes({
+			imageId: image.id,
+			imageAlt: image.alt,
+			imageUrl: image.url,
+		});
+	}
+	function removeImageAttributes() {
+		setAttributes({
+			imageId: null,
+			imageAlt: null,
+			imageUrl: null,
+		});
+	}
 	function onChangeHasCta(newHasCta) {
 		setAttributes({ hasCta: !hasCta });
 		if (!newHasCta) {
@@ -74,7 +114,6 @@ export default function Edit({ attributes, setAttributes }) {
 		});
 	}
 
-	console.log(blockCustomTitle);
 	return (
 		<>
 			<InspectorControls>
@@ -93,6 +132,59 @@ export default function Edit({ attributes, setAttributes }) {
 						</Tip>
 					)}
 				</PanelBody>
+				<PanelBody
+					className="homegrade-blocks-components-image__panel-body"
+					title={__(
+						"Image d'accompagnement",
+						"homegrade-blocks__texte-backoffice"
+					)}
+				>
+					<ToggleControl
+						label="Couverture automatique"
+						checked={!hasCustomImage}
+						onChange={onChangeHasCustomImage}
+					/>
+					{!hasCustomImage && (
+						<Tip>
+							La couverture est automatiquement généré à partir de l'icone de la
+							page
+						</Tip>
+					)}
+					{hasCustomImage && (
+						<>
+							{imageUrl && <img src={imageUrl} alt={imageAlt} />}
+							<div className="media-replace-container">
+								<MediaReplaceFlow
+									mediaId={imageId}
+									mediaUrl={imageUrl}
+									allowedTypes={["image"]}
+									accept="image/*"
+									onSelect={setImageAttributes}
+									name={
+										!imageUrl
+											? __(
+													"Ajouter votre image manuellement",
+													"homegrade-blocks__texte-backoffice"
+											  )
+											: __("Remplacer", "homegrade-blocks__texte-backoffice")
+									}
+								/>
+								{imageUrl && (
+									<>
+										<Button
+											className="custom-flow-button"
+											variant="primary"
+											icon={trash}
+											label="Supprimer"
+											onClick={removeImageAttributes}
+										/>
+									</>
+								)}
+							</div>
+						</>
+					)}
+				</PanelBody>
+
 				<PanelBody
 					className="homegrade-blocks-content-page-header__panel-cta"
 					title={__("Call to action", "homegrade-blocks__texte-backoffice")}
@@ -161,13 +253,20 @@ export default function Edit({ attributes, setAttributes }) {
 					/>
 					{cta && cta.title && cta.url && <a href={cta.url}>{cta.title}</a>}
 				</div>
-				{pageIcon && (
+				{pageIcon && !hasCustomImage && (
 					<img
 						className="block-content-page-header__page-icon"
 						src={pageIcon.source_url}
 						alt=""
 					/>
 				)}
+				{hasCustomImage && (
+					<img
+						src={imageUrl}
+						alt={imageAlt}
+						className="block-content-page-header__page-icon"
+					/>
+				)}
 			</section>
 		</>
 	);

blocks/content-page-header/src/render.php

@@ -5,6 +5,11 @@ $pageHeaderDescription = $attributes['pageHeaderDescription'] ?? null;
 $cta = $attributes['cta'] ?? null;
 $pageIcon = get_field('page_icon');
 
+$hasCustomImage = $attributes['hasCustomImage'] ?? null;
+$customImageUrl = $attributes['imageUrl'] ?? null;
+$customImageAlt = $attributes['imageAlt'] ?? null;
+
+$customTitle = $attributes['blockCustomTitle'] ?? null;
 
 ?>
 
@@ -14,6 +19,9 @@ $pageIcon = get_field('page_icon');
 		<?php if (!$attributes['hasCustomTitle']) : ?>
 			<h1><?php echo get_the_title() ?></h1>
 		<?php endif; ?>
+		<?php if ($attributes['hasCustomTitle'] && $customTitle) : ?>
+			<h1><?php echo $customTitle ?></h1>
+		<?php endif; ?>
 		<h2><?php echo $pageHeaderTitle ?> </h2>
 		<p><?php echo $pageHeaderDescription  ?> </p>
 		<?php if ($cta && $cta['title'] && $cta['url']) : ?>
@@ -21,6 +29,11 @@ $pageIcon = get_field('page_icon');
 		<?php endif; ?>
 	</div>
 
+	<?php if ($pageIcon && !$hasCustomImage) : ?>
 		<img class="block-content-page-header__page-icon" src="<?php echo $pageIcon['url'] ?>" alt="">
+	<?php endif; ?>
+	<?php if ($hasCustomImage && $customImageUrl) : ?>
+		<img class="block-content-page-header__page-icon" src="<?php echo $customImageUrl ?>" alt="<?php echo $customImageAlt ?>">
+	<?php endif; ?>
 
 </section>