@wp-typia/project-tools 0.11.1

package/templates/compound/src/blocks/{{slugKebabCase}}/children.ts.mustache

@@ -0,0 +1,25 @@
+import type { Template } from '@wordpress/blocks';
+
+export const DEFAULT_CHILD_BLOCK_NAME = '{{namespace}}/{{slugKebabCase}}-item';
+
+export const ALLOWED_CHILD_BLOCKS = [
+	DEFAULT_CHILD_BLOCK_NAME,
+	// add-child: insert new allowed child block names here
+];
+
+export const DEFAULT_CHILD_TEMPLATE: Template[] = [
+	[
+		DEFAULT_CHILD_BLOCK_NAME,
+		{
+			body: 'Add supporting details for the first internal item.',
+			title: 'First Item',
+		},
+	],
+	[
+		DEFAULT_CHILD_BLOCK_NAME,
+		{
+			body: 'Add supporting details for the second internal item.',
+			title: 'Second Item',
+		},
+	],
+];

package/templates/compound/src/blocks/{{slugKebabCase}}/edit.tsx.mustache

@@ -0,0 +1,93 @@
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	InnerBlocks,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { Notice, PanelBody, ToggleControl } from '@wordpress/components';
+
+import {
+	ALLOWED_CHILD_BLOCKS,
+	DEFAULT_CHILD_TEMPLATE,
+} from './children';
+import { useTypiaValidation } from './hooks';
+import type { {{pascalCase}}Attributes } from './types';
+import {
+	createAttributeUpdater,
+	validate{{pascalCase}}Attributes,
+} from './validators';
+
+export default function Edit( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {{pascalCase}}Attributes;
+	setAttributes: ( attrs: Partial< {{pascalCase}}Attributes > ) => void;
+} ) {
+	const { errorMessages, isValid } = useTypiaValidation(
+		attributes,
+		validate{{pascalCase}}Attributes
+	);
+	const updateAttribute = createAttributeUpdater( attributes, setAttributes );
+	const blockProps = useBlockProps( {
+		className: '{{cssClassName}}',
+	} );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Compound Settings', '{{textDomain}}' ) }>
+					<ToggleControl
+						label={ __( 'Show dividers between items', '{{textDomain}}' ) }
+						checked={ attributes.showDividers ?? true }
+						onChange={ ( value ) => updateAttribute( 'showDividers', value ) }
+					/>
+				</PanelBody>
+				{ ! isValid && (
+					<PanelBody title={ __( 'Validation Errors', '{{textDomain}}' ) } initialOpen>
+						{ errorMessages.map( ( error, index ) => (
+							<Notice key={ index } status="error" isDismissible={ false }>
+								{ error }
+							</Notice>
+						) ) }
+					</PanelBody>
+				) }
+			</InspectorControls>
+			<div { ...blockProps }>
+				<RichText
+					tagName="h3"
+					className="{{cssClassName}}__heading"
+					value={ attributes.heading }
+					onChange={ ( heading ) => updateAttribute( 'heading', heading ) }
+					placeholder={ __( {{titleJson}}, '{{textDomain}}' ) }
+				/>
+				<RichText
+					tagName="p"
+					className="{{cssClassName}}__intro"
+					value={ attributes.intro ?? '' }
+					onChange={ ( intro ) => updateAttribute( 'intro', intro ) }
+					placeholder={ __(
+						'Add and reorder internal items inside this compound block.',
+						'{{textDomain}}'
+					) }
+				/>
+				{ ! isValid && (
+					<Notice status="error" isDismissible={ false }>
+						<ul>
+							{ errorMessages.map( ( error, index ) => <li key={ index }>{ error }</li> ) }
+						</ul>
+					</Notice>
+				) }
+				<div className="{{cssClassName}}__items">
+					<InnerBlocks
+						allowedBlocks={ ALLOWED_CHILD_BLOCKS }
+						renderAppender={ InnerBlocks.ButtonBlockAppender }
+						template={ DEFAULT_CHILD_TEMPLATE }
+						templateLock={ false }
+					/>
+				</div>
+			</div>
+		</>
+	);
+}

package/templates/compound/src/blocks/{{slugKebabCase}}/hooks.ts.mustache

