Extend Background Control Group, Problem Hooking into Color Control

[emeraldsama]

Description

I'm trying to add responsive controls to the color control of the background control group. I want to be able to set different background colors by device for columns and sections in the style tab of the editor.

I thought I could use a hook to add the 'responsive' => true parameter to the color control settings array in Group_Control_Background, but my code isn't working. I was trying to hook in and update the control for $fields['color'] in elementor/includes/controls/groups/background.php.

How do I add a control parameter when updating an existing control like this? Am I missing something to access the inner control of a group, or is there another way to go about this? Thanks for any suggestions.

// responsive background color control
add_action( 'elementor/element/background/before_section_end', function( $element, $args ) {
  // Get existing control
  $responsive_bg_control = \Elementor\Plugin::instance()->
controls_manager->get_control_from_stack( $element->get_unique_name(), 'background' );
  if ( is_wp_error( $responsive_bg_control ) ) {
    return;
  }
    // Add new setting parameter
  $responsive_bg_control['fields']['color'] = [ 'responsive' => true, ];
    // Update the control
  $element->update_control( 'background', $responsive_bg_control );
}, 10, 2 );

(I'm aware of PAFE/piotnet plugin for responsive background, but that adds a second background styles tab and is confusing for clients. I'd much rather hook into the existing background control if I can!)

Prerequisites

• [ x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [ x] The issue still exists against the latest stable version of Elementor.

[epoplive]

@emeraldsama

To add functionality to a control or group you can do something like this:

add_action( 'elementor/controls/controls_registered', function () {

    $controls_manager = \Elementor\Plugin::$instance->controls_manager;
    $controls_manager->add_group_control( 'background', new Responsive_Group_Background() );

});

In this example I'm replacing the normal background controls with my own class 'Responsive_Group_Background' that extends their regular background controls class and adds in an extra image field. Inside Responsive_Group_Background we do that by overloading the init_fields method:

public function init_fields()
    {
        $fields = parent::init_fields(); // TODO: Change the autogenerated stub
        $fields = $this->array_insert_after('image', $fields, 'image_super_xl_bg',
        [
            'label' => _x( 'Image (Super XL)', 'Background Control', 'elementor' ),
            'type' => Controls_Manager::MEDIA,
            'dynamic' => [
                'active' => true,
            ],
            'responsive' => true,
            'title' => _x( 'Background Image', 'Background Control', 'elementor' ),
            'selectors' => [
                '{{SELECTOR}}' => '@media only screen and (min-width: 1440px) { background-image: url("{{URL}}") !important; }',
            ],
            'render_type' => 'template',
            'condition' => [
                'background' => [ 'classic' ],
            ],
        ]);
        return $fields;
    }

In this case I'm adding a second background image for super large screens, but its the same idea where you would need to use whatever element type you wanted. You can look in the parent elementor class and copy whatever item type you want to get the format and modify it to what you need. If you want to do much more than that though you're going to have to extend and overload some of the core elementor classes to get access to the rendering functions which is significantly more complicated. I opened up this ticket (#11564) because the only way to do anything with section/column stuff requires some changes to do cleanly.

[shahmanish877]

Hello @epoplive, add_group_control( 'background') this worked, but is there a method to only extend for page setting and not for other widgets or sections?