Automattic / Automattic/jetpack

Map block: update to use new gutenberg API

Open
#19,896 2 comments 1 reaction 0 assignees View on GitHub
[Block] Map Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Description

The Jetpack plugin Map block was recently [updated to work with the new Gutenberg iframed site editor.](https://github.com/Automattic/jetpack/pull/19552). When this work was about to be merged a [new API was added](https://github.com/WordPress/gutenberg/pull/31873) 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.

```php
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](https://github.com/Automattic/jetpack/pull/19552) 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

Contributor guide

Open the contributing guide

Research direction

Start with the Map block's map.php and its register_block method, then review the original PR #19552 and the linked Gutenberg API change. Verify how the block's copied Mapbox assets are registered and identify the existing iframe-header workaround. Done means the Map block uses the Gutenberg API to load its third-party scripts and styles in the editor iframe.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.