Add new theme editor events

[bakura10]

With the introduction of nesting, using the shopify:block:select and shopify:block:deselect became a bit complicated. For instance, if I select a slide, I want to turn off autoplay of the slideshow, but selecting a children of the slide should still keep the autoplay turned off. However, this will trigger the deselect event of the slide.

I suggest that two new events would be added:

• shopify:block-group:select => this event would be fired if this group or any of its children is selected. If a nested block is selected, then the event must be triggered as well to all parents.
• shopify:block-group:deselect => this event would be fired only if we switch to a block that is not itself or one of its descendants. Similarily, if a nested block is deselected, the event should also be triggered to all parents.

EDIT: I think that in order to make this easier to handle, it should be better if those events would be triggered on the target and would NOT bubble.

The goal would be to do something like this:

class Slide extends HTMLElement {
  connectedCallback() {
     this.addEventListener('shopify:block-group:select', this.turnOffAutoplay);
     this.addEventListener('shopify:block-group:deselect', this.turnOnAutoplay);
  }
}

If the event would bubble, then any deselect event on nested blocks would be captured on the parent. Of course we could check the event directly:

this.addEventListener('shopify:block-group:select', this.turnOffAutoplay);
this.addEventListener('shopify:block-group:deselect', (event) => {
  if (event.target === this) {
     this.turnOffAutoplay();
  }
}); 

But I think that not bubbling would be a more pragmatic usage considering the goal of such events.