Hvordan lage blokktemamønstre i WordPress 6.0

Blokkmønster, også ofte referert til som seksjoner, ble introdusert i WordPress 5.5 for å tillate brukere å bygge og dele forhåndsdefinerte blokkoppsett i mønsterkatalog. Katalogen er hjemmet til et bredt spekter av kuraterte mønstre designet av WordPress-fellesskapet. Disse mønstrene er tilgjengelige i enkelt kopier og lim-format, krever ingen kodingskunnskap og er derfor en stor tidsbesparelse for brukerne.

Til tross for mange artikler om mønstre, er det mangel på omfattende og oppdaterte artikler om mønsteroppretting som dekker de siste forbedrede funksjonene. Denne artikkelen tar sikte på å fylle gapet med fokus på de nylig forbedrede funksjonene som å lage mønstre uten registrering og tilby en oppdatert trinn-for-trinn-guide for å lage og bruke dem i blokktemaer for nybegynnere og erfarne forfattere.

Siden lanseringen av WordPress 5.9 og Tjue og tjueto (TT2) standardtema, bruken av blokkmønstre i blokktemaer har spredt seg. Jeg har vært en stor fan av blokker mønstre og har laget og brukt dem i blokktemaene mine.

Den nye WordPress 6.0 tilbud tre hovedmønstre har forbedringer til forfattere:

• Tillat mønsterregistrering gjennom /patterns mappe (ligner på /parts, /templatesog /styles registrering).
• Registrere mønstre fra den offentlige mønsterkatalogen ved å bruke theme.json.
• Legge til mønstre som kan tilbys brukeren når du oppretter en ny side.

I en innledning Utforsker WordPress 6.0-video, Automattisk produktforbindelse Ann McCathy fremhever noen nylig forbedrede mønsterfunksjoner (starter kl. 15:00) og diskuterer fremtidige mønsterforbedringsplaner – som inkluderer mønstre som seksjoneringselementer, gir alternativer til velg mønster ved sideoppretting, integrering av mønsterkatalogsøk og mer.

Forutsetninger

Artikkelen forutsetter at leserne har grunnleggende kunnskap om WordPress full site editing (FSE) grensesnitt og blokktemaer. De Block Editor Håndbok og Fullstendig redigering av nettstedet nettstedet gir de mest oppdaterte veiledningene for å lære alle FSE-funksjoner, inkludert blokktemaer og mønstre omtalt i denne artikkelen.

Del 1: Utviklende tilnærminger for å lage blokkmønstre

Den første tilnærmingen til å lage blokkmønstre krevde bruk av blokkmønster API enten som en tilpasset plugin eller direkte registrert i functions.php fil å pakke med et blokktema. Den nylig lanserte WordPress 6.0 introduserte flere nye og forbedrede funksjoner som arbeider med mønstre og temaer, inkludert mønsterregistrering via en /patterns mappe og en sideopprettingsmønster modal.

For bakgrunn, la oss først en kort oversikt over hvordan arbeidsflyten for mønsterregistrering utviklet seg fra å bruke registermønster-APIet til å laste direkte uten registrering.

Brukseksempel 1: Twenty Twenty-One

Standaren Twenty Twenty-One tema (TT1) og TT1 Blocks-tema (et søsken til TT1) vise frem hvordan blokkmønstre kan registreres i temaets functions.php. I TT1 Blocks eksperimentelle tema, denne singelen blokk-mønster.php fil som inneholder åtte blokkmønstre legges til functions.php som en include som vist her.

Et tilpasset blokkmønster må registreres bruker register_block_pattern funksjon, som mottar to argumenter - title (navn på mønstrene) og properties (en matrise som beskriver egenskapene til mønsteret).

Her er et eksempel på registrering av et enkelt "Hello World"-avsnittsmønster fra dette Theme Shaper-artikkel:

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

Etter registrering register_block_pattern() funksjonen skal kalles fra en behandler knyttet til init krok som beskrevet her..

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

