@plaudit/gutenberg-api-extensions 2.5.1 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/build/blocks/common-native-property-implementations.d.ts +8 -1
  2. package/build/blocks/common-native-property-implementations.js +14 -0
  3. package/build/blocks/simple-native-property.d.ts +4 -0
  4. package/build/blocks/simple-native-property.js +38 -31
  5. package/build/controls/InspectorPanel.d.ts +1 -0
  6. package/build/controls/InspectorPanel.js +1 -1
  7. package/build/lib/plaudit-icons/placement-center.d.ts +2 -0
  8. package/build/lib/plaudit-icons/placement-center.js +3 -0
  9. package/build/lib/plaudit-icons/placement-end.d.ts +2 -0
  10. package/build/lib/plaudit-icons/placement-end.js +3 -0
  11. package/build/lib/plaudit-icons/placement-start.d.ts +2 -0
  12. package/build/lib/plaudit-icons/placement-start.js +3 -0
  13. package/build/lib/plaudit-icons/placement-stretch.d.ts +2 -0
  14. package/build/lib/plaudit-icons/placement-stretch.js +3 -0
  15. package/build/lib/plaudit-icons.d.ts +5 -1
  16. package/build/lib/plaudit-icons.js +5 -1
  17. package/package.json +1 -1
package/build/blocks/common-native-property-implementations.d.ts CHANGED
@@ -6,13 +6,20 @@ import type { ToggleControlProps } from "@wordpress/components/build-types/toggl
6
6
  import type { ToggleGroupControlProps } from "@wordpress/components/build-types/toggle-group-control/types";
7
7
  import type { PickableOptions } from "../controls/types";
8
8
  import type { SimpleNativeProperty } from "./simple-native-property";
9
+ export type ActualBlockEditProps = {
10
+ attributes: Record<string, any>;
11
+ setAttributes: (attributes: Record<string, any>) => void;
12
+ name: string;
13
+ };
9
14
  type CommonPropertyConfig<T, V> = {
10
15
  name: string;
11
16
  label: string;
12
17
  default: T;
13
18
  enum?: T[];
14
- component?: V;
19
+ component?: Partial<V>;
15
20
  help?: string;
21
+ alwaysStore?: boolean;
22
+ condition?(blockEditProps: ActualBlockEditProps): boolean;
16
23
  };
17
24
  export declare function rangeProperty(config: CommonPropertyConfig<number, RangeControlProps> & {
18
25
  min: number;
package/build/blocks/common-native-property-implementations.js CHANGED
@@ -9,6 +9,8 @@ export function rangeProperty(config) {
9
9
  type: 'number',
10
10
  enum: config.enum,
11
11
  default: config.default,
12
+ condition: config.condition,
13
+ alwaysStore: config.alwaysStore,
12
14
  renderer(value, onChange) {
13
15
  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));
14
16
  }
@@ -19,6 +21,8 @@ export function toggleProperty(config) {
19
21
  name: config.name,
20
22
  type: 'boolean',
21
23
  default: config.default,
24
+ condition: config.condition,
25
+ alwaysStore: config.alwaysStore,
22
26
  renderer(value, onChange) {
23
27
  return React.createElement(ToggleControl, Object.assign({ checked: value, onChange: onChange, label: config.label, help: config.help }, config.component));
24
28
  }
@@ -33,6 +37,8 @@ export function toggleGroupProperty(config) {
33
37
  name: config.name,
34
38
  type: 'string',
35
39
  default: config.default,
40
+ condition: config.condition,
41
+ alwaysStore: config.alwaysStore,
36
42
  renderer(value, onChange) {
37
43
  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 }));
38
44
  }
@@ -43,6 +49,8 @@ export function toggleGroupProperty(config) {
43
49
  name: config.name,
44
50
  type: 'number',
45
51
  default: config.default,
52
+ condition: config.condition,
53
+ alwaysStore: config.alwaysStore,
46
54
  renderer(value, onChange) {
47
55
  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 }));
48
56
  }
