Map block: update to use new gutenberg API

[glendaviesnz]

Description

The Jetpack plugin Map block was recently updated to work with the new Gutenberg iframed site editor.. When this work was about to be merged a new API was added to Gutenberg to allow the automatic loading of 3rd party scripts into the editor iframe header.

While the gutenberg API is a more robust way to handle the issue of getting scripts into the iframe header, given that it was a new API, it was decided to merge the short term fix, and circle back later to refactor it to use the core API once stabilised.

The new API requires by default the use of a block.json file, and the url for the 3rd party resources are added to the script or style params. If block.json files are still not being used in Jetpack at the point of the refactor, then the alternative is to enqueue the scripts manually in the map block register_block method and add the resource handles to the settings array instead, eg.

function register_block() {
	\wp_enqueue_script(
		'js-mapblock',
		$path_to_resources . '/_inc/blocks/editor-assets/mapbox-gl-1.13.0.js'
	);
	\wp_enqueue_style(
		'css-mapblock',
		$path_to_resources . '/_inc/blocks/editor-assets/mapbox-gl-1.13.0.css'
	);
	Blocks::jetpack_register_block(
		BLOCK_NAME,
		array(
			'render_callback' => __NAMESPACE__ . '\load_assets',
			'script'          => 'js-mapblock',
			'style'           => 'css-mapblock',
		)
	);
}

See the original PR for details about how the resources are being copied from node_modules and renamed, some of this will need to be moved to the map.php file.

More details about use of scripts in the template editor can be found at https://make.wordpress.org/core/?p=89760&preview=1&_ppp=b976a86b78

[ramonjd]

Note to self: use the above information to consider reworking Podcast player asset loading as well.

[apeatling]

Update: We will need to wait on Jetpack to support the appropriate WP version with this included before we can go any further.