@wp-typia/block-types 0.1.3 → 0.2.0

package/README.md

@@ -15,6 +15,7 @@ Shared WordPress block semantic types derived from Gutenberg source and unoffici
 - `@wp-typia/block-types/block-editor/alignment`
 - `@wp-typia/block-types/block-editor/layout`
 - `@wp-typia/block-types/block-editor/spacing`
+- `@wp-typia/block-types/block-editor/style-attributes`
 - `@wp-typia/block-types/block-editor/typography`
 - `@wp-typia/block-types/blocks`
 - `@wp-typia/block-types/blocks/supports`
@@ -32,12 +33,56 @@ Shared WordPress block semantic types derived from Gutenberg source and unoffici
 - color and dimensions helper types
 - layout and flex vocabulary
 - spacing sides and axes
+- support-generated block style attribute helpers
 - typography enums used by core block supports
-- block support keys used by `block.json`
+- structural block support types for `block.json`
+- additive stable Core coverage for drop caps, spacing sizes, layout gaps,
+  duotone, per-side border widths, and `js` / `locking`
+
+## WordPress style support helpers
+
+The package now exposes two complementary surfaces:
+
+- `@wp-typia/block-types/blocks/supports` for typed `block.json` `supports`
+- `@wp-typia/block-types/block-editor/style-attributes` for the attribute and `style` shapes WordPress injects when those supports are enabled
+
+Example:
+
+```ts
+import type { BlockStyleSupportAttributes } from '@wp-typia/block-types/block-editor/style-attributes';
+import type { BlockSupports } from '@wp-typia/block-types/blocks/supports';
+
+const supports: BlockSupports = {
+  color: { text: true, background: true, gradients: true, enableAlpha: true },
+  spacing: {
+    padding: true,
+    units: ['px', 'rem'],
+    spacingSizes: [{ name: 'Large', slug: 'large', size: '2rem' }],
+  },
+  typography: { fontSize: true, dropCap: true },
+  js: true,
+  locking: true,
+};
+
+type MyBlockStyleAttrs = Pick<
+  BlockStyleSupportAttributes,
+  'backgroundColor' | 'fontSize' | 'style' | 'textColor'
+>;
+```
+
+Stable Core coverage now also includes support/style helpers for layout
+`rowGap` / `columnGap`, color `duotone`, per-side border widths, and other
+recently stabilized support keys.
+
+`__experimentalSkipSerialization` is also typed on selected support sections
+for blocks that compute style output on the server. This follows Gutenberg's
+current experimental surface and should not be treated as a long-term
+stability guarantee.
 
 ## Typia pipeline notes
 
 - `CssColorValue` and `MinHeightValue` are richer DX aliases that currently rely on template literal types.
+- `BlockStyleAttributes` also contains template-literal-style preset references such as `var:preset|color|...` for editor/runtime DX.
 - imported template literal aliases are not yet consumed by the `sync-types` metadata pipeline
 - when a type must round-trip through `types.ts` -> `typia.manifest.json` -> `typia-validator.php`, prefer pipeline-compatible aliases such as `CssNamedColor` and `MinHeightKeyword`
 - for broader CSS-like string shapes in `types.ts`, prefer native Typia constraints on `string`, for example `string & tags.Pattern<"..."> & tags.MaxLength<...>`

package/dist/block-editor/index.d.ts

@@ -3,4 +3,5 @@ export * from "./color";
 export * from "./dimensions";
 export * from "./layout";
 export * from "./spacing";
+export * from "./style-attributes";
 export * from "./typography";

package/dist/block-editor/index.js

@@ -3,4 +3,5 @@ export * from "./color";
 export * from "./dimensions";
 export * from "./layout";
 export * from "./spacing";
+export * from "./style-attributes";
 export * from "./typography";

package/dist/block-editor/style-attributes.d.ts

