External Link Not Working Correctly

Hello ! Sorry for the wait, but I’ve managed to find a solution for you !

The plugin uses iframes to display the sketch in the page. Unfortunately, due to security restrictions imposed by web browsers, it’s generally not possible for JavaScript running within an iframe to directly access the scope outside of the iframe, especially if the iframe is displaying content from a different domain.

That being said, I have managed to find a workaround for your use case, but it requires for you to be able to also add JavaScript to your pages, using a separate plugin.

Instead of directly setting the page’s location to your new URL, we need to send a message to the parent page, and update the location from the page.

In your sketch, instead of using

document.location.;

We can send a message to the parent page requesting navigation:

window.parent.postMessage({ action: 'navigate', url: 'https://example.com' }, '*');

Now in the page which contains the p5.js block, we can handle that request:

// Listen for messages from the iframe
window.addEventListener('message', function(event) {
	let iframe = document.querySelector(".wp-block-gutenbergp5-p5js iframe")
	
	// Check that there is an iframe
	if (iframe == null) return;
	
	// Check if the message is from a trusted source
	if (event.source === iframe.contentWindow) {
		// Check if the message is requesting navigation
		if (event.data.action === 'navigate') {
			// Perform navigation to the specified URL
			window.location.href = event.data.url;
		}
	}
});

You can of course use the same logic to perform any other code which needs to communicate between the contents of the iframe and the parent page.

Thank you for using this plugin !

Cheers,
Florian