Block state

With useBlockState you can retrieve the current block's state, structured according to its content schema and customizer schema.

import { useBlockState } from "@instantcommerce/sdk";

const BlockComponent = () => {
  const { content, customizer } = useBlockState();

  return (
    <div>
      <h1 style={{ color: customizer.color }}>{content.title}</h1>
    </div>
  );
};

export default defineBlock({
  component: BlockComponent,
  customizerSchema: {
    fields: [{ type: "color", name: "Color" }],
  },
  contentSchema: {
    fields: [{ type: "text", name: "title", label: "Title", preview: "Title" }],
  },
});