บล็อกการสร้างโดยไม่ต้องใช้ JavaScript: ทดสอบ ACF, Block Lab และ Lazy Blocks

ไม่ใช่ทุกคนที่สามารถหรือเต็มใจที่จะสร้างบล็อกใน JavaScript และบางครั้งคุณต้องติดตั้งคอลเลกชันบล็อกสามหรือสี่บล็อกจนกว่าคุณจะพบบล็อกที่คุณต้องการ

มีวิธีที่สาม: ปลั๊กอินที่สร้างบล็อกสำหรับคุณจากชุดของฟิลด์ที่กำหนดเองโดยเฉพาะ พร้อมเทมเพลตสำหรับควบคุมการแสดงส่วนหน้าของบล็อก ตัวเลือกยอดนิยมสามตัวเลือกสำหรับการทำเช่นนี้ ได้แก่: Block Lab, ACF (Advanced Custom Fields) และ Lazy Blocks

กรณีการใช้งานของฉันสำหรับการทดสอบนี้เป็นงานเล็กๆ ที่ฉันตั้งใจจะทำให้สำเร็จด้วยปลั๊กอินแต่ละตัว – เพื่อสร้างบล็อกสำหรับสมาชิกในทีมของบริษัทที่มีฟิลด์ต่อไปนี้: ชื่อ, นามสกุล, headshot, ประวัติ, หมายเลขโทรศัพท์, และที่อยู่อีเมลและใช้บล็อกบนหน้าในการแสดงสองคอลัมน์กับสมาชิกในทีมสองคน

สำหรับแต่ละปลั๊กอินฉันจะสาธิต

• วิธีสร้าง Fieldgroup
• วิธีสร้างเทมเพลตสำหรับส่วนหน้าและ
• วิธีใช้บล็อกเพื่อสร้างหน้าทีม

ฉันใช้ Local by Flywheel เป็นเครื่องมือในการพัฒนาในพื้นที่ของฉัน ไซต์ทดสอบทำงานบน WordPress 5.1.1, Gutenberg 5.4 และ Business Theme จาก WordPress.com

หลังจากอ่านโพสต์นี้ คุณจะสามารถเลือกปลั๊กอินที่เหมาะกับความต้องการของคุณได้

การสร้าง Team Block ด้วย Block Lab

สมาชิกของทีม XWP ได้สร้าง Block Lab และมีให้ใช้งานในรูปแบบปลั๊กอินฟรีพร้อมเวอร์ชันเชิงพาณิชย์ ฉันใช้ Block Lab ก่อน ติดตั้งปลั๊กอินแล้วเริ่มบล็อกใหม่

นี่คือวิดีโอเกี่ยวกับวิธีการตั้งค่าฟิลด์

ขั้นตอนต่อไปคือการตั้งค่าเทมเพลตบล็อก

เมื่อฉันดูที่ตำแหน่งที่คาดไว้ เทมเพลตจะเป็นส่วนหนึ่งของไดเร็กทอรีธีมในโฟลเดอร์ย่อยที่เรียกว่า /blocks/ นั่นคือสิ่งที่นักพัฒนาซอฟต์แวร์ต้องจำไว้ เนื่องจากมีเนื้อหาบางส่วนที่ล็อคอินเมื่อเปลี่ยนธีม

ในการสร้างเทมเพลต ฉันเปิดตัวแก้ไขโค้ด สร้างไฟล์ block-team-member.php และเพิ่ม HTML + และ PHP ขั้นต่ำเพื่ออ้างอิงฟิลด์

 <h2>
<?php block_field( 'ชื่อ' );?> 
<?php block_field( 'นามสกุล' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'รูปภาพ' ); ?>"
 alt="<?php block_field( 'ชื่อ' );?> 
<?php block_field( 'นามสกุล' );?> " width="150"/>
<?php block_field( 'ประวัติย่อ' ); ?></p>

<p><em>คุณสามารถเข้าถึง <?php block_field( 'ชื่อ' );?></em> 
<br/>ทางอีเมล์ <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( 'ที่อยู่อีเมล' ); ?></a></span>
 หรือ <br/>
