كتلة البناء بدون جافا سكريبت: اختبار ACF و Block Lab و Lazy Blocks

ليس كل شخص قادرًا أو راغبًا في إنشاء كتل في JavaScript حتى الآن ، وفي بعض الأحيان يتعين عليك تثبيت ثلاث أو أربع مجموعات كتل حتى تجد الكتل التي تريدها.

هناك طريقة ثالثة: المكونات الإضافية التي تنشئ الكتل لك من مجموعة من الحقول المخصصة المحددة ، مع قالب للتحكم في عرض الواجهة الأمامية للكتل. تشمل الخيارات الثلاثة الأكثر شيوعًا للقيام بذلك: Block Lab و ACF (الحقول المخصصة المتقدمة) و Lazy Blocks.

حالة الاستخدام الخاصة بي لهذا الاختبار هي مهمة صغيرة أعددتها لإنجازها مع كل من المكونات الإضافية - لإنشاء كتلة لأعضاء فريق شركة تتضمن الحقول التالية: الاسم الأول ، والاسم الأخير ، والرأس ، والسيرة الذاتية ، ورقم الهاتف ، وعنوان البريد الإلكتروني واستخدم الحظر على صفحة في عرض من عمودين مع اثنين من أعضاء الفريق.

سأشرح لكل مكون إضافي

• كيفية إنشاء مجموعة الحقول ،
• كيفية إنشاء قالب للواجهة الأمامية و
• كيفية استخدام الكتل لإنشاء صفحة فريق.

لقد استخدمت Local by Flywheel كأداة تطوير محلية. تم تشغيل موقع الاختبار على WordPress 5.1.1 و Gutenberg 5.4 وموضوع الأعمال من WordPress.com

بعد قراءة هذا المنشور ، ستتمكن من تحديد المكون الإضافي الذي يناسب احتياجاتك.

إنشاء مجموعة جماعية باستخدام Block Lab

قام أعضاء فريق XWP ببناء Block Lab وهو متاح كمكوِّن إضافي مجاني بنسخة تجارية. لقد استخدمت Block Lab أولاً ، وقمت بتثبيت المكون الإضافي ثم بدأت في إنشاء كتلة جديدة.

هنا مقطع فيديو حول كيفية إنشاء الحقول.

الخطوة التالية هي إعداد قالب الكتلة

عندما نظرت إلى الموقع المتوقع ، سيتم جعل القالب جزءًا من دليل السمات في مجلد فرعي يسمى / block / وهذا شيء يحتاج المطور إلى تذكره ، حيث يوجد بعض المحتوى المقفل عند تبديل السمات.

لإنشاء القالب ، فتحت محرر الكود الخاص بي ، وأنشأت ملف block-team-member.php ، وأضفت HTML + والحد الأدنى من PHP للإشارة إلى الحقول.

 <h2>
<؟ php block_field ("الاسم الأول")؛؟> 
<؟ php block_field ('اسم العائلة')؛؟>
</h2>
<p> <img class = "teamphoto" src = "<؟ php block_field ('picture')؛؟>"
 alt = "<؟ php block_field ('الاسم الأول') ؛؟> 
<؟ php block_field ('last-name')؛؟> "width =" 150 "/>
<؟ php block_field ('short-bio') ؛ ؟> </p>

<p> <em> يمكنك الوصول إلى <؟ php block_field ('first-name')؛؟> </em> 
<br/> عبر البريد الإلكتروني <span> <a href="mailto:<؟php block_field('email-address' )؛ ؟> ">
<؟ php block_field ('عنوان البريد الإلكتروني') ؛ ؟> </a> </span>
 أو <br/>
عبر الهاتف: <span> <؟ php block_field ('extension') ؛ ؟> </span> </p> 

في الخطوة الأخيرة ، انتهيت من تكوين هذه الكتلة باستخدام خصائص الكتلة

