refining staff-list to handle grid customisation

This commit is contained in:
Antoine M 2024-10-01 15:28:39 +02:00
parent d21b5835d2
commit 93a1a29b93
11 changed files with 189 additions and 92 deletions

View File

@ -20,6 +20,10 @@
}, },
"blockSubtitle": { "blockSubtitle": {
"type": "string" "type": "string"
},
"columnsAmount": {
"type": "number",
"default": 4
} }
} }
} }

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '6b95141c53ebd0aeb0ff'); <?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '9622112e518bbd30336b');

View File

@ -1,12 +1,20 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\ /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***! !*** css ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.35_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.71.1_webpack@5.90.3/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/ \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list { .homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list {
display: unset; display: unset;
} }
.homegrade-blocks-staff-list .block-editor-block-list__layout { .homegrade-blocks-staff-list .block-editor-block-list__layout {
display: grid; display: grid;
}
.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list--grid-2 .block-editor-block-list__layout {
grid-template-columns: repeat(2, 1fr);
}
.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list--grid-3 .block-editor-block-list__layout {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list--grid-4 .block-editor-block-list__layout {
grid-template-columns: repeat(4, 1fr);
}
/*# sourceMappingURL=index.css.map*/ /*# sourceMappingURL=index.css.map*/

View File

@ -1 +1 @@
{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;AAEC;EACC;EACA;AAAF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-staff-list {\r\n\t.homegrade-blocks-staff-list__staff-list {\r\n\t\tdisplay: unset;\r\n\t}\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-columns: repeat(3, 1fr);\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""} {"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;AAGC;EACC;AADF;AAIE;EACC;AAFH;AAME;EACC;AAJH;AAQE;EACC;AANH,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".homegrade-blocks-staff-list {\r\n\t.homegrade-blocks-staff-list__staff-list {\r\n\t\tdisplay: unset;\r\n\t}\r\n\r\n\t.block-editor-block-list__layout {\r\n\t\tdisplay: grid;\r\n\t}\r\n\t.homegrade-blocks-staff-list__staff-list--grid-2 {\r\n\t\t.block-editor-block-list__layout {\r\n\t\t\tgrid-template-columns: repeat(2, 1fr);\r\n\t\t}\r\n\t}\r\n\t.homegrade-blocks-staff-list__staff-list--grid-3 {\r\n\t\t.block-editor-block-list__layout {\r\n\t\t\tgrid-template-columns: repeat(3, 1fr);\r\n\t\t}\r\n\t}\r\n\t.homegrade-blocks-staff-list__staff-list--grid-4 {\r\n\t\t.block-editor-block-list__layout {\r\n\t\t\tgrid-template-columns: repeat(4, 1fr);\r\n\t\t}\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

View File

@ -12,15 +12,17 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit) /* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__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__ = __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_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss"); /* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* 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_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__);
@ -28,7 +30,6 @@ __webpack_require__.r(__webpack_exports__);
function Edit({ function Edit({
attributes, attributes,
setAttributes, setAttributes,
@ -36,7 +37,9 @@ function Edit({
}) { }) {
let { let {
blockTitle, blockTitle,
blockSubtitle blockSubtitle,
hasSubtitle,
columnsAmount
} = attributes; } = attributes;
function onChangeBlockTitle(blockTitle) { function onChangeBlockTitle(blockTitle) {
setAttributes({ setAttributes({
@ -48,30 +51,52 @@ function Edit({
blockSubtitle blockSubtitle
}); });
} }
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.PanelBody, { function onChangeColumnsAmount(columnsAmount) {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Variantes de Timeline", "homegrade-blocks__texte-backoffice"), setAttributes({
columnsAmount
});
}
function onChangeHasSubtitle() {
setAttributes({
hasSubtitle: !hasSubtitle
});
}
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Paramètres de la liste de membres", "homegrade-blocks"),
className: "homegrade-blocks-timeline__panel-body" className: "homegrade-blocks-timeline__panel-body"
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.RangeControl, {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({ __nextHasNoMarginBottom: true,
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Nombre de colonnes", "homegrade-blocks"),
initialPosition: 4,
max: 4,
min: 2,
value: columnsAmount,
onChange: onChangeColumnsAmount
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToggleControl, {
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Afficher un sous-titre", "homegrade-blocks"),
checked: hasSubtitle,
onChange: onChangeHasSubtitle
}))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
className: `homegrade-blocks-staff-list` className: `homegrade-blocks-staff-list`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "section_titling section_titling--left" className: `section_titling section_titling--left section-titling--${hasSubtitle ? "has-subtitle" : "has-no-subtitle"}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
value: blockTitle, value: blockTitle,
tagName: "h3", tagName: "h3",
className: "section_titling__title", className: "section_titling__title",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Titre de la liste de membres", "homegrade"), placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Titre de la liste de membres", "homegrade"),
onChange: onChangeBlockTitle onChange: onChangeBlockTitle
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, { }), hasSubtitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
value: blockSubtitle, value: blockSubtitle,
tagName: "h4", tagName: "h4",
className: "section_titling__subtitle", className: "section_titling__subtitle",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Sous-titre de la liste de membres", "homegrade"), placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Sous-titre de la liste de membres", "homegrade"),
onChange: onChangeBlockSubtitle onChange: onChangeBlockSubtitle
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", { })), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", {
className: "homegrade-blocks-staff-list__staff-list" className: `homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
allowedBlocks: ["homegrade-content-blocks/staff-member"] allowedBlocks: ["homegrade-content-blocks/staff-member"]
})))); }))));
} }
@ -85,8 +110,8 @@ function Edit({
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss"); /* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ "./src/style.scss");
@ -101,22 +126,22 @@ __webpack_require__.r(__webpack_exports__);
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, { (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: { icon: {
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", { src: (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
version: "1.1", version: "1.1",
x: "0px", x: "0px",
y: "0px", y: "0px",
viewBox: "0 0 128 160" viewBox: "0 0 128 160"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("g", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "67", cx: "67",
cy: "11", cy: "11",
r: "10" r: "10"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "37", cx: "37",
cy: "21", cy: "21",
r: "10" r: "10"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", {
d: "M17,51v36h10v40h20h40h20V87h10V51c0-5.5-4.5-10-10-10L97,51v26H87v40H77V77h10V41c0-5.5-4.5-10-10-10L67,41L57,31 c-5.5,0-10,4.5-10,10v36h10v40H47V77H37V51L27,41C21.5,41,17,45.5,17,51z" d: "M17,51v36h10v40h20h40h20V87h10V51c0-5.5-4.5-10-10-10L97,51v26H87v40H77V77h10V41c0-5.5-4.5-10-10-10L67,41L57,31 c-5.5,0-10,4.5-10,10v36h10v40H47V77H37V51L27,41C21.5,41,17,45.5,17,51z"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "97", cx: "97",
cy: "21", cy: "21",
r: "10" r: "10"
@ -139,8 +164,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save) /* harmony export */ "default": () => (/* binding */ save)
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__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__ = __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__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
@ -150,25 +175,27 @@ function save({
}) { }) {
let { let {
blockTitle, blockTitle,
blockSubtitle blockSubtitle,
hasSubtitle,
columnsAmount
} = attributes; } = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `homegrade-blocks-staff-list` className: `homegrade-blocks-staff-list`
}) })
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "section_titling section_titling--left" className: `section_titling section_titling--left section-titling--${hasSubtitle ? "has-subtitle" : "has-no-subtitle"}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: blockTitle, value: blockTitle,
tagName: "h3", tagName: "h3",
className: "section_titling__title" className: "section_titling__title"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, { }), hasSubtitle && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: blockSubtitle, value: blockSubtitle,
tagName: "h4", tagName: "h4",
className: "section_titling__subtitle" className: "section_titling__subtitle"
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", { })), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", {
className: "homegrade-blocks-staff-list__staff-list" className: `homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null))); }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)));
} }
/***/ }), /***/ }),
@ -195,6 +222,16 @@ __webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin // extracted by mini-css-extract-plugin
/***/ }),
/***/ "react":
/*!************************!*\
!*** external "React" ***!
\************************/
/***/ ((module) => {
module.exports = window["React"];
/***/ }), /***/ }),
/***/ "@wordpress/block-editor": /***/ "@wordpress/block-editor":
@ -227,16 +264,6 @@ module.exports = window["wp"]["components"];
/***/ }), /***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!
\*********************************/
/***/ ((module) => {
module.exports = window["wp"]["element"];
/***/ }),
/***/ "@wordpress/i18n": /***/ "@wordpress/i18n":
/*!******************************!*\ /*!******************************!*\
!*** external ["wp","i18n"] ***! !*** external ["wp","i18n"] ***!
@ -253,7 +280,7 @@ module.exports = window["wp"]["i18n"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/staff-list","version":"0.1.0","title":"Liste de membres","category":"homegrade-blocks","description":"Pour créer une liste de membres d\'équipe ou de comité","supports":{"html":false,"jsx":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"blockTitle":{"type":"string"},"blockSubtitle":{"type":"string"}}}'); module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/staff-list","version":"0.1.0","title":"Liste de membres","category":"homegrade-blocks","description":"Pour créer une liste de membres d\'équipe ou de comité","supports":{"html":false,"jsx":true},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"blockTitle":{"type":"string"},"blockSubtitle":{"type":"string"},"columnsAmount":{"type":"number","default":4}}}');
/***/ }) /***/ })
@ -299,9 +326,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ } /******/ }
/******/ var notFulfilled = Infinity; /******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) { /******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0]; /******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var fulfilled = true; /******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) { /******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) { /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
@ -387,9 +412,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ /******/
/******/ // install a JSONP callback for chunk loading /******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { /******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0]; /******/ var [chunkIds, moreModules, runtime] = data;
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ // add "moreModules" to the modules object, /******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback /******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0; /******/ var moduleId, chunkId, i = 0;
@ -412,7 +435,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/ return __webpack_require__.O(result); /******/ return __webpack_require__.O(result);
/******/ } /******/ }
/******/ /******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || []; /******/ var chunkLoadingGlobal = globalThis["webpackChunkmultiblocks"] = globalThis["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })(); /******/ })();

File diff suppressed because one or more lines are too long

View File

@ -1,4 +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/style.scss ***! !*** css ./node_modules/.pnpm/css-loader@6.10.0_webpack@5.90.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.35_webpack@5.90.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.71.1_webpack@5.90.3/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/ \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

View File

@ -20,6 +20,10 @@
}, },
"blockSubtitle": { "blockSubtitle": {
"type": "string" "type": "string"
},
"columnsAmount": {
"type": "number",
"default": 4
} }
} }
} }

