Issue with nesting block views in component

nathangross commented 1 year ago

I've created a component acf-block.blade.php that has some very basic styles applied that I'd like on all my ACF blocks.

<div class="m-2 flex border p-2">
    {{ $slot }}
</div>

Nesting the blocks (/views/blocks) inside components seems to work fine until I tried to utilize the $attributes bag. I wanted to be able to add or override some of these classes so I tried to utilize $attributes->merge() but when I do so, I get the following error:

Fatal error: Uncaught TypeError: trim(): Argument #1 ($string) must be of type string, App\Blocks\Button given in /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php:398 Stack trace: #0 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php(398): trim(Object(App\Blocks\Button)) #1 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php(306): Illuminate\View\ComponentAttributeBag->__toString() #2 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/support/helpers.php(115): Illuminate\View\ComponentAttributeBag->toHtml() #3 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/cache/acorn/framework/views/7a9260bdb1da6927ac62137ab306a6d48983d5ce.php(1): e(Object(Illuminate\View\ComponentAttributeBag)) #4 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(107): require('/Users/nathan/L...') #5 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(108): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}() #6 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/PhpEngine.php(58): Illuminate\Filesystem\Filesystem->getRequire('/Users/nathan/L...', Array) #7 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/CompilerEngine.php(61): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/nathan/L...', Array) #8 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(139): Illuminate\View\Engines\CompilerEngine->get('/Users/nathan/L...', Array) #9 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(122): Illuminate\View\View->getContents() #10 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(91): Illuminate\View\View->renderContents() #11 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Concerns/ManagesComponents.php(104): Illuminate\View\View->render() #12 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/cache/acorn/framework/views/01283bb86155b5c3c95c04be4c8860e715208f4e.php(18): Illuminate\View\Factory->renderComponent() #13 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(107): require('/Users/nathan/L...') #14 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(108): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}() #15 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/PhpEngine.php(58): Illuminate\Filesystem\Filesystem->getRequire('/Users/nathan/L...', Array) #16 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/CompilerEngine.php(61): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/nathan/L...', Array) #17 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(139): Illuminate\View\Engines\CompilerEngine->get('/Users/nathan/L...', Array) #18 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(122): Illuminate\View\View->getContents() #19 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(91): Illuminate\View\View->renderContents() #20 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Concerns/InteractsWithBlade.php(33): Illuminate\View\View->render() #21 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(325): Log1x\AcfComposer\Block->view('blocks.button', Array) #22 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(265): Log1x\AcfComposer\Block->render(Array, '', true, 85395) #23 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(641): Log1x\AcfComposer\Block->Log1x\AcfComposer\{closure}(Array, '', true, 85395, Object(WP_Block), Array) #24 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(568): acf_render_block(Array, '', true, 85395, Object(WP_Block), Array) #25 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(501): acf_rendered_block(Array, '', true, 85395, Object(WP_Block)) #26 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(255): acf_render_block_callback(Array, '', Object(WP_Block)) #27 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(241): WP_Block->render() #28 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(902): WP_Block->render() #29 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(940): render_block(Array) #30 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-hook.php(307): do_blocks('<!-- wp:acf/car...') #31 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/plugin.php(191): WP_Hook->apply_filters('<!-- wp:acf/car...', Array) #32 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(1811): apply_filters('the_content', '<!-- wp:acf/car...') #33 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(560): WP_REST_Posts_Controller->prepare_item_for_response(Object(WP_Post), Object(WP_REST_Request)) #34 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(1143): WP_REST_Posts_Controller->get_item(Object(WP_REST_Request)) #35 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(990): WP_REST_Server->respond_to_request(Object(WP_REST_Request), '/wp/v2/pages/(?...', Array, NULL) #36 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(519): WP_REST_Server->dispatch(Object(WP_REST_Request)) #37 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(2868): rest_do_request(Object(WP_REST_Request)) #38 [internal function]: rest_preload_api_request(Array, '/wp/v2/pages/85...') #39 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/block-editor.php(601): array_reduce(Array, 'rest_preload_ap...', Array) #40 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/edit-form-blocks.php(75): block_editor_rest_api_preload(Array, Object(WP_Block_Editor_Context)) #41 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/post.php(187): require('/Users/nathan/L...') #42 {main} Next Illuminate\View\ViewException: trim(): Argument #1 ($string) must be of type string, App\Blocks\Button given (View: /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/resources/views/components/acf-block.blade.php) in /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php:398 Stack trace: #0 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/PhpEngine.php(60): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(TypeError), 3) #1 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/CompilerEngine.php(61): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/nathan/L...', Array) #2 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(139): Illuminate\View\Engines\CompilerEngine->get('/Users/nathan/L...', Array) #3 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(122): Illuminate\View\View->getContents() #4 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(91): Illuminate\View\View->renderContents() #5 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Concerns/ManagesComponents.php(104): Illuminate\View\View->render() #6 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/cache/acorn/framework/views/01283bb86155b5c3c95c04be4c8860e715208f4e.php(18): Illuminate\View\Factory->renderComponent() #7 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(107): require('/Users/nathan/L...') #8 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/filesystem/Filesystem.php(108): Illuminate\Filesystem\Filesystem::Illuminate\Filesystem\{closure}() #9 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/PhpEngine.php(58): Illuminate\Filesystem\Filesystem->getRequire('/Users/nathan/L...', Array) #10 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/CompilerEngine.php(61): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/nathan/L...', Array) #11 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(139): Illuminate\View\Engines\CompilerEngine->get('/Users/nathan/L...', Array) #12 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(122): Illuminate\View\View->getContents() #13 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(91): Illuminate\View\View->renderContents() #14 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Concerns/InteractsWithBlade.php(33): Illuminate\View\View->render() #15 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(325): Log1x\AcfComposer\Block->view('blocks.button', Array) #16 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(265): Log1x\AcfComposer\Block->render(Array, '', true, 85395) #17 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(641): Log1x\AcfComposer\Block->Log1x\AcfComposer\{closure}(Array, '', true, 85395, Object(WP_Block), Array) #18 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(568): acf_render_block(Array, '', true, 85395, Object(WP_Block), Array) #19 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(501): acf_rendered_block(Array, '', true, 85395, Object(WP_Block)) #20 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(255): acf_render_block_callback(Array, '', Object(WP_Block)) #21 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(241): WP_Block->render() #22 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(902): WP_Block->render() #23 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(940): render_block(Array) #24 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-hook.php(307): do_blocks('<!-- wp:acf/car...') #25 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/plugin.php(191): WP_Hook->apply_filters('<!-- wp:acf/car...', Array) #26 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(1811): apply_filters('the_content', '<!-- wp:acf/car...') #27 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(560): WP_REST_Posts_Controller->prepare_item_for_response(Object(WP_Post), Object(WP_REST_Request)) #28 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(1143): WP_REST_Posts_Controller->get_item(Object(WP_REST_Request)) #29 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(990): WP_REST_Server->respond_to_request(Object(WP_REST_Request), '/wp/v2/pages/(?...', Array, NULL) #30 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(519): WP_REST_Server->dispatch(Object(WP_REST_Request)) #31 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(2868): rest_do_request(Object(WP_REST_Request)) #32 [internal function]: rest_preload_api_request(Array, '/wp/v2/pages/85...') #33 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/block-editor.php(601): array_reduce(Array, 'rest_preload_ap...', Array) #34 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/edit-form-blocks.php(75): block_editor_rest_api_preload(Array, Object(WP_Block_Editor_Context)) #35 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/post.php(187): require('/Users/nathan/L...') #36 {main} Next Illuminate\View\ViewException: trim(): Argument #1 ($string) must be of type string, App\Blocks\Button given (View: /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/resources/views/components/acf-block.blade.php) (View: /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/resources/views/components/acf-block.blade.php) in /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php:398 Stack trace: #0 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/PhpEngine.php(60): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(Illuminate\View\ViewException), 2) #1 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/Engines/CompilerEngine.php(61): Illuminate\View\Engines\PhpEngine->evaluatePath('/Users/nathan/L...', Array) #2 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(139): Illuminate\View\Engines\CompilerEngine->get('/Users/nathan/L...', Array) #3 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(122): Illuminate\View\View->getContents() #4 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/View.php(91): Illuminate\View\View->renderContents() #5 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Concerns/InteractsWithBlade.php(33): Illuminate\View\View->render() #6 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(325): Log1x\AcfComposer\Block->view('blocks.button', Array) #7 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/themes/berea-sage/vendor/log1x/acf-composer/src/Block.php(265): Log1x\AcfComposer\Block->render(Array, '', true, 85395) #8 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(641): Log1x\AcfComposer\Block->Log1x\AcfComposer\{closure}(Array, '', true, 85395, Object(WP_Block), Array) #9 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(568): acf_render_block(Array, '', true, 85395, Object(WP_Block), Array) #10 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/advanced-custom-fields-pro/pro/blocks.php(501): acf_rendered_block(Array, '', true, 85395, Object(WP_Block)) #11 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(255): acf_render_block_callback(Array, '', Object(WP_Block)) #12 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-block.php(241): WP_Block->render() #13 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(902): WP_Block->render() #14 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/blocks.php(940): render_block(Array) #15 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/class-wp-hook.php(307): do_blocks('<!-- wp:acf/car...') #16 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/plugin.php(191): WP_Hook->apply_filters('<!-- wp:acf/car...', Array) #17 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(1811): apply_filters('the_content', '<!-- wp:acf/car...') #18 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php(560): WP_REST_Posts_Controller->prepare_item_for_response(Object(WP_Post), Object(WP_REST_Request)) #19 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(1143): WP_REST_Posts_Controller->get_item(Object(WP_REST_Request)) #20 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api/class-wp-rest-server.php(990): WP_REST_Server->respond_to_request(Object(WP_REST_Request), '/wp/v2/pages/(?...', Array, NULL) #21 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(519): WP_REST_Server->dispatch(Object(WP_REST_Request)) #22 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/rest-api.php(2868): rest_do_request(Object(WP_REST_Request)) #23 [internal function]: rest_preload_api_request(Array, '/wp/v2/pages/85...') #24 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-includes/block-editor.php(601): array_reduce(Array, 'rest_preload_ap...', Array) #25 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/edit-form-blocks.php(75): block_editor_rest_api_preload(Array, Object(WP_Block_Editor_Context)) #26 /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-admin/post.php(187): require('/Users/nathan/L...') #27 {main} thrown in /Users/nathan/Local Sites/bereafaustproduction/app/public/wp-content/plugins/acorn/vendor/illuminate/view/ComponentAttributeBag.php on line 398

