homegrade_blocks_production/blocks/staff-member/src/edit.js

65 lines
1.5 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import "./editor.scss";
import {
useBlockProps,
RichText,
InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody } from "@wordpress/components";
import mascotte from "./img/homegrade_mascotte.svg";
import { Tip } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, ...props }) {
let { name, position } = attributes;
function onChangeName(name) {
setAttributes({ name });
}
function onChangePosition(position) {
setAttributes({ position });
}
return (
<>
<InspectorControls>
<PanelBody>
<Tip>
Si besoin, Utilisez le champ "Légende"de la médiathèque pour
afficher un copyright
</Tip>
<Tip>
Si besoin, Utilisez le champ "Description" de la médiathèque pour
donner afficher une description de votre image
</Tip>
</PanelBody>
</InspectorControls>
<li
{...useBlockProps({
className: `homegrade-blocks-staff-member`,
})}
>
<div className="homegrade-blocks-staff-member__member-icon">
<img src={mascotte} alt="" />
</div>
<div className="homegrade-blocks-staff-member__member-informations">
<RichText
className="homegrade-blocks-staff-member__name"
tagName="h4"
placeholder="Nom"
value={name}
onChange={onChangeName}
/>
<RichText
className="homegrade-blocks-staff-member__position"
tagName="p"
placeholder="Fonction"
value={position}
onChange={onChangePosition}
/>
</div>
</li>
</>
);
}