• BlackStar

    (@blackstar1991)


    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)
  • Moderator threadi

    (@threadi)

    You should be able to see the error in the JavaScript console:

    lodash is not defined

    The solution would be to add lodash to the array for the dependencies of the script in wp_enqueue_script(). So:

    wp_enqueue_script('awp-gutenberg-filters', get_template_directory_uri() . '/assets/js/gutenberg-filters.js', ['wp-edit-post', 'lodash']);

    Furthermore, you try with

    add_action('init', 'add_image_margin_padding_controls');

    to register the image block a 2nd time. Of course, this does not work and is not necessary. I would recommend activating debugging for the development of your plugin, then you will notice something like this immediately: https://wordpress.org/documentation/article/debugging-in-wordpress/

Viewing 1 replies (of 1 total)

The topic ‘How to expand the functionality of the default Gutenberg blocks?’ is closed to new replies.