Blokktéma minták létrehozása a WordPress 6.0-ban

Blokkminták, amelyet gyakran emlegetnek szakaszokben vezették be WordPress 5.5 lehetővé teszi a felhasználók számára, hogy előre meghatározott blokk-elrendezéseket építsenek és oszthassanak meg a mintakönyvtár. A címtár a WordPress közösség által tervezett, válogatott minták széles skálájának otthona. Ezek a minták egyszerű másolás és beillesztés formátumban állnak rendelkezésre, nem igényelnek kódolási ismereteket, és így nagy időt takarítanak meg a felhasználók számára.

A mintákról szóló számos cikk ellenére hiányoznak a minták létrehozásáról szóló átfogó és naprakész cikkek, amelyek lefedik a legújabb továbbfejlesztett funkciókat. Ennek a cikknek az a célja, hogy pótolja a hiányt, és a közelmúltban továbbfejlesztett funkciókra összpontosítson, mint például a minták létrehozása regisztráció nélkül, és egy naprakész, lépésről lépésre szóló útmutatót kínál a blokkotémák létrehozásához és használatához kezdők és tapasztalt szerzők számára.

Elindítása óta WordPress 5.9 és a Húsz-huszonkettő (TT2) alapértelmezett téma, elterjedt a blokkminták használata a blokktémákban. Nagy rajongója voltam blokk minták és létrehoztam és felhasználtam őket a blokktémáimban.

Az új WordPress 6.0 ajánlatok három fő minta a szerzők fejlesztéseit tartalmazza:

• Lehetővé teszi a minta regisztrációját /patterns mappa (hasonlóan /parts, /templatesés /styles bejegyzés).
• Minták regisztrálása a nyilvános minták könyvtárából a theme.json.
• A felhasználónak felajánlható minták hozzáadása új oldal létrehozásakor.

Bevezetőben A WordPress 6.0 videó felfedezése, Az automatikus termékkapcsolattartó Ann McCathy kiemel néhány újonnan továbbfejlesztett mintafunkciót (15:00 órától), és megvitatja a jövőbeni mintafejlesztési terveket – amelyek magukban foglalják minták mint metszőelemek, lehetőséget biztosítva a válasszon mintát az oldalkészítés során, integrálja a mintakönyvtár-keresést és így tovább.

Előfeltételek

A cikk feltételezi, hogy az olvasók alapvető ismeretekkel rendelkeznek a WordPress teljes webhelyszerkesztő (FSE) felületéről és a blokktémákról. A Blokkszerkesztő kézikönyv és a Teljes oldal szerkesztés A webhely a legfrissebb oktatói útmutatókat kínálja az FSE összes funkciójának megismeréséhez, beleértve az ebben a cikkben tárgyalt blokktémákat és mintákat.

1. szakasz: A blokkminták létrehozásának fejlődése

A blokkminták létrehozásának kezdeti megközelítése megkövetelte a blokkminta API használatát, akár egyéni beépülő modulként, akár közvetlenül a programban regisztrálva functions.php fájlt egy blokktémával kötegelni. Az újonnan indult WordPress 6.0 számos új és továbbfejlesztett funkciót vezetett be a mintákkal és témákkal kapcsolatban, beleértve a minták regisztrációját egy /patterns mappa és a oldalkészítési minta modális.

A háttérben először tekintsük át röviden, hogyan fejlődött a mintaregisztrációs munkafolyamat a regisztrációs minta API használatától a regisztráció nélküli közvetlen betöltésig.

1. esetpélda: Twenty Twenty-One

Az alapértelmezett Twenty Twenty-One téma (TT1) és TT1 blokkolja a témát (TT1 testvére) bemutatja, hogyan lehet blokkmintákat regisztrálni a témában functions.php. A TT1 Blocks kísérleti témában ez a kislemez blokk-minta.php tartalmazó fájl nyolc blokkmintákat ad hozzá a functions.php mint egy include ahogy itt látható.

Egyedi blokkminta regisztrálni kell használatával register_block_pattern függvény, amely két argumentumot kap – title (a minták neve) és properties (a minta tulajdonságait leíró tömb).

Íme egy példa egy egyszerű „Hello World” bekezdésminta regisztrálására ebből Témaformáló cikk:

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

Regisztráció után a register_block_pattern() függvényt kell meghívni egy kezelőből, amely a init horog a leírtak szerint itt.

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

