@plaudit/gutenberg-api-extensions 2.0.2 → 2.2.0

package/build/blocks/common-native-property-implementations.d.ts

@@ -0,0 +1,33 @@
+import type { RangeControlProps } from "@wordpress/components/build-types/range-control/types";
+import type { TextControlProps } from "@wordpress/components/build-types/text-control/types";
+import type { TextareaControlProps } from "@wordpress/components/build-types/textarea-control/types";
+import type { SimpleNativeProperty } from "./simple-native-property";
+type CommonPropertyConfig<T, V> = {
+    name: string;
+    label: string;
+    default: T;
+    enum?: T[];
+    component?: V;
+};
+export declare function rangeProperty(config: CommonPropertyConfig<number, RangeControlProps> & {
+    min: number;
+    max: number;
+    step?: number;
+    enum?: number[];
+}): SimpleNativeProperty;
+export declare function textProperty(config: CommonPropertyConfig<string, TextControlProps>): SimpleNativeProperty;
+export declare function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>): SimpleNativeProperty;
+export type ImagePropertyData = {
+    media?: {
+        id?: number;
+        url?: string;
+    };
+    pos?: {
+        x?: number;
+        y?: number;
+    };
+};
+export declare function imageProperty(config: Omit<CommonPropertyConfig<ImagePropertyData, {}>, 'default'> & Partial<Pick<CommonPropertyConfig<ImagePropertyData, {}>, 'default'>> & {
+    enableFocalPointPicker?: boolean;
+}): SimpleNativeProperty;
+export {};

package/build/blocks/common-native-property-implementations.js

