Issue #3219💬 RespondidoAbierto el 6 de enero de 2021por Abhisheknanda1344463Reacciones 0

Añadir Tipo para bloque y css con nombre de clase

Respuesta rápidapor artf

'''js Contenido: { Content: section_content, // <- Deberías usar 'components', no 'content'... Type: 'section', } ''' y hazte un favor, deja de definir secciones enteras en bloques, usa un enfoque orientado a componentes para que tus bloques sean principalmente así: ''js bm.add('custom-section', { label: 'Section', me...

Lee la respuesta completa abajo ↓

Pregunta

Hola @artf
Estoy atascado en una cosa, quiero añadir un bloque en el que quiero añadir estilo con el nombre de la clase también Aquí está mi código -:

const section_content = '<section class="gjs-section"><div class="gjs-container"></div></section>
    <style>
      .gjs-section{
        Acolchado: 50px;
      }
    .gjs-container{
      ancho: 90%;
      acolchado: 25px;
      marje: 0 auto;
      Ancho máximo: 1200px;
      }
      '</style>

bm.add('section',{
    etiqueta: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
    <div class="gjs-block-label">Section</div>',
    id: 'sección',
    Categoría: selection_category,
    Contenido: section_content,
    atributos: {
      'data-gjs-type': 'section'
    }
  });

Esto me dio exactamente lo que quería Código HTML en la sección de HTML y la parte de estilo en la sección de estilo, pero quiero añadir un nuevo rasgo para lo mismo y cómo puedo definir tipo en esto

Por otro lado, cuando defino tipo y hago algo así

bm.add('section',{
   etiqueta: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3v3h19V3m-1 5H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1h17c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1M2 21h19v-3H2v3z"></path></svg>
   <div class="gjs-block-label">Section</div>',
   id: 'sección',
   Categoría: selection_category,
   contenido:{
    Contenido: section_content,
    Tipo: 'Sección'
   },
   atributos: {
     'data-gjs-type': 'section'
   }
 });
 

Y añadiendo un rasgo nuevo, me da la etiqueta div y el estilo en línea como se muestra en la captura de pantalla. ¿Podrías ayudarme con esto, por favor Gracias

Si voy a definir contenido en componente, ¿cómo puedo definir el estilo con nombre de clase?

<img width="413" alt="Captura de pantalla 2021-01-06 a las 11 04 24 AM" src="https://user-images.githubusercontent.com/20657737/103745089-e242b780-5024-11eb-9dff-5901a218a028.png">

Respuestas (2)

artf6 de enero de 2021

'''js Contenido: { Content: section_content, // <- Deberías usar 'components', no 'content'... Type: 'section', } ''' y hazte un favor, deja de definir secciones enteras en bloques, usa un enfoque orientado a componentes para que tus bloques sean principalmente así: ''js bm.add('custom-section', { label: 'Section', media: '<svg...>', Contenido: { Tipo: 'Sección Personalizada' }, ... });

ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @Abhisheknanda1344463.

Gracias por compartir tu informe sobre Añadir tipo para bloque y CSS con nombre de clase. Para ayudar al equipo a investigar y priorizar esto:

Por favor, proporciona:

  1. Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
  2. Tu GrapesJS número de versión
  3. Información sobre navegador y sistema operativo
  4. Cualquier mensaje de error de la consola del navegador
  5. Pasos para reproducir el problema

Lo que más ayuda:

  • Ejemplo de código mínimo (no tu proyecto completo)
  • Grabación de pantalla o captura de pantalla que muestra el problema
  • Comportamiento esperado frente a comportamiento real claramente indicado
  • Configuración GrapesJS que estás usando

Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.