homegrade_blocks_production/blocks/column-cards/src/edit.js

83 lines
1.6 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import "./editor.scss";
import "./card";
import {
useBlockProps,
RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { Tip, PanelBody, RangeControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, clientId }) {
let { columnCount } = attributes;
function onChangeColumnCount(columnCount) {
setAttributes({ columnCount });
}
const TEMPLATE = [
[
"homegrade-content-blocks/column-card",
{},
[
[
"homegrade-content-blocks/figure",
{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
],
],
],
[
"homegrade-content-blocks/column-card",
{},
[
[
"homegrade-content-blocks/figure",
{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
],
],
],
[
"homegrade-content-blocks/column-card",
{},
[
[
"homegrade-content-blocks/figure",
{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
],
],
],
];
return (
<>
<InspectorControls>
<PanelBody>
<Tip>salut</Tip>
<RangeControl
label="Number of columns"
value={columnCount}
onChange={onChangeColumnCount}
min={2}
max={4}
/>
</PanelBody>
</InspectorControls>
<section
{...useBlockProps({
className: `homegrade-blocks-column-cards homegrade-blocks-column-cards--has-${columnCount}-columns`,
})}
>
<InnerBlocks
template={TEMPLATE}
allowedBlocks={[
"core/paragraph",
"homegrade-content-blocks/column-card",
]}
/>
</section>
</>
);
}