Apple Maps block gives error in WP 6.4-beta2 if MapKit Credentials is not configured.

[iamdharmesh]

Describe the bug

While debugging on E2E test failure on the WP trunk (WP 6.4-beta), I found that the Apple Maps block gives This block has encountered an error and cannot be previewed. error in WP 6.4-beta2 if MapKit Credentials is not configured.

Based on initial findings it seems, the issue is caused due to recent accessibility improvements in placeholder instructions (WordPress/gutenberg#45801), The placeholder component expects raw string in instructions but the plugin passes the <IsAdmin> component, which causes the issue with call to speak function and block encounter an error.

Steps to Reproduce

1. Install and activate the plugin on WP 6.4-beta-2
2. Keep Mapkit js credentials blank
3. Go to create post/page and add "Apple Maps" block
4. Notice error This block has encountered an error and cannot be previewed. error

Screenshots, screen recording, code snippet

Environment information

No response

WordPress information

No response

Code of Conduct

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

[fabiankaegy]

Great find on what's causing the issue. Let's see if we can help fix this in core before the 6.4 release.

[iamdharmesh]

@fabiankaegy Based on comment here it needs to be fixed here in maps-block-apple as well. right? What do you think?

The instructions prop is meant to accept raw strings. Instead, in your code you're passing a React element. It may have accidentally worked in previous versions of the Gutenberg plugin/WordPress, but the prop was always meant to be a string.

[fabiankaegy]

Ahh yeah, I had missed that in the comments. That is annoying. Thanks for pointing it out.

In that case yeah we will need to precompute all that logic and then only pass in the processed string.

[iamdharmesh]

@fabiankaegy I have raised a fix PR for this with a slightly different approach by dropping the usage of the instructions prop of Placeholder. Instructions contain a link to Mapkit docs and I didn't find any way to add link instructions while keeping instructions as a raw string (Maybe there is a way but I am not aware of it). Please let me know if you think we could have a better approach here.

Thanks