@@ -54,6 +62,8 @@ export function textProperty(config) {
54
62
  name: config.name,
55
63
  type: 'string',
56
64
  default: config.default,
65
+ condition: config.condition,
66
+ alwaysStore: config.alwaysStore,
57
67
  renderer(value, onChange) {
58
68
  return React.createElement(TextControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
59
69
  }
@@ -64,6 +74,8 @@ export function textareaProperty(config) {
64
74
  name: config.name,
65
75
  type: 'string',
66
76
  default: config.default,
77
+ condition: config.condition,
78
+ alwaysStore: config.alwaysStore,
67
79
  renderer(value, onChange) {
68
80
  return React.createElement(TextareaControl, Object.assign({ value: value, onChange: onChange, label: config.label, help: config.help }, config.component));
69
81
  }
@@ -74,6 +86,8 @@ export function imageProperty(config) {
74
86
  return {
75
87
  name: config.name,
76
88
  type: "object",
89
+ condition: config.condition,
90
+ alwaysStore: config.alwaysStore,
77
91
  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 } },
78
92
  renderer(value, onChange) {
79
93
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
package/build/blocks/simple-native-property.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ActualBlockEditProps } from "./common-native-property-implementations";
1
2
  import React from "react";
2
3
  export type InspectorPanelGroup = 'default' | 'advanced' | 'background' | 'border' | 'color' | 'dimensions' | 'effects' | 'filter' | 'list' | 'position' | 'settings' | 'styles' | 'typography';
3
4
  type GenericSimpleNativeProperty<T, V extends 'string' | 'number' | 'boolean' | 'array' | 'object'> = {
@@ -5,7 +6,9 @@ type GenericSimpleNativeProperty<T, V extends 'string' | 'number' | 'boolean' |
5
6
  type: V;
6
7
  enum?: T[];
7
8
  default: T;
9
+ alwaysStore?: boolean;
8
10
  renderer(value: T, onChange: (v: T | undefined) => void): React.JSX.Element;
11
+ condition?(blockEditProps: ActualBlockEditProps): boolean;
9
12
  };
10
13
  export type SimpleNativeProperty = GenericSimpleNativeProperty<string, 'string'> & {
11
14
  enum?: string[];
@@ -17,6 +20,7 @@ export type SimpleNativePanel = {
17
20
  group?: InspectorPanelGroup;
18
21
  initialOpen?: boolean;
19
22
  properties: SimpleNativeProperty[];
23
+ condition?(blockEditProps: ActualBlockEditProps): boolean;
20
24
  };
21
25
  export declare function registerSimpleNativeProperties(config: {
22
26
  block: `${string}/${string}` | Array<`${string}/${string}`>;
package/build/blocks/simple-native-property.js CHANGED
@@ -39,7 +39,7 @@ export function installSimpleNativePropertiesSupport() {
39
39
  for (const property of blockSimpleNativePanel.properties) {
40
40
  const attrPath = property.name.split('.');
41
41
  if (attrPath.length === 1) {
42
- injectableProperties[property.name] = { type: property.type, default: property.default };
42
+ injectableProperties[property.name] = { type: property.type, default: property.alwaysStore ? undefined : property.default };
43
43
  if ('enum' in property) {
44
44
  injectableProperties[property.name].enum = property.enum;
45
45
  }
@@ -90,10 +90,11 @@ export function installSimpleNativePropertiesSupport() {
90
90
  if (!blockSimpleNativePanels) {
91
91
  return React.createElement(BlockEdit, Object.assign({}, blockEditProps));
92
92
  }
93
+ let keyIndex = 0;
93
94
  return React.createElement(React.Fragment, null,
94
95
  React.createElement(BlockEdit, Object.assign({}, blockEditProps)),
95
- ...blockSimpleNativePanels.map(p => React.createElement(React.Fragment, null,
96
- React.createElement(InspectorPanel, Object.assign({}, p), ...p.properties.map(prop => {
96
+ ...blockSimpleNativePanels.map(p => {
97
+ const items = p.properties.map(prop => {
97
98
  const propPath = prop.name.split('.');
98
99
  let existingValue;
99
100
  if (propPath.length === 1) {
@@ -123,34 +124,40 @@ export function installSimpleNativePropertiesSupport() {
123
124
  }
124
125
  existingValue = graphExistingValue !== null && graphExistingValue !== void 0 ? graphExistingValue : prop.default;
125
126
  }
126
- switch (prop.type) {
127
- case "array":
128
- // If the value is not an array or is a sparse array, then it will cause unrecoverable errors upon conversion to PHP
129
- if (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length) {
130
- throw new Error(`Invalid value passed to an array-type property: ${existingValue}`);
131
- }
132
- return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
133
- case "object":
134
- if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
135
- throw new Error(`Invalid value passed to an object-type property: ${existingValue}`);
136
- }
137
- return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
138
- case "boolean":
139
- if (typeof existingValue !== 'boolean' && existingValue !== undefined) {
140
- existingValue = !!existingValue;
141
- }
142
- return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
143
- case 'string':
144
- if (typeof existingValue !== 'string' && existingValue !== undefined) {
145
- existingValue = existingValue.toString();
146
- }
147
- return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
148
- case "number":
149
- if (typeof existingValue !== 'number' && existingValue !== undefined) {
150
- existingValue = parseFloat(existingValue);
151
- }
152
- return prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
127
+ let ele;
128
+ 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
129
+ if (!Array.isArray(existingValue) || existingValue.length > existingValue.filter(() => true).length) {
130
+ throw new Error(`Invalid value passed to an array-type property: ${existingValue}`);
131
+ }
132
+ ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
133
+ }
134
+ else if (prop.type === "object") {
135
+ if (Array.isArray(existingValue) || typeof existingValue !== 'object') {
136
+ throw new Error(`Invalid value passed to an object-type property: ${existingValue}`);
137
+ }
138
+ ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
139
+ }
140
+ else if (prop.type === "boolean") {
141
+ if (typeof existingValue !== 'boolean' && existingValue !== undefined) {
142
+ existingValue = !!existingValue;
143
+ }
144
+ ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
145
+ }
146
+ else if (prop.type === "string") {
147
+ if (typeof existingValue !== 'string' && existingValue !== undefined) {
148
+ existingValue = existingValue.toString();
149
+ }
150
+ ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
151
+ }
152
+ else {
153
+ if (typeof existingValue !== 'number' && existingValue !== undefined) {
154
+ existingValue = parseFloat(existingValue);
155
+ }
156
+ ele = prop.renderer(existingValue, value => setDottedAttribute(blockEditProps, prop.name, value));
153
157
  }
154
- })))));
158
+ return prop.condition === undefined || prop.condition(blockEditProps) ? ele : undefined;
159
+ }).filter((ele) => ele !== undefined);
160
+ return React.createElement(InspectorPanel, Object.assign({}, p, { condition: () => items.length > 0 && (p.condition === undefined || p.condition(blockEditProps)), key: `plaudit-simple-native-property-${keyIndex++}` }), ...items);
161
+ }));
155
162
  }, 'plauditGutenbergApiExtensionsSimpleNativeProperties'));
156
163
  }
package/build/controls/InspectorPanel.d.ts CHANGED
@@ -2,4 +2,5 @@ import type { PanelBodyProps } from "@wordpress/components/build-types/panel/typ
2
2
  import React from "react";
3
3
  export declare function InspectorPanel(props: PanelBodyProps & {
4
4
  group?: string;
5
+ condition?(): boolean;
5
6
  }): React.JSX.Element;
package/build/controls/InspectorPanel.js CHANGED
@@ -4,5 +4,5 @@ import React from "react";
4
4
  export function InspectorPanel(props) {
5
5
  const FullyTypedInspectorControls = InspectorControls;
6
6
  return React.createElement(FullyTypedInspectorControls, { group: props.group },
7
- React.createElement(PanelBody, Object.assign({}, props, { children: props.children })));
7
+ React.createElement(PanelBody, Object.assign({}, props, { children: props.condition === undefined || props.condition() ? props.children : [] })));
8
8
  }
package/build/lib/plaudit-icons/placement-center.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare const placementCenter: React.JSX.Element;
package/build/lib/plaudit-icons/placement-center.js ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ 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" },
3
+ React.createElement("path", { d: "M20,11h-5V4H9v7H4v1.5h5V20h6v-7.5h5V11z" }));
package/build/lib/plaudit-icons/placement-end.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare const placementEnd: React.JSX.Element;
package/build/lib/plaudit-icons/placement-end.js ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ 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" },
3
+ React.createElement("path", { d: "M15,4H9v11h6V4z M4,18.5V20h16v-1.5H4z" }));
package/build/lib/plaudit-icons/placement-start.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare const placementStart: React.JSX.Element;
package/build/lib/plaudit-icons/placement-start.js ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ 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" },
3
+ React.createElement("path", { d: "M9,20h6V9H9V20z M4,4v1.5h16V4H4z" }));
package/build/lib/plaudit-icons/placement-stretch.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare const placementStretch: React.JSX.Element;
package/build/lib/plaudit-icons/placement-stretch.js ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ 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" },
3
+ React.createElement("path", { d: "M8.8,6.5h6v11h-6V6.5z M4,18.5h16V20H4V18.5z M4,4h16v1.5H4V4z" }));
package/build/lib/plaudit-icons.d.ts CHANGED
@@ -1,5 +1,9 @@
1
- export * from './plaudit-icons/plaudit-icon';
2
1
  export * from './plaudit-icons/column-1';
