Come creare modelli di temi a blocchi in WordPress 6.0

Schemi di blocco, spesso indicato anche come sezioni, sono stati introdotti nel WordPress 5.5 per consentire agli utenti di creare e condividere layout di blocchi predefiniti nel directory dei modelli. La directory è la sede di una vasta gamma di modelli curati progettati dalla community di WordPress. Questi modelli sono disponibili in un semplice formato copia e incolla, non richiedono conoscenze di codifica e quindi consentono agli utenti di risparmiare molto tempo.

Nonostante molti articoli sui modelli, mancano articoli completi e aggiornati sulla creazione di modelli che coprano le ultime funzionalità migliorate. Questo articolo mira a colmare il divario concentrandosi sulle recenti funzionalità migliorate come la creazione di modelli senza registrazione e offre una guida passo passo aggiornata per crearli e utilizzarli in temi a blocchi per principianti ed autori esperti.

Dal lancio di WordPress 5.9 e la Ventidue (TT2) predefinito, l'uso di schemi di blocco nei temi di blocco è proliferato. Sono stato un grande fan di schemi di blocco e li ho creati e utilizzati nei miei temi a blocchi.

Il nuovo WordPress 6.0 offre il tre modelli principali presentano miglioramenti agli autori:

• Consentire la registrazione del modello tramite /patterns cartella (simile a /parts, /templatese /styles registrazione).
• Registrazione dei modelli dalla directory dei modelli pubblica utilizzando il file theme.json.
• Aggiunta di modelli che possono essere offerti all'utente durante la creazione di una nuova pagina.

In una presentazione Esplorando il video di WordPress 6.0, Ann McCathy, referente di prodotto di Automattic, mette in evidenza alcune caratteristiche dei modelli recentemente migliorate (a partire dalle 15:00) e discute i piani di miglioramento dei modelli futuri, che includono modelli come elementi di sezionamento, fornendo opzioni a scegli il modello sulla creazione della pagina, integrando la ricerca nella directory del modello e altro ancora.

Prerequisiti

L'articolo presuppone che i lettori abbiano una conoscenza di base dell'interfaccia FSE (full site editing) di WordPress e dei temi dei blocchi. Il Manuale dell'editor di blocchi ed Modifica del sito completo Il sito Web fornisce le guide tutorial più aggiornate per apprendere tutte le funzionalità di FSE, inclusi i temi e i modelli di blocco discussi in questo articolo.

Sezione 1: Evoluzione degli approcci alla creazione di schemi a blocchi

L'approccio iniziale alla creazione di pattern di blocco richiedeva l'uso dell'API di pattern di blocco come plug-in personalizzato o registrata direttamente nel file functions.php file da raggruppare con un tema a blocchi. Il WordPress 6.0 appena lanciato ha introdotto diverse funzionalità nuove e migliorate che funzionano con modelli e temi, inclusa la registrazione dei modelli tramite a /patterns cartella e a modello di creazione della pagina modale.

Per lo sfondo, esaminiamo prima brevemente come si è evoluto il flusso di lavoro di registrazione del modello dall'utilizzo dell'API del modello di registrazione al caricamento diretto senza registrazione.

Esempio di caso d'uso 1: Twenty Twenty-One

Il predefinito Tema Ventuno (TT1) e TT1 Tema dei blocchi (un fratello di TT1) mostra come registrare i modelli di blocco nei temi functions.php. Nel tema sperimentale TT1 Blocks, questo singolo modello-blocco.php file contenente otto i modelli di blocco vengono aggiunti a functions.php come include come mostrato qui.

Un modello di blocco personalizzato deve essere registrato usando il register_block_pattern funzione, che riceve due argomenti — title (nome dei modelli) e properties (un array che descrive le proprietà del pattern).

Ecco un esempio di registrazione di un semplice schema di paragrafo "Hello World" da questo Articolo sulla modellazione del tema:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Dopo la registrazione, il register_block_pattern() la funzione deve essere chiamata da un gestore collegato a init gancio come descritto qui.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Una volta che i modelli di blocco sono stati registrati, sono visibili nell'editor dei blocchi. La documentazione più dettagliata si trova in questo Registrazione del modello di blocco.

