Pattern di blocchi

Questo testo è stato tradotto utilizzando l’IA. Se desideri visualizzare il testo originale in inglese, fai clic qui.

Un pattern di WordPress è una raccolta di blocchi disposti insieme in una sezione curata, intenzionale e strutturata per un articolo, una pagina o un template.

Puoi creare articoli, pagine e template accattivanti con facilità grazie ai pattern di WordPress.com, realizzati dal team di design di WordPress.com per ereditare automaticamente gli stili globali del tuo tema. Scegli da una vasta collezione di pattern e personalizzali come preferisci; non sono necessari plugin aggiuntivi né codice. Considera questi pattern come una libreria di componenti per l’Editor a blocchi.

Utilizzare i pattern su WordPress.com

Trovare i pattern tramite l’Editor a blocchi

I pattern di WordPress.com sono disponibili nell’editor a blocchi seguendo queste istruzioni:

1. Accedi all’editor di qualsiasi articolo, pagina o template.
2. Fai clic sul pulsante + per aprire l’inseritore di blocchi.
3. Fai clic sulla scheda Pattern per sfogliare un elenco di categorie di pattern (per visualizzare tutti i pattern in una griglia, scorri fino alla fine dell’elenco e fai clic su Esplora tutti i pattern.)
4. Fai clic sul pattern desiderato per inserirlo nel tuo articolo, pagina o template.

Da lì, puoi modificare il contenuto del pattern (immagini, testo, link, ecc.) nell’editor. Gli stili del tema definiti tramite l’Editor del sito verranno applicati automaticamente al pattern inserito.

Trovare pattern tramite la Libreria di Pattern

Per visualizzare in anteprima i pattern a diverse larghezze dello schermo e verificare la responsività dei design, puoi utilizzare la Libreria di Pattern di WordPress.com. La libreria non solo ti consente di sfogliare, cercare e visualizzare in anteprima i pattern a diverse larghezze dello schermo, ma ti permette anche di copiare e incollare i pattern nell’Editor a blocchi.

Quando visiti la Libreria di Pattern, utilizza la navigazione per categorie per visualizzare tutti i pattern disponibili. In alternativa, utilizza il modulo di ricerca per cercare pattern per parola chiave o funzionalità. Una volta trovato un pattern che desideri utilizzare, fai clic sul pulsante Copia pattern.

Una volta scelto un pattern, naviga nell’editor di un articolo, una pagina o un template sul tuo sito WordPress.com e incolla il pattern utilizzando una scorciatoia da tastiera (command + v su Mac o ctrl + v su Windows) oppure facendo clic con il tasto destro e selezionando Incolla.

Come per gli altri pattern, puoi modificare il contenuto del pattern incollato (immagini, testo, link, ecc.) nell’Editor a blocchi.

Costruire con i pattern

I nostri Pattern di blocchi sono progettati per essere portabili, ma il tuo file theme.json dovrà comunque seguire alcune linee guida per garantire che i nostri pattern abbiano il miglior aspetto possibile.

Nello specifico, assumiamo che i seguenti slug siano definiti in spacing.spacingSizes:

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

Questi sono gli stessi preset di spaziatura che WordPress genera per impostazione predefinita. Se mancano dal tuo tema, alcune spaziature dei blocchi potrebbero collassare completamente quando incolli un pattern. I nostri pattern potrebbero comunque funzionare se il tuo tema utilizza preset di spaziatura diversi, ma questo è lo standard a cui ci atteniamo.

Linee guida per la struttura dei Pattern

Oltre a utilizzare i pattern di WordPress.com nei tuoi articoli, pagine e template, puoi anche crearne di tuoi. Il team di design di WordPress.com ha pubblicato alcune delle proprie esperienze sul WordPress Developer Blog, incluse alcune delle seguenti linee guida suggerite per la creazione di pattern:

• Un blocco Gruppo di livello superiore che si estende per l’intera larghezza della pagina.
  • Questo rende più semplice cambiare il colore di sfondo di un’intera sezione della pagina e riordinare le sezioni di una pagina, poiché ogni pattern è contenuto all’interno di un blocco Gruppo.
  • Questi blocchi Gruppo hanno tipicamente i valori di padding sinistro e destro mappati alle impostazioni di layout degli stili globali del sito, in modo che il pattern si adatti al tema. 
• Un blocco contenitore (Griglia, Colonne, Riga e Stack, ecc.) è annidato direttamente all’interno del blocco di livello superiore.
  • Questo blocco è impostato sul valore di larghezza “wide” del tema, consentendo ai contenuti del pattern di avere una larghezza massima, come definito dal tema.
• Due blocchi Spazio vuoto sono posizionati direttamente sopra e sotto il blocco contenitore.
  • Questi blocchi Spazio vuoto consentono di selezionare e gestire lo spazio tra i pattern senza dover cercare i controlli di padding del blocco corrispondente.

Scopri maggiori informazioni su come funzionano i singoli blocchi e come costruire con essi qui.

Disabilitare i pattern

Per rimuovere i Pattern di blocchi nella maggior parte dei casi, consulta la documentazione ufficiale di WordPress sulla deregistrazione dei pattern. Tuttavia, potrebbero esserci casi in cui desideri disabilitare pattern specifici di WordPress.com.

Disabilitare i pattern richiede l’accesso a SSH o SFTP per il tuo sito, in modo da poter modificare il file functions.php del tuo tema.

Per disabilitare tutti i pattern non creati dall’utente, copia e incolla il seguente codice nella parte inferiore del file functions.php del tuo 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;
}

Per disabilitare solo i pattern di WordPress.com, copia e incolla il seguente codice nella parte inferiore del file functions.php del tuo 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';
}