ورڈپریس 6.0 میں بلاک تھیم پیٹرن کیسے بنائیں

بلاک پیٹرن، بھی اکثر کہا جاتا ہے۔ سیکشنز، میں متعارف کرایا گیا تھا۔ ورڈپریس 5.5 صارفین کو پہلے سے طے شدہ بلاک لے آؤٹ بنانے اور شیئر کرنے کی اجازت دینے کے لیے پیٹرن ڈائرکٹری. ڈائریکٹری ورڈپریس کمیونٹی کی طرف سے ڈیزائن کردہ کیوریٹڈ پیٹرن کی ایک وسیع رینج کا گھر ہے۔ یہ پیٹرن سادہ کاپی اور پیسٹ فارمیٹ میں دستیاب ہیں، کوڈنگ کے علم کی ضرورت نہیں ہے اور اس طرح صارفین کے لیے ایک بڑا وقت بچانے والا ہے۔

پیٹرن پر بہت سے مضامین کے باوجود، پیٹرن کی تخلیق پر جامع اور تازہ ترین مضامین کی کمی ہے جس میں تازہ ترین بہتر خصوصیات کا احاطہ کیا گیا ہے۔ اس مضمون کا مقصد حالیہ بہتر خصوصیات پر توجہ مرکوز کرتے ہوئے خلا کو پُر کرنا ہے جیسا کہ رجسٹریشن کے بغیر پیٹرن بنانا اور نوزائیدہوں اور تجربہ کار مصنفین کے لیے بلاک تھیم بنانے اور استعمال کرنے کے لیے ایک تازہ ترین مرحلہ وار گائیڈ پیش کرنا ہے۔

آغاز کے بعد سے ورڈپریس 5.9 اور بیس بائیس (TT2) پہلے سے طے شدہ تھیم، بلاک تھیمز میں بلاک پیٹرن کا استعمال پھیل گیا ہے۔ میں کا بڑا پرستار رہا ہوں۔ بلاک پیٹرن اور انہیں میرے بلاک تھیمز میں بنایا اور استعمال کیا ہے۔

نیا ورڈپریس 6.0 فراہم کرتا ہے تین بڑے نمونوں میں مصنفین کے لیے اضافہ ہوتا ہے۔:

• کے ذریعے پیٹرن رجسٹریشن کی اجازت دے رہا ہے۔ /patterns فولڈر (کی طرح /parts, /templates، اور /styles اندراج).
• کا استعمال کرتے ہوئے عوامی پیٹرن ڈائرکٹری سے پیٹرن کا اندراج کرنا theme.json.
• وہ پیٹرن شامل کرنا جو صارف کو نیا صفحہ بناتے وقت پیش کیے جاسکتے ہیں۔

ایک تعارف میں ورڈپریس 6.0 ویڈیو کی تلاش, خودکار پروڈکٹ رابطہ این میک کیتھی نے کچھ نئے بہتر کردہ پیٹرن کی خصوصیات کو نمایاں کیا (15:00 سے شروع ہوتا ہے) اور مستقبل کے پیٹرن بڑھانے کے منصوبوں پر تبادلہ خیال کرتا ہے — جس میں شامل ہیں سیکشننگ عناصر کے طور پر پیٹرنکو اختیارات فراہم کرنا صفحہ تخلیق پر پیٹرن چنیں۔، پیٹرن ڈائرکٹری کی تلاش کو مربوط کرنا، اور مزید۔

شرائط

مضمون میں فرض کیا گیا ہے کہ قارئین کو ورڈپریس فل سائٹ ایڈیٹنگ (FSE) انٹرفیس اور بلاک تھیمز کا بنیادی علم ہے۔ دی بلاک ایڈیٹر ہینڈ بک اور مکمل سائٹ ایڈیٹنگ ویب سائٹ تمام FSE خصوصیات کو جاننے کے لیے تازہ ترین ٹیوٹوریل گائیڈز فراہم کرتی ہے، بشمول اس مضمون میں زیر بحث بلاک تھیمز اور پیٹرن۔

سیکشن 1: بلاک پیٹرن بنانے کے لیے ارتقائی طریقے