@@ -0,0 +1,82 @@
+import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
+import { Button, Card, CardBody, CardHeader, FocalPointPicker, RangeControl, ResponsiveWrapper, TextareaControl, TextControl, __experimentalHeading as Heading } from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { __ } from "@wordpress/i18n";
+import React from "react";
+export function rangeProperty(config) {
+    return {
+        name: config.name,
+        type: 'number',
+        enum: config.enum,
+        default: config.default,
+        renderer(value, onChange) {
+            return React.createElement(RangeControl, Object.assign({ value: value, onChange: onChange, min: config.min, max: config.max, label: config.label, step: config.step }, config.component));
+        }
+    };
+}
+export function textProperty(config) {
+    return {
+        name: config.name,
+        type: 'string',
+        default: config.default,
+        renderer(value, onChange) {
+            return React.createElement(TextControl, Object.assign({ value: value, onChange: onChange }, config.component));
+        }
+    };
+}
+export function textareaProperty(config) {
+    return {
+        name: config.name,
+        type: 'string',
+        default: config.default,
+        renderer(value, onChange) {
+            return React.createElement(TextareaControl, Object.assign({ value: value, onChange: onChange }, config.component));
+        }
+    };
+}
+export function imageProperty(config) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return {
+        name: config.name,
+        type: "object",
+        default: { media: { id: (_c = (_b = (_a = config.default) === null || _a === void 0 ? void 0 : _a.media) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : 0, url: (_f = (_e = (_d = config.default) === null || _d === void 0 ? void 0 : _d.media) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '' }, pos: { x: (_j = (_h = (_g = config.default) === null || _g === void 0 ? void 0 : _g.pos) === null || _h === void 0 ? void 0 : _h.x) !== null && _j !== void 0 ? _j : 50, y: (_m = (_l = (_k = config.default) === null || _k === void 0 ? void 0 : _k.pos) === null || _l === void 0 ? void 0 : _l.y) !== null && _m !== void 0 ? _m : 50 } },
+        renderer(value, onChange) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            const { media } = useSelect(select => {
+                var _a;
+                return { media: ((_a = value.media) === null || _a === void 0 ? void 0 : _a.id) ? select('core').getMedia(value.media.id) : undefined };
+            }, [value]);
+            const noImageUploadedVersion = React.createElement(MediaUploadCheck, null,
+                React.createElement(MediaUpload, { onSelect: media => onChange(Object.assign(Object.assign({}, value), { media: { id: media.id, url: media['url'] } })), value: (_b = (_a = value.media) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 0, allowedTypes: ['image'], render: ({ open }) => {
+                        var _a, _b;
+                        return (React.createElement(Button, { className: !((_a = value.media) === null || _a === void 0 ? void 0 : _a.id) ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview', onClick: open },
+                            !((_b = value.media) === null || _b === void 0 ? void 0 : _b.id) && __('Choose an image', 'plaudit'),
+                            media &&
+                                React.createElement(ResponsiveWrapper, { naturalWidth: media.media_details.width, naturalHeight: media.media_details.height },
+                                    React.createElement("img", { src: media.source_url, alt: "The currently-selected image." }))));
+                    } }));
+            let fppOrMedia;
+            if (config.enableFocalPointPicker !== false) {
+                fppOrMedia = React.createElement(FocalPointPicker, { onChange: pos => onChange(Object.assign(Object.assign({}, value), { pos: { x: pos.x * 100, y: pos.y * 100 } })), url: (_d = (_c = value.media) === null || _c === void 0 ? void 0 : _c.url) !== null && _d !== void 0 ? _d : '', value: {
+                        x: ((_f = (_e = value.pos) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 50) / 100,
+                        y: ((_h = (_g = value.pos) === null || _g === void 0 ? void 0 : _g.y) !== null && _h !== void 0 ? _h : 50) / 100
+                    } });
+            }
+            else {
+                fppOrMedia = React.createElement(ResponsiveWrapper, { naturalWidth: media === null || media === void 0 ? void 0 : media.media_details.width, naturalHeight: media === null || media === void 0 ? void 0 : media.media_details.height },
+                    React.createElement("img", { src: (_k = (_j = value.media) === null || _j === void 0 ? void 0 : _j.url) !== null && _k !== void 0 ? _k : '', alt: "The currently-selected image." }));
+            }
+            const imageUploadedVersion = React.createElement(React.Fragment, null,
+                ((_l = value.media) === null || _l === void 0 ? void 0 : _l.url) && fppOrMedia,
+                React.createElement(MediaUploadCheck, null,
+                    React.createElement(MediaUpload, { title: __('Replace image', 'plaudit'), value: (_o = (_m = value.media) === null || _m === void 0 ? void 0 : _m.id) !== null && _o !== void 0 ? _o : 0, onSelect: media => onChange(Object.assign(Object.assign({}, value), { media: { id: media.id, url: media['url'] } })), allowedTypes: ['image'], render: ({ open }) => (React.createElement(Button, { onClick: open, variant: "secondary" }, __('Replace image', 'plaudit'))) })),
+                React.createElement(MediaUploadCheck, null,
+                    React.createElement(Button, { onClick: () => onChange(Object.assign(Object.assign({}, value), { media: { id: 0, url: '' } })), isDestructive: true }, __('Remove image', 'plaudit'))));
+            return React.createElement(Card, null,
+                React.createElement(CardHeader, null,
+                    React.createElement(Heading, null, config.label)),
+                React.createElement(CardBody, null,
+                    React.createElement("div", { className: "editor-post-featured-image" }, ((_p = value.media) === null || _p === void 0 ? void 0 : _p.id) ? imageUploadedVersion : noImageUploadedVersion)));
+        }
+    };
+}

package/build/blocks/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./simple-block";
 export * from "./layered-styles";
+export * from "./simple-native-property";
+export * from './common-native-property-implementations';

package/build/blocks/index.js

@@ -1,2 +1,4 @@
 export * from "./simple-block";
 export * from "./layered-styles";
+export * from "./simple-native-property";
+export * from './common-native-property-implementations';

package/build/blocks/layered-styles.js

@@ -60,6 +60,6 @@ export function installLayeredBlockStylesSupport() {
         }
         return React.createElement(React.Fragment, null,
             React.createElement(BlockEdit, Object.assign({}, props)),
-            React.createElement(InspectorPanel, { title: "Layered Styles", initialOpen: true }, ...layeredBlockStyles.get(props['name']).layers.map(layer => convertLayersToRadios(layer, layeredBlockStyles.get(props['name']).layers, props))));
+            React.createElement(InspectorPanel, { title: "Layered Styles", initialOpen: true, group: "styles" }, ...layeredBlockStyles.get(props['name']).layers.map(layer => convertLayersToRadios(layer, layeredBlockStyles.get(props['name']).layers, props))));
     }, 'plauditGutenbergApiExtensionsLayeredStyles'));
 }

package/build/blocks/simple-native-property.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export type InspectorPanelGroup = 'default' | 'advanced' | 'background' | 'border' | 'color' | 'dimensions' | 'effects' | 'filter' | 'list' | 'position' | 'settings' | 'styles' | 'typography';
+type GenericSimpleNativeProperty<T, V extends 'string' | 'number' | 'boolean' | 'array' | 'object'> = {
+    name: string;
+    type: V;
+    enum?: T[];
+    default: T;
+    renderer(value: T, onChange: (v: T | undefined) => void): React.JSX.Element;
+};
+export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'> & {
+    enum?: string[];
+} | GenericSimpleNativeProperty<number, 'number'> & {
+    enum?: number[];
+} | GenericSimpleNativeProperty<boolean, 'boolean'> | GenericSimpleNativeProperty<any[], 'array'> | GenericSimpleNativeProperty<Record<string | number, unknown>, 'object'>;
+export type SimpleNativePanel = {
+    title: string;
+    group?: InspectorPanelGroup;
+    initialOpen?: boolean;
+    properties: SimpleNativeProperty[];
+};
+export declare function registerSimpleNativeProperties(config: {
+    block: `${string}/${string}` | Array<`${string}/${string}`>;
+    panel: SimpleNativePanel | Array<SimpleNativePanel>;
+}): void;
+export declare function installSimpleNativePropertiesSupport(): void;
+export {};