Når blokkmønstre er registrert, er de synlige i blokkredigeringsprogrammet. Mer detaljert dokumentasjon finnes i denne Blokker mønsterregistrering.

Blokkmønsteregenskaper

I tillegg til nødvendig title og content eiendommer, den blokkredaktørhåndbok viser følgende valgfrie mønsteregenskaper:

• title (Påkrevd): En menneskelesbar tittel på mønsteret.
• content (Påkrevd): Blokker HTML-markering for mønsteret.
• description (om du har): En visuelt skjult tekst som brukes til å beskrive mønsteret i innstikkeren. En beskrivelse er valgfri, men det oppfordres sterkt når tittelen ikke fullt ut beskriver hva mønsteret gjør. Beskrivelsen vil hjelpe brukere med å oppdage mønsteret mens de søker.
• categories (om du har): En rekke registrerte mønsterkategorier som brukes til å gruppere blokkmønstre. Blokkmønstre kan vises i flere kategorier. En kategori må registreres separat for å kunne brukes her.
• keywords (om du har): En rekke aliaser eller nøkkelord som hjelper brukere med å oppdage mønsteret mens de søker.
• viewportWidth (om du har): Et heltall som spesifiserer den tiltenkte bredden på mønsteret for å tillate en skalert forhåndsvisning av mønsteret i innstikkeren.
• blockTypes (om du har): En rekke blokktyper som mønsteret er ment å brukes med. Hver verdi må være den deklarerte blokkens name.
• inserter (om du har): Som standard vil alle mønstre vises i innstikkeren. For å skjule et mønster slik at det bare kan settes inn programmatisk, still inn inserter til false.

Følgende er et eksempel på et sitatmønster plugin-kodebiter hentet fra WordPress blogg.

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

Bruke mønstre i en malfil

Når mønstre er opprettet, kan de brukes i en temamalfil med følgende blokkmarkering:

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

Et eksempel fra dette GitHub-depotet viser bruken av "footer-with-background" mønstersnegl med "tt2gopher” prefiks i TT2 Gopher blokker tema.

Tidlige brukere av blokktemaer og Gutenberg-plugin utnyttet også mønstre i klassiske temaer. Standaren Tjue tjue og mine favoritt Eksell-temaer (a demo nettsted her) er gode eksempler som viser hvordan mønsterfunksjoner kan legges til klassiske temaer.

Brukseksempel 2: Twenty Twenty-To

Hvis et tema bare inkluderer noen få mønstre, er utviklingen og vedlikeholdet ganske håndterlig. Imidlertid, hvis et blokktema inneholder mange mønstre, som i TT2-temaet, så vil pattern.php filen blir veldig stor og vanskelig å lese. Standard TT2-tema, som pakker mer enn 60 mønstre, viser en arbeidsflyt for refaktorisert mønsterregistrering struktur som er lettere å lese og vedlikeholde.

Ved å ta eksempler fra TT2-temaet, la oss kort diskutere hvordan denne forenklede arbeidsflyten fungerer.

2.1: Registrering av mønsterkategorier

For demonstrasjonsformål opprettet jeg et TT2-undertema og satte det opp på min lokale testside med noe dummy-innhold. Etter TT2 registrerte jeg meg footer-with-background og lagt til følgende mønsterkategorier array-liste i sin block-patterns.php filen.

