v0.4.25

demo.html

@@ -17,7 +17,7 @@
           margin: 0;
           overflow: hidden;
         }
-        
+
         iframe {
             user-select: none;
             -webkit-user-select: none;
@@ -923,7 +923,8 @@
 
       height: '100%',
       container : '#gjs',
-      fromElement: true,
+      fromElement: 1,
+      showOffsets: 1,
       plugins: ['gjs-plugin-export', 'gjs-preset-webpage'],
 
       // Insert some default images

js/grapesjs-preset-webpage.js

@@ -106,4 +106,28 @@ grapesjs.plugins.add('gjs-preset-webpage', (editor, opts) => {
   updateTooltip(pnm.getPanel('options').get('buttons'));
   updateTooltip(pnm.getPanel('views').get('buttons'));
 
+
+
+  /****************** EVENTS *************************/
+
+  // On component change show the Style Manager
+  editor.on('change:selectedComponent', function() {
+    var openLayersBtn = editor.Panels.getButton('views', 'open-layers');
+
+    // Don't switch when the Layer Manager is on or
+    // there is no selected component
+    if((!openLayersBtn || !openLayersBtn.get('active')) &&
+      editor.editor.get('selectedComponent')) {
+      var openSmBtn = editor.Panels.getButton('views', 'open-sm');
+      openSmBtn && openSmBtn.set('active', 1);
+    }
+  });
+
+  // Do stuff on load
+  editor.on('load', function() {
+    // Open block manager
+    var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
+    openBlocksBtn && openBlocksBtn.set('active', 1);
+  });
+
 });