: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
$this->_additional_fields_options = array_merge( $this->_additional_fields_options, $additional_child_options );
* Add the divider options to the additional_fields_options array.
protected function _add_divider_fields() {
if ( ! $this->has_vb_support() && ! $this->has_advanced_fields ) {
// Make sure we only add this to sections.
if ( 'et_pb_section' !== $this->slug ) {
$toggle_slug = 'dividers';
'title' => esc_html__( 'Dividers', 'et_builder' ),
// Add the toggle sections.
$this->_add_settings_modal_toggles( $tab_slug, $divider_toggle );
if ( ! isset( $this->advanced_fields['dividers'] ) ) {
$this->advanced_fields['dividers'] = array();
$additional_options = ET_Builder_Module_Fields_Factory::get( 'Divider' )->get_fields( array(
'toggle_slug' => $toggle_slug,
// Return our merged options and toggles.
$this->_additional_fields_options = array_merge( $this->_additional_fields_options, $additional_options );
* Add additional Text Shadow fields to all modules
protected function _add_text_shadow_fields() {
// Get text shadow settings. Fallback to default if needed
$this->advanced_fields['text_shadow'] = self::$_->array_get( $this->advanced_fields, 'text_shadow', array(
// Text shadow settings have to be array
if ( ! is_array( $this->advanced_fields['text_shadow'] ) ) {
// Loop test settings, do multiple text shadow field declaration in one palce
foreach ( $this->advanced_fields['text_shadow'] as $text_shadow_name => $text_shadow_fields ) {
// Enable module to disable text shadow. Also disable text shadow if no text group is
// found because default text shadow lives on text group
if ( 'default' === $text_shadow_name && ( false === $text_shadow_fields || empty( $this->settings_modal_toggles['advanced']['toggles']['text'] ) ) ) {
if ( 'default' !== $text_shadow_name ) {
// Automatically add prefix and toggle slug
$text_shadow_fields['prefix'] = $text_shadow_name;
$text_shadow_fields['toggle_slug'] = $text_shadow_name;
// Add text shadow fields
$this->_additional_fields_options = array_merge(
$this->_additional_fields_options,
$this->text_shadow->get_fields( $text_shadow_fields )
* Add box shadow fields based on configuration on $this->advanced_fields['box_shadow']
protected function _add_box_shadow_fields() {
// BOX shadow fields are added by default to all modules
$this->advanced_fields['box_shadow'] = self::$_->array_get( $this->advanced_fields, 'box_shadow', array(
// Box shadow settings have to be array
if ( ! is_array( $this->advanced_fields['box_shadow'] ) ) {
if ( ! isset( $i18n['box_shadow'] ) ) {
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment
$i18n['box_shadow'] = array(
'title' => esc_html__( 'Box Shadow', 'et_builder' ),
// Loop box shadow settings
foreach ( $this->advanced_fields['box_shadow'] as $fields_name => $settings ) {
// Enable module to disable box shadow
if ( false === $settings ) {
$is_box_shadow_default = 'default' === $fields_name;
// Add Box Shadow toggle for default Box Shadow fields
if ( $is_box_shadow_default ) {
$this->settings_modal_toggles['advanced']['toggles']['box_shadow'] = array(
'title' => $i18n['box_shadow']['title'],
// Ensure box settings has minimum settings required
$settings = wp_parse_args( $settings, array(
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'box_shadow',
// Automatically add suffix attribute
$settings['suffix'] = $is_box_shadow_default ? '' : "_{$fields_name}";
// Add default Box Shadow fields
$this->_additional_fields_options = array_merge(
$this->_additional_fields_options,
ET_Builder_Module_Fields_Factory::get( 'BoxShadow' )->get_fields( $settings )
* Add form field fields based on configuration on $this->advanced_fields['field'].
protected function _add_form_field_fields() {
// Disable if module doesn't set advanced_fields property and has no VB support.
if ( ! $this->has_advanced_fields ) {
// Form field settings have to be an array.
if ( ! is_array( self::$_->array_get( $this->advanced_fields, 'form_field' ) ) ) {
$additional_options = array();
$hover = et_pb_hover_options();
foreach( $this->advanced_fields['form_field'] as $option_name => $option_settings ) {
$tab_slug = isset( $option_settings['tab_slug'] ) ? $option_settings['tab_slug'] : 'advanced';
$toggle_disabled = isset( $option_settings['disable_toggle'] ) && $option_settings['disable_toggle'];
// Add form field options group if it's enabled.
if ( ! $toggle_disabled ) {
$toggle_slug = isset( $option_settings['toggle_slug'] ) ? $option_settings['toggle_slug'] : $option_name;
$toggle_priority = isset( $option_settings['toggle_priority'] ) ? $option_settings['toggle_priority'] : 20;
'title' => esc_html( $option_settings['label'] ),
'priority' => $toggle_priority,
$this->_add_settings_modal_toggles( $tab_slug, $field_toggle );
$bg_color_options = isset( $option_settings['background_color'] ) ? $option_settings['background_color'] : true;
if ( $bg_color_options ) {
$bg_color_args = is_array( $bg_color_options ) ? $bg_color_options : array();
$additional_options["{$option_name}_background_color"] = array_merge( array(
'label' => sprintf( esc_html__( '%1$s Background Color', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Pick a color to fill the module\'s input fields.', 'et_builder' ),
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
$additional_options["{$option_name}_text_color"] = array(
'label' => sprintf( $i18n['font']['color']['label'], $option_settings['label'] ),
'description' => esc_html__( 'Pick a color to be used for the text written inside input fields.', 'et_builder' ),
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
// Focus Background Color.
$additional_options["{$option_name}_focus_background_color"] = array(
'label' => sprintf( esc_html__( '%1$s Focus Background Color', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'When a visitor clicks into an input field, it becomes focused. You can pick a color to be used for the input field background while focused.', 'et_builder' ),
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
$additional_options["{$option_name}_focus_text_color"] = array(
'label' => sprintf( esc_html__( '%1$s Focus Text Color', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'When a visitor clicks into an input field, it becomes focused. You can pick a color to be used for the input text while focused.', 'et_builder' ),
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
// Font - Add current font settings into advanced fields. The font_field is basically
// combination of fonts (options group) + fields (type), but plural suffix is removed
// because there are some case we just need one field declaration for child module.
$font_options = isset( $option_settings['font_field'] ) ? $option_settings['font_field'] : true;
$font_args = is_array( $font_options ) ? $font_options : array();
$font_settings = array_merge( array(
'label' => sprintf( esc_html__( '%1$s', 'et_builder' ), $option_settings['label'] ),
'toggle_slug' => $toggle_slug,
// Text color will be handled by form field function.
'hide_text_color' => true,
self::$_->array_set( $this->advanced_fields, "fonts.{$option_name}", $font_settings );
// Add custom margin-padding to form field options.
$margin_padding_options = isset( $option_settings['margin_padding'] ) ? $option_settings['margin_padding'] : true;
if ( $margin_padding_options ) {
$margin_padding_args = is_array( $margin_padding_options ) ? $margin_padding_options : array();
$margin_padding_settings = array_merge( array(
'label' => $option_settings['label'],
'prefix' => $option_name,
'toggle_slug' => $toggle_slug,
), $margin_padding_args );
$additional_options = array_merge( $additional_options, $this->margin_padding->get_fields( $margin_padding_settings ) );
// Border Styles - Ensure borders attribute is exist in advanced fields. If it's not,
// add borders property and set empty default.
$borders_options = isset( $option_settings['border_styles'] ) ? $option_settings['border_styles'] : true;
if ( $borders_options ) {
if ( ! isset( $this->advanced_fields['borders'] ) ) {
self::$_->array_set( $this->advanced_fields, 'borders.default', array() );
// Border Styles - Add current borders settings into advanced fields.
$border_style_options = self::$_->array_get( $option_settings, "border_styles.{$option_name}", array() );
$border_style_name = ! empty( $border_style_options['name'] ) ? $border_style_options['name'] : $option_name;
$border_style_settings = array_merge( array(
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'border_radii' => 'on|3px|3px|3px|3px',
'border_styles' => array(
'use_focus_border_color' => array(
'label' => esc_html__( 'Use Focus Borders', 'et_builder' ),
'description' => esc_html__( 'Enabling this option will add borders to input fields when focused.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'color_option',
'off' => et_builder_i18n( 'No' ),
'on' => et_builder_i18n( 'Yes' ),
"border_radii_{$toggle_slug}_focus",
"border_styles_{$toggle_slug}_focus",
'toggle_slug' => $toggle_slug,
'default_on_front' => 'off',
), $border_style_options );
self::$_->array_set( $this->advanced_fields, "borders.{$border_style_name}", $border_style_settings );
// Border Styles Focus - Add current borders focus settings into advanced fields.
$border_style_focus_options = self::$_->array_get( $option_settings, "border_styles.{$option_name}_focus", array() );
$border_style_focus_settings = array_merge( array(
'option_category' => 'field',
'toggle_slug' => $toggle_slug,
'depends_on' => array( 'use_focus_border_color' ),
'depends_show_if' => 'on',
'border_radii' => 'on|3px|3px|3px|3px',
'border_styles' => array(
), $border_style_focus_options );
self::$_->array_set( $this->advanced_fields, "borders.{$border_style_name}_focus", $border_style_focus_settings );
// Box Shadow - Ensure box shadow attribute is exist in advanced fields. If it's not,
// add box_shadow property and set empty default.
$box_shadow_options = isset( $option_settings['box_shadow'] ) ? $option_settings['box_shadow'] : true;
if ( $box_shadow_options ) {
if ( ! isset( $this->advanced_fields['box_shadow'] ) ) {
self::$_->array_set( $this->advanced_fields, 'box_shadow.default', array() );
$box_shadow_args = is_array( $box_shadow_options ) ? $box_shadow_options : array();
$box_shadow_name = ! empty( $box_shadow_options['name'] ) ? $box_shadow_options['name'] : $option_name;
// Box Shadow - Add current box shadow settings into advanced fields.
$box_shadow_settings = array_merge( array(
'label' => sprintf( esc_html__( '%1$s Box Shadow', 'et_builder' ), $option_settings['label'] ),
'option_category' => 'layout',
'toggle_slug' => $toggle_slug,
self::$_->array_set( $this->advanced_fields, "box_shadow.{$box_shadow_name}", $box_shadow_settings );
$this->_additional_fields_options = array_merge( $this->_additional_fields_options, $additional_options );
public function get_transition_box_shadow_fields_css_props( $module = 'default' ) {
* @var ET_Builder_Module_Field_BoxShadow $box_shadow
$box_shadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' );
$selector = self::$_->array_get( $this->advanced_fields, "box_shadow.$module.css.main", '%%order_class%%' );
$overlay = self::$_->array_get( $this->advanced_fields, "box_shadow.$module.css.overlay", false );
$suffix = 'default' == $module ? '' : "_$module";
if ( in_array( $overlay, array( 'inset', 'always' ) ) ) {
$selector .= ', ' . $box_shadow->get_overlay_selector( $selector );
"box_shadow_horizontal{$suffix}" => array( 'box-shadow' => $selector, ),
"box_shadow_vertical{$suffix}" => array( 'box-shadow' => $selector, ),
"box_shadow_blur{$suffix}" => array( 'box-shadow' => $selector, ),
"box_shadow_spread{$suffix}" => array( 'box-shadow' => $selector, ),
"box_shadow_color{$suffix}" => array( 'box-shadow' => $selector, ),
public function get_transition_text_shadow_fields_css_props( $module = null ) {
$source = null == $module ? 'text.css' : "fonts.$module.css";
$default = self::$_->array_get( $this->advanced_fields, "$source.main", '%%order_class%%' );
$selector = self::$_->array_get( $this->advanced_fields, "$source.text_shadow", $default );
$prefix = null == $module ? '' : "{$module}_";
"{$prefix}text_shadow_horizontal_length" => array( 'text-shadow' => $selector, ),
"{$prefix}text_shadow_vertical_length" => array( 'text-shadow' => $selector, ),
"{$prefix}text_shadow_blur_strength" => array( 'text-shadow' => $selector, ),
"{$prefix}text_shadow_color" => array( 'text-shadow' => $selector, ),
public function get_transition_filters_fields_css_props( $module = null ) {
$slug = empty( $module ) ? 'filter' : 'child_filter';
$source = empty( $module ) ? 'filters.css.main' : "$module.css.main";
$filters = array( 'hue_rotate', 'saturate', 'brightness', 'contrast', 'invert', 'sepia', 'opacity', 'blur', );
$main = self::$_->array_get( $this->advanced_fields, $source, '%%order_class%%' );
$selector = $module ? self::$_->array_get( $this->advanced_fields, 'filters.child_filters_target.css.main', $main ) : $main;
foreach ( $filters as $filter ) {
$fields[ "{$slug}_{$filter}" ] = array( 'filter' => $selector, );
public function get_transition_borders_fields_css_props( $module = 'default' ) {
$suffix = 'default' == $module ? '' : "_$module";
$radius = self::$_->array_get( $this->advanced_fields, "borders.$module.css.main.border_radii", '%%order_class%%' );
$style = self::$_->array_get( $this->advanced_fields, "borders.$module.css.main.border_styles", '%%order_class%%' );
"border_radii{$suffix}" => array( 'border-radius' => implode( ', ', array( $radius, ) ) ),
"border_width_all{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_color_all{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_width_top{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_color_top{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_width_right{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_color_right{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_width_bottom{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_color_bottom{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_width_left{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
"border_color_left{$suffix}" => array( 'border' => implode( ', ', array( $style, ) ), ),
public function get_transition_margin_padding_fields_css_props( $module = null ) {
$key = empty($module) ? '' : "$module.";
$suffix = empty($module) ? '' : "_$module";
$margin = self::$_->array_get( $this->advanced_fields, "margin_padding.{$key}css.margin", '%%order_class%%' );
$padding = self::$_->array_get( $this->advanced_fields, "margin_padding.{$key}css.padding", '%%order_class%%' );
"custom_margin{$suffix}" => array( 'margin' => implode( ', ', array( $margin, ) ) ),
"custom_padding{$suffix}" => array( 'padding' => implode( ', ', array( $padding, ) ), ),
public function get_transition_transform_css_props( $module = null ) {
$key = empty( $module ) ? '' : "$module.";
$suffix = empty( $module ) ? '' : "_$module";
$selector = self::$_->array_get( $this->advanced_fields, "transform.{$key}css.main", '%%order_class%%' );
/** @see ET_Builder_Module_Field_Transform */
$defaults = array( 'scale', 'translate', 'rotate', 'skew', 'origin' );
foreach ( $defaults as $name ) {
$fields += array( "transform_{$name}{$suffix}" => array( 'transform' => implode( ', ', (array) $selector ) ) );
public function get_transition_position_css_props( $module = null ) {
$key = empty( $module ) ? '' : "$module.";
$suffix = empty( $module ) ? '' : "_$module";
$selector = self::$_->array_get( $this->advanced_fields, "position_fields.{$key}css.main", '%%order_class%%' );
$string_selector = implode( ', ', (array) $selector );
$fields += array( "horizontal_offset{$suffix}" => array( 'left' => $string_selector, 'right' => $string_selector ) );
$fields += array( "vertical_offset{$suffix}" => array( 'top' => $string_selector, 'bottom' => $string_selector ) );
public function get_transition_font_fields_css_props() {
$items = self::$_->array_get( $this->advanced_fields, 'fonts' );
if ( !is_array( $items ) ) {
array( 'option' => 'text_color', 'slug' => 'color', 'prop' => 'color', ),
array( 'option' => 'font_size', 'slug' => 'font_size', 'prop' => 'font-size', ),
array( 'option' => 'line_height', 'slug' => 'line_height', 'prop' => 'line-height', ),
array( 'option' => 'letter_spacing', 'slug' => 'letter_spacing', 'prop' => 'letter-spacing', ),
array( 'option' => 'text_shadow_horizontal_length', 'slug' => 'text_shadow', 'prop' => 'text-shadow', ),
array( 'option' => 'text_shadow_vertical_length', 'slug' => 'text_shadow', 'prop' => 'text-shadow', ),
array( 'option' => 'text_shadow_blur_strength', 'slug' => 'text_shadow', 'prop' => 'text-shadow', ),
array( 'option' => 'text_shadow_color', 'slug' => 'text_shadow', 'prop' => 'text-shadow', ),
array( 'option' => 'border_weight', 'slug' => 'quote', 'prop' => 'border-width', ),
array( 'option' => 'border_color', 'slug' => 'quote', 'prop' => 'border-color', ),
foreach ( $items as $item => $field ) {
foreach ( $font_options as $key ) {
$fields["{$item}_{$key['option']}"] = array(
$key['prop'] => self::$_->array_get(
self::$_->array_get( $field, 'css.main', '%%order_class%%' )