eddev 2.0.0-beta.12 → 2.0.0-beta.121

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

@@ -0,0 +1,164 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function EditorHighlights(props) {
+    const [element, setElement] = useState(null);
+    const [controller, setController] = useState(null);
+    // wp.data.select('core/editor').isBlockSelected
+    // const isSelected = wp.data.useSelect(
+    //   (select) => (select("core/editor") as any).isBlockSelected(props.clientId),
+    //   [props.clientId]
+    // )
+    useEffect(() => {
+        if (!props.enabled || !element)
+            return;
+        const controller = new HighlightController(element);
+        setController(controller);
+        return () => controller.teardown();
+    }, [props.enabled, element]);
+    useEffect(() => {
+        if (controller) {
+            controller.isSelected = false;
+            controller.updateClasses();
+            controller.update();
+        }
+    }, [controller, false]);
+    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;
+    enabled = false;
+    disposers = [];
+    elements = new Map();
+    block = null;
+    isSelected = false;
+    constructor(root) {
+        this.root = root;
+    }
+    setup() {
+        this.teardown();
+        const updateElements = () => {
+            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 = this.root;
+            childBlocks = childBlocks.slice(1);
+            editables = childIsSelected
+                ? []
+                : editables.filter((element) => !childBlocks.some((block) => block.contains(element)));
+            let changed = false;
+            for (const [el, item] of this.elements) {
+                if (!editables.includes(el)) {
+                    item.observer.disconnect();
+                    item.overlay.remove();
+                    this.elements.delete(el);
+                    changed = true;
+                }
+            }
+            for (let el of editables) {
+                if (!this.elements.has(el)) {
+                    const observer = new ResizeObserver(() => this.update());
+                    observer.observe(el);
+                    this.elements.set(el, {
+                        observer,
+                        bounds: el.getBoundingClientRect(),
+                        overlay: this.createOverlay(el),
+                    });
+                    changed = true;
+                }
+            }
+            if (changed) {
+                this.update();
+                this.updateClasses();
+            }
+        };
+        const mutationObserver = new MutationObserver(() => {
+            updateElements();
+        });
+        updateElements();
+        mutationObserver.observe(this.root, { childList: true, subtree: true });
+        this.disposers.push(() => {
+            mutationObserver.disconnect();
+            for (const item of this.elements.values()) {
+                item.observer.disconnect();
+                item.overlay.remove();
+            }
+            this.elements = new Map();
+        });
+    }
+    updateClasses() {
+        for (const item of this.elements.values()) {
+            item.overlay.classList.toggle("editor-highlight-selected", this.isSelected);
+        }
+        this.root.classList.toggle("editor-highlighter-root-selected", this.enabled);
+    }
+    createOverlay(target) {
+        const el = document.createElement("div");
+        el.style.position = "absolute";
+        el.style.pointerEvents = "none";
+        el.style.zIndex = "20";
+        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;
+    }
+    teardown() {
+        this.disposers.forEach((dispose) => dispose());
+    }
+    enable() {
+        this.enabled = true;
+        this.setup();
+        this.update();
+        this.updateClasses();
+    }
+    disable() {
+        this.enabled = false;
+        this.teardown();
+        this.update();
+        this.updateClasses();
+    }
+    update() {
+        if (!this.block)
+            return;
+        const rootBounds = this.block.getBoundingClientRect();
+        for (const [el, item] of this.elements) {
+            const bounds = el.getBoundingClientRect();
+            item.overlay.style.left = bounds.left - rootBounds.left + "px";
+            item.overlay.style.top = bounds.top - rootBounds.top + "px";
+            item.overlay.style.width = bounds.width + "px";
+            item.overlay.style.height = bounds.height + "px";
+        }
+    }
+}

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

@@ -1,19 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { createContext, Suspense, useContext } from "react";
-import { getQueryClient } from "../../../utils/query-client";
-import { blockManifestReader } from "../../internal";
-import { ErrorBoundaryEditor } from "./ErrorBoundaryEditor";
+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(QueryClientProvider, { client: getQueryClient(), children: _jsx(Suspense, { children: _jsx(BlockComponent, { ...payload }) }) }) }));
+    return (_jsx(ErrorBoundaryEditor, { children: _jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(BlockComponent, { ...payload }) }) }) }));
 }

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