A blokkminták regisztrálása után láthatók a blokkszerkesztőben. A részletesebb dokumentáció itt található Blokkminta regisztráció.

Blokkminta tulajdonságai

A kötelezően kívül title és a content tulajdonságok, a blokkszerkesztő kézikönyv felsorolja a következő opcionális minta tulajdonságait:

• title (kívánt): Ember által olvasható cím a mintához.
• content (kívánt): blokkolja a minta HTML-jelölését.
• description (Opcionális): Vizuálisan rejtett szöveg, amely a minta leírására szolgál a beszúróban. A leírás nem kötelező, de erősen ajánlott, ha a cím nem írja le teljesen a minta működését. A leírás segít a felhasználóknak megtalálni a mintát keresés közben.
• categories (Opcionális): A blokkminták csoportosítására használt regisztrált mintakategóriák tömbje. A blokkminták több kategóriában is megjeleníthetők. Az itt történő használathoz egy kategóriát külön kell regisztrálni.
• keywords (Opcionális): Fedőnevek vagy kulcsszavak tömbje, amelyek segítenek a felhasználóknak keresés közben felfedezni a mintát.
• viewportWidth (Opcionális): A minta tervezett szélességét meghatározó egész szám, amely lehetővé teszi a minta méretezett előnézetét a beszúróban.
• blockTypes (Opcionális): Blokktípusok tömbje, amellyel a mintát használni kívánják. Minden értéknek a deklarált blokk értékének kell lennie name.
• inserter (Opcionális): Alapértelmezés szerint az összes minta megjelenik a beszúróban. Egy minta elrejtéséhez, hogy csak programozottan legyen beilleszthető, állítsa be a inserter nak nek false.

A következő példa egy idézetminta beépülő modul kódrészletére látható a 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 -->', )
);

Minták használata sablonfájlban

A minták létrehozása után felhasználhatók egy témasablonfájlban a következő blokkjelöléssel:

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

Példa innen ezt a GitHub-tárat a „footer-with-background"mintás csiga a következővel: "tt2gopher” előtag a TT2 Gopher blokkolja a témát.

A blokktémák és a Gutenberg-bővítmény korai alkalmazói a klasszikus témák mintáit is kihasználták. Az alapértelmezett Húsz Húsz és a kedvenc Eksell témáim (a demo site itt) vannak jó példák, amelyek bemutatják, hogyan adhatók a mintaelemek a klasszikus témákhoz.

2. esetpélda: Twenty Twenty-Two

Ha egy téma csak néhány mintát tartalmaz, a fejlesztés és a karbantartás meglehetősen kezelhető. Ha azonban egy blokktéma sok mintát tartalmaz, mint például a TT2 témában, akkor a pattern.php fájl nagyon nagy lesz és nehezen olvasható. Az alapértelmezett TT2-téma, amely kötegeket tartalmaz több mint 60 minta, egy újrafaktorált mintaregisztrációs munkafolyamatot mutat be struktúra könnyebben olvasható és karbantartható.

A TT2 témáról példákat véve beszéljük meg röviden, hogyan működik ez az egyszerűsített munkafolyamat.

2.1: Mintakategóriák regisztrálása

Demonstrációs célból létrehoztam egy TT2 gyermektémát, és beállítottam a helyi tesztoldalamon, némi áltartalommal. TT2 után regisztráltam footer-with-background és hozzáadta a következő mintakategóriák tömblistájához block-patterns.php fájlt.

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

Ebben a kódpéldában az egyes minták a $block_patterns = array() által hívják foreach() funkció, amely requireh patterns könyvtárfájlt a felsorolt ​​mintanévvel a tömbben, amelyet a következő lépésben adunk hozzá.

2.2: Mintafájl hozzáadása a /inc/patterns mappa

Ezután az összes felsorolt ​​mintafájlnak rendelkeznie kell a $block_patterns = array(). Íme egy példa az egyik mintafájlra, 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 -->',
);

Hivatkozzunk a mintára a footer.html sablon rész:

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

Ez hasonló a fejléc- vagy láblécrészek sablonfájlhoz való hozzáadásához.

A mintákat hasonlóan hozzá lehet adni a parts/footer.html sablon módosításával, hogy hivatkozzon rá slug a téma mintafájljából (footer-with-background):

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