بلاک پیٹرن بنانے کے لیے ابتدائی نقطہ نظر کے لیے بلاک پیٹرن API کے استعمال کی ضرورت تھی یا تو حسب ضرورت پلگ ان کے طور پر یا براہ راست میں رجسٹرڈ functions.php بلاک تھیم کے ساتھ بنڈل کرنے کے لیے فائل۔ نئے لانچ کیے گئے ورڈپریس 6.0 نے پیٹرن اور تھیمز کے ساتھ کام کرنے والی کئی نئی اور بہتر خصوصیات متعارف کروائیں، بشمول پیٹرن رجسٹریشن /patterns فولڈر اور ایک صفحہ تخلیق پیٹرن موڈل.

پس منظر کے لیے، آئیے پہلے مختصراً جائزہ لیتے ہیں کہ پیٹرن رجسٹریشن ورک فلو رجسٹر پیٹرن API کے استعمال سے بغیر رجسٹریشن کے براہ راست لوڈ کرنے تک کیسے تیار ہوا۔

مثال 1 استعمال کریں: ٹوئنٹی ٹوئنٹی ون

پہلے سے طے شدہ ٹوئنٹی ٹوئنٹی ون تھیم (TT1) اور TT1 بلاکس تھیم (TT1 کا ایک بھائی) دکھاتا ہے کہ تھیم میں بلاک پیٹرن کیسے رجسٹر کیے جا سکتے ہیں۔ functions.php. TT1 بلاکس تجرباتی تھیم میں، یہ واحد block-pattern.php فائل پر مشتمل ہے۔ آٹھ بلاک پیٹرن میں شامل کیا جاتا ہے functions.php ایک کے طور پر include جیسا کہ یہاں دکھایا گیا ہے۔.

ایک حسب ضرورت بلاک پیٹرن رجسٹر کرنے کی ضرورت ہے کا استعمال کرتے ہوئے register_block_pattern فنکشن، جو دو دلائل وصول کرتا ہے - title (نمونوں کا نام) اور properties (پیٹرن کی خصوصیات کو بیان کرنے والی ایک صف)۔

یہاں اس سے ایک سادہ "ہیلو ورلڈ" پیراگراف پیٹرن کو رجسٹر کرنے کی ایک مثال ہے۔ تھیم شیپر مضمون:

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

رجسٹریشن کے بعد، register_block_pattern() فنکشن سے منسلک ہینڈلر سے بلایا جانا چاہئے۔ init ہک جیسا کہ بیان کیا گیا ہے۔ یہاں.

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

بلاک پیٹرن رجسٹر ہونے کے بعد وہ بلاک ایڈیٹر میں نظر آتے ہیں۔ اس میں مزید تفصیلی دستاویزات موجود ہیں۔ بلاک پیٹرن رجسٹریشن۔

بلاک پیٹرن کی خصوصیات

ضرورت کے علاوہ title اور content خصوصیات، بلاک ایڈیٹر ہینڈ بک درج ذیل اختیاری کی فہرست دیتا ہے۔ پیٹرن کی خصوصیات:

