@plaudit/gutenberg-api-extensions 1.0.0

package/build/blocks/index.d.ts

@@ -0,0 +1 @@
+export * from "./simple-block";

package/build/blocks/index.js

@@ -0,0 +1 @@
+export * from "./simple-block";

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

@@ -0,0 +1,13 @@
+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";
+export type SimpleBlockTypeConfig<TAttributes extends Record<string, any>> = {
+    icon?: BlockConfiguration<TAttributes>['icon'] | undefined;
+    defaults: Required<TAttributes>;
+    controls: NonNullable<Block<TAttributes>['edit']>;
+    renderer: (attributes: BlockSaveProps<TAttributes>, wrapperProps: UseBlockProps | UseBlockProps['save'], innerBlocks: () => React.ReactElement) => ReactNode;
+    innerBlocksProps?: InnerBlocks.Props;
+    settings?: Partial<BlockConfiguration<TAttributes>>;
+};
+export declare function registerSimpleBlockType<TAttributes extends Record<string, any> = {}>(metadata: BlockConfiguration<TAttributes>, config: SimpleBlockTypeConfig<TAttributes>): Block<TAttributes> | undefined;

package/build/blocks/simple-block.js

@@ -0,0 +1,26 @@
+import { registerBlockType } from "@wordpress/blocks";
+import { InnerBlocks, useBlockProps } from "@wordpress/block-editor";
+import { plauditIcon } from "../lib/plaudit-icons";
+import React from "react";
+export function registerSimpleBlockType(metadata, config) {
+    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;
+            }
+        }
+        return mutableProps;
+    }
+    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)));
+            return React.createElement(React.Fragment, null,
+                React.createElement(config.controls, Object.assign({}, populatedProps)),
+                rendered);
+        },
+        save(props) {
+            return config.renderer(applyDefaults(props), useBlockProps.save, () => React.createElement(InnerBlocks.Content, null));
+        } }));
+}

package/build/controls/InspectorPanel.d.ts

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

package/build/controls/InspectorPanel.js

@@ -0,0 +1,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,
+        React.createElement(PanelBody, Object.assign({}, props, { children: props.children })));
+}

package/build/controls/PickOne.d.ts

@@ -0,0 +1,6 @@
+import type { PickableOptions, SimpleBlockControlProps } from "./types";
+import React from "react";
+export declare function PickOne<T extends string>(props: SimpleBlockControlProps<T, string> & {
+    options: PickableOptions;
+    layout: 'toggle-group' | 'dropdown' | 'radio';
+}): React.JSX.Element;

package/build/controls/PickOne.js

@@ -0,0 +1,25 @@
+import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, RadioControl, SelectControl } 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]) => ({
+            value, label: typeof label === 'string' ? label : label.text
+        }))
+    };
+}
+export function PickOne(props) {
+    switch (props.layout) {
+        case 'toggle-group':
+            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'
+                    ? React.createElement(ToggleGroupControlOption, { key: value, value: value, label: label })
+                    : React.createElement(ToggleGroupControlOptionIcon, { key: value, value: value, label: label.text, icon: label.icon })) });
+        case 'dropdown':
+            return React.createElement(SelectControl, Object.assign({}, makeSharedRadioAndSelectProps(props), { value: props.attributes[props.attribute] }));
+        case 'radio':
+            return React.createElement(RadioControl, Object.assign({}, makeSharedRadioAndSelectProps(props), { selected: props.attributes[props.attribute] }));
+        default:
+            throw new Error(`Unsupported layout: ${props.layout}`);
+    }
+}

package/build/controls/SimpleToggle.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleBlockControlProps } from "./types";
+import React from "react";
+export declare function SimpleToggle<T extends string>(props: SimpleBlockControlProps<T, boolean>): React.JSX.Element;

package/build/controls/SimpleToggle.js

@@ -0,0 +1,5 @@
+import { ToggleControl } from "@wordpress/components";
+import React from "react";
+export function SimpleToggle(props) {
+    return React.createElement(ToggleControl, { checked: props.attributes[props.attribute], label: props.label, onChange: checked => props.setAttributes({ [props.attribute]: checked }) });
+}

package/build/controls/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./InspectorPanel";
+export * from "./SimpleToggle";
+export * from "./PickOne";

package/build/controls/index.js

@@ -0,0 +1,3 @@
+export * from "./InspectorPanel";
+export * from "./SimpleToggle";
+export * from "./PickOne";

package/build/controls/types.d.ts

@@ -0,0 +1,11 @@
+import type { BlockEditProps, BlockIcon } from "@wordpress/blocks";
+export type SimpleBlockControlProps<T extends string, V> = {
+    label: string;
+    attribute: T;
+    attributes: BlockEditProps<Record<T, V> & Record<string, unknown>>['attributes'];
+    setAttributes: BlockEditProps<any>['setAttributes'];
+};
+export type PickableOptions = Record<string, string | {
+    text: string;
+    icon: BlockIcon;
+}>;

