Skip to content

Add Custom Shape Negative not working #9761

@steve231293

Description

@steve231293

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest stable version of Elementor.

Description

Hello team,

I have a problem with custom shape, elementor never used custom negative svg file. Please check it?

This is my code:

<?php
add_filter( 'elementor/shapes/additional_shapes', 'add_custom_shape_divider' );

function add_custom_shape_divider( $additional_shapes ) {
	$additional_shapes['center-curve'] = [
		'title'        => esc_html__( 'Curve Alt', 'text-domain' ),
		'has_negative' => true,
		'url'          => get_template_directory_uri() . '/assets/shape-divider/center-curve.svg',
		'path'         => get_template_directory() . '/assets/shape-divider/center-curve.svg',
	];

	return $additional_shapes;
}
?>

And i create both svg files in same folder:
center-curve.svg
center-curve-negative.svg

When i turn on Invert option in Editor, it used center-curve.svg instead of center-curve-negative.svg.

I guess the problem in function get_shape_path() of class Shapes
You checked shape has params 'path' (Mean it is a custom shape) but you missing check it is negative shape.

http://prntscr.com/q5vv6p

Please reference this code:


add_filter( 'elementor/shapes/additional_shapes', 'add_custom_shape_divider' );

function add_custom_shape_divider( $additional_shapes ) {
	$additional_shapes['center-curve'] = [
		'title'        => esc_html__( 'Curve Alt', 'text-domain' ),
		'has_negative' => true,
		'url'          => get_template_directory_uri() . '/assets/shape-divider/center-curve.svg',
		'path'         => get_template_directory() . '/assets/shape-divider/center-curve.svg',
                'negative_url' => get_template_directory_uri() . '/assets/shape-divider/center-curve-negative.svg',
		'negative_path'         => get_template_directory() . '/assets/shape-divider/center-curve-negative.svg',
	];

	return $additional_shapes;
}
public static function get_shape_path( $shape, $is_negative = false ) {

		if ( isset( self::$shapes[ $shape ] ) ) {
			if( $is_negative && isset( self::$shapes[ $shape ]['negative_path'] ) ) {
				return self::$shapes[ $shape ]['negative_path'];
			} elseif( isset( self::$shapes[ $shape ]['path'] ) ) {
				return self::$shapes[ $shape ]['path'];
			}
		}

		$file_name = $shape;

		if ( $is_negative ) {
			$file_name .= '-negative';
		}

		return ELEMENTOR_PATH . 'assets/shapes/' . $file_name . '.svg';
	}

Update code for editor:

public static function get_additional_shapes_for_config() {
		$additional_shapes = self::get_additional_shapes();
		
		if ( empty( $additional_shapes ) ) {
			return false;
		}

		$additional_shapes_config = [];
		foreach ( $additional_shapes as $shape_name => $shape_settings ) {
			if ( ! isset( $shape_settings['url'] ) && !isset( $shape_settings['negative_url'] ) ) {
				continue;
			}

			// has negative then use negative url.
			if ( ! empty( $shape_settings['has_negative'] ) ) {
				$additional_shapes_config[ $shape_name ] = $shape_settings['negative_url'];
			} else {
				$additional_shapes_config[ $shape_name ] = $shape_settings['url'];
			}
		}

		if ( empty( $additional_shapes_config ) ) {
			return false;
		}

		return $additional_shapes_config;
	}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIndicates a bug with one or multiple components.element/settings/shape-dividerReferences the top and bottom element Shape Divider feature.request/enhancementIndicates an Enhancement Request for an existing feature.status/mergedIndicates when a Pull Request has been merged to a Release.type/developer-apiIndicates when a topic is related to the Developer API and Documentation.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions