[QUESTION]: How can I create block with background image with behavior like built-in "image"?

@noogen Thanks for advise, implemented it like this:

  const domc = editor.DomComponents

  domc.addType('image-block', {
    extend: 'default',
    model: {
      defaults: function () {
        return {
          name: 'Background image',
          type: 'image-block',
          tagName: 'div',
          void: false,
          droppable: true
        }
      }
    },
    view: {
      init () {
        this.listenTo(this.model, 'active', this.onActive)
        this.listenTo(this.model, 'change:src', this.updateImage)
      },
      events: {
        dblclick: 'onActive'
      },
      onActive () {
        editor.runCommand('open-assets', {
          target: this.model,
          types: ['image'],
          accept: 'image/*'
        })
      },
      updateImage (model, url) {
        if (url) {
          const style = model.getStyle()

          model.setStyle({
            'background-image': style['background-color'] || `url("${url}")`,
            'background-size': style['background-size'] || 'cover',
            'background-position': style['background-position'] || 'center center',
            'background-repeat': style['background-repeat'] || 'no-repeat',
            'min-height': style['min-height'] || '200px'
          })
        }
      }
    }
  })

  const bm = editor.BlockManager

  bm.add('image-block', {
    label: 'Background Image',
    category: 'Basic',
    content: {
      type: 'image-block',
      activeOnRender: true,
      style: {
        'background-image': `url('${window.origin}/images/image-placeholder.png')`,
        'min-height': '200px',
        'background-size': 'cover',
        'background-position': 'center center',
        'background-repeat': 'no-repeat'
      }
    }
  })

@kuhelbeher because, ultimately, it is still an image. It's not for use/override the way you want because in the back-end code (look at both image component model and view) https://github.com/artf/grapesjs/blob/dev/src/dom_components/view/ComponentImageView.js#L55 and https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/ComponentImage.js#L83 are still very much ties together. It's better that you create a wrapper component and execute command open-assets in onActive of the view. Hint, see issue - https://github.com/artf/grapesjs/issues/2250