• لقد قمت بتعيين الرمز لشخص ،
• حدد "عناصر التخطيط" كفئة و
• أضاف "عضو الفريق ، الفريق" ككلمات رئيسية

كل هذا ضروري لواضع الكتلة في المحرر.

دعونا نرى كيف يعمل.

أضفت صفحة جديدة تسمى مقابلة فريق Block Lab الخاص بنا وأضفت أعضاء الفريق ، باستخدام حظر "عضو الفريق".

في الوقت الحالي ، قررت ملء جميع المعلومات داخل حدود محرر الكتلة. أثناء إعداد مجموعة الحقول ، كان لدي أيضًا خيار عرض عناصر التحكم في النموذج في علامة التبويب خيارات الحظر في الشريط الجانبي. في الوقت الحالي ، قررت أن هذا مجرد تفضيل شخصي. بمجرد النقر خارج الكتلة ، يختفي النموذج ويتم تقديم الكتلة بشكل مشابه لتمثيل الواجهة الأمامية.

الآن بعد أن أنهيت الحظر ، يمكنني إضافة المزيد من أعضاء الفريق إلى الصفحة. قررت ، أريدهم في كتلة عمود مع عمودين.

حتى الان جيدة جدا. لم أشعر بسعادة غامرة لأن موقع القالب يشير إلى مجلد السمة.

عندما أرغب في تبديل السمة ، ما زلت أرغب في الاحتفاظ بالكتلة والتخطيط للكتلة مع موقعي ، لذلك سأحتاج إلى التأكد من نسخ مجلد الكتل إلى دليل القالب الجديد. هناك طريقة أخرى موضحة في وثائق Blocklab على Github. يوفر مرشحين لتغيير الموقع الافتراضي للقالب:

"لاستخدام قالب مختلف داخل قالبك ، استخدم عامل التصفية block_lab_override_theme_template ($ theme_template). لاستخدام نموذج مختلف خارج قالبك (على سبيل المثال ، في مكون إضافي) ، استخدم عامل التصفية block_lab_template_path ($ template_path). "

كان هذا سهل الإعداد إلى حد ما ، حتى لو لم تكن مطور PHP ، يمكنك على الأرجح استخدام حقل كتلة وظيفة PHP () والتأكد من الإشارة إلى أسماء الحقول الصحيحة.

يوفر لك Block Lab ، في جوهره ، طريقة لإنشاء الحقول وتكوين خصائص الكتلة في شاشة واحدة ، ثم تحتاج إلى إضافة قالب الكتلة المقابل إلى مجلد / كتل / في دليل القالب الخاص بك. إنه مستقيم للأمام إلى حد ما.

إنشاء فريق عمل مع ACF 5.8

تم إصدار ACF (الحقول المخصصة المتقدمة) الإصدار 5.8 مع أداة إنشاء الكتل (متوفرة فقط في الإصدار المحترف). في الاختبار الذي أجريته ، استخدمت ACF 5.8 RC 1. الإصدار النهائي متاح الآن. Elliot Condon هو مؤلف المكون الإضافي وتم إصدار الإصدار الأول في عام 2011. وقد نما المكون الإضافي ليصبح أداة مطور ذات شعبية كبيرة للعاملين لحسابهم الخاص والوكالات على حد سواء ولديها أكثر من مليون عملية تثبيت.

نجاحها وتعدد استخداماتها يجعل إنشاء المجموعة الميدانية عملية أكثر انخراطًا مقارنةً بالملحقين الآخرين. يحتوي الإصدار 5.8 من Pro على الإصدار الأول من أداة بناء الكتل الخاصة به.

هذا هو عرض المسؤول للمجموعة الميدانية "عضو الفريق".

الآن كيف يمكنني تحويل هذا إلى كتلة؟ الوثائق شاملة بما فيه الكفاية. ملحوظة: في هذا الاختبار ذهبت بترتيب مختلف قليلاً ...

لقد بدأت مع Field Group وكنت بحاجة للعودة إلى شاشة المسؤول هذه بعد أن سجلت الحظر (انظر أدناه).

