Update buttons style

docs/.vuepress/components/DemoBasicBlocks.vue

@@ -10,43 +10,8 @@
 <script>
 module.exports = {
   mounted() {
-    window.editor2 = grapesjs.init({
-      container: '#gjs2',
-      fromElement: true,
-      height: '300px',
-      width: 'auto',
-      storageManager: { type: null },
-      panels: { defaults: [] },
-      // ...
-      blockManager: {
-        appendTo: '#blocks2',
-        blocks: [
-          {
-            id: 'section', // id is mandatory
-            label: '<b>Section</b>',
-            attributes: { class:'gjs-block-section' },
-            content: `<section>
-              <h1>This is a simple title</h1>
-              <div>This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
-            </section>`,
-          }, {
-            id: 'text',
-            label: 'Text',
-            content: '<div data-gjs-type="text">Insert your text here</div>',
-          }, {
-            id: 'image',
-            label: 'Image',
-            // Select the component once dropped in canavas
-            select: true,
-            // You can pass components as a JSON instead of a simple HTML string,
-            // in this case we also use a defined component type `image`
-            content: { type: 'image' },
-            // This triggers `active` on dropped components
-            activate: true,
-          }
-        ]
-      },
-    });
+    const utils = require('./demos/utils.js');
+    window.editor2 = grapesjs.init(utils.gjsConfigBlocks);
   }
 }
 </script>

docs/.vuepress/components/DemoCanvasOnly.vue

@@ -2,11 +2,10 @@
 </template>
 
 <script>
-var utils = require('./demos/utils.js');
-
 module.exports = {
   mounted() {
-    const editor = grapesjs.init(utils.gjsConfig);
+    const utils = require('./demos/utils.js');
+    const editor = grapesjs.init(utils.gjsConfigStart);
   }
 }
 </script>

docs/.vuepress/components/DemoCustomPanels.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div id="basic-panel3"></div>
+    <div id="gjs3">
+      <h1>Hello World Component!</h1>
+    </div>
+    <div id="blocks3"></div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    // show addPanel with toggle-borders, export-code and custom alert show selected JSON + panel style
+    const utils = require('./demos/utils.js');
+    const editor3 = grapesjs.init(utils.gjsConfigPanels);
+    editor3.Panels.addPanel({
+      id: 'custom-panel',
+      el: '#basic-panel3',
+      buttons: [
+        {
+          id: 'visibility',
+          // active by default
+          active: true,
+          className: 'btn-toggle-borders',
+          label: '<u>B</u>',
+          // Built-in command
+          command: 'sw-visibility',
+        }, {
+          id: 'export',
+          className: 'btn-open-export',
+          label: 'Exp',
+          command: 'export-template',
+          // For grouping context of buttons in the same panel
+          context: 'export-template',
+        }
+      ],
+    });
+    window.editor3 = editor3;
+  }
+}
+</script>
+
+<style>
+  #gjs3 {
+    border: 3px solid #444;
+  }
+  #basic-panel3 {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: initial;
+  }
+  .content pre {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+</style>

docs/.vuepress/components/demos/utils.js

@@ -1,16 +1,61 @@
+// Don't know yet why but can't use ES6
+
+var blockManager = {
+  appendTo: '#blocks2',
+  blocks: [
+    {
+      id: 'section', // id is mandatory
+      label: '<b>Section</b>',
+      attributes: { class:'gjs-block-section' },
+      content: `<section>
+        <h1>This is a simple title</h1>
+        <div>This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+      </section>`,
+    }, {
+      id: 'text',
+      label: 'Text',
+      content: '<div data-gjs-type="text">Insert your text here</div>',
+    }, {
+      id: 'image',
+      label: 'Image',
+      // Select the component once dropped in canavas
+      select: true,
+      // You can pass components as a JSON instead of a simple HTML string,
+      // in this case we also use a defined component type `image`
+      content: { type: 'image' },
+      // This triggers `active` on dropped components
+      activate: true,
+    }
+  ]
+};
+
+var gjsConfigStart = {
+  // Indicate where to init the editor. It's also possible to pass an HTMLElement
+  container: '#gjs',
+  // Get the content for the canvas direectly from the element
+  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
+  fromElement: true,
+  // Size of the editor
+  height: '300px',
+  width: 'auto',
+  // Disable the storage manager for the moment
+  storageManager: { type: null },
+  // Avoid any default panel
+  panels: { defaults: [] },
+};
+
+var gjsConfigBlocks = Object.assign({}, gjsConfigStart, {
+  container: '#gjs2',
+  blockManager,
+});
+
+var gjsConfigPanels = Object.assign({}, gjsConfigBlocks, {
+  container: '#gjs3',
+  blockManager: Object.assign({}, blockManager, { appendTo: '#blocks3' }),
+});
+
 module.exports = {
-  gjsConfig: {
-    // Indicate where to init the editor. It's also possible to pass an HTMLElement
-    container: '#gjs',
-    // Get the content for the canvas direectly from the element
-    // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
-    fromElement: true,
-    // Size of the editor
-    height: '300px',
-    width: 'auto',
-    // Disable the storage manager for the moment
-    storageManager: { type: null },
-    // Avoid any default panel
-    panels: { defaults: [] },
-  },
+  gjsConfigStart,
+  gjsConfigBlocks,
+  gjsConfigPanels,
 };

docs/getting-started.md

@@ -141,8 +141,16 @@ myComponent.components().forEach(component => /* ... do something ... */);
 myComponent.components('<div>New content</div>');
 ```
 
-## Panels
-Now that we have a canvas and custom blocks let's see how to create a new panel with some buttons inside which trigger commands (from the core or custom one).
+## Panels & Buttons
+Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using [Panels API](api/panels.html)) which trigger commands (from the core or custom one).
+
+```js
+editor
+```
+
+<Demo>
+ <DemoCustomPanels/>
+</Demo>
 
 -- show addPanel with toggle-borders, export-code and custom alert show selected JSON + panel style
 

src/styles/scss/_gjs_panels.scss

@@ -51,8 +51,8 @@
 
   &btn {
     box-sizing: border-box;
-    height: 30px;
-    width: 30px;
+    min-height: 30px;
+    min-width: 30px;
     line-height: 21px;
     background-color: transparent;
     border: none;