Requirements

Acorn + Sage Wordpress Theme

Installation

1. Install Gutengood package using composer

composer require yarovikov/gutengood

2. Place files from this repo in your Sage theme
3. Add following yarn dependencies for gutengood block components:

yarn add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @wordpress/icons immutability-helper tailwindcss

4. Run yarn build
5. Enqueue editor assets if you don't have this in your setup.php

add_action('enqueue_block_editor_assets', function (): void {
    bundle('editor')->enqueue();
}, 100);

Documentation

Components

• Text
• Textarea
• Toggle
• Select
• ColorPalette
• ColorPicker
• TimePicker (with date)
• Range
• RichText
• Image
• Link
• Message (just some title with text)
• Repeater (based on @dnd-kit)

Check php part block examples here https://github.com/yarovikov/gutengood-examples/tree/master/app/Editor/Blocks.

Block Options

Block Fields

Use Edit Button to see editable components in the block

You can use components for fields and options. But i don't recommend using RichText for options in the sidebar because of its floating panel.

Example of options:

public function options(): array
{
  $builder = new GutengoodBuilder();

  $builder
    ->addText('title', [
      'label' => __('Block title', 'sage'),
    ])
    ->addSelect('title_tag', [
      'label' => __('Title tag', 'sage'),
      'choices' => [
        [
          'label' => 'h1',
          'value' => 'h1',
        ],
        [
          'label' => 'h2',
          'value' => 'h2',
        ],
    ],
    'value' => 'h2', // default value
  ]);

  return $builder->build();
}

Also possible to add the same components in the repeater:

Make Options Sections

$builder
  ->addSection('Basic Options', [
      'open' => true,
  ])
  ->addRange('width', [
      'label' => __('Block width', 'sage'),
      'value' => 900,
  ])
  ->endSection()
  ->addSection('Colors')
  ->addColorPalette('bg_color', [
      'label' => __('BG Color', 'sage'),
      'colors' => [
          [
              'name' => 'black',
              'color' => '#000',
              'slug' => 'black',
          ],
      ],
  ])
  ->endSection();

Conditional logic show/hide components

Curently work only with Select and Toggle. Example:

$builder
  ->addToggle('is_video')
  ->addText('video_id')
  ->conditional('is_video', true); // video_id field will be displayed if the video toggle checkbox is checked

Block Data

Pass your data (fields and options) to the block view

public function getBlockData(array $attributes, string $content): array
{
  $data = [
    'items' => array_filter(array_map(fn(array $item): ?array => !empty($item['title']) ? $item : null, (array) ($attributes['items'] ?? []))),
    'width' => (int) ($attributes['width'] ?? 900),
  ];

  return [...parent::getBlockData($attributes, $content), ...$data];
}

Block Assets

Front-end block assets

public function getAssets(): array
{
  return [
    [
      'handle' => 'gallery',
      // optional: conditional logic
      'condition' => fn(array $block): bool => !empty($block['attrs']['is_slider']) || !empty($block['attrs']['is_lightbox']),
    ],
  ];
}

If you need additional external dependencies:

public function getAssets(): array
{
  return [
    [
      'handle' => 'payment-form',
      'dependencies' => ['cloudpayments-widget'], // before register this script in your theme
      'condition' => fn(array $block): bool => true === is_user_logged_in(), // optional
    ],
  ];
}

You don't need block js for register for the editor. But if needed you can set $editor_script like this

public bool $editor_script = true;

Then add your custom jsx. Example