Proprietà del modello di blocco

Oltre a quanto richiesto title ed content proprietà, il manuale dell'editor di blocchi elenca quanto segue facoltativo proprietà del modello:

• title (Richiesto): un titolo leggibile dall'uomo per il modello.
• content (Richiesto): Blocca il markup HTML per il pattern.
• description (facoltativo): un testo visivamente nascosto utilizzato per descrivere il motivo nell'inseritore. Una descrizione è facoltativa ma è fortemente incoraggiata quando il titolo non descrive completamente ciò che fa il modello. La descrizione aiuterà gli utenti a scoprire il modello durante la ricerca.
• categories (facoltativo): un array di categorie di modelli registrati utilizzati per raggruppare i modelli di blocco. I modelli di blocco possono essere visualizzati su più categorie. Una categoria deve essere registrata separatamente per poter essere utilizzata qui.
• keywords (facoltativo): una serie di alias o parole chiave che aiutano gli utenti a scoprire il modello durante la ricerca.
• viewportWidth (facoltativo): un numero intero che specifica la larghezza prevista del motivo per consentire un'anteprima in scala del motivo nell'inseritore.
• blockTypes (facoltativo): un array di tipi di blocco con cui il modello deve essere utilizzato. Ogni valore deve essere del blocco dichiarato name.
• inserter (facoltativo): Per impostazione predefinita, tutti i motivi verranno visualizzati nell'inseritore. Per nascondere un pattern in modo che possa essere inserito solo a livello di codice, impostare il inserter a false.

Quello che segue è un esempio di frammenti di codice di un plug-in di pattern di virgolette presi da WordPress blog.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Utilizzo di modelli in un file modello

Una volta creati i modelli, possono essere utilizzati in un file modello di tema con il seguente markup di blocco:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Un esempio da questo repository GitHub mostra l'uso di "footer-with-background” modello slug con “tt2gopher” prefisso nel tema dei blocchi TT2 Gopher.

I primi utilizzatori dei temi a blocchi e del plug-in Gutenberg hanno sfruttato anche i modelli nei temi classici. Il predefinito Venti Venti e i miei temi preferiti di Eksell (a sito demo qui) sono buoni esempi che mostrano come le caratteristiche del modello possono essere aggiunte ai temi classici.

Esempio di caso d'uso 2: Twenty Twenty-Two

Se un tema include solo alcuni modelli, lo sviluppo e la manutenzione sono abbastanza gestibili. Tuttavia, se un tema a blocchi include molti pattern, come nel tema TT2, allora il pattern.php il file diventa molto grande e difficile da leggere. Il tema TT2 predefinito, che raggruppa più di 60 modelli, mostra un flusso di lavoro di registrazione del modello rifattorizzato La struttura che è più facile da leggere e mantenere.

Prendendo esempi dal tema TT2, discutiamo brevemente come funziona questo flusso di lavoro semplificato.

2.1: Registrazione delle categorie di modelli

A scopo dimostrativo, ho creato un tema figlio TT2 e l'ho impostato sul mio sito di test locale con alcuni contenuti fittizi. Dopo TT2, mi sono registrato footer-with-background e aggiunto al seguente elenco di array di categorie di modelli nel suo block-patterns.php file.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

In questo esempio di codice, ogni modello elencato in $block_patterns = array() è chiamato da foreach() funzione che requireuno s patterns file di directory con il nome del modello elencato nell'array che aggiungeremo nel passaggio successivo.

2.2: Aggiunta di un file di pattern al file /inc/patterns cartella

Successivamente, dovremmo avere tutti i file di pattern elencati nel file $block_patterns = array(). Ecco un esempio di uno dei file di pattern, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Facciamo riferimento al modello in footer.html parte del modello:

<!-- wp:template-part {"slug":"footer"} /-->

È simile all'aggiunta di parti di intestazione o piè di pagina in un file modello.

