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

Defining Attributes

By default a symbol just outputs static markup. To make it configurable — so the same symbol can render a Primary, Outline, or Ghost button — you define attributes.

Symbols use the same Attributes Manager as blocks. Open a symbol and switch to the Attributes tab:

1. Click “+ Add attribute”
2. Choose the Type (Text, Number, Toggle, Select, etc.)
3. Enter the Attribute name in camelCase (e.g. text, type, size)
4. For Select or Radio, click “+ Add Option” to add the available choices
5. Save the symbol

The attributes you define are stored with the symbol and become the fields users see when they drop the symbol into a block.

Available Types

The same set as block attributes: Text, Textarea, Number, Range, Date, Image, File, Link, Color, Select, Toggle, Checkbox, Radio, Relationship, Post Types, Taxonomies.

Reading Attributes in PHP

Inside the symbol’s PHP, read each value from the $symbol_attrs array — always with a fallback default:

<?php
$text = $symbol_attrs['text'] ?? 'Button text';
$type = $symbol_attrs['type'] ?? 'primary';
?>

The key matches the attribute name you entered in the Attributes tab.

Passing Values from a Block

When you use a symbol inside a block — <Button text="Click me" /> — the block editor shows a Symbol Attributes panel in the sidebar. Each symbol instance appears as an accordion listing the attributes you defined, rendered as the matching field (text input, number, toggle, select buttons).

You can either:

• Type a static value — written straight into the tag, e.g. <Button text="Click me" />.
• Bind a block attribute — click the dropdown next to a field and pick one of the block’s own attributes. FanCoolo inserts it as $attributes['…'] (shown with a PHP badge), so the symbol value is driven by the block’s data at render time.

Changes made in the panel update the symbol tag in the editor live.

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>