• title (ضروری ہے): پیٹرن کے لیے انسانی پڑھنے کے قابل عنوان۔
• content (ضروری ہے): پیٹرن کے لیے HTML مارک اپ کو بلاک کریں۔
• description (اختیاری): بصری طور پر چھپا ہوا متن جو داخل کرنے والے میں پیٹرن کو بیان کرنے کے لیے استعمال ہوتا ہے۔ ایک تفصیل اختیاری ہے لیکن اس کی بھرپور حوصلہ افزائی کی جاتی ہے جب عنوان مکمل طور پر اس بات کی وضاحت نہیں کرتا ہے کہ پیٹرن کیا کرتا ہے۔ اس تفصیل سے صارفین کو تلاش کے دوران پیٹرن دریافت کرنے میں مدد ملے گی۔
• categories (اختیاری): گروپ بلاک پیٹرن کے لیے استعمال ہونے والے رجسٹرڈ پیٹرن کیٹیگریز کی ایک صف۔ بلاک پیٹرن کو متعدد زمروں میں دکھایا جا سکتا ہے۔ یہاں استعمال کرنے کے لیے ایک زمرہ الگ سے رجسٹر ہونا ضروری ہے۔
• keywords (اختیاری): عرف یا مطلوبہ الفاظ کی ایک صف جو صارفین کو تلاش کے دوران پیٹرن دریافت کرنے میں مدد کرتی ہے۔
• viewportWidth (اختیاری): ایک انٹیجر جو پیٹرن کی مطلوبہ چوڑائی کو بتاتا ہے تاکہ داخل کرنے والے میں پیٹرن کے پیمانے پر پیش نظارہ کیا جاسکے۔
• blockTypes (اختیاری): بلاک کی قسموں کی ایک صف جس کے ساتھ پیٹرن استعمال کرنا مقصود ہے۔ ہر قدر کا اعلان کردہ بلاک ہونا ضروری ہے۔ name.
• inserter (اختیاری): پہلے سے طے شدہ طور پر، تمام پیٹرن داخل کرنے والے میں ظاہر ہوں گے۔ پیٹرن کو چھپانے کے لیے تاکہ اسے صرف پروگرام کے ذریعے ہی داخل کیا جا سکے، سیٹ کریں۔ inserter کرنے کے لئے false.

مندرجہ ذیل ایک اقتباس پیٹرن پلگ ان کوڈ کے ٹکڑوں کی ایک مثال ہے۔ ورڈپریس بلاگ.

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

ٹیمپلیٹ فائل میں پیٹرن کا استعمال

پیٹرن بننے کے بعد، وہ تھیم ٹیمپلیٹ فائل میں درج ذیل بلاک مارک اپ کے ساتھ استعمال کیے جا سکتے ہیں۔

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

سے ایک مثال یہ GitHub ذخیرہ کا استعمال ظاہر کرتا ہےfooter-with-backgroundپیٹرن سلگ کے ساتھtt2gopherTT2 گوفر بلاکس تھیم میں سابقہ۔

بلاک تھیمز اور گٹنبرگ پلگ ان کے ابتدائی اختیار کرنے والوں نے کلاسک تھیمز میں بھی پیٹرن کا فائدہ اٹھایا۔ پہلے سے طے شدہ بیس بیس اور میرے پسندیدہ ایکسل تھیمز (a ڈیمو سائٹ یہاں) اچھی مثالیں ہیں جو یہ ظاہر کرتی ہیں کہ کلاسک تھیمز میں پیٹرن کی خصوصیات کیسے شامل کی جا سکتی ہیں۔

کیس کی مثال 2 استعمال کریں: ٹوئنٹی ٹوئنٹی ٹو

اگر کسی تھیم میں صرف چند نمونے شامل ہوں تو ترقی اور دیکھ بھال کافی حد تک قابل انتظام ہے۔ تاہم، اگر ایک بلاک تھیم میں بہت سے پیٹرن شامل ہیں، جیسے TT2 تھیم میں، تو پھر pattern.php فائل بہت بڑی اور پڑھنا مشکل ہو جاتی ہے۔ پہلے سے طے شدہ TT2 تھیم، جو بنڈل کرتا ہے۔ 60 سے زیادہ پیٹرن، ایک ریفیکٹرڈ پیٹرن رجسٹریشن ورک فلو کو ظاہر کرتا ہے۔ ساخت جسے پڑھنا اور برقرار رکھنا آسان ہے۔

TT2 تھیم سے مثالیں لیتے ہوئے، آئیے مختصراً اس بات پر بات کرتے ہیں کہ یہ آسان شدہ ورک فلو کیسے کام کرتا ہے۔

2.1: پیٹرنز کیٹیگریز کا اندراج

مظاہرے کے مقاصد کے لیے، میں نے TT2 چائلڈ تھیم بنائی اور اسے اپنی مقامی ٹیسٹ سائٹ پر کچھ ڈمی مواد کے ساتھ ترتیب دیا۔ TT2 کے بعد، میں نے رجسٹر کیا۔ footer-with-background اور اس میں درج ذیل پیٹرن زمرہ جات کی فہرست میں شامل کیا گیا۔ block-patterns.php فائل.

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

