Gutenberg Как разширить функционал стандартных блоков?
Есть необходимость расширить функционал уже готовых блоков в Gutenberg
. Возможно ли это сделать не пересоздавая кастомный блок?
К примеру - Есть блок Gallery Block
Можно ли элементам данного блока как-то просто добавить DimensionControl функционал? Что б можно было с админ панели добавлять padding|margin элементам блока не пересоздавая кастомный компонент?
Код который был разработан в соответствии с описанием со статьей. Файл /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');