Estiliza párrafos nativos de Gutenberg

Usa el bloque estándar Párrafo de WordPress para escribir texto con la tipografía POM Theme y los colores de la paleta. El bloque sigue siendo un párrafo: su escritura normal, enlaces, formato en negrita y cursiva, atajos de teclado y transformaciones de bloque siguen disponibles. Los iconos son contenedores Icon Box independientes, no ajustes del párrafo.

Esta guía está dirigida a editores de contenido. POM Theme debe estar activo y el editor de bloques de WordPress debe estar habilitado para el tipo de contenido. El editor heredado Page Builder usa una interfaz de Bloque de texto independiente.

Escribe y estiliza un párrafo

1. Abre Páginas > Añadir página, o edita una página existente en el editor de bloques.
2. Inserta Párrafo y escribe tu texto.
3. Selecciona el párrafo y abre su barra lateral de ajustes del bloque.
4. En Texto, elige Color de texto, Tamaño de texto, Peso de fuente, Altura de línea y Capitalización según necesites.
5. Usa Alineación de texto en la barra de herramientas del bloque para texto a la izquierda, centrado, a la derecha o justificado. Elige Heredar alineación para seguir a su contenedor.
6. Guarda el borrador y abre su vista previa en el frontend antes de publicar.

Heredar deja la elección correspondiente en manos del tema o del contenido circundante. Las elecciones de paleta guardan su ranura numerada, de modo que cambiar esa ranura en los ajustes del tema actualiza el color del párrafo.

Los controles de color muestran solo muestras de la paleta. Selecciona de nuevo la muestra activa para borrar el color y heredar el color del texto circundante. Cada muestra conserva su propia ranura incluso cuando dos ranuras tienen el mismo color.

Los tamaños disponibles usan los helpers basados en rem del tema: 0,375, 0,5, 0,75, 1, 1,25, 2 y 3rem. Apariencia de encabezado aplica el estilo visual de H1–H6 sin cambiar el elemento semántico del párrafo. Usa un bloque de Encabezado real al introducir una sección del documento.

Los pesos de fuente van de 100 a 900; la fuente instalada determina qué pesos pueden mostrarse con precisión. Las opciones de altura de línea son 1, 1,2, 1,5, 1,8 y 2. La capitalización puede heredar, usar mayúsculas, o restaurar la apariencia original del texto sin reescribir las palabras.

Elige una fuente y el flujo del texto

Abre Fuente y flujo de texto en la barra lateral del párrafo:

• Familia de fuentes ofrece Heredar, Fuente segura y las familias registradas en Theme Settings > Design system > Fonts. Guarda una clase helper font-family-…, no una declaración de fuente en el párrafo. Reordenar las familias no cambia la elección guardada. Renombrar o eliminar una familia requiere elegir de nuevo una familia disponible; el editor marca las elecciones faltantes como not installed.
• Orientación ofrece Heredar, Horizontal, Vertical hacia abajo o Vertical hacia arriba. El texto hacia abajo fluye de arriba a abajo. Hacia arriba usa el mismo flujo vertical rotado 180 grados, de modo que se lee de abajo hacia arriba. Estas elecciones cambian la presentación, no el contenido del texto, usando clases helper del tema. El contenido writing-mode-vertical guardado previamente sigue siendo compatible hacia abajo.
• Número de columnas de texto ofrece Automático o de 1 a 12. Esto divide el texto de un párrafo; no crea bloques de Fila o Columna.
• Ancho mínimo de columna es opcional. Combínalo con un número para permitir que el navegador reduzca la cantidad de columnas en pantallas estrechas. Si todo el contenedor es más estrecho que este ancho preferido, una sola columna ocupa el espacio disponible.
• Espacio entre columnas controla el espacio entre las columnas de texto. Déjalo vacío para mantener el valor predeterminado del navegador. Solo se aplica mientras haya un número o un ancho mínimo establecido.

