Elementor coding tips tricks. (Exclude & Include example for elementor group control)

elementor-tips-tricks.php

<?php
/*
* Exclude & Include in group control
*/
$this->add_group_control(
	Group_Control_Background::get_type(),
	[
		'name' => 'item_background',
		'label' => __( 'Background', 'happy-addons-pro' ),
		'types' => [ 'classic', 'gradient' ],
		'exclude' => [ 'image' ], // remove image bg option
		'selector' => '{{WRAPPER}} .post-item',
	]
);

$this->add_group_control(
	Group_Control_Background::get_type(),
	[
		'name' => 'item_background_image',
		'types' => [ 'classic', 'gradient' ],
		'exclude' => [
			'classic' => 'image' // remove image bg option
		],
		'selector' => '{{WRAPPER}} .carousel-item',
	]
);

$this->add_group_control(
	Group_Control_Border::get_type(),
	[
		'name' => 'item_border',
		'label' => __( 'Border', 'happy-addons-pro' ),
		'selector' => '{{WRAPPER}} .post-item',
		'exclude' => ['color'], //remove border color
	]
);

$this->add_group_control(
	Group_Control_Image_Size::get_type(),
	[
		'name' => 'featured_image',
		'default' => 'thumbnail',
		'exclude' => [
			'custom', //remove custom option
		]
	]
);

$repeater->add_group_control(
	Group_Control_Typography::get_type(),
	[
		'name' => 'text_typography',
		'label' => __('Typography', 'happy-addons-pro'),
		'exclude' => [
			'font_size',
			'line_height',
			'letter_spacing',
			'text_transform',
		],
		'default' => [
			'font_family' => [ '' ],
			'font_weight' => ['']
		],
		'selector' => '{{WRAPPER}}.item-number > {{CURRENT_ITEM}}, {{WRAPPER}} .item-number > {{CURRENT_ITEM}} i, {{WRAPPER}} .item-number > {{CURRENT_ITEM}} em',
	]
);

$repeater->add_control(
	'badge_icon',
	[
		'label' => __( 'Badge Icon', 'text-domain' ),
		'label_block' => false,
		'type' => Controls_Manager::ICONS,
		'skin' => 'inline',
		'exclude_inline_options' => [ 'svg' ],
	]
);

$this->add_group_control(
	Group_Control_Box_Shadow::get_type(),
	[
		'name' => 'badge_box_shadow',
		'exclude' => [
			'box_shadow_position',
		],
		'selector' => '{{WRAPPER}} .post-item',
	]
);

$this->add_responsive_control(
            'close_button_align',
            [
                'label' => __( 'Alignment', 'essential-addons-elementor' ),
                'type' => Controls_Manager::CHOOSE,
                'default' => 'left',
		'devices' => [ 'desktop', 'tablet', 'mobile' ],
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'essential-addons-elementor' ),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'essential-addons-elementor' ),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'selectors_dictionary' => [
                    'left' => 'order: -1;',
                    'right' => '',
                ],
                'selectors' => [
                    '.xyzoc-offcanvas-content-{{ID}} .xyzoc-offcanvas-close-{{ID}}' => '{{VALUE}}', //here ID is widget id
                ],
		'prefix_class' => 'item-align-',
            ]
        );

$this->add_responsive_control(
            'curved_body_translateZ',
            [
                'label' => __( 'Translate Z', 'essential-addons-elementor' ),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => -10000,
                        'max' => 10000,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => -400,
                ],
                'selectors' => [ //.xyzoc-offcanvas-container
                    '(desktop).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => '    transform: rotateY({{curved_body_rotateY.SIZE || 50}}deg) translateZ({{curved_body_translateZ.SIZE || -400}}px);',

                    '(tablet).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => '    transform: rotateY({{curved_body_rotateY_tablet.SIZE || 50}}deg) translateZ({{curved_body_translateZ_tablet.SIZE || -400}}px);',

                    '(mobile).xyzoc-offcanvas-content-open.xyzoc-offcanvas-content-{{ID}}-open .xyzoc-offcanvas-container' => '    transform: rotateY({{curved_body_rotateY_mobile.SIZE || 50}}deg) translateZ({{curved_body_translateZ_mobile.SIZE || -400}}px);',
                ],
            ]
        );

// prefix_class option use only in RAW_HTML & HIDDEN control field
$this->add_control(
	'responsive_description',
	[
		'raw' => __( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
		'type' => Controls_Manager::RAW_HTML,
		'content_classes' => 'elementor-descriptor',
	]
);
$this->add_control(
	'screen_sm_width',
	[
		'type' => Controls_Manager::HIDDEN,
		'condition' => [
			'screen_sm' => [ 'custom' ],
		],
		'content_classes' => 'elementor-fasdsf',
	]
);

$this->add_group_control(
    Group_Control_Box_Shadow::get_type(),
    [
        'name'     => 'box_shadow',
        'fields_options' => [
            'box_shadow_type' => [
                'default' => 'yes', // turn on box shadow by default
            ],
            'box_shadow' => [
                'default' => [
                    'color' => '#000000', // any color code
                    'horizontal' => '', // any number
                    'vertical' => '', // any number
                    'blur' => 0, // any number
                    'spread' => '', // any number
                ],
            ],
            'box_shadow_position' => [
                'default' => '', // '', inset
            ],
        ],
        'selector' => '{{WRAPPER}} .class',
    ]
);

$this->add_group_control(
	Group_Control_Typography::get_type(),
	[
		'name'     => 'content_typography',
		'fields_options' => [
			'typography' => [
				'default' => 'yes'
			],
			'font_family' => [
				'default' => 'Roboto',
			],
			'font_weight' => [
				'default' => '', // 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold
			],
			'font_size' => [
				'default' => [
					'unit' => 'px', // px, em, rem, vh
					'size' => '', // any number
				],
			],
			'text_transform' => [
				'default' => '', // uppercase, lowercase, capitalize, none
			],
			'font_style' => [
				'default' => '', // normal, italic, oblique
			],
			'text_decoration' => [
				'default' => '', // underline, overline, line-through, none
			],
			'line_height' => [
				'default' => [
					'unit' => 'px', // px, em
					'size' => '', // any number
				],
			],
			'letter_spacing' => [
				'default' => [
					'unit' => 'px',
					'size' => '', // any number
				],
			],
		],
		'selector' => '{{WRAPPER}} .class',
	]
);