@plaudit/gutenberg-api-extensions 2.5.1 → 2.7.0

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

@@ -1,4 +1,5 @@
 import type { BlockIcon } from "@wordpress/blocks";
+import type { RadioControlProps } from "@wordpress/components/build-types/radio-control/types";
 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";
@@ -6,13 +7,20 @@ import type { ToggleControlProps } from "@wordpress/components/build-types/toggl
 import type { ToggleGroupControlProps } from "@wordpress/components/build-types/toggle-group-control/types";
 import type { PickableOptions } from "../controls/types";
 import type { SimpleNativeProperty } from "./simple-native-property";
+export type ActualBlockEditProps = {
+    attributes: Record<string, any>;
+    setAttributes: (attributes: Record<string, any>) => void;
+    name: string;
+};
 type CommonPropertyConfig<T, V> = {
     name: string;
     label: string;
     default: T;
     enum?: T[];
-    component?: V;
+    component?: Partial<V>;
     help?: string;
+    alwaysStore?: boolean;
+    condition?(blockEditProps: ActualBlockEditProps): boolean;
 };
 export declare function rangeProperty(config: CommonPropertyConfig<number, RangeControlProps> & {
     min: number;
@@ -20,6 +28,12 @@ export declare function rangeProperty(config: CommonPropertyConfig<number, Range
     step?: number;
     enum?: number[];
 }): SimpleNativeProperty;
+export declare function radioProperty(config: CommonPropertyConfig<string, RadioControlProps> & {
+    options: PickableOptions<string>;
+}): SimpleNativeProperty;
+export declare function selectProperty(config: CommonPropertyConfig<string, never> & {
+    options: PickableOptions<string>;
+}): SimpleNativeProperty;
 export declare function toggleProperty(config: CommonPropertyConfig<boolean, ToggleControlProps>): SimpleNativeProperty;
 type ToggleGroupPropertyConfigBase<T extends string | number> = CommonPropertyConfig<T, ToggleGroupControlProps> & {
     options: PickableOptions<T, {

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

@@ -1,5 +1,5 @@
 import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
-import { Button, Card, CardBody, CardHeader, FocalPointPicker, RangeControl, ResponsiveWrapper, TextareaControl, TextControl, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalHeading as Heading, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon } from "@wordpress/components";
+import { Button, Card, CardBody, CardHeader, FocalPointPicker, RadioControl, RangeControl, SelectControl, ResponsiveWrapper, TextareaControl, TextControl, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalHeading as Heading, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon } from "@wordpress/components";
 import { useSelect } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import React from "react";
@@ -9,16 +9,46 @@ export function rangeProperty(config) {
         type: 'number',
         enum: config.enum,
         default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
         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, help: config.help }, config.component));
         }
     };
 }
