Создайте динамический блок, используя стандартные атрибуты.

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Определение атрибутов по умолчанию
Шаг 2: Регистрация скрипта и стилей
Шаг 3: Регистрация блока в JavaScript
Заключение

Вопрос или проблема

Мой плагин использует функцию обратного вызова рендеринга на PHP для отображения содержимого блока. Блок хранит только атрибуты, которые отличаются от значений по умолчанию.

Есть ли способ передать эти значения по умолчанию в функцию обратного вызова рендеринга на PHP?

Я думал, что можно установить бессмысленное значение по умолчанию для одного из атрибутов, чтобы, если функция редактирования вызывается в первый раз, она могла переписать их и задать всем атрибутам значение по умолчанию.

Но это кажется мне довольно хакерским методом, есть ли лучший способ сделать это?

У меня также была такая проблема, и я решил её, определив атрибут внутри PHP и используя wp_localize_script для передачи массива.

Затем вы можете передать переменную в render_callback, используя use ($var).

Например:

$js = get_stylesheet_directory_uri() . '/assets/js';
$css= get_stylesheet_directory_uri() . '/assets/css';

$default_attributes = [
  'alignment' => [ 'type' => 'string', 'default' => 'left' ],
  'iconPosition' => [ 'type' => 'string', 'default' => 'left' ],

  'textColor' => [ 'type' => 'string', 'default' => 'var(--text)' ],
  'bgColor' => [ 'type' => 'string', 'default' => 'var(--textInvert)' ],
];


wp_register_script( 'my-block', $dist . '/my-block.js', [ 'wp-blocks', 'wp-dom' ] , null, true );
wp_register_style( 'my-block', $dist . '/my-block.css', [ 'wp-edit-blocks' ] );

wp_localize_script( 'my-block', 'myBlockLocalize', [ 'attributes' => $default_attributes ] );

register_block_type( 'my/block', [
  'editor_style' => 'my-block',
  'editor_script' => 'my-block',
  'render_callback' => function( $atts, $inner_blocks = null ) use ( $default_attributes ) {
      $default_values = array_map( function( $a ) {
        return $a['default'] ?? '';
      }, $default_attributes );

      $atts = wp_parse_args( $atts, $default_values );

      ob_start();
      // выводим HTML здесь, я думаю, что вы можете использовать get_template_parts()
      return ob_get_clean();
    }
] );

В вашем JS:

...

registerBlockType( 'my/block', {
  title: 'Мой Блок',
  icon: 'id',
  category: 'layout',
  example: {},
  attributes: myBlockLocalize.attributes,
  
  // ...

} );

...

Ответ или решение

Для создания динамического блока в WordPress с использованием пользовательских атрибутов и значений по умолчанию, вы можете использовать подход, который будет эффективным и безопасным. Давайте пошагово рассмотрим, как это сделать.

Шаг 1: Определение атрибутов по умолчанию

Сначала определите массив атрибутов с их значениями по умолчанию в PHP. Это позволит вам легко передавать эти значения в вашу рендер-коллбек функцию.

$default_attributes = [
    'alignment' => [ 'type' => 'string', 'default' => 'left' ],
    'iconPosition' => [ 'type' => 'string', 'default' => 'left' ],
    'textColor' => [ 'type' => 'string', 'default' => 'var(--text)' ],
    'bgColor' => [ 'type' => 'string', 'default' => 'var(--textInvert)' ],
];

Шаг 2: Регистрация скрипта и стилей

При регистрации вашего блока также зарегистрируйте необходимые скрипты и стили. Используйте wp_localize_script для передачи значений по умолчанию в JavaScript.

function my_block_init() {
    $js = get_stylesheet_directory_uri() . '/assets/js';
    $css = get_stylesheet_directory_uri() . '/assets/css';

    wp_register_script('my-block', $js . '/my-block.js', ['wp-blocks', 'wp-dom'], null, true);
    wp_register_style('my-block', $css . '/my-block.css', ['wp-edit-blocks']);

    // Передача данных в JavaScript
    wp_localize_script('my-block', 'myBlockLocalize', ['attributes' => $default_attributes]);

    register_block_type('my/block', [
        'editor_style' => 'my-block',
        'editor_script' => 'my-block',
        'render_callback' => function ($atts, $inner_blocks = null) use ($default_attributes) {
            // Установка значений по умолчанию
            $default_values = array_map(function ($a) {
                return $a['default'] ?? '';
            }, $default_attributes);

            $atts = wp_parse_args($atts, $default_values);

            ob_start();
            // Здесь выводите HTML в зависимости от ваших атрибутов
            // Например:
            ?>
            <div style="text-align: <?php echo esc_attr($atts['alignment']); ?>; color: <?php echo esc_attr($atts['textColor']); ?>; background-color: <?php echo esc_attr($atts['bgColor']); ?>;">
                <i class="<?php echo esc_attr($atts['iconPosition']); ?>"></i>
                <!-- Ваш контент -->
            </div>
            <?php
            return ob_get_clean();
        }
    ]);
}
add_action('init', 'my_block_init');

Шаг 3: Регистрация блока в JavaScript

Теперь вам нужно зарегистрировать блок в клиентском скрипте, используя атрибуты, которые вы передали с помощью wp_localize_script.

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my/block', {
    title: 'My Block',
    icon: 'id',
    category: 'layout',
    attributes: myBlockLocalize.attributes,
    edit: function (props) {
        // Ваш код для редактирования блока
    },
    save: function () {
        return null; // Динамический блок не сохраняет разметку, рендерится на сервере
    }
});

Заключение

С данным подходом вы можете управлять значениями атрибутов более надежно и избегать "хака" с установкой лживых значений по умолчанию. При каждом рендеринге блока на сервере вы будете уверены, что значения по умолчанию всегда будут выставлены корректно. Не забудьте тестировать ваш блок, чтобы убедиться в его правильной работе в редакторе WordPress и на фронтенде.