@@ -10,6 +10,6 @@ export declare class ErrorBoundaryEditor extends Component<Props, State> {
     state: State;
     static getDerivedStateFromError(err: Error): State;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

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

@@ -1,7 +1,20 @@
-import { BlockTemplate } from "./block-templates";
+import { BlockTemplate } from "./block-templates.js";
 export type EditorConfigItem = {
-    /** Optionally indicate that the post title field should be hidden. Use then when your header template includes a post title editor already. */
+    /**
+     * Optionally indicate that the post title field should be hidden. Use then when your header template includes a post title editor already.
+     * @default false
+     **/
     hideTitle?: boolean;
+    /**
+     * Override the blocks which are allowed to be added to the root of this post-type/template combination.
+     *
+     * You can specify one or more block names, or block tags.
+     *
+     * The default is "root".
+     *
+     * @default ["root"]
+     **/
+    rootBlocks?: (ChildBlockTypeName | BlockTagName)[];
     /** Allows you to add additional class names to blocks, depending on their type and state */
     generateBlockClassName?: BlockWrapperClassGenerator;
     /** The default blocks to insert when there are no (non-templated) blocks */
@@ -28,14 +41,28 @@ type BlockWrapperClassGenerator = (block: {
 }, post: PostInfo) => string | void;
 export declare const editorConfigStore: {
     config: EditorConfig | null;
-    currentBlocksConfig: EditorConfigItem | null;
+    currentBlocksConfig: EditorConfigItem;
 };
 export declare function configureEditorBlocks(config: EditorConfigItem): void;
-export declare function transformTemplateToBlocks(template: BlockTemplate, locked?: boolean): any;
 type PostInfo = {
-    template: TemplateName | "default";
     type: PostTypeName;
+    isPattern: false;
+    isTemplatePart: false;
+    template: TemplateName | "default";
+    slug: string;
+} | {
+    type: "wp_block";
+    isPattern: true;
+    isTemplatePart: false;
+    title: string;
+} | {
+    type: "wp_template_part";
+    isPattern: false;
+    isTemplatePart: true;
+    area: string;
+    title: string;
     slug: string;
+    wp_pattern_category?: number[];
 };
 type MatcherFunction = (post: PostInfo) => boolean | void;
 type Matcher = {
@@ -44,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,8 +1,8 @@
 import { proxy } from "valtio";
-import { resolveAcfBlockName, transformBlockTemplate } from "./block-templates";
+import { applyTemplateBlocks, resolveAcfBlockName, transformBlockTemplate, transformTemplateToBlocks, } from "./block-templates.js";
 export const editorConfigStore = proxy({
     config: null,
-    currentBlocksConfig: null,
+    currentBlocksConfig: {},
 });
 export function configureEditorBlocks(config) {
     const wp = window.wp;
@@ -21,60 +21,13 @@ export function configureEditorBlocks(config) {
     if (config.template) {
         setTemplate(config.template);
         if (config.headerTemplate || config.footerTemplate) {
-            console.error("You cannot use both a template and header/footer templates at the same time.");
+            console.error("You cannot use both a 'template' alongside 'headerBlock'/'footerBlock'. Did you mean to use 'defaultBlocks' instead?");
             return;
         }
     }
     const currentBlocks = wp.data.select("core/block-editor").getBlocks();
-    const templateBlocks = currentBlocks.filter((block) => block.attributes.isFromTemplate);
-    let blocks = currentBlocks.filter((block) => !block.attributes.isFromTemplate);
-    let header = config.headerTemplate ? syncBlocks(transformTemplateToBlocks(config.headerTemplate)) : [];
-    let footer = config.footerTemplate ? syncBlocks(transformTemplateToBlocks(config.footerTemplate)) : [];
-    if (!blocks.length && config.defaultBlocks) {
-        blocks = transformTemplateToBlocks(config.defaultBlocks, false);
-    }
-    let newBlocks = [...header, ...blocks, ...footer];
-    // console.log("Configuring", newBlocks)
+    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) {
-    return template.map(([name, props, children]) => {
-        const attributes = {
-            data: {},
-            inline: {},
-            isFromTemplate: true,
-            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) : [],
-            isValid: true,
-            validationIssues: [],
-        };
-    });
 }
 /**
  * This call should be placed in blocks/_editor.tsx
@@ -92,10 +45,18 @@ export function getEditingPostInfo() {
     const postInfo = {
         ...post,
         ...edits,
+        isTemplatePart: false,
+        isPattern: false,
     };
     if (!postInfo.template)
         postInfo.template = "default";
     postInfo.template = postInfo.template.replace(/(^views\/|\.tsx?$)/g, "");
+    if (postInfo.type === "wp_template_part") {
+        postInfo.isTemplatePart = true;
+    }
+    if (postInfo.type === "wp_block") {
+        postInfo.isPattern = true;
+    }
     return postInfo;
 }
 export function updateTemplateConfig() {
@@ -104,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) {
@@ -118,17 +79,24 @@ export function updateTemplateConfig() {
     }
 }
 export function watchEditorTemplate() {
-    let lastTemplate = "unknown";
-    wp.data.subscribe(() => {
-        setTimeout(() => {
-            const post = wp.data.select("core/editor").getCurrentPost();
-            let template = wp.data.select("core/editor").getPostEdits()?.template ?? post?.template ?? "";
-            if (template !== lastTemplate) {
-                lastTemplate = template;
+    let lastKey = "unknown";
+    let timer = 0;
+    const update = () => {
+        const post = wp.data.select("core/editor").getCurrentPost();
+        const template = wp.data.select("core/editor").getPostEdits()?.template ?? post?.template ?? "";
+        const key = [post.type, template, post.slug, post.title].join(";");
+        if (key !== lastKey) {
+            lastKey = key;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
                 updateTemplateConfig();
-            }
-        }, 10);
+            }, 20);
+        }
+    };
+    wp.data.subscribe(() => {
+        update();
     });
+    update();
 }
 function setWrapperBlock(blockName, blocks) {
     const wp = window.wp;
@@ -174,7 +142,6 @@ function setWrapperBlock(blockName, blocks) {
 }
 function setTemplate(template) {
     const wp = window.wp;
-    // console.log("Setting template", template)
     let currentBlocks = wp.data.select("core/block-editor").getBlocks();
     wp.data.dispatch("core/block-editor").updateSettings({
         templateLock: "all",

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;