Wikit Gutenberg Blocks Catalog

Overview

Wikit provides 49 custom Gutenberg blocks designed for building sophisticated WordPress sites. These blocks are located in /wikit-theme/block-editor/blocks/ and follow WordPress block API standards.

Block Categories

Query & Display Blocks

Advanced Query System

• wdg/advanced-query - Advanced post query with faceted filtering
• wdg/advanced-query-facets - Container for query facets
• wdg/advanced-query-facet - Individual facet filter
• wdg/advanced-query-results - Query results display
• wdg/advanced-query-pagination - Query pagination controls
• wdg/advanced-query-active - Active filters display

Card Display Blocks

• wdg/card - Basic card component
• wdg/card-dynamic - Dynamic content card
• wdg/card-grid - Grid layout for cards
• wdg/card-slider - Carousel/slider for cards
• wdg/card-slider-content - Slider content area
• wdg/card-slider-description - Slider description
• wdg/card-slider-nav - Slider navigation controls
• wdg/card-slider-query - Query-driven card slider
• wdg/card-slider-related - Related content slider

Navigation Blocks

• wdg/breadcrumb - Breadcrumb navigation
• wdg/aside-navigation - Sidebar navigation menu
• wdg/aside-navigation-item - Individual navigation item
• wdg/header-navigation - Header navigation menu
• wdg/header-navigation-item - Header nav item
• wdg/navigation - General navigation block
• wdg/navigation-item - General nav item

Header & Layout Blocks

• wdg/header - Page/post header
• wdg/header-title - Header title component
• wdg/header-meta - Header metadata
• wdg/header-metadata - Extended metadata display
• wdg/panel - Content panel/section
• wdg/grid - Responsive grid layout
• wdg/grid-item - Grid item container

Content Display Blocks

• wdg/statistics - Statistics display
• wdg/timeline - Timeline visualization
• wdg/timeline-item - Timeline entry
• wdg/quote - Styled quotation
• wdg/cta - Call-to-action block
• wdg/highlight - Highlighted content
• wdg/csv - CSV data display/table

Media Blocks

• wdg/media-slider - Media carousel
• wdg/media-slider-slide - Individual slide
• wdg/video-hero - Video hero section

People & Teams

• wdg/people - People listing/grid
• wdg/person - Individual person display
• wdg/person-header - Person header/bio

Search & Forms

• wdg/search - Search interface
• wdg/search-modal - Modal search overlay

Dynamic Content

• wdg/query - Basic post query
• wdg/single-dynamic - Dynamic single post content
• wdg/nav-list - Dynamic navigation list
• wdg/nav-list-child - Child navigation items
• wdg/post-tease - Post teaser/excerpt
• wdg/posts - Posts listing

Using Wikit Blocks

In the Block Editor

All Wikit blocks are available in the block inserter under the "WDG" category:

1. Click the "+" button in the editor
2. Search for "wdg/" or browse the WDG category
3. Insert the desired block
4. Configure block settings in the sidebar

Block Patterns

Common block combinations can be saved as patterns:

register_block_pattern(
    'wdg/product-showcase',
    [
        'title' => 'Product Showcase',
        'categories' => ['wdg-patterns'],
        'content' => '<!-- wp:wdg/header --><!-- /wp:wdg/header -->
                     <!-- wp:wdg/card-slider-query {"postType":"product"} /-->'
    ]
);

Programmatic Usage

// Render a block programmatically
echo do_blocks('<!-- wp:wdg/breadcrumb /-->');

// Or use render_block
$block = [
    'blockName' => 'wdg/card',
    'attrs' => [
        'title' => 'Dynamic Card',
        'content' => 'Card content',
    ],
];
echo render_block($block);

Block Configuration

Common Block Attributes

Most Wikit blocks support these common attributes:

• className - Additional CSS classes
• align - Alignment (wide, full, left, right, center)
• backgroundColor - Background color from theme
• textColor - Text color from theme

Query Block Attributes

Query-based blocks (advanced-query, card-slider-query, etc.) support:

• postType - Post type to query
• taxonomy - Taxonomy for filtering
• terms - Specific terms to filter by
• posts_per_page - Number of posts
• orderby - Sort field
• order - Sort direction (ASC/DESC)

Example: Advanced Query with Facets

<!-- wp:wdg/advanced-query {"postType":"product"} -->
    <!-- wp:wdg/advanced-query-facets -->
        <!-- wp:wdg/advanced-query-facet {"taxonomy":"product_category"} /-->
        <!-- wp:wdg/advanced-query-facet {"taxonomy":"product_tag"} /-->
    <!-- /wp:wdg/advanced-query-facets -->
    
    <!-- wp:wdg/advanced-query-results -->
        <!-- wp:wdg/card-grid -->
            <!-- wp:wdg/card-dynamic /-->
        <!-- /wp:wdg/card-grid -->
    <!-- /wp:wdg/advanced-query-results -->
    
    <!-- wp:wdg/advanced-query-pagination /-->
<!-- /wp:wdg/advanced-query -->

Extending Blocks

Adding Block Styles

// Register additional block style
register_block_style(
    'wdg/card',
    [
        'name' => 'outlined',
        'label' => 'Outlined',
        'style_handle' => 'wdg-card-outlined-style',
    ]
);

Modifying Block Output

add_filter('render_block_wdg/card', function($block_content, $block) {
    // Modify card block output
    if (isset($block['attrs']['customAttribute'])) {
        // Add custom handling
    }
    return $block_content;
}, 10, 2);

Project-Specific Blocks

Projects can add their own blocks:

1. Create block in project repository:

   /projects/{project}/repositories/{repo}/blocks/custom-block/
   ├── block.json
   ├── index.js
   ├── editor.scss
   └── style.scss

2. Register in theme/plugin:

   register_block_type(__DIR__ . '/blocks/custom-block');

Block Development

Block Structure

Each Wikit block follows this structure:

block-name/
├── block.json       # Block metadata
├── index.js        # Block JavaScript
├── editor.scss     # Editor styles
├── style.scss      # Frontend styles
└── render.php      # Optional PHP rendering

Block.json Example

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "wdg/block-name",
    "title": "Block Title",
    "category": "wdg",
    "icon": "dashicon-name",
    "description": "Block description",
    "supports": {
        "html": false,
        "align": ["wide", "full"]
    },
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": ".content"
        }
    },
    "editorScript": "file:./index.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

Best Practices

1. Use Wikit blocks when available - Don't reinvent existing functionality
2. Follow naming conventions - Use wdg/ prefix for custom blocks
3. Support theme colors - Use theme color palette in block settings
4. Make blocks reusable - Design blocks to work in multiple contexts
5. Test responsiveness - Ensure blocks work on all screen sizes
6. Document custom blocks - Add clear descriptions and usage examples