eddev 0.3.35 → 2.0.0-beta.2

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

@@ -0,0 +1,41 @@
+import { ElementType } from "react";
+import { InlineValueStore } from "./inline-editing";
+export type InlineTextValueStore = InlineValueStore<string>;
+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 */
+    inlineToolbar?: boolean;
+    /** Specify default content to use on the frontend if nothing has been entered */
+    defaultValue?: string;
+    /**
+     * Append a new block when the user hits 'Enter' while editing this text.
+     * Specify 'true' to append a new paragraph block, or a string to specify a different block type.
+     **/
+    appendOnEnter?: boolean | string;
+    /** An optional placeholder to indicate a typable area */
+    placeholder?: string;
+} & {
+    /**
+     * The 'key' of this editable text value.
+     *
+     * @deprecated use the `store` prop instead
+     **/
+    id?: string;
+    /**
+     *
+     * Instead of an `id`, you can provide a tuple of `[value, setValue]` to store the value elsewhere.
+     *
+     * This can be combined with `useInlineEditableValue()`, `usePostTitleEditor()` or even `useState()`
+     **/
+    store: InlineTextValueStore | string;
+} & Omit<React.ComponentPropsWithoutRef<T>, "id"> & MaybeAsProp<React.ComponentPropsWithoutRef<T>>;
+type MaybeAsProp<T> = T extends {
+    as?: infer U;
+} ? (U extends unknown ? {} : {
+    asProp?: U;
+}) : {};
+export declare function EditableText<T extends ElementType>({ id, as, appendOnEnter, store, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from "../routing";
+import { useBlockAppender, useBlockContext, useValueStore } from "./inline-editing";
+export function EditableText({ id, as, appendOnEnter, store, ...props }) {
+    if (env.admin) {
+        const readOnly = useBlockContext()?.readonly;
+        if (!readOnly) {
+            const [value, setValue] = useValueStore(store ?? id);
+            const appendBlocks = useBlockAppender();
+            return (_jsx(wp.blockEditor.RichText, { ...props, tagName: as, value: value || "", onChange: setValue, disableLineBreaks: props.disableLineBreaks, onKeyDownCapture: (e) => {
+                    if (e.key === "Enter" && appendOnEnter && appendBlocks) {
+                        appendBlocks([
+                            wp.blocks.createBlock(typeof appendOnEnter === "string" ? appendOnEnter : "core/paragraph"),
+                        ]);
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                } }));
+        }
+    }
+    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.placeholder;
+    if (value === "" || typeof value !== "string") {
+        if (props.defaultValue) {
+            value = props.defaultValue;
+        }
+        else {
+            return null;
+        }
+    }
+    const Element = as || "div";
+    return (_jsx(Element, { dangerouslySetInnerHTML: { __html: value }, 
+        /**
+         * Allow the router to handle link clicks, passing all clicks to the router.
+         * We allow onClick on the current element to occur first, so that preventDefault can be called.
+         * The router will filter out clicks where appropriate.
+         */
+        onClick: (e) => {
+            if (props.onClick)
+                props.onClick(e);
+            handleClickEvent?.(e);
+        }, ...otherProps }));
+}

package/{blocks → dist/app/lib/blocks}/ErrorBoundaryFrontend.d.ts

@@ -1,4 +1,4 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
+import { Component, ErrorInfo, ReactNode } from "react";
 interface Props {
     children: ReactNode;
 }
@@ -10,6 +10,6 @@ export declare class ErrorBoundaryFrontend 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<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+export class ErrorBoundaryFrontend extends Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(err) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error: err };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Uncaught error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const err = this.state.error;
+            if (env.dev) {
+                return (_jsx("pre", { style: {
+                        backgroundColor: "#fafafa",
+                        fontSize: "12px",
+                        color: "#d92a0b",
+                        border: "2px solid #d92a0b",
+                        borderRadius: "4px",
+                        padding: "8px",
+                        overflowX: "auto",
+                        fontFamily: '"Roboto Mono", Menlo, monospace',
+                    }, children: err.stack }));
+            }
+            else {
+                return null;
+            }
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,42 @@
+import { FunctionComponent } from "react";
+import { ContentBlockLayoutProps } from "./ContentBlocks";
+import { BlockTemplate } from "./editor/block-templates";
+type AppenderConfig = {
+    type: "default" | "button" | FunctionComponent<any>;
+    className?: string;
+};
+type InnerBlocksProps = {
+    /** A list of allowed blocks, and/or block tags. */
+    allowedBlocks?: (ChildBlockTypeName | BlockTagName)[];
+    /** Specify the block list as either horizontal or vertical */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * An optional extra className to apply to the wrapper div, in the Gutenberg editor.
+     *
+     * NOTE: This will have no effect on the frontend, since no wrapper div is created on the frontend.
+     **/
+    adminClassName?: string;
+    /**
+     *
+     */
+    template?: BlockTemplate;
+    /**
+     * `false` allows all operations
+     * `"all"` prevents all operations. It is not possible to insert new blocks, move existing blocks, or delete blocks
+     * `"insert"` prevents inserting or removing blocks, but allows moving existing blocks
+     * `"contentOnly"` — prevents all operations, but allows rich text editing. Additionally, the block types that don’t have content are hidden from the list view and can’t gain focus within the block list. Unlike the other lock types, this is not overridable by children.
+     *
+     * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#locking
+     *
+     * @default false
+     *
+     */
+    templateLock?: "all" | "insert" | "contentOnly" | false;
+    appender?: AppenderConfig;
+    prioritizedInserterBlocks?: ChildBlockTypeName[];
+} & ContentBlockLayoutProps;
+/**
+ * Allows child blocks to be added to the current block context.
+ */
+export declare function InnerBlocks(props: InnerBlocksProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContentBlocks } from "./ContentBlocks";
+import { transformBlockTemplate } from "./editor/block-templates";
+import { blocksByTag } from "./editor/blocks-by-tag";
+import { useBlockContext, useInnerBlocks } from "./inline-editing";
+const Appender = (props) => {
+    const clientId = useBlockContext()?.block[1].clientId;
+    if (props.type === "button") {
+        return _jsx(wp.blockEditor.ButtonBlockAppender, { className: props.className, rootClientId: clientId });
+    }
+    else if (typeof props.type === "function") {
+        return props.type({});
+    }
+    else {
+        return (_jsx(wp.blockEditor.DefaultBlockAppender
+        // @ts-ignore
+        , { 
+            // @ts-ignore
+            className: props.className, rootClientId: clientId, lastBlockClientId: clientId }));
+    }
+};
+/**
+ * Allows child blocks to be added to the current block context.
+ */
+export function InnerBlocks(props) {
+    if (env.admin) {
+        const inlineContext = useBlockContext();
+        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,
+                template: props.template ? transformBlockTemplate(props.template) : undefined,
+            });
+            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();
+    return _jsx(ContentBlocks, { blocks: blocks, spacer: props.spacer, wrapBlock: props.wrapBlock });
+}

package/dist/app/lib/blocks/block-utils.d.ts

@@ -0,0 +1,24 @@
+import { ContentBlock } from "./ContentBlocks";
+/**
+ * Returns some very basic info about blocks in the project.
+ * This is purposely lean, to avoid bloated info.
+ */
+export declare function getPublicBlockInfo(): {
+    [x: string]: PublicBlockMeta;
+};
+/**
+ * Takes raw content blocks from GraphQL, and adds flags to them.
+ * This is used by InnerBlocks, ContentBlocks and useInnerBlocks.
+ *
+ * Note that this function mutates the existing block, adding new properties.
+ */
+export declare function addBlockMetadata(blocks: ContentBlock[]): ContentBlock[];
+export declare function getBlockMetadata(blockName: string): {
+    slug: string;
+    tags?: undefined;
+    flags?: undefined;
+} | {
+    tags: never[];
+    flags: DefinedBlockFlags;
+    slug: BlockTypeName;
+};

package/dist/app/lib/blocks/block-utils.js

@@ -0,0 +1,41 @@
+import { blockManifestReader } from "../internal";
+/**
+ * Returns some very basic info about blocks in the project.
+ * This is purposely lean, to avoid bloated info.
+ */
+export function getPublicBlockInfo() {
+    return blockManifestReader.info;
+}
+/**
+ * Takes raw content blocks from GraphQL, and adds flags to them.
+ * This is used by InnerBlocks, ContentBlocks and useInnerBlocks.
+ *
+ * Note that this function mutates the existing block, adding new properties.
+ */
+export function addBlockMetadata(blocks) {
+    const out = blocks;
+    const infos = getPublicBlockInfo();
+    for (let block of out) {
+        const info = infos[block.blockName];
+        block.tags = info?.tags ?? [];
+        block.flags = info?.flags ?? {};
+        block.slug = (info?.slug ?? block.blockName);
+        if (block.innerBlocks && block.innerBlocks.length) {
+            addBlockMetadata(block.innerBlocks);
+        }
+    }
+    return out;
+}
+export function getBlockMetadata(blockName) {
+    const infos = getPublicBlockInfo();
+    const info = infos[blockName];
+    if (!info)
+        return {
+            slug: blockName,
+        };
+    return {
+        tags: info.tags,
+        flags: info.flags,
+        slug: info.slug,
+    };
+}

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

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

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

@@ -0,0 +1,3 @@
+export function defineBlock(name, component) {
+    return component;
+}

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

@@ -0,0 +1,5 @@
+export declare const BlockContext: import("react").Context<{
+    name: string;
+    props: any;
+} | undefined>;
+export declare function EditableBlock({ payload }: any): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,19 @@
+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";
+export const BlockContext = createContext(undefined);
+export function EditableBlock({ payload }) {
+    const block = useContext(BlockContext);
+    if (!block)
+        return null;
+    const getBlock = () => {
+        return blockManifestReader.value[block.name];
+    };
+    const BlockComponent = getBlock();
+    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 }) }) }) }));
+}

