89 lines
2.2 KiB
JavaScript
89 lines
2.2 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import { useBlockProps, RichText } from "@wordpress/block-editor";
|
|
import "./editor.scss";
|
|
import { InspectorControls } from "@wordpress/block-editor";
|
|
import { createErrorNotice, removeNotice } from "@wordpress/notices";
|
|
import { useDispatch, useSelect } from "@wordpress/data";
|
|
import { store as noticesStore } from "@wordpress/notices";
|
|
import {
|
|
PanelBody,
|
|
FocalPointPicker,
|
|
TextControl,
|
|
TextareaControl,
|
|
} from "@wordpress/components";
|
|
|
|
export default function Edit({
|
|
attributes,
|
|
setAttributes,
|
|
clientId,
|
|
...props
|
|
}) {
|
|
const {
|
|
focusTitle,
|
|
focusPosition,
|
|
focusCaptionDescription,
|
|
coverUrl,
|
|
focusIndex,
|
|
} = attributes;
|
|
|
|
function handleChangeFocusPosition(focusPosition) {
|
|
setAttributes({ focusPosition });
|
|
}
|
|
function handleChangeTitle(focusTitle) {
|
|
setAttributes({ focusTitle: focusTitle });
|
|
}
|
|
function handleChangeCaptionDescription(focusCaptionDescription) {
|
|
setAttributes({ focusCaptionDescription });
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<PanelBody
|
|
className="focus-point-modification-pannel"
|
|
title="Gestion du points de focus"
|
|
>
|
|
<div className="homegrade-blocks-focus-point-bullet-panel-preview">
|
|
{focusIndex}
|
|
</div>
|
|
<TextControl
|
|
placeholder="Insérer le titre de votre point focus"
|
|
label="Titre du point focus"
|
|
value={focusTitle !== "Légende Sans titre" ? focusTitle : null}
|
|
onChange={(value) => {
|
|
handleChangeTitle(value);
|
|
}}
|
|
/>
|
|
<TextareaControl
|
|
label="Description du point focus"
|
|
value={focusCaptionDescription}
|
|
rows={3}
|
|
onChange={(description) => {
|
|
handleChangeCaptionDescription(description);
|
|
}}
|
|
/>
|
|
<FocalPointPicker
|
|
url={coverUrl ?? null}
|
|
dimensions={{
|
|
width: 400,
|
|
height: 50,
|
|
}}
|
|
value={focusPosition}
|
|
onChange={(focalPoint) => {
|
|
handleChangeFocusPosition(focalPoint);
|
|
}}
|
|
/>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<li
|
|
{...useBlockProps({
|
|
className: `homegrade-blocks-focus-point-caption`,
|
|
})}
|
|
>
|
|
<span className="focus-point-title">{focusTitle}</span>
|
|
{focusCaptionDescription}
|
|
</li>
|
|
</>
|
|
);
|
|
}
|