: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
class DSM_Shapes extends ET_Builder_Module {
public $slug = 'dsm_shapes';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => 'https://divisupreme.com/',
'author' => 'Divi Supreme',
'author_uri' => 'https://divisupreme.com/',
$this->name = esc_html__( 'Supreme Shapes', 'dsm-supreme-modules-for-divi' );
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
$this->main_css_element = '%%order_class%%.dsm_shapes';
$this->settings_modal_toggles = array(
'main_content' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
'image' => esc_html__( 'Image & Badge', 'dsm-supreme-modules-for-divi' ),
'shapes_settings' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
public function get_advanced_fields_config() {
'has_background_color_toggle' => true,
'use_background_color' => true,
"{$this->main_css_element}",
'margin_padding' => array(
'padding' => "{$this->main_css_element}",
'margin' => "{$this->main_css_element}",
'border_radii' => "{$this->main_css_element} .dsm_shapes_wrapper",
'border_styles' => "{$this->main_css_element} .dsm_shapes_wrapper",
'label_prefix' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'shapes_settings',
'depends_on' => array( 'use_shape_border' ),
'depends_show_if' => 'on',
'main' => "{$this->main_css_element}",
'label' => esc_html__( 'Shapes Shadow', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'layout',
'tab_slug' => 'advanced',
'toggle_slug' => 'shapes_settings',
'main' => "{$this->main_css_element} .dsm_shapes_wrapper",
'default_on_fronts' => array(
"{$this->main_css_element}",
'child_filters_target' => array(
'tab_slug' => 'advanced',
'toggle_slug' => 'image_settings',
'main' => "{$this->main_css_element} .dsm_card_image_wrapper",
'hover' => "{$this->main_css_element}:hover .dsm_card_image_wrapper",
public function get_fields() {
$et_accent_color = et_builder_accent_color();
'default_on_front' => 'square',
'label' => esc_html__( 'Type', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'configuration',
'square' => esc_html__( 'Square', 'dsm-supreme-modules-for-divi' ),
'circle' => esc_html__( 'Circle', 'dsm-supreme-modules-for-divi' ),
'rectangle' => esc_html__( 'Rectangle', 'dsm-supreme-modules-for-divi' ),
'triangle' => esc_html__( 'Triangle', 'dsm-supreme-modules-for-divi' ),
'oval' => esc_html__( 'Oval', 'dsm-supreme-modules-for-divi' ),
'trapezoid' => esc_html__( 'Trapezoid', 'dsm-supreme-modules-for-divi' ),
'parallelogram' => esc_html__( 'Parallelogram', 'dsm-supreme-modules-for-divi' ),
'diamond_square' => esc_html__( 'Diamond Square', 'dsm-supreme-modules-for-divi' ),
'hexagon' => esc_html__( 'Hexagon', 'dsm-supreme-modules-for-divi' ),
'blob_one' => esc_html__( 'Blob #1', 'dsm-supreme-modules-for-divi' ),
'blob_two' => esc_html__( 'Blob #2', 'dsm-supreme-modules-for-divi' ),
'blob_three' => esc_html__( 'Blob #3', 'dsm-supreme-modules-for-divi' ),
'blob_four' => esc_html__( 'Blob #4', 'dsm-supreme-modules-for-divi' ),
'blob_five' => esc_html__( 'Blob #5', 'dsm-supreme-modules-for-divi' ),
'blob_six' => esc_html__( 'Blob #6', 'dsm-supreme-modules-for-divi' ),
'blob_seven' => esc_html__( 'Blob #7', 'dsm-supreme-modules-for-divi' ),
'blob_eight' => esc_html__( 'Blob #8', 'dsm-supreme-modules-for-divi' ),
'toggle_slug' => 'main_content',
'description' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
'shapes_square_size' => array(
'label' => esc_html__( 'Size', 'dsm-supreme-modules-for-divi' ),
'description' => esc_html__( 'Adjust size of the Shape.', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'layout',
'toggle_slug' => 'main_content',
'mobile_options' => true,
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
'default_on_front' => '80',
'range_settings' => array(
'label' => esc_html__( 'Shape Color', 'dsm-supreme-modules-for-divi' ),
'default' => $et_accent_color,
'default_on_front' => $et_accent_color,
'tab_slug' => 'advanced',
'toggle_slug' => 'shapes_settings',
'description' => esc_html__( 'Here you can define a custom color for the shapes', 'dsm-supreme-modules-for-divi' ),
'use_shape_border' => array(
'label' => esc_html__( 'Use Border', 'dsm-supreme-modules-for-divi' ),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
'tab_slug' => 'advanced',
'toggle_slug' => 'shapes_settings',
'shapes_type' => 'triangle',
'shapes_type' => 'hexagon',
'shapes_type' => 'trapezoid',
'default_on_front' => 'off',
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Text entered here will appear as title.', 'dsm-supreme-modules-for-divi' ),
//'default' => 'Your Title Goes Here',
'toggle_slug' => 'main_content',
'label' => esc_html__( 'Sub Title', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Text entered here will appear as subtitle.', 'dsm-supreme-modules-for-divi' ),
//'default' => 'Sub Title',
'toggle_slug' => 'main_content',
'label' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
'option_category' => 'basic_option',
'description' => esc_html__( 'Content entered here will appear inside the module.', 'dsm-supreme-modules-for-divi' ),
'toggle_slug' => 'main_content',
public function get_transition_fields_css_props() {
$fields = parent::get_transition_fields_css_props();
public function render( $attrs, $content, $render_slug ) {
$multi_view = et_pb_multi_view_options( $this );
$shapes_type = $this->props['shapes_type'];
$shapes_square_size = $this->props['shapes_square_size'];
$shapes_square_size_values = et_pb_responsive_options()->get_property_values( $this->props, 'shapes_square_size' );
$shapes_square_size_tablet = isset( $shapes_square_size_values['tablet'] ) ? $shapes_square_size_values['tablet'] : '';
$shapes_square_size_phone = isset( $shapes_square_size_values['phone'] ) ? $shapes_square_size_values['phone'] : '';
$shape_color = $this->props['shape_color'];
$shape_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'shape_color' );
$shape_color_tablet = isset( $shape_color_values['tablet'] ) ? $shape_color_values['tablet'] : '';
$shape_color_phone = isset( $shape_color_values['phone'] ) ? $shape_color_values['phone'] : '';
$use_shape_border = $this->props['use_shape_border'];
$shape_selector = "{$this->main_css_element} .dsm_shapes_wrapper";
$video_background = $this->video_background();
$parallax_image_background = $this->get_parallax_image_background();
$shapes_square_size_parent_style = sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size ) );
$shapes_square_size_parent_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ) ) : '';
$shapes_square_size_parent_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ) ) : '';
$shapes_square_size_style = sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size ) );
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ) ) : '';
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ) ) : '';
if ( $shapes_type === 'square' ) {
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
} elseif ( $shapes_type === 'circle' ) {
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
} elseif ( $shapes_type === 'rectangle' ) {
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
} elseif ( $shapes_type === 'triangle' ) {
$shapes_square_size_style = sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_parent_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_parent_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_parent_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
} elseif ( $shapes_type === 'oval' ) {
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
} elseif ( $shapes_type === 'trapezoid' ) {
$shapes_square_size_style = sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 5 ), ( esc_html( $shapes_square_size ) / 5 ) * 2 );
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 5 ), ( esc_html( $shapes_square_size_tablet ) / 5 ) * 2 ) : '';
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 5 ), ( esc_html( $shapes_square_size_phone ) / 5 ) * 2 ) : '';
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_phone_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
$shapes_square_size_parent_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 5 ) * 2 );
$shapes_square_size_parent_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 5 ) * 2 ) : '';
$shapes_square_size_parent_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 5 ) * 2 ) : '';
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_parent_style,
ET_Builder_Element::set_style(
'selector' => $shape_selector,
'declaration' => $shapes_square_size_parent_tablet_style,
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),