@plaudit/gutenberg-api-extensions 1.0.2 → 1.1.0

package/build/blocks/index.d.ts

@@ -1 +1,2 @@
 export * from "./simple-block";
+export * from "./layered-styles";

package/build/blocks/index.js

@@ -1 +1,2 @@
 export * from "./simple-block";
+export * from "./layered-styles";

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

@@ -0,0 +1,15 @@
+export interface LayeredBlockStyleLayer {
+    name: string;
+    title: string;
+    default?: string | undefined;
+    options: Array<{
+        name: string;
+        label: string;
+    }>;
+}
+export interface LayeredBlockStylesConfig {
+    block: `${string}/${string}`;
+    layers: LayeredBlockStyleLayer[];
+}
+export declare function registerLayeredBlockStyles(config: LayeredBlockStylesConfig): void;
+export declare function installLayeredBlockStylesSupport(): void;

package/build/blocks/layered-styles.js

@@ -0,0 +1,63 @@
+import { createHigherOrderComponent } from "@wordpress/compose";
+import { addFilter } from "@wordpress/hooks";
+import React from "react";
+import { InspectorPanel, PickOne } from "../controls";
+export function registerLayeredBlockStyles(config) {
+    var _a;
+    const layeredBlockStyles = (_a = window.plauditLayeredBlockStyles) !== null && _a !== void 0 ? _a : (window.plauditLayeredBlockStyles = new Map());
+    layeredBlockStyles.set(config.block, config);
+}
+export function installLayeredBlockStylesSupport() {
+    var _a;
+    if (window.plauditLayeredBlockStylesInstalled) {
+        return;
+    }
+    window.plauditLayeredBlockStylesInstalled = true;
+    const layeredBlockStyles = (_a = window.plauditLayeredBlockStyles) !== null && _a !== void 0 ? _a : (window.plauditLayeredBlockStyles = new Map());
+    function convertLayersToRadios(layer, props) {
+        const options = {};
+        layer.options.forEach(({ name, label }) => options[name] = label);
+        return React.createElement(PickOne, Object.assign({}, props, { attribute: `layeredStyles__${layer.name}`, options: options, layout: 'toggle-group', label: layer.title }));
+    }
+    addFilter('blocks.registerBlockType', 'plaudit/gutenberg-api-extensions/layered-styles', (atts) => {
+        var _a;
+        if (layeredBlockStyles.has(atts.name)) {
+            (_a = layeredBlockStyles.get(atts.name)) === null || _a === void 0 ? void 0 : _a.layers.forEach(layer => {
+                const attName = `layeredStyles__${layer.name}`;
+                if (!atts.attributes[attName]) {
+                    atts.attributes[attName] = { type: 'string', source: 'attribute', attribute: `data-layered-style-${layer.name}` };
+                }
+            });
+        }
+        return atts;
+    });
+    addFilter('blocks.getBlockAttributes', 'plaudit/gutenberg-api-extensions/layered-styles', (blockAttributes, blockType, innerHTML) => {
+        var _a;
+        if (layeredBlockStyles.has(blockType.name)) {
+            const blockRoot = new DOMParser().parseFromString(innerHTML, "application/xml").documentElement;
+            (_a = layeredBlockStyles.get(blockType.name)) === null || _a === void 0 ? void 0 : _a.layers.forEach(layer => {
+                var _a;
+                blockAttributes[`layeredStyles__${layer.name}`] = (_a = blockRoot.getAttribute(`data-layered-style-${layer.name}`)) !== null && _a !== void 0 ? _a : layer.default;
+            });
+        }
+        return blockAttributes;
+    });
+    addFilter('blocks.getSaveContent.extraProps', 'plaudit/gutenberg-api-extensions/layered-styles', (props, blockType, attributes) => {
+        if (!layeredBlockStyles.has(blockType.name)) {
+            return props;
+        }
+        const res = Object.assign({}, props);
+        layeredBlockStyles.get(blockType.name).layers.forEach(layer => {
+            res[`data-layered-style-${layer.name}`] = attributes[`layeredStyles__${layer.name}`];
+        });
+        return res;
+    });
+    addFilter('editor.BlockEdit', 'plaudit/gutenberg-api-extensions/layered-styles', createHigherOrderComponent((BlockEdit) => (props) => {
+        if (!layeredBlockStyles.has(props['name'])) {
+            return React.createElement(BlockEdit, Object.assign({}, props));
+        }
+        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, props))));
+    }, 'plauditGutenbergApiExtensionsLayeredStyles'));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@plaudit/gutenberg-api-extensions",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"scripts": {
 		"prepublishOnly": "rm -rf build && mkdir build && tsc",
 		"build": "tsc",
@@ -27,7 +27,7 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.11",
+		"@types/react": "^18.2.13",
 		"@types/wordpress__block-editor": "^11.5.1",
 		"@types/wordpress__blocks": "^12.5.0",
 		"typescript": "^5.1.3"