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": {
"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 {
display: unset;
}
.homegrade-blocks-staff-list .block-editor-block-list__layout {
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);
}
.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*/

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 */ "default": () => (/* binding */ Edit)
/* 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 react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* 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___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 _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_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* 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({
attributes,
setAttributes,
@ -36,7 +37,9 @@ function Edit({
}) {
let {
blockTitle,
blockSubtitle
blockSubtitle,
hasSubtitle,
columnsAmount
} = attributes;
function onChangeBlockTitle(blockTitle) {
setAttributes({
@ -48,30 +51,52 @@ function Edit({
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, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Variantes de Timeline", "homegrade-blocks__texte-backoffice"),
function onChangeColumnsAmount(columnsAmount) {
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"
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.RangeControl, {
__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`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "section_titling section_titling--left"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `section_titling section_titling--left section-titling--${hasSubtitle ? "has-subtitle" : "has-no-subtitle"}`
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
value: blockTitle,
tagName: "h3",
className: "section_titling__title",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Titre de la liste de membres", "homegrade"),
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,
tagName: "h4",
className: "section_titling__subtitle",
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Ajouter ici le Sous-titre de la liste de membres", "homegrade"),
onChange: onChangeBlockSubtitle
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", {
className: "homegrade-blocks-staff-list__staff-list"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.InnerBlocks, {
})), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", {
className: `homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InnerBlocks, {
allowedBlocks: ["homegrade-content-blocks/staff-member"]
}))));
}
@ -85,8 +110,8 @@ function Edit({
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* 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 react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* 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___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");
@ -101,22 +126,22 @@ __webpack_require__.r(__webpack_exports__);
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_1__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_5__.name, {
icon: {
src: (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
src: (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", {
version: "1.1",
x: "0px",
y: "0px",
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",
cy: "11",
r: "10"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "37",
cy: "21",
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"
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("circle", {
cx: "97",
cy: "21",
r: "10"
@ -139,8 +164,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ save)
/* 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 react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* 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___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
@ -150,25 +175,27 @@ function save({
}) {
let {
blockTitle,
blockSubtitle
blockSubtitle,
hasSubtitle,
columnsAmount
} = 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({
className: `homegrade-blocks-staff-list`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: "section_titling section_titling--left"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
className: `section_titling section_titling--left section-titling--${hasSubtitle ? "has-subtitle" : "has-no-subtitle"}`
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: blockTitle,
tagName: "h3",
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,
tagName: "h4",
className: "section_titling__subtitle"
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", {
className: "homegrade-blocks-staff-list__staff-list"
}, (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)("ul", {
className: `homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`
}, (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
/***/ }),
/***/ "react":
/*!************************!*\
!*** external "React" ***!
\************************/
/***/ ((module) => {
module.exports = window["React"];
/***/ }),
/***/ "@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":
/*!******************************!*\
!*** external ["wp","i18n"] ***!
@ -253,7 +280,7 @@ module.exports = window["wp"]["i18n"];
\************************/
/***/ ((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;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var chunkIds = deferred[i][0];
/******/ var fn = deferred[i][1];
/******/ var priority = deferred[i][2];
/******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fulfilled = true;
/******/ 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])))) {
@ -387,9 +412,7 @@ module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var runtime = data[2];
/******/ var [chunkIds, moreModules, runtime] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ 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);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunkmultiblocks"] = self["webpackChunkmultiblocks"] || [];
/******/ var chunkLoadingGlobal = globalThis["webpackChunkmultiblocks"] = globalThis["webpackChunkmultiblocks"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ 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": {
"type": "string"
},
"columnsAmount": {
"type": "number",
"default": 4
}
}
}

View File

@ -1,13 +1,19 @@
import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { RangeControl } from "@wordpress/components";
// import "./staff-member";
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody } from "@wordpress/components";
import {
useBlockProps,
RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody, ToggleControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, clientId }) {
let { blockTitle, blockSubtitle } = attributes;
let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;
function onChangeBlockTitle(blockTitle) {
setAttributes({ blockTitle });
@ -15,44 +21,73 @@ export default function Edit({ attributes, setAttributes, clientId }) {
function onChangeBlockSubtitle(blockSubtitle) {
setAttributes({ blockSubtitle });
}
function onChangeColumnsAmount(columnsAmount) {
setAttributes({ columnsAmount });
}
function onChangeHasSubtitle() {
setAttributes({ hasSubtitle: !hasSubtitle });
}
return (
<>
<InspectorControls>
<PanelBody
title={__("Variantes de Timeline", "homegrade-blocks")}
title={__("Paramètres de la liste de membres", "homegrade-blocks")}
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>
<section
{...useBlockProps({
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
value={blockTitle}
tagName="h3"
className="section_titling__title"
placeholder={__(
"Ajouter ici le Titre de la liste de membres",
"homegrade"
"homegrade",
)}
onChange={onChangeBlockTitle}
/>
<RichText
value={blockSubtitle}
tagName="h4"
className="section_titling__subtitle"
placeholder={__(
"Ajouter ici le Sous-titre de la liste de membres",
"homegrade"
)}
onChange={onChangeBlockSubtitle}
/>
{hasSubtitle && (
<RichText
value={blockSubtitle}
tagName="h4"
className="section_titling__subtitle"
placeholder={__(
"Ajouter ici le Sous-titre de la liste de membres",
"homegrade",
)}
onChange={onChangeBlockSubtitle}
/>
)}
</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
allowedBlocks={["homegrade-content-blocks/staff-member"]}
/>

View File

@ -2,8 +2,23 @@
.homegrade-blocks-staff-list__staff-list {
display: unset;
}
.block-editor-block-list__layout {
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";
export default function save({ attributes }) {
let { blockTitle, blockSubtitle } = attributes;
let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;
return (
<section
@ -9,20 +9,28 @@ export default function save({ attributes }) {
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
value={blockTitle}
tagName="h3"
className="section_titling__title"
/>
<RichText.Content
value={blockSubtitle}
tagName="h4"
className="section_titling__subtitle"
/>
{hasSubtitle && (
<RichText.Content
value={blockSubtitle}
tagName="h4"
className="section_titling__subtitle"
/>
)}
</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 />
</ul>
</section>