Block Editing

Block Registration

For a block to show up in the WP editor, it needs to be registered properly.

/backend/plugins/gravity-platform-core/src/blocks/card/block.json

{
	"apiVersion": 2,
	"name": "gravity-platform-core/card",
	"version": "0.1.0",
	"title": "Card",
	"category": "gravity-platform",
	"icon": "building",
	"description": "Card",
	"supports": {
		"html": false
	},
	"textdomain": "gravity-platform-core",
	"editorScript": "file:../../../build/index.js",
	"editorStyle": "file:../../../build/main.css",
	"style": "file:../../../build/style-main.css"
}

In block.json

/backend/plugins/gravity-platform-core/src/blocks/card/index.tsx

import "./style.scss";

import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";

import { PREFIX } from "../../utils/config";
import edit from "./edit";
import save from "./save";

registerBlockType("gravity-platform-core/card", {
	title: __("Card", PREFIX),
	category: "gravity-platform",
	attributes: {},
	edit,
	save,
});

And in index.tsx

Adding Block Controls

gravity/backend/plugins/gravity-platform-core/src/blocks/promotions/edit.tsx

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

Gutenberg WordPress Components | Create Editor Blocks | WP-GBWP-GB

great resource for block controls available from WP Core

Updating Block Attributes

Add attributes to index.tsx in: backend/plugins/gravity-platform-core/src/blocks/promotions/index.tsx

Updating With apiFetch

// Loop through selected promotion ids & update the CTA field
	const setForm = (option) => {
		attributes.selectedPromotionIds
			.filter((id) => id)
			.map((id) => {
				wp.apiFetch({
					path: `/acf/v3/posts/${id}`,
					method: "PUT",
					data: { fields: { cta_form_id: option.id } },
				}).then((res) => {
					alert(res.error);
				});
			});
	};

for the ACF API we have to add the fields attribute before we can get to the actual field attribute

https://gravity-platform.local/wp-json/acf/v3/posts/72gravity-platform.local

Above is an example of the wp-json endpoint for ACF