handling auto anchor and idName when h2

This commit is contained in:
Antoine M 2024-07-04 10:15:29 +02:00
parent b5df066827
commit 9bc3efd77d
7 changed files with 108 additions and 32 deletions

View File

@ -31,6 +31,9 @@
"iconName": { "iconName": {
"type": "string", "type": "string",
"default": "key" "default": "key"
},
"idName": {
"type": "string"
} }
} }
} }

View File

@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'aad897738c9f1bdf8f55'); <?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '9d27f8e8aa5dbd08d34f');

View File

@ -23,13 +23,18 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* harmony import */ var _utilities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utilities */ "../utilities.js");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-1.js"); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-2.js"); /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-1.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-3.js"); /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-2.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-4.js"); /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-3.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-5.js"); /* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-4.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-5.js");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_8__);
@ -48,8 +53,21 @@ function Edit({
title, title,
headingLevel, headingLevel,
hasIcon, hasIcon,
iconName iconName,
idName,
anchor
} = attributes; } = attributes;
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_8__.useEffect)(() => {
if (anchor) {
setAttributes({
idName: anchor
});
} else if (_utilities__WEBPACK_IMPORTED_MODULE_6__.cleanString && title) {
setAttributes({
idName: "title-" + (0,_utilities__WEBPACK_IMPORTED_MODULE_6__.cleanString)(title)
});
}
}, [anchor]);
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => { const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
const { const {
getBlockIndex getBlockIndex
@ -80,64 +98,64 @@ function Edit({
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__.createBlock)("core/paragraph", {}); const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__.createBlock)("core/paragraph", {});
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").insertBlocks(newBlock, blockIndex + 1); (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.dispatch)("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
} }
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_5__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, { 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_5__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks"), title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks"),
initialOpen: true initialOpen: true
}, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToggleControl, { }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToggleControl, {
label: "Afficher un icone", label: "Afficher un icone",
checked: hasIcon, checked: hasIcon,
onChange: onHasIconChange onChange: onHasIconChange
}))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.BlockControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarGroup, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.BlockControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarGroup, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
isActive: headingLevel === "h1", isActive: headingLevel === "h1",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__["default"],
onClick: () => { onClick: () => {
onChangeHeadingLevel("h1"); onChangeHeadingLevel("h1");
} }
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
isActive: headingLevel === "h2", isActive: headingLevel === "h2",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__["default"],
onClick: () => { onClick: () => {
onChangeHeadingLevel("h2"); onChangeHeadingLevel("h2");
} }
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
isActive: headingLevel === "h3", isActive: headingLevel === "h3",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__["default"],
onClick: () => { onClick: () => {
onChangeHeadingLevel("h3"); onChangeHeadingLevel("h3");
} }
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
isActive: headingLevel === "h4", isActive: headingLevel === "h4",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_10__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_12__["default"],
onClick: () => { onClick: () => {
onChangeHeadingLevel("h4"); onChangeHeadingLevel("h4");
} }
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
isActive: headingLevel === "h5", isActive: headingLevel === "h5",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_11__["default"], icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_13__["default"],
onClick: () => { onClick: () => {
onChangeHeadingLevel("h5"); onChangeHeadingLevel("h5");
} }
})), hasIcon && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarGroup, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { })), hasIcon && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarGroup, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
title: "Clé", title: "Clé",
icon: "admin-network", icon: "admin-network",
isActive: iconName === "key", isActive: iconName === "key",
onClick: () => handleIconChange("key") onClick: () => handleIconChange("key")
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
title: "Lien", title: "Lien",
icon: "admin-links", icon: "admin-links",
isActive: iconName === "chain", isActive: iconName === "chain",
onClick: () => handleIconChange("chain") onClick: () => handleIconChange("chain")
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
title: "Homegrade", title: "Homegrade",
icon: "admin-home", icon: "admin-home",
isActive: iconName === "house", isActive: iconName === "house",
onClick: () => handleIconChange("house") onClick: () => handleIconChange("house")
}), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, { }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.ToolbarButton, {
title: "Inspiration", title: "Inspiration",
icon: "lightbulb", icon: "lightbulb",
isActive: iconName === "bulb", isActive: iconName === "bulb",
onClick: () => handleIconChange("bulb") onClick: () => handleIconChange("bulb")
}))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.KeyboardShortcuts, { }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.KeyboardShortcuts, {
shortcuts: { shortcuts: {
enter: e => insertParagraphOnEnter(e) enter: e => insertParagraphOnEnter(e)
} }
@ -223,9 +241,11 @@ function save({
title, title,
headingLevel, headingLevel,
hasIcon, hasIcon,
iconName iconName,
idName
} = attributes; } = attributes;
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_1__.RichText.Content, { 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_1__.RichText.Content, {
id: idName,
tagName: headingLevel, tagName: headingLevel,
value: title, value: title,
..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({ ..._wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save({
@ -236,6 +256,44 @@ function save({
/***/ }), /***/ }),
/***/ "../utilities.js":
/*!***********************!*\
!*** ../utilities.js ***!
\***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ cleanString: () => (/* binding */ cleanString),
/* harmony export */ getThematiqueFamilySlug: () => (/* binding */ getThematiqueFamilySlug)
/* harmony export */ });
function getThematiqueFamilySlug(thematique_slug) {
switch (thematique_slug) {
case "energie":
case "urbanisme":
return "energies-urbanisme";
case "acoustique":
case "petites-coproprietes":
return "acoustique-coproprietes";
case "isolation":
case "au-quotidien":
return "isolation-quotidien";
case "energies":
case "urbanisme":
return "energies-urbanisme";
case "patrimoine":
case "sante-et-securite":
return "patrimoine-sante-securite";
case "location":
return "location";
}
}
function cleanString(string) {
return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().split(" ").join("-");
}
/***/ }),
/***/ "./src/editor.scss": /***/ "./src/editor.scss":
/*!*************************!*\ /*!*************************!*\
!*** ./src/editor.scss ***! !*** ./src/editor.scss ***!
@ -501,7 +559,7 @@ module.exports = window["wp"]["primitives"];
\************************/ \************************/
/***/ ((module) => { /***/ ((module) => {
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-heading","version":"0.1.0","title":"Titre","category":"homegrade-blocks","icon":"smiley","description":"Bloc de titrage h2/h3/h4 avec ou sans icône","supports":{"html":false,"renaming":true,"anchor":true},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string"},"headingLevel":{"type":"string","default":"h3"},"hasIcon":{"type":"boolean","default":false},"iconName":{"type":"string","default":"key"}}}'); module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"homegrade-content-blocks/content-heading","version":"0.1.0","title":"Titre","category":"homegrade-blocks","icon":"smiley","description":"Bloc de titrage h2/h3/h4 avec ou sans icône","supports":{"html":false,"renaming":true,"anchor":true},"textdomain":"homegrade-theme__bloks-texte-fonctionnel","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","attributes":{"title":{"type":"string"},"headingLevel":{"type":"string","default":"h3"},"hasIcon":{"type":"boolean","default":false},"iconName":{"type":"string","default":"key"},"idName":{"type":"string"}}}');
/***/ }) /***/ })