Is it possible to nest these ACF block views inside normal laravel components?

Log1x commented 1 year ago

What does Button.php and it's view look like?

My workflow is typically building out blocks as components (so they can be used in the theme its self if needed) and then using the component inside of my block view.

This does mean I have to maintain both the block and component, but generally 99% of the logic will live inside of the component and my block logic is just pulling the fields and handling the data to then pass to the component inside of the block view.

Hope that makes sense.

nathangross commented 1 year ago

Yep, that makes a lot of sense—especially for smaller, reusable bits like buttons, avatars, etc. I'll likely adopt that as I go. I'm already using the Field Partials so I can reuse field groups (one of the main reasons I came across your acf-composer package!! 😀)

In this case, I was getting the error when working on a Card block. I'll paste that code below but it seems like something else is going on.

To perhaps clarify a bit, I've got a blade component (used as a parent wrapper for all my block views) views/components/acf-block.blade.php that currently looks like:

<div class="m-2 flex w-full border p-2">
    {{ $slot }}
</div>

Then in a card view block views/blocks/card.blade.php something like:

<x-acf-block>
    <div class="flex max-w-2xl flex-col">
        @if ($image)
            <img src={{ $image['url'] }} alt="{{ $image['alt'] }}">
        @endif
        <div class="text-label-light-primary flex w-full flex-col space-y-4">
            @if ($title)
                <div class="font-serif text-2xl md:text-4xl">
                    {{ $title }}
                </div>
            @endif
            <InnerBlocks />
        </div>
    </div>
