No aparece el nombre de clase HTML de un bloque personalizado en el editor

He añadido mi bloque así abajo

const editor = grapesjs.init({
// ...
blockManager: {
    appendTo: '#blocks',
    Bloqueos: [
      {
        id: 'título principal',
        etiqueta: 'Título principal',
        categoría: 'Títulos',
        Contenido: {
          Tipo: 'texto',
          etiquetaNombre: 'p',
          Atributos: { Clase: 'Título-Principal' },
          contenido: 'Este es el título principal. Para hacer clic aquí y editar esto'          
        }
      }
    ]
  },
lienzo: {
    Estilos: [
      'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css', // reinicia el estilo de lienzo
      '/assets/css/content.css' // 👈Esto contiene el estilo de .main-title
    ]
  },

Luego arrastra este bloque y suelta hasta el lienzo, y muestra código HTML con el comando 'export-plantilla'.

<p class="main-title">Este es el título principal. Para hacer clic aquí y editar esto
</p>

👆Vale, esto es lo que esperaba.

PERO, la clase HTML no aparece en el elemento dentro del editor, así que no es estilo aplicado para .main-title.

<img width="793" alt="スクリーンショット 2020-03-20 2 36 53" src="https://user-images.githubusercontent.com/4133263/77097455-2a6ff980-6a54-11ea-9e74-f5af7982b1b4.png"> <img width="706" alt="スクリーンショット 2020-03-20 2 37 45" src="https://user-images.githubusercontent.com/4133263/77097417-1b894700-6a54-11ea-9e90-6d9e9ea0970d.png">

Necesito establecer por defecto la clase html como bloque personalizado. ¿Cómo debería hacerlo?