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/
├── inc/                    # PHP utilities
│   ├── admin/             # Admin customizations
│   ├── blocks/            # Block registrations
│   ├── patterns/          # Design patterns
│   └── utilities/         # Helper functions
├── assets/
│   ├── js/                # JavaScript
│   ├── scss/              # Styles
│   └── images/            # Media assets
├── blocks/                 # Gutenberg blocks
│   ├── hero/
│   ├── grid/
│   └── testimonials/
└── templates/              # PHP templates

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

# CLI search
wdg theme blocks

# Filter by category
wdg theme blocks --category=layout

# AI search
# In Claude: "Show me Wikit blocks for testimonials"

Common Patterns

Custom Post Types

// inc/post-types/portfolio.php
namespace WDG\PostTypes;

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

// inc/taxonomies/project-type.php
namespace WDG\Taxonomies;

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

// inc/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

# Development build
wdg theme dev my-site

# Production build
wdg theme build my-site

# Watch mode
wdg theme watch my-site

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