0

I'm creating a Gutenberg block that contains a live map (like Google Maps or OpenStreetMaps). The issue I run into is that clicking on the map doesn't select the block, so that the toolbar and inspector controls never show up. I'm able to capture the click, but I'm not sure what command I should call to select the block that contains the map the user clicked on. I tried looking through the docs but couldn't find an API for this. I also tried calling click() on several divs that wrap the block, but no luck.

I also noticed that other blocks that have to deal with this kind of dynamic content use a div that overlays on top of the dynamic content to sidestep this issue. I'm trying to not use this kind of method to give the user a very dynamic editing experience.

The registerBlockType edit prop returns this:

   wp.element.createElement('div', {className: 'map-block-wrapper'},
      wp.element.createElement(MapBlock.default, createOptions)
   )

You can see that this uses a MapBlock React component. This is the custom component I wrote to display the dynamic map. Instead of posting the entire file I'll just put the relevant parts here.

MapBlock.js:

constructor(props) {
    super(props)
    this.el = React.createRef()
    //Load third party mapping library (like google, etc)
    this.map = new google.maps.Map(this.el, mapOptions);
}

render() {
  return (<div className="map" ref={this.el} style={{height: '350px'}}  />)
}

This displays the map on the editor, but since you can zoom and pan the map with the mouse, the mouse events are captured and they don't bubble to the editor to show the toolbar and the block inspector.

  • Can you share your code? It's hard to help address your issue without it. – Welcher May 30 at 1:28
  • It's hard to share the relevant part of the code, since there's a lot of it. I will edit my question to add the sample code. Thanks for your reply. – derickito May 30 at 1:49
  • I've posted the relevant code, let me know if that's still not clear enough. I can post the entire file. Thanks again. – derickito May 30 at 2:02
  • 1
    Can you disable map interaction in edit and use Inspector Controls to control the map? – Welcher May 30 at 11:22
  • I think I'm going to have to end up doing that. What I came up with yesterday was to have a div on top of the map that you can click on. Once the block is selected the div can go away and allow map interaction. I'll add an answer once I implement this. – derickito May 30 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.