package/build/blocks/simple-native-property.js

@@ -0,0 +1,156 @@
+import { createHigherOrderComponent } from "@wordpress/compose";
+import { addFilter } from "@wordpress/hooks";
+import { InspectorPanel } from "../controls";
+import React from "react";
+export function registerSimpleNativeProperties(config) {
+    var _a;
+    const simpleNativePanels = (_a = window.plauditSimpleNativePanels) !== null && _a !== void 0 ? _a : (window.plauditSimpleNativePanels = {});
+    if (Array.isArray(config.block)) {
+        for (const b of config.block) {
+            addPanels(b, config.panel, simpleNativePanels);
+        }
+    }
+    else {
+        addPanels(config.block, config.panel, simpleNativePanels);
+    }
+}
+function addPanels(block, panel, simpleNativePanels) {
+    var _a;
+    const panels = ((_a = simpleNativePanels[block]) !== null && _a !== void 0 ? _a : (simpleNativePanels[block] = []));
+    if (Array.isArray(panel)) {
+        panels.push(...panel);
+    }
+    else {
+        panels.push(panel);
+    }
+}
+export function installSimpleNativePropertiesSupport() {
+    var _a;
+    if (window.plauditSimpleNativePropertiesSupportInstalled) {
+        return;
+    }
+    window.plauditSimpleNativePropertiesSupportInstalled = true;
+    const simpleNativePanels = (_a = window.plauditSimpleNativePanels) !== null && _a !== void 0 ? _a : (window.plauditSimpleNativePanels = {});
+    addFilter('blocks.registerBlockType', 'plaudit/gutenberg-api-extensions/attach-simple-native-properties', (atts) => {
+        const blockSimpleNativePanels = simpleNativePanels[atts.name];
+        if (blockSimpleNativePanels) {
+            const injectableProperties = {};
+            for (const blockSimpleNativePanel of blockSimpleNativePanels) {
+                for (const property of blockSimpleNativePanel.properties) {
+                    const attrPath = property.name.split('.');
+                    if (attrPath.length === 1) {
+                        injectableProperties[property.name] = { type: property.type, default: property.default };
+                        if ('enum' in property) {
+                            injectableProperties[property.name].enum = property.enum;
+                        }
+                    }
+                    else {
+                        let actualProp = injectableProperties[attrPath[0]];
+                        if (actualProp === undefined) {
+                            injectableProperties[attrPath[0]] = actualProp = { type: "object" };
+                        }
+                        else if (actualProp.type !== "object") {
+                            throw new Error(`Property type collision on ${property.name}. Attempted treat the property as an object when it was already a ${actualProp.type}`);
+                        }
+                        if (property.default !== undefined) {
+                            if (actualProp.default === undefined) {
+                                actualProp.default = {};
+                            }
+                            let target = actualProp.default;
+                            for (let i = 1; i < attrPath.length - 1; i++) {
+                                target = target[attrPath[i]] = {};
+                            }
+                            target[attrPath[attrPath.length - 1]] = property.default;
+                        }
+                    }
+                }
+            }
+            for (const [name, config] of Object.entries(injectableProperties)) {
+                atts.attributes[name] = config;
+            }
+        }
+        return atts;
+    });
+    function setDottedAttribute(blockEditProps, attr, value) {
+        const attrPath = attr.split('.');
+        if (attrPath.length === 1) {
+            return blockEditProps.setAttributes({ [attr]: value });
+        }
+        const payload = Object.assign({}, blockEditProps.attributes[attrPath[0]]);
+        let currentLayer = payload;
+        for (let i = 1; i < attrPath.length - 1; i++) {
+            const attrPathNode = attrPath[i];
+            currentLayer = currentLayer[attrPathNode] = {};
+        }
+        currentLayer[attrPath[attrPath.length - 1]] = value;
+        blockEditProps.setAttributes({ [attrPath[0]]: payload });
+    }
+    addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/simple-native-properties', createHigherOrderComponent(BlockEdit => (blockEditProps) => {
+        const blockSimpleNativePanels = simpleNativePanels[blockEditProps.name];
+        if (!blockSimpleNativePanels) {
+            return React.createElement(BlockEdit, Object.assign({}, blockEditProps));
+        }
+        return React.createElement(React.Fragment, null,
+            React.createElement(BlockEdit, Object.assign({}, blockEditProps)),
+            ...blockSimpleNativePanels.map(p => React.createElement(React.Fragment, null,
+                React.createElement(InspectorPanel, Object.assign({}, p), ...p.properties.map(prop => {
+                    const propPath = prop.name.split('.');
+                    let existingValue;
+                    if (propPath.length === 1) {
+                        existingValue = blockEditProps.attributes[prop.name];
+                        if (existingValue === undefined) {
+                            existingValue = prop.default;
+                            blockEditProps.setAttributes({ [prop.name]: prop.default });
+                        }
+                    }
+                    else {
+                        let graphExistingValue = blockEditProps.attributes[propPath[0]];
+                        if (graphExistingValue === undefined) {
+                            blockEditProps.attributes[propPath[0]] = graphExistingValue = {};
+                        }
+                        for (let i = 1; i < propPath.length; i++) {
+                            if (graphExistingValue[propPath[i]] === undefined) {
+                                for (; i < propPath.length - 1; i++) {
+                                    graphExistingValue = graphExistingValue[propPath[i]] = {};
+                                }
+                                graphExistingValue[propPath[propPath.length - 1]] = existingValue = prop.default;
+                                blockEditProps.setAttributes({ [propPath[0]]: blockEditProps.attributes[propPath[0]] });
+                                break;
+                            }
+                            else {
+                                graphExistingValue = graphExistingValue[propPath[i]];
+                            }
+                        }
+                        existingValue = graphExistingValue !== null && graphExistingValue !== void 0 ? graphExistingValue : prop.default;
+                    }
+                    switch (prop.type) {
+                        case "array":
+                            // If the value is not an array or is a sparse array, then it will cause unrecoverable errors upon conversion to PHP
+                            if (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length) {
+                                throw new Error(`Invalid value passed to an array-type property: ${existingValue}`);
+                            }
+                            return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                        case "object":
+                            if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
+                                throw new Error(`Invalid value passed to an object-type property: ${existingValue}`);
+                            }
+                            return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                        case "boolean":
+                            if (typeof existingValue !== 'boolean' && existingValue !== undefined) {
+                                existingValue = !!existingValue;
+                            }
+                            return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                        case 'string':
+                            if (typeof existingValue !== 'string' && existingValue !== undefined) {
+                                existingValue = existingValue.toString();
+                            }
+                            return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                        case "number":
+                            if (typeof existingValue !== 'number' && existingValue !== undefined) {
+                                existingValue = parseFloat(existingValue);
+                            }
+                            return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                    }
+                })))));
+    }, 'plauditGutenbergApiExtensionsSimpleNativeProperties'));
+}