ทางโทรศัพท์: <span><?php block_field( 'ส่วนขยาย' ); ?></span></p> 

ในขั้นตอนที่แล้ว ฉันกำหนดค่าบล็อกนี้เสร็จแล้วด้วยคุณสมบัติบล็อก

• ฉันตั้งไอคอนเป็นบุคคล
• เลือก “องค์ประกอบเค้าโครง” เป็นหมวดหมู่และ
• เพิ่ม “สมาชิกในทีม ทีม” เป็นคีย์เวิร์ด

ทั้งหมดนี้จำเป็นสำหรับตัวแทรกบล็อกในตัวแก้ไข

เรามาดูกันว่ามันทำงานอย่างไร

ฉันได้เพิ่มเพจใหม่ชื่อว่า Meet our Block Lab Team และเพิ่มสมาชิกในทีม โดยใช้บล็อก "Team Member"

สำหรับตอนนี้ ฉันตัดสินใจที่จะกรอกข้อมูลทั้งหมดภายในขอบเขตตัวแก้ไขบล็อก ระหว่างการตั้งค่ากลุ่มฟิลด์ ฉันยังมีตัวเลือกให้แสดงตัวควบคุมฟอร์มในแท็บตัวเลือกการบล็อกในแถบด้านข้าง สำหรับตอนนี้ฉันได้พิจารณาแล้วว่าเป็นเพียงความชอบส่วนตัว เมื่อคุณคลิกนอกบล็อก แบบฟอร์มจะหายไปและบล็อกจะแสดงคล้ายกับการแสดงส่วนหน้า

ตอนนี้ฉันบล็อกเสร็จแล้ว ฉันสามารถเพิ่มสมาชิกในทีมในเพจได้ ฉันตัดสินใจแล้ว ฉันต้องการให้พวกเขาอยู่ในบล็อกคอลัมน์ที่มีสองคอลัมน์

จนถึงตอนนี้ดีมาก ฉันไม่ตื่นเต้นที่ตำแหน่งของเทมเพลตชี้ไปที่โฟลเดอร์ธีม

เมื่อฉันต้องการเปลี่ยนธีม ฉันยังคงต้องการเก็บบล็อกและเลย์เอาต์สำหรับบล็อกไว้ในไซต์ของฉัน ดังนั้นฉันต้องแน่ใจว่าได้คัดลอกโฟลเดอร์บล็อกไปยังไดเร็กทอรีของธีมใหม่แล้ว อีกวิธีหนึ่งระบุไว้ในเอกสารประกอบสำหรับ Blocklab บน Github มีตัวกรองสองตัวเพื่อเปลี่ยนตำแหน่งเริ่มต้นของเทมเพลต:

“หากต้องการใช้เทมเพลตอื่นในธีมของคุณ ให้ใช้ตัวกรอง block_lab_override_theme_template( $theme_template ) หากต้องการใช้เทมเพลตอื่นนอกธีมของคุณ (เช่น ในปลั๊กอิน) ให้ใช้ตัวกรอง block_lab_template_path( $template_path )”

การตั้งค่านี้ค่อนข้างง่าย แม้ว่าคุณจะไม่ใช่นักพัฒนา PHP แต่คุณก็สามารถใช้ฟังก์ชัน PHP block-field() ได้ และอย่าลืมอ้างอิงชื่อฟิลด์ที่ถูกต้อง

โดยพื้นฐานแล้ว Block Lab มีวิธีสร้างฟิลด์และกำหนดค่าคุณสมบัติของบล็อกในหน้าจอเดียว จากนั้นคุณต้องเพิ่มเทมเพลตบล็อกที่เกี่ยวข้องไปยังโฟลเดอร์ /blocks/ ในไดเร็กทอรีธีมของคุณ มันค่อนข้างตรงไปตรงมา

การสร้าง Team Block ด้วย ACF 5.8