@@ -0,0 +1,11 @@
+export {
+	formatValidationError,
+	formatValidationErrors,
+	useTypiaValidation,
+} from '../../hooks';
+
+export type {
+	TypiaValidationError,
+	ValidationResult,
+	ValidationState,
+} from '../../hooks';

package/templates/compound/src/blocks/{{slugKebabCase}}/index.tsx.mustache

@@ -0,0 +1,25 @@
+import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
+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 registration = buildScaffoldBlockRegistration<
+	BlockConfiguration< {{pascalCase}}Attributes >
+>( metadata as ScaffoldBlockMetadata, {
+	edit: Edit,
+	save: Save,
+} );
+
+registerBlockType< {{pascalCase}}Attributes >(
+	registration.name,
+	registration.settings
+);

package/templates/compound/src/blocks/{{slugKebabCase}}/save.tsx.mustache

@@ -0,0 +1,32 @@
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+
+import type { {{pascalCase}}Attributes } from './types';
+
+export default function Save( {
+	attributes,
+}: {
+	attributes: {{pascalCase}}Attributes;
+} ) {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: '{{cssClassName}}',
+				'data-show-dividers': ( attributes.showDividers ?? true ) ? 'true' : 'false',
+			} ) }
+		>
+			<RichText.Content
+				tagName="h3"
+				className="{{cssClassName}}__heading"
+				value={ attributes.heading }
+			/>
+			<RichText.Content
+				tagName="p"
+				className="{{cssClassName}}__intro"
+				value={ attributes.intro ?? '' }
+			/>
+			<div className="{{cssClassName}}__items">
+				<InnerBlocks.Content />
+			</div>
+		</div>
+	);
+}

package/templates/compound/src/blocks/{{slugKebabCase}}/style.scss.mustache

@@ -0,0 +1,31 @@
+.{{cssClassName}} {
+	border: 1px solid #dcdcde;
+	border-radius: 12px;
+	padding: 1.25rem;
+	background: #fff;
+}
+
+.{{cssClassName}}__heading {
+	margin: 0 0 0.5rem;
+	font-size: 1.2rem;
+}
+
+.{{cssClassName}}__intro {
+	margin: 0 0 1rem;
+	color: #50575e;
+}
+
+.{{cssClassName}}__items {
+	display: grid;
+	gap: 0.75rem;
+}
+
+.{{cssClassName}}[data-show-dividers='true'] .{{compoundChildCssClassName}} {
+	border-top: 1px solid #dcdcde;
+	padding-top: 0.75rem;
+}
+
+.{{cssClassName}}[data-show-dividers='true'] .{{compoundChildCssClassName}}:first-child {
+	border-top: 0;
+	padding-top: 0;
+}

package/templates/compound/src/blocks/{{slugKebabCase}}/types.ts.mustache

@@ -0,0 +1,13 @@
+import { tags } from 'typia';
+
+export interface {{pascalCase}}Attributes {
+	heading: string &
+		tags.MinLength< 1 > &
+		tags.MaxLength< 80 > &
+		tags.Default< {{titleJson}} >;
+	intro?: string &
+		tags.MinLength< 1 > &
+		tags.MaxLength< 180 > &
+		tags.Default< 'Add and reorder internal items inside this compound block.' >;
+	showDividers?: boolean & tags.Default< true >;
+}

package/templates/compound/src/blocks/{{slugKebabCase}}/validators.ts.mustache

@@ -0,0 +1,17 @@
+import currentManifest from './typia.manifest.json';
+import type { {{pascalCase}}Attributes } from './types';
+import { createTemplateValidatorToolkit } from '../../validator-toolkit';
+
+const scaffoldValidators = createTemplateValidatorToolkit< {{pascalCase}}Attributes >( {
+	manifest: currentManifest,
+} );
+
+export const validate{{pascalCase}}Attributes =
+	scaffoldValidators.validateAttributes;
+
+export const validators = scaffoldValidators.validators;
+
+export const sanitize{{pascalCase}}Attributes =
+	scaffoldValidators.sanitizeAttributes;
+
+export const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;

package/templates/compound/src/blocks/{{slugKebabCase}}-item/block.json.mustache