/**
* 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 kodeeksemplet er hvert mønster som er oppført i $block_patterns = array() kalles av foreach() funksjon som requires en patterns katalogfil med det oppførte mønsternavnet i matrisen som vi vil legge til i neste trinn.

2.2: Legge til en mønsterfil til /inc/patterns mappe

Deretter bør vi ha alle de oppførte mønsterfilene i $block_patterns = array(). Her er et eksempel på en av mønsterfilene, 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 -->',
);

La oss referere til mønsteret i footer.html mal del:

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

Dette ligner på å legge til overskrifts- eller bunntekstdeler i en malfil.

Mønstrene kan på samme måte legges til parts/footer.html malen ved å endre den for å referere til slug av temaets mønsterfil (footer-with-background):

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

Nå, hvis vi besøker mønsterinnleggeren til blokkredigeringsprogrammet, den Footer with background skal være tilgjengelig for vårt bruk:

Følgende skjermbilde viser den nyopprettede bunnteksten med bakgrunnsmønster på fronten.

Nå som mønstre har blitt den integrerte delen av blokktema, er mange mønstre samlet i blokktemaer - som Square, Frø, Mayland, zoolog, geolog — følge arbeidsflyten diskutert ovenfor. Her er et eksempel på Quadrat-temaet /inc/patterns mappe med en blokkmønsterregistrering filen og liste over filer med innholdskilde og nødvendig mønsteroverskrift innenfor return array() funksjon.

Seksjon 2: Opprette og laste mønstre uten registrering

Vær oppmerksom på at denne funksjonen krever installasjon av WordPress 6.0 eller Gutenberg-plugin 13.0 eller nyere på nettstedet ditt.

Dette ny WordPress 6.0-funksjon tillater mønsterregistrering via standardfiler og mapper – /patterns, bringe lignende konvensjoner som /parts, /templatesog /styles.

Prosessen, som også beskrevet i denne WP Tavern artikkelen, innebærer følgende tre trinn:

• lage en mønstermappe ved temaets rot
• legger til plugin-stilmønsterhode
• mønsterkildeinnhold

En typisk mønsteroverskriftsmarkering, hentet fra artikkelen, vises 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
*/
?>

Som beskrevet i forrige avsnitt, bare Title og Slug felt er obligatoriske og andre felt er valgfrie.

Med henvisning til eksempler fra nylig utgitte temaer, refaktorerte jeg mønsterregistrering denne TT2 Gopher Blocks demo-tema, forberedt på en tidligere artikkel om CSS-triks.

I de følgende trinnene, la oss utforske hvordan en footer-with-background.php mønster registrert med PHP og brukes i en footer.html malen er refaktorisert.

2.1: Lag en /patterns mappe ved roten av temaet

Det første trinnet er å lage en /patterns mappen ved TT2 Gopher-temaets rot og flytt footer-with-background.php mønsterfil til /patterns mappe og refaktor.

2.2: Legg til mønsterdata i filoverskriften

Deretter oppretter du følgende registreringsfelt 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 topptittelfelt skrevet som PHP-kommentarer. Etterfulgt av blokk-innhold skrevet i HTML-format.

2.3: Legg til mønsterinnhold til filen

La oss kopiere kodebitene i innholdsdelen enkelt anførselstegn (F.eks '...') fra innholdsdelen av footer-with-background og bytt ut <!-- 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 kodebiten til patterns/footer-with-background.php filen kan sees her på GitHub.

Vær oppmerksom på at /inc/patterns og block-patterns.php er statister, ikke nødvendig i WordPress 6.0, og inkludert kun for demoformål.

2.4: Referer til mønstrene i malen

Legge til ovennevnte refactored footer-with-background.php mønster til footer.html malen er nøyaktig den samme som beskrevet i forrige avsnitt (avsnitt 1, 2.2).

Nå, hvis vi ser sidens bunntekstdel i en blokkredigerer eller frontend av nettstedet vårt i en nettleser, vises bunntekstdelen.

Mønsterkategorier og -typer Registrering (valgfritt)

For å kategorisere blokkmønstre bør mønsterkategoriene og -typene registreres i temaene functions.php filen.

La oss vurdere et eksempel på registrere blokkmønsterkategorier fra TT2 Gopher-temaet.

Etter registreringen vises mønstrene i mønsterinnleggeren sammen med standard kjernemønstre. For å legge til temaspesifikke kategorietiketter i mønsterinnleggeren, bør vi endre de forrige utdragene ved å legge til 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 );

De footer-with-background mønsteret er synlig i mønstrene som er satt inn med forhåndsvisningen (hvis valgt):

