Classes block

[ronaldohoch]

Hello guys, I have two questions:

1 - How can i made the class box go to top of the panel, like the demo page?
I've the whole code and can't find a way.

My editor:

Demo editor:

2 - My devices panel don't stay checked when i select. I'm i'm forgetting one thing?
My editor:

Demo editor:

This is my js file:

const editor = grapesjs.init({
  // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  // Size of the editor
  height: 'auto',
  width: 'auto',
  allowScripts: 1,
  selectorManager: { componentFirst: true },
  plugins: [
    "gjs-blocks-basic",
    // 'gjs-navbar'
  ],
  pluginsOpts: {
    "gjs-blocks-basic": { },
    // 'gjs-navbar': { }
  },
  panels: {
    defaults: [
      {
        id: 'layers',
        el: '.panel__right',
      },
      {
        id: 'panel-switcher',
        el: '.panel__switcher',
        buttons: [
          {
            id: 'show-blocks',
            active: true,
            className: '',
            label: 'Plugins',
            command: {
              run(editor, sender) {
                document.querySelector("#blocks").style.display = "";
              },
              stop(editor, sender) {
                document.querySelector("#blocks").style.display = "none";
              }
            },
            togglable: true,
          },
          {
            id: 'show-layers',
            active: false,
            label: 'Layers',
            command: 'show-layers',
            // Once activated disable the possibility to turn it off
            togglable: true,
          },
          {
            id: 'show-configs',
            active: false,
            label: 'Styles',
            command: 'show-configs',
            togglable: true,
          }
        ],
      },
      {
        id: 'panel-devices',
        el: '.panel__devices',
        buttons: [
          { id: "set-device-desktop", command: function (e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1 },
          { id: "set-device-tablet", command: function (e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
          { id: "set-device-mobile", command: function (e) { return e.setDevice("Mobile") }, className: "fa fa-mobile" },
        ],
      }
    ]
  },
  storageManager: {
    id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
    type: 'local',          // Type of the storage
    autosave: true,         // Store data automatically
    autoload: true,         // Autoload stored data on init
    stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
    storeComponents: true,  // Enable/Disable storing of components in JSON format
    storeStyles: true,      // Enable/Disable storing of rules in JSON format
    storeHtml: true,        // Enable/Disable storing of components as HTML string
    storeCss: true,         // Enable/Disable storing of rules as CSS string
  },
  blockManager: {
    appendTo: '#blocks',
    blocks: [
      {
        id: 'section', // id is mandatory
        label: '<b>Section</b>', // You can use HTML/SVG inside labels
        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</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 it's dropped
        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` event on dropped components and the `image`
        // reacts by opening the AssetManager
        activate: true,
      },
      {
        id: "section-3",
        label: "3 columns",
        content: `
        <div class="row">
          <div class="cell">
            <div class="row">
              <div class="cell">
              </div>
              <div class="cell">
              </div>
              <div class="cell">
              </div>
            </div>
          </div>
        </div>
        `
      }
    ]
  },
  layerManager: {
    appendTo: '.layers-container'
  },
  selectorManager: {
    appendTo: '.styles-container'
  },
  traitManager: {
    appendTo: '.traits-container',
  },
  customStyleManager: [

  ],
  styleManager: {
    clearProperties: 1,
    appendTo: '.styles-container',
    sectors: [
      {
        name: 'General',
        buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
        properties: [{
          name: 'Alignment',
          property: 'float',
          type: 'radio',
          defaults: 'none',
          list: [
            { value: 'none', className: 'fa fa-times' },
            { value: 'left', className: 'fa fa-align-left' },
            { value: 'right', className: 'fa fa-align-right' }
          ],
        },
        { property: 'position', type: 'select' }
        ],
      }, {
        name: 'Dimension',
        open: false,
        buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
        properties: [{
          id: 'flex-width',
          type: 'integer',
          name: 'Width',
          units: ['px', '%'],
          property: 'flex-basis',
          toRequire: 1,
        }, {
          property: 'margin',
          properties: [
            { name: 'Top', property: 'margin-top' },
            { name: 'Right', property: 'margin-right' },
            { name: 'Bottom', property: 'margin-bottom' },
            { name: 'Left', property: 'margin-left' }
          ],
        }, {
          property: 'padding',
          properties: [
            { name: 'Top', property: 'padding-top' },
            { name: 'Right', property: 'padding-right' },
            { name: 'Bottom', property: 'padding-bottom' },
            { name: 'Left', property: 'padding-left' }
          ],
        }],
      }, {
        name: 'Typography',
        open: false,
        buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
        properties: [
          { name: 'Font', property: 'font-family' },
          { name: 'Weight', property: 'font-weight' },
          { name: 'Font color', property: 'color' },
          {
            property: 'text-align',
            type: 'radio',
            defaults: 'left',
            list: [
              { value: 'left', name: 'Left', className: 'fa fa-align-left' },
              { value: 'center', name: 'Center', className: 'fa fa-align-center' },
              { value: 'right', name: 'Right', className: 'fa fa-align-right' },
              { value: 'justify', name: 'Justify', className: 'fa fa-align-justify' }
            ],
          }, {
            property: 'text-decoration',
            type: 'radio',
            defaults: 'none',
            list: [
              { value: 'none', name: 'None', className: 'fa fa-times' },
              { value: 'underline', name: 'underline', className: 'fa fa-underline' },
              { value: 'line-through', name: 'Line-through', className: 'fa fa-strikethrough' }
            ],
          }, {
            property: 'text-shadow',
            properties: [
              { name: 'X position', property: 'text-shadow-h' },
              { name: 'Y position', property: 'text-shadow-v' },
              { name: 'Blur', property: 'text-shadow-blur' },
              { name: 'Color', property: 'text-shadow-color' }
            ],
          }],
      }, {
        name: 'Decorations',
        open: false,
        buildProps: ['opacity', 'border-radius', 'border', 'box-shadow', 'background-bg'],
        properties: [{
          type: 'slider',
          property: 'opacity',
          defaults: 1,
          step: 0.01,
          max: 1,
          min: 0,
        }, {
          property: 'border-radius',
          properties: [
            { name: 'Top', property: 'border-top-left-radius' },
            { name: 'Right', property: 'border-top-right-radius' },
            { name: 'Bottom', property: 'border-bottom-left-radius' },
            { name: 'Left', property: 'border-bottom-right-radius' }
          ],
        }, {
          property: 'box-shadow',
          properties: [
            { name: 'X position', property: 'box-shadow-h' },
            { name: 'Y position', property: 'box-shadow-v' },
            { name: 'Blur', property: 'box-shadow-blur' },
            { name: 'Spread', property: 'box-shadow-spread' },
            { name: 'Color', property: 'box-shadow-color' },
            { name: 'Shadow type', property: 'box-shadow-type' }
          ],
        }, {
          id: 'background-bg',
          property: 'background',
          type: 'bg',
        },],
      }, {
        name: 'Extra',
        open: false,
        buildProps: ['transition', 'perspective', 'transform'],
        properties: [{
          property: 'transition',
          properties: [
            { name: 'Property', property: 'transition-property' },
            { name: 'Duration', property: 'transition-duration' },
            { name: 'Easing', property: 'transition-timing-function' }
          ],
        }, {
          property: 'transform',
          properties: [
            { name: 'Rotate X', property: 'transform-rotate-x' },
            { name: 'Rotate Y', property: 'transform-rotate-y' },
            { name: 'Rotate Z', property: 'transform-rotate-z' },
            { name: 'Scale X', property: 'transform-scale-x' },
            { name: 'Scale Y', property: 'transform-scale-y' },
            { name: 'Scale Z', property: 'transform-scale-z' }
          ],
        }]
      }, {
        name: 'Flex',
        open: false,
        properties: [{
          name: 'Flex Container',
          property: 'display',
          type: 'select',
          defaults: 'block',
          list: [
            { value: 'block', name: 'Disable' },
            { value: 'flex', name: 'Enable' }
          ],
        }, {
          name: 'Flex Parent',
          property: 'label-parent-flex',
          type: 'integer',
        }, {
          name: 'Direction',
          property: 'flex-direction',
          type: 'radio',
          defaults: 'row',
          list: [{
            value: 'row',
            name: 'Row',
            className: 'icons-flex icon-dir-row',
            title: 'Row',
          }, {
            value: 'row-reverse',
            name: 'Row reverse',
            className: 'icons-flex icon-dir-row-rev',
            title: 'Row reverse',
          }, {
            value: 'column',
            name: 'Column',
            title: 'Column',
            className: 'icons-flex icon-dir-col',
          }, {
            value: 'column-reverse',
            name: 'Column reverse',
            title: 'Column reverse',
            className: 'icons-flex icon-dir-col-rev',
          }],
        }, {
          name: 'Justify',
          property: 'justify-content',
          type: 'radio',
          defaults: 'flex-start',
          list: [{
            value: 'flex-start',
            className: 'icons-flex icon-just-start',
            title: 'Start',
          }, {
            value: 'flex-end',
            title: 'End',
            className: 'icons-flex icon-just-end',
          }, {
            value: 'space-between',
            title: 'Space between',
            className: 'icons-flex icon-just-sp-bet',
          }, {
            value: 'space-around',
            title: 'Space around',
            className: 'icons-flex icon-just-sp-ar',
          }, {
            value: 'center',
            title: 'Center',
            className: 'icons-flex icon-just-sp-cent',
          }],
        }, {
          name: 'Align',
          property: 'align-items',
          type: 'radio',
          defaults: 'center',
          list: [{
            value: 'flex-start',
            title: 'Start',
            className: 'icons-flex icon-al-start',
          }, {
            value: 'flex-end',
            title: 'End',
            className: 'icons-flex icon-al-end',
          }, {
            value: 'stretch',
            title: 'Stretch',
            className: 'icons-flex icon-al-str',
          }, {
            value: 'center',
            title: 'Center',
            className: 'icons-flex icon-al-center',
          }],
        }, {
          name: 'Flex Children',
          property: 'label-parent-flex',
          type: 'integer',
        }, {
          name: 'Order',
          property: 'order',
          type: 'integer',
          defaults: 0,
          min: 0
        }, {
          name: 'Flex',
          property: 'flex',
          type: 'composite',
          properties: [{
            name: 'Grow',
            property: 'flex-grow',
            type: 'integer',
            defaults: 0,
            min: 0
          }, {
            name: 'Shrink',
            property: 'flex-shrink',
            type: 'integer',
            defaults: 0,
            min: 0
          }, {
            name: 'Basis',
            property: 'flex-basis',
            type: 'integer',
            units: ['px', '%', ''],
            unit: '',
            defaults: 'auto',
          }],
        }, {
          name: 'Align',
          property: 'align-self',
          type: 'radio',
          defaults: 'auto',
          list: [{
            value: 'auto',
            name: 'Auto',
          }, {
            value: 'flex-start',
            title: 'Start',
            className: 'icons-flex icon-al-start',
          }, {
            value: 'flex-end',
            title: 'End',
            className: 'icons-flex icon-al-end',
          }, {
            value: 'stretch',
            title: 'Stretch',
            className: 'icons-flex icon-al-str',
          }, {
            value: 'center',
            title: 'Center',
            className: 'icons-flex icon-al-center',
          }],
        }]
      }
    ]
  },
  deviceManager: {
    devices: [
      {
        name: 'Desktop',
        width: '', // default size
      },
      {
        name: 'Tablet',
        width: '768px', // this value will be used on canvas width
        widthMedia: '768px', // this value will be used in CSS @media
      },
      {
        name: 'Mobile',
        width: '320px', // this value will be used on canvas width
        widthMedia: '480px', // this value will be used in CSS @media
      }
    ]
  },
});

editor.Panels.addPanel({
  id: 'panel-top',
  el: '.panel__top',
});
editor.Panels.addPanel({
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'visibility',
      active: false, // active by default
      className: 'btn-toggle-borders',
      label: 'Elementos',
      command: 'sw-visibility', // Built-in command
    }, {
      id: 'export',
      className: 'btn-open-export',
      label: 'Ver código',
      command: 'export-template',
      // context: 'export-template', // For grouping context of buttons from the same panel
    }
  ],
});


// Define commands
editor.Commands.add('show-layers', {
  run(editor, sender) {
    document.querySelector(".layers-container").style.display = "";
  },
  stop(editor, sender) {
    document.querySelector(".layers-container").style.display = "none";
  },
});
editor.Commands.add('show-configs', {
  run(editor, sender) {
    document.querySelector(".styles-container").style.display = "";
    document.querySelector(".traits-container").style.display = "";
  },
  stop(editor, sender) {
    document.querySelector(".styles-container").style.display = "none";
    document.querySelector(".traits-container").style.display = "none";
  },
});
// editor.Commands.add('show-blocks', {
//   run(editor, sender) {
//     document.querySelector("#blocks").style.display = "";
//   },
//   stop(editor, sender) {
//     document.querySelector("#blocks").style.display = "none";
//   },
// });
//Tamanhos de tela
// editor.Commands.add('set-device-desktop', {
//   run: editor => editor.setDevice('Desktop')
// });
// editor.Commands.add('set-device-mobile', {
//   run: editor => editor.setDevice('Mobile')
// });

//events
editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));

[ronaldohoch]

Responding to item number 2:
When i configure the commands with run and stop, it works properly!

Panels.addPanel({
        id: 'new-devices-panel',
        visible: true,
        buttons: [
            {
                id: 'device-desktop',
                active: true,
                togglable:true,
                className: 'btn-toggle-borders ',
                label: '<i class="fa fa-desktop"></i>',
                command:{
                    run: editor => editor.setDevice('Desktop'),
                    stop(editor){}
                }
            },
            {
                id: 'device-tablet',
                active: false,
                togglable:true,
                className: 'btn-toggle-borders',
                label: '<i class="fa fa-tablet"></i>',
                command:{
                    run: editor => editor.setDevice('Tablet'),
                    stop(editor){}
                }
            },
            {
                id: 'device-mobile-landscape',
                active: false,
                togglable:true,
                className: 'btn-toggle-borders ',
                label: '<i class="fa fa-mobile" style="transform: rotate(-90deg)"></i>',
                command:{
                    run: editor => editor.setDevice('Mobile landscape'),
                    stop(editor){}
                }
            },
            {
                id: 'device-portrait',
                active: false,
                togglable:true,
                className: 'btn-toggle-borders ',
                label: '<i class="fa fa-mobile"></i>',
                command:{
                    run: editor => editor.setDevice('Mobile portrait'),
                    stop(editor){}
                }
            },
        ],
    });