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

exteding block feature to handle text alignment

Browse Source
This commit is contained in:
Antoine M 2023-11-07 12:00:33 +01:00
parent 1a10dfc461
commit 768cd9b978
10 changed files with 205 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blocks/section-titling/build/block.json
View File

@ -19,6 +19,10 @@
},
"sectionSubtitle": {
"type": "string"
},
"textAlign": {
"type": "string",
"default": "left"
}
}
}

2
blocks/section-titling/build/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' => 'e990beec383c9a2090f2');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'b82f0dca6da9dca857a3');

12
blocks/section-titling/build/index.css Normal file
View File

@ -0,0 +1,12 @@
/*!****************************************************************************************************************************************************************************************************************************************!*\
!*** 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 ***!
\****************************************************************************************************************************************************************************************************************************************/
.homegrade-blocks-staff-list .homegrade-blocks-staff-list__staff-list {
display: unset;
}
.homegrade-blocks-staff-list .block-editor-block-list__layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*# sourceMappingURL=index.css.map*/

1
blocks/section-titling/build/index.css.map Normal file
View File

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

136
blocks/section-titling/build/index.js
View File

@ -21,6 +21,12 @@ __webpack_require__.r(__webpack_exports__);
/* 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_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-left.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-center.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/position-right.js");
@ -33,7 +39,8 @@ function Edit({
}) {
let {
sectionTitle,
sectionSubtitle
sectionSubtitle,
textAlign
} = attributes;
function onChangeSectionTitle(sectionTitle) {
setAttributes({
@ -45,9 +52,32 @@ function Edit({
sectionSubtitle
});
}
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, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "salut"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
function onChangeTextAlignment(textAlign) {
setAttributes({
textAlign
});
}
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, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tip, null, "salut"))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Toolbar, {
label: "Options"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.ToolbarDropdownMenu, {
icon: textAlign === "left" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"] : textAlign === "center" ? _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"] : _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
label: "Alignement du titrage",
controls: [{
title: "Gauche",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
onClick: () => onChangeTextAlignment("left")
}, {
title: "Centré",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
onClick: () => onChangeTextAlignment("center")
}, {
title: "Droite",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
onClick: () => onChangeTextAlignment("right")
}]
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.useBlockProps)({
className: `section_titling`
className: `section_titling section_titling--${textAlign}`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_3__.RichText, {
value: sectionTitle,
@ -118,11 +148,12 @@ function save({
}) {
let {
sectionTitle,
sectionSubtitle
sectionSubtitle,
textAlign
} = attributes;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
className: `section_titling`
className: `section_titling section_titling--${textAlign}`
})
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.RichText.Content, {
value: sectionTitle,
@ -192,6 +223,99 @@ const header = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)
/***/ }),
/***/ "../../node_modules/@wordpress/icons/build-module/library/position-center.js":
/*!***********************************************************************************!*\
!*** ../../node_modules/@wordpress/icons/build-module/library/position-center.js ***!
\***********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const positionCenter = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionCenter);
//# sourceMappingURL=position-center.js.map
/***/ }),
/***/ "../../node_modules/@wordpress/icons/build-module/library/position-left.js":
/*!*********************************************************************************!*\
!*** ../../node_modules/@wordpress/icons/build-module/library/position-left.js ***!
\*********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const positionLeft = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionLeft);
//# sourceMappingURL=position-left.js.map
/***/ }),
/***/ "../../node_modules/@wordpress/icons/build-module/library/position-right.js":
/*!**********************************************************************************!*\
!*** ../../node_modules/@wordpress/icons/build-module/library/position-right.js ***!
\**********************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/primitives */ "@wordpress/primitives");
/* harmony import */ var _wordpress_primitives__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__);
/**
* WordPress dependencies
*/
const positionRight = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_1__.Path, {
d: "M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
}));
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (positionRight);
//# sourceMappingURL=position-right.js.map
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
@ -258,7 +382,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/section-titling","version":"0.1.0","title":"Titre de section","category":"homegrade-blocks","description":"Pour insérer un bloc de titrage (dans une grey-box ou une white-box) ","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"sectionTitle":{"type":"string"},"sectionSubtitle":{"type":"string"}}}');
module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/section-titling","version":"0.1.0","title":"Titre de section","category":"homegrade-blocks","description":"Pour insérer un bloc de titrage (dans une grey-box ou une white-box) ","supports":{"html":false},"textdomain":"homegrade-blocks","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"sectionTitle":{"type":"string"},"sectionSubtitle":{"type":"string"},"textAlign":{"type":"string","default":"left"}}}');
/***/ })

2
blocks/section-titling/build/index.js.map
View File

File diff suppressed because one or more lines are too long

4
blocks/section-titling/build/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/style.scss ***!
\***************************************************************************************************************************************************************************************************************************************/

4
blocks/section-titling/src/block.json
View File

@ -19,6 +19,10 @@
},
"sectionSubtitle": {
"type": "string"
},
"textAlign": {
"type": "string",
"default": "left"
}
}
}

50
blocks/section-titling/src/edit.js
View File

@ -1,17 +1,23 @@
import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { BlockControls } from "@wordpress/block-editor";
import {
useBlockProps,
RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
import {
more,
positionLeft,
positionCenter,
positionRight,
} from "@wordpress/icons";
import { Tip, PanelBody } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, clientId }) {
let { sectionTitle, sectionSubtitle } = attributes;
let { sectionTitle, sectionSubtitle, textAlign } = attributes;
function onChangeSectionTitle(sectionTitle) {
setAttributes({ sectionTitle });
@ -20,6 +26,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
setAttributes({ sectionSubtitle });
}
function onChangeTextAlignment(textAlign) {
setAttributes({ textAlign });
}
return (
<>
<InspectorControls>
@ -27,9 +37,41 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<Tip>salut</Tip>
</PanelBody>
</InspectorControls>
<BlockControls>
<Toolbar label="Options">
<ToolbarDropdownMenu
icon={
textAlign === "left"
? positionLeft
: textAlign === "center"
? positionCenter
: positionRight
}
label="Alignement du titrage"
controls={[
{
title: "Gauche",
icon: positionLeft,
onClick: () => onChangeTextAlignment("left"),
},
{
title: "Centré",
icon: positionCenter,
onClick: () => onChangeTextAlignment("center"),
},
{
title: "Droite",
icon: positionRight,
onClick: () => onChangeTextAlignment("right"),
},
]}
/>
</Toolbar>
</BlockControls>
<div
{...useBlockProps({
className: `section_titling`,
className: `section_titling section_titling--${textAlign}`,
})}
>
<RichText

4
blocks/section-titling/src/save.js
View File

@ -1,12 +1,12 @@
import { useBlockProps, RichText } from "@wordpress/block-editor";
export default function save({ attributes }) {
let { sectionTitle, sectionSubtitle } = attributes;
let { sectionTitle, sectionSubtitle, textAlign } = attributes;
return (
<div
{...useBlockProps.save({
className: `section_titling`,
className: `section_titling section_titling--${textAlign}`,
})}
>
<RichText.Content