package/build/controls/InspectorPanel.d.ts

@@ -1,3 +1,5 @@
 import type { PanelBodyProps } from "@wordpress/components/build-types/panel/types";
 import React from "react";
-export declare function InspectorPanel(props: PanelBodyProps): React.JSX.Element;
+export declare function InspectorPanel(props: PanelBodyProps & {
+    group?: string;
+}): React.JSX.Element;

package/build/controls/InspectorPanel.js

@@ -2,6 +2,7 @@ import { InspectorControls } from "@wordpress/block-editor";
 import { PanelBody } from "@wordpress/components";
 import React from "react";
 export function InspectorPanel(props) {
-    return React.createElement(InspectorControls, null,
+    const FullyTypedInspectorControls = InspectorControls;
+    return React.createElement(FullyTypedInspectorControls, { group: props.group },
         React.createElement(PanelBody, Object.assign({}, props, { children: props.children })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/gutenberg-api-extensions",
-	"version": "2.0.2",
+	"version": "2.2.0",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
 		"build": "tsc",
@@ -21,22 +21,22 @@
 		}
 	},
 	"dependencies": {
-		"@wordpress/block-editor": "^12.4.0",
-		"@wordpress/blocks": "^12.13.0",
-		"@wordpress/components": "^25.2.0",
-		"@wordpress/compose": "^6.13.0",
-		"@wordpress/core-data": "^6.13.0",
-		"@wordpress/data": "^9.6.0",
-		"@wordpress/element": "^5.13.0",
-		"@wordpress/hooks": "^3.36.0",
-		"@wordpress/i18n": "^4.36.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.14",
-		"@types/wordpress__block-editor": "^11.5.1",
-		"@types/wordpress__blocks": "^12.5.0",
-		"typescript": "^5.1.6"
+		"@types/react": "^18.2.55",
+		"@types/wordpress__block-editor": "^11.5.10",
+		"@types/wordpress__blocks": "^12.5.13",
+		"typescript": "^5.3.3"
 	}
 }