@plaudit/gutenberg-api-extensions 2.3.0 → 2.5.0

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

@@ -1,6 +1,10 @@
+import type { BlockIcon } from "@wordpress/blocks";
 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 { ToggleControlProps } from "@wordpress/components/build-types/toggle-control/types";
+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";
 type CommonPropertyConfig<T, V> = {
     name: string;
@@ -8,6 +12,7 @@ type CommonPropertyConfig<T, V> = {
     default: T;
     enum?: T[];
     component?: V;
+    help?: string;
 };
 export declare function rangeProperty(config: CommonPropertyConfig<number, RangeControlProps> & {
     min: number;
@@ -15,6 +20,14 @@ export declare function rangeProperty(config: CommonPropertyConfig<number, Range
     step?: number;
     enum?: number[];
 }): SimpleNativeProperty;
+export declare function toggleProperty(config: CommonPropertyConfig<boolean, ToggleControlProps>): SimpleNativeProperty;
+type ToggleGroupPropertyConfigBase<T extends string | number> = CommonPropertyConfig<T, ToggleGroupControlProps> & {
+    options: PickableOptions<T, {
+        icon: BlockIcon;
+    }>;
+};
+export type ToggleGroupPropertyConfig = ToggleGroupPropertyConfigBase<string> | ToggleGroupPropertyConfigBase<number>;
+export declare function toggleGroupProperty(config: ToggleGroupPropertyConfig): SimpleNativeProperty;
 export declare function textProperty(config: CommonPropertyConfig<string, TextControlProps>): SimpleNativeProperty;
 export declare function textareaProperty(config: CommonPropertyConfig<string, TextareaControlProps>): SimpleNativeProperty;
 export type ImagePropertyData = {

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, __experimentalHeading as Heading } from "@wordpress/components";
+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 { useSelect } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import React from "react";
@@ -10,17 +10,52 @@ export function rangeProperty(config) {
         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));
+            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 toggleProperty(config) {
+    return {
+        name: config.name,
+        type: 'boolean',
+        default: config.default,
+        renderer(value, onChange) {
+            return React.createElement(ToggleControl, Object.assign({ checked: value, onChange: onChange, label: config.label, help: config.help }, config.component));
+        }
+    };
+}
+export function toggleGroupProperty(config) {
+    const children = config.options.map(([value, label]) => typeof label === 'string'
+        ? React.createElement(ToggleGroupControlOption, { key: value, value: value, label: label })
+        : React.createElement(ToggleGroupControlOptionIcon, { key: value, value: value, label: label.text, icon: label.icon }));
+    if (typeof config.default === 'string') {
+        return {
+            name: config.name,
+            type: 'string',
+            default: config.default,
+            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 }, config.component, { children: children }));
+            }
+        };
+    }
+    else {
+        return {
+            name: config.name,
+            type: 'number',
+            default: config.default,
+            renderer(value, onChange) {
+                return React.createElement(ToggleGroupControl, Object.assign({ value: value, label: config.label, help: config.help }, config.component, { onChange: v => onChange(v === undefined || typeof v === 'number' ? v : (v.includes('.') ? parseFloat(v) : parseInt(v))), children: children }));
+            }
+        };
+    }
+}
 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));
+            return React.createElement(TextControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
         }
     };
 }
@@ -30,7 +65,7 @@ export function textareaProperty(config) {
         type: 'string',
         default: config.default,
         renderer(value, onChange) {
-            return React.createElement(TextareaControl, Object.assign({ value: value, onChange: onChange }, config.component));
+            return React.createElement(TextareaControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
         }
     };
 }

package/build/blocks/layered-styles.d.ts

@@ -7,19 +7,19 @@ type BaseLayeredBlockStyleLayer = {
 };
 type LayeredBlockStyleColorLayer = BaseLayeredBlockStyleLayer & {
     picker: 'color';
-    options: PickableOptions<{
+    options: PickableOptions<string, {
         color?: string;
     }>;
 };
 type LayeredBlockStyleToggleLayer = BaseLayeredBlockStyleLayer & {
     picker?: 'toggle-control';
-    options: PickableOptions<{
+    options: PickableOptions<string, {
         icon: BlockIcon;
     }>;
 };
 type LayeredBlockStyleSelectOrRadioLayer = BaseLayeredBlockStyleLayer & {
     picker: 'select' | 'radio';
-    options: PickableOptions;
+    options: PickableOptions<string>;
 };
 export type LayeredBlockStyleLayer = LayeredBlockStyleColorLayer | LayeredBlockStyleToggleLayer | LayeredBlockStyleSelectOrRadioLayer;
 export interface LayeredBlockStylesConfig {

package/build/controls/PickOne.d.ts

@@ -1,18 +1,19 @@
 import type { PickableOptions, SimpleBlockControlProps } from "./types";
 import React, { type ReactElement } from "react";
-export declare function PickOneFromToggleGroup<T extends string>(props: SimpleBlockControlProps<T, string> & {
-    options: PickableOptions<{
+export type PickOneFromToggleGroupProps<T extends string> = SimpleBlockControlProps<T, string | number> & {
+    options: PickableOptions<string, {
         icon: ReactElement;
     }>;
-}): React.JSX.Element;
+};
+export declare function PickOneFromToggleGroup<T extends string>(props: PickOneFromToggleGroupProps<T>): React.JSX.Element;
 export declare function PickOneFromSelect<T extends string>(props: SimpleBlockControlProps<T, string> & {
-    options: PickableOptions;
+    options: PickableOptions<string>;
 }): React.JSX.Element;
 export declare function PickOneFromRadios<T extends string>(props: SimpleBlockControlProps<T, string> & {
-    options: PickableOptions;
+    options: PickableOptions<string>;
 }): React.JSX.Element;
 export declare function PickOneFromColors<T extends string>(props: SimpleBlockControlProps<T, string> & {
-    options: PickableOptions<{
+    options: PickableOptions<string, {
         color?: string | undefined;
     }>;
 }): React.JSX.Element;

package/build/controls/types.d.ts

@@ -7,6 +7,6 @@ export type SpecificValueBlockProps<T extends string, V> = {
 export type SimpleBlockControlProps<T extends string, V> = SpecificValueBlockProps<T, V> & {
     label: string;
 };
-export type PickableOptions<T extends object = {}> = Array<[string, string | ({
+export type PickableOptions<V extends string | number, T extends object = {}> = Array<[V, string | ({
     text: string;
 } & T)]>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/gutenberg-api-extensions",
-	"version": "2.3.0",
+	"version": "2.5.0",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
 		"build": "tsc",