Hur man skapar blocktemamönster i WordPress 6.0

Blockmönster, även ofta kallad sektioner, introducerades i WordPress 5.5 för att tillåta användare att bygga och dela fördefinierade blocklayouter i mönsterkatalog. Katalogen är hemmet för ett brett utbud av kurerade mönster designade av WordPress-communityt. Dessa mönster är tillgängliga i enkelt kopiera och klistra format, kräver ingen kodning kunskap och därmed är en stor tidsbesparing för användarna.

Trots många artiklar om mönster, finns det en brist på heltäckande och uppdaterade artiklar om mönsterskapande som täcker de senaste förbättrade funktionerna. Den här artikeln syftar till att fylla tomrummet med fokus på de senaste förbättrade funktionerna som att skapa mönster utan registrering och erbjuda en uppdaterad steg-för-steg-guide för att skapa och använda dem i blockteman för nybörjare och erfarna författare.

Sedan lanseringen av WordPress 5.9 och Tjugo Tjugotvå (TT2) standardtema, användningen av blockmönster i blockteman har ökat. Jag har varit ett stort fan av blockera mönster och har skapat och använt dem i mina blockteman.

Den nya WordPress 6.0 erbjudanden tre stora mönster har förbättringar för författare:

• Tillåter mönsterregistrering igenom /patterns mapp (liknande /parts, /templatesoch /styles registrering).
• Registrera mönster från den offentliga mönsterkatalogen med hjälp av theme.json.
• Lägga till mönster som kan erbjudas användaren när en ny sida skapas.

I en introduktion Utforska WordPress 6.0-video, Automattic-produktkontakten Ann McCathy lyfter fram några nyligen förbättrade mönsterfunktioner (från 15:00) och diskuterar framtida mönsterförbättringsplaner — som inkluderar mönster som sektioneringselementger alternativ till välj mönster när du skapar sidan, integrera mönsterkatalogsökning och mer.

Förutsättningar

Artikeln förutsätter att läsarna har grundläggande kunskaper om WordPress full site editing (FSE) gränssnitt och blockteman. De Block Editor Handbook och Fullständig redigering av webbplatsen webbplatsen tillhandahåller de mest uppdaterade självstudieguiderna för att lära dig alla FSE-funktioner, inklusive blockteman och mönster som diskuteras i den här artikeln.

Avsnitt 1: Utvecklande tillvägagångssätt för att skapa blockmönster

Det första tillvägagångssättet för att skapa blockmönster krävde användningen av blockmönster API antingen som ett anpassat plugin eller direkt registrerat i functions.php fil att bunta med ett blocktema. Det nylanserade WordPress 6.0 introducerade flera nya och förbättrade funktioner som arbetar med mönster och teman, inklusive mönsterregistrering via en /patterns mapp och en sidskapande mönster modal.

För bakgrund, låt oss först kortfattat överblicka hur arbetsflödet för mönsterregistrering utvecklades från att använda registermönster-API:et till att laddas direkt utan registrering.

Användningsexempel 1: Twenty Twenty-One

Standarden Twenty Twenty-One tema (TT1) och TT1 Blocks tema (ett syskon till TT1) visa upp hur blockmönster kan registreras i temats functions.php. I TT1 Blocks experimentella tema, denna singel block-pattern.php fil som innehåller åtta blockmönster läggs till functions.php som en include som visas här.

Ett anpassat blockmönster måste registreras med register_block_pattern funktion, som tar emot två argument — title (mönstrens namn) och properties (en array som beskriver egenskaperna hos mönstret).

Här är ett exempel på att registrera ett enkelt "Hello World"-styckemönster från detta 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 registrering, register_block_pattern() funktionen ska anropas från en hanterare kopplad till init krok enligt beskrivning här..

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

När blockmönster väl har registrerats är de synliga i blockredigeraren. Mer detaljerad dokumentation finns i denna Blockera mönsterregistrering.

Blockmönsteregenskaper

Utöver det som krävs title och content fastigheter, den block editor handbok listar följande valfria mönsteregenskaper:

• title (nödvändig): En människoläsbar titel för mönstret.
• content (nödvändig): Blockera HTML-markering för mönstret.
• description (Tillval): En visuellt dold text som används för att beskriva mönstret i infogaren. En beskrivning är valfri men det rekommenderas starkt när titeln inte helt beskriver vad mönstret gör. Beskrivningen hjälper användare att upptäcka mönstret när de söker.
• categories (Tillval): En uppsättning registrerade mönsterkategorier som används för att gruppera blockmönster. Blockmönster kan visas i flera kategorier. En kategori måste registreras separat för att kunna användas här.
• keywords (Tillval): En mängd alias eller nyckelord som hjälper användare att upptäcka mönstret medan de söker.
• viewportWidth (Tillval): Ett heltal som anger den avsedda bredden på mönstret för att möjliggöra en skalad förhandsvisning av mönstret i infogaren.
• blockTypes (Tillval): En uppsättning blocktyper som mönstret är avsett att användas med. Varje värde måste vara det deklarerade blockets name.
• inserter (Tillval): Som standard visas alla mönster i infogaren. För att dölja ett mönster så att det bara kan infogas programmatiskt, ställ in inserter till false.

