import { useEffect, useState, WPElement } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import { TextControl, PanelBody, CheckboxControl } from "@wordpress/components";
import { wp } from "../../utils/config";
import PromotionsBlock, {
getPreviewProps,
} from "../../../../../../frontend/components/blocks/promotions/PromotionsBlock";
import "./editor.scss";
// @wordpress/block-editor doesn't expose the type information for hooks, so we have to reference it by global.
const useBlockProps = wp.blockEditor.useBlockProps;
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/
export default function Edit({ attributes, setAttributes }): WPElement {
const [previewData, setPreviewData] = useState({});
const [isChecked, setChecked] = useState(true);
useEffect(() => {
getPreviewProps().then((res) => {
setPreviewData(res.props);
});
}, [setPreviewData]);
return (
<div {...useBlockProps()}>
<InspectorControls key="setting">
<PanelBody title="Block Settings">
<TextControl
label="Title"
value={attributes.title}
onChange={(title) => setAttributes({ title })}
/>
<CheckboxControl
label="Is author"
help="Is the user a author or not?"
checked={isChecked}
onChange={setChecked}
/>
</PanelBody>
</InspectorControls>
{/* This same component is rendered in the Next.js frontend */}
<PromotionsBlock {...{ ...attributes, ...previewData }} />
</div>
);
}
To check progress on your block controls you will need to run npm run build in gravity/backend/plugins/gravity-platform-core
Block Editor Control Reference
Updating Block Attributes
Add attributes to index.tsx in: backend/plugins/gravity-platform-core/src/blocks/promotions/index.tsx