</x-acf-block>

On my card block, I'd like to add a new class max-w-lg to the parent acf-block component so I update it to utilize the $attributes->merge() function (I use this all the time in laravel projects)

<div {{ $attributes->merge(['class' => 'm-2 flex w-full border p-2']) }}>
    {{ $slot }}
</div>

and that's what causes the error pasted above. I feel like I'm missing something very obvious 😅

My current Card.php file

<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use StoutLogic\AcfBuilder\FieldsBuilder;

class Card extends Block
{
    /**
     * The block name.
     *
     * @var string
     */
    public $name = 'Card';

    /**
     * The block description.
     *
     * @var string
     */
    public $description = 'A simple Card block.';

    /**
     * The block category.
     *
     * @var string
     */
    public $category = 'berea-next';

    /**
     * The block icon.
     *
     * @var string|array
     */
    public $icon = 'editor-ul';

    /**
     * The block keywords.
     *
     * @var array
     */
    public $keywords = [];

    /**
     * The block post type allow list.
     *
     * @var array
     */
    public $post_types = [];

    /**
     * The parent block type allow list.
     *
     * @var array
     */
    public $parent = [];

    /**
     * The default block mode.
     *
     * @var string
     */
    public $mode = 'preview';

    /**
     * The default block alignment.
     *
     * @var string
     */
    public $align = '';

