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

extending to handle custom lateral cover

Browse Source
This commit is contained in:
Antoine M 2023-11-06 13:36:35 +01:00
parent 2b6cff645c
commit 1ada75442f
14 changed files with 555 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
blocks/timeline/build/block.json
View File

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

2
blocks/timeline/build/index.asset.php
View File

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

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

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

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

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

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

@ -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", {
htmlFor: ""
}, "Images"), (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: hasStepPictures,
onChange: onChangehasStepPictures
})), 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__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.__experimentalToggleGroupControl, {
label: "Type d'image",
className: "homegrade-blocks-components-image__ratio-selector",
isBlock: true,
onChange: onChangeImagesDispositionType,
value: hasStepPictures ? "hasStepPictures" : "hasLateralCover"
}, (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, {
allowedBlocks: ["homegrade-content-blocks/timeline-step"]
}, hasLateralCover && !lateralCoverUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.MediaPlaceholder, {
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"}}}');
/***/ }),

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

File diff suppressed because one or more lines are too long

2
blocks/timeline/build/timeline-step/index.asset.php
View File

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

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

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

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

File diff suppressed because one or more lines are too long

4
blocks/timeline/build/timeline-step/style-index.css Normal file
View File

@ -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 ***!
\*****************************************************************************************************************************************************************************************************************************************************/

13
blocks/timeline/src/block.json
View File

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

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

@ -2,21 +2,41 @@ import { __ } from "@wordpress/i18n";
import "./editor.scss";
import "./timeline-step";
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import { InspectorControls } from "@wordpress/block-editor";
import {
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>
<FormToggle
label={__("Icones", "homegrade-blocks__texte-backoffice")}
checked={hasStepPictures}
onChange={onChangehasStepPictures}
<ToggleGroupControl
label="Type d'image"
className="homegrade-blocks-components-image__ratio-selector"
isBlock
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>
</>

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

@ -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 {
// text-transform: uppercase;
// }
> img {
max-height: 150px;
}
}
.homegrade-blocks-timeline-step__panel-body {
.components-tip {

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

@ -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" : ""}`,
})}
>
{hasLateralCover && <img className="homegrade-blocks-timeline__lateral-cover" src={lateralCoverUrl} alt={lateralCoverAlt} />}
<div className="homegrade-blocks-timeline__innercontent">
<InnerBlocks.Content />
</div>
</section>
);
}