enhance(block): Add inline style support to blocks (#145)

src/Block.php

@@ -4,12 +4,14 @@
 
 use Illuminate\Support\Arr;
 use Illuminate\Support\Str;
+use Log1x\AcfComposer\Concerns\FormatsCss;
 use Log1x\AcfComposer\Contracts\Block as BlockContract;
 use Log1x\AcfComposer\Concerns\InteractsWithBlade;
 
 abstract class Block extends Composer implements BlockContract
 {
     use InteractsWithBlade;
+    use FormatsCss;
 
     /**
      * The block properties.
@@ -228,6 +230,13 @@ abstract class Block extends Composer implements BlockContract
      */
     public $template = [];
 
+    /**
+     * The block dimensions.
+     *
+     * @var string
+     */
+    public $inlineStyle;
+
     /**
      * Assets enqueued when rendering the block.
      *
@@ -252,6 +261,30 @@ public function getStyle()
             Arr::get(collect($this->block->styles)->firstWhere('isDefault'), 'name');
     }
 
+    /**
+     * Returns the active block inline styles based on the selected block properties.
+     *
+     * @return string
+     */
+    public function getInlineStyle(): string
+    {
+        return collect([
+            'padding' => !empty($this->block->style['spacing']['padding'])
+                ? collect($this->block->style['spacing']['padding'])->map(function ($value, $side) {
+                    return $this->formatCss($value, $side);
+                })->implode(' ')
+                : null,
+            'margin'  => !empty($this->block->style['spacing']['margin'])
+                ? collect($this->block->style['spacing']['margin'])->map(function ($value, $side) {
+                    return $this->formatCss($value, $side, 'margin');
+                })->implode(' ')
+                : null,
+            'color' => !empty($this->block->style['color']['gradient'])
+                ? sprintf('background: %s;', $this->block->style['color']['gradient'])
+                : null,
+        ])->filter()->implode(' ');
+    }
+
     /**
      * Returns the block template.
      *
@@ -408,11 +441,22 @@ public function render($block, $content = '', $preview = false, $post_id = 0, $w
                 'full-height' :
                 false,
             'classes' => $this->block->className ?? false,
+            'backgroundColor' => ! empty($this->block->backgroundColor) ?
+                sprintf('has-background has-%s-background-color', $this->block->backgroundColor) :
+                false,
+            'textColor' => ! empty($this->block->textColor) ?
+                sprintf('has-%s-color', $this->block->textColor) :
+                false,
+            'gradient' => ! empty($this->block->gradient) ?
+                sprintf('has-%s-gradient-background', $this->block->gradient) :
+                false,
         ])->filter()->implode(' ');
 
         $this->style = $this->getStyle();
         $this->template = $this->getTemplate($this->template)->toJson();
 
+        $this->inlineStyle = $this->getInlineStyle();
+
         return $this->view($this->view, ['block' => $this]);
     }
 }

src/Concerns/FormatsCss.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Log1x\AcfComposer\Concerns;
+
+use Illuminate\Support\Str;
+
+trait FormatsCss
+{
+    /**
+     * Format the given value into a CSS style.
+     *
+     * @param  string $value
+     * @param  string $side
+     * @param  string $type
+     * @return string
+     */
+    public function formatCss($value, $side, $type = 'padding'): string
+    {
+        if (! Str::startsWith($value, 'var:preset|')) {
+            return sprintf('%s-%s: %s;', $type, $side, $value);
+        }
+
+        $segments = explode('|', $value);
+
+        array_shift($segments);
+
+        return sprintf('%s-%s: var(--wp--preset--%s);', $type, $side, implode('--', $segments));
+    }
+}

src/Console/stubs/block.construct.stub

@@ -115,6 +115,11 @@ class DummyClass extends Block
             'mode' => false,
             'multiple' => true,
             'jsx' => true,
+            'color' => [
+                'background' => true,
+                'text' => true,
+                'gradient' => true,
+            ],
         ];
 
         /**

src/Console/stubs/block.stub

@@ -105,6 +105,11 @@ class DummyClass extends Block
         'mode' => false,
         'multiple' => true,
         'jsx' => true,
+        'color' => [
+            'background' => true,
+            'text' => true,
+            'gradient' => true,
+        ],
     ];
 
     /**
@@ -146,7 +151,7 @@ class DummyClass extends Block
         'core/heading' => ['placeholder' => 'Hello World'],
         'core/paragraph' => ['placeholder' => 'Welcome to the DummyTitle block.'],
     ];
-    
+
     /**
      * Data to be passed to the block before rendering.
      *

src/Console/stubs/views/block.stub

@@ -1,4 +1,4 @@
-<div class="{{ $block->classes }}">
+<div class="{{ $block->classes }}" style="{{ $block->inlineStyle }}">
   @if ($items)
     <ul>
       @foreach ($items as $item)