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

adding enter shortcut for content heading block

Browse Source
This commit is contained in:
Antoine M 2023-09-28 10:26:00 +02:00
parent 5a091f3c11
commit bf72024681
4 changed files with 89 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blocks/content-heading/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' => 'b49bf3cb09cfbfdc4f12');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '9d127840849a10578990');

64
blocks/content-heading/build/index.js
View File

@ -18,12 +18,19 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
/* 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_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-3.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-4.js");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "../../node_modules/@wordpress/icons/build-module/library/heading-level-5.js");
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_4__ = __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_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 _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");
/* harmony import */ var _editor_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./editor.scss */ "./src/editor.scss");
@ -32,7 +39,9 @@ __webpack_require__.r(__webpack_exports__);
function Edit({
attributes,
setAttributes
setAttributes,
clientId,
...blockProps
}) {
const {
title,
@ -43,36 +52,51 @@ function Edit({
headingLevel: newHeadingLevel
});
}
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_2__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarGroup, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
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);
}
const blockIndex = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__.useSelect)(select => {
const {
getBlockIndex
} = select("core/block-editor");
return getBlockIndex(clientId);
});
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_2__.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, {
isActive: headingLevel === "h3",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_5__["default"],
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
onClick: () => {
onChangeHeadingLevel("h3");
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
isActive: headingLevel === "h4",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_6__["default"],
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_8__["default"],
onClick: () => {
onChangeHeadingLevel("h4");
}
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.ToolbarButton, {
}), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.ToolbarButton, {
isActive: headingLevel === "h5",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__["default"],
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_9__["default"],
onClick: () => {
onChangeHeadingLevel("h5");
}
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
}))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.KeyboardShortcuts, {
shortcuts: {
enter: e => insertParagraphOnEnter(e)
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.RichText, {
onChange: value => setAttributes({
title: value
}),
value: title,
disableLineBreaks: true,
placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Insérez votre titre ici", "homegrade-blocks__texte-fonctionnel"),
allowedFormats: ["homegrade-format/tooltip"],
tagName: headingLevel,
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)({
className: `homegrade-blocks-custom-heading`
})
}));
})));
}
/***/ }),
@ -299,6 +323,16 @@ module.exports = window["wp"]["components"];
/***/ }),
/***/ "@wordpress/data":
/*!******************************!*\
!*** external ["wp","data"] ***!
\******************************/
/***/ ((module) => {
module.exports = window["wp"]["data"];
/***/ }),
/***/ "@wordpress/element":
/*!*********************************!*\
!*** external ["wp","element"] ***!

2
blocks/content-heading/build/index.js.map
View File

File diff suppressed because one or more lines are too long

53
blocks/content-heading/src/edit.js
View File

@ -5,17 +5,34 @@ import {
RichText,
BlockControls,
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
import { KeyboardShortcuts } from "@wordpress/components";
import "./editor.scss";
export default function Edit({ attributes, setAttributes }) {
export default function Edit({
attributes,
setAttributes,
clientId,
...blockProps
}) {
const { title, headingLevel } = attributes;
function onChangeHeadingLevel(newHeadingLevel) {
setAttributes({ headingLevel: newHeadingLevel });
}
function insertParagraphOnEnter(e) {
const newBlock = createBlock("core/paragraph", {});
dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
}
const blockIndex = useSelect((select) => {
const { getBlockIndex } = select("core/block-editor");
return getBlockIndex(clientId);
});
return (
<>
@ -44,20 +61,26 @@ export default function Edit({ attributes, setAttributes }) {
/>
</ToolbarGroup>
</BlockControls>
<RichText
onChange={(value) => setAttributes({ title: value })}
value={title}
placeholder={__(
"Insérez votre titre ici",
"homegrade-blocks__texte-fonctionnel"
)}
allowedFormats={["homegrade-format/tooltip"]}
tagName={headingLevel}
{...useBlockProps({
className: `homegrade-blocks-custom-heading`,
})}
/>
<KeyboardShortcuts
shortcuts={{
enter: (e) => insertParagraphOnEnter(e),
}}
>
<RichText
onChange={(value) => setAttributes({ title: value })}
value={title}
disableLineBreaks
placeholder={__(
"Insérez votre titre ici",
"homegrade-blocks__texte-fonctionnel"
)}
allowedFormats={["homegrade-format/tooltip"]}
tagName={headingLevel}
{...useBlockProps({
className: `homegrade-blocks-custom-heading`,
})}
/>
</KeyboardShortcuts>
</>
);
}