87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
|
|
import {
|
|
useBlockProps,
|
|
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,
|
|
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 (
|
|
<>
|
|
<BlockControls>
|
|
<ToolbarGroup>
|
|
<ToolbarButton
|
|
isActive={headingLevel === "h3"}
|
|
icon={headingLevel3}
|
|
onClick={() => {
|
|
onChangeHeadingLevel("h3");
|
|
}}
|
|
/>
|
|
<ToolbarButton
|
|
isActive={headingLevel === "h4"}
|
|
icon={headingLevel4}
|
|
onClick={() => {
|
|
onChangeHeadingLevel("h4");
|
|
}}
|
|
/>
|
|
<ToolbarButton
|
|
isActive={headingLevel === "h5"}
|
|
icon={headingLevel5}
|
|
onClick={() => {
|
|
onChangeHeadingLevel("h5");
|
|
}}
|
|
/>
|
|
</ToolbarGroup>
|
|
</BlockControls>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|