Szukam sposobu na uzyskanie takiego samego rezultatu jak standardowy blok „Tabela” Gutenberga dla mojego nowego niestandardowego bloku Gutenberga.

Chcę, aby pola wewnątrz były widoczne jak w formularzu i aby znajdował się przycisk, którego kliknięcie spowoduje zapisanie pól i wyświetlenie podglądu nawet po ponownym załadowaniu strony.

Obecnie to jest mój kod i utknąłem, ponieważ nie mogę znaleźć zbyt wielu dokumentacji na ten temat, jak najlepiej to zrobić:

const { registerBlockType } = wp.blocks;
const { RichText, BlockControls, AlignmentToolbar, InspectorControls } =
  wp.blockEditor;
const {
  Placeholder,
  Toolbar,
  Modal,
  Button,
  PanelBody,
  PanelRow,
  SelectControl,
  CheckboxControl,
  TextControl,
} = wp.components;
const { useState } = wp.element;
const { withSelect } = wp.data;

// Registering A Block
registerBlockType("hsbg/hsbg-table", {
  title: "HSBG Tabella",
  category: "heisenberg",
  icon: "superhero",
  description: "First Hello World Block",
  keyword: ["test", "searchme"],

  attributes: {
    columns: {
      type: "number",
      default: 2,
    },
    selectedCategoryTag: {
      type: "string",
      default: "",
    },
    maxRowsToShow: {
      type: "number",
      default: 5,
    },
  },

  supports: {
    align: ["wide", "full"],
  },

  // Block Edit Function
  edit: withSelect((select) => {
    return {
      // Send a GET query to the REST API.
      categories: select("core").getEntityRecords("taxonomy", "category", {
        per_page: -1, // Otteniamo tutte le categorie
        hide_empty: true, // Nascondiamo le categorie vuote
      }),
      tags: select("core").getEntityRecords("taxonomy", "post_tag", {
        per_page: -1, // Otteniamo tutti i tag
        hide_empty: true, // Nascondiamo i tag vuoti
      }),
    };
  })(({ categories, tags, className, attributes, setAttributes }) => {
    const [isPreviewShown, setIsPreviewShown] = useState(false);
    const [formValues, setFormValues] = useState({
      selectedCategoryTag: attributes.selectedCategoryTag,
      columns: attributes.columns,
      maxRowsToShow: attributes.maxRowsToShow,
    });

    // Wait for categories and tags to be returned.
    if (!categories || !tags) {
      return "Loading...";
    }

    // If no categories and tags are returned.
    if (categories && categories.length === 0 && tags && tags.length === 0) {
      return "No taxonomy.";
    }

    const categoryOptions = categories
      ? categories.map((category) => ({
          label: category.name,
          value: category.id,
        }))
      : [];

    const tagOptions = tags
      ? tags.map((tag) => ({
          label: tag.name,
          value: tag.id,
        }))
      : [];

    const categoryTagOptions = [
      { label: "--- Select category ---", value: "" },
      ...categoryOptions,
      { label: "--- Select tag ---", value: "" },
      ...tagOptions,
    ];

    const handleInputChange = (key, value) => {
      setFormValues({ ...formValues, [key]: value });
    };

    const handlePreviewClick = () => {
      setIsPreviewShown(true);
      setAttributes({
        selectedCategoryTag: formValues.selectedCategoryTag,
        columns: formValues.columns,
        maxRowsToShow: formValues.maxRowsToShow,
      });
    };

    const handleCancelClick = () => {
      setIsPreviewShown(false);
    };

    return (
      <div className={`${className} container`}>
        {!isPreviewShown ? (
          <Placeholder
            icon="editor-table"
            label="HSBG Tabella"
            instructions="Settings data for the block."
          >
            <SelectControl
              label="View"
              value={attributes.selectedCategoryTag}
              options={categoryTagOptions}
              onChange={(value) =>
                setAttributes({ selectedCategoryTag: value })
              }
            />
            <TextControl
              label="Columns number"
              type="number"
              value={attributes.columns}
              onChange={(value) => setAttributes({ columns: parseInt(value) })}
            />
            <TextControl
              label="Rows number"
              type="number"
              value={attributes.maxRowsToShow}
              onChange={(value) =>
                setAttributes({ maxRowsToShow: parseInt(value) })
              }
            />
            <Button variant="primary">Create table</Button>
          </Placeholder>
        ) : (
          <p>Result!</p>
        )}
        <InspectorControls>
          <PanelBody title="Settings" initialOpen={true}>
            <PanelRow>
              <SelectControl
                label="View"
                value={attributes.selectedCategoryTag}
                options={categoryTagOptions}
                onChange={(value) =>
                  setAttributes({ selectedCategoryTag: value })
                }
              />
            </PanelRow>
            <PanelRow>
              <TextControl
                label="Columns number"
                type="number"
                value={attributes.columns}
                onChange={(value) =>
                  setAttributes({ columns: parseInt(value) })
                }
              />
            </PanelRow>
            <PanelRow>
              <TextControl
                label="Rows number"
                type="number"
                value={attributes.maxRowsToShow}
                onChange={(value) =>
                  setAttributes({ maxRowsToShow: parseInt(value) })
                }
              />
            </PanelRow>
          </PanelBody>
        </InspectorControls>
      </div>
    );
  }),

  //Block Save Function
  save: (props) => {
    return (
      <div>
        <p>Good!</p>
      </div>
    );
  },
});

Dziękuję tym, którzy poświęcają czas, aby mi odpowiedzieć, naprawdę doceniam!