class ET_Builder_Module_Field_Height extends ET_Builder_Module_Field_Base {
protected $i18n = array();
public function get_defaults() {
'use_min_height' => true,
'use_max_height' => true,
public function get_fields( array $args = array() ) {
$settings = array_merge( $this->get_defaults(), $args );
$this->get_min_height( $settings ),
$this->get_height( $settings ),
$this->get_max_height( $settings )
private function get_min_height( $settings ) {
if ( ! $settings['use_min_height'] ) {
$helper = et_pb_min_height_options( $settings['prefix'] );
if ( ! isset( $i18n['minheight'] ) ) {
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment
$i18n['minheight'] = array(
'label' => __( 'Min Height', 'et_builder' ),
'description' => __( 'When a minimum height is set, the element will always have a height of at least the amount defined. This supersedes smaller static height values. Unlike height, minimum height does not result in content overflow and will allow the height of your element to remain dynamic.', 'et_builder' ),
$helper->get_field() => array_merge(
'label' => $i18n['minheight']['label'],
'description' => $i18n['minheight']['description'],
'default_tablet' => 'auto',
'default_phone' => 'auto',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'min-height' ),
'range_settings' => array(
$this->responsive_fields( $helper->get_field() )
private function get_height( $settings ) {
if ( ! $settings['use_height'] ) {
$helper = et_pb_height_options( $settings['prefix'] );
if ( ! isset( $i18n['height'] ) ) {
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment
'label' => __( 'Height', 'et_builder' ),
'description' => __( 'This sets a static height value for your element. Once set, the height of the element will no longer be determined by its inner content. Content that exceeds the static height of the element will overflow the element wrapper.', 'et_builder' ),
$helper->get_field() => array_merge(
'label' => $i18n['height']['label'],
'description' => $i18n['height']['description'],
'default_tablet' => 'auto',
'default_phone' => 'auto',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'height' ),
'range_settings' => array(
$this->responsive_fields( $helper->get_field() )
private function get_max_height( $settings ) {
if ( ! $settings['use_max_height'] ) {
$helper = et_pb_max_height_options( $settings['prefix'] );
if ( ! isset( $i18n['maxheight'] ) ) {
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment
$i18n['maxheight'] = array(
'label' => __( 'Max Height', 'et_builder' ),
'description' => __( 'Setting a maximum height will prevent your element from ever surpassing the defined height value. As your module content increases and surpasses the maximum height, it will overflow the element wrapper.', 'et_builder' ),
$helper->get_field() => array_merge(
'label' => $i18n['maxheight']['label'],
'description' => $i18n['maxheight']['description'],
'default_tablet' => 'none',
'default_phone' => 'none',
'allowed_values' => et_builder_get_acceptable_css_string_values( 'max-height' ),
'range_settings' => array(
$this->responsive_fields( $helper->get_field() )
private function get_base_field() {
'default_on_child' => true,
'mobile_options' => true,
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
private function responsive_fields( $field ) {
"{$field}_tablet" => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
"{$field}_phone" => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
"{$field}_last_edited" => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'width',
return new ET_Builder_Module_Field_Height();