eddev 0.3.35 → 2.0.0-beta.2

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

@@ -0,0 +1,191 @@
+import { proxy } from "valtio";
+import { resolveAcfBlockName, transformBlockTemplate } from "./block-templates";
+export const editorConfigStore = proxy({
+    config: null,
+    currentBlocksConfig: null,
+});
+export function configureEditorBlocks(config) {
+    const wp = window.wp;
+    let hideStyles = document.getElementById("title-hider");
+    hideStyles?.remove();
+    if (config.hideTitle) {
+        hideStyles = document.createElement("style");
+        hideStyles.id = "title-hider";
+        hideStyles.innerHTML = `
+      .edit-post-visual-editor__post-title-wrapper {
+        display: none !important;
+      }
+    `;
+        document.head.appendChild(hideStyles);
+    }
+    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.");
+            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)
+    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
+ */
+export function defineEditorConfig(config) {
+    const wp = window.wp;
+    editorConfigStore.config = config;
+    if (!wp?.blockEditor)
+        return;
+    updateTemplateConfig();
+}
+export function getEditingPostInfo() {
+    const post = wp.data.select("core/editor").getCurrentPost();
+    const edits = wp.data.select("core/editor").getPostEdits();
+    const postInfo = {
+        ...post,
+        ...edits,
+    };
+    if (!postInfo.template)
+        postInfo.template = "default";
+    postInfo.template = postInfo.template.replace(/(^views\/|\.tsx?$)/g, "");
+    return postInfo;
+}
+export function updateTemplateConfig() {
+    const wp = window.wp;
+    const postInfo = getEditingPostInfo();
+    const editorConfig = editorConfigStore.config;
+    if (!editorConfig)
+        return;
+    const matched = editorConfig.matchers.find((matcher) => {
+        return matcher.match(postInfo);
+    });
+    if (matched) {
+        const config = typeof matched.config === "function" ? matched.config(postInfo) : matched.config;
+        editorConfigStore.currentBlocksConfig = config;
+        configureEditorBlocks(config);
+    }
+    else {
+        editorConfigStore.currentBlocksConfig = {};
+        configureEditorBlocks({});
+    }
+}
+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;
+                updateTemplateConfig();
+            }
+        }, 10);
+    });
+}
+function setWrapperBlock(blockName, blocks) {
+    const wp = window.wp;
+    const dispatch = wp.data.dispatch("core/block-editor");
+    const blockWrapperName = blockName ? resolveAcfBlockName(blockName) : null;
+    const untemplatedBlocks = blocks.flatMap((block) => {
+        if (block.name === blockWrapperName || block.attributes.isFromTemplate) {
+            return block.innerBlocks.filter((innerBlock) => !innerBlock.attributes.isFromTemplate);
+        }
+        return block;
+    });
+    let newBlocks = [...untemplatedBlocks];
+    if (blockName) {
+        const rootId = "block-" + Math.random().toString(36);
+        const parent = {
+            clientId: rootId,
+            name: blockWrapperName,
+            validationIssues: [],
+            isValid: true,
+            attributes: { data: {}, inline: {}, isFromTemplate: true, lock: { move: true, remove: true } },
+            innerBlocks: [
+                {
+                    clientId: rootId + "-inner",
+                    name: "core/group",
+                    validationIssues: [],
+                    isValid: true,
+                    attributes: { data: {}, inline: {}, isFromTemplate: true, lock: { move: true, remove: true } },
+                    innerBlocks: untemplatedBlocks,
+                },
+            ],
+        };
+        wp.data.dispatch("core/block-editor").resetBlocks([parent]);
+        wp.data.dispatch("core/block-editor").updateSettings({
+            templateLock: "contentOnly",
+        });
+        wp.data.dispatch("core/block-editor").setBlockEditingMode(rootId, "disabled");
+        wp.data.dispatch("core/block-editor").setBlockEditingMode(rootId + "-inner", "default");
+    }
+    else {
+        wp.data.dispatch("core/block-editor").resetBlocks(newBlocks);
+    }
+    // wp.data.dispatch('core/block-editor').setBlockEditingMode(wp.data.select('core/block-editor').getBlocks()[0].clientId, '')
+}
+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",
+        template: transformBlockTemplate(template),
+    });
+    if (currentBlocks?.length === 0) {
+        setTimeout(() => {
+            wp.data.dispatch("core/block-editor").resetBlocks(transformTemplateToBlocks(template));
+            wp.data.dispatch("core/block-editor").setTemplateValidity(true);
+        }, 1);
+        return;
+    }
+    wp.data.dispatch("core/block-editor").validateBlocksToTemplate(currentBlocks);
+}

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