Ha most meglátogatjuk a blokkszerkesztő minták beszúróját, akkor a Footer with background rendelkezésünkre kell állnia:

A következő képernyőkép az újonnan létrehozott láblécet mutatja háttérmintával az előlapon.

Most, hogy a minták a blokktémák szerves részévé váltak, sok minta blokkotémákba van kötve – mint pl. négyzet, Magonc, Mayland, Zoológus, Geológus — a fent tárgyalt munkafolyamatot követve. Íme egy példa a Quadrat témára /inc/patterns mappa a blokkminta regisztráció fájlt, és fájlok listája tartalomforrással és szükséges mintafejléccel belül return array() funkció.

2. szakasz: Minták létrehozása és betöltése regisztráció nélkül

Felhívjuk figyelmét, hogy ehhez a funkcióhoz a WordPress 6.0 vagy a Gutenberg 13.0 vagy újabb bővítmény telepítése szükséges az Ön webhelyére.

Ezt új WordPress 6.0 funkció lehetővé teszi a minta regisztrálását szabványos fájlokon és mappákon keresztül - /patterns, ami hasonló egyezményeket, mint például /parts, /templatesés /styles.

A folyamat, ahogy azt is leírtuk ez a WP Tavern cikk a következő három lépést tartalmazza:

• minták mappa létrehozása a téma gyökerénél
• bővítmény stílusú mintafejléc hozzáadása
• minta forrástartalma

Az alábbiakban egy tipikus mintafejléc-jelölés látható, amely a cikkből származik:

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

Az előző részben leírtak szerint csak Title és a Slug mezők kitöltése kötelező, a többi mező kitöltése nem kötelező.

A közelmúltban megjelent témák példáira hivatkozva újrafaktoráltam a mintaregisztrációt ez a TT2 Gopher Blocks demó téma, felkészülve egy korábbi cikk a CSS-trükkökről.

A következő lépésekben vizsgáljuk meg, hogyan a footer-with-background.php minta PHP-vel regisztrálva és használt a footer.html a sablon újrafaktorálva van.

2.1: Hozzon létre a /patterns mappát a téma gyökerében

Első lépésként létre kell hozni a /patterns mappát a TT2 Gopher téma gyökérjében, és mozgassa a footer-with-background.php mintafájlt /patterns mappa és refaktor.

2.2: Mintaadatok hozzáadása a fájl fejlécéhez

Ezután hozza létre a következő mintafejléc-regisztrációs mezőket.

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

A mintafájl felső címmezője PHP megjegyzésként van írva. Ezt követi a blokk-tartalom HTML formátumban írva.

2.3: Mintatartalom hozzáadása a fájlhoz

A tartalom részhez másoljuk át a kódrészleteket egyetlen idézőjel (például, '...') a tartalom részéből footer-with-background és cserélje ki a <!-- 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 -->

A teljes kódrészlet a patterns/footer-with-background.php fájl megtekinthető itt a GitHubon.

Kérjük, vegye figyelembe, hogy a /inc/patterns és a block-patterns.php faliórái kivonat, amely nem szükséges a WordPress 6.0-s verziójában, és csak bemutató célokra tartalmazza.

2.4: Hivatkozás a mintákra a sablonban

A fenti refaktorált hozzáadása footer-with-background.php mintát footer.html sablon pontosan megegyezik az előző részben leírtakkal (1. szakasz, 2.2).

Ha most egy blokkszerkesztőben nézzük meg a webhely láblécét, vagy böngészőben az oldalunk elejét, akkor megjelenik a lábléc rész.

Mintakategóriák és -típusok Regisztráció (opcionális)

A blokkminták kategorizálásához a mintakategóriákat és -típusokat regisztrálni kell a témákban functions.php fájlt.

Vegyünk egy példát blokkminta kategóriák regisztrálása a TT2 Gopher témából.

A regisztráció után a minták megjelennek a mintabeszúróban az alap alapértelmezett mintákkal együtt. Ahhoz, hogy témaspecifikus kategóriacímkéket adjunk hozzá a mintabeszúróban, módosítanunk kell az előző kódrészleteket a téma névterének hozzáadásával:

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

A footer-with-background minta látható az előnézetével együtt beszúrt mintákban (ha ki van választva):

Ez a folyamat nagyban leegyszerűsíti a blokkminták létrehozását és megjelenítését a blokktémákban. A WordPress 6.0 verziójában a Gutenberg bővítmény használata nélkül érhető el.

