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

extending block to handle custom title and custom lateral cover

Browse Source
This commit is contained in:
Antoine M 2023-11-06 13:38:04 +01:00
parent 1ada75442f
commit 262da18b27
8 changed files with 526 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
blocks/content-page-header/build/block.json
View File

@ -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"
}
}
}

2
blocks/content-page-header/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'), 'version' => '22ddb6977be933e11cd9');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'b7d69e8f13c59d8be58e');

363
blocks/content-page-header/build/index.js
View File

@ -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);
return cover;
let Image = select("core").getMedia(currentPost.acf.page_icon);
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"}}}');
/***/ })

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

File diff suppressed because one or more lines are too long

13
blocks/content-page-header/build/render.php
View File

@ -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>

17
blocks/content-page-header/src/block.json
View File

@ -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"
}
}
}

111
blocks/content-page-header/src/edit.js
View File

@ -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);
return cover;
let Image = select("core").getMedia(currentPost.acf.page_icon);
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>
</>
);

13
blocks/content-page-header/src/render.php
View File

@ -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>