@@ -0,0 +1,147 @@
+import type { TextAlignment } from './alignment';
+import type { CssColorValue } from './color';
+import type { AspectRatio, MinHeightKeyword, MinHeightValue } from './dimensions';
+import type { SpacingDimension } from './spacing';
+import type { FontStyle, TextDecoration, TextTransform, WritingMode } from './typography';
+export type PresetColorReference = `var:preset|color|${string}`;
+export type PresetDuotoneReference = `var:preset|duotone|${string}`;
+export type PresetGradientReference = `var:preset|gradient|${string}`;
+export type PresetFontFamilyReference = `var:preset|font-family|${string}`;
+export type PresetFontSizeReference = `var:preset|font-size|${string}`;
+/**
+ * Slug-like attributes that WordPress stores outside the `style` object when a
+ * support value maps to a named preset instead of a literal CSS value.
+ *
+ * These stay intentionally broad and pipeline-compatible so generated metadata
+ * can still flow through Typia's current source analysis. They currently carry
+ * semantic intent without narrowing beyond `string`.
+ */
+export type BlockColorSlug = string;
+export type BlockGradientSlug = string;
+export type BlockFontFamilySlug = string;
+export type BlockFontSizeSlug = string;
+/**
+ * Rich style-level color values that mirror the strings Gutenberg stores inside
+ * the `style` attribute when a block uses color support.
+ */
+export type BlockStyleColorValue = CssColorValue | PresetColorReference;
+/**
+ * Practical gradient vocabulary for block support `style.color.gradient`.
+ */
+export type BlockStyleGradientValue = `linear-gradient(${string})` | `radial-gradient(${string})` | `conic-gradient(${string})` | PresetGradientReference;
+/**
+ * Typography values stored under `style.typography.*`.
+ *
+ * These are DX-oriented string surfaces. When the values must round-trip
+ * through Typia metadata generation, prefer explicit `string` constraints in
+ * project-authored `types.ts`.
+ */
+export type BlockStyleFontSizeValue = string | PresetFontSizeReference;
+export type BlockStyleFontFamilyValue = string | PresetFontFamilyReference;
+export type BlockStyleSpacingValue = string | number;
+export type BlockStyleBorderWidthValue = string | number;
+export type BlockStyleBorderRadiusValue = string | number;
+export type BlockShadowStyleAttributes = string;
+export interface BlockLinkColorAttributes {
+    readonly background?: BlockStyleColorValue;
+    readonly text?: BlockStyleColorValue;
+}
+export interface BlockElementsStyleAttributes {
+    readonly link?: {
+        readonly color?: BlockLinkColorAttributes;
+    };
+}
+export interface BlockColorStyleAttributes {
+    readonly background?: BlockStyleColorValue;
+    readonly duotone?: string | PresetDuotoneReference | readonly [CssColorValue, CssColorValue];
+    readonly gradient?: BlockStyleGradientValue;
+    readonly text?: BlockStyleColorValue;
+}
+export interface BlockBorderStyleAttributes {
+    readonly color?: BlockStyleColorValue;
+    readonly radius?: BlockStyleBorderRadiusValue;
+    readonly style?: string;
+    readonly topLeftRadius?: BlockStyleBorderRadiusValue;
+    readonly topRightRadius?: BlockStyleBorderRadiusValue;
+    readonly bottomLeftRadius?: BlockStyleBorderRadiusValue;
+    readonly bottomRightRadius?: BlockStyleBorderRadiusValue;
+    readonly bottomWidth?: BlockStyleBorderWidthValue;
+    readonly leftWidth?: BlockStyleBorderWidthValue;
+    readonly rightWidth?: BlockStyleBorderWidthValue;
+    readonly topWidth?: BlockStyleBorderWidthValue;
+    readonly width?: BlockStyleBorderWidthValue;
+}
+export interface BlockDimensionsStyleAttributes {
+    readonly aspectRatio?: AspectRatio;
+    readonly minHeight?: MinHeightKeyword | MinHeightValue;
+}
+export interface BlockSpacingStyleAttributes {
+    readonly blockGap?: BlockStyleSpacingValue;
+    readonly margin?: BlockStyleSpacingValue | Partial<Record<SpacingDimension, BlockStyleSpacingValue>>;
+    readonly padding?: BlockStyleSpacingValue | Partial<Record<SpacingDimension, BlockStyleSpacingValue>>;
+}
+export interface BlockTypographyStyleAttributes {
+    readonly fontFamily?: BlockStyleFontFamilyValue;
+    readonly fontSize?: BlockStyleFontSizeValue;
+    readonly fontStyle?: FontStyle;
+    readonly fontWeight?: string | number;
+    readonly letterSpacing?: string;
+    readonly lineHeight?: string | number;
+    readonly textAlign?: TextAlignment;
+    readonly textColumns?: number;
+    readonly textDecoration?: TextDecoration;
+    readonly textTransform?: TextTransform;
+    readonly writingMode?: WritingMode;
+}
+export interface BlockPositionStyleAttributes {
+    readonly bottom?: string;
+    readonly left?: string;
+    readonly right?: string;
+    readonly top?: string;
+    readonly type?: 'fixed' | 'sticky';
+}
+/**
+ * WordPress-global-style-compatible `style` attribute shape for blocks that opt
+ * into supports such as color, spacing, typography, border, or dimensions.
+ */
+export interface BlockStyleAttributes {
+    readonly border?: BlockBorderStyleAttributes;
+    readonly color?: BlockColorStyleAttributes;
+    readonly dimensions?: BlockDimensionsStyleAttributes;
+    readonly elements?: BlockElementsStyleAttributes;
+    readonly position?: BlockPositionStyleAttributes;
+    readonly shadow?: BlockShadowStyleAttributes;
+    readonly spacing?: BlockSpacingStyleAttributes;
+    readonly typography?: BlockTypographyStyleAttributes;
+}
+/**
+ * Slug-based attributes plus the shared `style` object that WordPress injects
+ * for color support.
+ */
+export interface BlockColorSupportAttributes {
+    readonly backgroundColor?: BlockColorSlug;
+    readonly gradient?: BlockGradientSlug;
+    readonly style?: BlockStyleAttributes;
+    readonly textColor?: BlockColorSlug;
+}
+/**
+ * Slug-based typography attributes plus the shared `style` object used for
+ * literal values.
+ */
+export interface BlockTypographySupportAttributes {
+    readonly fontFamily?: BlockFontFamilySlug;
+    readonly fontSize?: BlockFontSizeSlug;
+    readonly style?: BlockStyleAttributes;
+}
+export interface BlockSpacingSupportAttributes {
+    readonly style?: BlockStyleAttributes;
+}
+export interface BlockDimensionsSupportAttributes {
+    readonly style?: BlockStyleAttributes;
+}
+export interface BlockBorderSupportAttributes {
+    readonly borderColor?: string;
+    readonly style?: BlockStyleAttributes;
+}
+export interface BlockStyleSupportAttributes extends BlockBorderSupportAttributes, BlockColorSupportAttributes, BlockDimensionsSupportAttributes, BlockSpacingSupportAttributes, BlockTypographySupportAttributes {
+}

