Smort-SDK VS Code Extension

A VS Code extension for generating Smort blocks with the proper folder structure and file organization. Creates blocks in the template-parts/smortblocks/ directory with all necessary files.

Features

Generate Smort Block: Creates a complete Smort block with CSS, JS, PHP, and JSON files
Automatic Folder Structure: Creates template-parts/smortblocks/[block-name]/ directory structure
Multiple File Types: Generates 4 files per block (CSS, JS, PHP, JSON) with the block name

Usage

Right-click anywhere in the VS Code Explorer
Select "Generate Smort Block" from the context menu
Enter a name for your block (e.g., "example-block")
The extension will create:
- template-parts/smortblocks/example-block/ folder
- example-block.css (ready for styling)
- example-block.js (ready for JavaScript)
- example-block.php (ready for PHP template)
- acf/example-block.php (ready for ACF field configuration)
- Automatically registers the block in functions.php

Available Commands

Smort-SDK: Generate Smort Block - Creates a complete Smort block structure
Smort-SDK: Generate Smort Component - Creates a reusable theme component
Smort-SDK: Import Library Block - Import a pre-built block from the library
Smort-SDK: Import Library Component - Import a pre-built component from the library

Block Structure

When you generate a block named "example-block", the extension creates:

template-parts/
└── smortblocks/
    └── example-block/
        ├── example-block.css
        ├── example-block.js
        ├── example-block.php
        ├── register.php (NEW - contains block registration)
        └── acf/
            └── example-block.php

All files are created from customizable templates with placeholder replacement. The ACF PHP file is placed in an acf/ subfolder and contains acf_add_local_field_group() code for WordPress ACF (Advanced Custom Fields) plugin integration.

Modular Block Registration

The extension uses a clean, modular approach for block registration:

How It Works:

Individual Registration Files: Each block contains its own register.php file with:
- Block registration (acf_register_block_type)
- ACF field group inclusion
- All block-specific configuration

Auto-Loader in functions.php: A single auto-loader scans and includes all block registration files:

/* Auto-load Smort Blocks */
$smort_blocks_dir = get_stylesheet_directory() . '/template-parts/smortblocks/';
if (is_dir($smort_blocks_dir)) {
    $block_dirs = glob($smort_blocks_dir . '*', GLOB_ONLYDIR);
    foreach ($block_dirs as $block_dir) {
        $register_file = $block_dir . '/register.php';
        if (file_exists($register_file)) {
            require_once $register_file;
        }
    }
}

Benefits:

✅ Clean functions.php - No individual block registrations cluttering the file
✅ Self-contained blocks - Each block manages its own registration and dependencies
✅ Easy maintenance - Add/remove blocks without touching functions.php
✅ Automatic discovery - New blocks are automatically registered

Component Generation

The extension also supports generating reusable theme components:

Usage:

Right-click in VS Code Explorer
Select "Generate Smort Component"
Enter component name (e.g., "button")
The extension creates:
- components/button/ folder
- button.css (component styling)
- button.php (component logic with props support)
- Ensures components/index.php exists with helper functions

Component Structure:

components/
├── index.php (helper functions)
└── button/
    ├── button.css
    └── button.php

Using Components in Templates:

// In your theme files
get_component('button', [
    'text' => 'Click me',
    'href' => '/contact',
    'class' => 'primary-button'
]);

// Or return as string
$button_html = render_component('button', ['text' => 'Submit']);

Library Import System

The extension includes a library of pre-built blocks and components that can be imported into your project:

Import Library Block:

Right-click in VS Code Explorer
Select "Import Library Block"
Choose from available library blocks
Block is copied to your project and automatically registered

Import Library Component:

Right-click in VS Code Explorer
Select "Import Library Component"
Choose from available library components
Component is copied to your components/ folder

Available Library Items:

Blocks: smort-cat-carousel, smort-media-text, smort-product-slider
Components: container, button, product-item

Automatic Dependency Resolution:

The extension automatically detects and imports component dependencies:

Example: When importing smort-product-slider block:

Scans for _sc('component-name') function calls
Finds dependencies: product-item component
Scans product-item and finds: button component
Auto-imports: button → product-item → smort-product-slider

