Add inline editing for blocks (ACF 6.7+)

[dsturm]

With the release of ACF (Pro) 6.7, inline editing is now supported. To enable this feature for blocks, you need to add “autoInlineEditing“: true to the block.json file.

This PR introduces a new configuration option to enable or disable inline editing.

Furthermore, we couldn’t explicitly set the blockVersion through configuration. This issue has been resolved as well.

[aanndryyyy]

@dsturm This is maybe outside of the scope of this PR, but how would you implement the new filter acf/blocks/top_toolbar_fields in Block.php? Adding it to the constructor of each block manually?

[dsturm]

Hej @aanndryyyy,

good question! I'm not 100% familiar yet with the inline editing feature and still need to find out, what works best.

But currently my first thought on this, would be adding a new array property like topToolbarFields or inlineFields and add the hook in the register callback for the block.

Or should we extend the Log1x\AcfComposer\Builder\FieldBuilder class (since stoutlogic/acf-builder doesn´t support this) to support something like:

$blockFields
    ->addText('label')
    ->inline(); // Or `->addToTopbar()`

[Log1x]

I'm open to extending FieldBuilder or even a PR to ACF Builder if you think it should be done there. I haven't had time to mess with inline editing yet, really appreciate the push here. 🙌

[dsturm]

Hej @Log1x ,

unfortunately I'm currently short on free time - but I'll be gladly working on this as soon as possible.

[aanndryyyy]

@Log1x / @dsturm I propose that this PR to be merged, so it's possible to set how good that "auto" mode is. I'll try to find the time to do a PR for the block header level topbar/inline functionality. Already got simple blade components that allow manual adding of text and toolbar inline editing and it's great.

[enriquo]

@aanndryyyy @Log1x Any update on this one?

[mike-sheppard]

Finally got around to testing ACF inline editing + this PR def. helps fix the autoInlineEditing issue @dsturm mentions + blockVersion: 3 is all that's needed, example block for testing below.

The only fields with smooth inline editing UX are text & textarea IMO. wysiwig is glitchy (we avoid with ACF Blocks anyways) + images do not work at all (backbone js error in the console - guessing ACF/iframe issue).

Not sure I'd recommend for use on production sites yet, unless anyone has any pointers to make the editing UX nicer? Anyone had better luck with images?

# app/Blocks/InlineDemo.php

<?php

namespace App\Blocks;

use Log1x\AcfComposer\Block;
use Log1x\AcfComposer\Builder;

class InlineDemo extends Block {
    public $name               = 'Inline Demo';
    public $description        = 'Demo block with inline-editable fields';
    public $icon               = 'edit';
    public $blockVersion       = 3;
    public $autoInlineEditing  = true;
    public $supports           = [
        'multiple' => true,
        'jsx'      => false,
        'color'    => ['text' => true, 'background' => true],
    ];

    public function with(): array {
        return [
            'eyebrow'     => get_field('eyebrow') ?? '',
            'heading'     => get_field('heading') ?? '',
            'description' => get_field('description') ?? '',
            'wysiwyg'     => get_field('wysiwyg') ?? '',
            'image'       => get_field('image'),
            'bg_color'    => get_field('bg_color') ?? '#eee',
            'link'        => get_field('link'),
        ];
    }

    public function fields(): array|Builder {
        $block = Builder::make('inline_demo');

        $block->addText('eyebrow', ['placeholder' => 'Category or label...'])
            ->addText('heading', ['placeholder' => 'Enter heading...'])
            ->addTextarea('description', ['placeholder' => 'Enter description...', 'rows' => 3])
            ->addWysiwyg('wysiwyg', ['label' => 'Content', 'tabs' => 'visual', 'toolbar' => 'basic', 'media_upload' => false])
            ->addImage('image', ['return_format' => 'url', 'preview_size' => 'medium'])
            ->addColorPicker('bg_color', ['label' => 'Image Background', 'default_value' => '#eee'])
            ->addLink('link');

        return $block->build();
    }
}

# resources/blocks/inline-demo/inline-demo.blade.php

<section class="inline-demo">
  <div class="inline-demo__grid">

    <div>
      <div class="inline-demo__eyebrow" {!! acf_inline_text_editing_attrs('eyebrow') !!}>
        {{ $eyebrow }}
      </div>

      <h2 class="inline-demo__heading" {!! acf_inline_text_editing_attrs('heading') !!}>
        {{ $heading }}
      </h2>

      <div class="inline-demo__description" {!! acf_inline_text_editing_attrs('description') !!}>
        {{ $description }}
      </div>

      <div class="inline-demo__wysiwyg" {!! acf_inline_toolbar_editing_attrs([['field_name' => 'wysiwyg']]) !!}>
        {!! $wysiwyg !!}
      </div>

      @notempty($link)
        <a class="inline-demo__link" href="{{ $link['url'] ?? '#' }}"
          {!! acf_inline_toolbar_editing_attrs([['field_name' => 'link']]) !!}>
          {{ $link['title'] ?? 'Learn More' }}
        </a>
      @else
        <div class="inline-demo__link--empty" {!! acf_inline_toolbar_editing_attrs([['field_name' => 'link']]) !!}>
          Add a link...
        </div>
      @endnotempty
    </div>

    <div>
      <div class="inline-demo__image-wrap" style="background-color: {{ $bg_color }};">
        @notempty($image)
          <div class="inline-demo__image" {!! acf_inline_toolbar_editing_attrs([['field_name' => 'image']]) !!}>
            <img src="{{ $image }}" alt="">
          </div>
        @else
          <div class="inline-demo__image--empty" {!! acf_inline_toolbar_editing_attrs([['field_name' => 'image']]) !!}>
            Click to add image
          </div>
        @endnotempty
      </div>

      <div class="inline-demo__color-picker" {!! acf_inline_toolbar_editing_attrs([['field_name' => 'bg_color']]) !!}>
        <span class="inline-demo__color-swatch" style="background: {{ $bg_color }};"></span>
        <span class="inline-demo__color-label">Image background</span>
      </div>
    </div>
  </div>
</section>

<style>
  .inline-demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; }
  .inline-demo__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin: 0 0 0.5rem; min-height: 1.2em; }
  .inline-demo__heading { font-size: 2rem; margin: 0 0 1rem; min-height: 1.2em; }
  .inline-demo__description { line-height: 1.6; margin: 0 0 1.5rem; min-height: 1.5em; }
  .inline-demo__wysiwyg { line-height: 1.6; margin: 0 0 1.5rem; min-height: 2em; }
  .inline-demo__link { display: inline-block; padding: 0.75rem 1.5rem; background: #333; color: #fff; text-decoration: none; border-radius: 4px; }
  .inline-demo__link--empty { display: inline-block; padding: 0.75rem 1.5rem; background: #eee; color: #999; border-radius: 4px; }
  .inline-demo__image-wrap { border-radius: 8px; padding: 1rem; }
  .inline-demo__image img { width: 100%; height: auto; border-radius: 8px; }
  .inline-demo__image--empty { width: 100%; aspect-ratio: 16/9; background: rgba(0,0,0,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; }
  .inline-demo__color-picker { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
  .inline-demo__color-swatch { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #ccc; }
  .inline-demo__color-label { font-size: 0.75rem; color: #666; }
</style>