Los anchos y espacios aceptan px, em, rem, ch, vw o vh, hasta 2000 unidades; los espacios pueden ser cero. Por ejemplo, 3 columnas con un mínimo de 320px y un espacio de 2rem guardan style="columns:320px 3;column-gap:2rem" en el párrafo. Estas dos declaraciones en línea son una excepción intencional al flujo de trabajo basado únicamente en helpers. No generan una hoja de estilos ni cargan un script. En orientación vertical, las columnas siguen el eje en línea del modo de escritura.

Para restaurar el flujo de texto normal, elige Automático y borra Ancho mínimo de columna. Revisa siempre el texto largo en escritorio y móvil antes de publicar.

Formatea las palabras seleccionadas y la primera letra

1. Selecciona las palabras que quieras formatear.
2. Elige Theme text formatting directamente en la barra de herramientas de texto flotante. Su icono de color independiente se muestra junto a los controles estándar de formato en línea, en lugar de dentro de More.
3. Elige una muestra de la paleta, o usa Custom text color para un color preciso. Los colores de paleta guardan una clase del tema existente; los colores personalizados guardan una declaración color en línea sobre el texto seleccionado, como el editor de texto clásico.
4. El mismo panel emergente también ofrece Selected text background, Selected text size y la opción de letra capital del párrafo.
5. Selecciona de nuevo la muestra de color activa, o elige Heredar para el tamaño, para eliminar ese formato específico sin eliminar enlaces, negrita u otro formato.

Las elecciones de paleta usan clases helper existentes del tema, incluyendo ranuras numeradas para el texto seleccionado. Por tanto, un cambio en la paleta actualiza las palabras que usan esa ranura. Un color personalizado es intencionalmente independiente de la paleta y permanece sin cambios cuando se edita la paleta. Elegir una paleta reemplaza el color personalizado seleccionado; elegir un color personalizado reemplaza el helper de color de texto seleccionado sin perturbar enlaces, énfasis, fondos o helpers de tamaño.

Cuando se selecciona el texto completo del párrafo, el control de paleta se convierte en Paragraph color y aplica la clase de paleta al propio párrafo. Una elección personalizada se sigue aplicando en línea al texto seleccionado porque no tiene clase helper del tema. Ambas rutas eliminan las opciones redundantes de color de texto en esa selección, preservando enlaces, énfasis, fondos y otros formatos. Usa Clear custom color para eliminar solo el color personalizado.

El subrayado nativo, las imágenes en línea, el superíndice, el subíndice y las matemáticas siguen disponibles. La inserción de Código, Entrada de teclado, Idioma y Nota al pie no se ofrece en la barra de herramientas de texto. El formato semántico existente y las referencias a notas al pie siguen siendo legibles y se conservan al editar contenido guardado.

Letra capital — primera letra se aplica al primer carácter no espacial del párrafo, independientemente de la selección actual. Elige Large initial, Boxed initial, Decorative initial o None. El resto del marcado del párrafo se conserva.

Continúa con un párrafo nuevo

Pulsa Enter mientras escribes para crear otro párrafo. El nuevo párrafo hereda el color de texto, el tamaño, el peso, la altura de línea, la alineación, la capitalización y la familia de fuentes del párrafo anterior. No hereda márgenes, opacidad, visibilidad por dispositivo, columnas de texto, orientación, anclas ni iconos heredados, porque esos ajustes describen una instancia del bloque en lugar de tipografía continua.

Agrupa contenido con un Icon Box

Inserta Icon Box cuando un icono deba introducir contenido. El contenedor acepta bloques de Párrafo, Encabezado y Lista, incluyendo varios de ellos juntos; no acepta bloques interactivos o de diseño no relacionados. Selecciona su icono, posición izquierda/derecha/arriba, tamaño, forma, colores de la paleta, estado hover compatible Color 15 y enlace accesible opcional en los ajustes de Icon Box. Su HTML del frontend reutiliza la estructura de tema web-iconbox-* existente y no carga otra hoja de estilos ni script.