اس کوڈ کی مثال میں، ہر پیٹرن میں درج ہے۔ $block_patterns = array() کی طرف سے کہا جاتا ہے foreach() فنکشن جو requireح patterns صف میں درج پیٹرن کے نام کے ساتھ ڈائریکٹری فائل جسے ہم اگلے مرحلے میں شامل کریں گے۔

2.2: پیٹرن فائل میں شامل کرنا /inc/patterns فولڈر

اگلا، ہمارے پاس تمام درج کردہ پیٹرن فائلیں ہونی چاہئیں $block_patterns = array(). یہاں پیٹرن فائلوں میں سے ایک کی ایک مثال ہے، 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 -->',
);

آئیے میں پیٹرن کا حوالہ دیتے ہیں۔ footer.html ٹیمپلیٹ حصہ:

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

یہ ٹیمپلیٹ فائل میں سرخی یا فوٹر کے حصے شامل کرنے کے مترادف ہے۔

پیٹرن کو اسی طرح شامل کیا جا سکتا ہے parts/footer.html حوالہ دینے کے لیے اس میں ترمیم کرکے ٹیمپلیٹ slug تھیم کی پیٹرن فائل کی (footer-with-background):

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

اب، اگر ہم بلاک ایڈیٹر کے پیٹرن داخل کرنے والے کو دیکھیں، تو Footer with background ہمارے استعمال کے لیے دستیاب ہونا چاہیے:

مندرجہ ذیل اسکرین شاٹ سامنے کے آخر میں پس منظر کے پیٹرن کے ساتھ نئے بنائے گئے فوٹر کو دکھاتا ہے۔

اب جب کہ پیٹرن بلاک تھیم کا لازمی حصہ بن چکے ہیں، بہت سے پیٹرن بلاک تھیمز میں بنڈل ہیں — جیسے چوکور, سیڈلیٹ, مے لینڈ, Zoologist, جیولوجسٹ - اوپر زیر بحث ورک فلو کے بعد۔ Quadrat تھیم کی ایک مثال یہ ہے۔ /inc/patterns a کے ساتھ فولڈر بلاک پیٹرن رجسٹریشن فائل اور فائلوں کی فہرست مواد کے ماخذ اور مطلوبہ پیٹرن ہیڈر کے ساتھ کے اندر return array() تقریب.

سیکشن 2: رجسٹریشن کے بغیر پیٹرن بنانا اور لوڈ کرنا

براہ کرم نوٹ کریں کہ اس خصوصیت کے لیے آپ کی سائٹ میں ورڈپریس 6.0 یا گٹنبرگ پلگ ان 13.0 یا اس سے اوپر کی انسٹالیشن کی ضرورت ہے۔

یہ ورڈپریس 6.0 کی نئی خصوصیت معیاری فائلوں اور فولڈرز کے ذریعے پیٹرن رجسٹریشن کی اجازت دیتا ہے۔ /patterns، جیسے اسی طرح کے کنونشنز لانا /parts, /templates، اور /styles.

عمل، جیسا کہ میں بھی بیان کیا گیا ہے۔ یہ WP Tavern مضمون، مندرجہ ذیل تین مراحل پر مشتمل ہے:

• تھیم کی جڑ میں پیٹرن فولڈر بنانا
• پلگ ان اسٹائل پیٹرن ہیڈر شامل کرنا
• پیٹرن ذریعہ مواد

مضمون سے لیا گیا ایک عام پیٹرن ہیڈر مارک اپ ذیل میں دکھایا گیا ہے:

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

جیسا کہ پچھلے حصے میں بیان کیا گیا ہے، صرف Title اور Slug فیلڈز درکار ہیں اور دیگر فیلڈز اختیاری ہیں۔

حال ہی میں جاری کردہ تھیمز کی مثالوں کا حوالہ دیتے ہوئے، میں نے پیٹرن رجسٹریشن کو ری فیکٹر کیا۔ یہ TT2 گوفر بلاکس ڈیمو تھیم، کے لیے تیار ہے۔ CSS-Tricks پر ایک پچھلا مضمون.

