create-wp-typia 0.1.0

package/templates/interactivity/scripts/sync-types-to-block-json.ts.mustache

@@ -0,0 +1,25 @@
+import { syncBlockMetadata } from "./lib/typia-metadata-core";
+
+async function main() {
+	const result = await syncBlockMetadata({
+		blockJsonFile: "src/block.json",
+		manifestFile: "src/typia.manifest.json",
+		sourceTypeName: "{{pascalCase}}Attributes",
+		typesFile: "src/types.ts",
+	});
+
+	console.log("✅ block.json and typia.manifest.json were generated from TypeScript types!");
+	console.log("📝 Generated attributes:", result.attributeNames);
+
+	if (result.lossyProjectionWarnings.length > 0) {
+		console.warn("⚠️ Some Typia constraints were preserved only in typia.manifest.json:");
+		for (const warning of result.lossyProjectionWarnings) {
+			console.warn(`   - ${warning}`);
+		}
+	}
+}
+
+main().catch((error) => {
+	console.error("❌ Type sync failed:", error);
+	process.exit(1);
+});

package/templates/interactivity/src/block.json.mustache

@@ -0,0 +1,75 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "create-block/{{slugKebabCase}}",
+	"version": "0.1.0",
+	"title": "{{title}}",
+	"category": "widgets",
+	"icon": "smiley",
+	"description": "{{description}}",
+	"example": {},
+	"supports": {
+		"html": false,
+		"align": true,
+		"anchor": true,
+		"className": true,
+		"interactivity": true
+	},
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": ".{{cssClassName}}__content",
+			"default": ""
+		},
+		"alignment": {
+			"type": "string",
+			"enum": ["left", "center", "right"],
+			"default": "left"
+		},
+		"isVisible": {
+			"type": "boolean",
+			"default": true
+		},
+		"interactiveMode": {
+			"type": "string",
+			"enum": ["click", "hover", "auto"],
+			"default": "click"
+		},
+		"animation": {
+			"type": "string",
+			"enum": ["none", "bounce", "pulse", "shake", "flip"],
+			"default": "none"
+		},
+		"clickCount": {
+			"type": "number",
+			"default": 0
+		},
+		"isAnimating": {
+			"type": "boolean",
+			"default": false
+		},
+		"showCounter": {
+			"type": "boolean",
+			"default": true
+		},
+		"maxClicks": {
+			"type": "number",
+			"default": 10
+		},
+		"autoPlayInterval": {
+			"type": "number",
+			"default": 0
+		},
+		"uniqueId": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"textdomain": "{{slugSnakeCase}}",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"viewScript": "file:./view.js",
+	"viewScriptModule": "file:./interactivity.js"
+}

package/templates/interactivity/src/edit.tsx.mustache

