if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
* Elementor dimension control.
* A base control for creating dimension control. Displays input fields for top,
* right, bottom, left and the option to link them together.
class Control_Dimensions extends Control_Base_Units {
* Get dimensions control type.
* Retrieve the control type, in this case `dimensions`.
* @return string Control type.
public function get_type() {
* Get dimensions control default values.
* Retrieve the default value of the dimensions control. Used to return the
* default values while initializing the dimensions control.
* @return array Control default value.
public function get_default_value() {
parent::get_default_value(), [
public function get_singular_name() {
* Get dimensions control default settings.
* Retrieve the default settings of the dimensions control. Used to return the
* default settings while initializing the dimensions control.
* @return array Control default settings.
protected function get_default_settings() {
parent::get_default_settings(), [
'allowed_dimensions' => 'all',
protected function get_dimensions() {
'top' => __( 'Top', 'elementor' ),
'right' => __( 'Right', 'elementor' ),
'bottom' => __( 'Bottom', 'elementor' ),
'left' => __( 'Left', 'elementor' ),
* Render dimensions control output in the editor.
* Used to generate the control HTML in the editor using Underscore JS
* template. The variables for the class are available using `data` JS
public function content_template() {
$class_name = $this->get_singular_name();
<div class="elementor-control-field">
<label class="elementor-control-title">{{{ data.label }}}</label>
<?php $this->print_units_template(); ?>
<div class="elementor-control-input-wrapper">
<ul class="elementor-control-<?php echo esc_attr( $class_name ); ?>s">
foreach ( $this->get_dimensions() as $dimension_key => $dimension_title ) :
<li class="elementor-control-<?php echo esc_attr( $class_name ); ?>">
<input id="<?php $this->print_control_uid( $dimension_key ); ?>" type="text" data-setting="<?php
// PHPCS - the variable $dimension_key is a plain text.
echo $dimension_key; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
placeholder = view.getControlPlaceholder();
if ( _.isObject( placeholder ) && ! _.isUndefined( placeholder.<?php
// PHPCS - the variable $dimension_key is a plain text.
echo $dimension_key; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
print( encodeURIComponent( placeholder.<?php
// PHPCS - the variable $dimension_key is a plain text.
echo $dimension_key; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
print( placeholder ? encodeURIComponent( placeholder ) : '' );
<# if ( -1 === _.indexOf( allowed_dimensions, '<?php
// PHPCS - the variable $dimension_key is a plain text.
echo $dimension_key; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
<label for="<?php $this->print_control_uid( $dimension_key ); ?>" class="elementor-control-<?php echo esc_attr( $class_name ); ?>-label"><?php
// PHPCS - the variable $dimension_title holds an escaped translated value.
echo $dimension_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
<button class="elementor-link-<?php echo esc_attr( $class_name ); ?>s tooltip-target" data-tooltip="<?php echo esc_attr__( 'Link values together', 'elementor' ); ?>">
<span class="elementor-linked">
<i class="eicon-link" aria-hidden="true"></i>
<span class="elementor-screen-only"><?php echo esc_html__( 'Link values together', 'elementor' ); ?></span>
<span class="elementor-unlinked">
<i class="eicon-chain-broken" aria-hidden="true"></i>
<span class="elementor-screen-only"><?php echo esc_html__( 'Unlinked values', 'elementor' ); ?></span>
<# if ( data.description ) { #>
<div class="elementor-control-field-description">{{{ data.description }}}</div>