+export function radioProperty(config) {
+    return {
+        name: config.name,
+        type: 'string',
+        enum: config.enum,
+        default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
+        renderer(value, onChange) {
+            return React.createElement(RadioControl, Object.assign({ selected: value, onChange: onChange, options: asOptions(config.options), label: config.label, help: config.help }, config.component));
+        }
+    };
+}
+export function selectProperty(config) {
+    return {
+        name: config.name,
+        type: 'string',
+        enum: config.enum,
+        default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
+        renderer(value, onChange) {
+            return React.createElement(SelectControl, { value: value !== null && value !== void 0 ? value : '', onChange: onChange, options: asOptions(config.options, ''), label: config.label, help: config.help });
+        }
+    };
+}
 export function toggleProperty(config) {
     return {
         name: config.name,
         type: 'boolean',
         default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
         renderer(value, onChange) {
             return React.createElement(ToggleControl, Object.assign({ checked: value, onChange: onChange, label: config.label, help: config.help }, config.component));
         }
@@ -33,6 +63,8 @@ export function toggleGroupProperty(config) {
             name: config.name,
             type: 'string',
             default: config.default,
+            condition: config.condition,
+            alwaysStore: config.alwaysStore,
             renderer(value, onChange) {
                 return React.createElement(ToggleGroupControl, Object.assign({ value: value, onChange: v => onChange(v === null || v === void 0 ? void 0 : v.toString()), label: config.label, help: config.help, isBlock: true }, config.component, { children: children }));
             }
@@ -43,6 +75,8 @@ export function toggleGroupProperty(config) {
             name: config.name,
             type: 'number',
             default: config.default,
+            condition: config.condition,
+            alwaysStore: config.alwaysStore,
             renderer(value, onChange) {
                 return React.createElement(ToggleGroupControl, Object.assign({ value: value, label: config.label, help: config.help, isBlock: true }, config.component, { onChange: v => onChange(v === undefined || typeof v === 'number' ? v : (v.includes('.') ? parseFloat(v) : parseInt(v))), children: children }));
             }
@@ -54,6 +88,8 @@ export function textProperty(config) {
         name: config.name,
         type: 'string',
         default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
         renderer(value, onChange) {
             return React.createElement(TextControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
         }
@@ -64,6 +100,8 @@ export function textareaProperty(config) {
         name: config.name,
         type: 'string',
         default: config.default,
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
         renderer(value, onChange) {
             return React.createElement(TextareaControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
         }
@@ -74,6 +112,8 @@ export function imageProperty(config) {
     return {
         name: config.name,
         type: "object",
+        condition: config.condition,
+        alwaysStore: config.alwaysStore,
         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;
@@ -115,3 +155,10 @@ export function imageProperty(config) {
         }
     };
 }
+function asOptions(options, noSelectionValue) {
+    const res = options.map(opt => ({ value: opt[0], label: typeof opt[1] === 'string' ? opt[1] : opt[1].text }));
+    if (noSelectionValue !== undefined && !res.some(opt => !opt.value)) {
+        res.splice(0, 0, { value: noSelectionValue, label: "-- No Selection --" });
+    }
+    return res;
+}

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

@@ -1,3 +1,4 @@
+import type { ActualBlockEditProps } from "./common-native-property-implementations";
 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'> = {
@@ -5,7 +6,9 @@ type GenericSimpleNativeProperty<T, V extends 'string' | 'number' | 'boolean' |
     type: V;
     enum?: T[];
     default: T;
+    alwaysStore?: boolean;
     renderer(value: T, onChange: (v: T | undefined) => void): React.JSX.Element;
+    condition?(blockEditProps: ActualBlockEditProps): boolean;
 };
 export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'> & {
     enum?: string[];
@@ -17,6 +20,7 @@ export type SimpleNativePanel = {
     group?: InspectorPanelGroup;
     initialOpen?: boolean;
     properties: SimpleNativeProperty[];
+    condition?(blockEditProps: ActualBlockEditProps): boolean;
 };
 export declare function registerSimpleNativeProperties(config: {
     block: `${string}/${string}` | Array<`${string}/${string}`>;

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

@@ -39,7 +39,7 @@ export function installSimpleNativePropertiesSupport() {
                 for (const property of blockSimpleNativePanel.properties) {
                     const attrPath = property.name.split('.');
                     if (attrPath.length === 1) {
-                        injectableProperties[property.name] = { type: property.type, default: property.default };
+                        injectableProperties[property.name] = { type: property.type, default: property.alwaysStore ? undefined : property.default };
                         if ('enum' in property) {
                             injectableProperties[property.name].enum = property.enum;
                         }
@@ -90,10 +90,11 @@ export function installSimpleNativePropertiesSupport() {
         if (!blockSimpleNativePanels) {
             return React.createElement(BlockEdit, Object.assign({}, blockEditProps));
         }
+        let keyIndex = 0;
         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 => {
+            ...blockSimpleNativePanels.map(p => {
+                const items = p.properties.map(prop => {
                     const propPath = prop.name.split('.');
                     let existingValue;
                     if (propPath.length === 1) {
@@ -123,34 +124,40 @@ export function installSimpleNativePropertiesSupport() {
                         }
                         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));
+                    let ele;
+                    if (prop.type === "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}`);
+                        }
+                        ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                    }
+                    else if (prop.type === "object") {
+                        if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
+                            throw new Error(`Invalid value passed to an object-type property: ${existingValue}`);
+                        }
+                        ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                    }
+                    else if (prop.type === "boolean") {
+                        if (typeof existingValue !== 'boolean' && existingValue !== undefined) {
+                            existingValue = !!existingValue;
+                        }
+                        ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                    }
+                    else if (prop.type === "string") {
+                        if (typeof existingValue !== 'string' && existingValue !== undefined) {
+                            existingValue = existingValue.toString();
+                        }
+                        ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
+                    }
+                    else {
+                        if (typeof existingValue !== 'number' && existingValue !== undefined) {
+                            existingValue = parseFloat(existingValue);
+                        }
+                        ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
                     }
-                })))));
+                    return prop.condition === undefined || prop.condition(blockEditProps) ? ele : undefined;
+                }).filter((ele) => ele !== undefined);
+                return React.createElement(InspectorPanel, Object.assign({}, p, { condition: () => items.length > 0 && (p.condition === undefined || p.condition(blockEditProps)), key: `plaudit-simple-native-property-${keyIndex++}` }), ...items);
+            }));
     }, 'plauditGutenbergApiExtensionsSimpleNativeProperties'));
 }