مندرجہ ذیل مراحل میں، آئیے دریافت کریں کہ کیسے a footer-with-background.php رحجان پی ایچ پی کے ساتھ رجسٹرڈ اور a میں استعمال ہوتا ہے۔ footer.html ٹیمپلیٹ ری فیکٹر ہے.

2.1: تخلیق کریں۔ /patterns تھیم کی جڑ میں فولڈر

پہلا قدم ایک تخلیق کرنا ہے۔ /patterns TT2 گوفر تھیم کی جڑ پر فولڈر اور منتقل کریں۔ footer-with-background.php پیٹرن فائل کو /patterns فولڈر اور ریفیکٹر.

2.2: فائل ہیڈر میں پیٹرن ڈیٹا شامل کریں۔

اگلا، مندرجہ ذیل پیٹرن ہیڈر رجسٹریشن فیلڈز بنائیں۔

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

ایک پیٹرن فائل میں PHP تبصرے کے طور پر لکھا ہوا ٹاپ ٹائٹل فیلڈ ہوتا ہے۔ کے بعد بلاک مواد HTML فارمیٹ میں لکھا گیا ہے۔

2.3: فائل میں پیٹرن کا مواد شامل کریں۔

مواد کے حصے کے لیے، آئیے اندر اندر کوڈ کے ٹکڑوں کو کاپی کرتے ہیں۔ واحد حوالہ جات (مثال کے طور پر، '...') کے مواد سیکشن سے footer-with-background اور کی جگہ لے لے <!-- 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 -->

کا پورا کوڈ کا ٹکڑا patterns/footer-with-background.php فائل دیکھی جا سکتی ہے۔ یہاں GitHub پر.

براہ مہربانی نوٹ کریں کہ /inc/patterns اور block-patterns.php ہیں extras، ورڈپریس 6.0 میں ضروری نہیں ہے، اور صرف ڈیمو مقاصد کے لیے شامل ہے۔

2.4: ٹیمپلیٹ میں پیٹرن سلگ کا حوالہ دینا

مندرجہ بالا ریفیکٹر کو شامل کرنا footer-with-background.php کو پیٹرن footer.html ٹیمپلیٹ بالکل وہی ہے جیسا کہ پچھلے حصے میں بیان کیا گیا ہے (سیکشن 1، 2.2)۔

اب، اگر ہم سائٹ کے فوٹر کا حصہ بلاک ایڈیٹر یا اپنی سائٹ کے فرنٹ اینڈ کو براؤزر میں دیکھتے ہیں، تو فوٹر سیکشن ظاہر ہوتا ہے۔

پیٹرن کے زمرے اور اقسام رجسٹریشن (اختیاری)

بلاک پیٹرن کی درجہ بندی کرنے کے لیے، پیٹرن کے زمرے اور اقسام کو تھیم میں درج کیا جانا چاہیے۔ functions.php فائل.

آئیے اس کی ایک مثال پر غور کریں بلاک پیٹرن کیٹیگریز کا اندراج TT2 گوفر تھیم سے۔

رجسٹریشن کے بعد، پیٹرن بنیادی ڈیفالٹ پیٹرن کے ساتھ پیٹرن داخل کرنے والے میں دکھائے جاتے ہیں۔ پیٹرن داخل کرنے والے میں تھیم کے مخصوص زمرے کے لیبلز کو شامل کرنے کے لیے، ہمیں تھیم کے نام کی جگہ شامل کرکے پچھلے ٹکڑوں میں ترمیم کرنی چاہیے:

/**
* 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 پیٹرن اس کے پیش منظر کے ساتھ داخل کیے گئے پیٹرن میں نظر آتا ہے (اگر منتخب کیا گیا ہے):

یہ عمل بلاک تھیمز میں بلاک پیٹرن بنانے اور ڈسپلے کرنے کو بہت آسان بناتا ہے۔ یہ ورڈپریس 6.0 میں گٹنبرگ پلگ ان کا استعمال کیے بغیر دستیاب ہے۔

پیٹرن رجسٹریشن کے بغیر تھیمز کی مثالیں۔

ابتدائی اختیار کرنے والوں نے پہلے ہی اس خصوصیت کو اپنے بلاک تھیمز میں استعمال کرنا شروع کر دیا ہے۔ تھیمز کی چند مثالیں، جو کہ سے دستیاب ہیں۔ تھیم ڈائرکٹری, کہ رجسٹریشن کے بغیر لوڈ پیٹرن ذیل میں درج ہیں:

• آرچایو – 12 patterns
• لٹکن – 13 patterns
• ریموٹ – 11 patterns
• اسکیٹ پارک – 10 patterns
• سٹیورٹ – 17 patterns
• کتاب – 16 patterns
• اوونت گاردے – 14 patterns

سیکشن 3: کم کوڈ کے ساتھ پیٹرن بنانا اور استعمال کرنا

۔ سرکاری پیٹرن ڈائرکٹری کمیونٹی کے تعاون سے تخلیقی ڈیزائنز پر مشتمل ہے، جسے مواد بنانے کے لیے اپنی مرضی کے مطابق کاپی اور اپنی مرضی کے مطابق بنایا جا سکتا ہے۔ بلاک ایڈیٹر کے ساتھ پیٹرن کا استعمال اتنا آسان کبھی نہیں تھا!

مسلسل بڑھتی ہوئی ڈائرکٹری کے کسی بھی نمونے کو صرف سادہ "کاپی اور پیسٹ" کے ذریعے تھیمز کو بلاک کرنے کے لیے شامل کیا جا سکتا ہے یا اس میں شامل کیا جا سکتا ہے۔ theme.json فائل ان کی ڈائرکٹری کا حوالہ دے کر پیٹرن سلگ. اس کے بعد، میں مختصراً بتاؤں گا کہ یہ بہت ہی محدود کوڈنگ کے ساتھ کتنی آسانی سے پورا کیا جا سکتا ہے۔

پیٹرن ڈائرکٹری سے پیٹرن کا اضافہ اور تخصیص کرنا

3.1: ڈائرکٹری سے ایک صفحہ میں پیٹرن کاپی کریں۔

یہاں، میں استعمال کر رہا ہوں۔ یہ فوٹر سیکشن پیٹرن پیٹرن ڈائرکٹری سے FirstWebGeek کے ذریعے۔ "کاپی پیٹرن" بٹن کو منتخب کرکے پیٹرن کو کاپی کیا اور اسے براہ راست ایک نئے صفحہ میں چسپاں کردیا۔

3.2: مطلوبہ حسب ضرورت بنائیںs

میں نے فونٹس اور بٹن کے پس منظر کے رنگ میں صرف چند تبدیلیاں کی ہیں۔ پھر سے پورے کوڈ کو کاپی کیا۔ کوڈ ایڈیٹر ایک کلپ بورڈ پر۔

اگر آپ کوڈ ایڈیٹر استعمال کرنے سے واقف نہیں ہیں، تو اختیارات پر جائیں (تین نقطوں کے ساتھ، اوپر دائیں)، کوڈ ایڈیٹر بٹن پر کلک کریں، اور یہاں سے پورا کوڈ کاپی کریں۔

3.3: /patterns فولڈر میں ایک نئی فائل بنائیں

پہلے، آئیے ایک نیا بنائیں /patterns/footer-pattern-test.php فائل کریں اور مطلوبہ پیٹرن ہیڈر سیکشن شامل کریں۔ پھر پورا کوڈ پیسٹ کریں (مرحلہ 3، اوپر)۔ پیٹرن کو فوٹر ایریا (لائنز: 5) میں درجہ بندی کیا گیا ہے، ہم پیٹرن داخل کرنے والے میں نئے شامل کیے گئے کو دیکھ سکتے ہیں۔

<?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: داخل کرنے والے میں نیا پیٹرن دیکھیں

نئے شامل کردہ کو دیکھنے کے لیے Footer pattern from patterns library پیٹرن، کسی بھی پوسٹ یا صفحہ پر جائیں اور داخل کرنے والے آئیکن کو منتخب کریں (نیلے رنگ کی علامت، اوپر بائیں) اور پھر "TT2 گوفر – فوٹر" زمرے منتخب کریں۔ نیا شامل کردہ پیٹرن بائیں پینل پر دکھایا گیا ہے، دوسرے فوٹر پیٹرن کے ساتھ اور دائیں جانب اس کا پیش نظارہ (اگر منتخب کیا گیا ہے):

پیٹرن کو براہ راست اندراج کرنا theme.json سنچکا

ورڈپریس 6.0 میں، پیٹرن ڈائرکٹری سے کسی بھی مطلوبہ پیٹرن کو رجسٹر کرنا ممکن ہے۔ theme.json درج ذیل نحو کے ساتھ فائل۔ دی 6.0 دیو نوٹ بیان کرتا ہے۔, " پیٹرن فیلڈ [ کی ایک صف ہےپیٹرن slugsپیٹرن ڈائرکٹری سے۔ پیٹرن سلگس کو پیٹرن ڈائرکٹری میں سنگل پیٹرن ویو میں [URL] کے ذریعے نکالا جا سکتا ہے۔

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

یہ مختصر ورڈپریس 6.0 خصوصیات ویڈیو یہ ظاہر کرتا ہے کہ پیٹرن میں کیسے رجسٹرڈ ہیں۔ /patterns فولڈر (3:53 پر) اور پیٹرن ڈائریکٹر سے مطلوبہ نمونوں کو a میں رجسٹر کرنا theme.json فائل (3:13 پر)۔

پھر، رجسٹرڈ پیٹرن پیٹرن انسرٹر سرچ باکس میں دستیاب ہوتا ہے، جو پھر تھیم بنڈل پیٹرن لائبریری کی طرح استعمال کے لیے دستیاب ہوتا ہے۔

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

اس مثال میں، پیٹرن سلگ footer-section-design-with-3-column-description-social-media-contact-and-newsletter سے پہلے کی مثال کے ذریعے رجسٹرڈ ہے۔ theme.json.

صفحہ تخلیق پیٹرن ماڈل

کے حصے کے طور پر "پیٹرن کے ساتھ عمارت" پہل، ورڈپریس 6.0 پیٹرن موڈل آپشن پیش کرتا ہے۔ تھیم کے مصنفین کو بلاک تھیم میں صفحہ کے لے آؤٹ پیٹرن کو شامل کرنے کے لیے، سائٹ کے صارفین کو صفحہ بناتے وقت صفحہ کے لے آؤٹ پیٹرن (مثلاً، کے بارے میں صفحہ، ایک رابطہ صفحہ، ٹیم کا صفحہ، وغیرہ) منتخب کرنے کی اجازت دیتا ہے۔ مندرجہ ذیل سے لی گئی ایک مثال ہے۔ دیو نوٹ:

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

یہ فیچر فی الحال ہے۔ صفحہ پوسٹ کی قسم تک محدود صرف اور صرف "پوسٹ پوسٹ کی قسم" کے لیے نہیں، ابھی تک۔

۔ صفحہ تخلیق پیٹرن موڈل تمام پیٹرن کے بعد کے مواد کے بلاک کی قسم کو ہٹا کر بھی مکمل طور پر غیر فعال کیا جا سکتا ہے۔ ایک مثال نمونہ کوڈ یہاں دستیاب ہے.

آپ ذیل میں وسائل کے سیکشن کے تحت درج لنکس سے GitHub کی بحث میں حصہ لے سکتے ہیں اور اس میں حصہ لے سکتے ہیں۔

صفحہ بنانے کے لیے پیٹرن ڈائرکٹری کا استعمال

ڈائرکٹری کے پیٹرنز کو صفحہ بنانے والوں کی طرح مطلوبہ پوسٹ یا صفحہ لے آؤٹ بنانے کے لیے بھی استعمال کیا جا سکتا ہے۔ دی گٹنبرگ ہب ٹیم بنائی ہے ایک تجرباتی آن لائن صفحہ بلڈر ایپ ڈائرکٹری سے براہ راست پیٹرن کا استعمال کرتے ہوئے (تعارفی ویڈیو)۔ پھر ایپ کے کوڈز کو کسی سائٹ میں کاپی اور پیسٹ کیا جا سکتا ہے، جو بغیر کوڈنگ کے صفحہ کی ترتیب کے پیچیدہ عمل کو آسان بنا دیتا ہے۔

In یہ مختصر ویڈیو, Jamie Marsland (1:30 پر) ظاہر کرتا ہے کہ کس طرح ایپ کو ڈائرکٹری کے مطلوبہ صفحہ حصوں کا استعمال کرتے ہوئے صفحہ بلڈر کی طرح ایک پورا صفحہ لے آؤٹ بنانے کے لیے استعمال کیا جا سکتا ہے۔

اپ ریپنگ

پیٹرنز صارفین کو اپنے عام استعمال شدہ مواد کی ترتیب (مثلاً، ہیرو صفحہ، کال آؤٹ، وغیرہ) کو کسی بھی صفحہ میں دوبارہ تخلیق کرنے کی اجازت دیتے ہیں اور مواد کو سٹائل میں پیش کرنے کی راہ میں حائل رکاوٹوں کو کم کرتے ہیں، جو پہلے کوڈنگ کی مہارت کے بغیر ممکن نہیں تھے۔ بالکل اسی طرح پلگ ان اور موضوعات ڈائریکٹریز، نئی پیٹرن ڈائریکٹری صارفین کو پیٹرن ڈائرکٹری سے اپنی پسند کے پیٹرن کی وسیع رینج استعمال کرنے اور مواد کو انداز میں لکھنے اور ڈسپلے کرنے کے اختیارات پیش کرتی ہے۔

بے شک، بلاک پیٹرن سب کچھ بدل جائے گا اور یقیناً یہ ایک ہے۔ کھیل مبدل ورڈپریس تھیم زمین کی تزئین میں خصوصیت. جب کی مکمل صلاحیت پیٹرن کے ساتھ عمارت کوشش دستیاب ہو جاتی ہے، اس سے ہمارے بلاک تھیمز کو ڈیزائن کرنے اور کم کوڈ کے علم کے باوجود خوبصورت مواد تخلیق کرنے کا طریقہ بدل جائے گا۔ بہت سے تخلیقی ڈیزائنرز کے لیے، پیٹرن ڈائرکٹری ان کی نمائش کے لیے ایک مناسب راستہ بھی فراہم کر سکتی ہے۔ تخلیقی.

---

وسائل

ورڈپریس 6.0

• WordPress 6.0 Field Guide (WordPress Core)
• Exploring WordPress 6.0: Style Variations, Block Locking UI, Writing Improvements – 22 min video (Anne McCarthy)
• WordPress 6.0 features in 4mins (ڈیو سمتھ)
• ورڈپریس 6.0 میں نیا کیا ہے: نئے بلاکس، اسٹائل سوئچنگ، ٹیمپلیٹ ایڈیٹنگ، ویب فونٹس API، اور بہت کچھ (Kinsta)

پیٹرن بنانا

• Introduction to block patterns (Full Site Editing)
• Introduction to Block Patterns video, 14 mins (Learn WordPress)
• بلاک پیٹرنز (Block Editor Handbook)
• So you want to make block patterns? (WordPress Blog)
• How to create and share low-code Block Patterns in WordPress (GoDaddy)

پیٹرنز میں اضافہ (GitHub)

• Building with Patterns #38529
• Patterns as Sectioning Elements #39281
• Add: Option to pick a pattern on page creation. #40034
• Block Patterns for page creation. #38787
• Add: Page start options (templates and patterns) #39147

بلاگ مضامین۔

• Gutenberg Patterns: The Future of Page Building in WordPress (Rich Tabor)
• Using Block Patterns to speed up WordPress site builds (GoDaddy)
• Block Patterns Will Change Everything (WP Tavern)

---

ورڈپریس 6.0 میں بلاک تھیم پیٹرن کیسے بنائیں اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/