لقد استخدمت ملفين. أولاً ، كنت بحاجة إلى تسجيل الكتلة في function.php لموضوعي. بالنسبة لقالب / رمز تقديم الكتلة ، استخدمت content-block-team-member.php أيضًا ليتم تخزينه في مجلد النسق النشط.

سترى كيف يتناسب هذان الشخصان معًا في ثانية. يتم تنفيذ باقي العمل بواسطة المكون الإضافي في النهاية الخلفية.

لذلك دعونا نكتب Block Code في PHP

المقتطف الأول هو تسجيل الكتلة. لقد أعطيته اسمًا وعنوانًا ووصفًا وأشر إلى قالب العرض ، ومنحه فئة وأيقونة وبعض الكلمات الرئيسية ، والتي يمكن لمنتج المحتوى من خلالها العثور على الكتلة في Block Inserter. قمت بالتمرير طوال الطريق حتى نهاية وظائف السمة الخاصة بي وأضفت هذا المقتطف:

 وظيفة register_acf_blocks () {
   // تسجيل كتلة عضو الفريق.
   acf_register_block (مجموعة (
       'name' => 'acf-team-member'،
       "لقب" => __ ("عضو فريق ACF") ،
       'description' => __ ('تم إنشاء كتلة عضو فريق مخصص عبر ACF 5.8') ،
       'render_template' => 'content-block-team-member.php'،
       "الفئة" => "التنسيق" ،
       "رمز" => "تعليقات المسؤول" ،
       "الكلمات الرئيسية" => مجموعة ("عضو الفريق" ، "فريق") ،
   )) ؛
}
// تحقق مما إذا كانت الوظيفة موجودة وربطها بالإعداد.
إذا (function_exists ('acf_register_block')) {
   add_action ('acf / init'، 'register_acf_blocks')؛
}

هذا الرمز مأخوذ مباشرة من الوثائق وقمت بتغيير بعض القيم.

في القسم التالي ، قمت بإنشاء قالب عرض الكتلة. يجب أن يتطابق اسم الملف مع السمة "render_template" في النص أعلاه ، وهي " content-block-team-member.php "

لقد تابعت أيضًا وثائق ACF وقمت بتغيير بعض القيم فقط وقمت بتحديث رمز العرض.

 <؟ php
// إنشاء سمة معرف لتصميم معين
معرف $ = "عضو فريق". $ block ['id']؛

// إنشاء فئة محاذاة ("محاذاة") من إعداد الكتلة ("واسع")
$ align_class = $ block ['محاذاة']؟ "محاذاة". كتلة $ ['محاذاة']: ''؛

// تحميل القيم وتعيين القيم الافتراضية لحقول الكتلة.
$ short_bio = get_field ('short_bio')؟: 'السيرة الذاتية القصيرة هنا ...' ؛
$ first_name = get_field ('first_name')؟: 'First Name'؛
$ last_name = get_field ('last_name')؟: 'Last Name'؛
$ image = get_field ("صورة") ؛
$ email_address = get_field ('email_address') ؛
امتداد $ = get_field ('extension') ؛
؟>

"class =" team-member ">
       

   

   "alt =" "alt =" "العرض =" 150 "/>
       
       

       

       
       
   

عندما بدأت مع Fieldgroup ، كنت بحاجة إلى العودة والتأكد من أن المجموعة مرتبطة بالمجموعة التي قمت بتسجيلها للتو. أسفل شاشة Fieldgroup ، قمت بإنشاء قاعدة للموقع: يجب أن تقرأ: "اعرض مجموعة الحقول هذه إذا كانت الكتلة مساوية لعضو فريق ACF.

الآن دعنا نرى كيف يعمل هذا في محرر Block عندما أقوم بإضافة عضوين.