Denne prosessen forenkler i stor grad å lage og vise blokkmønstre i blokktemaer. Den er tilgjengelig i WordPress 6.0 uten bruk av Gutenberg-plugin.

Eksempler på temaer uten mønsterregistrering

Tidlige brukere har allerede begynt å bruke denne funksjonen i blokktemaene deres. Noen få eksempler på temaene, som er tilgjengelige fra temakatalog, at lastemønstre uten registrering er oppført nedenfor:

• Archaeo – 12 mønstre
• Anheng – 13 mønstre
• Remote – 11 mønstre
• Skatepark – 10 mønstre
• Stewart – 17 mønstre
• bok – 16 mønstre
• Avantgarde – 14 mønstre

Del 3: Lage og bruke mønstre med lav kode

De offisiell mønsterkatalog inneholder fellesskapsbidrag med kreative design, som kan kopieres og tilpasses etter ønske for å lage innhold. Å bruke mønstre med en blokkredigerer har aldri vært så enklere!

Eventuelle mønstre fra den stadig voksende katalogen kan også legges til blokkertemaer bare ved å "kopiere og lime inn" eller inkludere i theme.json filen ved å referere til deres katalog mønstersnegl. Deretter vil jeg kort gå gjennom hvor enkelt dette kan oppnås med svært begrenset koding.

Legge til og tilpasse mønstre fra mønsterkatalogen

3.1: Kopier mønster fra katalog til en side

Her bruker jeg dette bunntekstseksjonsmønsteret av FirstWebGeek fra mønsterkatalogen. Kopierte mønsteret ved å velge "Kopier mønster"-knappen og limte det direkte inn på en ny side.

3.2: Gjør ønsket tilpasnings

Jeg gjorde bare noen få endringer i fargen på fontene og knappebakgrunnen. Deretter kopierte du hele koden fra kode redaktør over til en utklippstavle.

Hvis du ikke er kjent med å bruke koderedigeringsprogrammet, gå til alternativer (med tre prikker, øverst til høyre), klikk på Koderedigeringsknappen og kopier hele koden herfra.

3.3: Opprett en ny fil i /patterns-mappen

Først, la oss lage en ny /patterns/footer-pattern-test.php fil og legg til den nødvendige mønsteroverskriften. Deretter limer du inn hele koden (trinn 3 ovenfor). Mønsteret er kategorisert i bunntekstområdet (linjer: 5), vi kan se det nylig lagt til i mønsterinnleggeren.

<?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ønsteret i innstikkeren

For å se det nylig lagt til Footer pattern from patterns library mønster, gå til ethvert innlegg eller side og velg innsettingsikonet (blått plusssymbol, øverst til venstre), og velg deretter "TT2 Gopher – Footer"-kategorier. Det nylig lagt til mønsteret vises på venstre panel, sammen med andre bunntekstmønstre og forhåndsvisningen til høyre (hvis valgt):

Registrering av mønstre direkte inn theme.json fil

I WordPress 6.0 er det mulig å registrere eventuelle ønskede mønstre fra mønsterkatalogen med theme.json fil med følgende syntaks. De 6.0 dev notattilstander, "mønsterfeltet er en rekke av [mønstersnegler] fra mønsterkatalogen. Mønstersnegler kan trekkes ut av [URL] i enkeltmønstervisning i mønsterkatalogen."

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

Dette kort WordPress 6.0 inneholder video viser hvordan mønstre registreres i /patterns mappe (kl. 3:53) og registrere de ønskede mønstrene fra mønsterdirektøren i en theme.json fil (kl. 3:13).

Deretter er det registrerte mønsteret tilgjengelig i mønsterinnsettingssøkeboksen, som deretter er tilgjengelig for bruk akkurat som temabundet mønsterbibliotek.

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

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

Sideopprettingsmønstermodell