package/dist/block-editor/style-attributes.js

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

package/dist/blocks/supports.d.ts

@@ -1,9 +1,167 @@
+import type { BlockAlignment, BlockVerticalAlignment, JustifyContent, TextAlignment } from '../block-editor/alignment';
+import type { FlexWrap, LayoutType, Orientation } from '../block-editor/layout';
+import type { SpacingAxis, SpacingDimension } from '../block-editor/spacing';
 /**
- * Derived from @wordpress/blocks support constants and block support paths.
+ * Derived from Gutenberg block support keys and commonly used block.json
+ * support sections.
  */
-export type BlockSupportFeature = "align" | "anchor" | "ariaLabel" | "border" | "className" | "color" | "dimensions" | "filter" | "html" | "interactivity" | "layout" | "lightbox" | "lock" | "position" | "renaming" | "shadow" | "spacing" | "typography";
-export declare const BLOCK_SUPPORT_FEATURES: readonly ["align", "anchor", "ariaLabel", "border", "className", "color", "dimensions", "filter", "html", "interactivity", "layout", "lightbox", "lock", "position", "renaming", "shadow", "spacing", "typography"];
-export type TypographySupportKey = "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textColumns" | "textDecoration" | "textTransform" | "writingMode";
-export declare const TYPOGRAPHY_SUPPORT_KEYS: readonly ["fontFamily", "fontSize", "fontStyle", "fontWeight", "letterSpacing", "lineHeight", "textAlign", "textColumns", "textDecoration", "textTransform", "writingMode"];
-export type SpacingSupportKey = "blockGap" | "margin" | "padding";
+export type BlockSupportFeature = 'align' | 'alignWide' | 'anchor' | 'ariaLabel' | 'background' | 'border' | 'className' | 'color' | 'customClassName' | 'dimensions' | 'filter' | 'html' | 'inserter' | 'interactivity' | 'js' | 'layout' | 'lightbox' | 'lock' | 'locking' | 'multiple' | 'position' | 'renaming' | 'reusable' | 'shadow' | 'spacing' | 'typography';
+export declare const BLOCK_SUPPORT_FEATURES: readonly ["align", "alignWide", "anchor", "ariaLabel", "background", "border", "className", "color", "customClassName", "dimensions", "filter", "html", "inserter", "interactivity", "js", "layout", "lightbox", "lock", "locking", "multiple", "position", "renaming", "reusable", "shadow", "spacing", "typography"];
+export type TypographySupportKey = 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'dropCap' | 'textAlign' | 'textColumns' | 'textDecoration' | 'textTransform' | 'writingMode';
+export declare const TYPOGRAPHY_SUPPORT_KEYS: readonly ["fontFamily", "fontSize", "fontStyle", "fontWeight", "letterSpacing", "lineHeight", "dropCap", "textAlign", "textColumns", "textDecoration", "textTransform", "writingMode"];
+export type SpacingSupportKey = 'blockGap' | 'margin' | 'padding';
 export declare const SPACING_SUPPORT_KEYS: readonly ["blockGap", "margin", "padding"];