3
2
  export * from './plaudit-icons/column-2';
4
3
  export * from './plaudit-icons/column-3';
4
+ export * from './plaudit-icons/placement-start';
5
+ export * from './plaudit-icons/placement-center';
6
+ export * from './plaudit-icons/placement-end';
7
+ export * from './plaudit-icons/placement-stretch';
8
+ export * from './plaudit-icons/plaudit-icon';
5
9
  export * from './plaudit-icons/reusable-block-marker';
package/build/lib/plaudit-icons.js CHANGED
@@ -1,8 +1,12 @@
1
1
  // =============================================
2
2
  // Allows sharing of assets in block configurations
3
3
  // =============================================
4
- export * from './plaudit-icons/plaudit-icon';
5
4
  export * from './plaudit-icons/column-1';
6
5
  export * from './plaudit-icons/column-2';
7
6
  export * from './plaudit-icons/column-3';
7
+ export * from './plaudit-icons/placement-start';
8
+ export * from './plaudit-icons/placement-center';
9
+ export * from './plaudit-icons/placement-end';
10
+ export * from './plaudit-icons/placement-stretch';
11
+ export * from './plaudit-icons/plaudit-icon';
8
12
  export * from './plaudit-icons/reusable-block-marker';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaudit/gutenberg-api-extensions",
3
- "version": "2.5.1",
3
+ "version": "2.6.0",
4
4
  "scripts": {
5
5
  "prepublishOnly": "rm -rf build && mkdir build && tsc",
6
6
  "build": "tsc",