Wikit Framework

WDG's proprietary WordPress framework featuring 60+ Gutenberg blocks, design patterns, and development utilities.

Overview

Wikit is WDG's internal WordPress framework that provides:

• 60+ Gutenberg Blocks: Pre-built, customizable blocks
• Component Library: Reusable PHP and JavaScript components
• Design Patterns: Standardized WordPress patterns
• Build System: Modern webpack-based asset pipeline

Architecture

Repository Structure

wikit-core/
├── src/                    # PHP source (PSR-4: WDG\Core\)
├── js/                     # JavaScript sources
├── css/                    # Stylesheets
├── dist/                   # Compiled assets (generated)
├── index.php               # Framework entry point
├── webpack.config.js       # Build configuration
├── phpcs.xml               # PHPCS ruleset
└── composer.json           # PSR-4 autoload (WDG\Core\)

Wikit framework PSR-4 roots (from composer.json): WDG\Core\, WDG\App\, WDG\Theme\, WDG\Facets\. There is no top-level inc/ or blocks/ directory in wikit-core; project block sources live in the theme's block-editor/blocks/ directory.

Block Categories

Layout Blocks

• Hero - Full-width hero sections
• Grid - Responsive grid layouts
• Columns - Multi-column layouts
• Section - Content sections
• Container - Max-width containers

Content Blocks

• Button - CTA buttons
• Heading - Styled headings
• Text - Rich text
• Image - Responsive images
• Video - Video embeds

Interactive Blocks

• Accordion - Expandable content
• Tabs - Tabbed interface
• Modal - Popup content
• Slider - Image/content slider

Data Blocks

• Form - Custom forms
• Table - Data tables
• Chart - Data visualization
• Map - Interactive maps

Using Wikit Blocks

In Theme Development

// functions.php
// Wikit blocks are automatically available

// Register custom block category
add_filter('block_categories_all', function($categories) {
    $categories[] = [
        'slug' => 'custom-blocks',
        'title' => 'Custom Blocks'
    ];
    return $categories;
});

Block Editor

1. Create/edit page or post
2. Click "+" to add block
3. Search for "wdg/"
4. Select desired block
5. Configure block settings in sidebar

Search Available Blocks

Block discovery runs through the MCP search tools (in Claude), not the CLI:

# Find blocks by name or concept
search_wikit_blocks("testimonials")

# Inspect a block's attributes and schema
get_block_schema("wdg/hero")

You can also ask in natural language, e.g. "Show me Wikit blocks for testimonials."

Common Patterns

Custom Post Types

// Illustrative theme-local custom post type. Project app/theme code uses the
// real PSR-4 roots, e.g. WDG\App\PostType (not WDG\PostTypes).
namespace WDG\App\PostType;

class Portfolio {
    public function __construct() {
        add_action('init', [$this, 'register']);
    }

    public function register() {
        register_post_type('portfolio', [
            'labels' => [
                'name' => 'Portfolio',
                'singular_name' => 'Portfolio Item'
            ],
            'public' => true,
            'has_archive' => true,
            'supports' => ['title', 'editor', 'thumbnail'],
            'show_in_rest' => true
        ]);
    }
}

new Portfolio();

Taxonomies

// Illustrative theme-local taxonomy. Project app/theme code uses the real
// PSR-4 roots, e.g. WDG\App\Taxonomy (not WDG\Taxonomies).
namespace WDG\App\Taxonomy;

class ProjectType {
    public function __construct() {
        add_action('init', [$this, 'register']);
    }

    public function register() {
        register_taxonomy('project_type', ['portfolio'], [
            'labels' => [
                'name' => 'Project Types',
                'singular_name' => 'Project Type'
            ],
            'hierarchical' => true,
            'show_in_rest' => true
        ]);
    }
}

new ProjectType();

Utility Functions

// Illustrative theme-local helpers (e.g. src/Utilities/helpers.php)

/**
 * Get featured image URL
 */
function wdg_get_featured_image_url($post_id = null, $size = 'large') {
    $post_id = $post_id ?: get_the_ID();
    return get_the_post_thumbnail_url($post_id, $size);
}

/**
 * Format phone number
 */
function wdg_format_phone($phone) {
    $phone = preg_replace('/[^0-9]/', '', $phone);
    return preg_replace('/([0-9]{3})([0-9]{3})([0-9]{4})/', '($1) $2-$3', $phone);
}

/**
 * Get excerpt with custom length
 */
function wdg_get_excerpt($post_id = null, $length = 20) {
    $post = get_post($post_id);
    $excerpt = wp_trim_words($post->post_content, $length);
    return $excerpt;
}

Build System

Asset Compilation

Asset compilation runs through the project-scoped commands (and the theme's npm scripts):

# Development mode (npm start with file watching)
wdg my-site dev

# Production build
wdg my-site build

# Watch directly from the theme repository
cd projects/my-site/repositories/my-site-theme
npm run watch

Webpack Configuration

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        main: './assets/js/main.js',
        editor: './assets/js/editor.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};

Hooks & Filters

Common Wikit Hooks

// Modify block output
add_filter('wdg_block_hero_output', function($output, $attributes) {
    // Customize hero block HTML
    return $output;
}, 10, 2);

// Before block registration
add_action('wdg_before_register_blocks', function() {
    // Custom logic before blocks register
});

// After block registration
add_action('wdg_after_register_blocks', function() {
    // Custom logic after blocks register
});

Customization

Extending Wikit Blocks

// Register custom block variant
add_filter('wdg_block_button_variants', function($variants) {
    $variants['custom'] = [
        'label' => 'Custom Button',
        'className' => 'btn-custom'
    ];
    return $variants;
});

Custom Block Styles

// assets/scss/blocks/_custom-hero.scss
.wp-block-wdg-hero {
    &.custom-variant {
        background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);

        .hero__title {
            font-size: 3rem;
            color: white;
        }
    }
}

Best Practices

1. Use Wikit Utilities

// Good: Use Wikit helper
$image_url = wdg_get_featured_image_url();

// Bad: Reinvent the wheel
$image_url = wp_get_attachment_image_url(get_post_thumbnail_id(), 'large');

2. Follow Naming Conventions

// Good: Consistent naming
function client_get_portfolio_items()
function client_render_hero_section()

// Bad: Inconsistent
function getPortfolio()
function DisplayHero()

3. Leverage Block Patterns

// Register reusable pattern
register_block_pattern('wdg/call-to-action', [
    'title' => 'Call to Action',
    'content' => '<!-- wp:wdg/section --><!-- wp:wdg/button /--><!-- /wp:wdg/section -->'
]);

Documentation

See /docs/wikit/ for detailed documentation:

• Block Catalog
• PHP Standards
• JavaScript Standards
• Custom Post Types
• Taxonomies

---

See Also:

• Theme Development
• Development Workflow