Példák témákra minták regisztráció nélkül

A korai alkalmazók már elkezdték használni ezt a funkciót a blokktémáikban. Néhány példa a témákra, amelyek elérhetők a témakönyvtár, amelyek regisztráció nélküli terhelési mintáit az alábbiakban soroljuk fel:

• Archaeo - 12 minta
• Lógos - 13 minta
• Távoli - 11 minta
• Skatepark - 10 minta
• Stewart - 17 minta
• Könyv - 16 minta
• Avantgárd - 14 minta

3. szakasz: Minták létrehozása és használata alacsony kóddal

A hivatalos mintakönyvtár közösség által közreműködött kreatív terveket tartalmaz, amelyek másolhatók és tetszés szerint testreszabhatók tartalom létrehozásához. A minták használata blokkszerkesztővel még soha nem volt ilyen egyszerű!

Az egyre növekvő könyvtárból származó minták egyszerűen „másolással és beillesztéssel” is hozzáadhatók a blokktémákhoz, vagy beilleszthetők a theme.json fájlt a könyvtárukra hivatkozva minta csiga. Ezután röviden végigmegyek, hogy ez milyen könnyen megvalósítható nagyon korlátozott kódolással.

Minták hozzáadása és testreszabása a minták könyvtárából

3.1: Minta másolása a könyvtárból egy oldalra

Itt használom ezt a lábléc szakaszmintát a FirstWebGeek által a minták könyvtárából. Másolta a mintát a „Minta másolása” gomb kiválasztásával, és közvetlenül beillesztette egy új oldalra.

3.2: Végezze el a kívánt testreszabásts

Csak néhány változtatást végeztem a betűtípusok és a gomb hátterének színén. Ezután kimásolta a teljes kódot a kódszerkesztő át a vágólapra.

Ha nem ismeri a kódszerkesztő használatát, lépjen a lehetőségekre (három ponttal, jobb felső sarokban), kattintson a Kódszerkesztő gombra, és innen másolja ki a teljes kódot.

3.3: Hozzon létre egy új fájlt a /patterns mappában

Először is hozzunk létre egy újat /patterns/footer-pattern-test.php fájlt, és adja hozzá a szükséges mintafejlécet. Ezután illessze be a teljes kódot (fenti 3. lépés). A minta a lábléc területén kategorizálva (sorok: 5), az újonnan hozzáadott mintabeszúróban megtekinthető.

<?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: Tekintse meg az új mintát a beszúróban

Az újonnan hozzáadott elemek megtekintéséhez Footer pattern from patterns library mintát, lépjen bármelyik bejegyzésre vagy oldalra, és válassza ki a beszúró ikont (kék plusz szimbólum, bal felső sarokban), majd válassza ki a „TT2 Gopher – Footer” kategóriákat. Az újonnan hozzáadott minta a bal oldali panelen látható, a többi láblécmintával és a jobb oldali előnézetével együtt (ha ki van választva):

A minták közvetlen regisztrálása theme.json filé

A WordPress 6.0-ban lehetőség van bármilyen kívánt minta regisztrálására a mintakönyvtárból theme.json fájl a következő szintaxissal. A 6.0 fejlesztői megjegyzés szerint, „a minták mező egy [minta csigák] a Mintakönyvtárból. A mintadarabokat a [URL] címen lehet kivonni egyetlen minta nézetben a Pattern Directoryban.

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

Ezt rövid videó a WordPress 6.0-ról bemutatja, hogyan regisztrálják a mintákat a /patterns mappát (3:53-kor), és regisztrálja a kívánt mintákat a mintairányítóból a theme.json fájl (3:13-nál).

Ezután a regisztrált minta elérhető a mintabeszúró keresőmezőjében, amely ezután ugyanúgy használható, mint a témához kapcsolódó minták könyvtára.

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

Ebben a példában a minta csiga footer-section-design-with-3-column-description-social-media-contact-and-newsletter tól korábbi példa keresztül van regisztrálva theme.json.

Oldalkészítési minta modell

