refactoring content-heading

This commit is contained in:
Antoine M 2023-11-14 15:45:25 +01:00
parent 42b8ae0ad5
commit 2b79d05a25
10 changed files with 45 additions and 134 deletions

View File

@ -6,9 +6,10 @@
"title": "Titre",
"category": "homegrade-blocks",
"icon": "smiley",
"description": "Bloc de titrage",
"description": "Bloc de titrage h2/h3/h4 avec ou sans icône",
"supports": {
"html": false
"html": false,
"renaming": true
},
"textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"editorScript": "file:./index.js",

View File

@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '81dbc9cde8701593054f');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '8bf20ecea04b277f85a0');

View File

@ -1,10 +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/editor.scss ***!
\****************************************************************************************************************************************************************************************************************************************/
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
/*# sourceMappingURL=index.css.map*/

View File

@ -16,15 +16,15 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__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__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __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_blocks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* 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___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 _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-3.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-4.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-5.js");
@ -35,9 +35,6 @@ __webpack_require__.r(__webpack_exports__);
// import BlockHeadingControls from "./BlockHeadingControls";
function Edit({
attributes,
@ -51,7 +48,7 @@ function Edit({
hasIcon,
iconName
} = attributes;
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => {
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
const {
getBlockIndex
} = select("core/block-editor");
@ -67,10 +64,6 @@ function Edit({
headingLevel: newHeadingLevel
});
}
function insertParagraphOnEnter(e) {
const newBlock = (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_2__.createBlock)("core/paragraph", {});
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.dispatch)("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
function handleIconChange(newIconName) {
setAttributes({
iconName: newIconName
@ -81,63 +74,67 @@ function Edit({
hasIcon: hasIconToggleValue
});
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-fonctionnel"),
function insertParagraphOnEnter(e) {
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);
}
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_5__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.PanelBody, {
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Icone", "homegrade-blocks__texte-backoffice"),
initialOpen: true
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToggleControl, {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToggleControl, {
label: "Afficher un icone",
checked: hasIcon,
onChange: onHasIconChange
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
isActive: headingLevel === "h3",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
onClick: () => {
onChangeHeadingLevel("h3");
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
isActive: headingLevel === "h4",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
onClick: () => {
onChangeHeadingLevel("h4");
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
isActive: headingLevel === "h5",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__["default"],
onClick: () => {
onChangeHeadingLevel("h5");
}
})), hasIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
})), hasIcon && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
title: "Clé",
icon: "admin-network",
isActive: iconName === "key",
onClick: () => handleIconChange("key")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
title: "Lien",
icon: "admin-links",
isActive: iconName === "chain",
onClick: () => handleIconChange("chain")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
title: "Homegrade",
icon: "admin-home",
isActive: iconName === "house",
onClick: () => handleIconChange("house")
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.ToolbarButton, {
title: "Inspiration",
icon: "lightbulb",
isActive: iconName === "bulb",
onClick: () => handleIconChange("bulb")
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.KeyboardShortcuts, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.KeyboardShortcuts, {
shortcuts: {
enter: e => insertParagraphOnEnter(e)
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.RichText, {
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.RichText, {
onChange: onChangeTitle,
value: title,
disableLineBreaks: true,
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez votre titre ici", "homegrade-blocks__texte-fonctionnel"),
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez votre titre ici", "homegrade-blocks__texte-backoffice"),
allowedFormats: ["homegrade-format/tooltip"],
tagName: headingLevel,
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.useBlockProps)({
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_5__.useBlockProps)({
className: `homegrade-blocks-custom-heading ${hasIcon ? "has-icon has-icon--" + iconName : " "}`
}),
style: {
@ -418,7 +415,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/content-heading","version":"0.1.0","title":"Titre","category":"homegrade-blocks","icon":"smiley","description":"Bloc de titrage","supports":{"html":false},"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 = 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},"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"}}}');
/***/ })

File diff suppressed because one or more lines are too long

View File

@ -1,46 +0,0 @@
import { __ } from "@wordpress/i18n";
export default function BlockHeadingControls({
hasIcon,
setAttributes,
headingLevel,
iconName,
}) {
function handleIconChange(newIconName) {
setAttributes({ iconName: newIconName });
}
function getIconPicture() {
switch (iconName) {
case "key":
return keyIcon;
case "chain":
return chainIcon;
case "house":
return houseIcon;
case "bulb":
return bulbIcon;
}
}
function getDashiconSymbol() {
switch (iconName) {
case "key":
return "admin-network";
case "chain":
return "admin-links";
case "house":
return "admin-home";
case "bulb":
return "lightbulb";
}
}
return (
);
}

View File

@ -1,18 +0,0 @@
import { __ } from "@wordpress/i18n";
export default function IconControls({ hasIcon, setAttributes }) {
return (
<InspectorControls>
<PanelBody
title={__("Icone", "homegrade-blocks__texte-fonctionnel")}
initialOpen={true}
>
<ToggleControl
label="Afficher un icone"
checked={hasIcon}
onChange={onHasIconChange}
/>
</PanelBody>
</InspectorControls>
);
}

View File

@ -8,7 +8,8 @@
"icon": "smiley",
"description": "Bloc de titrage h2/h3/h4 avec ou sans icône",
"supports": {
"html": false
"html": false,
"renaming": true
},
"textdomain": "homegrade-theme__bloks-texte-fonctionnel",
"editorScript": "file:./index.js",

View File

@ -1,23 +1,23 @@
import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";
import {
useBlockProps,
RichText,
InspectorControls,
BlockControls,
} from "@wordpress/block-editor";
import {
ToggleControl,
PanelBody,
KeyboardShortcuts,
ToolbarGroup,
ToolbarButton,
} from "@wordpress/components";
import "./editor.scss";
// import BlockHeadingControls from "./BlockHeadingControls";
import { BlockControls } from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
export default function Edit({
@ -36,15 +36,9 @@ export default function Edit({
function onChangeTitle(newTitle) {
setAttributes({ title: newTitle });
}
function onChangeHeadingLevel(newHeadingLevel) {
setAttributes({ headingLevel: newHeadingLevel });
}
function insertParagraphOnEnter(e) {
const newBlock = createBlock("core/paragraph", {});
dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
function handleIconChange(newIconName) {
setAttributes({ iconName: newIconName });
}
@ -53,6 +47,10 @@ export default function Edit({
hasIcon: hasIconToggleValue,
});
}
function insertParagraphOnEnter(e) {
const newBlock = createBlock("core/paragraph", {});
dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
return (
<>
@ -121,12 +119,6 @@ export default function Edit({
</ToolbarGroup>
)}
</BlockControls>
{/* <BlockHeadingControls
hasIcon={hasIcon}
iconName={iconName}
setAttributes={setAttributes}
headingLevel={headingLevel}
/> */}
<KeyboardShortcuts
shortcuts={{

View File

@ -1,10 +0,0 @@
/**
* The following styles get applied inside the editor only.
*
* Replace them with your own styles or remove the file completely.
*/
// .block-editor-image-size-control {
// display: none;
// }