if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
* Elementor common widget.
* Elementor base widget that gives you all the advanced options of the basic
class Widget_Common_Base extends Widget_Base {
const WRAPPER_SELECTOR = '{{WRAPPER}} .elementor-widget-container';
const WRAPPER_SELECTOR_CHILD = '{{WRAPPER}} > .elementor-widget-container';
const WRAPPER_SELECTOR_HOVER = '{{WRAPPER}}:hover .elementor-widget-container';
const WRAPPER_SELECTOR_HOVER_CHILD = '{{WRAPPER}}:hover > .elementor-widget-container';
const MASK_SELECTOR_DEFAULT = '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container';
const MASK_SELECTOR_IMG = '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img';
const TRANSFORM_SELECTOR_CLASS = ' > .elementor-widget-container';
const MARGIN = 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};';
* Retrieve common widget name.
* @return string Widget name.
public function get_name() {
* Whether to show the common widget in the panel or not.
* @return bool Whether to show the widget in the panel.
public function show_in_panel() {
* Get Responsive Device Args
* Receives an array of device args, and duplicates it for each active breakpoint.
* Returns an array of device args.
* @deprecated 3.7.0 Not needed anymore because responsive conditioning in the Editor was fixed in v3.7.0.
* @param array $args arguments to duplicate per breakpoint.
* @param array $devices_to_exclude
* @return array responsive device args
protected function get_responsive_device_args( array $args, array $devices_to_exclude = [] ) {
Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.7.0' );
$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
foreach ( $breakpoints as $breakpoint_key => $breakpoint ) {
// If the device is not excluded, add it to the device args array.
if ( ! in_array( $breakpoint_key, $devices_to_exclude, true ) ) {
$parsed_device_args = $this->parse_device_args_placeholders( $args, $breakpoint_key );
$device_args[ $breakpoint_key ] = $parsed_device_args;
* Parse Device Args Placeholders
* Receives an array of args. Iterates over the args, and replaces the {{DEVICE}} placeholder, if exists, with the
* @param string $breakpoint_key
* @return array parsed device args
private function parse_device_args_placeholders( array $args, $breakpoint_key ) {
foreach ( $args as $arg_key => $arg_value ) {
$arg_key = str_replace( '{{DEVICE}}', $breakpoint_key, $arg_key );
if ( is_array( $arg_value ) ) {
$arg_value = $this->parse_device_args_placeholders( $arg_value, $breakpoint_key );
$parsed_args[ $arg_key ] = $arg_value;
* @param String $shape Shape name.
* @return string The shape path in the assets folder.
private function get_shape_url( $shape ) {
return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
* Get a list of the available mask shapes.
* @param bool $custom_button Determine if the output should contain `Custom Mask` button.
* @return array A list of mask shapes.
private function get_shapes( $custom_button = true ): array {
'title' => esc_html__( 'Circle', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/circle.svg',
'title' => esc_html__( 'Oval vertical', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/oval-vertical.svg',
'title' => esc_html__( 'Oval horizontal', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/oval-horizontal.svg',
'title' => esc_html__( 'Pill vertical', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pill-vertical.svg',
'title' => esc_html__( 'Pill horizontal', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pill-horizontal.svg',
'title' => esc_html__( 'Triangle', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/triangle.svg',
'title' => esc_html__( 'Diamond', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/diamond.svg',
'title' => esc_html__( 'Pentagon', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pentagon.svg',
'title' => esc_html__( 'Hexagon vertical', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon-vertical.svg',
'hexagon-horizontal' => [
'title' => esc_html__( 'Hexagon horizontal', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon-horizontal.svg',
'title' => esc_html__( 'Heptagon', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/heptagon.svg',
'title' => esc_html__( 'Octagon', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/octagon.svg',
'parallelogram-right' => [
'title' => esc_html__( 'Parallelogram right', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/parallelogram-right.svg',
'parallelogram-left' => [
'title' => esc_html__( 'Parallelogram left', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/parallelogram-left.svg',
'title' => esc_html__( 'Trapezoid Up', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/trapezoid-up.svg',
'title' => esc_html__( 'Trapezoid Down', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/trapezoid-down.svg',
'title' => esc_html__( 'Flower', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/flower.svg',
'title' => esc_html__( 'Sketch', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/sketch.svg',
'title' => esc_html__( 'Hexagon Donut', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon.svg',
'title' => esc_html__( 'Blob', 'elementor' ),
'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/blob.svg',
$shapes = array_merge( $shapes, self::get_additional_mask_shapes() );
'title' => esc_html__( 'Custom Mask', 'elementor' ),
* Get additional mask shapes.
* Used to add custom mask shapes to elementor.
* @return array A list of additional mask shapes.
private static function get_additional_mask_shapes(): array {
static $additional_mask_shapes = null;
if ( null !== $additional_mask_shapes ) {
return $additional_mask_shapes;
$additional_mask_shapes = [];
* Additional mask shapes.
* Filters the mask shapes used by Elementor to add additional mask shapes.
* @param array $additional_mask_shapes Additional mask shapes.
$additional_mask_shapes = apply_filters( 'elementor/mask_shapes/additional_shapes', $additional_mask_shapes );
return $additional_mask_shapes;
* Gets a string of CSS rules to apply, and returns an array of selectors with those rules.
* This function has been created in order to deal with masking for image widget.
* For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget,
* the `img` tag should be masked directly. So instead of writing a lot of selectors every time,
* this function builds both of those selectors easily.
* @param string $rules The CSS rules to apply.
* @return array Selectors with the rules applied.
private function get_mask_selectors( $rules ) {
'default' => static::MASK_SELECTOR_DEFAULT,
'image' => static::MASK_SELECTOR_IMG,
$mask_selectors['default'] . ', ' . $mask_selectors['image'] => $rules,
* Register the Layout section.
private function register_layout_section() {
$this->start_controls_section(
'label' => esc_html__( 'Layout', 'elementor' ),
'tab' => Controls_Manager::TAB_ADVANCED,
// Element Name for the Navigator
'label' => esc_html__( 'Title', 'elementor' ),
'type' => Controls_Manager::HIDDEN,
$this->add_responsive_control(
'label' => esc_html__( 'Margin', 'elementor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
static::WRAPPER_SELECTOR_CHILD => static::MARGIN,
$this->add_responsive_control(
'label' => esc_html__( 'Padding', 'elementor' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
static::WRAPPER_SELECTOR_CHILD => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
$experiments_manager = Plugin::$instance->experiments;
$is_container_active = $experiments_manager->is_feature_active( 'container' );
$this->add_responsive_control(
'label' => esc_html__( 'Width', 'elementor' ),
'type' => Controls_Manager::SELECT,
'' => esc_html__( 'Default', 'elementor' ),
'inherit' => esc_html__( 'Full Width', 'elementor' ) . ' (100%)',
'auto' => esc_html__( 'Inline', 'elementor' ) . ' (auto)',
'initial' => esc_html__( 'Custom', 'elementor' ),
'selectors_dictionary' => [
'prefix_class' => 'elementor-widget%s__width-',
'{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
$this->add_responsive_control(
'label' => esc_html__( 'Custom Width', 'elementor' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
'{{WRAPPER}}' => '--container-widget-width: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; width: var( --container-widget-width, {{SIZE}}{{UNIT}} ); max-width: {{SIZE}}{{UNIT}}',
'condition' => [ '_element_width' => 'initial' ],
'type' => Controls_Manager::HEADING,
'label' => esc_html__( 'Grid Item', 'elementor' ),
$this->add_responsive_control(
'label' => esc_html__( 'Column Span', 'elementor' ),
'type' => Controls_Manager::SELECT,
'{{WRAPPER}}' => 'grid-column: span {{VALUE}};',
$this->add_responsive_control(
'label' => esc_html__( 'Custom', 'elementor' ),
'type' => Controls_Manager::TEXT,
'{{WRAPPER}}' => 'grid-column: {{VALUE}}',
'_grid_column' => 'custom',
$this->add_responsive_control(
'label' => esc_html__( 'Row Span', 'elementor' ),
'type' => Controls_Manager::SELECT,
'{{WRAPPER}}' => 'grid-row: span {{VALUE}};',
$this->add_responsive_control(
'label' => esc_html__( 'Custom', 'elementor' ),
'type' => Controls_Manager::TEXT,
'{{WRAPPER}}' => 'grid-row: {{VALUE}}',
// Register Flex controls only if the Container experiment is active.
if ( $is_container_active ) {
$this->add_group_control(
Group_Control_Flex_Item::get_type(),
// Hack to increase specificity and make sure that the current widget overrides the
'selector' => '{{WRAPPER}}.elementor-element',