Oħloq mudell ta 'blokk billi tuża fajl

[rifathasanc]

Kif imsemmi hawn fuq, WordPress 6.0 jintroduċi mod ġdid u eħfef biex iżżid mudelli ta 'blokki mat-temi WordPress tiegħek . Issa tista 'tirreġistra b'mod impliċitu mudelli ta' blokki billi tiddikjarahom bħala fajls PHP fil-folder /patterns fl-għerq tat-tema tiegħek. Ejja ngħidu li trid tirreġistra b'mod impliċitu fit-tema tal-blokk tiegħek l-istess mudell tal-blokk li nħoloq fit-taqsima preċedenti. F'dan l-eżempju se nużaw it-tema Tlieta u Għoxrin.

Tista 'tissettja l-istess parametri bħal fil-metodu preċedenti, iżda tinkludihom f'kumment fl-intestatura tal-fajl. Barra minn hekk, minflok tuża l-ismijiet tal-parametri camelcase, inti ser tissepara l-kliem bi spazju, u minflok ma tuża arrays, int ser tuża elementi tal-lista separati minn virgola. L-ewwel, iddiżattiva l-plugin li użajt biex tirreġistra l-mudell fl-eżempju preċedenti. Imbagħad oħloq fajl ġdid my-block-pattern.php u inkludi l-header li ġej fih:

<?php
/**
* Title: My awesome pattern
* Slug: twentytwentythree/my- lista aġġornata tan-numri tat-telefon 2024 minn madwar id-dinja block-pattern
* Post Types: post
* Categories: featured, banner
* Viewport Width: 800
* Keywords: Call to action, kinsta
* Block Types: core/buttons
*/
?>
Sussegwentement, int ser iżżid il-kontenut mal-mudell tal-blokk. Tista' tuża l-istess marka bħal fl-eżempju preċedenti tagħna, iżda l-ewwel trid tibdelha ftit:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->