Patrones de bloques

Este texto fue traducido usando IA. Si deseas ver el texto original en inglés, haz clic aquí.

Un patrón de WordPress es una colección de bloques organizados juntos en una sección reflexiva, intencional y con criterio para una entrada, página o plantilla.

Puedes crear entradas, páginas y plantillas atractivas con facilidad usando los patrones de WordPress.com, diseñados por el equipo de diseño de WordPress.com para heredar sin esfuerzo los estilos globales de tu tema. Elige entre una amplia colección de patrones y personalízalos como desees; no se requieren plugins adicionales ni programación. Piensa en estos patrones como una biblioteca de componentes para el editor de bloques.

Uso de patrones en WordPress.com

Encontrar patrones a través del editor de bloques

Los patrones de WordPress.com están disponibles en el editor de bloques siguiendo estas instrucciones:

1. Navega al editor de cualquier entrada, página o plantilla.
2. Haz clic en el botón + para abrir el insertador de bloques.
3. Haz clic en la pestaña Patrones para explorar una lista de categorías de patrones (para explorar todos los patrones en vista de cuadrícula, desplázate hasta el final de la lista y haz clic en Explorar todos los patrones).
4. Haz clic en el patrón deseado para insertarlo en tu entrada, página o plantilla.

Desde allí, puedes editar el contenido del patrón (imágenes, texto, enlaces, etc.) en el editor. Los estilos del tema definidos a través del editor del sitio se aplicarán automáticamente al patrón insertado.

Encontrar patrones a través de la Biblioteca de patrones

Para previsualizar patrones en diferentes anchos de pantalla y comprobar la capacidad de respuesta de los diseños, puedes usar la Biblioteca de patrones de WordPress.com. La biblioteca no solo te permite explorar, buscar y previsualizar patrones en diferentes anchos de pantalla, sino que también te permite copiar y pegar patrones en el editor de bloques.

Al visitar la Biblioteca de patrones, usa la navegación por categorías para ver todos los patrones disponibles. Alternativamente, usa el formulario de búsqueda para buscar patrones por palabra clave o característica. Una vez que encuentres un patrón que te gustaría usar, haz clic en el botón Copiar patrón.

Una vez que hayas elegido un patrón, navega al editor de una entrada, página o plantilla en tu sitio web de WordPress.com, y pega el patrón usando un atajo de teclado (command + v en Mac o ctrl + v en Windows) o haciendo clic derecho y seleccionando Pegar.

Al igual que con otros patrones, puedes editar el contenido del patrón pegado (imágenes, texto, enlaces, etc.) en el editor de bloques.

Construir con patrones

Nuestros patrones de bloques están diseñados para ser portátiles, pero tu archivo theme.json aún deberá seguir algunas directrices para asegurar que nuestros patrones se vean de la mejor manera posible.

Específicamente, asumimos que los siguientes slugs están definidos en spacing.spacingSizes:

• "slug": "20"
• "slug": "30"
• "slug": "40"
• "slug": "50"
• "slug": "60"
• "slug": "70"
• "slug": "80"

Estos son los mismos preajustes de espaciado que WordPress genera por defecto. Si faltan en tu tema, parte del espaciado de los bloques puede colapsar por completo cuando pegues un patrón. Nuestros patrones pueden seguir funcionando si tu tema utiliza preajustes de espaciado diferentes, pero este es el estándar que seguimos.

Directrices de estructura de patrones

Además de usar los patrones de WordPress.com en tus entradas, páginas y plantillas, también puedes crear los tuyos propios. El equipo de diseño de WordPress.com ha publicado algunos de sus aprendizajes en el blog de desarrolladores de WordPress, incluyendo algunas de las siguientes directrices sugeridas para crear patrones:

• Un bloque de Grupo de nivel superior que abarque todo el ancho de la página.
  • Esto facilita cambiar el color de fondo de toda una sección de la página y reordenar las secciones de una página, ya que cada patrón está contenido dentro de un bloque de Grupo.
  • Estos bloques de Grupo normalmente tienen los valores de relleno izquierdo y derecho mapeados a los ajustes de diseño de los estilos globales del sitio para que el patrón se adapte al tema. 
• Un bloque contenedor (Cuadrícula, Columnas, Fila y Pila, etc.) se anida directamente dentro del bloque de nivel superior.
  • Este bloque se establece con el valor de ancho «amplio» del tema, lo que permite que el contenido del patrón tenga un ancho máximo, según lo definido por el tema.
• Dos bloques de Separador se colocan directamente encima y debajo del bloque contenedor.
  • Estos bloques de Separador te permiten seleccionar y manipular el espacio entre patrones sin tener que buscar los controles de relleno relevantes del bloque.

Obtén más información sobre cómo funcionan bloques específicos y cómo construir con ellos aquí.

Desactivar patrones

Para eliminar patrones de bloques en la mayoría de los casos, consulta la documentación oficial de WordPress sobre cancelar el registro de patrones. Sin embargo, puede haber casos en los que quieras desactivar patrones específicos de WordPress.com.

Desactivar patrones requiere que tengas acceso a SSH o SFTP en tu sitio para poder editar el archivo functions.php de tu tema.

Para desactivar todos los patrones no creados por el usuario, copia y pega el siguiente código al final del archivo functions.php de tu tema:

// Disable the remote patterns coming from the Dotorg pattern directory.
// See https://developer.wordpress.org/themes/patterns/registering-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// Remove and unregister patterns from core, Dotcom, and plugins. 
// See 		https://github.com/Automattic/jetpack/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/packages/jetpack-mu-wpcom/src/features/block-patterns/block-patterns.php#L107
add_filter( 'rest_dispatch_request', 'your_theme_restrict_block_editor_patterns', 12, 3 );

/**
 * Restricts block editor patterns in the editor by removing support for all patterns from:
 *  - Dotcom and plugins like Jetpack
 *  - Dotorg pattern directory except for theme patterns
 */
function your_theme_restrict_block_editor_patterns( $dispatch_result, $request, $route ) {
	if ( strpos( $route, '/wp/v2/block-patterns/patterns' ) === 0 ) {
		$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();

		if ( ! empty( $patterns ) ) {
			// Remove theme support for all patterns from Dotcom, and plugins. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#unregistering-patterns
			foreach ( $patterns as $pattern ) {
				unregister_block_pattern( $pattern['name'] );
			}

			// Remove theme support for core patterns from the Dotorg pattern directory. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#removing-core-patterns
			remove_theme_support( 'core-block-patterns' );
		}
	}
	
	return $dispatch_result;
}

Para deshabilitar solo los patrones de WordPress.com, copia y pega el siguiente código al final del archivo functions.php de tu tema:

add_filter( 'a8c_override_patterns_source_site', 'your_theme_restrict_block_editor_patterns_from_dotcom_library' );

/**
 * Restrict patterns from the Dotcom library
 */
function your_theme_restrict_block_editor_patterns_from_dotcom_library() {
	return 'disable-dotcom-patterns-source';
}