Add `disable` property to blocks

dist/grapes.js

@@ -21551,7 +21551,7 @@ __webpack_require__.r(__webpack_exports__);
     var config = this.config,
         em = this.em; //Right or middel click
 
-    if (e.button !== 0 || !config.getSorter || this.el.draggable) return;
+    if (e.button !== 0 || !config.getSorter || !this.el.draggable) return;
     em.refreshCanvas();
     var sorter = config.getSorter();
     sorter.setDragHelper(this.el, e);
@@ -32862,32 +32862,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /* harmony default export */ __webpack_exports__["default"] = (_Component__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
   defaults: _objectSpread({}, _Component__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, {
-    type: 'row',
     tagName: 'tr',
     draggable: ['thead', 'tbody', 'tfoot'],
     droppable: ['th', 'td']
-  }),
-  initialize: function initialize(o, opt) {
-    _Component__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.initialize.apply(this, arguments); // Clean the row from non cell components
-
-    var cells = [];
-    var components = this.get('components');
-    components.each(function (model) {
-      return model.is('cell') && cells.push(model);
-    });
-    components.reset(cells);
-  }
+  })
 }, {
   isComponent: function isComponent(el) {
-    var result = '';
-
-    if (el.tagName == 'TR') {
-      result = {
-        type: 'row'
-      };
-    }
-
-    return result;
+    return el.tagName == 'TR' && true;
   }
 }));
 
@@ -35819,7 +35800,7 @@ Object(utils_ColorPicker__WEBPACK_IMPORTED_MODULE_3__["default"])($);
     inputEl.value = value;
     colorEl.get(0).style.backgroundColor = valueClr; // This prevents from adding multiple thumbs in spectrum
 
-    if (opts.fromTarget) {
+    if (opts.fromTarget || opts.fromInput && !opts.avoidStore) {
       colorEl.spectrum('set', valueClr);
       this.noneColor = value == 'none';
     }
@@ -38550,7 +38531,7 @@ var defaultConfig = {
   editors: editors,
   plugins: plugins,
   // Will be replaced on build
-  version: '0.16.8',
+  version: '0.16.9',
 
   /**
    * Initialize the editor with passed options

package-lock.json

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

package.json

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

src/block_manager/model/Block.js

@@ -11,6 +11,8 @@ export default Backbone.Model.extend({
     resetId: 0,
     // Block label
     label: '',
+    // Disable the drag of the block
+    disable: 0,
     // HTML string for the media of the block, eg. SVG icon, image, etc.
     media: '',
     content: '',

src/block_manager/view/BlockView.js

@@ -60,9 +60,11 @@ export default Backbone.View.extend({
    * @private
    */
   startDrag(e) {
-    const { config, em } = this;
+    const { config, em, model } = this;
+    const disable = model.get('disable');
     //Right or middel click
-    if (e.button !== 0 || !config.getSorter || this.el.draggable) return;
+    if (e.button !== 0 || !config.getSorter || this.el.draggable || disable)
+      return;
     em.refreshCanvas();
     const sorter = config.getSorter();
     sorter.setDragHelper(this.el, e);
@@ -138,18 +140,20 @@ export default Backbone.View.extend({
 
   render() {
     const { em, el, ppfx, model } = this;
+    const disable = model.get('disable');
     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');
-    el.className += ` ${className} ${ppfx}one-bg ${ppfx}four-color-h`;
+    const clsAdd = disable ? `${className}--disable` : `${ppfx}four-color-h`;
+    el.className = `${className} ${ppfx}one-bg ${clsAdd}`;
     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);
+    el.setAttribute('draggable', hasDnd(em) && !disable ? true : false);
     const result = render && render({ el, model, className, prefix: ppfx });
     if (result) el.innerHTML = result;
     return this;