Viendo comportamientos extraños al implementar uvas en mi sitio

Estoy probando una implementación muy sencilla de uvas.

importar 'grapesjs/dist/css/grapes.min.css';
importar uvas de 'uvas';

sea blockElements = [];

const files = require.context('./blocks', true, /\.js$/i)
archivos.llaves().mapa(clave => blockElements.push(requiere('./blocks/'+key.split('./')[1]).default));

window.editor = grapesjs.init({
  Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement
  Contenedor: '#gjs',
  Consigue el contenido del lienzo directamente del elemento
  Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `,
  fromElement: cierto,
  
Desactiva el gestor de almacenamiento por el momento
  storageManager: false,
  Evita cualquier panel por defecto
  paneles: { predeterminados: [{
    id: 'conmutador de panel',
    EL: '.panel__switcher',
    botones: [{
      id: 'bloques de exposición',
      ACTIVO: Cierto,
      etiqueta: 'Bloques',
      Orden: 'Bloques de Exhibición',
      Activable: falso,
    }, {
      id: 'capas de exhibición',
      activo: falso,
      etiqueta: 'Layers',
      Orden: 'Mostrar capas',
      Una vez activada, desactiva la posibilidad de desactivarlo
      Activable: falso,
    }, {
      id: 'estilo de espectáculo',
      activo: falso,
      etiqueta: 'Styles',
      Orden: 'Estilos de Exhibición',
      Una vez activada, desactiva la posibilidad de desactivarlo
      Activable: falso,
    }
  ],
}]},
blockManager: {
  appender a: '.contenedor-bloques',
  bloques: bloqueElementos,
},
layerManager: {
  appendTo: '.capas-contenedor',
},
selectorManager: {
  appendTo: '.estilos-contenedor'
},
StyleManager: {
  append To: '.estilos-contenedor',
  Sectores: [{
    nombre: 'Dimension',
    abierto: falso,
    Uso de propiedades integradas
    buildProps: ['ancho', 'altura', 'acolchado', 'margen'],
    Usa 'propiedades' para definir o anular una sola propiedad
    Propiedades: [
      {
        Tipo de entrada,
        opciones: entero | Radio | select | color | deslizador | archivo | compuesto | Stack
        tipo: 'entero',
        nombre: 'Ancho', // Etiqueta para la propiedad
        propiedad: 'width', // propiedad CSS (si buildProps la incluye, se extenderá)
        unidades: ['px', '%', 'vw'], // Unidades, disponibles solo para tipos 'enteros'
        valores por defecto: 'auto', // Valor por defecto
        min: 0, // Valor mínimo, disponible solo para tipos 'enteros'
      },
      {
        Tipo de entrada,
        opciones: entero | Radio | select | color | deslizador | archivo | compuesto | Stack
        tipo: 'entero',
        nombre: 'Height', // Etiqueta de la propiedad
        propiedad: 'altura', // propiedad CSS (si buildProps la contiene, se extenderá)
        unidades: ['px', '%', 'vh'], // Unidades, disponibles solo para tipos 'enteros'
        valores por defecto: 'auto', // Valor por defecto
        min: 0, // Valor mínimo, disponible solo para tipos 'enteros'
      }
    ]
  },{
    nombre: 'Extra',
    abierto: falso,
    buildProps: ['fondo', 'sombra de caja', 'prop personalizado'],
    Propiedades: [
      {
        ID: 'Atrezzo personalizado',
        nombre: 'Custom Label',
        Propiedad: 'tamaño de fuente',
        tipo: 'select',
        Valores predeterminados: '32px',
        Lista de opciones, disponibles solo para tipos 'select' y 'radio'
        Opciones: [
          { valor: '12px', nombre: 'Tiny' },
          { valor: '18px', nombre: 'Medium' },
          { valor: '32px', nombre: 'Big' },
        ],
      }
    ]
  }]
},
});

const panelManager = editor. Paneles;
editor. Commands.add('show-layers', {
  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
  getLayersEl(row) { return row.querySelector('.layers-container') },
  
run(editor, sendero) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = '';
  },
  stop(editor, remitente) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = 'ninguno';
  },
});

editor. Commands.add('show-blocks', {
  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
  getLayersEl(row) { return row.querySelector('.blocks-container') },
  
run(editor, sendero) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = '';
  },
  stop(editor, remitente) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = 'ninguno';
  },
});

editor. Commands.add('show-styles', {
  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
  getLayersEl(row) { return row.querySelector('.styles-container') },
  
run(editor, sendero) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = '';
  },
  stop(editor, remitente) {
    const lmEl = this.getLayersEl(this.getRowEl(editor));
    lmEl.style.display = 'ninguno';
  },
});

panelManager.addPanel();

Y el único bloque requerido por el requerimiento automático al final es:

exportar default {
    'id': 'sección de altura completa',
    'etiqueta': 'Sección de altura completa',
    'contento': '
        <section data-gjs-type="default" class="w-full h-full bg-red-500">
        </section>
    `
}

Tengo dos problemas y una pregunta:

1. Eliminar una clase del editor de estilo, borra el resto del estilo...
2. Añadir un segundo bloque, tras cambiar las propiedades del primer bloque... no añade un bloque sin estilo, duplica el que ya existía
3. ¿Hay alguna forma de marcar un bloque como no nestable, por ejemplo, que solo pueda estar en la capa superior?

¿Qué podría hacer para arreglarlo?