package/build/controls/InspectorPanel.d.ts

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

package/build/controls/InspectorPanel.js

@@ -4,5 +4,5 @@ import React from "react";
 export function InspectorPanel(props) {
     const FullyTypedInspectorControls = InspectorControls;
     return React.createElement(FullyTypedInspectorControls, { group: props.group },
-        React.createElement(PanelBody, Object.assign({}, props, { children: props.children })));
+        React.createElement(PanelBody, Object.assign({}, props, { children: props.condition === undefined || props.condition() ? props.children : [] })));
 }

package/build/lib/plaudit-icons/placement-center.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const placementCenter: React.JSX.Element;

package/build/lib/plaudit-icons/placement-center.js

@@ -0,0 +1,3 @@
+import React from "react";
+export const placementCenter = React.createElement("svg", { version: "1.1", x: "0px", y: "0px", focusable: false, viewBox: "0 0 24 24", enableBackground: "new 0 0 24 24", xmlSpace: "preserve" },
+    React.createElement("path", { d: "M20,11h-5V4H9v7H4v1.5h5V20h6v-7.5h5V11z" }));

package/build/lib/plaudit-icons/placement-end.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const placementEnd: React.JSX.Element;

package/build/lib/plaudit-icons/placement-end.js

@@ -0,0 +1,3 @@
+import React from "react";
+export const placementEnd = React.createElement("svg", { version: "1.1", x: "0px", y: "0px", focusable: false, viewBox: "0 0 24 24", enableBackground: "new 0 0 24 24", xmlSpace: "preserve" },
+    React.createElement("path", { d: "M15,4H9v11h6V4z M4,18.5V20h16v-1.5H4z" }));

package/build/lib/plaudit-icons/placement-start.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const placementStart: React.JSX.Element;

package/build/lib/plaudit-icons/placement-start.js

@@ -0,0 +1,3 @@
+import React from "react";
+export const placementStart = React.createElement("svg", { version: "1.1", x: "0px", y: "0px", focusable: false, viewBox: "0 0 24 24", enableBackground: "new 0 0 24 24", xmlSpace: "preserve" },
+    React.createElement("path", { d: "M9,20h6V9H9V20z M4,4v1.5h16V4H4z" }));

package/build/lib/plaudit-icons/placement-stretch.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const placementStretch: React.JSX.Element;

package/build/lib/plaudit-icons/placement-stretch.js

@@ -0,0 +1,3 @@
+import React from "react";
+export const placementStretch = React.createElement("svg", { version: "1.1", x: "0px", y: "0px", focusable: false, viewBox: "0 0 24 24", enableBackground: "new 0 0 24 24", xmlSpace: "preserve" },
+    React.createElement("path", { d: "M8.8,6.5h6v11h-6V6.5z M4,18.5h16V20H4V18.5z M4,4h16v1.5H4V4z" }));

package/build/lib/plaudit-icons.d.ts

@@ -1,5 +1,9 @@
-export * from './plaudit-icons/plaudit-icon';
 export * from './plaudit-icons/column-1';
 export * from './plaudit-icons/column-2';
 export * from './plaudit-icons/column-3';
+export * from './plaudit-icons/placement-start';
+export * from './plaudit-icons/placement-center';
+export * from './plaudit-icons/placement-end';
+export * from './plaudit-icons/placement-stretch';
+export * from './plaudit-icons/plaudit-icon';
 export * from './plaudit-icons/reusable-block-marker';

package/build/lib/plaudit-icons.js

@@ -1,8 +1,12 @@
 // =============================================
 // Allows sharing of assets in block configurations
 // =============================================
-export * from './plaudit-icons/plaudit-icon';
 export * from './plaudit-icons/column-1';
 export * from './plaudit-icons/column-2';
 export * from './plaudit-icons/column-3';
+export * from './plaudit-icons/placement-start';
+export * from './plaudit-icons/placement-center';
+export * from './plaudit-icons/placement-end';
+export * from './plaudit-icons/placement-stretch';
+export * from './plaudit-icons/plaudit-icon';
 export * from './plaudit-icons/reusable-block-marker';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/gutenberg-api-extensions",
-	"version": "2.5.1",
+	"version": "2.7.0",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
 		"build": "tsc",
@@ -34,7 +34,7 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.55",
+		"@types/react": "^18.2.57",
 		"@types/wordpress__block-editor": "^11.5.10",
 		"@types/wordpress__blocks": "^12.5.13",
 		"typescript": "^5.3.3"