Compatibility Issue between Optimole Plugin and Breakdance Page Builder Plugin

[kushh23]

Description

There is an incompatibility issue between the Optimole plugin and the Breakdance Page Builder plugin. When utilizing the Breakdance Page Builder plugin to add a background image for a section , Optimole fails to optimize the images. Interestingly, this problem doesn't exist when adding an image directly, as Optimole successfully optimizes those images.

It's important to note that this issue pertains explicitly to background images.

Step-by-step reproduction instructions

1. Install and activate the Optimole plugin and the Breakdance Page Builder plugin on a WordPress website.
2. Create a new page or edit an existing one using the Breakdance Page Builder.
3. Add a new section to the page using the Breakdance Page Builder.
4. Within the added section, attempt to set a background image by selecting the "Background Image" option.
5. Choose an image from the media library or upload a new image for the background.
6. Save the changes to the section or page.
7. Visit the page in a browser or preview the changes to observe the background image.

Screenshots, screen recording, code snippet or Help Scout ticket

https://bloody-bug-rexo.vertisite.cloud/breakdance-20/
https://secure.helpscout.net/conversation/2339658764/382953/

breakdance-v1.5.0-1.zip

Environment info

https://pastebin.com/Ed48rbEU

Is the issue you are reporting a regression

No

[HardeepAsrani]

@Codeinwp/optimole As discussed during the planning meeting, I tried to do this while keeping within the estimation limit. I went through all the available filters in the codebase and none of them happen at the right time or is there something that we can override to make the process easier.

After some trying, I was able to hijack the updating of post meta and here's the rough code I went with for testing:

<?php

/**
 * Class Optml_breakdance_builder
 */
class Optml_breakdance_builder extends Optml_compatibility {

	/**
	 * Should we load the integration logic.
	 *
	 * @return bool Should we load.
	 */
	function should_load() {
		include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

		return is_plugin_active( 'breakdance/plugin.php' );
	}

	/**
	 * Register integration details.
	 */
	public function register() {
		add_filter( 'update_post_metadata', [ $this, 'filter_update_post_metadata' ], 10, 5 );
	}

	/**
	 * Optimize the image src when it is saved in breakdance.
	 * 
	 * @param bool   $check     Whether to add the metadata.
	 * @param int    $object_id ID of the object metadata is for.
	 * @param string $meta_key  Metadata key.
	 * @param mixed  $meta_value Metadata value. Must be serializable if non-scalar.
	 * @param mixed  $prev_value Optional. If specified, only update existing metadata entries with the specified value. Otherwise, update all entries.
	 * 
	 * @return bool Whether to add the metadata.
	 */
	public function filter_update_post_metadata( $check, $object_id, $meta_key, $meta_value, $prev_value ) {
		if ( 'breakdance_data' !== $meta_key ) {
			return $check;
		}

		$pattern = '/"https?:\\\\\/\\\\\/[^"]*?\.(jpg|jpeg|png|gif|bmp|webp)\\\\"/i';

		$new_value = preg_replace_callback( $pattern, function( $matches ) {
			$url = stripslashes( $matches[0] );
			// Remove quotes from url.
			$url = str_replace( '"', '', $url );
			$new_url = Optml_Main::instance()->manager->url_replacer->build_url( $url );
			$new_url = '"' . str_replace( '/', '\\/', $new_url ) . '\\"';
			return $new_url;
		}, $meta_value );

		$new_value = $this->encode_before_writing_to_wp( $new_value, true );

		// Temporarily remove this filter to avoid infinite loop.
		remove_filter( 'update_post_metadata', [ $this, 'filter_update_post_metadata' ], 10, 5 );
		$result = update_post_meta( $object_id, $meta_key, $new_value, $prev_value );
		add_filter( 'update_post_metadata', [ $this, 'filter_update_post_metadata' ], 10, 5 );

		return $result !== false ? true : $check;
	}

	/**
	 * @param mixed $value_to_encode
	 * @param boolean $add_slashes
	 * @return string|false
	 */
	public function encode_before_writing_to_wp( $value_to_encode, $add_slashes ) {
		$json_encoded = wp_json_encode( $value_to_encode );
	
		if ( $json_encoded === false )  {
			return false;
		} else {
			return $json_encoded[0];
		}
	}

	/**
	 * Should we early load the compatibility?
	 *
	 * @return bool Whether to load the compatibility or not.
	 */
	public function should_load_early() {
		return true;
	}
}

Few issues:

• First the line to replace the URL doesn't really work because we this filter is loaded much earlier than when Optimole setting class is registered, and I tried to load it at different stages but then it's too late and the changes don't take effect at the right time.

• Second, as you can see the solution is a bit hacky and it poses some issues as sometimes, quite randomly, the page stops to save properly and you've to save it again.

I suggest we can request this as a feature here and hope they add a filter to the CSS generation step if it's requested by more users.

At the same time, not sure how many users use this plugin that we should even worry about it. Let me know your thoughts.

[abaicus]

@HardeepAsrani Thank you for looking into this, and providing the insight! 👍🏻

I agree that we can let them know, and ask them if they can include a filter in the plugin. The solution seems a bit hacky indeed, after reading through it.

Maybe we can contact their support and at least let them know.

@kushh23 Is this a singular instance, or have you seen other requests for compatibility with the breakdance plugin?

[HardeepAsrani]

They suggest us to post feature request here: https://breakdance.canny.io/ - I can't open the URL; I get a 403 error. Not sure if it's same for everyone or just my IP/country is blocked.

[kushh23]

@kushh23 Is this a singular instance, or have you seen other requests for compatibility with the breakdance plugin?

@abaicus this is the only one who reported the issue till now 😅

[abaicus]

@HardeepAsrani In this case, I believe that contacting their support and letting them know should be good enough for now. 👍🏻

[HardeepAsrani]

@abaicus I've done that, thanks.

[ryantoth2410]

Hi have there been any update on this? or is it just on breakdance?

[selul]

@ryantoth2410 we havent been able to find a sustainable way of replacing this without Breakdance making the content available to rewrite the images. I haven't checked lately to see if they changed something, I will have a look and see if they added something recent to leverage here.