@plaudit/gutenberg-api-extensions 1.4.2 → 2.0.0

package/build/blocks/simple-block.d.ts

@@ -1,13 +1,22 @@
 import { type Block, type BlockConfiguration, type BlockSaveProps } from "@wordpress/blocks";
 import { InnerBlocks } from "@wordpress/block-editor";
 import type { UseBlockProps } from "@wordpress/block-editor/components/use-block-props";
-import React, { type ReactNode } from "react";
+import React, { type ComponentType, type ReactNode } from "react";
 export type SimpleBlockTypeConfig<TAttributes extends Record<string, any>> = {
     icon?: BlockConfiguration<TAttributes>['icon'] | undefined;
-    defaults: Required<TAttributes>;
+    defaults?: Required<TAttributes>;
     controls?: NonNullable<Block<TAttributes>['edit']>;
     renderer: (attributes: BlockSaveProps<TAttributes>, wrapperProps: UseBlockProps | UseBlockProps['save'], InnerBlocks: () => React.ReactElement, mode: "edit" | "save") => ReactNode;
     innerBlocksProps?: InnerBlocks.Props;
     settings?: Partial<BlockConfiguration<TAttributes>>;
 };
+declare function applyDefaults<TAttributes extends Record<string, any>, K extends BlockSaveProps<TAttributes>>(config: Omit<SimpleBlockTypeConfig<TAttributes>, 'renderer'>, props: K): Omit<K, "attributes"> & {
+    attributes: { [P in keyof K["attributes"]]: K["attributes"][P]; };
+};
 export declare function registerSimpleBlockType<TAttributes extends Record<string, any> = {}>(metadata: BlockConfiguration<TAttributes>, config: SimpleBlockTypeConfig<TAttributes>): Block<TAttributes> | undefined;
+type SimpleContainerTypeConfig<TAttributes extends Record<string, any>> = Omit<SimpleBlockTypeConfig<TAttributes>, 'renderer'> & {
+    tag?: ComponentType;
+    attributesFromProps?: (arg: ReturnType<typeof applyDefaults<TAttributes, BlockSaveProps<TAttributes>>>, mode: "edit" | "save") => Parameters<UseBlockProps | UseBlockProps['save']>[0];
+};
+export declare function registerSimpleContainerBlock<TAttributes extends Record<string, any> = {}>(metadata: BlockConfiguration<TAttributes>, config: SimpleContainerTypeConfig<TAttributes>): Block<TAttributes> | undefined;
+export {};

package/build/blocks/simple-block.js

@@ -1,26 +1,41 @@
 import { registerBlockType } from "@wordpress/blocks";
