Fix custom classes for blocks

dist/grapes.js

@@ -21632,12 +21632,14 @@ __webpack_require__.r(__webpack_exports__);
         ppfx = this.ppfx,
         model = this.model;
     var disable = model.get('disable');
+    var attr = model.get('attributes') || {};
+    var cls = attr.class || '';
     var className = "".concat(ppfx, "block");
     var label = em && em.t("blockManager.labels.".concat(model.id)) || model.get('label');
     var render = model.get('render');
     var media = model.get('media');
     var clsAdd = disable ? "".concat(className, "--disable") : "".concat(ppfx, "four-color-h");
-    el.className = "".concat(className, " ").concat(ppfx, "one-bg ").concat(clsAdd);
+    el.className = "".concat(cls, " ").concat(className, " ").concat(ppfx, "one-bg ").concat(clsAdd).trim();
     el.innerHTML = "\n      ".concat(media ? "<div class=\"".concat(className, "__media\">").concat(media, "</div>") : '', "\n      <div class=\"").concat(className, "-label\">").concat(label, "</div>\n    ");
     el.title = el.textContent.trim();
     el.setAttribute('draggable', Object(utils_mixins__WEBPACK_IMPORTED_MODULE_2__["hasDnd"])(em) && !disable ? true : false);
@@ -38537,7 +38539,7 @@ var defaultConfig = {
   editors: editors,
   plugins: plugins,
   // Will be replaced on build
-  version: '0.16.10',
+  version: '0.16.11',
 
   /**
    * Initialize the editor with passed options

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.16.10",
+  "version": "0.16.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.16.10",
+  "version": "0.16.11",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/block_manager/view/BlockView.js

@@ -141,13 +141,15 @@ export default Backbone.View.extend({
   render() {
     const { em, el, ppfx, model } = this;
     const disable = model.get('disable');
+    const attr = model.get('attributes') || {};
+    const cls = attr.class || '';
     const className = `${ppfx}block`;
     const label =
       (em && em.t(`blockManager.labels.${model.id}`)) || model.get('label');
     const render = model.get('render');
     const media = model.get('media');
     const clsAdd = disable ? `${className}--disable` : `${ppfx}four-color-h`;
-    el.className = `${className} ${ppfx}one-bg ${clsAdd}`;
+    el.className = `${cls} ${className} ${ppfx}one-bg ${clsAdd}`.trim();
     el.innerHTML = `
       ${media ? `<div class="${className}__media">${media}</div>` : ''}
       <div class="${className}-label">${label}</div>