✨ Add view attribute bag support to blocks (#317)

Author: Log1x

resources/views/alpine-support.blade.php

@@ -1,3 +1,3 @@
 <script type="text/javascript">
-  acf.addFilter('acf_blocks_parse_node_attr', (current, node) => node.name.startsWith('x-') ? node : current);
+  acf.addFilter('acf_blocks_parse_node_attr', (current, node) => (node.name.startsWith('x-') || node.name.startsWith('@')) ? node : current);
 </script>

resources/views/block-editor-filters.blade.php

@@ -0,0 +1,27 @@
+@verbatim
+  wp.hooks.addFilter(
+    'blocks.getBlockDefaultClassName',
+    'acf-composer/block-slug-classname',
+    (className, blockName) => {
+        if (! blockName.startsWith('acf/')) {
+            return className;
+        }
+
+        const list = (className || '').split(/\\s+/);
+
+        const classes = list.reduce((acc, current) => {
+            acc.push(current);
+
+            if (current.startsWith('wp-block-acf-')) {
+                acc.push(
+                    current.replace('wp-block-acf-', 'wp-block-')
+                );
+            }
+
+            return acc;
+        }, []);
+
+        return classes.join(' ');
+    }
+  );
+@endverbatim

src/AcfComposer.php

@@ -201,12 +201,16 @@ protected function handleBlocks(): void
                     }
 
                     if (is_admin() || has_block($composer->namespace)) {
-                        method_exists($composer, 'assets') && $composer->assets($composer->block);
+                        method_exists($composer, 'assets') && $composer->assets((array) $composer->block ?? []);
                     }
                 }
             }
         });
 
+        add_action('enqueue_block_editor_assets', function () {
+            wp_add_inline_script('wp-blocks', view('acf-composer::block-editor-filters')->render());
+        });
+
         add_action('acf_block_render_template', function ($block, $content, $is_preview, $post_id, $wp_block, $context) {
             if (! class_exists($composer = $block['render_template'] ?? '')) {
                 return;

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,
             ];
         }
 
@@ -448,7 +474,7 @@ public function getClasses(): string
         return str_replace(
             acf_slugify($this->namespace),
             $this->slug,
-            $supports['class'] ?? "wp-block-{$this->slug}"
+            $supports['class'] ?? ''
         );
     }
 
@@ -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)