En Contenedor, elige un Color de texto compartido, Center below 992px y Device Visibility para el grupo completo de icono y contenido. El texto hijo puede sobrescribir el color heredado. Advanced > Additional CSS class(es) aplica helpers al contenedor exterior, de modo que una clase de margen separa todo el Icon Box en lugar de un párrafo.

Los párrafos nuevos ya no exponen ajustes de icono. Cuando contenido antiguo contiene un icono incrustado en un párrafo, Previous paragraph icon ofrece Convert to Icon Box. Esto mueve el texto a un párrafo hijo y conserva los ajustes del icono. Remove old icon descarta solo ese icono antiguo. Hasta que se elija una de esas acciones, el icono heredado guardado sigue siendo válido y visible.

Espaciado y visibilidad

Abre Spacing and visibility para:

• Margen superior y Margen inferior: hereda o elige 0, 0,375, 0,75, 1, 1,25, 2, 3, 4, 6 u 8rem. Estos ajustes guardan los helpers mt-* y mb-* existentes del tema y previsualizan su tamaño equivalente a la raíz en el editor.
• Opacidad: hereda o elige 0–100% en pasos del 10%.
• Center below 992px: usa el helper de centrado en pantallas pequeñas existente del tema.
• Interruptores de visibilidad independientes para Escritorio (≥992px), Tableta horizontal (768–991,98px), Tableta vertical (576–767,98px) y Móvil (≤575,98px).

Los dispositivos habilitados muestran el párrafo. En el editor, una indicación sombreada mantiene editables los párrafos ocultos; un párrafo totalmente transparente también permanece apenas visible para que aún pueda seleccionarse. El frontend aplica las opciones reales de visibilidad y opacidad.

La visibilidad por dispositivo es presentación, no una restricción de acceso. No la uses para proteger contenido confidencial. Si todos los interruptores de dispositivo están desactivados, el párrafo no será visible en el frontend.

Contenido existente y opciones avanzadas

El formato nativo guardado previamente se conserva al abrir un párrafo existente. Si aparece Previous formatting, Reset previous block formatting elimina esos ajustes antiguos a nivel de bloque para que puedas usar los controles helper de POM. No borra tu contenido escrito ni los enlaces en línea y el énfasis.

Usa los ajustes Avanzado de WordPress para un ancla HTML o clases CSS adicionales. Prefiere los helpers de tema documentados existentes. Los cuadros de fondo, los bordes, las dimensiones arbitrarias y el diseño estructural pertenecen a la Sección o Columna circundante.

La extensión no encola una hoja de estilos ni un script en el frontend, y no genera CSS por entrada para sus controles. Su vista previa del editor carga solo un subconjunto enfocado de los estilos relevantes del tema.

La autoría nativa de Additional CSS está desactivada para los bloques POM curados y para los bloques extendidos de Párrafo, Encabezado, Lista y Elemento de lista. Additional CSS class(es) sigue siendo un control independiente para los helpers existentes. El frontend reutiliza los estilos de texto del tema en lugar de cargar las hojas de estilos redundantes de Párrafo, Encabezado y Lista del núcleo; otros bloques del núcleo conservan sus propios requisitos de recursos.

Verifica el resultado

Antes de publicar, guarda y vuelve a abrir la página, comprueba el párrafo en la vista previa del frontend y revisa cada ajuste de visibilidad por dispositivo. Verifica que el formato de las palabras seleccionadas siga siendo correcto después de editar la frase que las rodea. Para un Icon Box, prueba también su enlace opcional y confirma que todos los bloques hijos sigan siendo seleccionables y estén correctamente ordenados.

Si faltan los paneles de POM, confirma que seleccionaste Párrafo en el editor de bloques de WordPress en lugar de un Bloque de texto heredado. Si no se puede cargar un icono de Icon Box, elige otro icono disponible; el icono guardado anteriormente se conserva. Si un color es difícil de leer, cambia la ranura de la paleta o el fondo circundante y comprueba el resultado en el frontend.

Relacionado: Global colors, Typography y CSS classes and identifiers.