Som en del av "bygge med mønstreinitiativer, WordPress 6.0 tilbyr et mønstermodalt alternativ til temaforfattere for å legge til sidelayoutmønstre i blokktema, slik at brukere kan velge sidelayoutmønstre (f.eks. en om-side, en kontaktside, en teamside osv.) mens de oppretter en side. Følgende er et eksempel hentet fra utviklernotatet:

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 funksjonen er for øyeblikket begrenset til sideinnleggstype bare og ikke for «Innleggstype» ennå.

De sideopprettingsmønster modal kan også deaktiveres helt ved å fjerne post-innholdsblokktypen for alle mønstrene. Et eksempel på kode er tilgjengelig her.

Du kan følge og delta i GitHubs diskusjon fra lenkene som er oppført under ressursdelen nedenfor.

Bruke mønsterkatalogen for å bygge side

Mønstre fra katalogen kan også brukes til å lage ønsket innlegg eller sidelayout, på samme måte som sidebyggere. De GutenbergHub laget har opprettet en eksperimentell nettsidebyggerapp bruke mønstre direkte fra katalogen (innledende video). Deretter kan kodene fra appen kopieres og limes inn på et nettsted, noe som i stor grad forenkler den komplekse sidelayoutprosessen uten koding.

In denne korte videoen, demonstrerer Jamie Marsland (kl. 1:30) hvordan appen kan brukes til å lage et helt sideoppsett som ligner på sidebygger ved å bruke ønskede sidedeler i katalogen.

Innpakning opp

Mønstre lar brukere gjenskape sin ofte brukte innholdslayout (f.eks. helteside, call-out osv.) på hvilken som helst side og senke barrierene for å presentere innhold i stiler, som tidligere ikke var mulig uten kodeferdigheter. Akkurat som plugins og temaer kataloger, det nye mønstre katalogen tilbyr brukere muligheter til å bruke et bredt spekter av mønstre etter eget valg fra mønsterkatalogen, og skrive og vise innhold med stil.

Faktisk, blokkmønstre vil endre alt og dette er sikkert en spillveksler funksjon i WordPress-temalandskapet. Når det fulle potensialet til bygge med mønstre innsats blir tilgjengelig, kommer dette til å endre måten vi designer blokktemaer på og skaper vakkert innhold selv med kunnskap med lav kode. For mange kreative designere kan mønsterkatalogen også være en passende måte å vise frem deres kreativitet.

---

Ressurser

WordPress 6.0

• WordPress 6.0 Feltguide (WordPress Core)
• Utforsking av WordPress 6.0: Stilvariasjoner, blokklåsingsgrensesnitt, skriveforbedringer – 22 min video (Anne McCarthy)
• WordPress 6.0 funksjoner på 4 minutter (Dave Smith)
• Hva er nytt i WordPress 6.0: Nye blokker, stilbytte, malredigering, Webfonts API og mye mer (Kinsta)

Skaper mønstre

• Introduksjon til blokkmønstre (Redigering av hele nettstedet)
• Introduksjon til Block Patterns video, 14 minutter (Lær WordPress)
• Blokkér mønstre (Blokkredigeringshåndbok)
• Så du vil lage blokkmønstre? (WordPress-blogg)
• Hvordan lage og dele blokkmønstre med lav kode i WordPress (Gå pappa)

Mønsterforbedring (GitHub)

• Bygg med mønstre #38529
• Mønstre som seksjoneringselementer #39281
• Legg til: Mulighet for å velge et mønster ved sideoppretting. #40034
• Blokkmønstre for sideoppretting. #38787
• Legg til: Alternativer for sidestart (maler og mønstre) #39147

Bloggartikler

• Gutenberg Patterns: The Future of Page Building in WordPress (Rik Tabor)
• Bruk av blokkmønstre for å øke hastigheten på byggingen av WordPress-nettsteder (Gå pappa)
• Blokkmønstre vil endre alt (WP Tavern)

---

Hvordan lage blokktemamønstre i WordPress 6.0 opprinnelig publisert på CSS-triks. Du burde få nyhetsbrevet.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/