    /**
     * The default block text alignment.
     *
     * @var string
     */
    public $align_text = '';

    /**
     * The default block content alignment.
     *
     * @var string
     */
    public $align_content = '';

    /**
     * The supported block features.
     *
     * @var array
     */
    public $supports = [
        'align' => true,
        'align_text' => false,
        'align_content' => false,
        'full_height' => false,
        'anchor' => false,
        'mode' => false,
        'multiple' => true,
        'jsx' => true,
    ];

    /**
     * The block styles.
     *
     * @var array
     */
    public $styles = [];

    /**
     * The block preview example data.
     *
     * @var array
     */
    public $example = [];

    /**
     * Data to be passed to the block before rendering.
     *
     * @return array
     */
    public function with()
    {
        return [
            'title' => $this->title(),
            'image' => $this->image(),
        ];
    }

    /**
     * The block field group.
     *
     * @return array
     */
    public function fields()
    {
        $nextCard = new FieldsBuilder('next_card');

        $nextCard

            ->addText('title')
            ->addImage('image')
            ->addSelect('layout', [
                'choices' => [
                    'horizontal' => 'Horizontal',
                    'vertical' => 'Vertical',
                ],
                'default_value' => 'default',
            ]);

        return $nextCard->build();
    }

    /**
     * Return the title field.
     *
     * @return array
     */
    public function title()
    {
        return get_field('title') ?: "Title goes here";
    }

    /**
     * Return the image field.
     *
     * @return array
     */
    public function image()
    {
        return get_field('image');
    }

    /**
     * Assets to be enqueued when rendering the block.
     *
     * @return void
     */
    public function enqueue()
    {
        //
    }
}

nathangross commented 1 year ago

Even if I just use {{ $attributes }} it give me that error

<div {{ $attributes }}>
    {{ $slot }}
</div>

Log1x commented 1 year ago

That's really strange. Ideally what you want to do would work. I'll try to look into it and see if I can figure something out.

Log1x commented 1 year ago

Weird this is working for me.

# app/View/Components/AcfBlock.php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class AcfBlock extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.acf-block');
    }
}

# views/components/acf-block.blade.php
<div {{ $attributes->merge(['class' => 'test']) }}>
  {!! $slot !!}
</div>

# views/blocks/google-map.blade.php
<x-acf-block>
  <div class="{{ $block->classes }} relative my-8 last:mb-0">
    <iframe
      class="w-full border shadow-sm h-96 {{ $block->preview ? 'pointer-events-none' : '' }}"
      src="{{ $uri }}"
    ></iframe>
  </div>
</x-acf-block>

Screenshot

nathangross commented 1 year ago

That is strange. At first, I thought it was because I was using an anonymous component—but still getting the same error when using a class component.

Also strange that it says I'm passing a Button Block. If I {{ dd($attributes) }} on the acf-block component, sure enough it shows a Button

I must have a typo or missing semicolon somewhere

Log1x commented 1 year ago

I don't see any typo's in the example you showed. Very strange.

The only difference I can really spot is I used {!! $slot !!}

Log1x commented 1 year ago

what if you remove <InnerBlocks />? I didn't test on a block that had it. I don't really know why that'd be an issue but worth a shot I guess.

nathangross commented 1 year ago

Ugh 🤦‍♂️ I figured it out. I was passing the whole block object :block="$block" on my button view block. Error messages are actually pretty spot on 😂

I don't exactly remember what I was doing with that but it was when I was playing with another sage acf package.

Thanks for your help and sorry for dragging you along for my error!

nathangross commented 1 year ago

My workflow is typically building out blocks as components (so they can be used in the theme its self if needed) and then using the component inside of my block view.

This does mean I have to maintain both the block and component, but generally 99% of the logic will live inside of the component and my block logic is just pulling the fields and handling the data to then pass to the component inside of the block view.

I'm curious if you could provide any additional insights to how you handle this. In my case I've got a button block, and a button-stack block. The stack is setup to just have a repeatable button block with some wrapper layout styles.

So, like you mentioned, I'd like to maintain just one button component and utilize it in both the button block and the button stack block. I'm finding it tricky with how to handle the data though.

In the single button, I have direct access to the label like $label but in the button stack, I'm in a loop ($buttons as $button) so I access it through $button['label']. How do you typically handle this in a single component? Is there a way to just pass the whole button as an object? So it could just be a consistent $button->label whether it's in a single button or a loop of buttons?

Does that make sense?

Log1x / acf-composer

Issue with nesting block views in component #129