In MyBlock.php
public $supports = [
...
'color' => true
];
Or more fine tuned:
public $supports = [
...
'color' => [
'background' => true,
'text' => false,
]
]
/**
* Assembles the block's text and background color classes
* https://github.com/Log1x/acf-composer/issues/107#issuecomment-1089065362
*
* @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);
}
/**
* Data to be passed to the block before rendering.
*
* @return array
*/
public function with()
{
return [
// 'items' => $this->items(),
'colorClasses' => $this->getColorClasses(),
];
}
In you blade view:
<div class="{{ $block->classes }} {{$colorClasses}}">