Gutenberg Как разширить функционал стандартных блоков?

Есть необходимость расширить функционал уже готовых блоков в Gutenberg. Возможно ли это сделать не пересоздавая кастомный блок?

К примеру - Есть блок Gallery Block

Можно ли элементам данного блока как-то просто добавить DimensionControl функционал? Что б можно было с админ панели добавлять padding|margin элементам блока не пересоздавая кастомный компонент?

DimensionControl

Код который был разработан в соответствии с описанием со статьей. Файл /assets/js/gutenberg-filters.js

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'awp-gutenberg-filters/gallery-margin-padding',
    function(settings, name) {
        if (name === 'core/gallery') {
            return lodash.assign({}, settings, {
                attributes: lodash.assign({}, settings.attributes, {
                    margin: {
                        type: 'string',
                        default: '',
                    },
                    padding: {
                        type: 'string',
                        default: '',
                    },
                }),
            });
        }
        return settings;
    }
);

Контроллер и подключение в functions.php

/// TEST
add_action('enqueue_block_editor_assets', function() {
    wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri() . '/assets/js/gutenberg-filters.js', ['wp-edit-post']);
});

function add_gallery_margin_padding_controls() {
    register_block_type(
        'core/gallery',
        array(
            'attributes' => array(
                'margin' => array(
                    'type' => 'string',
                    'default' => '',
                ),
                'padding' => array(
                    'type' => 'string',
                    'default' => '',
                ),
            ),
            'render_callback' => 'render_gallery_with_margin_padding',
        )
    );
}

function render_gallery_with_margin_padding($attributes, $content) {
    $margin = !empty($attributes['margin']) ? 'margin:' . $attributes['margin'] . ';' : '';
    $padding = !empty($attributes['padding']) ? 'padding:' . $attributes['padding'] . ';' : '';

    $output = '<div class="custom-gallery" style="' . $margin . $padding . '">';
    $output .= do_shortcode('[gallery]');
    $output .= '</div>';

    return $output;
}

add_action('init', 'add_gallery_margin_padding_controls');


Ответы (0 шт):