View File

@ -1,13 +1,19 @@
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import "./editor.scss"; import "./editor.scss";
import { RangeControl } from "@wordpress/components";
// import "./staff-member"; // import "./staff-member";
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import {
import { InspectorControls } from "@wordpress/block-editor"; useBlockProps,
import { PanelBody } from "@wordpress/components"; RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody, ToggleControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, clientId }) { export default function Edit({ attributes, setAttributes, clientId }) {
let { blockTitle, blockSubtitle } = attributes; let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;
function onChangeBlockTitle(blockTitle) { function onChangeBlockTitle(blockTitle) {
setAttributes({ blockTitle }); setAttributes({ blockTitle });
@ -15,44 +21,73 @@ export default function Edit({ attributes, setAttributes, clientId }) {
function onChangeBlockSubtitle(blockSubtitle) { function onChangeBlockSubtitle(blockSubtitle) {
setAttributes({ blockSubtitle }); setAttributes({ blockSubtitle });
} }
function onChangeColumnsAmount(columnsAmount) {
setAttributes({ columnsAmount });
}
function onChangeHasSubtitle() {
setAttributes({ hasSubtitle: !hasSubtitle });
}
return ( return (
<> <>
<InspectorControls> <InspectorControls>
<PanelBody <PanelBody
title={__("Variantes de Timeline", "homegrade-blocks")} title={__("Paramètres de la liste de membres", "homegrade-blocks")}
className={"homegrade-blocks-timeline__panel-body"} className={"homegrade-blocks-timeline__panel-body"}
></PanelBody> >
<RangeControl
__nextHasNoMarginBottom
label={__("Nombre de colonnes", "homegrade-blocks")}
initialPosition={4}
max={4}
min={2}
value={columnsAmount}
onChange={onChangeColumnsAmount}
/>
<ToggleControl
label={__("Afficher un sous-titre", "homegrade-blocks")}
checked={hasSubtitle}
onChange={onChangeHasSubtitle}
/>
</PanelBody>
</InspectorControls> </InspectorControls>
<section <section
{...useBlockProps({ {...useBlockProps({
className: `homegrade-blocks-staff-list`, className: `homegrade-blocks-staff-list`,
})} })}
> >
<div className="section_titling section_titling--left"> <div
className={`section_titling section_titling--left section-titling--${
hasSubtitle ? "has-subtitle" : "has-no-subtitle"
}`}
>
<RichText <RichText
value={blockTitle} value={blockTitle}
tagName="h3" tagName="h3"
className="section_titling__title" className="section_titling__title"
placeholder={__( placeholder={__(
"Ajouter ici le Titre de la liste de membres", "Ajouter ici le Titre de la liste de membres",
"homegrade" "homegrade",
)} )}
onChange={onChangeBlockTitle} onChange={onChangeBlockTitle}
/> />
<RichText {hasSubtitle && (
value={blockSubtitle} <RichText
tagName="h4" value={blockSubtitle}
className="section_titling__subtitle" tagName="h4"
placeholder={__( className="section_titling__subtitle"
"Ajouter ici le Sous-titre de la liste de membres", placeholder={__(
"homegrade" "Ajouter ici le Sous-titre de la liste de membres",
)} "homegrade",
onChange={onChangeBlockSubtitle} )}
/> onChange={onChangeBlockSubtitle}
/>
)}
</div> </div>
<ul className="homegrade-blocks-staff-list__staff-list"> <ul
className={`homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`}
>
<InnerBlocks <InnerBlocks
allowedBlocks={["homegrade-content-blocks/staff-member"]} allowedBlocks={["homegrade-content-blocks/staff-member"]}
/> />

View File

@ -2,8 +2,23 @@
.homegrade-blocks-staff-list__staff-list { .homegrade-blocks-staff-list__staff-list {
display: unset; display: unset;
} }
.block-editor-block-list__layout { .block-editor-block-list__layout {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); }
.homegrade-blocks-staff-list__staff-list--grid-2 {
.block-editor-block-list__layout {
grid-template-columns: repeat(2, 1fr);
}
}
.homegrade-blocks-staff-list__staff-list--grid-3 {
.block-editor-block-list__layout {
grid-template-columns: repeat(3, 1fr);
}
}
.homegrade-blocks-staff-list__staff-list--grid-4 {
.block-editor-block-list__layout {
grid-template-columns: repeat(4, 1fr);
}
} }
} }

View File

@ -1,7 +1,7 @@
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
let { blockTitle, blockSubtitle } = attributes; let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;
return ( return (
<section <section
@ -9,20 +9,28 @@ export default function save({ attributes }) {
className: `homegrade-blocks-staff-list`, className: `homegrade-blocks-staff-list`,
})} })}
> >
<div className="section_titling section_titling--left"> <div
className={`section_titling section_titling--left section-titling--${
hasSubtitle ? "has-subtitle" : "has-no-subtitle"
}`}
>
<RichText.Content <RichText.Content
value={blockTitle} value={blockTitle}
tagName="h3" tagName="h3"
className="section_titling__title" className="section_titling__title"
/> />
<RichText.Content {hasSubtitle && (
value={blockSubtitle} <RichText.Content
tagName="h4" value={blockSubtitle}
className="section_titling__subtitle" tagName="h4"
/> className="section_titling__subtitle"
/>
)}
</div> </div>
<ul className="homegrade-blocks-staff-list__staff-list"> <ul
className={`homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`}
>
<InnerBlocks.Content /> <InnerBlocks.Content />
</ul> </ul>
</section> </section>