ACF (Advanced Custom Fields) เวอร์ชัน 5.8 มาพร้อมกับตัวสร้างบล็อก (มีเฉพาะในเวอร์ชัน Pro) สำหรับการทดสอบของฉัน ฉันใช้ ACF 5.8 RC 1 รุ่นสุดท้ายพร้อมให้ใช้งานแล้ว Elliot Condon เป็นผู้เขียนปลั๊กอินและเวอร์ชันแรกเปิดตัวในปี 2011 ปลั๊กอินนี้ได้กลายเป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ได้รับความนิยมอย่างมหาศาลสำหรับฟรีแลนซ์และเอเจนซี่ และมีการติดตั้งมากกว่า 1 ล้านครั้ง

ความสำเร็จและความเก่งกาจทำให้การสร้างกลุ่มภาคสนามเป็นกระบวนการที่เกี่ยวข้องมากขึ้นเมื่อเทียบกับปลั๊กอินอีกสองตัว รุ่น Pro 5.8 มีเครื่องมือสร้างบล็อกรุ่นแรก

นี่คือมุมมองผู้ดูแลระบบของกลุ่มฟิลด์ "สมาชิกทีม"

ตอนนี้ฉันจะทำให้สิ่งนี้เป็นบล็อกได้อย่างไร เอกสารมีความครบถ้วนเพียงพอ หมายเหตุ: ในการทดสอบนี้ ฉันไปในลำดับที่ต่างไปจากเดิมเล็กน้อย...

ฉันเริ่มต้นด้วย Field Group และต้องกลับไปที่หน้าจอผู้ดูแลระบบนั้นหลังจากที่ลงทะเบียนบล็อกแล้ว (ดูด้านล่าง)

ฉันใช้สองไฟล์ ก่อนอื่น ฉันต้องลงทะเบียนบล็อกใน functions.php ของธีมของฉัน สำหรับโค้ดการเรนเดอร์เทมเพลต/บล็อก ฉันใช้ content-block-team-member.php เพื่อเก็บไว้ในโฟลเดอร์ของธีมที่ใช้งานอยู่

คุณจะเห็นว่าทั้งสองเข้ากันได้อย่างไรในไม่กี่วินาที งานที่เหลือทำโดยปลั๊กอินที่ส่วนหลัง

มาเขียนบล็อคโค้ดใน PHP . กัน