Részeként "épület mintákkal” kezdeményezések, WordPress 6.0 minta modális lehetőséget kínál a téma szerzőinek, hogy oldalelrendezési mintákat adhassanak hozzá a blokktémához, lehetővé téve a webhely felhasználóinak, hogy oldalelrendezési mintákat (pl. egy névjegyoldalt, egy kapcsolati oldalt, egy csapatoldalt stb.) válasszanak ki az oldal létrehozásakor. A következő egy példa ebből a fejlesztői megjegyzés:

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

Ez a funkció jelenleg Oldalbejegyzés típusára korlátozva csak a „Posts Post Type” esetében, még nem.

A oldalkészítési minta modális teljesen letiltható az összes minta tartalom utáni blokktípusának eltávolításával. Egy példa mintakód itt érhető el.

Követheti és részt vehet a GitHub vitájában az alábbi forrásrészben felsorolt ​​linkeken.

Minták könyvtár használata oldal készítéséhez

A címtárból származó minták is felhasználhatók a kívánt bejegyzés vagy oldalelrendezés létrehozására, hasonlóan az oldalkészítőkhöz. A GutenbergHub csapat hozta létre egy kísérleti online oldalkészítő alkalmazás minták használatával közvetlenül a könyvtárból (bevezető videó). Ezután az alkalmazás kódjai másolhatók és beilleszthetők egy webhelyre, ami nagyban leegyszerűsíti az összetett oldalelrendezési folyamatot kódolás nélkül.

In ez a rövid videó, Jamie Marsland bemutatja (1:30-kor), hogyan lehet az alkalmazással az oldalkészítőhöz hasonló teljes oldalelrendezést létrehozni a könyvtár kívánt oldalrészeinek felhasználásával.

Csomagolta

A minták lehetővé teszik a felhasználók számára, hogy bármely oldalon újraalkossák általánosan használt tartalomelrendezésüket (pl. hősoldal, felhívás stb.), és csökkentsék a tartalom stílusban történő megjelenítésének akadályait, ami korábban nem volt lehetséges kódolási készség nélkül. Csakúgy, mint a Plugins és a témák könyvtárak, az új minták A könyvtár lehetőséget kínál a felhasználóknak a minták széles skálájának használatára a mintakönyvtárból, és stílusosan írhatnak és jeleníthetnek meg tartalmat.

Valóban, a blokkminták mindent megváltoztatnak és biztosan ez a játékváltó funkció a WordPress témakörnyezetben. Amikor a teljes potenciált épület mintákkal Az erőfeszítések elérhetővé válnak, ez megváltoztatja azt a módot, ahogyan blokktémákat tervezünk és gyönyörű tartalmakat készítünk még alacsony kódú tudással is. Sok kreatív tervező számára a minták jegyzéke megfelelő lehetőséget is kínálhat saját belátásaik bemutatására kreativitás.

---

Tudástár

WordPress 6.0

• WordPress 6.0 terepi útmutató (WordPress Core)
• A WordPress 6.0 felfedezése: stílusváltozatok, blokkzárolási felület, írásbeli fejlesztések – 22 perces videó (Anne McCarthy)
• A WordPress 6.0 4 perc alatt elérhető (Dave Smith)
• A WordPress 6.0 újdonságai: Új blokkok, stílusváltás, sablonszerkesztés, Webfonts API és még sok más (Kinsta)

Minták készítése

• Bevezetés a blokkmintákba (Teljes oldal szerkesztése)
• A blokkminták videó bemutatása, 14 perc (tanulja meg a WordPress-t)
• Blokk minták (Blokkszerkesztő kézikönyv)
• Tehát blokkmintákat szeretne készíteni? (WordPress blog)
• Alacsony kódú blokkminták létrehozása és megosztása a WordPressben (Hajrá apa)

Minták javítása (GitHub)

• Épület mintákkal #38529
• Minták mint metszőelemek #39281
• Hozzáadás: Lehetőség egy minta kiválasztására az oldalkészítés során. #40034
• Blokkminták az oldalkészítéshez. #38787
• Hozzáadás: Oldalkezdési lehetőségek (sablonok és minták) #39147

Blogcikkek

• Gutenberg-minták: Az oldalépítés jövője a WordPressben (Rich Tabor)
• Blokkminták használata a WordPress-webhelyek felgyorsítására (Hajrá apa)
• A blokkminták mindent megváltoztatnak (WP Tavern)

---

Blokktéma minták létrehozása a WordPress 6.0-ban eredetileg megjelent CSS-trükkök. Neked kellene kapja meg a hírlevelet.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/