Symbol

What are Symbols?

Symbols are reusable PHP components in FanCoolo that you create in the WordPress admin and inject into your blocks using React-like syntax.

Key Characteristics

• Taxonomy-based: Created as Funculo Items with taxonomy term “symbols”
• React-like syntax: Used in blocks as <Button />, <Card />, etc.
• Server-side rendering: Processed to PHP at render time
• Attribute-driven: Accept attributes to create variations (Primary, Outline, Ghost, etc.)
• Reusable: One symbol can be used across multiple blocks
• Centralized: Changes to a symbol automatically update all blocks using it

Benefits

• DRY Code – Write once, use everywhere
• Consistent Design – Enforce design system patterns
• Easy Updates – Change symbol once, updates all blocks
• Variations – Use attributes to create multiple variants (Primary/Outline/Ghost buttons)
• Clean Block Code – Blocks stay simple and readable

How Symbols Work

1. Create Symbol in WordPress Admin (Funculo Items → Add New → Type: Symbols)
2. Write PHP Code for the symbol component and add title “button or Button”
3. Save & Generate – FanCoolo generates fancoolo-blocks/symbols/button.php
4. Use in Blocks – Add <Button /> in block PHP code
5. Render Time – SymbolProcessor converts <Button /> to the symbol’s PHP output

Naming Convention

Symbol Post Title	Generated File	Usage in Block
Button	button.php	<Button />
card	card.php	<Card />
Product Card	product-card.php	<ProductCard />
Social icon	social-icon.php	<SocialIcon />

Rule: PascalCase in blocks → kebab-case files

Examples – Button

Static

For the excersise perpose we will call (Add title) symbol “Button”

<button>Button text<button>

Add it in block content as <Button />

Simple

<?php

$text = $symbol_attrs['text'] ?? 'Button text';

?>

<button><?php echo esc_html($text); ?></button>

In block content example

<Button text="Click me" />

Multiple overwrites

<?php

$text = $symbol_attrs['text'] ?? 'Button text';
$type = $symbol_attrs['type'] ?? 'primary';
$size = $symbol_attrs['size'] ?? 'medium';
$url = $symbol_attrs['url'] ?? '';

// Build CSS class
$class = 'btn btn-' . $type . ' btn-' . $size;

?>

<?php if (!empty($url)): ?>
    <a href="<?php echo esc_url($url); ?>" class="<?php echo esc_attr($class); ?>">
        <?php echo esc_html($text); ?>
    </a>
<?php else: ?>
    <button class="<?php echo esc_attr($class); ?>">
        <?php echo esc_html($text); ?>
    </button>
<?php endif; ?>

In block content examples

<!-- Primary Button (default) -->
<Button text="Submit" />

<!-- Outline Button -->
<Button text="Cancel" type="outline" />

<!-- Ghost Button -->
<Button text="Learn More" type="ghost" />

<!-- Large Primary Button -->
<Button text="Get Started" type="primary" size="large" />

<!-- Link Button -->
<Button text="Read More" type="primary" url="/about" />

Using true

<?php

$text = $symbol_attrs['text'] ?? 'Button text';
$disabled = $symbol_attrs['disabled'] ?? false;

?>

<button <?php echo ($disabled ? 'disabled' : ''); ?>>
        <?php echo esc_html($text); ?>
</button>

<!-- Disabled Button -->
<Button text="Unavailable" disabled="true" />

Examples – Card Symbol with Variations

Create Symbol: “Card”

Symbol PHP:

<?php
$title = $symbol_attrs['title'] ?? '';
$description = $symbol_attrs['description'] ?? '';
$variant = $symbol_attrs['variant'] ?? 'default';
$image = $symbol_attrs['image'] ?? '';

$class = 'card card-' . $variant;
?>

<div class="<?php echo esc_attr($class); ?>">
    <?php if (!empty($image)): ?>
        <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>" class="card-image" />
    <?php endif; ?>

    <div class="card-content">
        <?php if (!empty($title)): ?>
            <h3 class="card-title"><?php echo esc_html($title); ?></h3>
        <?php endif; ?>

        <?php if (!empty($description)): ?>
            <p class="card-description"><?php echo esc_html($description); ?></p>
        <?php endif; ?>
    </div>
</div>

<div class="cards-grid">
    <Card
        title="Feature One"
        description="This is a default card"
        variant="default"
    />

    <Card
        title="Feature Two"
        description="This is an outlined card"
        variant="outline"
    />

    <Card
        title="Feature Three"
        description="This is an elevated card with shadow"
        variant="elevated"
        image="https://example.com/image.jpg"
    />
</div>