Feature: Add missing block implementation

package.json

@@ -19,6 +19,7 @@
         "@stripe/stripe-js": "^1.52.0",
         "@svgr/webpack": "^6.5.1",
         "@wordpress/block-editor": "^11.2.0",
+        "@wordpress/block-library": "^8.15.0",
         "@wordpress/components": "^23.2.0",
         "@wordpress/compose": "6.2.0",
         "@wordpress/core-data": "^6.2.0",

src/FormBuilder/resources/js/form-builder/src/common/parseMissingBlocks.ts

@@ -0,0 +1,46 @@
+import {BlockInstance, getBlockType, getUnregisteredTypeHandlerName} from '@wordpress/blocks';
+
+/**
+ * Parses the blocks and replaces any missing blocks with the core missing block type.
+ *
+ * The way this works is that when a block is missing, we replace it with the missing block type and store the original block type json from the database in the originalContent attribute.
+ * Then, when the block is found again as a registered block, we replace the missing block with the stored originalContent attribute.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/missing
+ *
+ * @unreleased
+ */
+export default function parseMissingBlocks(blocks: BlockInstance[]){
+    blocks.forEach((sectionBlock, sectionBlockIndex) => {
+        sectionBlock.innerBlocks?.forEach((innerBlock, innerBlockIndex) => {
+            const blockType = getBlockType(innerBlock.name);
+
+            if (blockType === undefined) {
+                const coreMissingBlockType = getBlockType(getUnregisteredTypeHandlerName());
+
+                const missingBlockTypeReplacement = {
+                    ...coreMissingBlockType,
+                    attributes: {
+                        ...coreMissingBlockType.attributes,
+                        originalName: innerBlock.name,
+                        originalContent: JSON.stringify(innerBlock),
+                        originalUndelimitedContent: '',
+                    },
+                };
+
+                blocks[sectionBlockIndex].innerBlocks[innerBlockIndex] = {
+                    ...innerBlock,
+                    ...missingBlockTypeReplacement,
+                };
+            } else if (blockType.name === getUnregisteredTypeHandlerName()) {
+                const originalBlockType = getBlockType(innerBlock.attributes.originalName);
+
+                if (originalBlockType !== undefined) {
+                    blocks[sectionBlockIndex].innerBlocks[innerBlockIndex] = JSON.parse(
+                        innerBlock.attributes.originalContent
+                    );
+                }
+            }
+        });
+    });
+};

src/FormBuilder/resources/js/form-builder/src/common/registerBlocks.ts

@@ -1,4 +1,26 @@
-import {BlockSupports, registerBlockType} from '@wordpress/blocks';
+import {BlockSupports, registerBlockType, setUnregisteredTypeHandlerName} from '@wordpress/blocks';
+import {__experimentalGetCoreBlocks} from '@wordpress/block-library';
+
+/**
+ * Registers the missing block from WordPress core.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/missing
+ *
+ * @unreleased
+ */
+const registerMissingBlock = () => {
+    //TODO: should probably replace this with a custom block
+    const missingBlock = __experimentalGetCoreBlocks().find((block) => {
+        return block.name === 'core/missing';
+    });
+
+    if (missingBlock) {
+        const {name: missingBlockName} = missingBlock;
+        missingBlock.init();
+
+        setUnregisteredTypeHandlerName(missingBlockName);
+    }
+};
 
 const blockRegistrar = window.givewp.form.blocks;
 
@@ -14,6 +36,8 @@ const supportOverrides: BlockSupports = {
  * @since 0.4.0
  */
 export default function registerBlocks(): void {
+    registerMissingBlock();
+
     const [sectionBlock] = blockRegistrar.getAll();
 
     blockRegistrar.getAll().forEach(({name, settings}) => {

src/FormBuilder/resources/js/form-builder/src/common/revertMissingBlocks.ts

@@ -0,0 +1,22 @@
+import {BlockInstance, getBlockType, getUnregisteredTypeHandlerName} from '@wordpress/blocks';
+
+/**
+ * Replaces any missing blocks with the original block type.
+ *
+ * This is used to preserve the original block type definition when persisting the blocks to the database.
+ *
+ * @unreleased
+ */
+export default function revertMissingBlocks(blocks: BlockInstance[]) {
+    blocks.forEach((sectionBlock, sectionBlockIndex) => {
+        sectionBlock.innerBlocks?.forEach((innerBlock, innerBlockIndex) => {
+            const blockType = getBlockType(innerBlock.name);
+
+            if (blockType.name === getUnregisteredTypeHandlerName() && innerBlock.attributes?.originalContent) {
+                blocks[sectionBlockIndex].innerBlocks[innerBlockIndex] = JSON.parse(
+                    innerBlock.attributes.originalContent
+                );
+            }
+        });
+    });
+}

src/FormBuilder/resources/js/form-builder/src/containers/BlockEditorContainer.tsx

@@ -1,11 +1,12 @@
 import {BlockEditorProvider, BlockInspector} from '@wordpress/block-editor';
 import {Popover, SlotFillProvider} from '@wordpress/components';
-
 import {Sidebar} from '../components';
-
 import {setFormBlocks, useFormState, useFormStateDispatch} from '../stores/form-state';
-import BlockEditorInterfaceSkeletonContainer from '@givewp/form-builder/containers/BlockEditorInterfaceSkeletonContainer';
+import BlockEditorInterfaceSkeletonContainer
+    from '@givewp/form-builder/containers/BlockEditorInterfaceSkeletonContainer';
 import Onboarding from '@givewp/form-builder/components/onboarding';
+import parseMissingBlocks from '@givewp/form-builder/common/parseMissingBlocks';
+
 
 /**
  * @since 0.1.0
@@ -17,6 +18,8 @@ export default function BlockEditorContainer() {
         dispatch(setFormBlocks(blocks));
     };
 
+    parseMissingBlocks(blocks);
+
     return (
         <BlockEditorProvider value={blocks} onInput={dispatchFormBlocks} onChange={dispatchFormBlocks}>
             <Onboarding />

src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx

@@ -9,6 +9,7 @@ import {Header} from '../components';
 import {Storage} from '../common';
 import {FormSettings, FormStatus} from '@givewp/form-builder/types';
 import {setIsDirty} from '@givewp/form-builder/stores/form-state/reducer';
+import revertMissingBlocks from '@givewp/form-builder/common/revertMissingBlocks';
 
 const Logo = () => (
     <div
@@ -51,7 +52,9 @@ const HeaderContainer = ({
     const onSave = (formStatus: FormStatus) => {
         setSaving(formStatus);
 
-        dispatch(setFormSettings({formStatus}))
+        dispatch(setFormSettings({formStatus}));
+
+        revertMissingBlocks(blocks);
 
         Storage.save({blocks, formSettings: {...formSettings, formStatus}})
             .catch((error) => {