@wp-typia/create 0.1.0

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

@@ -0,0 +1,32 @@
+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, typia.manifest.json, and typia-validator.php 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}`);
+		}
+	}
+
+	if (result.phpGenerationWarnings.length > 0) {
+		console.warn("⚠️ Some Typia constraints are not yet enforced by typia-validator.php:");
+		for (const warning of result.phpGenerationWarnings) {
+			console.warn(`   - ${warning}`);
+		}
+	}
+}
+
+main().catch((error) => {
+	console.error("❌ Type sync failed:", error);
+	process.exit(1);
+});

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

@@ -0,0 +1,120 @@
+{
+	"$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,
+		"alignWide": true,
+		"anchor": true,
+		"className": true,
+		"customClassName": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": true,
+			"background": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"textAlign": true,
+			"textDecoration": true,
+			"textTransform": true,
+			"writingMode": true
+		},
+		"dimensions": {
+			"minHeight": true
+		},
+		"position": {
+			"sticky": true,
+			"fixed": true
+		},
+		"interactivity": true
+	},
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": ".{{cssClassName}}__content",
+			"default": ""
+		},
+		"alignment": {
+			"type": "string",
+			"enum": ["left", "center", "right", "justify"],
+			"default": "left"
+		},
+		"isVisible": {
+			"type": "boolean",
+			"default": true
+		},
+		"fontSize": {
+			"type": "string",
+			"enum": ["small", "medium", "large", "xlarge"],
+			"default": "medium"
+		},
+		"textColor": {
+			"type": "string",
+			"default": ""
+		},
+		"backgroundColor": {
+			"type": "string",
+			"default": ""
+		},
+		"padding": {
+			"type": "object",
+			"default": {
+				"top": 0,
+				"right": 0,
+				"bottom": 0,
+				"left": 0
+			}
+		},
+		"borderRadius": {
+			"type": "number",
+			"default": 0
+		},
+		"shadow": {
+			"type": "object",
+			"default": {
+				"enabled": false,
+				"x": 0,
+				"y": 4,
+				"blur": 8,
+				"spread": 0,
+				"color": "rgba(0, 0, 0, 0.1)"
+			}
+		},
+		"animation": {
+			"type": "string",
+			"enum": ["none", "fadeIn", "slideUp", "slideDown", "zoomIn"],
+			"default": "none"
+		},
+		"customCSS": {
+			"type": "string",
+			"default": ""
+		},
+		"uniqueId": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"textdomain": "{{slugSnakeCase}}",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}

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

@@ -0,0 +1,300 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls, RichText, BlockControls, AlignmentToolbar } from '@wordpress/block-editor';
+import { PanelBody, TextControl, SelectControl, ToggleControl, RangeControl, ColorPicker, ColorPalette, TabPanel, Disabled, Notice } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import { use{{pascalCase}}Attributes, useColorScheme } from './hooks';
+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 { attributes: validatedAttrs, updateAttribute, validationErrors, isValid } = use{{pascalCase}}Attributes(attributes);
+  const { getColorVariable } = useColorScheme();
+  const [activeTab, setActiveTab] = useState('content');
+
+  const blockProps = useBlockProps({
+    className: `wp-block-{{slugKebabCase}} wp-block-{{slugKebabCase}}--${validatedAttrs.fontSize} wp-block-{{slugKebabCase}}--align-${validatedAttrs.alignment}`,
+    style: {
+      color: getColorVariable(validatedAttrs.textColor),
+      backgroundColor: getColorVariable(validatedAttrs.backgroundColor),
+      padding: `${validatedAttrs.padding.top}px ${validatedAttrs.padding.right}px ${validatedAttrs.padding.bottom}px ${validatedAttrs.padding.left}px`,
+      borderRadius: `${validatedAttrs.borderRadius}px`,
+      boxShadow: validatedAttrs.shadow.enabled
+        ? `${validatedAttrs.shadow.x}px ${validatedAttrs.shadow.y}px ${validatedAttrs.shadow.blur}px ${validatedAttrs.shadow.spread}px ${validatedAttrs.shadow.color}`
+        : 'none',
+      display: validatedAttrs.isVisible ? 'block' : 'none',
+      opacity: validatedAttrs.isVisible ? 1 : 0.5,
+    }
+  });
+
+  useEffect(() => {
+    if (isValid && validatedAttrs !== attributes) {
+      setAttributes(validatedAttrs);
+    }
+  }, [validatedAttrs, isValid, attributes, setAttributes]);
+
+  const contentTabs = [
+    {
+      name: 'content',
+      title: __('Content', '{{slugSnakeCase}}'),
+      className: 'tab-content'
+    },
+    {
+      name: 'style',
+      title: __('Style', '{{slugSnakeCase}}'),
+      className: 'tab-style'
+    },
+    {
+      name: 'advanced',
+      title: __('Advanced', '{{slugSnakeCase}}'),
+      className: 'tab-advanced'
+    }
+  ];
+
+  return (
+    <>
+      <BlockControls>
+        <AlignmentToolbar
+          value={validatedAttrs.alignment}
+          onChange={(value) => updateAttribute('alignment', value || 'left')}
+        />
+      </BlockControls>
+
+      <InspectorControls>
+        <TabPanel
+          tabs={contentTabs}
+          onSelect={setActiveTab}
+          className="wp-block-{{slugKebabCase}}__tabs"
+        >
+          {(tab) => {
+            if (tab.name === 'content') {
+              return (
+                <>
+                  <PanelBody title={__('Text Settings', '{{slugSnakeCase}}')}>
+                    <TextControl
+                      label={__('Unique ID', '{{slugSnakeCase}}')}
+                      value={validatedAttrs.uniqueId}
+                      onChange={(value) => updateAttribute('uniqueId', value)}
+                      help={__('Optional unique identifier for this block', '{{slugSnakeCase}}')}
+                    />
+
+                    <ToggleControl
+                      label={__('Visible', '{{slugSnakeCase}}')}
+                      checked={validatedAttrs.isVisible}
+                      onChange={(value) => updateAttribute('isVisible', value)}
+                    />
+                  </PanelBody>
+
+                  <PanelBody title={__('Typography', '{{slugSnakeCase}}')}>
+                    <SelectControl
+                      label={__('Font Size', '{{slugSnakeCase}}')}
+                      value={validatedAttrs.fontSize}
+                      options={[
+                        { label: __('Small', '{{slugSnakeCase}}'), value: 'small' },
+                        { label: __('Medium', '{{slugSnakeCase}}'), value: 'medium' },
+                        { label: __('Large', '{{slugSnakeCase}}'), value: 'large' },
+                        { label: __('Extra Large', '{{slugSnakeCase}}'), value: 'xlarge' },
+                      ]}
+                      onChange={(value) => updateAttribute('fontSize', value)}
+                    />
+                  </PanelBody>
+                </>
+              );
+            }
+
+            if (tab.name === 'style') {
+              return (
+                <>
+                  <PanelBody title={__('Colors', '{{slugSnakeCase}}')}>
+                    <div className="components-base-control">
+                      <label className="components-base-control__label">
+                        {__('Text Color', '{{slugSnakeCase}}')}
+                      </label>
+                      <ColorPalette
+                        value={validatedAttrs.textColor}
+                        onChange={(value) => updateAttribute('textColor', value)}
+                        disableCustomColors={false}
+                        clearable={true}
+                      />
+                    </div>
+
+                    <div className="components-base-control" style={{ marginTop: '1em' }}>
+                      <label className="components-base-control__label">
+                        {__('Background Color', '{{slugSnakeCase}}')}
+                      </label>
+                      <ColorPalette
+                        value={validatedAttrs.backgroundColor}
+                        onChange={(value) => updateAttribute('backgroundColor', value)}
+                        disableCustomColors={false}
+                        clearable={true}
+                      />
+                    </div>
+                  </PanelBody>
+
+                  <PanelBody title={__('Spacing', '{{slugSnakeCase}}')}>
+                    <RangeControl
+                      label={__('Border Radius', '{{slugSnakeCase}}')}
+                      value={validatedAttrs.borderRadius}
+                      onChange={(value) => updateAttribute('borderRadius', value)}
+                      min={0}
+                      max={50}
+                    />
+
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1em', marginTop: '1em' }}>
+                      <RangeControl
+                        label={__('Padding Top', '{{slugSnakeCase}}')}
+                        value={validatedAttrs.padding.top}
+                        onChange={(value) => updateAttribute('padding', { ...validatedAttrs.padding, top: value })}
+                        min={0}
+                        max={100}
+                      />
+                      <RangeControl
+                        label={__('Padding Right', '{{slugSnakeCase}}')}
+                        value={validatedAttrs.padding.right}
+                        onChange={(value) => updateAttribute('padding', { ...validatedAttrs.padding, right: value })}
+                        min={0}
+                        max={100}
+                      />
+                      <RangeControl
+                        label={__('Padding Bottom', '{{slugSnakeCase}}')}
+                        value={validatedAttrs.padding.bottom}
+                        onChange={(value) => updateAttribute('padding', { ...validatedAttrs.padding, bottom: value })}
+                        min={0}
+                        max={100}
+                      />
+                      <RangeControl
+                        label={__('Padding Left', '{{slugSnakeCase}}')}
+                        value={validatedAttrs.padding.left}
+                        onChange={(value) => updateAttribute('padding', { ...validatedAttrs.padding, left: value })}
+                        min={0}
+                        max={100}
+                      />
+                    </div>
+                  </PanelBody>
+
+                  <PanelBody title={__('Shadow', '{{slugSnakeCase}}')}>
+                    <ToggleControl
+                      label={__('Enable Shadow', '{{slugSnakeCase}}')}
+                      checked={validatedAttrs.shadow.enabled}
+                      onChange={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, enabled: value })}
+                    />
+
+                    {validatedAttrs.shadow.enabled && (
+                      <>
+                        <RangeControl
+                          label={__('Horizontal Offset', '{{slugSnakeCase}}')}
+                          value={validatedAttrs.shadow.x}
+                          onChange={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, x: value })}
+                          min={-50}
+                          max={50}
+                        />
+                        <RangeControl
+                          label={__('Vertical Offset', '{{slugSnakeCase}}')}
+                          value={validatedAttrs.shadow.y}
+                          onChange={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, y: value })}
+                          min={-50}
+                          max={50}
+                        />
+                        <RangeControl
+                          label={__('Blur', '{{slugSnakeCase}}')}
+                          value={validatedAttrs.shadow.blur}
+                          onChange={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, blur: value })}
+                          min={0}
+                          max={100}
+                        />
+                        <RangeControl
+                          label={__('Spread', '{{slugSnakeCase}}')}
+                          value={validatedAttrs.shadow.spread}
+                          onChange={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, spread: value })}
+                          min={-50}
+                          max={50}
+                        />
+                        <div className="components-base-control">
+                          <label className="components-base-control__label">
+                            {__('Shadow Color', '{{slugSnakeCase}}')}
+                          </label>
+                          <ColorPicker
+                            color={validatedAttrs.shadow.color}
+                            onChangeComplete={(value) => updateAttribute('shadow', { ...validatedAttrs.shadow, color: value.hex })}
+                            disableAlpha={false}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </PanelBody>
+
+                  <PanelBody title={__('Animation', '{{slugSnakeCase}}')}>
+                    <SelectControl
+                      label={__('Animation Type', '{{slugSnakeCase}}')}
+                      value={validatedAttrs.animation}
+                      options={[
+                        { label: __('None', '{{slugSnakeCase}}'), value: 'none' },
+                        { label: __('Fade In', '{{slugSnakeCase}}'), value: 'fadeIn' },
+                        { label: __('Slide Up', '{{slugSnakeCase}}'), value: 'slideUp' },
+                        { label: __('Slide Down', '{{slugSnakeCase}}'), value: 'slideDown' },
+                        { label: __('Zoom In', '{{slugSnakeCase}}'), value: 'zoomIn' },
+                      ]}
+                      onChange={(value) => updateAttribute('animation', value)}
+                    />
+                  </PanelBody>
+                </>
+              );
+            }
+
+            if (tab.name === 'advanced') {
+              return (
+                <>
+                  <PanelBody title={__('Advanced', '{{slugSnakeCase}}')}>
+                    {!isValid && validationErrors.length > 0 && (
+                      <Notice status="error" isDismissible={false}>
+                        <strong>{__('Validation Errors:', '{{slugSnakeCase}}')}</strong>
+                        <ul>
+                          {validationErrors.map((error, index) => (
+                            <li key={index}>{error}</li>
+                          ))}
+                        </ul>
+                      </Notice>
+                    )}
+
+                    <TextControl
+                      label={__('Custom CSS', '{{slugSnakeCase}}')}
+                      value={validatedAttrs.customCSS}
+                      onChange={(value) => updateAttribute('customCSS', value)}
+                      multiline={5}
+                      help={__('Add custom CSS classes or inline styles', '{{slugSnakeCase}}')}
+                    />
+                  </PanelBody>
+                </>
+              );
+            }
+
+            return null;
+          }}
+        </TabPanel>
+      </InspectorControls>
+
+      <div {...blockProps}>
+        {isSelected && validatedAttrs.animation !== 'none' && (
+          <div className="wp-block-{{slugKebabCase}}__animation-preview">
+            {__('Animation Preview:', '{{slugSnakeCase}}')} {validatedAttrs.animation}
+          </div>
+        )}
+
+        <div
+          className={`{{cssClassName}}__content {{cssClassName}}__content--${validatedAttrs.fontSize}`}
+          style={{ textAlign: validatedAttrs.alignment }}
+        >
+          <RichText
+            tagName="p"
+            value={validatedAttrs.content}
+            onChange={(value) => updateAttribute('content', value)}
+            placeholder={__('{{title}} – hello from the editor!', '{{slugSnakeCase}}')}
+            allowedFormats={['core/bold', 'core/italic', 'core/link', 'core/strikethrough']}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/full/src/editor.scss.mustache

@@ -0,0 +1,251 @@
+/**
+ * {{title}} Block Editor Styles
+ */
+
+.wp-block-{{slugKebabCase}} {
+  // Editor-specific styles
+  border: 1px dashed #e0e0e0;
+  padding: 1em;
+  min-height: 60px;
+  position: relative;
+
+  // Visual indicator when block is selected
+  &.is-selected {
+    border-color: var(--wp-admin-theme-color, #0073aa);
+    background-color: rgba(var(--wp-admin-theme-color--rgb, 0, 115, 170), 0.04);
+  }
+
+  // Animation preview indicator
+  &__animation-preview {
+    position: absolute;
+    top: -30px;
+    left: 0;
+    font-size: 11px;
+    color: #757575;
+    background: #fff;
+    padding: 2px 6px;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  // Content editor styles
+  .{{cssClassName}}__content {
+    min-height: 1em;
+
+    // Rich text editor styles
+    .block-editor-rich-text__editable {
+      outline: none;
+
+      &:focus {
+        box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #0073aa);
+        border-radius: 2px;
+        padding: 0 2px;
+      }
+
+      // Placeholder styles
+      &[data-is-placeholder-visible="true"] {
+        color: #757575;
+        font-style: italic;
+      }
+    }
+
+    // Link styles in editor
+    a {
+      color: var(--wp-admin-theme-color, #0073aa);
+      text-decoration: underline;
+
+      &:hover {
+        color: var(--wp-admin-theme-color--hover, #005a87);
+      }
+    }
+  }
+
+  // Tab panel styles in inspector
+  &__tabs {
+    .components-tab-panel__tabs {
+      border-bottom: 1px solid #e0e0e0;
+      margin-bottom: 1em;
+    }
+
+    .components-tab-panel__tab {
+      padding: 0.5em 1em;
+      margin-bottom: -1px;
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      &.is-active-tab {
+        border-bottom-color: var(--wp-admin-theme-color, #0073aa);
+        color: var(--wp-admin-theme-color, #0073aa);
+      }
+    }
+  }
+
+  // Inspector controls enhancements
+  .components-panel__body {
+    .components-base-control {
+      margin-bottom: 1em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    // Color picker enhancements
+    .components-color-picker {
+      margin-top: 0.5em;
+    }
+
+    // Range control enhancements
+    .components-range-control {
+      .components-range-control__slider {
+        margin: 0 10px;
+      }
+
+      .components-range-control__number {
+        width: 60px;
+      }
+    }
+
+    // Toggle control enhancements
+    .components-toggle-control {
+      .components-toggle-control__label {
+        font-weight: 500;
+      }
+    }
+  }
+
+  // Validation error styles
+  .components-notice {
+    &.is-error {
+      border-left-color: #cc1818;
+      background-color: #fcf0f1;
+
+      ul {
+        margin: 0.5em 0;
+        padding-left: 1.5em;
+
+        li {
+          margin-bottom: 0.25em;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  // Shadow preview
+  &__shadow-preview {
+    width: 100%;
+    height: 60px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 30px;
+      height: 30px;
+      background: var(--wp-admin-theme-color, #0073aa);
+      border-radius: 4px;
+    }
+  }
+
+  // Padding preview
+  &__padding-preview {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 5px;
+    width: 120px;
+    height: 120px;
+    margin: 1em auto;
+    border: 1px solid #e0e0e0;
+
+    > div {
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: #757575;
+
+      &.center {
+        background: var(--wp-admin-theme-color, #0073aa);
+        color: white;
+      }
+    }
+  }
+
+  // Block appender styles
+  &.block-list-appender {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed #e0e0e0;
+    background: #f9f9f9;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--wp-admin-theme-color, #0073aa);
+      background: rgba(var(--wp-admin-theme-color--rgb, 0, 115, 170), 0.04);
+    }
+
+    .block-list-appender__toggle {
+      margin: 0;
+    }
+  }
+
+  // Multi-selection styles
+  &.is-multi-selected {
+    background-color: rgba(var(--wp-admin-theme-color--rgb, 0, 115, 170), 0.08);
+    border-color: var(--wp-admin-theme-color, #0073aa);
+  }
+
+  // Highlight when dragging
+  &.is-dragging {
+    opacity: 0.5;
+  }
+
+  // Drop zone indicator
+  &.is-drop-target {
+    background-color: rgba(var(--wp-admin-theme-color--rgb, 0, 115, 170), 0.12);
+    border-color: var(--wp-admin-theme-color, #0073aa);
+    border-style: solid;
+  }
+
+  // Responsive preview in editor
+  @media (max-width: 768px) {
+    padding: 0.5em;
+    min-height: 40px;
+
+    .{{cssClassName}}__content {
+      font-size: 0.9em;
+    }
+  }
+}
+
+// Block toolbar styles
+.block-editor-block-toolbar {
+  .wp-block-{{slugKebab-case}}__toolbar {
+    .components-button {
+      font-size: 12px;
+      padding: 0 6px;
+      height: 32px;
+    }
+  }
+}