Sådan opretter du bloktemamønstre i WordPress 6.0

Blokmønstre, også ofte omtalt som sektioner, blev introduceret i WordPress 5.5 for at give brugere mulighed for at bygge og dele foruddefinerede bloklayouts i mønsterbibliotek. Biblioteket er hjemsted for en bred vifte af kuraterede mønstre designet af WordPress-fællesskabet. Disse mønstre er tilgængelige i simpelt kopier og indsæt-format, kræver ingen kodningsviden og er derfor en stor tidsbesparelse for brugerne.

På trods af mange artikler om mønstre, er der mangel på omfattende og opdaterede artikler om mønsterskabelse, der dækker de seneste forbedrede funktioner. Denne artikel har til formål at udfylde hullet med fokus på de seneste forbedrede funktioner som at skabe mønstre uden registrering og tilbyde en opdateret trin-for-trin guide til at oprette og bruge dem i bloktemaer for nybegyndere og erfarne forfattere.

Siden lanceringen af WordPress 5.9 og Tyve Toogtyve (TT2) standardtema, brugen af ​​blokmønstre i bloktemaer har spredt sig. Jeg har været stor fan af blokere mønstre og har oprettet og brugt dem i mine bloktemaer.

Den nye WordPress 6.0 tilfører derimod tre store mønstre har forbedringer til forfattere:

• Tillad mønsterregistrering igennem /patterns mappe (ligner /parts, /templatesog /styles registrering).
• Registrering af mønstre fra det offentlige mønsterbibliotek ved hjælp af theme.json.
• Tilføjelse af mønstre, der kan tilbydes brugeren ved oprettelse af en ny side.

I en indledning Udforsker WordPress 6.0-video, Automattic produktforbindelse Ann McCathy fremhæver nogle nyligt forbedrede mønstrefunktioner (startende kl. 15:00) og diskuterer fremtidige mønsterforbedringsplaner - som omfatter mønstre som sektionselementer, giver muligheder for vælg mønster ved sideoprettelse, integration af mønsterindekssøgning og mere.

Forudsætninger

Artiklen antager, at læserne har grundlæggende kendskab til WordPress fuld webstedsredigering (FSE) grænseflade og bloktemaer. Det Block Editor Håndbog , Fuld webstedsredigering webstedet giver de mest opdaterede selvstudievejledninger til at lære alle FSE-funktioner, inklusive bloktemaer og mønstre, der er diskuteret i denne artikel.

Afsnit 1: Udvikling af tilgange til at skabe blokmønstre

Den indledende tilgang til at skabe blokmønstre krævede brugen af ​​blokmønster API enten som et brugerdefineret plugin eller direkte registreret i functions.php fil til at bundte med et bloktema. Den nyligt lancerede WordPress 6.0 introducerede flere nye og forbedrede funktioner, der arbejder med mønstre og temaer, herunder mønsterregistrering via en /patterns mappe og en sideoprettelse mønster modal.

Som baggrund, lad os først kort overskue, hvordan mønsterregistrerings-workflowet udviklede sig fra at bruge registermønster-API'et til direkte indlæsning uden registrering.

Brugseksempel 1: Tyve Enogtyve

Standardværdien Tyve Enogtyve tema (TT1) og TT1 Blocks tema (en søskende til TT1) viser hvordan blokmønstre kan registreres i temaets functions.php. I TT1 Blocks eksperimentelle tema, denne single blok-mønster.php fil indeholdende otte blokmønstre føjes til functions.php som en include som vist her.

Et brugerdefineret blokmønster skal registreres ved hjælp af register_block_pattern funktion, som modtager to argumenter — title (navn på mønstrene) og properties (en matrix, der beskriver mønsterets egenskaber).

Her er et eksempel på registrering af et simpelt "Hello World"-afsnitsmønster fra dette Theme Shaper artikel:

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

Efter registreringen register_block_pattern() funktionen skal kaldes fra en handler knyttet til init krog som beskrevet link..

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

Når blokmønstre er registreret, er de synlige i blokeditoren. Mere detaljeret dokumentation findes i denne Bloker mønsterregistrering.