+type BlockSupportDefaultControls<TFeature extends string> = Readonly<Partial<Record<TFeature, boolean>> & Record<string, boolean | undefined>>;
+export type SkipSerialization<TFeature extends string> = boolean | readonly TFeature[];
+export interface BlockBorderSupport {
+    readonly color?: boolean;
+    readonly radius?: boolean;
+    readonly style?: boolean;
+    readonly width?: boolean;
+    readonly __experimentalSkipSerialization?: SkipSerialization<'color' | 'radius' | 'style' | 'width'>;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<'color' | 'radius' | 'style' | 'width'>;
+}
+export interface BlockBackgroundSupport {
+    readonly backgroundImage?: boolean;
+    readonly backgroundSize?: boolean;
+}
+export interface BlockColorSupport {
+    readonly background?: boolean;
+    /**
+     * Dedicated button color support documented in the Block Supports reference
+     * as stable since WordPress 6.5.
+     */
+    readonly button?: boolean;
+    readonly enableAlpha?: boolean;
+    readonly enableContrastChecker?: boolean;
+    readonly gradients?: boolean;
+    /**
+     * Dedicated heading color support documented in the Block Supports reference
+     * as stable since WordPress 6.5.
+     */
+    readonly heading?: boolean;
+    readonly link?: boolean;
+    readonly text?: boolean;
+    readonly __experimentalSkipSerialization?: SkipSerialization<'background' | 'button' | 'gradients' | 'heading' | 'link' | 'text'>;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<'background' | 'gradients' | 'link' | 'text'>;
+}
+export interface BlockDimensionsSupport {
+    readonly aspectRatio?: boolean;
+    readonly height?: boolean;
+    readonly minHeight?: boolean;
+    readonly width?: boolean;
+    readonly __experimentalSkipSerialization?: SkipSerialization<'aspectRatio' | 'height' | 'minHeight' | 'width'>;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<'aspectRatio' | 'height' | 'minHeight' | 'width'>;
+}
+export interface BlockFilterSupport {
+    readonly duotone?: boolean;
+}
+export interface BlockInteractivitySupport {
+    readonly clientNavigation?: boolean;
+    readonly interactive?: boolean;
+}
+export interface BlockLayoutDefault {
+    readonly columnCount?: number;
+    readonly columnGap?: string;
+    readonly contentSize?: string;
+    readonly allowInheriting?: boolean;
+    readonly allowSizingOnChildren?: boolean;
+    readonly flexWrap?: FlexWrap;
+    readonly justifyContent?: JustifyContent;
+    readonly minimumColumnWidth?: string;
+    readonly orientation?: Orientation;
+    readonly rowGap?: string;
+    readonly type?: LayoutType;
+    readonly verticalAlignment?: BlockVerticalAlignment;
+    readonly wideSize?: string;
+}
+export interface BlockLayoutSupport {
+    readonly allowCustomContentAndWideSize?: boolean;
+    readonly allowEditing?: boolean;
+    readonly allowInheriting?: boolean;
+    readonly allowJustification?: boolean;
+    readonly allowOrientation?: boolean;
+    readonly allowSizingOnChildren?: boolean;
+    readonly allowSwitching?: boolean;
+    readonly allowVerticalAlignment?: boolean;
+    readonly allowWrap?: boolean;
+    readonly default?: BlockLayoutDefault;
+}
+export interface BlockLightboxSupport {
+    readonly allowEditing?: boolean;
+    readonly enabled?: boolean;
+}
+export interface BlockPositionSupport {
+    readonly fixed?: boolean;
+    readonly sticky?: boolean;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<'fixed' | 'sticky'>;
+}
+export interface BlockShadowSupport {
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<'shadow'>;
+}
+export interface SpacingSize {
+    readonly name: string;
+    readonly size: string;
+    readonly slug: string;
+}
+export interface BlockSpacingSupport {
+    readonly blockGap?: boolean | readonly SpacingAxis[];
+    readonly margin?: boolean | readonly SpacingDimension[];
+    readonly padding?: boolean | readonly SpacingDimension[];
+    readonly spacingSizes?: readonly SpacingSize[];
+    readonly units?: readonly string[];
+    readonly __experimentalSkipSerialization?: SkipSerialization<SpacingSupportKey>;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<SpacingSupportKey>;
+}
+export interface BlockTypographySupport {
+    readonly dropCap?: boolean;
+    readonly fontFamily?: boolean;
+    readonly fontSize?: boolean;
+    readonly fontStyle?: boolean;
+    readonly fontWeight?: boolean;
+    readonly letterSpacing?: boolean;
+    readonly lineHeight?: boolean;
+    readonly textAlign?: boolean | readonly TextAlignment[];
+    readonly textColumns?: boolean;
+    readonly textDecoration?: boolean;
+    readonly textTransform?: boolean;
+    readonly writingMode?: boolean;
+    readonly __experimentalSkipSerialization?: SkipSerialization<TypographySupportKey>;
+    readonly __experimentalDefaultControls?: BlockSupportDefaultControls<TypographySupportKey>;
+}
+/**
+ * Practical WP 6.9+ block support surface for block.json metadata and
+ * registration helpers.
+ *
+ * This intentionally models the common public subtrees instead of mirroring
+ * every Gutenberg-internal experimental flag.
+ */
+export interface BlockSupports {
+    readonly align?: boolean | readonly BlockAlignment[];
+    readonly alignWide?: boolean;
+    readonly anchor?: boolean;
+    readonly ariaLabel?: boolean;
+    readonly background?: boolean | BlockBackgroundSupport;
+    readonly border?: boolean | BlockBorderSupport;
+    readonly className?: boolean;
+    readonly color?: boolean | BlockColorSupport;
+    readonly customClassName?: boolean;
+    readonly dimensions?: boolean | BlockDimensionsSupport;
+    readonly filter?: boolean | BlockFilterSupport;
+    readonly html?: boolean;
+    readonly inserter?: boolean;
+    readonly interactivity?: boolean | BlockInteractivitySupport;
+    readonly js?: boolean;
+    readonly layout?: boolean | BlockLayoutSupport;
+    readonly lightbox?: boolean | BlockLightboxSupport;
+    readonly lock?: boolean;
+    readonly locking?: boolean;
+    readonly multiple?: boolean;
+    readonly position?: boolean | BlockPositionSupport;
+    readonly renaming?: boolean;
+    readonly reusable?: boolean;
+    readonly shadow?: boolean | BlockShadowSupport;
+    readonly spacing?: boolean | BlockSpacingSupport;
+    readonly typography?: boolean | BlockTypographySupport;
+}
+export {};