package/{blocks → 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/ErrorBoundaryEditor.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+export class ErrorBoundaryEditor extends Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(err) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error: err };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Uncaught error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const err = this.state.error;
+            return (_jsx("pre", { style: {
+                    fontSize: "12px",
+                    color: "red",
+                    border: "1px solid red",
+                    borderRadius: "4px",
+                    padding: "4px",
+                    overflowX: "auto",
+                }, children: err.stack }));
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,3 @@
+export type BlockTemplate = [name: ChildBlockTypeName, props: any, children?: BlockTemplate][];
+export declare function resolveAcfBlockName(name: string): string;
+export declare function transformBlockTemplate(template: BlockTemplate): BlockTemplate;

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

@@ -0,0 +1,9 @@
+export function resolveAcfBlockName(name) {
+    const acfName = "acf/" + name.replace("/", "-").replace("_", "");
+    return wp.blocks.getBlockType(acfName) ? acfName : name;
+}
+export function transformBlockTemplate(template) {
+    return template.map(([name, props, children]) => {
+        return [resolveAcfBlockName(name), props, children ? transformBlockTemplate(children) : undefined];
+    });
+}

package/dist/app/lib/blocks/editor/blocks-by-tag.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Keeps track of blocks, by their tags.
+ */
+export declare const blocksByTag: {
+    add(block: string, tags: string[]): void;
+    expand(blocks: string[]): string[];
+};