Följande är ett exempel på ett citatmönster plugin-kodavsnitt hämtade från 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 -->', )
);

Använda mönster i en mallfil

När mönster har skapats kan de användas i en temamallfil med följande blockmarkering:

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

Ett exempel från detta GitHub-arkiv visar användningen av "footer-with-background" mönstersnigel med "tt2gopher” prefix i TT2 Gopher block tema.

Tidiga användare av blockteman och Gutenberg-plugin drog fördel av mönster i klassiska teman också. Standarden Tjugo tjugo och mina favorit-Eksell-teman (a demo webbplats här) är bra exempel som visar hur mönsterfunktioner kan läggas till klassiska teman.

Användningsexempel 2: Twenty Twenty-Two

Om ett tema bara innehåller ett fåtal mönster är utvecklingen och underhållet ganska hanterbart. Men om ett blocktema innehåller många mönster, som i TT2-tema, då pattern.php filen blir mycket stor och svår att läsa. Standard TT2-temat, som buntar mer än 60 mönster, visar ett refaktorerat arbetsflöde för mönsterregistrering struktur som är lättare att läsa och underhålla.

Med exempel från TT2-temat, låt oss kort diskutera hur detta förenklade arbetsflöde fungerar.

2.1: Registrera mönsterkategorier

I demonstrationssyfte skapade jag ett TT2-barntema och satte upp det på min lokala testwebbplats med lite dummy-innehåll. Efter TT2 registrerade jag mig footer-with-background och läggs till i följande lista med mönsterkategorier i dess 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 det här kodexemplet visas varje mönster som anges i $block_patterns = array() kallas av foreach() funktion som requirear en patterns katalogfil med det listade mönsternamnet i arrayen som vi kommer att lägga till i nästa steg.

2.2: Lägga till en mönsterfil till /inc/patterns mapp

Därefter bör vi ha alla listade mönsterfiler i $block_patterns = array(). Här är ett exempel på en av mönsterfilerna, 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 -->',
);

Låt oss referera till mönstret i footer.html mall del:

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

Detta liknar att lägga till rubrik- eller sidfotsdelar i en mallfil.

Mönstren kan på liknande sätt läggas till parts/footer.html mallen genom att modifiera den för att hänvisa till slug av temats mönsterfil (footer-with-background):

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

Om vi ​​nu besöker mönsterinläggaren i blockredigeraren, den Footer with background bör vara tillgänglig för vår användning:

Följande skärmdump visar den nyskapade sidfoten med bakgrundsmönster på fronten.

Nu när mönster har blivit den integrerade delen av blocktema, är många mönster samlade i blockteman - som fyrkant, Seedlet, Mayland, Zoolog, Geolog — efter arbetsflödet som diskuterats ovan. Här är ett exempel på Quadrat-temat /inc/patterns mapp med en blockmönsterregistrering fil och lista över filer med innehållskälla och obligatorisk mönsterrubrik inom return array() fungera.

Avsnitt 2: Skapa och ladda mönster utan registrering

Observera att den här funktionen kräver installation av WordPress 6.0 eller Gutenberg plugin 13.0 eller högre på din webbplats.

Denna ny WordPress 6.0-funktion tillåter mönsterregistrering via standardfiler och mappar – /patterns, med liknande konventioner som /parts, /templatesoch /styles.

Processen, som också beskrivs i denna WP Tavern artikel, omfattar följande tre steg:

• skapa en mönstermapp vid temats rot
• lägga till plugin stil mönsterhuvud
• mönsterkällans innehåll

En typisk mönsterrubrik-markering, hämtad från artikeln visas nedan:

<?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 beskrivits i föregående avsnitt, endast Title och Slug fält är obligatoriska och andra fält är valfria.

Jag hänvisade till exempel från nyligen släppta teman och omstrukturerade mönsterregistreringen denna TT2 Gopher Blocks demo-tema, förberedd för en tidigare artikel om CSS-tricks.

I de följande stegen, låt oss utforska hur en footer-with-background.php mönster registrerad med PHP och används i en footer.html mallen refaktoreras.

2.1: Skapa en /patterns mappen i roten av temat

Det första steget är att skapa en /patterns mapp på TT2 Gopher-temats rot och flytta footer-with-background.php mönsterfil till /patterns mapp och refaktor.