@@ -0,0 +1,35 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "{{namespace}}/{{slugKebabCase}}-item",
+	"version": "{{blockMetadataVersion}}",
+	"title": {{compoundChildTitleJson}},
+	"category": "{{compoundChildCategory}}",
+	"icon": "{{compoundChildIcon}}",
+	"description": "Internal item block used by {{title}}.",
+	"parent": [
+		"{{namespace}}/{{slugKebabCase}}"
+	],
+	"example": {},
+	"supports": {
+		"html": false,
+		"inserter": false,
+		"reusable": false
+	},
+	"attributes": {
+		"title": {
+			"type": "string",
+			"source": "html",
+			"selector": ".{{compoundChildCssClassName}}__title",
+			"default": {{compoundChildTitleJson}}
+		},
+		"body": {
+			"type": "string",
+			"source": "html",
+			"selector": ".{{compoundChildCssClassName}}__body",
+			"default": "Add supporting details for this internal item."
+		}
+	},
+	"textdomain": "{{textDomain}}",
+	"editorScript": "file:./index.js"
+}

package/templates/compound/src/blocks/{{slugKebabCase}}-item/edit.tsx.mustache

@@ -0,0 +1,50 @@
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { useTypiaValidation } from './hooks';
+import type { {{pascalCase}}ItemAttributes } from './types';
+import {
+	createAttributeUpdater,
+	validate{{pascalCase}}ItemAttributes,
+} from './validators';
+
+export default function Edit( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {{pascalCase}}ItemAttributes;
+	setAttributes: ( attrs: Partial< {{pascalCase}}ItemAttributes > ) => void;
+} ) {
+	const updateAttribute = createAttributeUpdater( attributes, setAttributes );
+	const { errorMessages, isValid } = useTypiaValidation(
+		attributes,
+		validate{{pascalCase}}ItemAttributes
+	);
+
+	return (
+		<div { ...useBlockProps( { className: '{{compoundChildCssClassName}}' } ) }>
+			<RichText
+				tagName="h4"
+				className="{{compoundChildCssClassName}}__title"
+				value={ attributes.title ?? '' }
+				onChange={ ( title ) => updateAttribute( 'title', title ) }
+				placeholder={ __( {{compoundChildTitleJson}}, '{{textDomain}}' ) }
+			/>
+			<RichText
+				tagName="p"
+				className="{{compoundChildCssClassName}}__body"
+				value={ attributes.body ?? '' }
+				onChange={ ( body ) => updateAttribute( 'body', body ) }
+				placeholder={ __( 'Add supporting details for this internal item.', '{{textDomain}}' ) }
+			/>
+			{ ! isValid && (
+				<Notice status="error" isDismissible={ false }>
+					<ul>
+						{ errorMessages.map( ( error, index ) => <li key={ index }>{ error }</li> ) }
+					</ul>
+				</Notice>
+			) }
+		</div>
+	);
+}

package/templates/compound/src/blocks/{{slugKebabCase}}-item/hooks.ts.mustache

@@ -0,0 +1,11 @@
+export {
+	formatValidationError,
+	formatValidationErrors,
+	useTypiaValidation,
+} from '../../hooks';
+
+export type {
+	TypiaValidationError,
+	ValidationResult,
+	ValidationState,
+} from '../../hooks';

package/templates/compound/src/blocks/{{slugKebabCase}}-item/index.tsx.mustache

@@ -0,0 +1,25 @@
+import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
+import {
+	buildScaffoldBlockRegistration,
+	type ScaffoldBlockMetadata,
+} from '@wp-typia/block-runtime/blocks';
+
+import Edit from './edit';
+import Save from './save';
+import metadata from './block.json';
+import '../{{slugKebabCase}}/style.scss';
+
+import type { {{pascalCase}}ItemAttributes } from './types';
+
+const registration = buildScaffoldBlockRegistration<
+	BlockConfiguration< {{pascalCase}}ItemAttributes >
+>( metadata as ScaffoldBlockMetadata, {
+	edit: Edit,
+	save: Save,
+} );
+
+registerBlockType< {{pascalCase}}ItemAttributes >(
+	registration.name,
+	registration.settings
+);

package/templates/compound/src/blocks/{{slugKebabCase}}-item/save.tsx.mustache

