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}}">