Añade un icono de tema en Gutenberg
Usa Icon para mostrar un SVG de una biblioteca de iconos del tema, con un enlace opcional. Tiene la misma apariencia que el componente Icon del Page Builder. Para colocar varios párrafos, títulos o listas junto a un icono, usa Icon Box en su lugar.
Necesitas permiso para editar la página, el tema POM activo y una biblioteca de iconos del tema disponible.
Añade y personaliza un icono
- Abre Pages → Add Page, o edita una página existente en el editor de bloques.
- Abre el insertor de bloques, busca Icon y elige el bloque POM Icon. También está disponible en Design.
- Haz clic en Select Icon en los ajustes Icon del bloque y elige un icono de una biblioteca.
- Establece Icon size en Small, Normal, Large o Adapt width to parent container. Las tres primeras opciones escalan con el tamaño de texto heredado; Adapt width to parent container rellena el ancho disponible.
- Elige Icon background shape, Icon color e Icon background. Los colores son espacios de la paleta del tema. Vuelve a hacer clic en la muestra seleccionada para borrar ese ajuste.
- Usa el control de alineación de la barra de herramientas flotante del bloque para alinear el icono a la izquierda, al centro o a la derecha.
El lienzo previsualiza de inmediato el SVG, el tamaño, la forma y los colores de la paleta seleccionados. Change Icon lo sustituye; Remove lo borra sin eliminar el bloque. Un bloque Icon vacío muestra un marcador de posición en el editor y ningún icono visible en la página publicada.
Enlaza el icono y describe su propósito
En los ajustes del bloque, abre Link and accessibility:
- Introduce Icon link con una URL
https://ohttp://, una ruta relativa, un ancla como#contact,mailto:otel:. - Introduce un Accessible name que describa el destino, como «Contacta con nuestro equipo». Si está vacío, se usa la URL como nombre del enlace.
- Activa Open in new tab o Add nofollow to link solo cuando sea necesario. Los enlaces en una pestaña nueva reciben también
noopener noreferrer.
Sin enlace, Decorative icon está activado por defecto. Déjalo activado si el texto cercano ya explica el icono. Desactívalo y proporciona un Accessible name si el icono comunica información por sí mismo.
Los enlaces no navegan fuera del lienzo de edición. Comprueba su destino en la previsualización de la página.
Atributos de enlace adicionales
Para integraciones existentes, Additional link attributes acepta pares name="value" entre comillas, separados por espacios o saltos de línea:
title="Contact our team"
data-tracking="contact-icon"Los nombres admitidos son title, download, hreflang, data-* excepto data-wp-*, aria-description, aria-describedby y aria-details. Limita el campo a 32 atributos y 4096 caracteres. Los atributos no admitidos o mal formados producen un aviso y se omiten del enlace. No se aceptan controladores de eventos, CSS en línea ni anulaciones para el destino, el target, la relación o el nombre accesible del enlace.
Visibilidad, identificadores y helpers existentes
- Visibility controla Desktop (992px y más ancho), Tablet Landscape (768–991px), Tablet Portrait (576–767px) y Mobile (575px y más estrecho). Un icono oculto sigue siendo seleccionable bajo una superposición de visibilidad en el editor.
- Advanced → HTML anchor establece un identificador HTML único.
- CSS classes → Additional CSS classes añade helpers existentes, separados por espacios. No crea CSS.
El bloque guarda HTML básico con las clases existentes del tema y su SVG. No añade una hoja de estilos ni un script en el frontend. Los valores de la paleta siguen los colores actuales del tema; cambiar un archivo de la biblioteca de iconos no sustituye los SVG ya guardados en el contenido: vuelve a seleccionar el icono para actualizar uno.
Verifica el resultado
Guarda la página y recarga el editor. Confirma que el icono y los ajustes permanecen sin cambios. Abre la previsualización de la página, comprueba cada tamaño de pantalla relevante y sigue los iconos enlazados usando tanto el ratón como el teclado.
Si la selección falla, elige otro icono de una biblioteca de temas disponible e inténtalo de nuevo; se conserva el icono anterior. Si el bloque aparece vacío, comprueba que hay un icono seleccionado y que sus colores contrastan con el fondo de la página. Si desaparece solo en un dispositivo, revisa Visibility.