ตัวอย่างแรกคือการลงทะเบียนบล็อก ฉันตั้งชื่อ ชื่อ คำอธิบาย ชี้ไปที่เทมเพลตการแสดงผล ระบุหมวดหมู่ ไอคอน และคำหลักบางคำ ซึ่งผู้ผลิตเนื้อหาสามารถค้นหาบล็อกใน Block Inserter ได้ ฉันเลื่อนไปที่ส่วนท้ายของ functions.php ของธีมของฉันและเพิ่มข้อมูลโค้ดนี้:

 ฟังก์ชัน register_acf_blocks() {
   // ลงทะเบียนบล็อกสมาชิกในทีม
   acf_register_block(อาร์เรย์(
       'name' => 'acf-ทีมสมาชิก',
       'title' => __('สมาชิกทีม ACF'),
       'description' => __('บล็อกสมาชิกในทีมแบบกำหนดเองที่สร้างผ่าน ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'หมวดหมู่' => 'การจัดรูปแบบ',
       'icon' => 'ความคิดเห็นของผู้ดูแลระบบ',
       'keywords' => array( 'สมาชิกในทีม', 'ทีม' ),
   ));
}
// ตรวจสอบว่ามีฟังก์ชันอยู่หรือไม่และขอเข้าสู่การตั้งค่า
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

รหัสนี้ตรงจากเอกสารประกอบ และฉันเพิ่งเปลี่ยนค่าสองสามค่า

ในส่วนถัดไป ฉันได้สร้างเทมเพลตการแสดงผลบล็อก ชื่อไฟล์ต้องตรงกับแอตทริบิวต์ “render_template” ในข้อความด้านบน ซึ่งก็คือ “ content-block-team-member.php ”

ฉันยังทำตามเอกสารของ ACF และเปลี่ยนค่าเพียงไม่กี่ค่าและอัปเดตโค้ดที่แสดงเท่านั้น

 <?php
// สร้างแอตทริบิวต์ id สำหรับสไตล์เฉพาะ
$id = 'สมาชิกในทีม' $block['id'];

// สร้าง align class ("alignwide") จากการตั้งค่า block ("wide")
$align_class = $block['align'] ? 'จัดตำแหน่ง' . $block['align'] : '';

// โหลดค่าและกำหนดค่าเริ่มต้นสำหรับฟิลด์บล็อก
$short_bio = get_field('short_bio') ?: 'ประวัติย่ออยู่ที่นี่... ';
$first_name = get_field('first_name') ?: 'ชื่อจริง';
$last_name = get_field('last_name') ?: 'นามสกุล';
$image = get_field('รูปภาพ');
$email_address = get_field('email_address');
$extension = get_field('ส่วนขยาย');
?>

" class="team-member ">
       

   

   " alt="" alt=" " width="150"/>
       
       

       

       
       
   

เมื่อฉันเริ่มใช้งาน Fieldgroup ฉันต้องย้อนกลับไปและตรวจสอบให้แน่ใจว่ากลุ่มนั้นเชื่อมโยงกับบล็อกที่ฉันเพิ่งลงทะเบียน ใต้หน้าจอ Fieldgroup ฉันได้สร้างกฎสำหรับตำแหน่ง: ต้องอ่าน: “แสดงกลุ่มฟิลด์นี้หาก บล็อก มีค่าเท่ากับ สมาชิกทีม ACF

ตอนนี้เรามาดูกันว่ามันทำงานอย่างไรในตัวแก้ไขบล็อก เมื่อฉันเพิ่มสมาชิกสองคน

มันเป็นประสบการณ์ที่น่าสนใจ คุณสามารถใช้แบบฟอร์มในส่วนแก้ไขเพื่อป้อนข้อมูล อีกทางเลือกหนึ่งคือการป้อนข้อมูลในช่องแบบฟอร์มที่มีอยู่ในแถบด้านข้าง และคุณจะเห็นการอัปเดตบล็อกแบบเรียลไทม์ คุณสามารถสลับไปมาระหว่างสองวิธี แต่คลิกที่ปุ่ม “เปลี่ยนเป็นแก้ไข” หรือ “สลับไปที่การแสดงตัวอย่าง” ขึ้นอยู่กับวิธีการที่คุณใช้อยู่ในขณะนี้

UI ตัวแก้ไขบล็อกทำงานได้ดี คุณควรดำเนินการตั้งค่าและโค้ดที่จำเป็นอย่างละเอียดยิ่งขึ้น

การสร้าง Team Block ด้วย Lazy Blocks

ปลั๊กอินตัวที่สามในการทดสอบนี้เรียกว่า "Lazy Blocks" โดย Nikita จาก nkdev.info ซึ่งเป็นทีมเดียวกับที่เผยแพร่คอลเลกชันบล็อก GhostKit

ไม่เพียงแต่ช่วยให้ฉันจัดเก็บข้อมูลใน post_content เท่านั้น แต่ยังมีตัวเลือกให้เก็บไว้ในตาราง post_meta

นี่คือวิดีโอเกี่ยวกับการใช้อินเทอร์เฟซเพื่อสร้างฟิลด์

เนื่องจากหน้าจอผู้ดูแลระบบนี้มุ่งเน้นที่การรับข้อมูลทั้งหมดเพื่อสร้างบล็อก ทางด้านซ้าย ฉันสร้างฟิลด์และในแถบด้านข้าง ฉันกรอกข้อมูลที่จำเป็นในการลงทะเบียนบล็อกกับบรรณาธิการ

ด้านล่าง ฉันสามารถเพิ่ม HTML สำหรับส่วนหน้าและส่วนหลังได้ ไวยากรณ์นั้นง่ายกว่า Block Lab และแน่นอนว่าง่ายกว่าการสร้างเทมเพลตของ ACF

ฉันไม่จำเป็นต้องเพิ่มโค้ดใดๆ ลงใน functions.php ของธีมของฉัน และไม่จำเป็นต้องสร้างไฟล์เพิ่มเติมด้วยโค้ดเทมเพลตของฉัน

คุณสามารถเพิ่มทั้งหมดได้ที่นี่ โดยได้รับความช่วยเหลือจากการเน้นไวยากรณ์และรวมแท็ก แทนที่จะเรียกใช้ฟังก์ชัน เอกสารประกอบแสดงให้เห็นหลายวิธีในการเขียนโค้ดเทมเพลตของคุณ ฉันเป็นแฟนตัวยงของ Handlebars (การสร้างเทมเพลตเชิงความหมาย) เนื่องจากอยู่ในบริบทนี้ซึ่งใกล้เคียงกับแท็กการผสานของระบบอื่นๆ มาก

ฉันคัดลอก/วางโค้ดเดียวกันลงในแท็บ "Editor HTML" เพื่อให้เห็นส่วนหน้าแสดงอยู่ใต้ฟิลด์แบบฟอร์ม

มาใช้กัน

ดูเหมือนว่าจะใช้งานได้ รู้สึกอึดอัดเล็กน้อยที่แบบฟอร์มไม่หายไปเมื่อฉันยกเลิกการเลือกบล็อก ต้องใช้อสังหาริมทรัพย์เป็นจำนวนมากในบรรณาธิการ แม้ว่าฉันต้องการให้สมาชิกในทีมอยู่ในบล็อกแบบสองคอลัมน์ แต่ฉันไม่ประสบความสำเร็จในการลากและวางสองช่วงตึกลงในบล็อกคอลัมน์ ฉันพูดถึงสิ่งนี้ในหัวข้อการสนับสนุนของฉันและ nK ตอบว่า: “…การซ่อนการควบคุมเมื่อไม่ได้เลือกบล็อกเป็นคุณสมบัติที่ดี ซึ่งเพิ่มแล้วในบล็อก ACF และจะถูกเพิ่มใน Lazy Blocks ในไม่ช้า” ที่นี่คุณมี - ทั้งหมดในเวลาที่กำหนด

สรุป: ซับซ้อน วิวัฒนาการ หรือง่าย

ACF 5.8 มีคุณลักษณะการสร้างบล็อกที่แข็งแกร่งมาก และทุกคนที่ใช้ปลั๊กอินเพื่อสร้างไซต์จะมีความสุขมากที่สามารถสร้างบล็อกแบบไดนามิกสำหรับลูกค้าของตนได้ ผ่านการไตร่ตรองมาเป็นอย่างดี และผู้พัฒนาชุดทักษะทั้งหมดจะเริ่มต้นใช้งานได้อย่างรวดเร็ว

ใครบางคนที่ไม่ชำนาญ PHP จะได้รับส่วนแบ่งที่ยุติธรรมในการลองผิดลองถูกเพื่อทำทุกอย่างให้สำเร็จ จะซับซ้อนยิ่งขึ้นเมื่อข้อกำหนดสำหรับบล็อกมีส่วนร่วมมากขึ้นและอยู่นอกเหนือกรณีการใช้งานของการทดสอบนี้ นี่ไม่ใช่เครื่องมือสำหรับผู้เริ่มต้นใช้งาน WordPress หรือผู้ติดตั้งเว็บไซต์ DIY ที่ไม่ได้เขียนโค้ดด้วยตนเองมากนัก

สำหรับตอนนี้ เฉพาะรุ่น ACF 5.8 Pro เท่านั้นที่มาพร้อมกับคุณสมบัติตัวสร้างบล็อก Condon กำลังใคร่ครวญที่จะทำให้เป็นปลั๊กอินแบบสแตนด์อโลน (ดูว่า Twitteratti คิดอย่างไรกับแนวคิดนี้… )

Block Lab อยู่ในช่วงเริ่มต้นของการพัฒนา มันประสบความสำเร็จในการแยกสถาปัตยกรรมบล็อกส่วนใหญ่และลดจำนวนโค้ดที่ต้องเขียน เอกสารมีประโยชน์มาก เทมเพลตถูกจัดเก็บไว้ในไฟล์แยกต่างหาก และจำเป็นต้องรักษาไว้กับไฟล์ธีมที่เหลือ หากเราที่บริษัทของฉันจะใช้มันสำหรับโครงการใดๆ ของเรา เราจะจัดเก็บไฟล์เทมเพลตด้วยหนึ่งในปลั๊กอินตัวช่วยของเรา เพื่อให้ลูกค้าของเราสามารถเปลี่ยนธีมได้โดยไม่สูญเสียเนื้อหาและแสดงบล็อกที่สร้างด้วย Block Lab

รุ่น Pro มีคุณสมบัติเพิ่มเติม เช่น ฟิลด์ทวน นำเข้า/ส่งออกบล็อค ฟิลด์ออบเจ็กต์ผู้ใช้ ฟิลด์แผนที่ และคุณสมบัติบล็อกอื่น ๆ อีกมากมาย

XWP เป็นหน่วยงานที่ทำงานร่วมกับลูกค้าองค์กรบนโฮสติ้งวีไอพีของ WordPress.com และองค์กรอื่นๆ สมาชิกในทีมของพวกเขามีส่วนสนับสนุนแนวคิดที่ยิ่งใหญ่อื่นๆ ในพื้นที่ WordPress รวมถึงเครื่องมือปรับแต่ง AMP และ Tide ฉันคาดว่าปลั๊กอินจะคงอยู่ต่อไปและเติบโตไปพร้อมกับ Gutenberg Phase 2 ให้กลายเป็นระบบที่แข็งแกร่งสำหรับผู้ดำเนินการไซต์ เอเจนซี่ และผู้พัฒนาธีม

Lazy Blocks ยินดีที่ได้ตั้งค่า และดังที่ได้กล่าวมาแล้ว ฉันเป็นแฟนตัวยงของรูปแบบเทมเพลต Handelbars ง่ายต่อการเรียนรู้แม้กระทั่งสำหรับผู้เริ่มต้น และด้วยการฝึกฝนเพียงเล็กน้อย เจ้าของไซต์จะสามารถสร้างบล็อก Gutenberg เฉพาะสำหรับไซต์ของตนได้ การจัดการบล็อกในตัวแก้ไขแม้ว่าจะทำงานอยู่ แต่ก็ค่อนข้างจะเกะกะเล็กน้อย เนื่องจากการแสดงผลไม่ได้สลับไปมาระหว่างสถานะการเลือกบล็อกและสถานะยกเลิกการเลือกในขณะนี้

หากจำเป็นต้องมีฟิลด์เพิ่มเติมสำหรับหน้าหรือส่วนของโพสต์ Lazy Blocks เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างต้นแบบและเรียนรู้อย่างรวดเร็วจากแนวคิดไปสู่การพิสูจน์แนวคิด

ข้อแม้เดียว: ฉันไม่สามารถค้นหาได้ว่าใครอยู่เบื้องหลัง nkdev.info และชื่อ Nikita เว็บไซต์เปิดเผยว่าเป็นบริษัทเล็กแต่ไม่มีอะไรมาก หากคุณใช้ปลั๊กอิน ตรวจสอบให้แน่ใจว่าคุณมีแผน B ในกรณีที่นักพัฒนาละทิ้งปลั๊กอินก่อนที่จะเริ่มใช้งาน

ACF 5.8 ค่อนข้างซับซ้อน Block Lab เป็นแบบกึ่งซับซ้อนที่มีความยืดหยุ่นสูงเท่านั้น และ Lazy Blocks ได้รับการตั้งชื่ออย่างเหมาะสมและใช้งานง่ายที่สุด ไม่มีสิ่งใดที่ช่วยให้คุณหนีไปได้โดยไม่ต้องเขียนโค้ด เนื่องจากแต่ละบล็อกต้องการเอาต์พุตการแสดงผลใน HTML

แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับปลั๊กอินสร้างบล็อกทั้งสามนี้ นอกจากนี้ หากคุณพบปลั๊กอินอื่นที่ช่วยให้คุณสร้างบล็อกโดยไม่ต้องเข้าใช้ Javascript ฉันต้องการทราบ! กรุณาแบ่งปันความคิดและการค้นพบของคุณในความคิดเห็น!