How to expand the functionality of the default Gutenberg blocks?
-
I read this thread about adding new Gutenberg block settings and I need the same for Image block.
I want to add DimensionControl sttings for Image block. How I can to do it ? Is it possible ?
I created the file gutenberg-filters.js as in the example.
wp.hooks.addFilter( 'blocks.registerBlockType', 'awp-gutenberg-filters/image-margin-padding', function(settings, name) { if (name === 'core/image') { settings.supports = lodash.assign({}, settings.supports, { spacings: true, // Enable spacing controls }); return settings; } return settings; } );connected it to the file functions.php
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_image_margin_padding_controls() { register_block_type( 'core/image', array( 'attributes' => array( 'margin' => array( 'type' => 'string', 'default' => '', ), 'padding' => array( 'type' => 'string', 'default' => '', ), ), 'render_callback' => 'render_image_with_margin_padding', 'supports' => array( 'align' => true, 'spacings' => true, ), ) ); } function render_image_with_margin_padding($attributes, $content) { $margin = !empty($attributes['margin']) ? 'margin:' . $attributes['margin'] . ';' : ''; $padding = !empty($attributes['padding']) ? 'padding:' . $attributes['padding'] . ';' : ''; $output = '<div class="custom-image" style="' . $margin . $padding . '">'; $output .= do_shortcode('[image]'); $output .= '</div>'; return $output; } add_action('init', 'add_image_margin_padding_controls');But it dosen’t work. What is wrong ? I don’t see any problems in console.
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
The topic ‘How to expand the functionality of the default Gutenberg blocks?’ is closed to new replies.