@@ -0,0 +1,2 @@
+export declare function whenEditorIsReady(): Promise<void>;
+export declare function installEDGutenbergHooks(): void;

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

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { InlineEditingContextProvider } from "../inline-editing";
+import { BlockContext, EditableBlock } from "./EditorSupport";
+import { blocksByTag } from "./blocks-by-tag";
+import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config";
+import { useSnapshot } from "valtio";
+import { getBlockMetadata } from "../block-utils";
+function listenForHandleResize() {
+    let interval = setInterval(() => {
+        let viewportTarget = document.querySelector(".interface-interface-skeleton__content");
+        if (viewportTarget) {
+            const updateSize = () => {
+                document.documentElement.style.setProperty("--vw100", viewportTarget.clientWidth + "px");
+            };
+            const ro = new ResizeObserver(updateSize);
+            ro.observe(viewportTarget);
+            clearInterval(interval);
+        }
+    }, 100);
+}
+export function whenEditorIsReady() {
+    return new Promise((resolve) => {
+        const unsubscribe = wp.data.subscribe(() => {
+            // This will trigger after the initial render blocking, before the window load event
+            // This seems currently more reliable than using __unstableIsEditorReady
+            if (wp.data.select("core/editor").isCleanNewPost() || wp.data.select("core/block-editor").getBlockCount() > 0) {
+                unsubscribe();
+                resolve();
+            }
+        });
+    });
+}
+export function installEDGutenbergHooks() {
+    import("../../../../../css/editor-styles.css");
+    // Skip this if we're not in the block editor
+    if (!wp.blockEditor)
+        return;
+    const withClientIdClassName = wp.compose.createHigherOrderComponent((BlockListBlock) => {
+        return (props) => {
+            const generateClass = useSnapshot(editorConfigStore).currentBlocksConfig?.generateBlockClassName;
+            Object.assign(props, getBlockMetadata(props.name));
+            let className = generateClass ? generateClass(props, getEditingPostInfo()) : "";
+            return _jsx(BlockListBlock, { ...props, className: className });
+        };
+    }, "withClientIdClassName");
+    wp.hooks.addFilter("editor.BlockListBlock", "ed", withClientIdClassName);
+    listenForHandleResize();
+    // Remove unwanted formatting options
+    // https://developer.wordpress.org/block-editor/how-to-guides/format-api/
+    wp.richText.unregisterFormatType("core/image");
+    wp.richText.unregisterFormatType("core/language");
+    wp.richText.unregisterFormatType("core/keyboard");
+    wp.richText.unregisterFormatType("core/text-color");
+    whenEditorIsReady().then(() => watchEditorTemplate());
+    wp.hooks.addFilter("blocks.registerBlockType", "ed", (item, name) => {
+        // Hook into ACF blocks, customising the edit mode.
+        if (name.startsWith("acf/")) {
+            const edit = item.edit;
+            item.acf = {
+                ...(item.acf ?? {}),
+                mode: item.mode,
+            };
+            // Add an 'inline' object attribute, which will hold all inline contents
+            item.attributes.inline = { type: "object" };
+            item.attributes.isFromTemplate = { type: "boolean" };
+            item.supports.customClassName = false;
+            item.edit = function (props) {
+                const self = this;
+                useEffect(() => {
+                    ;
+                    wp.data.dispatch("core/block-editor").setTemplateValidity(true);
+                }, []);
+                const children = wp.data.useSelect((select) => {
+                    const { getBlock, getBlockOrder } = select("core/block-editor");
+                    const innerBlockIDs = getBlockOrder(props.clientId);
+                    const children = innerBlockIDs.map((id) => {
+                        return getBlock(id);
+                    });
+                    return children;
+                }, []);
+                return (_jsx(BlockContext.Provider, { value: { name, props }, children: _jsx(InlineEditingContextProvider, { values: props.attributes.inline || {}, innerBlocks: children, block: [name, props], index: -1, onChange: (attrs) => {
+                            props.setAttributes({ ...props.attributes, inline: attrs });
+                        }, insertBlocksAfter: props.insertBlocksAfter, children: edit.call(self, props) }) }));
+            };
+        }
+        // Find PHP-defined 'tags' for core blocks.
+        if ("ED_BLOCK_TAGS" in window && window.ED_BLOCK_TAGS) {
+            const tags = window.ED_BLOCK_TAGS[name];
+            if (tags) {
+                item.tags = tags;
+            }
+        }
+        // Ensure tags is always an array
+        if (typeof item.tags === "string") {
+            item.tags = [item.tags];
+        }
+        else if (!Array.isArray(item.tags)) {
+            item.tags = [];
+        }
+        blocksByTag.add(item.name, item.tags);
+        return {
+            ...item,
+            get parent() {
+                return blocksByTag.expand([
+                    ...(item.parent ?? []),
+                    ...(item.tags.includes("root") ? ["core/post-content"] : []),
+                ]);
+            },
+            get ancestor() {
+                return item.ancestor ? blocksByTag.expand(item.ancestor) : undefined;
+            },
+            get allowedBlocks() {
+                return item.allowedBlocks ? blocksByTag.expand(item.allowedBlocks) : undefined;
+            },
+        };
+    });
+    const acf = "acf" in window ? window.acf : {};
+    const parseJSX = acf.parseJSX;
+    acf.parseJSX = (html) => {
+        let payload;
+        try {
+            payload = JSON.parse(html);
+        }
+        catch (err) {
+            console.error(err);
+            throw new Error("eddev: Error parsing block data from: \n" + html);
+        }
+        return _jsx(EditableBlock, { payload: payload });
+    };
+}

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

