create-wp-typia 0.1.0 → 1.0.1

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

@@ -1,25 +0,0 @@
-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/full/src/block.json.mustache

@@ -1,121 +0,0 @@
-{
-	"$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",
-	"viewScript": "file:./view.js"
-}

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

@@ -1,300 +0,0 @@
-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

@@ -1,251 +0,0 @@
-/**
- * {{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;
-    }
-  }
-}