2.2: Lägg till mönsterdata i filhuvudet

Skapa sedan följande registreringsfält för mönsterrubrik.

<?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 ett topptitelfält skrivet som PHP-kommentarer. Följt av block-innehåll skrivet i HTML-format.

2.3: Lägg till mönsterinnehåll till filen

För innehållsavsnittet, låt oss kopiera kodavsnitten inom enkla citat (t.ex, '...') från innehållsdelen av footer-with-background och byt 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 -->

Hela kodavsnittet för patterns/footer-with-background.php filen kan ses här på GitHub.

Observera att /inc/patterns och block-patterns.php är extra, krävs inte i WordPress 6.0, och ingår endast för demoändamål.

2.4: Referera till mönstren i mallen

Lägga till ovan refaktorerade footer-with-background.php mönster till footer.html mallen är exakt densamma som beskrivs i föregående avsnitt (avsnitt 1, 2.2).

Om vi ​​nu visar sidans sidfotsdel i en blockredigerare eller frontend på vår sida i en webbläsare, visas sidfotssektionen.

Mönsterkategorier och -typer Registrering (valfritt)

För att kategorisera blockmönster bör mönsterkategorierna och -typerna registreras i teman functions.php fil.

Låt oss överväga ett exempel på registrera blockmönsterkategorier från TT2 Gopher-temat.

Efter registreringen visas mönstren i mönsterinfogaren tillsammans med de grundläggande standardmönstren. För att lägga till temaspecifika kategorietiketter i mönsterinfogningen bör vi ändra de tidigare utdragen genom att lägga till temanamnutrymme:

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

Smakämnen footer-with-background mönstret är synligt i mönstren som infogats med förhandsgranskningen (om valt):

Denna process förenklar avsevärt att skapa och visa blockmönster i blockteman. Det är tillgängligt i WordPress 6.0 utan att använda Gutenberg-plugin.

Exempel på teman utan mönsterregistrering

Tidiga användare har redan börjat använda den här funktionen i sina blockteman. Några exempel på teman som finns tillgängliga från temakatalog, att laddningsmönster utan registrering listas nedan:

• Archaeo – 12 mönster
• Takpendel – 13 mönster
• fjärr – 11 mönster
• Skatepark – 10 mönster
• Stewart – 17 mönster
• bok – 16 mönster
• Avantgarde – 14 mönster

Avsnitt 3: Skapa och använda mönster med låg kod

Smakämnen officiella mönsterkatalog innehåller kreativ design som bidragit från samhället, som kan kopieras och anpassas efter önskemål för att skapa innehåll. Att använda mönster med en blockredigerare har aldrig varit så enklare!

Alla mönster från den ständigt växande katalogen kan också läggas till för att blockera teman bara genom att "kopiera och klistra in" eller inkludera i theme.json filen genom att hänvisa till deras katalog mönstersnigel. Därefter kommer jag att kortfattat gå igenom hur enkelt detta kan åstadkommas med mycket begränsad kodning.

Lägga till och anpassa mönster från mönsterkatalogen

3.1: Kopiera mönster från katalog till en sida

Här använder jag detta sidfotssektionsmönster av FirstWebGeek från mönsterkatalogen. Kopierade mönstret genom att välja knappen "Kopiera mönster" och klistrade in det direkt på en ny sida.

3.2: Gör önskad anpassnings

Jag gjorde bara några få ändringar i färgen på typsnitten och knappbakgrunden. Kopierade sedan hela koden från kodredigerare över till ett urklipp.

Om du inte är bekant med att använda kodredigeraren, gå till alternativ (med tre punkter uppe till höger), klicka på knappen Kodredigerare och kopiera hela koden härifrån.

3.3: Skapa en ny fil i mappen /patterns

Låt oss först skapa en ny /patterns/footer-pattern-test.php fil och lägg till den önskade mönsterrubriksektionen. Klistra sedan in hela koden (steg 3 ovan). Mönstret är kategoriserat i sidfotsområdet (rader: 5), vi kan se det nyligen tillagda i mönsterinfogaren.

<?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 nya mönstret i infogaren

För att se de nyligen tillagda Footer pattern from patterns library mönster, gå till valfritt inlägg eller sida och välj infogarikonen (blå plussymbol, överst till vänster) och välj sedan "TT2 Gopher – Footer"-kategorier. Det nyligen tillagda mönstret visas på den vänstra panelen, tillsammans med andra sidfotsmönster och dess förhandsvisning till höger (om valt):

Registrera mönster direkt i theme.json fil

I WordPress 6.0 är det möjligt att registrera vilka mönster som helst från mönsterkatalogen med theme.json fil med följande syntax. De 6.0 dev not states, "mönsterfältet är en samling av [mönster sniglar] från mönsterkatalogen. Mönstersniglar kan extraheras av [URL] i en enda mönstervy i mönsterkatalogen."

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

