Brightcove Video Block requires 'Block Recovery' due to misnamed attribute 'languageDetection'

[claimableperch]

Describe the bug

Not found a workaround for this. First time a brightcove video block is added and saved, 'languageDetection' is used as the attribute, which is no substitute for 'language_detection', which once 'Block recovery' has run, works fine and appears without error on reload of Gutenberg. The code in assets/src/js/block.js appears to be missing the language_detection attribute on the first save only.

Steps to Reproduce

1. access your gutenberg to make a new post
2. add a brightcove video
3. select the media item
4. save draft
5. reload gutenberg
6. block recovery is only way to save block / code editor can be used to change languageDetection to language_detection.

Screenshots, screen recording, code snippet

No response

Environment information

All

WordPress information

<?php
/**
 * BC_Video_Correction class file.
 *
 * @package Brightcove_Video_Connect
 */

/**
 * BC_Video_Shortcode class
 */
class BC_Video_Correction
{
	protected static self $instance;
	public bool $changed;
	public string $content;

	public static function instance() :self {
		if ( ! isset( self::$instance ) ) {
			self::$instance = new BC_Video_Correction();
		}
		return self::$instance;
	}

	private function __construct() {}

	public function initialize()
	{
		add_filter( 'wp_insert_post_data', [ $this, 'correctBrightcoveBlock'], 10, 1 );
		add_filter( 'wp_insert_post_data', [ $this, 'correctBrightcoveShortcode'], 10, 2 );
	}

	/**
	 * @param array $data data to be saved.
	 *
	 * @return array corrected data.
	 */
	public function correctBrightcoveBlock( array $data ) :array {
		if ( ! isset( $data['post_content'] ) ) {
			return $data;
		}
		$blocks = parse_blocks( $data['post_content'] );
		if ( 0 === count( $blocks ) ) {
			return $data;
		}
		$this->changed = false;
		$blocks = array_map(
			[ $this, 'correctBlock' ],
			$blocks
		);
		if ( $this->changed ) {
			$data['post_content'] = addslashes( serialize_blocks( $blocks ) );
		}
		return $data;
	}

	public function correctBlock( array $block ): array {
		if ( $block['blockName'] !== 'bc/brightcove' ) {
			return $block;
		}
		if ( isset( $block['attrs']['languageDetection'] ) ) {
			$language_detection = $block['attrs']['language_detection'] ?? '';
			if ( empty( $language_detection ) ) {
				$language_detection = $block['attrs']['languageDetection'] ?? '';
			}
			unset( $block['attrs']['languageDetection'] );
			$block['attrs']['language_detection'] = $language_detection;
			$this->changed = true;
		}
		return $block;
	}


	/**
	 * @param array $data data to be saved.
	 *
	 * @return array corrected data.
	 */
	public function correctBrightcoveShortcode( array $data ) :array {
		if ( ! isset( $data['post_content'] ) ) {
			return $data;
		}
		if ( ! shortcode_exists( 'bc_video' ) ) {
			return $data;
		}
		$content = wp_unslash( $data['post_content'] );
		$regex = get_shortcode_regex( ['bc_video'] );
		$matches = [];
		preg_match_all( '/' . $regex . '/m', $content, $matches, PREG_SET_ORDER );
		if ( 0 === count( $matches ) ) {
			return $data;
		}
		$this->changed = false;
		$this->content = $content;
		array_walk(
			$matches,
			[ $this, 'correctShortcode' ]
		);
		if ( $this->changed ) {
			$data['post_content'] = addslashes( $this->content );
		}
		return $data;
	}

	public function correctShortcode( array $match ): void {
		$atts = shortcode_parse_atts( $match[3] );
		if ( isset( $atts['languagedetection'] ) ) {
			$language_detection = $atts['language_detection'] ?? '';
			if ( empty( $language_detection ) ) {
				$language_detection = $atts['languagedetection'] ?? '';
			}
			unset( $atts['languagedetection'] );
			$atts['language_detection'] = $language_detection;
			$shortcode = "[bc_video";
			foreach( $atts as $name => $value ) {
				$shortcode .= " $name=\"$value\"";
			}
			$shortcode .= "]";
			$count = 0;
			$this->content = str_replace( $match[0], $shortcode, $this->content, $count );
			$this->changed = 0 < $count;
		}
	}
}

And...

require_once BRIGHTCOVE_PATH . 'includes/class-bc-video-correction.php';
...
add_action( 'init', array( BC_Video_Correction::instance(), 'initialize' ), 11 );

Code of Conduct

• I agree to follow this project's Code of Conduct

[oscarssanchezz]

Hi @claimableperch ,

Thanks for opening this issue. Indeed there is a typo here:

brightcove-video-connect/assets/js/src/block.js

Line 207 in fabd097

languageDetection: '',

However I couldn't reproduce the issue you are describing, I save the post as draft, reload and the block doesn't crash. Would you mind attaching a quick screenshare of it please? The typo has to get fixed for sure but I would just like to test the problem you reported back.

[claimableperch]

It maybe is confused in our implementation because the block saves as a shortcode? We had to deploy a workaround (much the same as that above) and there are business issues with communications involving screenshots of our implementation. Suffice to say that serialisation with 'languageDetection' alongside 'language_detection' was causing inoperability for our users. Manual correction, by removing ' languageDetection=""' restored articles. This problem arose when we upgraded to the latest release from 2.4.1, if memory serves.

[oscarssanchezz]

Thanks @claimableperch ,

Could you try the latest develop branch and check if it solves your issue? Unfortunately we couldn't use your PR as it assumes the release will just have that bugfix, and because we'd really like to have this deployed sooner rather than later, of course we gave you proper credit for it.