eddev 2.0.0-beta.116 → 2.0.0-beta.118

package/css/editor-styles.css

@@ -92,3 +92,7 @@
 .acf-block-panel .acf-empty-block-fields {
   display: none;
 }
+
+.simple-appender {
+  display: inline-flex !important;
+}

package/dist/app/lib/blocks/EditableText.d.ts

@@ -1,12 +1,25 @@
 import { ElementType } from "react";
 import { InlineValueStore } from "./inline-editing.js";
 export type InlineTextValueStore = InlineValueStore<string>;
+type BuiltinFormats = "core/bold" | "core/code" | "core/italic" | "core/link" | "core/strikethrough" | "core/underline" | "core/subscript" | "core/superscript" | "core/unknown" | "core/non-breaking-space" | "core/footnote";
 type Props<T extends ElementType> = {
     /** Specify a tag name or React component */
     as?: T;
     /** Prevents this text element from being multi-line */
     disableLineBreaks?: boolean;
-    /** Enables the rich text toolbar */
+    /**
+     * Specify which formatting options are allowed in this text element (bold, italics etc).
+     *
+     * By default, all options are enabled.
+     *
+     * Set to an empty array to disable formatting options.
+     *
+     * You can register new formats in `_editor.tsx` using the `defineEditorConfig` function.
+     **/
+    allowedFormats?: (BuiltinFormats | (string & {}))[];
+    /**
+     * @deprecated use `allowedFormats` instead
+     */
     inlineToolbar?: boolean;
     /** Specify default content to use on the frontend if nothing has been entered */
     defaultValue?: string;

package/dist/app/lib/blocks/EditableText.js

@@ -6,8 +6,13 @@ export function EditableText({ id, as, appendOnEnter, store, ...props }) {
         const readOnly = useBlockContext()?.readonly;
         if (!readOnly) {
             const [value, setValue] = useValueStore(store ?? id);
+            // const defaultFormats = wp.data.useSelect((select) => {
+            //   const formats = (select(wp.richText.store) as any).getFormatTypes()
+            //   console.log("U", formats)
+            //   return formats.map((f: any) => f.name)
+            // }, [])
             const appendBlocks = useBlockAppender();
-            return (_jsx(wp.blockEditor.RichText, { ...props, placeholder: props.placeholder ?? props.defaultValue, tagName: as, value: value || "", onChange: setValue, inlineToolbar: props.inlineToolbar, disableLineBreaks: props.disableLineBreaks, onKeyDownCapture: (e) => {
+            return (_jsx(wp.blockEditor.RichText, { ...props, placeholder: props.placeholder ?? props.defaultValue, tagName: as, value: value || "", onChange: setValue, allowedFormats: props.inlineToolbar === false ? [] : props.allowedFormats, disableLineBreaks: props.disableLineBreaks, "data-allowed-formats": props.allowedFormats?.join(" "), onKeyDownCapture: (e) => {
                     if (e.key === "Enter" && appendOnEnter && appendBlocks) {
                         appendBlocks([
                             wp.blocks.createBlock(typeof appendOnEnter === "string" ? appendOnEnter : "core/paragraph"),
@@ -21,11 +26,12 @@ export function EditableText({ id, as, appendOnEnter, store, ...props }) {
     let [value] = useValueStore(store ?? id);
     const handleClickEvent = useRouter((r) => r.handleClickEvent);
     const otherProps = { ...props };
-    delete otherProps.inlineToolbar;
     delete otherProps.disableLineBreaks;
     delete otherProps.id;
     otherProps.as = otherProps.asProp ?? undefined;
     delete otherProps.asProp;
+    delete otherProps.allowedFormats;
+    delete otherProps.disableLineBreaks;
     delete otherProps.placeholder;
     if (value === "" || typeof value !== "string") {
         if (props.defaultValue) {

package/dist/app/lib/blocks/InnerBlocks.d.ts

@@ -2,7 +2,7 @@ import { FunctionComponent } from "react";
 import { ContentBlockLayoutProps } from "./ContentBlocks.js";
 import { BlockTemplate } from "./editor/block-templates.js";
 type AppenderConfig = {
-    type: "default" | "button" | CustomBlockAppender;
+    type: "default" | "button" | "simple" | CustomBlockAppender;
     className?: string;
 };
 export type CustomBlockAppender = FunctionComponent<{
@@ -26,9 +26,13 @@ type InnerBlocksProps = {
      * NOTE: This will have no effect on the frontend, since no wrapper div is created on the frontend.
      **/
     adminClassName?: string;
-    /**
-     *
-     */
+    /** The default blocks to insert when there are no (non-templated) blocks */
+    defaultBlocks?: BlockTemplate;
+    /** Blocks to ensure are inserted at the top of the page */
+    headerTemplate?: BlockTemplate;
+    /** Blocks to ensure are inserted at the bottom of the page */
+    footerTemplate?: BlockTemplate;
+    /** A full-page block template */
     template?: BlockTemplate;
     /**
      * `false` allows all operations
@@ -41,7 +45,7 @@ type InnerBlocksProps = {
      * @default false
      *
      */
-    templateLock?: "all" | "insert" | "contentOnly" | false;
+    templateLock?: "all" | "insert" | "contentOnly" | "none" | false;
     appender?: AppenderConfig;
     prioritizedInserterBlocks?: ChildBlockTypeName[];
 } & ContentBlockLayoutProps;

package/dist/app/lib/blocks/InnerBlocks.js

@@ -1,25 +1,58 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
 import { ContentBlocks } from "./ContentBlocks.js";
-import { transformBlockTemplate } from "./editor/block-templates.js";
+import { applyTemplateBlocks, transformBlockTemplate } from "./editor/block-templates.js";
 import { blocksByTag } from "./editor/blocks-by-tag.js";
 import { useBlockContext, useInnerBlocks } from "./inline-editing.js";
-const Appender = (props) => {
+import { hash } from "object-code";
+const Appender = ({ config, ...props }) => {
     const clientId = useBlockContext()?.block[1].clientId;
-    if (props.type === "button") {
-        return _jsx(wp.blockEditor.ButtonBlockAppender, { className: props.className, rootClientId: clientId });
+    if (config?.type === "button") {
+        return _jsx(wp.blockEditor.ButtonBlockAppender, { ...props, rootClientId: clientId, className: config.className });
     }
-    else if (typeof props.type === "function") {
-        const Type = props.type;
-        return (_jsx(wp.blockEditor.Inserter, { renderToggle: (p) => {
+    else if (config?.type === "simple") {
+        return (_jsx(wp.blockEditor.ButtonBlockAppender, { ...props, rootClientId: clientId, className: (props.className || "") + " block-editor-inserter__toggle has-icon simple-appender" }));
+    }
+    else if (typeof config?.type === "function") {
+        const Type = config?.type;
+        return (_jsx(wp.blockEditor.Inserter, { rootClientId: clientId, renderToggle: (p) => {
                 return _jsx(Type, { ...p });
-            }, rootClientId: clientId }));
+            }, isAppender: true, 
+            // @ts-ignore
+            __experimentalIsQuick: true }));
+        // } else if (config?.type === "simple") {
+        //   return (
+        //     <wp.blockEditor.Inserter
+        //       clientId={clientId}
+        //       rootClientId={clientId}
+        //       renderToggle={(p: any) => {
+        //         return (
+        //           <button
+        //             className="simple-appender components-button block-editor-inserter__toggle !inline-flex has-icon"
+        //             onClick={() => p.onToggle()}
+        //           >
+        //             <svg
+        //               xmlns="http://www.w3.org/2000/svg"
+        //               viewBox="0 0 24 24"
+        //               width="24"
+        //               height="24"
+        //               aria-hidden="true"
+        //               focusable="false"
+        //             >
+        //               <path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"></path>
+        //             </svg>
+        //           </button>
+        //         )
+        //       }}
+        //       isAppender
+        //       // @ts-ignore
+        //       __experimentalIsQuick
+        //     />
+        //   )
     }
     else {
-        return (_jsx(wp.blockEditor.DefaultBlockAppender
         // @ts-ignore
-        , { 
-            // @ts-ignore
-            className: props.className, rootClientId: clientId, lastBlockClientId: clientId }));
+        return _jsx(wp.blockEditor.InnerBlocks.DefaultBlockAppender, { ...props });
     }
 };
 export function createAppender(comp) {
@@ -33,29 +66,35 @@ export function createAppender(comp) {
 export function InnerBlocks(props) {
     if (env.admin) {
         const inlineContext = useBlockContext();
+        const appender = useMemo(() => {
+            return (p) => _jsx(Appender, { config: props.appender, ...p });
+        }, [props.appender]);
         if (!inlineContext?.readonly) {
             const innerBlocksProps = wp.blockEditor.useInnerBlocksProps({}, {
                 orientation: props.orientation ?? "vertical",
                 allowedBlocks: props.allowedBlocks ? blocksByTag.expand(props.allowedBlocks) : undefined,
                 prioritizedInserterBlocks: props.prioritizedInserterBlocks,
-                renderAppender: props.appender
-                    ? () => _jsx(Appender, { ...props.appender })
-                    : wp.blockEditor.InnerBlocks.ButtonBlockAppender,
-                templateLock: props.templateLock ?? false,
+                renderAppender: appender,
+                templateLock: props.templateLock === "none" ? false : (props.templateLock ?? false),
                 template: props.template ? transformBlockTemplate(props.template) : undefined,
             });
+            /**
+             * A little bit experimental
+             *
+             * Adds support for headerTemplate/defaultBlocks/footerTemplate, which was first introduced in `_editor.tsx` for generate templates.
+             */
+            const blockId = inlineContext?.block[1].clientId;
+            useEffect(() => {
+                if (props.defaultBlocks || props.headerTemplate || props.footerTemplate) {
+                    const newBlocks = applyTemplateBlocks(inlineContext?.innerBlocks ?? [], props);
+                    wp.data.dispatch(wp.blockEditor.store).replaceInnerBlocks(blockId, newBlocks);
+                }
+            }, [
+                hash(inlineContext?.innerBlocks.map((b) => [b.blockName, b.clientId])),
+                hash([props.template, props.defaultBlocks, props.headerTemplate, props.footerTemplate]),
+                blockId,
+            ]);
             return (_jsx("div", { ...innerBlocksProps, className: [innerBlocksProps.className, props.adminClassName].filter(Boolean).join(" ") }));
-            // return (
-            //   <wp.blockEditor.InnerBlocks
-            //     // @ts-ignore
-            //     orientation={props.orientation}
-            //     prioritizedInserterBlocks={props.prioritizedInserterBlocks}
-            //     allowedBlocks={props.allowedBlocks ? blocksByTag.expand(props.allowedBlocks) : undefined}
-            //     renderAppender={props.appender ? () => <Appender {...props.appender!} /> : undefined}
-            //     templateLock={(props.templateLock as any) ?? false}
-            //     template={props.template ? transformBlockTemplate(props.template) : undefined}
-            //   />
-            // )
         }
     }
     const blocks = useInnerBlocks();

package/dist/app/lib/blocks/defineBlock.d.ts

@@ -1,2 +1,5 @@
 import { ComponentType, ReactNode } from "react";
 export declare function defineBlock<TName extends keyof BlockProps>(name: TName, component: (props: BlockProps[TName]) => ReactNode): ComponentType<BlockProps[TName]>;
+export declare namespace defineBlock {
+    var meta: (name: string, meta: any) => void;
+}

package/dist/app/lib/blocks/defineBlock.js

@@ -1,3 +1,10 @@
+import { blockMetaDescriptors } from "./editor/installGutenbergHooks";
+import { resolveAcfBlockName } from "./editor/block-templates";
 export function defineBlock(name, component) {
     return component;
 }
+defineBlock.meta = (name, meta) => {
+    if (env.admin) {
+        blockMetaDescriptors.set(resolveAcfBlockName(name), meta);
+    }
+};

package/dist/app/lib/blocks/editor/EditorHighlights.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 export function EditorHighlights(props) {
-    const ref = useRef(null);
+    const [element, setElement] = useState(null);
     const [controller, setController] = useState(null);
     // wp.data.select('core/editor').isBlockSelected
     // const isSelected = wp.data.useSelect(
@@ -9,12 +9,12 @@ export function EditorHighlights(props) {
     //   [props.clientId]
     // )
     useEffect(() => {
-        if (!props.enabled)
+        if (!props.enabled || !element)
             return;
-        const controller = new HighlightController(ref.current);
+        const controller = new HighlightController(element);
         setController(controller);
         return () => controller.teardown();
-    }, [props.enabled]);
+    }, [props.enabled, element]);
     useEffect(() => {
         if (controller) {
             controller.isSelected = false;
@@ -22,7 +22,38 @@ export function EditorHighlights(props) {
             controller.update();
         }
     }, [controller, false]);
-    return (_jsx("div", { ref: ref, style: { display: "contents" }, onPointerEnter: () => controller?.enable(), onPointerLeave: () => controller?.disable(), children: props.children }));
+    useEffect(() => {
+        const element = document.getElementById(`block-${props.clientId}`);
+        if (element) {
+            setElement(element);
+        }
+        else {
+            setElement(null);
+        }
+    }, [props.clientId]);
+    useEffect(() => {
+        if (controller && element) {
+            const onPointerEnter = () => controller.enable();
+            const onPointerLeave = () => controller.disable();
+            element.addEventListener("pointerenter", onPointerEnter);
+            element.addEventListener("pointerleave", onPointerLeave);
+            return () => {
+                element.removeEventListener("pointerenter", onPointerEnter);
+                element.removeEventListener("pointerleave", onPointerLeave);
+            };
+        }
+    }, [element, controller]);
+    return _jsx(_Fragment, { children: props.children });
+    // return (
+    //   <div
+    //     ref={ref}
+    //     style={{ display: "contents" }}
+    //     // onPointerEnter={() => controller?.enable()}
+    //     // onPointerLeave={() => controller?.disable()}
+    //   >
+    //     {props.children}
+    //   </div>
+    // )
 }
 class HighlightController {
     root;
@@ -40,7 +71,7 @@ class HighlightController {
             let editables = Array.from(this.root.querySelectorAll("[contenteditable=true], .editable-slot"));
             let childBlocks = Array.from(this.root.querySelectorAll(".wp-block"));
             const childIsSelected = this.root.querySelectorAll(".editor-highlighter-root-selected").length > 0;
-            this.block = childBlocks[0];
+            this.block = this.root;
             childBlocks = childBlocks.slice(1);
             editables = childIsSelected
                 ? []
@@ -96,7 +127,10 @@ class HighlightController {
         el.style.position = "absolute";
         el.style.pointerEvents = "none";
         el.style.zIndex = "20";
-        el.className = "editor-highlight";
+        el.classList.add("editor-highlight");
+        if (target.getAttribute("data-editor-higlight-class")) {
+            el.classList.add(target.getAttribute("data-editor-higlight-class"));
+        }
         this.block.appendChild(el);
         return el;
     }

package/dist/app/lib/blocks/editor/EditorSupport.js

@@ -1,17 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, Suspense, useContext } from "react";
+import { createContext, Suspense, useContext, useEffect } from "react";
 import { blockManifestReader } from "../../internal/read-block-manifest.js";
 import { APIProvider } from "../../../utils/APIProvider.js";
 import { ErrorBoundaryEditor } from "./ErrorBoundaryEditor.js";
 export const BlockContext = createContext(undefined);
 export function EditableBlock({ payload }) {
-    const block = useContext(BlockContext);
-    if (!block)
+    if (!env.admin)
+        throw new Error("`EditableBlock` can only be used in the admin environment");
+    const info = useContext(BlockContext);
+    useEffect(() => {
+        const block = wp.data.select("core/block-editor").getBlock(info?.props.clientId);
+        if (block && block.attributes) {
+            // @ts-ignore
+            block.attributes.props = payload;
+        }
+    }, [payload, info?.props.clientId]);
+    if (!info)
         return null;
-    const getBlock = () => {
-        return blockManifestReader.value[block.name];
-    };
-    const BlockComponent = getBlock();
+    const BlockComponent = blockManifestReader.value[info.name];
     if (!BlockComponent)
         return _jsx("div", { children: "Unable to load block component" });
     return (_jsx(ErrorBoundaryEditor, { children: _jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(BlockComponent, { ...payload }) }) }) }));

package/dist/app/lib/blocks/editor/block-templates.d.ts

@@ -1,3 +1,9 @@
 export type BlockTemplate = [name: ChildBlockTypeName, props: any, children?: BlockTemplate][];
 export declare function resolveAcfBlockName(name: string): string;
 export declare function transformBlockTemplate(template: BlockTemplate): BlockTemplate;
+export declare function applyTemplateBlocks(currentBlocks: any[], config: {
+    defaultBlocks?: BlockTemplate;
+    headerTemplate?: BlockTemplate;
+    footerTemplate?: BlockTemplate;
+}): any[];
+export declare function transformTemplateToBlocks(template: BlockTemplate, locked?: boolean, isFromTemplate?: boolean): any;

package/dist/app/lib/blocks/editor/block-templates.js

@@ -7,3 +7,67 @@ export function transformBlockTemplate(template) {
         return [resolveAcfBlockName(name), props, children ? transformBlockTemplate(children) : undefined];
     });
 }
+export function applyTemplateBlocks(currentBlocks, config) {
+    const templateBlocks = currentBlocks.filter((block) => block.attributes.isFromTemplate);
+    let header = config.headerTemplate ? syncBlocks(transformTemplateToBlocks(config.headerTemplate)) : [];
+    let footer = config.footerTemplate ? syncBlocks(transformTemplateToBlocks(config.footerTemplate)) : [];
+    let blocks = currentBlocks.filter((block) => !header.includes(block) && !footer.includes(block));
+    blocks.forEach((block) => {
+        delete block.attributes.lock;
+        delete block.isFromTemplate;
+    });
+    // const blocksToDelete = currentBlocks.filter((block: any) => {
+    //   return !header.includes(block) && !footer.includes(block) && !blocks.includes(block)
+    // })
+    // blocksToDelete.forEach((block: any) => {
+    //   delete block.attributes.lock
+    //   delete block.isFromTemplate
+    // })
+    // blocks = [...blocks, ...blocksToDelete]
+    // console.log("blocks", blocks)
+    // console.log("blocksToDelete", blocksToDelete)
+    if (!blocks.length && config.defaultBlocks) {
+        blocks = transformTemplateToBlocks(config.defaultBlocks, false, false);
+    }
+    let newBlocks = [...header, ...blocks, ...footer];
+    function syncBlocks(blocks) {
+        return blocks.map((block) => {
+            const matched = templateBlocks.find((templateBlock) => templateBlock.name === block.name);
+            templateBlocks.splice(templateBlocks.indexOf(matched), 1);
+            if (matched) {
+                matched.attributes.lock = block.attributes.lock;
+                return matched;
+            }
+            return block;
+        });
+    }
+    return newBlocks;
+}
+export function transformTemplateToBlocks(template, locked = true, isFromTemplate = true) {
+    return template.map(([name, props, children]) => {
+        const attributes = {
+            data: {},
+            inline: {},
+            isFromTemplate: isFromTemplate,
+            lock: undefined,
+        };
+        if (props.locked === false) {
+            attributes.lock = { move: false, remove: false };
+        }
+        else if (locked || props.locked === true || props.locked === "all") {
+            attributes.lock = { move: true, remove: true };
+        }
+        else {
+            attributes.lock = props.lock;
+        }
+        Object.assign(attributes, props);
+        return {
+            clientId: "block-" + Math.random().toString(36),
+            name: resolveAcfBlockName(name),
+            attributes: attributes,
+            innerBlocks: children ? transformTemplateToBlocks(children, false, isFromTemplate) : [],
+            isValid: true,
+            validationIssues: [],
+        };
+    });
+}

package/dist/app/lib/blocks/editor/create-block.d.ts

@@ -0,0 +1,9 @@
+import { BlockInstance } from "../inline-editing";
+/**
+ * Creates a block instance for the editor. This doesn't add the block to the editor on it's own.
+ * @param name The name of the block
+ * @param attributes
+ * @param innerBlocks
+ * @returns
+ */
+export declare function createBlock(name: ChildBlockTypeName, attributes?: Record<string, any>, innerBlocks?: BlockInstance[]): BlockInstance;

package/dist/app/lib/blocks/editor/create-block.js

@@ -0,0 +1,13 @@
+/**
+ * Creates a block instance for the editor. This doesn't add the block to the editor on it's own.
+ * @param name The name of the block
+ * @param attributes
+ * @param innerBlocks
+ * @returns
+ */
+export function createBlock(name, attributes = {}, innerBlocks = []) {
+    if (!env.admin) {
+        throw new Error("`createBlock` can only be used in the admin environment");
+    }
+    return wp.blocks.createBlock(name, attributes, innerBlocks);
+}

package/dist/app/lib/blocks/editor/editor-config.d.ts

@@ -44,7 +44,6 @@ export declare const editorConfigStore: {
     currentBlocksConfig: EditorConfigItem;
 };
 export declare function configureEditorBlocks(config: EditorConfigItem): void;
-export declare function transformTemplateToBlocks(template: BlockTemplate, locked?: boolean, isFromTemplate?: boolean): any;
 type PostInfo = {
     type: PostTypeName;
     isPattern: false;
@@ -72,9 +71,45 @@ type Matcher = {
     /** Configuration for the editor, when the post type and template match */
     config: EditorConfigItem | ((post: PostInfo) => EditorConfigItem);
 };
+export type BlockTransform = {
+    from: ChildBlockTypeName[];
+    to: ChildBlockTypeName;
+};
+export type CustomRichTextFormat = {
+    /** The ID of the format, eg. `"custom/fancy"` */
+    id: string;
+    /** The title of the format, shown on the tooltip */
+    title: string;
+    /**
+     * The HTML tag name to use.
+     * @default `"span"`
+     **/
+    tagName?: string;
+    /**
+     * The class name to apply to the element.
+     * @default `undefined`
+     **/
+    className?: string;
+    /**
+     * The icon to use in the toolbar.
+     */
+    icon?: string;
+    /**
+     * Whether format makes content interactive or not.
+     * @default `false`
+     */
+    interactive?: boolean;
+    /**
+     * Whether to disable this format by default. If `true`, you must pass the format ID to `allowedFormats` on a `EditableText` component.
+     *
+     * @default `false`
+     */
+    disabledByDefault?: boolean;
+};
 type EditorConfig = {
-    /** A list of template/post type matchers, and the resulting editor config */
-    matchers: Matcher[];
+    customRichTextFormats?: CustomRichTextFormat[];
+    /** A list of template/post type matchers, and resulting editor config that they will apply */
+    matchers?: Matcher[];
 };
 /**
  * This call should be placed in blocks/_editor.tsx

package/dist/app/lib/blocks/editor/editor-config.js

@@ -1,5 +1,5 @@
 import { proxy } from "valtio";
-import { resolveAcfBlockName, transformBlockTemplate } from "./block-templates.js";
+import { applyTemplateBlocks, resolveAcfBlockName, transformBlockTemplate, transformTemplateToBlocks, } from "./block-templates.js";
 export const editorConfigStore = proxy({
     config: null,
     currentBlocksConfig: {},
@@ -26,68 +26,8 @@ export function configureEditorBlocks(config) {
         }
     }
     const currentBlocks = wp.data.select("core/block-editor").getBlocks();
-    const templateBlocks = currentBlocks.filter((block) => block.attributes.isFromTemplate);
-    let header = config.headerTemplate ? syncBlocks(transformTemplateToBlocks(config.headerTemplate)) : [];
-    let footer = config.footerTemplate ? syncBlocks(transformTemplateToBlocks(config.footerTemplate)) : [];
-    let blocks = currentBlocks.filter((block) => !header.includes(block) && !footer.includes(block));
-    blocks.forEach((block) => {
-        delete block.attributes.lock;
-        delete block.isFromTemplate;
-    });
-    // const blocksToDelete = currentBlocks.filter((block: any) => {
-    //   return !header.includes(block) && !footer.includes(block) && !blocks.includes(block)
-    // })
-    // blocksToDelete.forEach((block: any) => {
-    //   delete block.attributes.lock
-    //   delete block.isFromTemplate
-    // })
-    // blocks = [...blocks, ...blocksToDelete]
-    // console.log("blocks", blocks)
-    // console.log("blocksToDelete", blocksToDelete)
-    if (!blocks.length && config.defaultBlocks) {
-        blocks = transformTemplateToBlocks(config.defaultBlocks, false, false);
-    }
-    let newBlocks = [...header, ...blocks, ...footer];
+    const newBlocks = applyTemplateBlocks(currentBlocks, config);
     wp.data.dispatch("core/block-editor").resetBlocks(newBlocks);
-    function syncBlocks(blocks) {
-        return blocks.map((block) => {
-            const matched = templateBlocks.find((templateBlock) => templateBlock.name === block.name);
-            templateBlocks.splice(templateBlocks.indexOf(matched), 1);
-            if (matched) {
-                matched.attributes.lock = block.attributes.lock;
-                return matched;
-            }
-            return block;
-        });
-    }
-}
-export function transformTemplateToBlocks(template, locked = true, isFromTemplate = true) {
-    return template.map(([name, props, children]) => {
-        const attributes = {
-            data: {},
-            inline: {},
-            isFromTemplate: isFromTemplate,
-            lock: undefined,
-        };
-        if (props.locked === false) {
-            attributes.lock = { move: false, remove: false };
-        }
-        else if (locked || props.locked === true || props.locked === "all") {
-            attributes.lock = { move: true, remove: true };
-        }
-        else {
-            attributes.lock = props.lock;
-        }
-        Object.assign(attributes, props);
-        return {
-            clientId: "block-" + Math.random().toString(36),
-            name: resolveAcfBlockName(name),
-            attributes: attributes,
-            innerBlocks: children ? transformTemplateToBlocks(children, false, isFromTemplate) : [],
-            isValid: true,
-            validationIssues: [],
-        };
-    });
 }
 /**
  * This call should be placed in blocks/_editor.tsx
@@ -125,7 +65,7 @@ export function updateTemplateConfig() {
     const editorConfig = editorConfigStore.config;
     if (!editorConfig)
         return;
-    const matched = editorConfig.matchers.find((matcher) => {
+    const matched = editorConfig.matchers?.find((matcher) => {
         return matcher.match(postInfo);
     });
     if (matched) {

package/dist/app/lib/blocks/editor/installGutenbergHooks.d.ts

@@ -1,2 +1,5 @@
+export declare const blockMetaDescriptors: Map<string, BlockMeta> & {
+    $$valtioSnapshot: Omit<Map<string, BlockMeta>, "set" | "clear" | "delete">;
+};
 export declare function whenEditorIsReady(): Promise<void>;
 export declare function installEDGutenbergHooks(): void;

package/dist/app/lib/blocks/editor/installGutenbergHooks.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { useSnapshot } from "valtio";
+import { subscribe, useSnapshot } from "valtio";
+import { proxyMap } from "valtio/utils";
 import { getBlockMetadata } from "../block-utils.js";
 import { InlineEditingContextProvider } from "../inline-editing.js";
 import { EditorHighlights } from "./EditorHighlights.js";
 import { BlockContext, EditableBlock } from "./EditorSupport.js";
+import { resolveAcfBlockName } from "./block-templates.js";
 import { blocksByTag } from "./blocks-by-tag.js";
 import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config.js";
 import { rootBlocks } from "./root-blocks.js";
@@ -21,6 +23,7 @@ function listenForHandleResize() {
         }
     }, 100);
 }
+export const blockMetaDescriptors = proxyMap();
 export function whenEditorIsReady() {
     return new Promise((resolve) => {
         let ready = false;
@@ -57,6 +60,45 @@ export function installEDGutenbergHooks() {
         };
     }, "withClientIdClassName");
     wp.hooks.addFilter("editor.BlockListBlock", "ed", withClientIdClassName);
+    // Manage custom rich text formats
+    setTimeout(() => {
+        subscribe(editorConfigStore, () => {
+            const formats = editorConfigStore.config?.customRichTextFormats;
+            if (formats) {
+                const activeFormats = wp.data.select("core/rich-text").getFormatTypes();
+                formats.forEach((format) => {
+                    if (activeFormats.some((f) => f.name === format.id)) {
+                        wp.richText.unregisterFormatType(format.id);
+                    }
+                    const EditComponent = (props) => {
+                        if (format.disabledByDefault) {
+                            const explicitlyEnabled = props.contentRef.current
+                                ?.getAttribute("data-allowed-formats")
+                                ?.includes(format.id);
+                            if (!explicitlyEnabled) {
+                                return null;
+                            }
+                        }
+                        return (_jsx(wp.components.Fill, { name: "BlockFormatControls", children: _jsx(wp.components.ToolbarButton, { icon: format.icon, title: format.title, onClick: () => {
+                                    props.onChange(wp.richText.toggleFormat(props.value, {
+                                        type: format.id,
+                                    }));
+                                }, isActive: props.isActive }) }));
+                    };
+                    wp.richText.registerFormatType(format.id, {
+                        name: format.id,
+                        title: format.title,
+                        tagName: format.tagName ?? "span",
+                        className: format.className,
+                        interactive: false,
+                        edit: EditComponent,
+                        // @ts-ignore
+                        disabledByDefault: format.disabledByDefault,
+                    });
+                });
+            }
+        });
+    });
     listenForHandleResize();
     // Remove unwanted formatting options
     // https://developer.wordpress.org/block-editor/how-to-guides/format-api/
@@ -81,7 +123,19 @@ export function installEDGutenbergHooks() {
             item.attributes.inline = { type: "object" };
             item.attributes.values = { type: "object" };
             item.attributes.isFromTemplate = { type: "boolean" };
+            item.supports.mode = false;
             item.supports.customClassName = false;
+            // item.transforms = {
+            //   to: [
+            //     {
+            //       type: "block",
+            //       blocks: ["core/paragraph"],
+            //       transform: (attributes: any) => {
+            //         return wp.blocks.createBlock("core/paragraph", { content: JSON.stringify(attributes) })
+            //       },
+            //     },
+            //   ],
+            // }
             item.edit = function (props) {
                 const self = this;
                 useEffect(() => {
@@ -127,6 +181,19 @@ export function installEDGutenbergHooks() {
                     return undefined;
                 return blocksByTag.expand([...(item.parent ?? []), ...(isRootBlock ? ["core/post-content"] : [])]);
             },
+            get transforms() {
+                const result = {
+                    from: item.transforms?.from ?? [],
+                    to: item.transforms?.to ?? [],
+                    ungroup: item.transforms?.ungroup,
+                };
+                const meta = blockMetaDescriptors.get(resolveAcfBlockName(name));
+                if (meta?.transforms) {
+                    result.from = [...(result.from ?? []), ...(meta.transforms.from ?? [])];
+                    result.to = [...(result.to ?? []), ...(meta.transforms.to ?? [])];
+                }
+                return result;
+            },
             get ancestor() {
                 if (name === "core/block")
                     return undefined;

package/dist/app/lib/blocks/index.d.ts

@@ -1,9 +1,10 @@
+export * from "./block-utils.js";
 export * from "./ContentBlocks.js";
-export * from "./EditableText.js";
-export * from "./InnerBlocks.js";
 export * from "./defineBlock.js";
+export * from "./EditableText.js";
 export * from "./editor/controls.js";
-export * from "./editor/usePostEditor.js";
-export * from "./block-utils.js";
+export * from "./editor/create-block.js";
 export { defineEditorConfig } from "./editor/editor-config.js";
+export * from "./editor/usePostEditor.js";
 export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing.js";
+export * from "./InnerBlocks.js";

package/dist/app/lib/blocks/index.js

@@ -1,9 +1,10 @@
+export * from "./block-utils.js";
 export * from "./ContentBlocks.js";
-export * from "./EditableText.js";
-export * from "./InnerBlocks.js";
 export * from "./defineBlock.js";
+export * from "./EditableText.js";
 export * from "./editor/controls.js";
-export * from "./editor/usePostEditor.js";
-export * from "./block-utils.js";
+export * from "./editor/create-block.js";
 export { defineEditorConfig } from "./editor/editor-config.js";
+export * from "./editor/usePostEditor.js";
 export { useBlockContext, useInlineEditableValue, useInnerBlocks, useTemplate } from "./inline-editing.js";
+export * from "./InnerBlocks.js";

package/dist/app/lib/blocks/inline-editing.d.ts

@@ -2,6 +2,14 @@ import { ContentBlock } from "./ContentBlocks.js";
 import { PropsWithChildren } from "react";
 type Attributes = Record<string, any>;
 export type InlineValueStore<T> = [value: T, setValue: (value: T) => void];
+export type BlockInstance = {
+    attributes: any;
+    clientId: string;
+    innerBlocks: BlockInstance[];
+    isValid: boolean;
+    name: string;
+    originalContent?: string | undefined;
+};
 type InlineEditingContext = {
     values: Attributes;
     innerBlocks: ContentBlock[];

package/dist/app/lib/devtools/hooks/useTailwind.d.ts

@@ -915,8 +915,8 @@ export declare function useTailwindConfig(): {
             readonly flex?: boolean | undefined;
             readonly blur?: boolean | undefined;
             readonly resize?: boolean | undefined;
-            readonly position?: boolean | undefined;
             readonly columns?: boolean | undefined;
+            readonly position?: boolean | undefined;
             readonly preflight?: boolean | undefined;
             readonly container?: boolean | undefined;
             readonly accessibility?: boolean | undefined;
@@ -1960,8 +1960,8 @@ export declare function useTailwindConfig(): {
                     readonly flex?: boolean | undefined;
                     readonly blur?: boolean | undefined;
                     readonly resize?: boolean | undefined;
-                    readonly position?: boolean | undefined;
                     readonly columns?: boolean | undefined;
+                    readonly position?: boolean | undefined;
                     readonly preflight?: boolean | undefined;
                     readonly container?: boolean | undefined;
                     readonly accessibility?: boolean | undefined;
@@ -2980,8 +2980,8 @@ export declare function useTailwindConfig(): {
         readonly flex?: boolean | undefined;
         readonly blur?: boolean | undefined;
         readonly resize?: boolean | undefined;
-        readonly position?: boolean | undefined;
         readonly columns?: boolean | undefined;
+        readonly position?: boolean | undefined;
         readonly preflight?: boolean | undefined;
         readonly container?: boolean | undefined;
         readonly accessibility?: boolean | undefined;
@@ -4051,8 +4051,8 @@ export declare function useTailwindConfig(): {
                     readonly flex?: boolean | undefined;
                     readonly blur?: boolean | undefined;
                     readonly resize?: boolean | undefined;
-                    readonly position?: boolean | undefined;
                     readonly columns?: boolean | undefined;
+                    readonly position?: boolean | undefined;
                     readonly preflight?: boolean | undefined;
                     readonly container?: boolean | undefined;
                     readonly accessibility?: boolean | undefined;
@@ -5069,8 +5069,8 @@ export declare function useTailwindConfig(): {
                 readonly flex?: boolean | undefined;
                 readonly blur?: boolean | undefined;
                 readonly resize?: boolean | undefined;
-                readonly position?: boolean | undefined;
                 readonly columns?: boolean | undefined;
+                readonly position?: boolean | undefined;
                 readonly preflight?: boolean | undefined;
                 readonly container?: boolean | undefined;
                 readonly accessibility?: boolean | undefined;

package/dist/node/cli/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.116";
+export declare const VERSION = "2.0.0-beta.118";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.116";
+export const VERSION = "2.0.0-beta.118";

package/dist/node/compiler/get-vite-config.d.ts

@@ -11,7 +11,10 @@ export type Args = {
     client: boolean;
 };
 export declare function envPlugin(args: Args): PluginOption;
-export declare function reactPlugin(): PluginOption[];
+type ReactPluginArgs = {
+    retainBlockMeta?: boolean;
+};
+export declare function reactPlugin(args?: ReactPluginArgs): PluginOption[];
 /**
  * Turns on SSR module proxying,
  */
@@ -19,3 +22,4 @@ export declare function ssrPlugin(): PluginOption;
 export declare function corePlugins(args: Args): PluginOption[];
 export declare function storybookVitePlugins(args: Args): PluginOption[];
 export declare function getViteConfig(args: Args): InlineConfig;
+export {};

package/dist/node/compiler/get-vite-config.js

@@ -34,14 +34,35 @@ export function envPlugin(args) {
         preventAssignment: true,
     });
 }
-export function reactPlugin() {
+export function reactPlugin(args = {}) {
+    let currentFile = null;
     return react({
         babel: {
             overrides: [{ test: /types\./, compact: true }],
             plugins: [
                 {
                     visitor: {
-                        ExportNamedDeclaration: (path) => {
+                        Program: {
+                            enter: (path, state) => {
+                                const filename = state.file.opts.filename;
+                                if (filename.match(/.\/blocks\/.+\.tsx/)) {
+                                    currentFile = { type: "block", id: filename.replace(/.*\/blocks\/(.+)\.tsx/, "$1") };
+                                }
+                                else if (filename.match(/.\/views\/.+\.tsx/)) {
+                                    currentFile = { type: "view", id: filename.replace(/.*\/views\/(.+)\.tsx/, "$1") };
+                                }
+                                else {
+                                    currentFile = null;
+                                }
+                            },
+                            exit: (path, state) => {
+                                currentFile = null;
+                                // console.log("Exiting", state.file.opts.filename)
+                            },
+                        },
+                        ExportNamedDeclaration: (path, state) => {
+                            if (!currentFile)
+                                return;
                             const decl = path.node.declaration;
                             if (decl?.type !== "VariableDeclaration")
                                 return;
@@ -49,11 +70,20 @@ export function reactPlugin() {
                             if (!t.isIdentifier(id))
                                 return;
                             if (id.name === "meta") {
-                                path.remove();
+                                if (args.retainBlockMeta && currentFile?.type === "block") {
+                                    // Adds a defineBlock.meta("name", meta) call, which can be used by the editor
+                                    path.replaceWith(t.callExpression(t.memberExpression(t.identifier("defineBlock"), t.identifier("meta")), [
+                                        t.stringLiteral(currentFile.id),
+                                        decl.declarations[0].init,
+                                    ]));
+                                }
+                                else {
+                                    path.remove();
+                                }
                             }
                         },
                         ExportDefaultDeclaration: (path) => {
-                            if (!path.hub.file.opts.filename.match(/\/(blocks|views)\//))
+                            if (!currentFile)
                                 return;
                             if (path.node.declaration.type === "CallExpression") {
                                 const call = path.node.declaration;
@@ -145,7 +175,12 @@ function buildStatusPlugin(console) {
     };
 }
 export function corePlugins(args) {
-    return [args.serverless && ssrPlugin(), envPlugin(args), tsconfigPaths(), reactPlugin()].flat();
+    return [
+        args.serverless && ssrPlugin(),
+        envPlugin(args),
+        tsconfigPaths(),
+        reactPlugin({ retainBlockMeta: args.target === "cms" }),
+    ].flat();
 }
 export function storybookVitePlugins(args) {
     return [args.serverless && ssrPlugin(), envPlugin(args), tsconfigPaths()].flat();
@@ -176,7 +211,14 @@ export function getViteConfig(args) {
         define: {
             "process.env.NODE_ENV": JSON.stringify(args.mode),
         },
-        plugins: [tsconfigPaths(), envPlugin(args), reactPlugin(), buildStatusPlugin(console)],
+        plugins: [
+            tsconfigPaths(),
+            envPlugin(args),
+            reactPlugin({
+                retainBlockMeta: args.target === "cms",
+            }),
+            buildStatusPlugin(console),
+        ],
         build: {
             manifest: true,
             sourcemap: true,

package/dist/node/types/block-type.d.ts

@@ -40,8 +40,8 @@ export declare const BlockMetaSchema: z.ZodObject<{
     slug: string;
     tags: string[];
     flags: Record<string, any>;
-    category: string;
     parent: string[];
+    category: string;
     acfName: string;
     fileName: string;
     graphqlFieldName: string;
@@ -72,9 +72,9 @@ export declare const BlockMetaSchema: z.ZodObject<{
     mode?: "both" | "edit" | "preview" | undefined;
     tags?: string[] | undefined;
     flags?: Record<string, any> | undefined;
+    parent?: string[] | undefined;
     icon?: string | undefined;
     category?: string | undefined;
-    parent?: string[] | undefined;
     description?: string | undefined;
     keywords?: string[] | undefined;
     templates?: string[] | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.116",
+  "version": "2.0.0-beta.118",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -135,7 +135,7 @@
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-dom": "^108.3.1",
+    "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.4"
   }
 }

package/types.meta.d.ts

@@ -153,6 +153,14 @@ declare global {
      * Set to `false` for blocks which should not be added manually, such as deprecated blocks, or blocks which are added automatically using template locks.
      */
     inserter?: boolean
+
+    /**
+     * Transforms
+     */
+    transforms?: {
+      from?: AnyBlockTransform[]
+      to?: AnyBlockTransform[]
+    }
   }
 }
 type BlockIcon =
@@ -316,4 +324,101 @@ type BlockIcon =
   | "lightbulb"
   | "smiley"
 
+type TransformRawSchema = {
+  [k in keyof HTMLElementTagNameMap | "#text"]?: {
+    attributes?: string[] | undefined
+    require?: Array<keyof HTMLElementTagNameMap> | undefined
+    classes?: Array<string | RegExp> | undefined
+    children?: TransformRawSchema | undefined
+  }
+}
+
+interface TransformBlock<T extends Record<string, any>> {
+  type: "block"
+  priority?: number | undefined
+  blocks: string[]
+  isMatch?(attributes: T, block: string | string[]): boolean
+  isMultiBlock?: boolean | undefined
+  transform(attributes: T): BlockInstance<Partial<T>>
+}
+
+interface TransformEnter<T extends Record<string, any>> {
+  type: "enter"
+  priority?: number | undefined
+  regExp: RegExp
+  transform(): BlockInstance<Partial<T>>
+}
+
+interface TransformFiles<T extends Record<string, any>> {
+  type: "files"
+  priority?: number | undefined
+  isMatch?(files: FileList): boolean
+  transform(files: FileList, onChange?: (id: string, attrs: T) => void): BlockInstance<Partial<T>>
+}
+
+interface TransformPrefix<T extends Record<string, any>> {
+  type: "prefix"
+  priority?: number | undefined
+  prefix: string
+  transform(content: string): BlockInstance<Partial<T>>
+}
+
+interface TransformRaw<T extends Record<string, any>> {
+  type: "raw"
+  priority?: number | undefined
+  /**
+   * Comma-separated list of selectors, no spaces.
+   *
+   * @example 'p,div,h1,.css-class,#id'
+   */
+  selector?: string | undefined
+  schema?: TransformRawSchema | undefined
+  isMatch?(node: Node): boolean
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  transform?(node: Node): BlockInstance<Partial<T>> | void
+}
+
+interface TransformShortcode<T extends Record<string, any>> {
+  type: "shortcode"
+  priority?: number | undefined
+  tag: string
+  transform?(attributes: any, match: ShortcodeMatch): BlockInstance<T>
+  attributes?: any // TODO: add stronger types here.
+}
+
+type AnyBlockTransform<T extends Record<string, any> = Record<string, any>> =
+  | TransformBlock<T>
+  | TransformEnter<T>
+  | TransformFiles<T>
+  | TransformPrefix<T>
+  | TransformRaw<T>
+  | TransformShortcode<T>
+
+type BlockInstance<T extends Record<string, any> = { [k: string]: any }> = {
+  /**
+   * Attributes for the block.
+   */
+  readonly attributes: T
+  /**
+   * Unique ID registered to the block.
+   */
+  readonly clientId: string
+  /**
+   * Array of inner blocks, if the block has any.
+   */
+  readonly innerBlocks: BlockInstance[]
+  /**
+   * Indicates whether or not the block is valid.
+   */
+  readonly isValid: boolean
+  /**
+   * The block's registered name.
+   */
+  readonly name: string
+  /**
+   * The parsed HTML content of the block.
+   */
+  readonly originalContent?: string | undefined
+}
+
 export {}