I modelli possono essere aggiunti in modo simile al parts/footer.html modello modificandolo a cui fare riferimento slug del file del modello del tema (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Ora, se visitiamo l'inseritore di modelli dell'editor di blocchi, il file Footer with background dovrebbe essere disponibile per il nostro uso:

Lo screenshot seguente mostra il piè di pagina appena creato con il motivo di sfondo sul front-end.

Ora che i modelli sono diventati parte integrante del tema del blocco, molti modelli sono raggruppati in temi del blocco, ad esempio Piazza, semenzale, Mayland, Zoologo, Geologo — seguendo il flusso di lavoro discusso sopra. Ecco un esempio del tema Quadrat /inc/patterns cartella con a registrazione a blocchi di file e elenco di file con fonte di contenuto e intestazione del modello richiesta entro return array() function.

Sezione 2: Creazione e caricamento di modelli senza registrazione

Tieni presente che questa funzione richiede l'installazione di WordPress 6.0 o del plug-in Gutenberg 13.0 o superiore nel tuo sito.

La sezione nuova funzionalità di WordPress 6.0 consente la registrazione del modello tramite file e cartelle standard – /patterns, portando convenzioni simili come /parts, /templatese /styles.

Il processo, come descritto anche in questa Taverna WP articolo, prevede i seguenti tre passaggi:

• creando una cartella modelli nella radice del tema
• aggiungendo l'intestazione del modello di stile del plug-in
• contenuto di origine del modello

Di seguito è mostrato un tipico markup dell'intestazione del modello, tratto dall'articolo:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Solo come descritto nella sezione precedente Title ed Slug i campi sono obbligatori e gli altri campi sono facoltativi.

Facendo riferimento a esempi di temi rilasciati di recente, ho rifattorizzato la registrazione del modello questo TT2 Gopher Blocks tema demo, preparato per un precedente articolo sui CSS-Tricks.

Nei passaggi seguenti, esploriamo come a footer-with-background.php modello registrato con PHP e utilizzato in a footer.html il modello viene rifattorizzato.

2.1: Crea un /patterns cartella nella radice del tema

Il primo passo è creare un /patterns nella cartella principale del tema TT2 Gopher e sposta il file footer-with-background.php file di modello in /patterns cartella e refactor.

2.2: Aggiungi i dati del modello all'intestazione del file

Quindi, crea i seguenti campi di registrazione dell'intestazione del modello.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Un file di pattern ha un campo del titolo in alto scritto come commenti PHP. A seguire il contenuto a blocchi scritto in formato HTML.

2.3: Aggiungi il contenuto del modello al file

Per la sezione del contenuto, copiamo gli snippet di codice all'interno virgolette singole (per esempio, '...') dalla sezione dei contenuti del footer-with-background e sostituisci il <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

L'intero frammento di codice di patterns/footer-with-background.php il file può essere visualizzato qui su GitHub.

Si prega di notare che la /inc/patterns ed block-patterns.php sono extra, non richiesto in WordPress 6.0 e incluso solo a scopo dimostrativo.

2.4: Fare riferimento ai modelli slug nel modello

Aggiungendo quanto sopra rifattorizzato footer-with-background.php modello a footer.html modello è esattamente lo stesso descritto nella sezione precedente (Sezione 1, 2.2).

Ora, se visualizziamo la parte del piè di pagina del sito in un editor di blocchi o il front-end del nostro sito in un browser, viene visualizzata la sezione del piè di pagina.

Categorie e tipi di pattern Registrazione (opzionale)

Per classificare i modelli di blocco, le categorie e i tipi di modelli devono essere registrati nei temi functions.php file.

Consideriamo un esempio di registrazione delle categorie di pattern di blocco dal tema TT2 Gopher.

Dopo la registrazione, i modelli vengono visualizzati nell'inseritore del modello insieme ai modelli predefiniti di base. Per aggiungere etichette di categoria specifiche del tema nell'inseritore di modelli, dovremmo modificare i frammenti precedenti aggiungendo lo spazio dei nomi del tema:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

I footer-with-background il motivo è visibile nei motivi inseriti con la sua anteprima (se selezionata):

Questo processo semplifica notevolmente la creazione e la visualizzazione di schemi di blocco nei temi di blocco. È disponibile in WordPress 6.0 senza utilizzare il plug-in Gutenberg.

Esempi di temi senza registrazione di modelli

I primi utenti hanno già iniziato a utilizzare questa funzione nei loro temi a blocchi. Alcuni esempi dei temi, che sono disponibili da directory dei temi, che i modelli di caricamento senza registrazione sono elencati di seguito:

• Archeo – 12 modelli
• Pendente – 13 modelli
• Assistenza – 11 modelli
• Skatepark – 10 modelli
• Stewart – 17 modelli
• Libro – 16 modelli
• Avanguardia – 14 modelli

Sezione 3: Creazione e utilizzo di modelli con codice basso

I directory ufficiale dei modelli contiene design creativi forniti dalla community, che possono essere copiati e personalizzati a piacimento per creare contenuti. Usare i modelli con un editor di blocchi non è mai stato così facile!

Qualsiasi modello dalla directory in continua crescita può anche essere aggiunto per bloccare i temi semplicemente "copia e incolla" o includerlo nel theme.json file facendo riferimento alla loro directory lumaca del modello. Successivamente, esaminerò brevemente la facilità con cui ciò può essere ottenuto con una codifica molto limitata.

Aggiunta e personalizzazione di modelli dalla directory dei modelli

3.1: Copia il modello dalla directory in una pagina

Ecco, sto usando questo modello di sezione del piè di pagina di FirstWebGeek dalla directory patterns. Copiato il modello selezionando il pulsante "Copia modello" e incollandolo direttamente in una nuova pagina.

3.2: Effettua la personalizzazione desideratas

Ho apportato solo alcune modifiche al colore dei caratteri e allo sfondo dei pulsanti. Quindi ho copiato l'intero codice da editor di codice negli appunti.

Se non hai familiarità con l'uso dell'editor di codice, vai su Opzioni (con tre punti, in alto a destra), fai clic sul pulsante Editor di codice e copia l'intero codice da qui.

3.3: Crea un nuovo file nella cartella /patterns

Per prima cosa, creiamo un nuovo /patterns/footer-pattern-test.php file e aggiungi la sezione di intestazione del modello richiesta. Quindi incolla l'intero codice (passaggio 3, sopra). Il modello è classificato nell'area del piè di pagina (righe: 5), possiamo visualizzare il nuovo aggiunto nell'inseritore del modello.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Visualizza il nuovo motivo nell'inseritore

Per visualizzare i nuovi aggiunti Footer pattern from patterns library pattern, vai su qualsiasi post o pagina e seleziona l'icona dell'inseritore (simbolo blu più, in alto a sinistra), quindi seleziona le categorie "TT2 Gopher - Footer". Il motivo appena aggiunto viene mostrato sul pannello di sinistra, insieme ad altri motivi a piè di pagina e alla relativa anteprima a destra (se selezionata):

Registrazione dei modelli direttamente in theme.json filetto

In WordPress 6.0, è possibile registrare qualsiasi modello desiderato dalla directory del modello con theme.json file con la seguente sintassi. Il 6.0 stati della nota di sviluppo, “il campo patterns è un array di [lumache del modello] dalla directory dei modelli. Gli slug del modello possono essere estratti dall'[URL] nella vista del modello singolo nella Directory dei modelli. "

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

La sezione breve WordPress 6.0 presenta un video mostra come i modelli sono registrati nel /patterns cartella (alle 3:53) e registrando i motivi desiderati dal direttore dei modelli in a theme.json file (alle 3:13).

Quindi, il modello registrato è disponibile nella casella di ricerca dell'inseritore di modelli, che è quindi disponibile per l'uso proprio come la libreria di modelli raggruppati a tema.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

In questo esempio, il pattern slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter dal esempio precedente è registrato tramite theme.json.

Modello del modello di creazione della pagina

Nell'ambito di "costruire con modelli” iniziative, WordPress 6.0 offre un'opzione modale del modello agli autori del tema per aggiungere modelli di layout di pagina in un tema a blocchi, consentendo agli utenti del sito di selezionare modelli di layout di pagina (ad esempio, una pagina informazioni, una pagina di contatto, una pagina del team, ecc.) durante la creazione di una pagina. Quello che segue è un esempio tratto da la nota dello sviluppatore:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Questa funzione è attualmente limitato al tipo di post della pagina solo e non per "Post Post Type", ancora.

I modello di creazione della pagina modale può anche essere disabilitato completamente rimuovendo il tipo di blocco post-contenuto di tutti i pattern. Un esempio di codice è disponibile qui.

Puoi seguire e partecipare alla discussione di GitHub dai link elencati nella sezione delle risorse di seguito.

Utilizzo della directory dei modelli per creare la pagina

I modelli della directory possono anche essere utilizzati per creare il post o il layout di pagina desiderato, in modo simile ai costruttori di pagine. Il Gutenberg Hub squadra ha creato un'app sperimentale per la creazione di pagine online utilizzando i modelli direttamente dalla directory (video introduttivo). Quindi i codici dell'app possono essere copiati e incollati in un sito, il che semplifica notevolmente il complesso processo di impaginazione della costruzione senza codifica.

In questo breve video, Jamie Marsland mostra (alle 1:30) come l'app può essere utilizzata per creare un intero layout di pagina simile al generatore di pagine utilizzando le sezioni di pagina desiderate della directory.

Concludendo

I modelli consentono agli utenti di ricreare il layout del contenuto comunemente utilizzato (ad esempio, pagina eroe, call out, ecc.) in qualsiasi pagina e riducono le barriere alla presentazione del contenuto in stili, che in precedenza non erano possibili senza competenze di programmazione. Proprio come il i plugin ed temi directory, il nuovo modelli directory offre agli utenti opzioni per utilizzare un'ampia gamma di modelli scelti dalla directory dei modelli e scrivere e visualizzare il contenuto con stile.

Anzi, i modelli di blocco cambieranno tutto e sicuramente questo è un cambio di gioco caratteristica nel panorama dei temi di WordPress. Quando il pieno potenziale di costruire con modelli lo sforzo diventa disponibile, questo cambierà il modo in cui progettiamo i temi dei blocchi e creiamo bellissimi contenuti anche con conoscenze di basso codice. Per molti designer creativi, la directory dei modelli può anche fornire una strada appropriata per mostrare i loro la creatività.

---

Risorse

WordPress 6.0

• Guida sul campo di WordPress 6.0 (WordPress Core)
• Esplorazione di WordPress 6.0: variazioni di stile, blocco dell'interfaccia utente, miglioramenti nella scrittura – Video di 22 minuti (Anne McCarthy)
• Funzionalità di WordPress 6.0 in 4 minuti (Dave Smith)
• Novità di WordPress 6.0: nuovi blocchi, cambio di stile, modifica di modelli, API Webfonts e molto altro (Kista)

Creazione di modelli

• Introduzione ai modelli a blocchi (Modifica dell'intero sito)
• Introduzione al video sui modelli di blocco, 14 minuti (Impara WordPress)
• Modelli di blocco (Manuale dell'editor dei blocchi)
• Quindi vuoi creare modelli a blocchi? (Blog WordPress)
• Come creare e condividere modelli di blocchi low-code in WordPress (Vai papà)

Miglioramento dei modelli (GitHub)

• Costruire con modelli #38529
• Modelli come elementi di sezionamento n. 39281
• Aggiungi: opzione per scegliere un modello durante la creazione della pagina. #40034
• Modelli di blocco per la creazione di pagine. #38787
• Aggiungi: Opzioni di avvio della pagina (modelli e pattern) #39147

Articoli sul blog

• Modelli Gutenberg: il futuro della creazione di pagine in WordPress (Ricco Tabor)
• Utilizzo di modelli di blocco per velocizzare la creazione di siti WordPress (Vai papà)
• I modelli di blocco cambieranno tutto (WP Taverna)

---

Come creare modelli di temi a blocchi in WordPress 6.0 originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/