General updates

README.md

@@ -68,7 +68,7 @@ $ npm run build
 Launch server, which also gonna watch some files, and try out the demo on `localhost:8000`
 
 ```sh
-$ npm run dev
+$ npm start
 ```
 
 Tests are already available inside browser on `localhost:8000/test`
@@ -126,7 +126,7 @@ Check the getting started guide here: [wiki]
 
 ## API
 
-API References (draft) could be found here: [wiki/API-Reference]
+API References (draft) could be found here: [API-Reference]
 
 
 ## Testing
@@ -171,4 +171,5 @@ BSD 3-clause
 [Spectrum]: <https://github.com/bgrins/spectrum>
 [FontAwesome]: <https://fortawesome.github.io/Font-Awesome/>
 [wiki]: <https://github.com/artf/grapesjs/wiki>
+[API-Reference]: <https://github.com/artf/grapesjs/wiki/API-Reference>
 [CMS]: <https://it.wikipedia.org/wiki/Content_management_system>

package.json

@@ -47,6 +47,6 @@
     "postinstall": "node ./node_modules/bower/bin/bower install --config.interactive=false",
     "build": "./node_modules/.bin/grunt build",
     "test": "./node_modules/.bin/grunt test",
-    "dev": "./node_modules/.bin/grunt dev"
+    "start": "./node_modules/.bin/grunt dev"
   }
 }

src/block_manager/view/BlockView.js

@@ -3,13 +3,15 @@ function(Backbone) {
 
   return Backbone.View.extend({
 
-    initialize: function(o) {
-      this.config = o.config || {};
+    initialize: function(o, config) {
+      this.config = config || {};
+      this.ppfx = this.config.pStylePrefix || '';
       this.listenTo(this.model, 'destroy', this.remove);
     },
 
     render: function() {
       this.el.innerHTML = this.model.get('label');
+      this.$el.addClass(this.ppfx + 'block');
       return this;
     },
 

src/commands/view/OpenBlocks.js

@@ -7,7 +7,8 @@ define(function() {
 				var pfx = config.stylePrefix;
 				var bm = editor.BlockManager;
 				if(!this.blocks){
-					this.blocks = bm.render();
+					this.blocks = $('<div/>').get(0);
+					this.blocks.appendChild(bm.render());
 					var panels = editor.Panels;
 					if(!panels.getPanel('views-container'))
 						panelC = panels.addPanel({id: 'views-container'});

src/editor/config/config.js

@@ -102,9 +102,10 @@ define(function () {
 					id: 'b1',
 	        label: 'Block1',
 	        content: '<h1>Block 1</h1>',
+	        attributes: { title: 'Block1', class:'b1-cl'}
 	      },{
 					id: 'b2',
-	        label: 'Block2',
+	        label: '&hearts; Block2',
 	        content: '<h1>Block 2</h1>',
 	      },{
 					id: 'b3',

styles/css/main.css

@@ -3393,6 +3393,27 @@ ol.example li.placeholder:before {
     filter: alpha(opacity=90); }
 
 /********* END Style Manager **********/
+/********* Block manager **********/
+.wte-blocks-c {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start; }
+
+.wte-block {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  width: 45%;
+  padding: 1em;
+  box-sizing: border-box;
+  height: 100px;
+  cursor: all-scroll;
+  margin: 2.5%; }
+
+/********* END Block manager **********/
 /********* Class manager **********/
 .wte-clm-tags {
   font-size: 11px;

styles/scss/main.scss

@@ -4,7 +4,7 @@
 $app-prefix: 	'wte-';
 $nv-prefix: 	$app-prefix + 'nv-';
 $rte-prefix: 	$app-prefix + 'rte-';
-$comp-prefix: 	$app-prefix + 'comp-';
+$comp-prefix: $app-prefix + 'comp-';
 $mdl-prefix: 	$app-prefix + 'mdl-';
 $am-prefix: 	$app-prefix + 'am-';
 $cm-prefix: 	$app-prefix + 'cm-';
@@ -974,6 +974,29 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
 }
 /********* END Style Manager **********/
 
+
+
+/********* Block manager **********/
+
+.#{$app-prefix}blocks-c{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.#{$app-prefix}block{
+  @include user-select(none);
+  width: 45%;
+  padding: 1em;
+  box-sizing: border-box;
+  height: 100px;
+  cursor:all-scroll;
+  margin: 2.5%;
+}
+
+/********* END Block manager **********/
+
+
+
 /********* Class manager **********/
 $addBtnBg: lighten($mainDkColor, 10%);
 $paddElClm: 5px 6px;

test/specs/block_manager/view/BlocksView.js

@@ -77,7 +77,7 @@ define([path + 'BlocksView', 'BlockManager/model/Blocks'],
                 view.el.children.length.should.equal(2);
               });
 
-              it("Render children", function (){
+              it("Render container", function (){
                 view.el.getAttribute('class').should.equal(ppfx + 'blocks-c');
               });