package/build/controls/types.js

@@ -0,0 +1 @@
+export {};

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./blocks";
+export * from "./controls";
+export * from "./lib/plaudit-icons";

package/build/index.js

@@ -0,0 +1,3 @@
+export * from "./blocks";
+export * from "./controls";
+export * from "./lib/plaudit-icons";

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

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const plauditIcon: React.JSX.Element;
+export declare const iconColumn1: React.JSX.Element;
+export declare const iconColumn2: React.JSX.Element;
+export declare const iconColumn3: React.JSX.Element;
+export declare const iconAlignLeft: React.JSX.Element;
+export declare const iconAlignCenter: React.JSX.Element;
+export declare const iconAlignRight: React.JSX.Element;
+export declare const iconCloud: React.JSX.Element;

package/build/lib/plaudit-icons.js

@@ -0,0 +1,87 @@
+// =============================================
+// Allows sharing of assets in block configurations
+// =============================================
+import React from "react";
+export const plauditIcon = React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 139 157.6" },
+    React.createElement("path", { fill: "#d20000", d: "M83.3 39.1L101.6 9c2-3.2.9-7.1-2.4-8.5s-6.9.4-7.9 4l-9.7 33.9c-1.1 3.6-.3 4 1.7.7zm-43.9 19L9 40.5c-3.3-1.9-7.1-.7-8.5 2.6s.5 6.8 4.2 7.8l34.1 8.9c3.7 1 4 .2.6-1.7zm16.3-19c2 3.2 2.7 2.9 1.7-.7L47.6 4.5C46.5.8 43-1 39.7.5S35.3 5.8 37.3 9l18.4 30.1zm82.8 4c-1.4-3.3-5.2-4.5-8.5-2.6L99.5 58.1c-3.3 1.9-3 2.7.7 1.7l34.1-8.9c3.7-1 5.6-4.5 4.2-7.8zM88.8 57.7c-10.6-18.3-28-18.3-38.7 0l-38.7 66.6c-10.6 18.3-1.9 33.3 19.3 33.3h77.4c21.3 0 30-15 19.3-33.3L88.8 57.7zm-19.3 1c7.1 0 12.8 5.8 12.7 12.9s-5.8 12.8-12.9 12.7c-7 0-12.7-5.8-12.8-12.8.1-7.1 5.8-12.9 13-12.8zm32 91.2h-64c-17.6 0-24.8-8.1-16-18l32-35.9c8.8-9.9 23.2-9.9 32 0l32 35.9c8.8 9.9 1.6 17.9-16 18z" }));
+export const iconColumn1 = React.createElement("svg", { width: 34, height: 24, viewBox: "0 0 34 24" },
+    React.createElement("path", { d: "M32 2H2v20h30V2zM2 0C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H2z", fillRule: "evenodd", clipRule: "evenodd" }));
+export const iconColumn2 = React.createElement("svg", { width: 34, height: 24, viewBox: "0 0 34 24" },
+    React.createElement("path", { d: "M32 0c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V2C0 .9.9 0 2 0h30zm0 22V2H18v20h14zm-16 0H2V2h14v20z", fillRule: "evenodd", clipRule: "evenodd" }));
+export const iconColumn3 = React.createElement("svg", { width: 34, height: 24, viewBox: "0 0 34 24" },
+    React.createElement("path", { d: "M34 2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2zM21.5 22h-9V2h9v20zm2 0V2H32v20h-8.5zm-13 0H2V2h8.5v20z", fillRule: "evenodd", clipRule: "evenodd" }));
+export const iconAlignLeft = React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24" },
+    React.createElement("path", { d: "M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z" }));
+export const iconAlignCenter = React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24" },
+    React.createElement("path", { d: "M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z" }));
+export const iconAlignRight = React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24" },
+    React.createElement("path", { d: "M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z" }));
+export const iconCloud = React.createElement("svg", { width: 26, height: 24, viewBox: "0 0 30 28" },
+    React.createElement("path", { d: "M30 18c0 3.313-2.688 6-6 6h-17c-3.859 0-7-3.141-7-7 0-2.797 1.656-5.219 4.031-6.328-0.016-0.219-0.031-0.453-0.031-0.672 0-4.422 3.578-8 8-8 3.344 0 6.203 2.047 7.406 4.969 0.688-0.609 1.594-0.969 2.594-0.969 2.203 0 4 1.797 4 4 0 0.797-0.234 1.531-0.641 2.156 2.656 0.625 4.641 3 4.641 5.844z" }));
+/*
+fill: none;
+stroke: currentColor;
+transform: translate(3px, -1px);
+transform-origin: 100% 100%;
+<symbol id="icon-cloud" viewBox="0 0 30 28">
+<path d="M30 18c0 3.313-2.688 6-6 6h-17c-3.859 0-7-3.141-7-7 0-2.797 1.656-5.219 4.031-6.328-0.016-0.219-0.031-0.453-0.031-0.672 0-4.422 3.578-8 8-8 3.344 0 6.203 2.047 7.406 4.969 0.688-0.609 1.594-0.969 2.594-0.969 2.203 0 4 1.797 4 4 0 0.797-0.234 1.531-0.641 2.156 2.656 0.625 4.641 3 4.641 5.844z"></path>
+</symbol>
+
+Column 1
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 24" width="34" height="24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M32 2H2v20h30V2zM2 0C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2H2z"/>
+</svg>
+
+Column 2
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 24" width="34" height="24">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M32 0c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V2C0 .9.9 0 2 0h30zm0 22V2H18v20h14zm-16 0H2V2h14v20z"/>
+</svg>
+
+Column 3
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 24" width="34" height="24">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M34 2c0-1.1-.9-2-2-2H2C.9 0 0 .9 0 2v20c0 1.1.9 2 2 2h30c1.1 0 2-.9 2-2V2zM21.5 22h-9V2h9v20zm2 0V2H32v20h-8.5zm-13 0H2V2h8.5v20z"/>
+</svg>
+
+Align Left
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+    <path d="M0 2h32v4h-32zM0 8h20v4h-20zM0 20h20v4h-20zM0 14h32v4h-32zM0 26h32v4h-32z"></path>
+</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"></path>
+</svg>
+
+Align Center
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+    <path d="M0 2h32v4h-32zM6 8h20v4h-20zM6 20h20v4h-20zM0 14h32v4h-32zM0 26h32v4h-32z"></path>
+</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"></path>
+</svg>
+
+Align Right
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+    <path d="M0 2h32v4h-32zM12 8h20v4h-20zM12 20h20v4h-20zM0 14h32v4h-32zM0 26h32v4h-32z"></path>
+</svg>
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"></path>
+</svg>
+
+
+Justify Left
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M9 9v6h11V9H9zM4 20h1.5V4H4v16z"></path></svg>
+
+Justify Center
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M20 9h-7.2V4h-1.6v5H4v6h7.2v5h1.6v-5H20z"></path></svg>
+
+Justify Right
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M4 15h11V9H4v6zM18.5 4v16H20V4h-1.5z"></path></svg>
+
+Space Between
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M9 15h6V9H9v6zm-5 5h1.5V4H4v16zM18.5 4v16H20V4h-1.5z"></path></svg>
+
+
+<fieldset class="block-editor-hooks__flex-layout-justification-controls"><legend>Justification</legend><div><button type="button" aria-pressed="true" class="components-button is-pressed has-icon" aria-label="Justify items left"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M9 9v6h11V9H9zM4 20h1.5V4H4v16z"></path></svg></button><button type="button" aria-pressed="false" class="components-button has-icon" aria-label="Justify items center"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M20 9h-7.2V4h-1.6v5H4v6h7.2v5h1.6v-5H20z"></path></svg></button><button type="button" aria-pressed="false" class="components-button has-icon" aria-label="Justify items right"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M4 15h11V9H4v6zM18.5 4v16H20V4h-1.5z"></path></svg></button><button type="button" aria-pressed="false" class="components-button has-icon" aria-label="Space between items"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M9 15h6V9H9v6zm-5 5h1.5V4H4v16zM18.5 4v16H20V4h-1.5z"></path></svg></button></div></fieldset>
+
+<fieldset class="block-editor-hooks__flex-layout-orientation-controls"><legend>Orientation</legend><button type="button" aria-pressed="true" class="components-button is-pressed has-icon" aria-label="horizontal"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M14.3 6.7l-1.1 1.1 4 4H4v1.5h13.3l-4.1 4.4 1.1 1.1 5.8-6.3z"></path></svg></button><button type="button" aria-pressed="false" class="components-button has-icon" aria-label="vertical"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><path d="M16.2 13.2l-4 4V4h-1.5v13.3l-4.5-4.1-1 1.1 6.2 5.8 5.8-5.8-1-1.1z"></path></svg></button></fieldset>
+
+*/

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@plaudit/gutenberg-api-extensions",
+	"version": "1.0.0",
+	"scripts": {
+		"prepublishOnly": "rm -rf build && mkdir build && tsc",
+		"build": "tsc",
+		"watch": "tsc -w"
+	},
+	"files": ["./build"],
+	"exports": {
+		"./lib/plaudit-icons": "./build/lib/plaudit-icons.js",
+		"./blocks": "./build/blocks.js",
+		"./controls": "./build/controls.js"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/core-data": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.11",
+		"@types/wordpress__block-editor": "^11.5.1",
+		"@types/wordpress__blocks": "^12.5.0",
+		"typescript": "^5.1.3"
+	}
+}