-import { InnerBlocks, useBlockProps } from "@wordpress/block-editor";
+import { InnerBlocks, useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
 import { plauditIcon } from "../lib/plaudit-icons";
 import React from "react";
-export function registerSimpleBlockType(metadata, config) {
+function applyDefaults(config, props) {
     var _a;
-    function applyDefaults(props) {
-        const mutableProps = Object.assign(Object.assign({}, props), { attributes: Object.assign({}, props.attributes) });
-        for (const [k, v] of Object.entries(config.defaults)) {
-            if (mutableProps.attributes[k] === undefined) {
-                mutableProps.attributes[k] = v;
-            }
+    const mutableProps = Object.assign(Object.assign({}, props), { attributes: Object.assign({}, props.attributes) });
+    for (const [k, v] of Object.entries((_a = config.defaults) !== null && _a !== void 0 ? _a : {})) {
+        if (mutableProps.attributes[k] === undefined) {
+            mutableProps.attributes[k] = v;
         }
-        return mutableProps;
     }
+    return mutableProps;
+}
+export function registerSimpleBlockType(metadata, config) {
+    var _a;
     return registerBlockType(metadata, Object.assign(Object.assign({}, config.settings), { icon: (_a = config.icon) !== null && _a !== void 0 ? _a : plauditIcon, edit(props) {
-            const populatedProps = applyDefaults(props);
-            const rendered = config.renderer(populatedProps, useBlockProps, () => React.createElement(InnerBlocks, Object.assign({}, config.innerBlocksProps)), "edit");
+            const populatedProps = applyDefaults(config, props);
+            return React.createElement(React.Fragment, null,
+                config.controls && React.createElement(config.controls, Object.assign({}, populatedProps)),
+                config.renderer(populatedProps, useBlockProps, () => React.createElement(InnerBlocks, Object.assign({}, config.innerBlocksProps)), "edit"));
+        },
+        save(props) {
+            return config.renderer(applyDefaults(config, props), useBlockProps.save, () => React.createElement(InnerBlocks.Content, null), "save");
+        } }));
+}
+export function registerSimpleContainerBlock(metadata, config) {
+    var _a, _b;
+    const Tag = (_a = config.tag) !== null && _a !== void 0 ? _a : ((props) => React.createElement("div", Object.assign({}, props)));
+    return registerBlockType(metadata, Object.assign(Object.assign({}, config.settings), { icon: (_b = config.icon) !== null && _b !== void 0 ? _b : plauditIcon, edit(props) {
+            var _a;
+            const populatedProps = applyDefaults(config, props);
             return React.createElement(React.Fragment, null,
                 config.controls && React.createElement(config.controls, Object.assign({}, populatedProps)),
-                rendered);
+                React.createElement(Tag, Object.assign({}, useInnerBlocksProps(useBlockProps(((_a = config.attributesFromProps) !== null && _a !== void 0 ? _a : (() => ({})))(populatedProps, "edit")), config.innerBlocksProps))));
         },
         save(props) {
-            return config.renderer(applyDefaults(props), useBlockProps.save, () => React.createElement(InnerBlocks.Content, null), "save");
+            var _a;
+            return React.createElement(Tag, Object.assign({}, useInnerBlocksProps.save(useBlockProps.save(((_a = config.attributesFromProps) !== null && _a !== void 0 ? _a : (() => ({})))(applyDefaults(config, props), "edit")))));
         } }));
 }

package/build/controls/PickOne.d.ts

@@ -1,6 +1,6 @@
+import type { BlockIcon } from "@wordpress/blocks";
 import type { PickableOptions, SimpleBlockControlProps } from "./types";
 import React from "react";
-import { BlockIcon } from "@wordpress/blocks";
 export declare function PickOneFromToggleGroup<T extends string>(props: SimpleBlockControlProps<T, string> & {
     options: PickableOptions<{
         icon: BlockIcon;

package/build/controls/PickOne.js

@@ -1,16 +1,18 @@
-import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, ColorPalette, RadioControl, SelectControl } from "@wordpress/components";
+import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, BaseControl, ColorPalette, RadioControl, SelectControl, useBaseControlProps } from "@wordpress/components";
 import React from "react";
 function makeSharedRadioAndSelectProps(props) {
     return {
         label: props.label,
-        onChange: (value) => props.setAttributes({ [props.attribute]: value }),
-        options: Object.entries(props.options).map(([value, label]) => ({
+        onChange(value) {
+            props.setAttributes({ [props.attribute]: value });
+        },
+        options: props.options.map(([value, label]) => ({
             value, label: typeof label === 'string' ? label : label.text
         }))
     };
 }
 export function PickOneFromToggleGroup(props) {
-    return React.createElement(ToggleGroupControl, { label: props.label, value: props.attributes[props.attribute], onChange: value => props.setAttributes({ [props.attribute]: value }), children: Object.entries(props.options).map(([value, label]) => typeof label === 'string'
+    return React.createElement(ToggleGroupControl, { label: props.label, value: props.attributes[props.attribute], onChange: value => props.setAttributes({ [props.attribute]: value }), children: props.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 })) });
 }
@@ -25,7 +27,7 @@ export function PickOneFromColors(props) {
     const valueToColorMap = new Map();
     const colorToValueMap = new Map();
     const colors = [];
-    for (const [value, display] of Object.entries(props.options)) {
+    for (const [value, display] of props.options) {
         if (typeof display === 'string') {
             colors.push({ color: value, name: display });
         }
@@ -39,8 +41,7 @@ export function PickOneFromColors(props) {
         }
     }
     const currentColor = (_a = valueToColorMap.get(props.attributes[props.attribute])) !== null && _a !== void 0 ? _a : props.attributes[props.attribute];
-    const id = `layeredStyles__colorPicker--${Math.random().toString().replace(/[.\-]/, '')}`;
-    return React.createElement(React.Fragment, null,
-        React.createElement("label", { htmlFor: id }, props.label),
-        React.createElement(ColorPalette, { id: id, disableCustomColors: true, onChange: color => { var _a, _b; return props.setAttributes({ [props.attribute]: (_b = (_a = colorToValueMap.get(color !== null && color !== void 0 ? color : currentColor)) !== null && _a !== void 0 ? _a : color) !== null && _b !== void 0 ? _b : currentColor }); }, colors: colors, value: currentColor, clearable: false }));
+    const { baseControlProps, controlProps } = useBaseControlProps({ label: props.label });
+    return React.createElement(BaseControl, Object.assign({}, baseControlProps),
+        React.createElement(ColorPalette, Object.assign({}, controlProps, { disableCustomColors: true, onChange: color => { var _a, _b; return props.setAttributes({ [props.attribute]: (_b = (_a = colorToValueMap.get(color !== null && color !== void 0 ? color : currentColor)) !== null && _a !== void 0 ? _a : color) !== null && _b !== void 0 ? _b : currentColor }); }, colors: colors, value: currentColor, clearable: false })));
 }

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 = {}> = Record<string, string | ({
+export type PickableOptions<T extends object = {}> = Array<[string, string | ({
     text: string;
-} & T)>;
+} & T)]>;

package/package.json

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