Denna kort WordPress 6.0 innehåller video visar hur mönster registreras i /patterns mapp (kl. 3:53) och registrera önskade mönster från mönsterdirektören i en theme.json fil (kl. 3:13).

Sedan är det registrerade mönstret tillgängligt i sökrutan för insättning av mönster, som sedan är tillgänglig för användning precis som ett temabuntat mönsterbibliotek.

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

I det här exemplet, mönstersnigeln footer-section-design-with-3-column-description-social-media-contact-and-newsletter från tidigare exempel är registrerad via theme.json.

Sidskapande mönstermodell

Som en del av "bygga med mönster” initiativ, WordPress 6.0 erbjuder ett mönstermodalt alternativ till temaförfattare att lägga till sidlayoutmönster i blocktema, så att webbplatsanvändare kan välja sidlayoutmönster (t.ex. en om-sida, en kontaktsida, en teamsida, etc.) medan de skapar en sida. Följande är ett exempel hämtat från dev 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 -->', )
);

Denna funktion är för närvarande begränsat till sidposttyp endast och inte för "Post Post Type" ännu.

Smakämnen sidskapande mönster modal kan också inaktiveras helt genom att ta bort post-innehållsblocktypen för alla mönster. Ett exempel på kod finns här.

Du kan följa och delta i GitHubs diskussion från länkarna som listas under resurssektionen nedan.

Använda mönsterkatalog för att bygga sida

Mönster från katalogen kan också användas för att skapa önskat inlägg eller sidlayout, liknande sidbyggare. De GutenbergHub laget har skapat en experimentell sidbyggarapp online använda mönster direkt från katalogen (introduktionsvideo). Sedan kan koderna från appen kopieras och klistras in på en webbplats, vilket avsevärt förenklar den komplexa sidlayoutprocessen utan kodning.

In den här korta videon, demonstrerar Jamie Marsland (kl. 1:30) hur appen kan användas för att skapa en hel sidlayout som liknar sidbyggaren med hjälp av önskade sidavsnitt i katalogen.

Inslagning upp

Mönster gör det möjligt för användare att återskapa sin vanliga innehållslayout (t.ex. hjältesida, anrop, etc.) på vilken sida som helst och minskar barriärerna för att presentera innehåll i stilar, vilket tidigare inte var möjligt utan kodningskunskaper. Precis som insticksmoduler och teman kataloger, det nya mönster katalogen erbjuder användarna alternativ att använda ett brett utbud av mönster som de väljer från mönsterkatalogen, och skriva och visa innehåll med stil.

Verkligen, blockmönster kommer att förändra allt och visst är detta en spelväxlare funktion i WordPress-temalandskapet. När den fulla potentialen av bygga med mönster ansträngning blir tillgänglig kommer detta att förändra hur vi designar blockteman och skapar vackert innehåll även med kunskap med låg kod. För många kreativa designers kan mönsterkatalogen också vara en lämplig väg att visa upp sina kreativitet.

---

Resurser

WordPress 6.0

• WordPress 6.0 Fältguide (WordPress Core)
• Utforska WordPress 6.0: Stilvariationer, blocklåsningsgränssnitt, skrivförbättringar – 22 min video (Anne McCarthy)
• WordPress 6.0 fungerar på 4 minuter (Dave Smith)
• Vad är nytt i WordPress 6.0: Nya block, stilbyte, mallredigering, Webfonts API och mycket mer (Kinsta)

Skapar mönster

• Introduktion till blockmönster (Redigering av hela webbplatsen)
• Introduktion till blockmönster video, 14 minuter (Lär dig WordPress)
• Blockera mönster (Block Editor Handbook)
• Så du vill göra blockmönster? (WordPress-blogg)
• Hur man skapar och delar blockmönster med låg kod i WordPress (Kör pappa)

Mönsterförbättring (GitHub)

• Byggnad med mönster #38529
• Mönster som sektioneringselement #39281
• Lägg till: Möjlighet att välja ett mönster när du skapar sidan. #40034
• Blockmönster för att skapa sid. #38787
• Lägg till: Sidstartalternativ (mallar och mönster) #39147

Bloggartiklar

• Gutenberg Patterns: The Future of Page Building i WordPress (Rik Tabor)
• Använda blockmönster för att snabba upp WordPress-webbplatser (Kör pappa)
• Blockmönster kommer att förändra allt (WP Tavern)

---

Hur man skapar blocktemamönster i WordPress 6.0 ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.

• Myntsmart. Europas bästa bitcoin- och kryptobörs.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. FRI TILLGÅNG.
• CryptoHawk. Altcoin radar. Gratis provperiod.
• Källa: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/