Agrega estilos globales a tu theme

Clase 9 de 11 • Curso de Full Site Editing en WordPress

Contenido del curso

Novedades en WordPress

Uso de widgets y bloques

Integrando temas

Próximos pasos

Tomar examen

Comentarios

Facundo Oubel

student•

Me pasa algo muy raro cuando modifico los estilos del css de wordpress; me pasa que edito por ej el #wpadminbar y los cambios no se ven sino hasta el otro dia, lo extraño es que lo hago desde un servidor local, asi que no entiendo por que no se hacen en el momento...

Lucio Negrello

teacher•

Hola Facundo, cómo estás? Eso es porque se está guardando algún caché. Deberías borrarlo para asegurar. Puede que tengas instalado algún plugin de caché, que el entorno esté configurado apra guardarlo o que no esté bien configurada la versión de los recursos en el enqueue. Revisá estas variables apra ver cómo podés hacer para que deje de generarlo y, por otro lado, con Ctrl+F5 o Shift+Cmd+R en el navegador podés eliminarlo. Saludos!

Facundo Oubel

student•

Es muy raro, me pasa en la computadora del trabajo y cuando lo instalé en mi casa me pasó también.

Juan Sebastian Ramirez Leyva

student•

Sin plugins ni bloques personalizados, cómo se podrían generar estilos para las variantes de un bloque, por ejemplo, configurar estilos para un botón primario, para un botón secundario.

Lucio Negrello

teacher•

Hola Juan, cómo estás? Acá te dejo este link para que veas un ejemplo de cómo registrar estilos para bloques del core o de cualquier otro bloque. Con esa info vas a poder registrarlos sin crear bloques y sin usar plugins. Saludos!

YOLANDA MORALES SUAREZ

student•

Hola. Tengo una nueva pregunta, cada bloque permite agregar una clase adicional, estos estilos de la clase avanzada dónde se pondrían en un bloque de temas?

Lucio Negrello

teacher•

Hola Yolanda, cómo estás? En este caso, ocurre lo mismo que con los bloques tradicionales. Si bien cambia la interfaz del editor, no deja de estar todo contruido con bloques, por lo tanto la gran mayoría tiene la opción de agregar clases extra. Otra alternativa es registrar estilos de bloques, que si bien lo hace con una interfaz gráfica lo que hace es incorporar una clase al bloque. Acá te dejo link para que sepas cómo se registran los estilos:

function rich_register_block_styles() {

	if ( function_exists( 'register_block_style' ) ) {

		register_block_style(
			'core/image',
			array(
				'name'  => 'bottom-right',
				'label' => __( 'Bottom Right', 'rich' ),
			)
		);
		
		register_block_style(
			'core/image',
			array(
				'name'  => 'bottom-left',
				'label' => __( 'Bottom Left', 'rich' ),
			)
		);

		register_block_style(
			'core/image',
			array(
				'name'  => 'center',
				'label' => __( 'Center', 'rich' ),
			)
		);
	}
}
add_action( 'after_setup_theme', 'rich_register_block_styles' );

Saludos!

YOLANDA MORALES SUAREZ

student•

Hola. Muchas gracias por el curso. Me surge una pregunta respecto al manejo del layout y el responsive. En este sistema de FSE en Wordpress, cómo podría personalizar los bloques de acuerdo al tamaño del dispositivo, por ejemplo si quiero centrar un párrafo en mobile pero quiero alinear el contenido a la izquierda en tableta y desktop? o si quiero ocultar un bloque o cambiar los estilos dependiendo del dispositivo?

Cómo podría tener otras distribuciones para las columnas?

Podrían configurarse otros breakpoints?

Lucio Negrello

teacher•

Hola Yolanda, cómo estás? Por ahora las dos opciones para hacer esto son manejandolos desde el CSS o utilizando un plugin que se llama Blocks Visibillity, que permite definir en que resolución se vé cada bloque. Entonces permite utilizar diferentes bloques para las diferentes resoluciones. Saludos!

Julian David Sierra Cabrera

student•

¿Esto es aún aplicable a la versión 6.8.2 de WP? En mi caso no cambian los estilos mencionados en esta clase.

function rich_register_block_styles() {

	if ( function_exists( 'register_block_style' ) ) {

		register_block_style(
			'core/image',
			array(
				'name'  => 'bottom-right',
				'label' => __( 'Bottom Right', 'rich' ),
			)
		);
		
		register_block_style(
			'core/image',
			array(
				'name'  => 'bottom-left',
				'label' => __( 'Bottom Left', 'rich' ),
			)
		);

		register_block_style(
			'core/image',
			array(
				'name'  => 'center',
				'label' => __( 'Center', 'rich' ),
			)
		);
	}
}
add_action( 'after_setup_theme', 'rich_register_block_styles' );

Agrega estilos globales a tu theme

Novedades en WordPress

Curso Actualizado

¿Qué necesitas para aprender Full Site Editing en WordPress?

¿Cuáles son las nuevas características de WordPress?

Uso de widgets y bloques

Maneja tus widgets con bloques

¿Cuáles son las novedades sobre bloques?

Habilita los block templates en tu theme

Crea tu propio template block, aplícalo a una página y compártenos el resultado

Integrando temas

¿Cómo configurar tus opciones con el archivo theme.json?

Agrega estilos globales a tu theme

Próximos pasos

Instala Gutenberg para ampliar estas características

Y ahora, ¿por dónde puedo continuar con WordPress?