: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
'default' => ET_Global_Settings::get_value( 'all_buttons_bg_color' ),
'default_on_front' => '',
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
'background_fields' => $this->generate_background_options( "{$option_name}_bg", 'button', $tab_slug, $toggle_slug, "{$option_name}_bg_color" ),
'mobile_options' => true,
$additional_options["{$option_name}_bg_color"]['background_fields']["{$option_name}_bg_color"]['default'] = ET_Global_Settings::get_value( 'all_buttons_bg_color' );
$additional_options = array_merge( $additional_options, $this->generate_background_options( "{$option_name}_bg", 'skip', $tab_slug, $toggle_slug, "{$option_name}_bg_color" ) );
$additional_options["{$option_name}_border_width"] = array(
'label' => sprintf( esc_html__( '%1$s Border Width', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Increase or decrease the thickness of the border around the button. Setting this value to 0 will remove the border entirely.', 'et_builder' ),
'option_category' => 'button',
'default' => ! empty( $border_width_default ) ? $border_width_default : ET_Global_Settings::get_value( 'all_buttons_border_width' ),
'default_on_front' => '',
'allowed_units' => array( 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
'mobile_options' => true,
$additional_options["{$option_name}_border_color"] = array(
'label' => sprintf( esc_html__( '%1$s Border Color', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Pick a color to be used for the button border.', 'et_builder' ),
'option_category' => 'button',
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
'mobile_options' => true,
$additional_options["{$option_name}_border_radius"] = array(
'label' => sprintf( esc_html__( '%1$s Border Radius', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( "Increasing the border radius will increase the roundness of the button's corners. Setting this value to 0 will result in squared corners.", 'et_builder' ),
'option_category' => 'button',
'default' => ET_Global_Settings::get_value( 'all_buttons_border_radius' ),
'default_on_front' => '',
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
'mobile_options' => true,
$additional_options["{$option_name}_letter_spacing"] = array(
'label' => sprintf( $i18n['font']['letter_spacing']['label'], $option_settings['label'] ),
'description' => esc_html__( 'Letter spacing adjusts the distance between each letter in the button.', 'et_builder' ),
'option_category' => 'button',
'default' => ET_Global_Settings::get_value( 'all_buttons_spacing' ),
'default_on_front' => '',
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
'depends_show_if' => 'on',
$additional_options["{$option_name}_font"] = array(
'label' => sprintf( $i18n['font']['font']['label'], $option_settings['label'] ),
'description' => esc_html__( 'Choose a custom font to use for the button. All Google web fonts are available, or you can upload your own custom font files.', 'et_builder' ),
'group_label' => esc_html__( $option_settings['label'] ),
'option_category' => 'button',
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
'mobile_options' => true,
// Hide show button icon.
$hide_icon = isset( $option_settings['hide_icon'] ) ? $option_settings['hide_icon'] : false;
if ( false === $hide_icon ) {
$additional_options["{$option_name}_use_icon"] = array(
'label' => sprintf( esc_html__( 'Show %1$s Icon', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'When enabled, this will add a custom icon within the button.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'button',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
"{$option_name}_icon_color",
"{$option_name}_icon_placement",
"{$option_name}_on_hover",
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
$additional_options["{$option_name}_icon"] = array(
'label' => sprintf( esc_html__( '%1$s Icon', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Pick an icon to be used for the button.', 'et_builder' ),
'option_category' => 'button',
'class' => array( 'et-pb-font-icon' ),
'toggle_slug' => $toggle_slug,
'depends_show_if_not' => 'off',
'mobile_options' => true,
$additional_options["{$option_name}_icon_color"] = array(
'label' => sprintf( esc_html__( '%1$s Icon Color', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Here you can define a custom color for the button icon.', 'et_builder' ),
'option_category' => 'button',
'toggle_slug' => $toggle_slug,
'depends_show_if_not' => 'off',
'mobile_options' => true,
$additional_options["{$option_name}_icon_placement"] = array(
'label' => sprintf( esc_html__( '%1$s Icon Placement', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'Choose where the button icon should be displayed within the button.', 'et_builder' ),
'option_category' => 'button',
'right' => et_builder_i18n( 'Right' ),
'left' => et_builder_i18n( 'Left' ),
'toggle_slug' => $toggle_slug,
'depends_show_if_not' => 'off',
'mobile_options' => true,
$additional_options["{$option_name}_on_hover"] = array(
'label' => sprintf( esc_html__( 'Only Show Icon On Hover for %1$s', 'et_builder' ), $option_settings['label'] ),
'description' => esc_html__( 'By default, button icons are displayed on hover. If you would like button icons to always be displayed, then you can enable this option.', 'et_builder' ),
'type' => 'yes_no_button',
'option_category' => 'button',
'on' => et_builder_i18n( 'Yes' ),
'off' => et_builder_i18n( 'No' ),
'toggle_slug' => $toggle_slug,
'depends_show_if_not' => 'off',
'mobile_options' => true,
if ( isset( $option_settings['use_alignment'] ) && $option_settings['use_alignment'] ) {
$additional_options["{$option_name}_alignment"] = array(
'label' => esc_html__( 'Button Alignment', 'et_builder' ),
'description' => esc_html__( 'Align your button to the left, right or center of the module.', 'et_builder' ),
'option_category' => 'layout',
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
'toggle_slug' => $toggle_slug,
'mobile_options' => true,
// The configurable rel attribute field is added by default
if ( ! isset( $option_settings['no_rel_attr'] ) ) {
$additional_options["{$option_name}_rel"] = array(
'label' => sprintf( esc_html__( '%1$s Relationship', 'et_builder' ), $option_settings['label'] ),
'type' => 'multiple_checkboxes',
'option_category' => 'configuration',
'options' => $this->get_rel_values(),
'description' => et_get_safe_localization( __( "Specify the value of your link's <em>rel</em> attribute. The <em>rel</em> attribute specifies the relationship between the current document and the linked document.<br><strong>Tip:</strong> Search engines can use this attribute to get more information about a link.", 'et_builder' ) ),
'tab_slug' => 'custom_css',
'toggle_slug' => 'attributes',
'shortcut_index' => $option_name,
// Add text-shadow to button options
$option = $this->text_shadow->get_fields(array(
'label' => $option_settings['label'],
'prefix' => $option_name,
'option_category' => 'font_option',
'toggle_slug' => $toggle_slug,
'depends_show_if' => 'on',
"custom_{$option_name}" => 'on',
$additional_options = array_merge( $additional_options, $option );
// Conditionally add box-shadow options to button options. Get box shadow settings for advanced button fields.
$button_box_shadow_options = self::$_->array_get( $option_settings, 'box_shadow', array() );
// Enable module to remove box shadow from advanced button fields by declaring false value to box
// shadow attribute (i.e. button module)
if ( false !== $button_box_shadow_options ) {
$button_box_shadow_options = wp_parse_args( $button_box_shadow_options, array(
'label' => esc_html__( 'Button Box Shadow', 'et_builder' ),
'option_category' => 'layout',
'toggle_slug' => $toggle_slug,
"custom_{$option_name}" => 'on',
// Only print box shadow styling if custom_* attribute is equal to "on" by adding show_iff attribute
$button_visibility_condition = array( "custom_{$option_name}" => 'on' );
self::$_->array_set( $button_box_shadow_options, 'css.show_if', $button_visibility_condition );
// Automatically add default box shadow fields if box shadow attribute hasn't even defined yet.
// No attribute found is considered true for default thus if this about to add the first advanced
// box shadow, add the default first
if ( ! isset( $this->advanced_fields['box_shadow'] ) ) {
$button_box_shadow_options_default = array();
self::$_->array_set( $this->advanced_fields, "box_shadow.default", $button_box_shadow_options_default );
// Box shadow fields are generated after button fields being added. Thus, adding $this->advanced_fields
// is sufficient to insert the box shadow fields
self::$_->array_set( $this->advanced_fields, "box_shadow.{$option_name}", $button_box_shadow_options );
// Add custom margin-padding to form field options.
$margin_padding = self::$_->array_get( $option_settings, 'margin_padding', true );
$margin_padding_module_args = is_array( $margin_padding ) ? $margin_padding : array();
$margin_padding_args = wp_parse_args( $margin_padding_module_args, array(
'label' => $option_settings['label'],
'prefix' => $option_name,
'toggle_slug' => $toggle_slug,
$margin_padding_options = $this->margin_padding->get_fields( $margin_padding_args );
$additional_options = array_merge( $additional_options, $margin_padding_options );
$this->_additional_fields_options = array_merge( $this->_additional_fields_options, $additional_options );
* Add animation option fields.
* @since 3.23 Introduce responsive settings on all animation options. Rename Animation label
* for et_pb_team_member module as Image Animation. Reorder animation repeat option
* to the bottom of animation settings.
protected function _add_animation_fields() {
// Animation fields are added by default on all module
$this->advanced_fields['animation'] = self::$_->array_get( $this->advanced_fields, 'animation', array() );
if ( false === $this->advanced_fields['animation'] ) {
$classname = get_class( $this );
// Child modules do not support the Animation settings except for Columns.
if ( isset( $this->type ) && 'child' === $this->type && !in_array( $this->slug, array( 'et_pb_column', 'et_pb_column_inner' ) ) ) {
// Cache results so that translation/escaping only happens once.
if ( ! isset( $i18n['animation'] ) ) {
// phpcs:disable WordPress.WP.I18n.MissingTranslatorsComment
$i18n['animation'] = array(
'title' => esc_html__( 'Animation', 'et_builder' ),
'label' => esc_html__( 'Animation Style', 'et_builder' ),
'description' => esc_html__( 'Pick an animation style to enable animations for this element. Once enabled, you will be able to customize your animation style further. To disable animations, choose the None option.', 'et_builder' ),
'fade' => et_builder_i18n( 'Fade' ),
'slide' => et_builder_i18n( 'Slide' ),
'bounce' => esc_html__( 'Bounce', 'et_builder' ),
'zoom' => esc_html__( 'Zoom', 'et_builder' ),
'flip' => et_builder_i18n( 'Flip' ),
'fold' => esc_html__( 'Fold', 'et_builder' ),
'roll' => esc_html__( 'Roll', 'et_builder' ),
'label' => esc_html__( 'Animation Direction', 'et_builder' ),
'description' => esc_html__( 'Pick from up to five different animation directions, each of which will adjust the starting and ending position of your animated element.', 'et_builder' ),
'label' => esc_html__( 'Animation Duration', 'et_builder' ),
'description' => esc_html__( 'Speed up or slow down your animation by adjusting the animation duration. Units are in milliseconds and the default animation duration is one second.', 'et_builder' ),
'label' => esc_html__( 'Animation Delay', 'et_builder' ),
'description' => esc_html__( 'If you would like to add a delay before your animation runs you can designate that delay here in milliseconds. This can be useful when using multiple animated modules together.', 'et_builder' ),
'label' => esc_html__( 'Animation Starting Opacity', 'et_builder' ),
'description' => esc_html__( 'By increasing the starting opacity, you can reduce or remove the fade effect that is applied to all animation styles.', 'et_builder' ),
'label' => esc_html__( 'Animation Speed Curve', 'et_builder' ),
'description' => esc_html__( 'Here you can adjust the easing method of your animation. Easing your animation in and out will create a smoother effect when compared to a linear speed curve.', 'et_builder' ),
'label' => esc_html__( 'Animation Repeat', 'et_builder' ),
'description' => esc_html__( 'By default, animations will only play once. If you would like to loop your animation continuously you can choose the Loop option here.', 'et_builder' ),
'once' => esc_html__( 'Once', 'et_builder' ),
'loop' => esc_html__( 'Loop', 'et_builder' ),
'label' => esc_html__( 'Dropdown Menu Animation', 'et_builder' ),
'description' => esc_html__( 'Select an animation to be used when dropdown menus appear. Dropdown menus appear when hovering over links with sub items.', 'et_builder' ),
'label' => esc_html__( 'Animation Intensity', 'et_builder' ),
'description' => esc_html__( 'Intensity effects how subtle or aggressive your animation will be. Lowering the intensity will create a smoother and more subtle animation while increasing the intensity will create a snappier more aggressive animation.', 'et_builder' ),
$this->settings_modal_toggles['advanced']['toggles']['animation'] = array(
'title' => $i18n['animation']['toggle']['title'],
$additional_options = array();
$animations_intensity_fields = array(
'animation_intensity_slide',
'animation_intensity_zoom',
'animation_intensity_flip',
'animation_intensity_fold',
'animation_intensity_roll',
$additional_options['animation_style'] = array(
'label' => $i18n['animation']['style']['label'],
'description' => $i18n['animation']['style']['description'],
'type' => 'select_animation',
'option_category' => 'configuration',
'none' => et_builder_i18n( 'None' ),
'fade' => $i18n['animation']['style']['options']['fade'],
'slide' => $i18n['animation']['style']['options']['slide'],
'bounce' => $i18n['animation']['style']['options']['bounce'],
'zoom' => $i18n['animation']['style']['options']['zoom'],
'flip' => $i18n['animation']['style']['options']['flip'],
'fold' => $i18n['animation']['style']['options']['fold'],
'roll' => $i18n['animation']['style']['options']['roll'],
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'affects' => array_merge( array(
'animation_starting_opacity',
), $animations_intensity_fields ),
$additional_options['animation_direction'] = array(
'label' => $i18n['animation']['direction']['label'],
'description' => $i18n['animation']['direction']['description'],
'option_category' => 'configuration',
'center' => et_builder_i18n( 'Center' ),
'left' => et_builder_i18n( 'Right' ),
'right' => et_builder_i18n( 'Left' ),
'bottom' => et_builder_i18n( 'Up' ),
'top' => et_builder_i18n( 'Down' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'depends_show_if_not' => array( 'none', 'fade' ),
'mobile_options' => true,
$additional_options['animation_duration'] = array(
'label' => $i18n['animation']['duration']['label'],
'description' => $i18n['animation']['duration']['description'],
'option_category' => 'configuration',
'range_settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'depends_show_if_not' => 'none',
'reset_animation' => true,
'mobile_options' => true,
$additional_options['animation_delay'] = array(
'label' => $i18n['animation']['delay']['label'],
'description' => $i18n['animation']['delay']['description'],
'option_category' => 'configuration',
'range_settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'depends_show_if_not' => 'none',
'reset_animation' => true,
'mobile_options' => true,
foreach ( $animations_intensity_fields as $animations_intensity_field ) {
$animation_style = str_replace( 'animation_intensity_', '', $animations_intensity_field );
$additional_options[ $animations_intensity_field ] = array(
'label' => $i18n['animation']['intensity']['label'],
'description' => $i18n['animation']['intensity']['description'],
'option_category' => 'configuration',
'range_settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'depends_show_if' => $animation_style,
'reset_animation' => true,
'mobile_options' => true,
$additional_options['animation_starting_opacity'] = array(
'label' => $i18n['animation']['opacity']['label'],
'description' => $i18n['animation']['opacity']['description'],
'option_category' => 'configuration',
'range_settings' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'animation',
'depends_show_if_not' => 'none',
'reset_animation' => true,
'mobile_options' => true,