Quick guide to setting up a View Composer with a Blade View and a Gutenberg Block

Create the View Composer

web/app/themes/lark/app/View/Composers/TextComposer.php

<?php

namespace App\View\Composers;

use Roots\Acorn\View\Composer;
use Roots\Acorn\View\Composers\Concerns\AcfFields;

class TextComposer extends Composer
{

    use AcfFields;
    /**
     * List of views served by this composer.
     *
     * @var array
     */
    protected static $views = [
        'blocks.text'
    ];

    /**
     * Data to be passed to view before rendering.
     *
     * @return array
     */
    public function override()
    {
        $lark = get_fields();

        if(!$lark)
        {
            return [];
        }

        // dd($lark);

        return [
            'top_padding' => ( $lark['top_padding'] ?? '' ),
            'bottom_padding' => ( $lark['bottom_padding'] ?? '' ),
            'heading' => ( $lark['heading'] ?? '' ),
            'heading_alignment' => ( $lark['heading_alignment_'] ?? '' ),
            'paragraph_alignment' => ( $lark['paragraph_alignment'] ?? '' ),
            'text' => ( $lark['text_paragraph'] ?? '' ),
            'links_repeater' => ( $lark['links_repeater'] ?? false ),
        ];
    }
}

• We use view composers to isolate logic from the view. Data is fetched and manipulated here before going to the Blade view
• The $views array declares what blade view file(s) will have access to this
• $lark = get_fields(); will retrieve all ACF fields for the field group associated with this block
• The override() function will allow you to return data to the blade view in the format you wish
  • This gives you the opportunity to manipulate the data in this file before passing it into the blade view
  • We return all data needed as an array with meaningful keys

Blade View

web/app/themes/lark/resources/views/blocks/text.blade.php

<section class="lark-text-block {{ $top_padding }} {{ $bottom_padding }}">
  <div class="container mx-auto px-2 max-w-[1100px]">

    {{-- Heading --}}
    @if ( $heading )
      <h1 class="font-lexend-deca text-center text-teal text-7xl font-semibold lg:{{ $heading_alignment }} mb-3">{{ $heading }}</h1>
    @endif

    {{-- Paragraph --}}
    @if ( $text )
      <div class="@if( $links_repeater ) mb-3 @endif {{ $paragraph_alignment }} text-white">
        {!! $text !!}
      </div>
    @endif
    @if ( $links_repeater )
      <div class="flex flex-col md:flex-row flex-wrap gap-3 @if ( count($links_repeater) >= 3 ) justify-between @endif">
        @foreach ( $links_repeater as $link )
          @if ( $link['link'] )
            <div>
              <a href="{{ $link['link']['url'] }}" target="{{ $link['link']['target'] }}">
                <span>{{ $link['link']['title'] }}</span>
              </a>
            </div>
          @endif
        @endforeach
      </div>
    @endif
  </div>
</section>

• Here is our blade view
• The variables used here are assumed from the keys returned in the view composer, for example:
  • If we return heading in the view composer, it can be accessed as $heading in blade

Declaring a Gutenberg block

web/app/themes/lark/theme-config.php

    [
        'name'              => 'text',
        'title'             => __( 'Lark Text' ),
        'render_callback'   => '\App\acf_block_render_callback',
        'description'       => __( 'A Text Block'),
        'icon'              => 'editor-alignleft'
    ],

• Within the lark_blocks_enabled key, you can declare Gutenberg that you have created from the above steps
• name is the block reference
• title is the friendly name you'll see in WordPress
• render_callback will always remain as '\App\acf_block_render_callback'
• description is used in WordPress but can be quite simple
• icon is the visual used when picking a block in Gutenberg

ACF block

This stage can only be completed when you have declared the Gutenberg block. This is because the 'location' of this ACF field group will be against the 'Block' itself: https://gyazo.com/ea5d10c46565a7e57751e79b0b962e0e

Summary

• View Composer: Handles logic and passes data to Blade view
• Blade View: Displays the content based on data received
• Gutenberg Block: Needs to be declared for everything to work
• ACF Block: Final stage to link ACF fields to Gutenberg block