@@ -0,0 +1,27 @@
+import { InlineValueStore } from "../inline-editing";
+export declare function usePostEditor(): {
+    post: any;
+    updatePost(update: any): void;
+    meta: any;
+    updateMeta: Function;
+};
+/**
+ * Returns the current post title, allowing it to be updated.
+ *
+ * NOTE: This only works in the editor.
+ *
+ * For convenience, you can pass in a default title to use when not in the editor, which you can fetch via GraphQL
+ *
+ * @returns [title, setTitle]
+ */
+export declare function usePostTitleEditor(title?: string): InlineValueStore<string>;
+/**
+ * Returns a post meta value, allowing it to be updated.
+ *
+ * See ED()->registerPostMeta() for more information on how to define post meta.
+ *
+ * @param key The key specified
+ * @param value The value to use when not in the editor
+ * @returns [value, setValue]
+ */
+export declare function usePostMetaEditor<K extends keyof PostMetaTypes>(key: K, value?: PostMetaTypes[K]): InlineValueStore<PostMetaTypes[K]>;

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

@@ -0,0 +1,79 @@
+export function usePostEditor() {
+    const post = wp.data.useSelect((select) => {
+        const editor = select("core/editor");
+        const post = editor.getCurrentPost();
+        const edits = editor.getPostEdits();
+        return {
+            ...post,
+            ...edits,
+        };
+    }, []);
+    const [meta, updateMeta] = wp.coreData.useEntityProp("postType", post.type, "meta");
+    return {
+        post,
+        updatePost(update) {
+            wp.data.dispatch("core/editor").editPost(update);
+        },
+        meta,
+        updateMeta,
+    };
+}
+/**
+ * Returns the current post title, allowing it to be updated.
+ *
+ * NOTE: This only works in the editor.
+ *
+ * For convenience, you can pass in a default title to use when not in the editor, which you can fetch via GraphQL
+ *
+ * @returns [title, setTitle]
+ */
+export function usePostTitleEditor(title = "") {
+    if (env.admin) {
+        const post = wp.data.useSelect((select) => {
+            const editor = select("core/editor");
+            const post = editor.getCurrentPost();
+            const edits = editor.getPostEdits();
+            return {
+                ...post,
+                ...edits,
+            };
+        }, []);
+        return [
+            post.title ?? "",
+            (title) => {
+                wp.data.dispatch("core/editor").editPost({ title });
+            },
+        ];
+    }
+    else {
+        return [title, () => { }];
+    }
+}
+/**
+ * Returns a post meta value, allowing it to be updated.
+ *
+ * See ED()->registerPostMeta() for more information on how to define post meta.
+ *
+ * @param key The key specified
+ * @param value The value to use when not in the editor
+ * @returns [value, setValue]
+ */
+export function usePostMetaEditor(key, value) {
+    if (env.admin) {
+        const postType = wp.data.useSelect((select) => {
+            const editor = select("core/editor");
+            const post = editor.getCurrentPost();
+            return post.type;
+        }, []);
+        const [meta, setMeta] = wp.coreData.useEntityProp("postType", postType, "meta");
+        return [
+            meta?.[key] ?? value,
+            (newValue) => {
+                setMeta({ ...(meta ?? {}), [key]: newValue });
+            },
+        ];
+    }
+    else {
+        return [value, () => { }];
+    }
+}

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { ContentBlock } from "./ContentBlocks";
+import { PropsWithChildren } from "react";
+type Attributes = Record<string, any>;
+export type InlineValueStore<T> = [value: T, setValue: (value: T) => void];
+type InlineEditingContext = {
+    values: Attributes;
+    innerBlocks: ContentBlock[];
+    parents: [string, Attributes][];
+    block: [string, Attributes];
+    index: number;
+    setValue(key: string, value: any): any;
+    getValue(key: string): any;
+    insertBlocksAfter?: (block: any) => void;
+    readonly?: boolean;
+};
+declare const InlineEditingContext: import("react").Context<InlineEditingContext | undefined>;
+type ProviderProps = PropsWithChildren<{
+    values: Attributes;
+    innerBlocks: ContentBlock[];
+    block: [string, Attributes];
+    index: number;
+    onChange?: (attrs: Attributes) => void;
+    insertBlocksAfter?: (block: any) => void;
+    readonly?: boolean;
+}>;
+export declare function InlineEditingContextProvider(props: ProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReadonlyInlineEditingProvider(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Allows for arbitrary storage of key/value pairs within the current block.
+ * This is used internally by EditableText, but can be used to store anything.
+ *
+ * @param key The unique item identifier
+ * @param defaultValue The default value (default is undefined)
+ * @returns a [value, setValue] tuple, similar to useState
+ */
+export declare function useInlineEditableValue<T>(key: string, defaultValue?: T): InlineValueStore<T>;
+/**
+ * Can be used as a drop-in version of useInlineEditableValue, but will pipe-through a store if one has been used
+ * @private
+ **/
+export declare function useValueStore<T>(id: string | InlineValueStore<T>, defaultValue?: T): InlineValueStore<T>;
+export declare function useBlockAppender(): ((block: any) => void) | undefined;
+export declare function useInnerBlocks(): ContentBlock[];
+export declare function useBlockParents(): [string, Attributes][];
+export declare function useBlockContext(): InlineEditingContext | undefined;
+/**
+ * Returns the current template name.
+ * - In the editor, this uses Gutenberg state.
+ * - On the frontend, this uses the actual WP template hierarchy.
+ *
+ * As such, there may be inconsistencies between the editor and the frontend.
+ */
+export declare function useTemplate(): keyof ViewProps;
+export {};

package/dist/app/lib/blocks/inline-editing.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { usePostEditor } from "./editor/usePostEditor";
+import { useRoute } from "../routing";
+import { addBlockMetadata } from "./block-utils";
+const InlineEditingContext = createContext(undefined);
+export function InlineEditingContextProvider(props) {
+    const parentContext = useContext(InlineEditingContext);
+    addBlockMetadata(props.innerBlocks);
+    return (_jsx(InlineEditingContext.Provider, { value: {
+            values: props.values,
+            innerBlocks: props.innerBlocks,
+            block: props.block,
+            index: props.index,
+            parents: [...(parentContext?.block ? [parentContext?.block] : []), ...(parentContext?.parents || [])].filter(Boolean),
+            getValue(key) {
+                return props.values?.[key];
+            },
+            setValue(key, value) {
+                if (props.onChange) {
+                    props.onChange({
+                        ...(props.values || {}),
+                        [key]: value,
+                    });
+                }
+            },
+            insertBlocksAfter: props.insertBlocksAfter,
+            readonly: props.readonly || parentContext?.readonly,
+        }, children: props.children }));
+}
+export function ReadonlyInlineEditingProvider(props) {
+    const parentContext = useContext(InlineEditingContext);
+    return (_jsx(InlineEditingContext.Provider, { value: {
+            ...parentContext,
+            readonly: true,
+        }, children: props.children }));
+}
+/**
+ * Allows for arbitrary storage of key/value pairs within the current block.
+ * This is used internally by EditableText, but can be used to store anything.
+ *
+ * @param key The unique item identifier
+ * @param defaultValue The default value (default is undefined)
+ * @returns a [value, setValue] tuple, similar to useState
+ */
+export function useInlineEditableValue(key, defaultValue) {
+    const attrs = useContext(InlineEditingContext);
+    return [
+        attrs?.getValue(key) ?? defaultValue,
+        (value) => {
+            attrs?.setValue(key, value);
+        },
+    ];
+}
+/**
+ * Can be used as a drop-in version of useInlineEditableValue, but will pipe-through a store if one has been used
+ * @private
+ **/
+export function useValueStore(id, defaultValue) {
+    const attrs = useContext(InlineEditingContext);
+    if (typeof id === "string") {
+        return [
+            attrs?.getValue(id) ?? defaultValue,
+            (value) => {
+                attrs?.setValue(id, value);
+            },
+        ];
+    }
+    else if (Array.isArray(id)) {
+        return [id[0] ?? defaultValue, id[1]];
+    }
+    else {
+        throw new Error("Missing ID or store for inline value");
+    }
+}
+export function useBlockAppender() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.insertBlocksAfter;
+}
+export function useInnerBlocks() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.innerBlocks || [];
+}
+export function useBlockParents() {
+    const ctx = useContext(InlineEditingContext);
+    return ctx?.parents || [];
+}
+export function useBlockContext() {
+    return useContext(InlineEditingContext);
+}
+/**
+ * Returns the current template name.
+ * - In the editor, this uses Gutenberg state.
+ * - On the frontend, this uses the actual WP template hierarchy.
+ *
+ * As such, there may be inconsistencies between the editor and the frontend.
+ */
+export function useTemplate() {
+    if (env.admin) {
+        const post = usePostEditor();
+        if (post.post?.template) {
+            return post.post?.template?.replace(/(views\/|\.tsx$)/g, "");
+        }
+        else if (post.post?.type === "page") {
+            return "page";
+        }
+        else {
+            return ("single-" + post.post?.type);
+        }
+    }
+    else {
+        return useRoute().view;
+    }
+}