كانت تجربة مثيرة للاهتمام. يمكنك استخدام النموذج في قسم المحرر لإدخال البيانات. هناك خيار آخر وهو إدخال البيانات في حقول النموذج المتوفرة في الشريط الجانبي وسترى تحديث الكتلة في الوقت الفعلي. يمكنك التبديل بين الطريقتين ولكن النقر فوق الزر "التبديل إلى التحرير" أو "التبديل إلى المعاينة" وفقًا للطريقة التي تستخدمها الآن.

واجهة مستخدم محرر الكتلة تعمل بشكل جيد. من الجدير إجراء الإعداد الأكثر تفصيلاً والتعليمات البرمجية الضرورية.

إنشاء كتلة جماعية باستخدام Lazy Blocks

يُطلق على المكون الإضافي الثالث في هذا الاختبار اسم "Lazy Blocks" بواسطة Nikita من nkdev.info ، وهو نفس الفريق الذي نشر أيضًا مجموعة كتل GhostKit.

لا يسمح لي فقط بتخزين المعلومات في post_content ولكني أحصل أيضًا على خيار لتخزينها في جدول post_meta.

إليك مقطع فيديو حول استخدام الواجهة لإنشاء الحقول.

نظرًا لأن شاشة المسؤول هذه تركز على الحصول على جميع المعلومات لإنشاء الكتل ، فقد قمت على اليسار بإنشاء الحقول الخاصة بي وفي الشريط الجانبي. لقد ملأت المعلومات اللازمة لتسجيل كتلة مع المحرر.

في الأسفل ، تمكنت من إضافة HTML للواجهة الأمامية والخلفية. التركيب اللغوي أسهل من Block Lab ، وبالطبع أسهل بكثير من قوالب ACF.

لم أكن بحاجة إلى إضافة أي كود إلى وظائف السمة الخاصة بي .php ولم أحتاج إلى إنشاء ملفات إضافية باستخدام كود القالب الخاص بي.

يمكنك إضافتها جميعًا هنا ، بمساعدة تمييز بناء الجملة ودمج العلامات بدلاً من استدعاءات الوظائف. توضح الوثائق طرقًا متعددة لكتابة رمز القالب الخاص بك. أنا بالتأكيد من محبي المقاود (القوالب الدلالية) لأنها في هذا السياق أقرب بكثير إلى علامات دمج الأنظمة الأخرى.

لقد قمت بنسخ / لصق نفس الرمز في علامة التبويب "محرر HTML" ، حتى أتمكن من رؤية عرض الواجهة الأمامية أسفل حقول النموذج.

دعونا نستخدمه.

يبدو أن هذا يعمل. لقد كان محرجًا بعض الشيء ألا يختفي النموذج عندما ألغيت تحديد الكتلة. يأخذ الكثير من العقارات في المحرر. على الرغم من أنني أردت أن يكون أعضاء الفريق في كتلة من عمودين ، إلا أنني لم أنجح في سحب الكتلتين وإسقاطهما في عمود بلوك. لقد ذكرت هذا في موضوع الدعم الخاص بي وأجبت nK: "... إخفاء عناصر التحكم عند عدم تحديد الكتلة ميزة جيدة ، تمت إضافتها بالفعل في كتل ACF وستتم إضافتها في Lazy Blocks قريبًا." ها أنت ذا - كل ذلك في الوقت المناسب.

الخلاصة: معقدة ، متطورة ، أو سهلة.

يحتوي ACF 5.8 على ميزة بناء كتل قوية جدًا ، وسيكون كل شخص يستخدم المكون الإضافي لبناء مواقع سعيدًا جدًا ليكون قادرًا على إنشاء كتل ديناميكية لعملائه. إنه مدروس جيدًا ، وسيبدأ مطورو جميع مجموعات المهارات في العمل بسرعة.

شخص ما ليس على دراية جيدة بلغة PHP سيحصل على نصيبه العادل من التجربة والخطأ لتحقيق كل ذلك. سيصبح الأمر أكثر تعقيدًا عندما تصبح متطلبات الكتل أكثر تعقيدًا وتتجاوز حالة استخدام هذا الاختبار. هذه ليست أداة للمبتدئين في WordPress أو منفذي مواقع DIY الذين لا يكتبون الكثير من التعليمات البرمجية بأنفسهم.

