Color support in acf-composer

sage
1

Using acf-composer I added support to color like this

public $supports = [
   ...     
   'color' => true
];

Learned from this issue that acf nor acf-composer handles the colors so I need to construct the class names with the slugs returned in $block->block->backgroundColor and $block->block->textColor

Something like this

<div class="has-{{ $block->block->backgroundColor }}-background-color has-background">

However I can’t access backgroundColor in my Blade views

From the same thread I also tried to add this to my block’s class file, but the same problem:

/**
 * Assembles the block's text and background color classes
 *
 * @return string
 */
public function getColorClasses()
{
    // No need to generate them if we're inside the Editor:
    if ($this->preview) {
        return '';
    }

    $classes = [];

    $bgColor = $this->block->backgroundColor ?? null;
    if (!empty($bgColor)) {
        $classes[] = sprintf('has-background has-%s-background-color', $bgColor);
    }

    $textColor = $this->block->textColor ?? null;
    if (!empty($textColor)) {
        $classes[] = sprintf('has-%s-color', $textColor);
    }

    return implode(' ', $classes);
}

....

public function with()
{
    return [
        /* ... */
        'colorClasses' => $this->getColorClasses(),
    ];
}

In the view:

<div @class([$block->classes, $colorClasses])>

What am I missing?

2

Never mind. The function I added to my block’s class file is working, but I had to change the above in my blade view to

<div class="{{ $block->classes }} {{$colorClasses}}">
1 Like
3

worth looking at get_block_wrapper_attributes() | Function | WordPress Developer Resources

1 Like