Dónde poner CSS personalizado en un tema de bloques (y cuál opción elegir)

En los temas clásicos, el CSS personalizado iba en Apariencia → Personalizar → CSS adicional. Con un tema de bloques (como los temas oficiales «Twenty» recientes), el menú Personalizar no aparece o aparece muy reducido, y mucha gente no sabe dónde poner sus estilos.

Hay cuatro lugares, según el alcance que quieras.

1. Para todo el sitio: CSS adicional del editor

1. Ve a Apariencia → Editor.
2. Abre Estilos (el ícono de media luna o círculo).
3. En el menú de tres puntos del panel de estilos, elige CSS adicional.
4. Escribe tu CSS. Se aplica en todo el sitio y en el editor.

Es el equivalente directo al antiguo «CSS adicional». Se guarda en la base de datos y sobrevive a las actualizaciones del tema.

Si tu tema de bloques todavía muestra Apariencia → Personalizar, el CSS adicional de ahí también funciona. Pero usa uno solo de los dos lugares para no tener estilos repartidos.

2. Para un tipo de bloque

Si quieres cambiar, por ejemplo, todas las citas o todos los botones:

1. En Estilos, ve a Bloques y elige el bloque.
2. Ajusta lo que ofrece el panel (colores, tipografía, bordes, espaciados).
3. Al final del panel del bloque hay un campo de CSS adicional que solo se aplica a ese tipo de bloque.

En ese campo no necesitas escribir el selector del bloque: WordPress lo agrega. Escribir border-left: 4px solid #2563eb; afecta a todas las citas.

3. Para un bloque concreto: una clase

Para dar estilo a un bloque específico:

1. Selecciónalo en el editor.
2. En la barra lateral, abre Avanzado y escribe un nombre en Clases CSS adicionales, por ejemplo cwp-destacado.
3. Define esa clase en el CSS adicional del sitio (opción 1):

.cwp-destacado {
	background: #fef3c7;
	border-radius: 8px;
	padding: 16px 20px;
}

Así puedes reutilizar el mismo estilo en cualquier bloque marcándolo con la clase.

Evita escribir CSS que apunte a clases generadas automáticamente (como .wp-container-core-group-is-layout-3). Esos números cambian cuando editas la página y tu estilo deja de aplicarse.

4. Para desarrolladores: tema hijo con theme.json

Si tienes mucho CSS o trabajas con Git, lo mejor es un tema hijo. En un tema de bloques, el tema hijo puede tener:

• Un style.css (además de su cabecera, puedes cargar tus estilos con wp_enqueue_style en el functions.php del hijo, o con wp_enqueue_block_style para cargar estilos solo cuando un bloque aparece en la página).
• Un theme.json que cambia los ajustes y estilos globales del tema padre: paleta de colores, tipografías, tamaños, espaciados. Es más ordenado que sobrescribir con CSS.

Un theme.json mínimo para un tema hijo que cambia el color de los enlaces y agrega CSS propio:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"elements": {
			"link": {
				"color": { "text": "#2563eb" }
			}
		},
		"css": ".cwp-destacado { background: #fef3c7; border-radius: 8px; padding: 16px 20px; }"
	}
}

El tema hijo solo necesita declarar lo que cambia: el resto lo hereda del padre.

¿Cuál elegir?

• Pocos ajustes y no programas: opción 1 y, si hace falta, la 2.
• Un estilo para casos puntuales: opción 3.
• Un sitio que mantienes en serio, con muchos estilos: opción 4.

¿No encuentras dónde está el CSS adicional en tu tema? Dinos en el foro qué tema usas y te indicamos el camino exacto.