✨ Add view attribute bag support to blocks

🩹 Fix typography attribute compatibility (Fixes #316)
💄 Update the block view stub to use the attribute bag

Author: Log1x

src/Block.php

@@ -6,6 +6,7 @@
 use Illuminate\Support\Arr;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Str;
+use Illuminate\View\ComponentAttributeBag;
 use Log1x\AcfComposer\Concerns\InteractsWithBlade;
 use Log1x\AcfComposer\Contracts\Block as BlockContract;
 use WP_Block_Supports;
@@ -374,6 +375,30 @@ public function getStyles(): array
         return $styles->all();
     }
 
+    /**
+     * Retrieve the block supports.
+     */
+    public function getSupports(): array
+    {
+        $supports = $this->collect($this->supports)
+            ->mapWithKeys(fn ($value, $key) => [Str::camel($key) => $value])
+            ->merge($this->supports);
+
+        $typography = $supports->get('typography', []);
+
+        if ($supports->has('alignText')) {
+            $typography['textAlign'] = $supports->get('alignText');
+
+            $supports->forget(['alignText', 'align_text']);
+        }
+
+        if ($typography) {
+            $supports->put('typography', $typography);
+        }
+
+        return $supports->all();
+    }
+
     /**
      * Retrieve the block support attributes.
      */
@@ -388,28 +413,29 @@ public function getSupportAttributes(): array
             ];
         }
 
-        if ($this->align_text) {
-            $attributes['alignText'] = [
-                'type' => 'string',
-                'default' => $this->align_text,
-            ];
-        }
-
         if ($this->align_content) {
             $attributes['alignContent'] = [
                 'type' => 'string',
                 'default' => $this->align_content,
             ];
         }
 
+        $styles = [];
+
+        if ($this->align_text) {
+            $styles['typography']['textAlign'] = $this->align_text;
+        }
+
         $spacing = array_filter($this->spacing);
 
         if ($spacing) {
+            $styles['spacing'] = $spacing;
+        }
+
+        if ($styles) {
             $attributes['style'] = [
                 'type' => 'object',
-                'default' => [
-                    'spacing' => $spacing,
-                ],
+                'default' => $styles,
             ];
         }
 
@@ -579,13 +605,6 @@ public function settings(): Collection
             return $this->settings;
         }
 
-        if ($this->supports) {
-            $this->supports = $this->collect($this->supports)
-                ->mapWithKeys(fn ($value, $key) => [Str::camel($key) => $value])
-                ->merge($this->supports)
-                ->all();
-        }
-
         $settings = Collection::make([
             'name' => $this->slug,
             'title' => $this->getName(),
@@ -600,7 +619,7 @@ public function settings(): Collection
             'alignText' => $this->align_text ?? $this->align,
             'alignContent' => $this->align_content,
             'styles' => $this->getStyles(),
-            'supports' => $this->supports,
+            'supports' => $this->getSupports(),
             'textdomain' => $this->getTextDomain(),
             'acf_block_version' => $this->blockVersion,
             'api_version' => 2,
@@ -726,7 +745,15 @@ public function render($block, $content = '', $preview = false, $post_id = 0, $w
         $this->style = $this->getStyle();
         $this->inlineStyle = $this->getInlineStyle();
 
-        return $this->view($this->view, ['block' => $this]);
+        $attributes = (new ComponentAttributeBag)
+            ->class($this->classes)
+            ->style($this->inlineStyle)
+            ->filter(fn ($value) => filled($value) && $value !== ';');
+
+        return $this->view($this->view, [
+            'block' => $this,
+            'attributes' => $attributes,
+        ]);
     }
 
     /**

src/Console/stubs/views/block.stub

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