carhop__plugins__PROD-DEV/plugins/carhop-blocks/src/highlight-timeline-step/edit.js

79 lines
2.0 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import {
PanelBody,
Card,
CardBody,
CardHeader,
TextControl,
Button,
__experimentalNumberControl as NumberControl,
} from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";
export default function Edit({ attributes, setAttributes, ...props }) {
const { year } = attributes;
return (
<>
<InspectorControls>
<PanelBody title={__("Étape de timeline", "carhop-blocks")}>
<NumberControl
label={__("Année", "carhop-blocks")}
value={year}
onChange={(value) => {
const n = parseInt(value, 10);
setAttributes({ year: Number.isFinite(n) ? n : undefined });
}}
/>
</PanelBody>
</InspectorControls>
<div
{...useBlockProps({
className: `highlight-timeline-step`,
id: `year-${year}`,
})}
>
<div className="highlight-timeline-step__year">
<p className="highlight-timeline-step__year-text">{year}</p>
</div>
<div className="highlight-timeline-step__innerblocks">
<InnerBlocks
allowedBlocks={[
"core/heading",
"core/paragraph",
"core/group",
"core/list",
"core/button",
"core/image",
"core/buttons",
"core/columns",
"core/post-title",
"core/embed",
"core/quote",
"core/pullquote",
"core/media-text",
"core/table",
"carhop-blocks/image-stack",
"carhop-blocks/heading",
"carhop-blocks/decorative-shapes",
"carhop-blocks/scroll-highlight-block",
"carhop-blocks/cta-group",
"carhop-blocks/audio-player",
"carhop-blocks/localisation-map",
"carhop-blocks/notice-panel",
"acf/statistics-datas",
"ninja-forms/form",
"gravityforms/form",
"dynamiques-blocks/sitemap",
"mailpoet/subscription-form-block",
"shortcode",
]}
/>
</div>
</div>
</>
);
}