package/dist/app/lib/blocks/editor/blocks-by-tag.js

@@ -0,0 +1,42 @@
+const map = new Map();
+/**
+ * Keeps track of blocks, by their tags.
+ */
+export const blocksByTag = {
+    add(block, tags) {
+        if (tags) {
+            for (let tag of tags) {
+                if (map.has(tag)) {
+                    map.get(tag).add(block);
+                }
+                else {
+                    map.set(tag, new Set([block]));
+                }
+            }
+        }
+    },
+    // Expand a list of ED-style block names, core block names, or tag names — into standard wordpress block names
+    expand(blocks) {
+        const result = new Set();
+        if (Array.isArray(blocks)) {
+            for (let name of blocks) {
+                result.add(name);
+                if (name === "root") {
+                    result.add("core/post-content");
+                }
+                if (name.match(/^[a-z0-9\-\_]+\/[a-z0-9\-\_]+$/)) {
+                    // ACF block
+                    result.add("acf/" + name.replace("/", "-").replace("_", ""));
+                }
+                if (map.has(name)) {
+                    // Tagged blocks
+                    const blockNames = map.get(name);
+                    for (let name of blockNames) {
+                        result.add(name);
+                    }
+                }
+            }
+        }
+        return [...result.values()];
+    },
+};

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

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+/**
+ * Allows you to render arbitrary sidebar content when this block is selected.
+ *
+ * You can use this in cases where ACF is overkill.
+ *
+ * @see https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-in-the-editor/#settings-sidebar
+ */
+export declare function InspectorControls(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element | null;
+export declare function BlockControls(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Allows you to render arbitrary sidebar content when this block is selected.
+ *
+ * You can use this in cases where ACF is overkill.
+ *
+ * @see https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-in-the-editor/#settings-sidebar
+ */
+export function InspectorControls(props) {
+    if (env.admin) {
+        return _jsx(wp.blockEditor.InspectorControls, { children: props.children });
+    }
+    return null;
+}
+export function BlockControls(props) {
+    if (env.admin) {
+        return _jsx(wp.blockEditor.BlockControls, { controls: undefined, children: props.children });
+    }
+    return null;
+}

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

@@ -0,0 +1,58 @@
+import { BlockTemplate } from "./block-templates";
+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. */
+    hideTitle?: boolean;
+    /** 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 */
+    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;
+};
+type BlockWrapperClassGenerator = (block: {
+    name: string;
+    slug: BlockTypeName | (string & {});
+    attributes: any;
+    clientId: string;
+    rootClientId: string;
+    canMove: boolean;
+    canRemove: boolean;
+    isSelected: boolean;
+    isSelectionEnabled: boolean;
+    tags?: DefinedBlockTags;
+    flags?: DefinedBlockFlags;
+}, post: PostInfo) => string | void;
+export declare const editorConfigStore: {
+    config: EditorConfig | null;
+    currentBlocksConfig: EditorConfigItem | null;
+};
+export declare function configureEditorBlocks(config: EditorConfigItem): void;
+export declare function transformTemplateToBlocks(template: BlockTemplate, locked?: boolean): any;
+type PostInfo = {
+    template: TemplateName | "default";
+    type: PostTypeName;
+    slug: string;
+};
+type MatcherFunction = (post: PostInfo) => boolean | void;
+type Matcher = {
+    /** A matcher function, which can test the template and post type to check whether this config should be applied */
+    match: MatcherFunction;
+    /** Configuration for the editor, when the post type and template match */
+    config: EditorConfigItem | ((post: PostInfo) => EditorConfigItem);
+};
+type EditorConfig = {
+    /** A list of template/post type matchers, and the resulting editor config */
+    matchers: Matcher[];
+};
+/**
+ * This call should be placed in blocks/_editor.tsx
+ */
+export declare function defineEditorConfig(config: EditorConfig): void;
+export declare function getEditingPostInfo(): PostInfo;
+export declare function updateTemplateConfig(): void;
+export declare function watchEditorTemplate(): void;
+export {};