File diff suppressed because one or more lines are too long

View File

@ -31,6 +31,9 @@
"iconName": { "iconName": {
"type": "string", "type": "string",
"default": "key" "default": "key"
},
"idName": {
"type": "string"
} }
} }
} }

View File

@ -9,7 +9,7 @@ import {
InspectorControls, InspectorControls,
BlockControls, BlockControls,
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import { cleanString } from "../../utilities";
import { import {
ToggleControl, ToggleControl,
PanelBody, PanelBody,
@ -26,13 +26,24 @@ import {
headingLevel5, headingLevel5,
} from "@wordpress/icons"; } from "@wordpress/icons";
import { useEffect } from "@wordpress/element";
export default function Edit({ export default function Edit({
attributes, attributes,
setAttributes, setAttributes,
clientId, clientId,
...blockProps ...blockProps
}) { }) {
const { title, headingLevel, hasIcon, iconName } = attributes; const { title, headingLevel, hasIcon, iconName, idName, anchor } = attributes;
useEffect(() => {
if (anchor) {
setAttributes({ idName: anchor });
} else if (cleanString && title) {
setAttributes({
idName: "title-" + cleanString(title),
});
}
}, [anchor]);
const blockIndex = useSelect((select) => { const blockIndex = useSelect((select) => {
const { getBlockIndex } = select("core/block-editor"); const { getBlockIndex } = select("core/block-editor");

View File

@ -1,10 +1,11 @@
import { useBlockProps, RichText } from "@wordpress/block-editor"; import { useBlockProps, RichText } from "@wordpress/block-editor";
export default function save({ attributes }) { export default function save({ attributes }) {
const { title, headingLevel, hasIcon, iconName } = attributes; const { title, headingLevel, hasIcon, iconName, idName } = attributes;
return ( return (
<> <>
<RichText.Content <RichText.Content
id={idName}
tagName={headingLevel} tagName={headingLevel}
value={title} value={title}
{...useBlockProps.save({ {...useBlockProps.save({