في الوقت الحالي ، يأتي إصدار ACF 5.8 Pro فقط مع ميزة إنشاء الكتل. يفكر Condon في جعله مكونًا إضافيًا قائمًا بذاته. (شاهد ما يفكر به Twitteratti حول الفكرة ...)

بلوك لاب في مراحله الأولى من التطوير. ينجح في استخلاص معظم بنية الكتلة ويقلل من مقدار التعليمات البرمجية التي يجب كتابتها. التوثيق مفيد جدا يتم تخزين القالب في ملف منفصل ، ويحتاج إلى الاحتفاظ به مع باقي ملفات النسق. إذا كنا في شركتي سنستخدمه في أي من مشاريعنا ، فسنخزن ملف القالب مع أحد المكونات الإضافية المساعدة لدينا ، حتى يتمكن عملاؤنا من تبديل السمات دون فقد المحتوى وعرض الكتل التي تم إنشاؤها باستخدام Block Lab.

يتميز الإصدار الاحترافي بميزات إضافية ، مثل حقول التكرار ، واستيراد / تصدير الكتل ، وحقول كائن المستخدم ، وحقل الخريطة والعديد من ميزات الكتلة الأخرى.

XWP هي وكالة تعمل مع عملاء المؤسسات على استضافة WordPress.com VIP وغيرها من الشركات. يساهم أعضاء فريقهم في أفكار كبيرة أخرى في مساحة WordPress ، بما في ذلك Customizer و AMP و Tide. أتوقع أن يظل المكون الإضافي موجودًا وينمو مع Gutenberg Phase 2 إلى نظام قوي لمنفذي المواقع والوكالات ومطوري السمات.

يُعد Lazy Blocks متعة الإعداد وكما ذكرنا ، فأنا من محبي بناء جملة Handelbars القوالب. من السهل التعلم حتى للمبتدئين ، ومع قليل من الممارسة ، يمكن لمالك الموقع إنشاء كتل Gutenberg محددة لموقعهم. على الرغم من أن معالجة الكتلة في المحرر تعمل ، إلا أنها صعبة بعض الشيء ، حيث لا يتم تبديل الشاشة بين حالة تحديد الكتلة وحالة عدم التحديد في الوقت الحالي.

إذا كان هناك حاجة لوجود حقول إضافية لصفحة أو قسم من منشور ، فإن Lazy Blocks هي أداة رائعة للنمذجة الأولية والانتقال سريعًا من الفكرة إلى إثبات المفهوم.

التحذير الوحيد: لم أتمكن من معرفة الأشخاص الذين يقفون وراء nkdev.info واسم نيكيتا. يكشف الموقع فقط عن أنها شركة حديثة العهد ولكن ليس أكثر من ذلك. إذا كنت تستخدم المكون الإضافي ، فتأكد من أن لديك الخطة ب في مكانها فقط في حالة تخلي المطورين عن المكون الإضافي قبل انطلاقه.

ACF 5.8 معقد للغاية ؛ يعتبر Block Lab مرنًا للغاية وشبه معقد فقط ؛ و Lazy Blocks هو الاسم المناسب والأسهل في الاستخدام. لا يتيح لك أي منها الابتعاد دون كتابة تعليمات برمجية ، لأن كل كتلة تحتاج إلى بعض إخراج العرض بتنسيق HTML.

اسمحوا لي أن أعرف ما هو رأيك حول هذه المكونات الثلاثة لتوليد الكتل. أيضًا ، إذا وجدت مكونًا إضافيًا آخر يسمح لك ببناء الكتل دون الدخول إلى جافا سكريبت ، فأنا أريد أن أعرف عنه! يرجى مشاركة أفكارك واكتشافاتك في التعليقات!