Add `media` option to blocks

src/block_manager/model/Block.js

@@ -9,7 +9,10 @@ module.exports = Backbone.Model.extend({
     select: 0,
     // If true, all IDs of dropped component and its style will be changed
     resetId: 0,
+    // Block label
     label: '',
+    // HTML string for the media of the block, eg. SVG icon, image, etc.
+    media: '',
     content: '',
     category: '',
     attributes: {}

src/block_manager/view/BlockView.js

@@ -141,8 +141,12 @@ module.exports = Backbone.View.extend({
     const className = `${ppfx}block`;
     const label = model.get('label');
     const render = model.get('render');
+    const media = model.get('media');
     el.className += ` ${className} ${ppfx}one-bg ${ppfx}four-color-h`;
-    el.innerHTML = `<div class="${className}-label">${label}</div>`;
+    el.innerHTML = `
+      ${media ? `<div class="${className}__media">${media}</div>` : ''}
+      <div class="${className}-label">${label}</div>
+    `;
     el.title = el.textContent.trim();
     hasDnd(em) && el.setAttribute('draggable', true);
     const result = render && render({ el, model, className, prefix: ppfx });

src/styles/scss/_gjs_blocks.scss

@@ -54,6 +54,10 @@
   svg {
     fill: currentColor;
   }
+
+  &__media {
+    margin-bottom: 10px;
+  }
 }
 
 .#{$app-prefix}block-svg {