Dependency Detection Methods:

_sc('component-name') function calls in PHP files
@dependencies ['comp1', 'comp2'] comment blocks (future)

Benefits:

✅ Ready-to-use - Pre-built, tested components
✅ Automatic setup - Blocks are registered in functions.php
✅ Smart dependencies - Auto-imports required components
✅ Consistent code - Follows Smort coding standards
✅ Time-saving - No need to build common components from scratch
✅ No duplicates - Skips components that already exist in project

Dependency System

How It Works:

When you import a block or component, the extension:

Scans all PHP files in the item for _sc('component-name') calls
Recursively resolves dependencies (components can depend on other components)
Auto-imports missing components from the library
Skips existing components to avoid conflicts
Shows feedback about imported dependencies

Example Dependency Chain:

// In smort-product-slider.php
<?php _sc('product-item', ['product_id' => $id]) ?>

// In product-item.php
<?php _sc('button', ['text' => 'Buy Now', 'href' => $link]) ?>

Result: Importing smort-product-slider automatically imports product-item and button.

Future Enhancement:

Support for dependency arrays in file headers:

<?php
/**
 * @dependencies ['button', 'modal']
 */

WordPress Integration

The extension automatically handles WordPress block registration:

Finds functions.php in your workspace root
Locates register_acf_block_types() function or creates it if missing
Adds block registration code with proper paths and settings
Includes hook setup if creating the function for the first time

Generated Block Registration:

acf_register_block_type(array(
    'name' => 'example-block',
    'title' => __("Smort - Example Block"),
    'description' => __('Smort block'),
    'render_template' => '/template-parts/smortblocks/example-block/example-block.php',
    'category' => 'smort',
    'icon' => 'id',
    'keywords' => array('CTA', 'Block'),
    'mode' => 'edit',
    'enqueue_style' => get_stylesheet_directory_uri() . '/template-parts/smortblocks/example-block/example-block.css',
    'enqueue_script' => get_stylesheet_directory_uri() . '/template-parts/smortblocks/example-block/example-block.js'
));

Template System

The extension uses a template system that allows you to customize the generated files. Templates are located in the templates/ folder:

templates/block.php - PHP template for the block
templates/block.css - CSS template for styling
templates/block.js - JavaScript template for functionality
templates/acf.php - ACF field configuration template

Template Placeholders

The following placeholders are automatically replaced in templates:

{{BLOCK_NAME_KEBAB}} - Block name in kebab-case (e.g., "example-block")
{{BLOCK_NAME_SNAKE}} - Block name in snake_case (e.g., "example_block")
{{BLOCK_NAME_CAMEL}} - Block name in camelCase (e.g., "exampleBlock")
{{BLOCK_NAME_PASCAL}} - Block name in PascalCase (e.g., "ExampleBlock")
{{BLOCK_NAME_TITLE}} - Block name as title (e.g., "Example Block")

Customizing Templates

You can edit any template file in the templates/ folder to customize the generated code. The extension will use your custom templates for all new blocks.

Development

Clone this repository
Run npm install to install dependencies
Press F5 to open a new Extension Development Host window
Test the extension in the new window by right-clicking in Explorer

Requirements

VS Code 1.74.0 or higher
TypeScript support

Extension Settings

This extension contributes the following settings:

Currently no configurable settings

Known Issues

None at this time.

Release Notes

0.0.1

Initial release with Smort block generation capabilities.

Smort-SDK

Smort AB

Smort-SDK VS Code Extension

Features

Usage

Available Commands

Block Structure

Modular Block Registration

How It Works:

Benefits:

Component Generation

Usage:

Component Structure:

Using Components in Templates:

Library Import System

Import Library Block:

Import Library Component:

Available Library Items:

Automatic Dependency Resolution:

Benefits:

Dependency System

How It Works:

Example Dependency Chain:

Future Enhancement:

WordPress Integration

Generated Block Registration:

Template System

Template Placeholders

Customizing Templates

Development

Requirements

Extension Settings

Known Issues

Release Notes

0.0.1