@@ -0,0 +1,206 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl, SelectControl, RangeControl, TextControl, Button, Notice } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import type { {{pascalCase}}Attributes } from './types';
+
+export default function Edit({ attributes, setAttributes, isSelected }: {
+  attributes: {{pascalCase}}Attributes;
+  setAttributes: (attrs: Partial<{{pascalCase}}Attributes>) => void;
+  isSelected: boolean;
+}) {
+  const [isPreviewing, setIsPreviewing] = useState(false);
+
+  const blockProps = useBlockProps({
+    className: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${attributes.interactiveMode}`,
+    'data-wp-interactive': '{{slugKebabCase}}',
+    'data-wp-context': JSON.stringify({
+      clicks: attributes.clickCount,
+      isAnimating: attributes.isAnimating,
+      isVisible: attributes.isVisible,
+      lastInteraction: '',
+      animation: attributes.animation,
+      interactiveMode: attributes.interactiveMode,
+      maxClicks: attributes.maxClicks,
+      autoPlayInterval: attributes.autoPlayInterval
+    })
+  });
+
+  const resetCounter = () => {
+    setAttributes({ clickCount: 0, isAnimating: false });
+  };
+
+  const testAnimation = () => {
+    setAttributes({ isAnimating: true });
+    setTimeout(() => {
+      setAttributes({ isAnimating: false });
+    }, 1000);
+  };
+
+  return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={attributes.alignment}
+          onChange={(value) => setAttributes({ alignment: value || 'left' })}
+        />
+      </BlockControls>
+
+      <InspectorControls>
+        <PanelBody title={__('Interactive Settings', '{{slugSnakeCase}}')}>
+          <SelectControl
+            label={__('Interactive Mode', '{{slugSnakeCase}}')}
+            value={attributes.interactiveMode}
+            options={[
+              { label: __('Click', '{{slugSnakeCase}}'), value: 'click' },
+              { label: __('Hover', '{{slugSnakeCase}}'), value: 'hover' },
+              { label: __('Auto Play', '{{slugSnakeCase}}'), value: 'auto' }
+            ]}
+            onChange={(value) => setAttributes({ interactiveMode: value })}
+          />
+
+          <SelectControl
+            label={__('Animation', '{{slugSnakeCase}}')}
+            value={attributes.animation}
+            options={[
+              { label: __('None', '{{slugSnakeCase}}'), value: 'none' },
+              { label: __('Bounce', '{{slugSnakeCase}}'), value: 'bounce' },
+              { label: __('Pulse', '{{slugSnakeCase}}'), value: 'pulse' },
+              { label: __('Shake', '{{slugSnakeCase}}'), value: 'shake' },
+              { label: __('Flip', '{{slugSnakeCase}}'), value: 'flip' }
+            ]}
+            onChange={(value) => setAttributes({ animation: value })}
+          />
+
+          <ToggleControl
+            label={__('Show Counter', '{{slugSnakeCase}}')}
+            checked={attributes.showCounter}
+            onChange={(value) => setAttributes({ showCounter: value })}
+          />
+
+          <ToggleControl
+            label={__('Visible', '{{slugSnakeCase}}')}
+            checked={attributes.isVisible}
+            onChange={(value) => setAttributes({ isVisible: value })}
+          />
+        </PanelBody>
+
+        <PanelBody title={__('Counter Settings', '{{slugSnakeCase}}')}>
+          <RangeControl
+            label={__('Max Clicks', '{{slugSnakeCase}}')}
+            value={attributes.maxClicks}
+            onChange={(value) => setAttributes({ maxClicks: value })}
+            min={0}
+            max={100}
+            help={__('Set to 0 for unlimited clicks', '{{slugSnakeCase}}')}
+          />
+
+          {attributes.interactiveMode === 'auto' && (
+            <RangeControl
+              label={__('Auto Play Interval (ms)', '{{slugSnakeCase}}')}
+              value={attributes.autoPlayInterval}
+              onChange={(value) => setAttributes({ autoPlayInterval: value })}
+              min={100}
+              max={5000}
+              step={100}
+              help={__('Interval between automatic animations', '{{slugSnakeCase}}')}
+            />
+          )}
+
+          <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+            <Button
+              variant="secondary"
+              onClick={resetCounter}
+              isSmall
+            >
+              {__('Reset Counter', '{{slugSnakeCase}}')}
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={testAnimation}
+              isSmall
+            >
+              {__('Test Animation', '{{slugSnakeCase}}')}
+            </Button>
+          </div>
+
+          <TextControl
+            label={__('Unique ID', '{{slugSnakeCase}}')}
+            value={attributes.uniqueId}
+            onChange={(value) => setAttributes({ uniqueId: value })}
+            help={__('Optional unique identifier for this block instance', '{{slugSnakeCase}}')}
+          />
+        </PanelBody>
+
+        {isSelected && (
+          <PanelBody title={__('Preview', '{{slugSnakeCase}}')}>
+            <ToggleControl
+              label={__('Enable Preview Mode', '{{slugSnakeCase}}')}
+              checked={isPreviewing}
+              onChange={setIsPreviewing}
+              help={__('Test interactions in the editor', '{{slugSnakeCase}}')}
+            />
+
+            {attributes.clickCount > 0 && (
+              <Notice status="info" isDismissible={false}>
+                {__('Current clicks:', '{{slugSnakeCase}}')} {attributes.clickCount}
+                {attributes.maxClicks > 0 && ` / ${attributes.maxClicks}`}
+              </Notice>
+            )}
+          </PanelBody>
+        )}
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <div
+          className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
+          style={{ textAlign: attributes.alignment }}
+          data-wp-on--click={isPreviewing ? 'actions.handleClick' : undefined}
+          data-wp-on--mouseenter={isPreviewing && attributes.interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
+          data-wp-on--mouseleave={isPreviewing && attributes.interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
+        >
+          <RichText
+            tagName="p"
+            value={attributes.content}
+            onChange={(value) => setAttributes({ content: value })}
+            placeholder={__('{{title}} – click me to interact!', '{{slugSnakeCase}}')}
+            withoutInteractiveFormatting
+          />
+
+          {attributes.showCounter && (
+            <div className="{{cssClassName}}__counter">
+              <span className="{{cssClassName}}__counter-label">
+                {__('Clicks:', '{{slugSnakeCase}}')}
+              </span>
+              <span
+                className="{{cssClassName}}__counter-value"
+                data-wp-text="state.clicks"
+              >
+                {attributes.clickCount}
+              </span>
+            </div>
+          )}
+
+          {attributes.maxClicks > 0 && (
+            <div className="{{cssClassName}}__progress">
+              <div
+                className="{{cssClassName}}__progress-bar"
+                style={{ width: `${(attributes.clickCount / attributes.maxClicks) * 100}%` }}
+                data-wp-style--width="state.progress + '%'"
+              />
+            </div>
+          )}
+
+          {attributes.animation !== 'none' && (
+            <div
+              className={`{{cssClassName}}__animation ${attributes.isAnimating ? 'is-active' : ''}`}
+              data-wp-class="is-active"
+            >
+              {attributes.animation}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/interactivity/src/interactivity.ts.mustache

@@ -0,0 +1,183 @@
+/**
+ * WordPress Interactivity API implementation for {{title}} block
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+// Store configuration
+store('{{slugKebabCase}}', {
+  // State - reactive data that updates the UI
+  state: {
+    get clicks() {
+      return getContext().clicks;
+    },
+    get isAnimating() {
+      return getContext().isAnimating;
+    },
+    get isVisible() {
+      return getContext().isVisible;
+    },
+    get animationClass() {
+      const context = getContext();
+      if (!context.isAnimating) return '';
+
+      switch (context.animation) {
+        case 'bounce':
+          return 'animate-bounce';
+        case 'pulse':
+          return 'animate-pulse';
+        case 'shake':
+          return 'animate-shake';
+        case 'flip':
+          return 'animate-flip';
+        default:
+          return '';
+      }
+    },
+    get progress() {
+      const context = getContext();
+      return context.maxClicks > 0 ? (context.clicks / context.maxClicks) * 100 : 0;
+    },
+    get isComplete() {
+      const context = getContext();
+      return context.clicks >= context.maxClicks && context.maxClicks > 0;
+    }
+  },
+
+  // Actions - user interactions
+  actions: {
+    // Handle block click
+    handleClick: () => {
+      const context = getContext();
+      const { element } = getElement();
+
+      // Increment click counter
+      context.clicks += 1;
+      context.lastInteraction = 'click';
+
+      // Trigger animation
+      if (context.animation !== 'none') {
+        context.isAnimating = true;
+        setTimeout(() => {
+          context.isAnimating = false;
+        }, 1000);
+      }
+
+      // Emit custom event
+      element.dispatchEvent(new CustomEvent('{{slugKebabCase}}:click', {
+        detail: { clicks: context.clicks }
+      }));
+
+      // Check if max clicks reached
+      if (context.maxClicks > 0 && context.clicks >= context.maxClicks) {
+        element.dispatchEvent(new CustomEvent('{{slugKebabCase}}:complete', {
+          detail: { totalClicks: context.clicks }
+        }));
+      }
+    },
+
+    // Handle hover events
+    handleMouseEnter: () => {
+      const context = getContext();
+      if (context.interactiveMode === 'hover') {
+        context.isAnimating = true;
+        context.lastInteraction = 'hover';
+      }
+    },
+
+    handleMouseLeave: () => {
+      const context = getContext();
+      if (context.interactiveMode === 'hover') {
+        context.isAnimating = false;
+      }
+    },
+
+    // Toggle visibility
+    toggleVisibility: () => {
+      const context = getContext();
+      context.isVisible = !context.isVisible;
+    },
+
+    // Reset counter
+    reset: () => {
+      const context = getContext();
+      context.clicks = 0;
+      context.isAnimating = false;
+      context.lastInteraction = 'reset';
+    },
+
+    // Start/stop auto play
+    toggleAutoPlay: () => {
+      const context = getContext();
+      if (context.autoPlayInterval > 0) {
+        if (context.autoPlayTimer) {
+          clearInterval(context.autoPlayTimer);
+          context.autoPlayTimer = null;
+        } else {
+          context.autoPlayTimer = setInterval(() => {
+            context.clicks += 1;
+            context.isAnimating = true;
+            setTimeout(() => {
+              context.isAnimating = false;
+            }, 500);
+          }, context.autoPlayInterval);
+        }
+      }
+    }
+  },
+
+  // Callbacks - lifecycle hooks
+  callbacks: {
+    // Initialize on mount
+    onInit: () => {
+      const context = getContext();
+      const { element } = getElement();
+
+      // Set initial state from attributes
+      context.clicks = parseInt(element.dataset.clicks || '0');
+      context.isAnimating = element.dataset.isAnimating === 'true';
+      context.isVisible = element.dataset.isVisible !== 'false';
+
+      // Set up event listeners
+      element.addEventListener('{{slugKebabCase}}:external-trigger', (event: any) => {
+        context.clicks = event.detail.clicks || context.clicks + 1;
+      });
+    },
+
+    // Log interactions
+    onInteraction: () => {
+      const context = getContext();
+      console.log(`{{slugKebabCase}} interaction:`, {
+        clicks: context.clicks,
+        type: context.lastInteraction,
+        timestamp: new Date().toISOString()
+      });
+    },
+
+    // Cleanup on unmount
+    onDestroy: () => {
+      const context = getContext();
+      if (context.autoPlayTimer) {
+        clearInterval(context.autoPlayTimer);
+      }
+    }
+  }
+});
+
+// Type definitions for TypeScript
+declare global {
+  namespace WordPress {
+    namespace Interactivity {
+      interface {{pascalCase}}Context {
+        clicks: number;
+        isAnimating: boolean;
+        isVisible: boolean;
+        lastInteraction: string;
+        animation: string;
+        interactiveMode: string;
+        maxClicks: number;
+        autoPlayInterval: number;
+        autoPlayTimer?: number;
+      }
+    }
+  }
+}

package/templates/interactivity/src/save.tsx.mustache

@@ -0,0 +1,87 @@
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+import type { {{pascalCase}}Attributes } from './types';
+
+export default function Save({ attributes }: { attributes: {{pascalCase}}Attributes }) {
+  const blockProps = useBlockProps.save({
+    className: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${attributes.interactiveMode}`,
+    'data-wp-interactive': '{{slugKebabCase}}',
+    'data-wp-context': JSON.stringify({
+      clicks: attributes.clickCount,
+      isAnimating: attributes.isAnimating,
+      isVisible: attributes.isVisible,
+      lastInteraction: '',
+      animation: attributes.animation,
+      interactiveMode: attributes.interactiveMode,
+      maxClicks: attributes.maxClicks,
+      autoPlayInterval: attributes.autoPlayInterval
+    }),
+    'data-clicks': attributes.clickCount,
+    'data-is-animating': attributes.isAnimating,
+    'data-is-visible': attributes.isVisible,
+    'data-unique-id': attributes.uniqueId
+  });
+
+  return (
+    <div {...blockProps}>
+      <div
+        className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
+        style={{ textAlign: attributes.alignment }}
+        data-wp-on--click="actions.handleClick"
+        data-wp-on--mouseenter={attributes.interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
+        data-wp-on--mouseleave={attributes.interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
+        data-wp-bind--hidden="!state.isVisible"
+      >
+        <RichText.Content
+          tagName="p"
+          value={attributes.content}
+          className="{{cssClassName}}__text"
+        />
+
+        {attributes.showCounter && (
+          <div className="{{cssClassName}}__counter">
+            <span className="{{cssClassName}}__counter-label">
+              Clicks:
+            </span>
+            <span
+              className="{{cssClassName}}__counter-value"
+              data-wp-text="state.clicks"
+            >
+              {attributes.clickCount}
+            </span>
+          </div>
+        )}
+
+        {attributes.maxClicks > 0 && (
+          <div className="{{cssClassName}}__progress">
+            <div
+              className="{{cssClassName}}__progress-bar"
+              data-wp-style--width="state.progress + '%'"
+            />
+          </div>
+        )}
+
+        <div
+          className={`{{cssClassName}}__animation ${attributes.animation}`}
+          data-wp-class="is-active"
+        />
+
+        {attributes.maxClicks > 0 && (
+          <div
+            className="{{cssClassName}}__completion"
+            data-wp-bind--hidden="!state.isComplete"
+          >
+            🎉 Complete!
+          </div>
+        )}
+
+        <button
+          className="{{cssClassName}}__reset"
+          data-wp-on--click="actions.reset"
+          aria-label="Reset counter"
+        >
+          ↻
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/interactivity/src/types.ts.mustache

@@ -0,0 +1,29 @@
+import { tags } from "typia";
+
+export interface {{pascalCase}}Attributes {
+  content: string & tags.MinLength<1> & tags.MaxLength<1000> & tags.Default<"">;
+  alignment?: ('left' | 'center' | 'right') & tags.Default<"left">;
+  isVisible?: boolean & tags.Default<true>;
+  interactiveMode?: ('click' | 'hover' | 'auto') & tags.Default<"click">;
+  animation?: ('none' | 'bounce' | 'pulse' | 'shake' | 'flip') & tags.Default<"none">;
+  clickCount?: number & tags.Default<0>;
+  isAnimating?: boolean & tags.Default<false>;
+  showCounter?: boolean & tags.Default<true>;
+  maxClicks?: number & tags.Default<10>;
+  autoPlayInterval?: number & tags.Default<0>;
+  uniqueId?: string & tags.Default<"">;
+}
+
+export interface {{pascalCase}}Context {
+  clicks: number;
+  isAnimating: boolean;
+  isVisible: boolean;
+  lastInteraction: string;
+  animationClass: string;
+}
+
+export type {{pascalCase}}ValidationResult = {
+  isValid: boolean;
+  errors: string[];
+  data?: {{pascalCase}}Attributes;
+};

package/templates/interactivity/tsconfig.json.mustache

@@ -0,0 +1,9 @@
+{
+	"extends": "@wordpress/scripts/config/tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build/types"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["build/**/*"]
+}