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

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

@@ -1,11 +1,15 @@
 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";
+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";
 function listenForHandleResize() {
     let interval = setInterval(() => {
         let viewportTarget = document.querySelector(".interface-interface-skeleton__content");
@@ -19,16 +23,27 @@ function listenForHandleResize() {
         }
     }, 100);
 }
+export const blockMetaDescriptors = proxyMap();
 export function whenEditorIsReady() {
     return new Promise((resolve) => {
+        let ready = false;
         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) {
+                if (ready)
+                    return;
+                ready = true;
                 unsubscribe();
                 resolve();
             }
         });
+        setTimeout(() => {
+            if (ready)
+                return;
+            unsubscribe();
+            resolve();
+        }, 1000);
     });
 }
 export function installEDGutenbergHooks() {
@@ -45,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/
@@ -52,7 +106,11 @@ export function installEDGutenbergHooks() {
     wp.richText.unregisterFormatType("core/language");
     wp.richText.unregisterFormatType("core/keyboard");
     wp.richText.unregisterFormatType("core/text-color");
-    whenEditorIsReady().then(() => watchEditorTemplate());
+    whenEditorIsReady().then(() => {
+        watchEditorTemplate();
+    });
+    // Recalculate registered blocks when rootBlocks change
+    rootBlocks.listen();
     wp.hooks.addFilter("blocks.registerBlockType", "ed", (item, name) => {
         // Hook into ACF blocks, customising the edit mode.
         if (name.startsWith("acf/")) {
@@ -63,25 +121,41 @@ export function installEDGutenbergHooks() {
             };
             // Add an 'inline' object attribute, which will hold all inline contents
             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(() => {
                     ;
                     wp.data.dispatch("core/block-editor").setTemplateValidity(true);
                 }, []);
-                const children = wp.data.useSelect((select) => {
-                    const { getBlock, getBlockOrder } = select("core/block-editor");
+                const { children, index } = wp.data.useSelect((select) => {
+                    const { getBlock, getBlockOrder, getBlockIndex } = select("core/block-editor");
                     const innerBlockIDs = getBlockOrder(props.clientId);
                     const children = innerBlockIDs.map((id) => {
                         return getBlock(id);
                     });
-                    return children;
+                    return {
+                        children,
+                        index: getBlockIndex(props.clientId),
+                    };
                 }, []);
-                return (_jsx(BlockContext.Provider, { value: { name, props }, children: _jsx(InlineEditingContextProvider, { values: props.attributes.inline || {}, innerBlocks: children, block: [name, props], index: -1, onChange: (attrs) => {
+                return (_jsx(BlockContext.Provider, { value: { name, props }, children: _jsx(InlineEditingContextProvider, { values: props.attributes.inline || {}, innerBlocks: children, block: [name, props], index: index ?? -1, onChange: (attrs) => {
                             props.setAttributes({ ...props.attributes, inline: attrs });
-                        }, insertBlocksAfter: props.insertBlocksAfter, children: edit.call(self, props) }) }));
+                        }, insertBlocksAfter: props.insertBlocksAfter, children: _jsx(EditorHighlights, { enabled: true, clientId: props.clientId, children: edit.call(self, props) }) }) }));
             };
         }
         // Find PHP-defined 'tags' for core blocks.
@@ -99,15 +173,30 @@ export function installEDGutenbergHooks() {
             item.tags = [];
         }
         blocksByTag.add(item.name, item.tags);
+        const isRootBlock = rootBlocks.isRootBlock(name, item.tags);
         return {
             ...item,
             get parent() {
-                return blocksByTag.expand([
-                    ...(item.parent ?? []),
-                    ...(item.tags.includes("root") ? ["core/post-content"] : []),
-                ]);
+                if (name === "core/block")
+                    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;
                 return item.ancestor ? blocksByTag.expand(item.ancestor) : undefined;
             },
             get allowedBlocks() {

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

@@ -0,0 +1,6 @@
+export declare const rootBlocks: {
+    listen(): void;
+    update(): void;
+    getRootBlocks(): Set<string>;
+    isRootBlock(blockName: string, tags?: string[]): boolean | undefined;
+};

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

@@ -0,0 +1,30 @@
+import { hash } from "object-code";
+import { subscribe, snapshot } from "valtio";
+import { editorConfigStore } from "./editor-config";
+import { blocksByTag } from "./blocks-by-tag";
+let constraint = ["root"];
+let rootBlockList = new Set(["root"]);
+export const rootBlocks = {
+    listen() {
+        let key = hash(rootBlocks);
+        subscribe(editorConfigStore, () => {
+            constraint = snapshot(editorConfigStore.currentBlocksConfig).rootBlocks ?? ["root"];
+            let newKey = hash(constraint);
+            if (key === newKey)
+                return;
+            // The root blocks config have changed, so we need to recalculate the registered blocks
+            key = newKey;
+            rootBlocks.update();
+        });
+    },
+    update() {
+        rootBlockList = new Set(blocksByTag.expand(constraint));
+        wp.data.dispatch("core/blocks").reapplyBlockTypeFilters();
+    },
+    getRootBlocks() {
+        return rootBlockList;
+    },
+    isRootBlock(blockName, tags) {
+        return rootBlockList.has(blockName) || (tags && tags.some((tag) => rootBlockList.has(tag)));
+    },
+};

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

@@ -1,4 +1,4 @@
-import { InlineValueStore } from "../inline-editing";
+import { InlineValueStore } from "../inline-editing.js";
 export declare function usePostEditor(): {
     post: any;
     updatePost(update: any): void;

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

@@ -1,9 +1,10 @@
-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";
+export * from "./block-utils.js";
+export * from "./ContentBlocks.js";
+export * from "./defineBlock.js";
+export * from "./EditableText.js";
+export * from "./editor/controls.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 "./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";
+export * from "./block-utils.js";
+export * from "./ContentBlocks.js";
+export * from "./defineBlock.js";
+export * from "./EditableText.js";
+export * from "./editor/controls.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

@@ -1,7 +1,15 @@
-import { ContentBlock } from "./ContentBlocks";
+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/blocks/inline-editing.js

@@ -1,12 +1,14 @@
 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";
+import { createContext, useContext, useMemo } from "react";
+import { usePostEditor } from "./editor/usePostEditor.js";
+import { useRoute } from "../routing/index.js";
+import { addBlockMetadata } from "./block-utils.js";
 const InlineEditingContext = createContext(undefined);
 export function InlineEditingContextProvider(props) {
     const parentContext = useContext(InlineEditingContext);
-    addBlockMetadata(props.innerBlocks);
+    useMemo(() => {
+        addBlockMetadata(props.innerBlocks ?? []);
+    }, [props.innerBlocks]);
     return (_jsx(InlineEditingContext.Provider, { value: {
             values: props.values,
             innerBlocks: props.innerBlocks,

package/dist/app/lib/devtools/components/BreakpointIndicator.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTailwindConfig } from "../hooks/useTailwind.js";
 import { usePersistState } from "../hooks/usePersistState.js";
+import { useTailwindConfig } from "../hooks/useTailwind.js";
 function parseBreakpointMin(breakpoint) {
     return parseInt(breakpoint);
 }

package/dist/app/lib/devtools/components/DevUI.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../../../../css/devtools.css";
-import { BreakpointIndicator } from "./BreakpointIndicator";
+import { BreakpointIndicator } from "./BreakpointIndicator.js";
+import { GridIndicator } from "./GridIndicator";
 export default function DevUI() {
-    return (_jsx("div", { className: "eddev-ui", children: _jsx(BreakpointIndicator, {}) }));
+    return (_jsxs("div", { className: "eddev-ui", children: [_jsx(BreakpointIndicator, {}), _jsx(GridIndicator, {})] }));
 }

package/dist/app/lib/devtools/components/GridIndicator.d.ts

@@ -0,0 +1 @@
+export declare function GridIndicator(): import("react/jsx-runtime").JSX.Element | null;

package/dist/app/lib/devtools/components/GridIndicator.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect } from "react";
+import { usePersistState } from "../hooks/usePersistState.js";
+export function GridIndicator() {
+    const [enabled, setEnabled] = usePersistState("gridOverlayEnabled", false);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "g" && e.ctrlKey) {
+                setEnabled((e) => !e);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+        cols.push(_jsx("div", { style: { height: "100%", backgroundColor: "rgba(255,0,0,0.1)" } }));
+    }
+    if (env.client) {
+        useLayoutEffect(() => {
+            document.documentElement.classList.toggle("debug-grid", enabled);
+        }, [enabled]);
+    }
+    if (!enabled)
+        return null;
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 999999999, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto debug-display", style: { height: "100%" }, children: cols }) }));
+}

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

@@ -1 +1 @@
-export declare function usePersistState<T>(id: string, initial: T): [T, (value: T) => void];
+export declare function usePersistState<T>(id: string, initial: T): [T, (value: T | ((current: T) => T)) => void];

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -24,8 +24,17 @@ export function usePersistState(id, initial) {
     return [
         value,
         (value) => {
-            set(id, value);
-            setValue(value);
+            if (typeof value === "function") {
+                return setValue((cur) => {
+                    const next = value(cur);
+                    set(id, next);
+                    return next;
+                });
+            }
+            else {
+                set(id, value);
+                setValue(value);
+            }
         },
     ];
 }