package/dist/blocks/supports.js

@@ -1,38 +1,47 @@
 export const BLOCK_SUPPORT_FEATURES = [
-    "align",
-    "anchor",
-    "ariaLabel",
-    "border",
-    "className",
-    "color",
-    "dimensions",
-    "filter",
-    "html",
-    "interactivity",
-    "layout",
-    "lightbox",
-    "lock",
-    "position",
-    "renaming",
-    "shadow",
-    "spacing",
-    "typography",
+    'align',
+    'alignWide',
+    'anchor',
+    'ariaLabel',
+    'background',
+    'border',
+    'className',
+    'color',
+    'customClassName',
+    'dimensions',
+    'filter',
+    'html',
+    'inserter',
+    'interactivity',
+    'js',
+    'layout',
+    'lightbox',
+    'lock',
+    'locking',
+    'multiple',
+    'position',
+    'renaming',
+    'reusable',
+    'shadow',
+    'spacing',
+    'typography',
 ];
 export const TYPOGRAPHY_SUPPORT_KEYS = [
-    "fontFamily",
-    "fontSize",
-    "fontStyle",
-    "fontWeight",
-    "letterSpacing",
-    "lineHeight",
-    "textAlign",
-    "textColumns",
-    "textDecoration",
-    "textTransform",
-    "writingMode",
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'dropCap',
+    'textAlign',
+    'textColumns',
+    'textDecoration',
+    'textTransform',
+    'writingMode',
 ];
 export const SPACING_SUPPORT_KEYS = [
-    "blockGap",
-    "margin",
-    "padding",
+    'blockGap',
+    'margin',
+    'padding',
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wp-typia/block-types",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Shared WordPress block semantic types derived from Gutenberg and unofficial declarations",
   "type": "module",
   "main": "dist/index.js",
@@ -41,6 +41,11 @@
       "import": "./dist/block-editor/spacing.js",
       "default": "./dist/block-editor/spacing.js"
     },
+    "./block-editor/style-attributes": {
+      "types": "./dist/block-editor/style-attributes.d.ts",
+      "import": "./dist/block-editor/style-attributes.js",
+      "default": "./dist/block-editor/style-attributes.js"
+    },
     "./block-editor/typography": {
       "types": "./dist/block-editor/typography.d.ts",
       "import": "./dist/block-editor/typography.js",