if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
* Elementor group control base.
* An abstract class for creating new group controls in the panel.
abstract class Group_Control_Base implements Group_Control_Interface {
* Holds all the group control arguments.
* @var array Group control arguments.
* Holds all the group control options.
* Currently supports only the popover options.
* @var array Group control options.
* Retrieve group control options. If options are not set, it will initialize default options.
* @param array $option Optional. Single option.
* @return mixed Group control options. If option parameter was not specified, it will
* return an array of all the options. If single option specified, it will
* return the option value or `null` if option does not exists.
final public function get_options( $option = null ) {
if ( null === $this->options ) {
if ( isset( $this->options[ $option ] ) ) {
return $this->options[ $option ];
* Add new controls to stack.
* Register multiple controls to allow the user to set/update data.
* @param Controls_Stack $element The element stack.
* @param array $user_args The control arguments defined by the user.
* @param array $options Optional. The element options. Default is
final public function add_controls( Controls_Stack $element, array $user_args, array $options = [] ) {
$this->init_args( $user_args );
// Filter which controls to display
$filtered_fields = $this->filter_fields();
$filtered_fields = $this->prepare_fields( $filtered_fields );
reset( $filtered_fields );
if ( isset( $this->args['separator'] ) ) {
$filtered_fields[ key( $filtered_fields ) ]['separator'] = $this->args['separator'];
if ( ! empty( $options['position'] ) ) {
$element->start_injection( $options['position'] );
unset( $options['position'] );
if ( $this->get_options( 'popover' ) ) {
$this->start_popover( $element );
foreach ( $filtered_fields as $field_id => $field_args ) {
// Add the global group args to the control
$field_args = $this->add_group_args_to_field( $field_id, $field_args );
$id = $this->get_controls_prefix() . $field_id;
if ( ! empty( $field_args['responsive'] ) ) {
unset( $field_args['responsive'] );
$element->add_responsive_control( $id, $field_args, $options );
$element->add_control( $id, $field_args, $options );
if ( $this->get_options( 'popover' ) ) {
$element->end_injection();
* Retrieve group control arguments.
* @return array Group control arguments.
final public function get_args() {
* Retrieve group control fields.
* @return array Control fields.
final public function get_fields() {
if ( null === static::$fields ) {
static::$fields = $this->init_fields();
* Retrieve the prefix of the group control, which is `{{ControlName}}_`.
* @return string Control prefix.
public function get_controls_prefix() {
return $this->args['name'] . '_';
* Get group control classes.
* Retrieve the classes of the group control.
* @return string Group control classes.
public function get_base_group_classes() {
return 'elementor-group-control-' . static::get_type() . ' elementor-group-control';
* Initialize group control fields.
abstract protected function init_fields();
* Retrieve the default options of the group control. Used to return the
* default options while initializing the group control.
* @return array Default group control options.
protected function get_default_options() {
* Get child default arguments.
* Retrieve the default arguments for all the child controls for a specific group
* @return array Default arguments for all the child controls.
protected function get_child_default_args() {
* Filter which controls to display, using `include`, `exclude` and the
* @return array Control fields.
protected function filter_fields() {
$args = $this->get_args();
$fields = $this->get_fields();
if ( ! empty( $args['include'] ) ) {
$fields = array_intersect_key( $fields, array_flip( $args['include'] ) );
if ( ! empty( $args['exclude'] ) ) {
$fields = array_diff_key( $fields, array_flip( $args['exclude'] ) );
* Add group arguments to field.
* Register field arguments to group control.
* @param string $control_id Group control id.
* @param array $field_args Group control field arguments.
protected function add_group_args_to_field( $control_id, $field_args ) {
$args = $this->get_args();
if ( ! empty( $args['tab'] ) ) {
$field_args['tab'] = $args['tab'];
if ( ! empty( $args['section'] ) ) {
$field_args['section'] = $args['section'];
$field_args['classes'] = $this->get_base_group_classes() . ' elementor-group-control-' . $control_id;
foreach ( [ 'condition', 'conditions' ] as $condition_type ) {
if ( ! empty( $args[ $condition_type ] ) ) {
if ( empty( $field_args[ $condition_type ] ) ) {
$field_args[ $condition_type ] = [];
$field_args[ $condition_type ] += $args[ $condition_type ];
* Process group control fields before adding them to `add_control()`.
* @param array $fields Group control fields.
* @return array Processed fields.
protected function prepare_fields( $fields ) {
$popover_options = $this->get_options( 'popover' );
$popover_name = ! $popover_options ? null : $popover_options['starter_name'];
foreach ( $fields as $field_key => &$field ) {
$field['condition'][ $popover_name . '!' ] = '';
if ( isset( $this->args['fields_options']['__all'] ) ) {
$field = array_merge( $field, $this->args['fields_options']['__all'] );
if ( isset( $this->args['fields_options'][ $field_key ] ) ) {
$field = array_merge( $field, $this->args['fields_options'][ $field_key ] );
if ( ! empty( $field['condition'] ) ) {
$field = $this->add_condition_prefix( $field );
if ( ! empty( $field['conditions'] ) ) {
$field['conditions'] = $this->add_conditions_prefix( $field['conditions'] );
if ( ! empty( $field['selectors'] ) ) {
$field['selectors'] = $this->handle_selectors( $field['selectors'] );
if ( ! empty( $field['device_args'] ) ) {
foreach ( $field['device_args'] as $device => $device_arg ) {
if ( ! empty( $field['device_args'][ $device ]['condition'] ) ) {
$field['device_args'][ $device ] = $this->add_condition_prefix( $field['device_args'][ $device ] );
if ( ! empty( $field['device_args'][ $device ]['conditions'] ) ) {
$field['device_args'][ $device ]['conditions'] = $this->add_conditions_prefix( $field['device_args'][ $device ]['conditions'] );
if ( ! empty( $device_arg['selectors'] ) ) {
$field['device_args'][ $device ]['selectors'] = $this->handle_selectors( $device_arg['selectors'] );
* Initializing group control options.
private function init_options() {
'starter_name' => 'popover_toggle',
'starter_value' => 'custom',
$this->options = array_replace_recursive( $default_options, $this->get_default_options() );
* Initializing group control base class.
* @param array $args Group control settings value.
protected function init_args( $args ) {
$this->args = array_merge( $this->get_default_args(), $this->get_child_default_args(), $args );
if ( isset( $this->args['scheme'] ) ) {
$this->args['global']['default'] = Plugin::$instance->kits_manager->convert_scheme_to_global( $this->args['scheme'] );
* Retrieve the default arguments of the group control. Used to return the
* default arguments while initializing the group control.
* @return array Control default arguments.
private function get_default_args() {
'selector' => '{{WRAPPER}}',
* Used to add the group prefix to controls with conditions, to
* distinguish them from other controls with the same name.
* This way Elementor can apply condition logic to a specific control in a
* @param array $field Group control field.
* @return array Group control field.
private function add_condition_prefix( $field ) {
$controls_prefix = $this->get_controls_prefix();
$prefixed_condition_keys = array_map(
function( $key ) use ( $controls_prefix ) {
return $controls_prefix . $key;
array_keys( $field['condition'] )
$field['condition'] = array_combine(
$prefixed_condition_keys,
private function add_conditions_prefix( $conditions ) {
$controls_prefix = $this->get_controls_prefix();
foreach ( $conditions['terms'] as & $condition ) {
if ( isset( $condition['terms'] ) ) {
$condition = $this->add_conditions_prefix( $condition );
$condition['name'] = $controls_prefix . $condition['name'];
* Used to process the CSS selector of group control fields. When using
* group control, Elementor needs to apply the selector to different fields.
* This method handles the process.
* In addition, it handles selector values from other fields and process the
* @param array $selectors An array of selectors to process.
* @return array Processed selectors.
private function handle_selectors( $selectors ) {
$args = $this->get_args();
$selectors = array_combine(
function( $key ) use ( $args ) {
return str_replace( '{{SELECTOR}}', $args['selector'], $key );
}, array_keys( $selectors )