Blokmønsteregenskaber

Ud over påkrævet title , content ejendomme, den blok editor håndbog angiver følgende valgfrie mønsteregenskaber:

• title (Påkrævet): En menneskelæselig titel til mønsteret.
• content (Påkrævet): Bloker HTML-markering for mønsteret.
• description (Valgfrit): En visuelt skjult tekst, der bruges til at beskrive mønsteret i indsættet. En beskrivelse er valgfri, men den opfordres kraftigt, når titlen ikke fuldt ud beskriver, hvad mønsteret gør. Beskrivelsen hjælper brugerne med at opdage mønsteret, mens de søger.
• categories (Valgfrit): En række af registrerede mønsterkategorier, der bruges til at gruppere blokmønstre. Blokmønstre kan vises i flere kategorier. En kategori skal registreres særskilt for at kunne bruges her.
• keywords (Valgfrit): En række aliaser eller nøgleord, der hjælper brugere med at opdage mønsteret, mens de søger.
• viewportWidth (Valgfrit): Et heltal, der angiver den tilsigtede bredde af mønsteret for at give mulighed for en skaleret forhåndsvisning af mønsteret i indsætteren.
• blockTypes (Valgfrit): En række bloktyper, som mønsteret er beregnet til at blive brugt sammen med. Hver værdi skal være den deklarerede bloks name.
• inserter (Valgfrit): Som standard vises alle mønstre i indsætteren. For at skjule et mønster, så det kun kan indsættes programmatisk, skal du indstille inserter til false.

Det følgende er et eksempel på et citatmønster plugin-kodestykker taget fra 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 -->', )
);

Brug af mønstre i en skabelonfil

Når mønstre er oprettet, kan de bruges i en temaskabelonfil med følgende blokmarkering:

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

Et eksempel fra dette GitHub -depot viser brugen af ​​"footer-with-background" mønstersnegl med "tt2gopher” præfiks i TT2 Gopher-blok-tema.

Tidlige brugere af bloktemaer og Gutenberg-plugin udnyttede også mønstre i klassiske temaer. Standarden Tyve Tyve og mine yndlings Eksell-temaer (a demo site her) er gode eksempler, der viser, hvordan mønsterfunktioner kan føjes til klassiske temaer.

Brugseksempel 2: Twenty Twenty-To

Hvis et tema kun indeholder nogle få mønstre, er udviklingen og vedligeholdelsen nogenlunde overskuelig. Men hvis et bloktema indeholder mange mønstre, som i TT2-temaet, så pattern.php filen bliver meget stor og svær at læse. Standard TT2-temaet, som bundter mere end 60 mønstre, viser et refaktoreret mønsterregistreringsworkflow struktur der er nemmere at læse og vedligeholde.

Med eksempler fra TT2-temaet, lad os kort diskutere, hvordan denne forenklede arbejdsgang fungerer.

2.1: Registrering af mønsterkategorier

Til demonstrationsformål oprettede jeg et TT2-undertema og satte det op på min lokale testside med noget dummy-indhold. Efter TT2 registrerede jeg mig footer-with-background og føjet til følgende mønsterkategorier array-liste i sin block-patterns.php fil.

