@wp-typia/project-tools 0.11.1

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

@@ -0,0 +1,270 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
+import { PanelBody, RangeControl, TextControl, Button, Notice } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import currentManifest from './typia.manifest.json';
+import {
+  InspectorFromManifest,
+  type ManifestDocument,
+  useEditorFields,
+  useTypedAttributeUpdater,
+} from '@wp-typia/block-runtime/inspector';
+import type { {{pascalCase}}Attributes } from './types';
+import {
+  sanitize{{pascalCase}}Attributes,
+  validate{{pascalCase}}Attributes,
+} from './validators';
+import { useTypiaValidation } from './hooks';
+
+export default function Edit({ attributes, setAttributes, isSelected }: {
+  attributes: {{pascalCase}}Attributes;
+  setAttributes: (attrs: Partial<{{pascalCase}}Attributes>) => void;
+  isSelected: boolean;
+}) {
+  const [isPreviewing, setIsPreviewing] = useState(false);
+  const editorFields = useEditorFields(currentManifest as ManifestDocument, {
+    manual: ['content', 'clickCount', 'maxClicks', 'autoPlayInterval', 'uniqueId'],
+    labels: {
+      alignment: __('Alignment', '{{textDomain}}'),
+      animation: __('Animation', '{{textDomain}}'),
+      interactiveMode: __('Interactive Mode', '{{textDomain}}'),
+      isVisible: __('Visible', '{{textDomain}}'),
+      showCounter: __('Show Counter', '{{textDomain}}'),
+    },
+  });
+  const { errorMessages, isValid } = useTypiaValidation(
+    attributes,
+    validate{{pascalCase}}Attributes,
+  );
+  const validateEditorUpdate = (nextAttributes: {{pascalCase}}Attributes) => {
+    try {
+      return {
+        data: sanitize{{pascalCase}}Attributes(nextAttributes),
+        errors: [],
+        isValid: true as const,
+      };
+    } catch {
+      return validate{{pascalCase}}Attributes(nextAttributes);
+    }
+  };
+  const { updateField } = useTypedAttributeUpdater(
+    attributes,
+    setAttributes,
+    validateEditorUpdate
+  );
+  const alignmentValue = editorFields.getStringValue(
+    attributes,
+    'alignment',
+    'left'
+  );
+  const isVisible = editorFields.getBooleanValue(
+    attributes,
+    'isVisible',
+    true
+  );
+  const showCounter = editorFields.getBooleanValue(
+    attributes,
+    'showCounter',
+    true
+  );
+  const interactiveMode = editorFields.getStringValue(
+    attributes,
+    'interactiveMode',
+    'click'
+  );
+  const animation = editorFields.getStringValue(
+    attributes,
+    'animation',
+    'none'
+  );
+
+  const blockProps = useBlockProps({
+    className: `{{cssClassName}} {{cssClassName}}--${interactiveMode}`,
+    'data-wp-interactive': '{{slugKebabCase}}',
+    'data-wp-context': JSON.stringify({
+      clicks: attributes.clickCount,
+      isAnimating: attributes.isAnimating,
+      isVisible,
+      lastInteraction: '',
+      animation,
+      interactiveMode,
+      maxClicks: attributes.maxClicks,
+      autoPlayInterval: attributes.autoPlayInterval
+    })
+  });
+
+  const resetCounter = () => {
+    updateField('clickCount', 0);
+    updateField('isAnimating', false);
+  };
+
+  const testAnimation = () => {
+    updateField('isAnimating', true);
+    setTimeout(() => {
+      updateField('isAnimating', false);
+    }, 1000);
+  };
+
+  return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={alignmentValue}
+          onChange={(value) => updateField('alignment', (value || alignmentValue) as NonNullable<{{pascalCase}}Attributes['alignment']>)}
+        />
+      </BlockControls>
+
+      <InspectorControls>
+        <InspectorFromManifest
+          attributes={attributes}
+          fieldLookup={editorFields}
+          onChange={updateField}
+          paths={['alignment', 'interactiveMode', 'animation', 'showCounter', 'isVisible']}
+          title={__('Interactive Settings', '{{textDomain}}')}
+        />
+
+        <PanelBody title={__('Counter Settings', '{{textDomain}}')}>
+          <RangeControl
+            label={__('Max Clicks', '{{textDomain}}')}
+            value={attributes.maxClicks}
+            onChange={(value) => updateField('maxClicks', value ?? attributes.maxClicks ?? 0)}
+            min={0}
+            max={100}
+            help={__('Set to 0 for unlimited clicks', '{{textDomain}}')}
+          />
+
+          {interactiveMode === 'auto' && (
+            <RangeControl
+              label={__('Auto Play Interval (ms)', '{{textDomain}}')}
+              value={attributes.autoPlayInterval}
+              onChange={(value) => updateField('autoPlayInterval', value ?? attributes.autoPlayInterval ?? 0)}
+              min={100}
+              max={5000}
+              step={100}
+              help={__('Interval between automatic animations', '{{textDomain}}')}
+            />
+          )}
+
+          <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+            <Button
+              variant="secondary"
+              onClick={resetCounter}
+              isSmall
+            >
+              {__('Reset Counter', '{{textDomain}}')}
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={testAnimation}
+              isSmall
+            >
+              {__('Test Animation', '{{textDomain}}')}
+            </Button>
+          </div>
+
+          <TextControl
+            label={__('Unique ID', '{{textDomain}}')}
+            value={attributes.uniqueId}
+            onChange={(value) => updateField('uniqueId', value)}
+            help={__('Optional unique identifier for this block instance', '{{textDomain}}')}
+          />
+        </PanelBody>
+
+        {!isValid && (
+          <PanelBody title={__('Validation Errors', '{{textDomain}}')} initialOpen>
+            {errorMessages.map((error, index) => (
+              <Notice key={index} status="error" isDismissible={false}>
+                {error}
+              </Notice>
+            ))}
+          </PanelBody>
+        )}
+
+        {isSelected && (
+          <PanelBody title={__('Preview', '{{textDomain}}')}>
+            <Button
+              variant={isPreviewing ? 'primary' : 'secondary'}
+              onClick={() => setIsPreviewing(!isPreviewing)}
+              aria-pressed={isPreviewing}
+              isSmall
+            >
+              {isPreviewing
+                ? __('Disable Preview Mode', '{{textDomain}}')
+                : __('Enable Preview Mode', '{{textDomain}}')}
+            </Button>
+
+            {attributes.clickCount > 0 && (
+              <Notice status="info" isDismissible={false}>
+                {__('Current clicks:', '{{textDomain}}')} {attributes.clickCount}
+                {attributes.maxClicks > 0 && ` / ${attributes.maxClicks}`}
+              </Notice>
+            )}
+          </PanelBody>
+        )}
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <div
+          className={`{{cssClassName}}__content ${attributes.isAnimating ? 'is-animating' : ''}`}
+          style={{ textAlign: alignmentValue }}
+          data-wp-on--click={isPreviewing ? 'actions.handleClick' : undefined}
+          data-wp-on--mouseenter={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseEnter' : undefined}
+          data-wp-on--mouseleave={isPreviewing && interactiveMode === 'hover' ? 'actions.handleMouseLeave' : undefined}
+        >
+          <RichText
+            tagName="p"
+            value={attributes.content}
+            onChange={(value) => updateField('content', value)}
+            placeholder={__('{{title}} – click me to interact!', '{{textDomain}}')}
+          />
+
+          {!isValid && (
+            <Notice status="error" isDismissible={false}>
+              <p>
+                <strong>{__('Validation Errors', '{{textDomain}}')}</strong>
+              </p>
+              <ul style={{ margin: 0, paddingLeft: '1em' }}>
+                {errorMessages.map((error, index) => (
+                  <li key={index}>{error}</li>
+                ))}
+              </ul>
+            </Notice>
+          )}
+
+          {showCounter && (
+            <div className="{{cssClassName}}__counter">
+              <span className="{{cssClassName}}__counter-label">
+                {__('Clicks:', '{{textDomain}}')}
+              </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>
+          )}
+
+          {animation !== 'none' && (
+            <div
+              className={`{{cssClassName}}__animation ${attributes.isAnimating ? 'is-active' : ''}`}
+              data-wp-class="is-active"
+            >
+              {animation}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
+import type { BlockSupports } from '@wp-typia/block-types/blocks/supports';
+import {
+  buildScaffoldBlockRegistration,
+  type ScaffoldBlockMetadata,
+} from '@wp-typia/block-runtime/blocks';
+
+import Edit from './edit';
+import Save from './save';
+import metadata from './block.json';
+import './style.scss';
+
+import type { {{pascalCase}}Attributes } from './types';
+
+const scaffoldSupports = {
+  html: false,
+  align: true,
+  anchor: true,
+  className: true,
+  interactivity: true,
+} satisfies BlockSupports;
+
+const registration = buildScaffoldBlockRegistration<
+  BlockConfiguration<{{pascalCase}}Attributes>
+>(metadata as ScaffoldBlockMetadata, {
+  supports: scaffoldSupports,
+  edit: Edit,
+  save: Save,
+});
+
+registerBlockType<{{pascalCase}}Attributes>(registration.name, registration.settings);

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

@@ -0,0 +1,152 @@
+/**
+ * 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 clampedClicks() {
+      const context = getContext();
+      return context.maxClicks > 0
+        ? Math.min(context.clicks, context.maxClicks)
+        : context.clicks;
+    },
+    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);
+        }
+      }
+    }
+  }
+});
+
+// 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,101 @@
+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: `{{cssClassName}} {{cssClassName}}--${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
+    })
+  });
+
+  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"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <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"
+              role="progressbar"
+              aria-label="Click progress"
+              aria-valuemin={0}
+              aria-valuemax={attributes.maxClicks}
+              aria-valuenow={Math.min(attributes.clickCount, attributes.maxClicks)}
+              data-wp-bind--aria-valuenow="state.clampedClicks"
+              data-wp-style--width="state.progress + '%'"
+            />
+          </div>
+        )}
+
+        <div
+          className={`{{cssClassName}}__animation ${attributes.animation}`}
+          aria-hidden="true"
+          data-wp-class="is-active"
+        />
+
+        {attributes.maxClicks > 0 && (
+          <div
+            className="{{cssClassName}}__completion"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            data-wp-bind--hidden="!state.isComplete"
+          >
+            🎉 Complete!
+          </div>
+        )}
+
+        <button
+          className="{{cssClassName}}__reset"
+          data-wp-on--click="actions.reset"
+          aria-label="Reset counter"
+        >
+          <span aria-hidden="true">↻</span>
+          <span className="screen-reader-text">
+            Reset counter
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/interactivity/src/style.scss.mustache

@@ -0,0 +1,60 @@
+.{{cssClassName}} {
+  position: relative;
+  padding: 1rem;
+  border: 1px solid #dcdcde;
+  border-radius: 0.75rem;
+  background: #fff;
+
+  &__content {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  &__counter {
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+
+  &__progress {
+    width: 100%;
+    height: 0.5rem;
+    overflow: hidden;
+    background: #f0f0f1;
+    border-radius: 999px;
+  }
+
+  &__progress-bar {
+    height: 100%;
+    background: #3858e9;
+    transition: width 0.2s ease;
+  }
+
+  &__animation {
+    min-height: 1.5rem;
+    font-size: 0.85rem;
+    color: #3858e9;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &.is-active {
+      opacity: 1;
+    }
+  }
+
+  &__completion {
+    font-weight: 700;
+    color: #06752d;
+  }
+
+  &__reset {
+    align-self: start;
+    padding: 0.4rem 0.7rem;
+    border: 1px solid #dcdcde;
+    border-radius: 999px;
+    background: transparent;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,32 @@
+import type { TextAlignment } from "@wp-typia/block-types/block-editor/alignment";
+import type {
+  TypiaValidationError,
+  ValidationResult,
+} from "@wp-typia/block-runtime/validation";
+import { tags } from "typia";
+
+export type { TypiaValidationError, ValidationResult } from "@wp-typia/block-runtime/validation";
+
+export interface {{pascalCase}}Attributes {
+  content: string & tags.MinLength<1> & tags.MaxLength<1000> & tags.Default<"">;
+  alignment?: TextAlignment & 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.Minimum<0> & tags.Type<"uint32"> & tags.Default<0>;
+  isAnimating?: boolean & tags.Default<false>;
+  showCounter?: boolean & tags.Default<true>;
+  maxClicks?: number & tags.Minimum<0> & tags.Type<"uint32"> & tags.Default<10>;
+  autoPlayInterval?: number & tags.Minimum<0> & tags.Type<"uint32"> & 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 = ValidationResult<{{pascalCase}}Attributes>;

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

@@ -0,0 +1,36 @@
+import currentManifest from "./typia.manifest.json";
+import { {{pascalCase}}Attributes, {{pascalCase}}ValidationResult } from "./types";
+import { generateScopedClientId } from "@wp-typia/block-runtime/identifiers";
+import { createTemplateValidatorToolkit } from "./validator-toolkit";
+
+const scaffoldValidators = createTemplateValidatorToolkit<{{pascalCase}}Attributes>({
+  manifest: currentManifest,
+  finalize: (normalized) => ({
+    ...normalized,
+    uniqueId:
+      normalized.uniqueId && normalized.uniqueId.length > 0
+        ? normalized.uniqueId
+        : generateScopedClientId("{{slugKebabCase}}"),
+  }),
+});
+
+export const validate{{pascalCase}}Attributes =
+  scaffoldValidators.validateAttributes as (
+    attributes: unknown,
+  ) => {{pascalCase}}ValidationResult;
+
+export const validators = scaffoldValidators.validators;
+
+export const sanitize{{pascalCase}}Attributes =
+  scaffoldValidators.sanitizeAttributes as (
+    attributes: Partial<{{pascalCase}}Attributes>,
+  ) => {{pascalCase}}Attributes;
+
+/**
+ * Runtime type guard for checking if an object is {{pascalCase}}Attributes.
+ */
+export const is{{pascalCase}}Attributes = (obj: unknown): obj is {{pascalCase}}Attributes => {
+  return validators.is(obj);
+};
+
+export const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;