@@ -0,0 +1,24 @@
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+import type { {{pascalCase}}ItemAttributes } from './types';
+
+export default function Save( {
+	attributes,
+}: {
+	attributes: {{pascalCase}}ItemAttributes;
+} ) {
+	return (
+		<div { ...useBlockProps.save( { className: '{{compoundChildCssClassName}}' } ) }>
+			<RichText.Content
+				tagName="h4"
+				className="{{compoundChildCssClassName}}__title"
+				value={ attributes.title }
+			/>
+			<RichText.Content
+				tagName="p"
+				className="{{compoundChildCssClassName}}__body"
+				value={ attributes.body }
+			/>
+		</div>
+	);
+}

package/templates/compound/src/blocks/{{slugKebabCase}}-item/types.ts.mustache

@@ -0,0 +1,12 @@
+import { tags } from 'typia';
+
+export interface {{pascalCase}}ItemAttributes {
+	title: string &
+		tags.MinLength< 1 > &
+		tags.MaxLength< 80 > &
+		tags.Default< {{compoundChildTitleJson}} >;
+	body: string &
+		tags.MinLength< 1 > &
+		tags.MaxLength< 280 > &
+		tags.Default< 'Add supporting details for this internal item.' >;
+}

package/templates/compound/src/blocks/{{slugKebabCase}}-item/validators.ts.mustache

@@ -0,0 +1,17 @@
+import currentManifest from './typia.manifest.json';
+import type { {{pascalCase}}ItemAttributes } from './types';
+import { createTemplateValidatorToolkit } from '../../validator-toolkit';
+
+const scaffoldValidators = createTemplateValidatorToolkit< {{pascalCase}}ItemAttributes >( {
+	manifest: currentManifest,
+} );
+
+export const validate{{pascalCase}}ItemAttributes =
+	scaffoldValidators.validateAttributes;
+
+export const validators = scaffoldValidators.validators;
+
+export const sanitize{{pascalCase}}ItemAttributes =
+	scaffoldValidators.sanitizeAttributes;
+
+export const createAttributeUpdater = scaffoldValidators.createAttributeUpdater;

package/templates/interactivity/package.json.mustache

@@ -0,0 +1,42 @@
+{
+	"name": "{{slug}}",
+	"version": "0.1.0",
+  "packageManager": "bun@1.3.10",
+	"description": "{{description}}",
+	"author": "{{author}}",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"scripts": {
+		"sync-types": "tsx scripts/sync-types-to-block-json.ts",
+		"build": "bun run sync-types --check && wp-scripts build --experimental-modules",
+		"start": "bun run sync-types && wp-scripts start --experimental-modules",
+		"dev": "bun run start",
+		"lint:js": "wp-scripts lint-js",
+		"lint:css": "wp-scripts lint-style",
+		"lint": "bun run lint:js && bun run lint:css",
+		"format": "wp-scripts format",
+		"typecheck": "bun run sync-types --check && tsc --noEmit"
+	},
+	"devDependencies": {
+		"@wp-typia/block-runtime": "{{blockRuntimePackageVersion}}",
+		"@wp-typia/block-types": "{{blockTypesPackageVersion}}",
+		"ajv": "^8.18.0",
+		"@types/wordpress__block-editor": "^11.5.17",
+		"@types/wordpress__blocks": "^12.5.18",
+		"@wordpress/browserslist-config": "^6.42.0",
+    "@wordpress/scripts": "^30.22.0",
+		"eslint-plugin-jsx-a11y": "^6.10.2",
+		"@typia/unplugin": "^12.0.1",
+		"tsx": "^4.20.5",
+		"typescript": "^5.9.2",
+		"typia": "^12.0.1"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^15.2.0",
+		"@wordpress/blocks": "^15.2.0",
+		"@wordpress/components": "^30.2.0",
+		"@wordpress/element": "^6.29.0",
+		"@wordpress/i18n": "^6.2.0",
+		"@wordpress/interactivity": "^6.29.0"
+	}
+}

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

@@ -0,0 +1,73 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "{{namespace}}/{{slugKebabCase}}",
+	"version": "{{blockMetadataVersion}}",
+	"title": "{{title}}",
+	"category": "{{category}}",
+	"icon": "{{icon}}",
+	"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": "{{textDomain}}",
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css",
+	"viewScriptModule": "file:./interactivity.js"
+}