/**
* 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 );

I dette kodeeksempel er hvert mønster angivet i $block_patterns = array() kaldes af foreach() funktion som requireer en patterns mappefil med det angivne mønsternavn i arrayet, som vi tilføjer i næste trin.

2.2: Tilføjelse af en mønsterfil til /inc/patterns mappe

Dernæst skulle vi have alle de anførte mønsterfiler i $block_patterns = array(). Her er et eksempel på en af ​​mønsterfilerne, 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 -->',
);

Lad os henvise til mønsteret i footer.html skabelon del:

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

Dette svarer til at tilføje overskrifter eller sidefødder i en skabelonfil.

Mønstrene kan ligeledes tilføjes til parts/footer.html skabelon ved at ændre den til at henvise til slug af temaets mønsterfil (footer-with-background):

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

Nu, hvis vi besøger mønsterindsætteren i blokeditoren, den Footer with background skal være tilgængelig for vores brug:

Følgende skærmbillede viser den nyoprettede sidefod med baggrundsmønster på frontenden.

Nu hvor mønstre er blevet den integrerede del af bloktema, er mange mønstre bundtet i bloktemaer - som f.eks. Kvadrat, Frø, Mayland, zoolog, Geolog — efter arbejdsgangen beskrevet ovenfor. Her er et eksempel på Quadrat-temaet /inc/patterns mappe med en blokmønsterregistrering fil og liste over filer med indholdskilde og påkrævet mønsteroverskrift inden for return array() funktion.

Afsnit 2: Oprettelse og indlæsning af mønstre uden registrering

Bemærk venligst, at denne funktion kræver installation af WordPress 6.0 eller Gutenberg plugin 13.0 eller nyere på dit websted.

Denne ny WordPress 6.0-funktion tillader mønsterregistrering via standardfiler og -mapper – /patterns, der bringer lignende konventioner som /parts, /templatesog /styles.

Processen, som også beskrevet i denne WP Tavern artikel, involverer følgende tre trin:

• oprettelse af en mappe med mønstre ved temaets rod
• tilføjelse af plugin-stilmønsterheader
• mønsterkildeindhold

En typisk mønsteroverskriftsmarkering, taget fra artiklen, er vist nedenfor:

<?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
*/
?>

Kun som beskrevet i det foregående afsnit Title , Slug felter er obligatoriske, og andre felter er valgfrie.

Ved at henvise til eksempler fra nyligt udgivne temaer har jeg genindført mønsterregistrering denne TT2 Gopher Blocks demo-tema, forberedt til en tidligere artikel om CSS-Tricks.

Lad os i de følgende trin undersøge, hvordan en footer-with-background.php mønster registreret med PHP og bruges i en footer.html skabelonen er refaktoriseret.

2.1: Opret en /patterns mappe i roden af ​​temaet

Det første skridt er at skabe en /patterns mappe på TT2 Gopher-temaets rod og flyt footer-with-background.php mønsterfil til /patterns mappe og refaktor.

2.2: Tilføj mønsterdata til filoverskriften

Opret derefter følgende registreringsfelter for mønsteroverskrifter.

<?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 /-->

En mønsterfil har et toptitelfelt skrevet som PHP-kommentarer. Efterfulgt af blok-indhold skrevet i HTML-format.

2.3: Tilføj mønsterindhold til filen

Lad os kopiere kodestykkerne inden for indholdssektionen enkelte citater (f.eks, '...') fra indholdssektionen i footer-with-background og udskift <!-- 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 -->

Hele kodestykket af patterns/footer-with-background.php fil kan ses her på GitHub.

Bemærk venligst, at /inc/patterns , block-patterns.php er ekstrakt, ikke påkrævet i WordPress 6.0, og inkluderet kun til demoformål.

2.4: Henvisning til mønstrene i skabelonen

Tilføjelse af ovenstående refactored footer-with-background.php mønster til footer.html skabelonen er nøjagtig den samme som beskrevet i det foregående afsnit (afsnit 1, 2.2).

Hvis vi nu ser sidens sidefoddel i en blokeditor eller frontend af vores side i en browser, vises sidefodsektionen.

Mønsterkategorier og -typer Registrering (valgfrit)

For at kategorisere blokmønstre skal mønsterkategorierne og -typerne registreres i temaer functions.php fil.

Lad os overveje et eksempel på registrering af blokmønsterkategorier fra TT2 Gopher-temaet.

Efter registreringen vises mønstrene i mønsterindsætteren sammen med de centrale standardmønstre. For at tilføje temaspecifikke kategorietiketter i mønsterindsætteren, bør vi ændre de tidligere uddrag ved at tilføje temanavneområde:

/**
* 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 );

footer-with-background mønsteret er synligt i de mønstre, der er indsat med dets forhåndsvisning (hvis valgt):

Denne proces forenkler i høj grad oprettelse og visning af blokmønstre i bloktemaer. Den er tilgængelig i WordPress 6.0 uden brug af Gutenberg-plugin.

Eksempler på temaer uden mønsterregistrering

Tidlige brugere er allerede begyndt at bruge denne funktion i deres bloktemaer. Et par eksempler på de temaer, der er tilgængelige fra tema bibliotek, at indlæsningsmønstre uden registrering er anført nedenfor:

• Archaeo – 12 mønstre
• Pendler – 13 mønstre
• Fjernbetjening – 11 mønstre
• Skatepark – 10 mønstre
• Stewart – 17 mønstre
• bog – 16 mønstre
• Avantgarde – 14 mønstre

Afsnit 3: Oprettelse og brug af mønstre med lav kode

officielle mønstre bibliotek indeholder fællesskabsbidraget kreative designs, som kan kopieres og tilpasses efter ønske for at skabe indhold. Brug af mønstre med en blok-editor har aldrig været så nemmere!

Eventuelle mønstre fra den stadigt voksende mappe kan også tilføjes til blokeringstemaer ved blot at "kopiere og indsætte" eller inkludere i theme.json fil ved at henvise til deres mappe mønstersnegl. Dernæst vil jeg kort gennemgå, hvor nemt dette kan opnås med meget begrænset kodning.

Tilføjelse og tilpasning af mønstre fra mønsterbiblioteket

3.1: Kopier mønster fra bibliotek til en side

Her bruger jeg dette sidefodssektionsmønster af FirstWebGeek fra mønsterbiblioteket. Kopierede mønsteret ved at vælge knappen "Kopier mønster" og indsatte det direkte på en ny side.

3.2: Foretag den ønskede tilpasnings

Jeg lavede kun nogle få ændringer i farven på skrifttyperne og knapbaggrunden. Kopierede derefter hele koden fra kode editor over til en udklipsholder.

Hvis du ikke er bekendt med at bruge kodeeditoren, skal du gå til muligheder (med tre prikker øverst til højre), klikke på knappen Kodeeditor og kopiere hele koden herfra.

3.3: Opret en ny fil i mappen /patterns

Lad os først oprette en ny /patterns/footer-pattern-test.php fil og tilføj den nødvendige mønsteroverskriftssektion. Indsæt derefter hele koden (trin 3 ovenfor). Mønsteret er kategoriseret i sidefodsområdet (linjer: 5), vi kan se det nyligt tilføjede i mønsterindsætteren.

<?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: Se det nye mønster i indsætteren

For at se den nyligt tilføjede Footer pattern from patterns library mønster, gå til ethvert indlæg eller en side og vælg indsætterikonet (blåt plussymbol, øverst til venstre), og vælg derefter "TT2 Gopher - Footer" kategorier. Det nyligt tilføjede mønster vises på venstre panel sammen med andre sidefodsmønstre og dets forhåndsvisning til højre (hvis valgt):

Registrering af mønstre direkte i theme.json fil

I WordPress 6.0 er det muligt at registrere eventuelle ønskede mønstre fra mønsterbiblioteket med theme.json fil med følgende syntaks. Det 6.0 dev note tilstande, "mønsterfeltet er en række af [mønstersnegle] fra Pattern Directory. Mønster-slugs kan udtrækkes af [URL] i enkelt mønstervisning i Pattern Directory."

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

Denne kort WordPress 6.0 indeholder video demonstrerer, hvordan mønstre registreres i /patterns mappe (kl. 3:53) og registrering af de ønskede mønstre fra mønsterdirektøren i en theme.json fil (kl. 3:13).

Derefter er det registrerede mønster tilgængeligt i mønsterindsætter-søgefeltet, som derefter er tilgængeligt til brug ligesom temabundtet mønsterbibliotek.

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

I dette eksempel er mønstersneglen footer-section-design-with-3-column-description-social-media-contact-and-newsletter fra tidligere eksempel er registreret via theme.json.

Sideoprettelse mønstermodel

Som en del af "bygning med mønstre” initiativer, WordPress 6.0 tilbyder en mønstermodal mulighed til temaforfattere for at tilføje sidelayoutmønstre til bloktema, hvilket giver webstedsbrugere mulighed for at vælge sidelayoutmønstre (f.eks. en om-side, en kontaktside, en teamside osv.), mens de opretter en side. Det følgende er et eksempel taget fra udvikler-noten:

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 -->', )
);

Denne funktion er pt begrænset til sideindlægstype kun og ikke for "Posts Post Type" endnu.

sideoprettelse mønster modal kan også deaktiveres fuldstændigt ved at fjerne post-indholdsbloktypen for alle mønstrene. Et eksempel på kode er tilgængelig her.

Du kan følge og deltage i GitHubs diskussion fra de links, der er anført under ressourceafsnittet nedenfor.

Brug af mønsterbibliotek til at bygge side

Mønstre fra mappen kan også bruges til at skabe det ønskede indlæg eller sidelayout, svarende til sidebyggere. Det GutenbergHub team har oprettet en eksperimentel online sidebygger-app ved at bruge mønstre direkte fra mappen (introduktionsvideo). Derefter kan koderne fra appen kopieres og indsættes på et websted, hvilket i høj grad forenkler den bygningskomplekse sidelayoutproces uden kodning.

In denne korte video, demonstrerer Jamie Marsland (kl. 1:30), hvordan appen kan bruges til at skabe et helt sidelayout svarende til sidebyggeren ved at bruge de ønskede sidesektioner i mappen.

Indpakning op

Mønstre giver brugerne mulighed for at genskabe deres almindeligt anvendte indholdslayout (f.eks. helteside, opkald osv.) på enhver side og sænke barriererne for at præsentere indhold i stilarter, som tidligere ikke var mulige uden kodningsfærdigheder. Ligesom Plugins , temaer mapper, det nye mønstre bibliotek giver brugerne muligheder for at bruge en bred vifte af mønstre efter eget valg fra mønsterbiblioteket og skrive og vise indhold med stil.

Faktisk blokmønstre vil ændre alt og dette er helt sikkert en Game changer funktion i WordPress-temalandskabet. Når det fulde potentiale af bygning med mønstre indsats bliver tilgængelig, vil dette ændre den måde, vi designer bloktemaer på og skaber smukt indhold selv med lav-kode viden. For mange kreative designere kan mønsterkataloget også være en passende mulighed for at fremvise deres kreativitet.

---

Ressourcer

WordPress 6.0

• WordPress 6.0 Field Guide (WordPress Core)
• Udforskning af WordPress 6.0: Stilvariationer, Bloklåsning UI, Skriveforbedringer – 22 min video (Anne McCarthy)
• WordPress 6.0 funktioner på 4 minutter (Dave Smith)
• Hvad er nyt i WordPress 6.0: Nye blokke, Style Switching, Skabelonredigering, Webfonts API og meget mere (Kinsta)

At skabe mønstre

• Introduktion til blokmønstre (Fuld webstedsredigering)
• Introduktion til blokmønstre video, 14 minutter (Lær WordPress)
• Bloker mønstre (Blokredigeringshåndbog)
• Så du vil lave blokmønstre? (WordPress blog)
• Sådan opretter og deler du lavkode blokmønstre i WordPress (Kom så far)

Mønsterforbedring (GitHub)

• Bygning med mønstre #38529
• Mønstre som sektioneringselementer #39281
• Tilføj: Mulighed for at vælge et mønster ved sideoprettelse. #40034
• Blokmønstre til sideoprettelse. #38787
• Tilføj: Valgmuligheder for sidestart (skabeloner og mønstre) #39147

Blog artikler

• Gutenberg Patterns: The Future of Page Building i WordPress (Rich Tabor)
• Brug af blokmønstre til at fremskynde opbygning af WordPress-websteder (Kom så far)
• Blokmønstre vil ændre alt (WP Tavern)

---

Sådan opretter du bloktemamønstre i WordPress 6.0 oprindeligt udgivet den CSS-tricks. Du burde få nyhedsbrevet.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/