Block Editor vs Classic Editor WordPress เลือกแบบไหนดี

Block Editor (Gutenberg) คืออะไร?

Block Editor หรือที่รู้จักกันในชื่อ Gutenberg เป็น Text Editor แบบใหม่ที่ WordPress เปิดตัวตั้งแต่ WordPress 5.0 (ปีค.ศ. 2018) เป็นการ Redesign หน้า Text Editor ของโพสต์และหน้า (Post/Page Editor) ให้ใช้งานง่ายขึ้น โดยเปลี่ยนจากการเขียนโค้ด HTML หรือใช้เครื่องมือในการสร้าง Content อย่างดั้งเดิมไปเป็นการลากและวางบล็อก (Drag and Drop Block) ที่มีลักษณะเป็นโมดูล

ใน Block Editor เนื้อหาถูกแบ่งออกเป็นบล็อก (Blocks) ที่แยกออกจากกัน แต่ละบล็อกมีหน้าที่ต่างกัน เช่น บล็อกข้อความ (Paragraph Block), บล็อกหัวข้อ (Heading Block), บล็อกรูปภาพ (Image Block), บล็อกปุ่ม (Button Block) และอื่น ๆ คุณสามารถเลือกบล็อก บวกเพิ่ม และปรับแต่งแต่ละบล็อกได้อย่างเป็นอิสระ โดยไม่ต้องจดจำคำสั่ง HTML

Classic Editor คืออะไร?

Classic Editor คือ Editor แบบดั้งเดิมที่ WordPress ใช้มาตั้งแต่ยุคแรกของ WordPress ถึงตัวม 4.9 ก่อนที่ Block Editor จะเกิดขึ้น ในการทำงานของ Classic Editor นั้น จะใช้วิธีการที่คล้ายกับการใช้ Microsoft Word — มีปุ่มเครื่องมือต่างๆ ที่ด้านบนของ Editor เช่น ปุ่มทำให้ตัวอักษรเป็นตัวหนา (Bold), ตัวเอียง (Italic), เพิ่มลิงก์ (Insert Link), เพิ่มรูปภาพ (Insert Image) เป็นต้น

Classic Editor แสดงเนื้อหาเป็นข้อความทั่วไป แล้วให้คุณใช้ Tab เพื่อสลับระหว่างมุมมอง "Visual" (แสดงผลมองเห็น) และมุมมอง "Text" (แสดงโค้ด HTML) ดังนั้น หากต้องการแก้ไขโค้ด HTML ก็สามารถไปที่ Tab "Text" ได้ง่าย ๆ

ความแตกต่างระหว่าง Block Editor กับ Classic Editor

การสร้างและแก้ไขเนื้อหา

• Block Editor — ลากและวางบล็อก หา Block ที่คุณต้องการเพิ่มเข้าไป แล้วแก้ไขเนื้อหาในบล็อกนั้น เหมาะสำหรับผู้ใช้ที่ไม่ชำนาญ HTML
• Classic Editor — ใช้ปุ่มเครื่องมือสำหรับการจัดรูปแบบ หรือไปที่ Tab "Text" เพื่อแก้ไขโค้ด HTML โดยตรง เหมาะสำหรับผู้ใช้ที่ชำนาญการเขียนโค้ด HTML

ความเป็นไปได้และความยืดหยุ่น

• Block Editor — มีความเป็นไปได้ที่สูงกว่าในการสร้างเค้าโครงและการออกแบบเนื้อหาซ้ำซ้อนจำนวนมาก Plugin ใหม่ ๆ และธีม Modern มักสร้าง Custom Blocks ให้ใช้ใน Block Editor เพื่อเพิ่มหลากหลายประเภทของข้อมูล
• Classic Editor — มีความยืดหยุ่นน้อยกว่า เพราะโครงสร้างเนื้อหาเป็นแบบตัวหนา (Linear) ไม่สามารถสร้างเค้าโครงที่ซับซ้อนได้ง่าย ๆ เหมือน Block Editor

ความสามารถในการใช้ Plugin

• Block Editor — Plugins ใหม่ส่วนใหญ่เขียนให้ทำงานกับ Block Editor เพื่อให้สามารถสร้างบล็อกเพิ่มเติม Custom Blocks จึงเป็นอนาคตของการขยาย WordPress
• Classic Editor — Plugin เก่าส่วนใหญ่ยังคงรองรับ Classic Editor ได้ แต่ Plugin ใหม่อาจไม่รองรับ Classic Editor อีก

ความปลอดภัย

• Block Editor — ตรวจสอบอนุญาต (Sanitization) แต่ละบล็อกอย่างเข้มงวด ลดความเสี่ยงจากการ Injection โค้ดอันตราย
• Classic Editor — อนุญาตให้แก้ไข HTML โดยตรง ถ้าผู้ใช้ไม่ระมัดระวัง อาจนำโค้ด Malicious เข้ามา

เมื่อไหร่ที่ควรใช้ Block Editor?

Block Editor เหมาะสำหรับ:

• ผู้ใช้มือใหม่ — ไม่จำเป็นต้องรู้จัก HTML เพื่อสร้างเนื้อหา
• ร้านค้า WooCommerce หรือเว็บไซต์ที่มีผลิตภัณฑ์ — Block Editor มี Built-in Blocks สำหรับแสดงสินค้า (Product Blocks)
• เว็บไซต์ที่ต้องการดีไซน์ที่สวยงาม — Block Editor มี Built-in Blocks สำหรับเค้าโครง การออกแบบ และความสงาม
• ผู้ใช้ที่อยากทำงานเร็ว — ลากและวาง Block นั้นเร็วกว่าการเขียน HTML

เมื่อไหร่ที่ควรใช้ Classic Editor?

Classic Editor เหมาะสำหรับ:

• ผู้ใช้ที่ชำนาญ HTML/CSS — มีความเป็นไปได้ที่มากขึ้นในการปรับแต่งเนื้อหาด้วยโค้ด
• เว็บไซต์เก่าที่ติดตั้ง Classic Editor Plugin อยู่แล้ว — ไม่จำเป็นต้องเปลี่ยนไปใช้ Block Editor ในทันที
• ผู้ใช้ที่ไม่ชอบ Block Editor — บางคนอาจรู้สึกว่า Block Editor ใช้งานยุ่งยาก
• ธีมเก่ากำหนด Classic Editor — ธีมบางตัว (ธีมเก่า) อาจยังไม่ได้เตรียม Full Site Editing (FSE) ให้กับ Block Editor

วิธีเปลี่ยนจาก Block Editor เป็น Classic Editor

ถ้าคุณอยากกลับไปใช้ Classic Editor ได้ง่ายมาก WordPress มี Plugin อย่างเป็นทางการชื่อ "Classic Editor" ที่ให้คุณปิด Block Editor ได้:

1. ไปที่ WordPress Admin Dashboard
2. ไปที่ Plugins > Add New
3. ค้นหา "Classic Editor" (จากผู้พัฒนา WordPress)
4. คลิกปุ่ม "Install Now" แล้ว "Activate"
5. หลังติดตั้ง ไปที่ Settings > Writing
6. ไปที่ส่วน "Editor" แล้วเลือก "Classic Editor" แทน "Gutenberg (Block Editor)"
7. บันทึกการเปลี่ยนแปลง

การใช้ Plugin Classic Editor นี้ยังคงรองรับได้ แม้ว่า WordPress เน้นให้ใช้ Block Editor ในอนาคต Plugin นี้ยังคงได้รับการอัพเดตจาก WordPress Developer ทีม

ตรวจสอบว่า Editor ทำงานถูกต้อง

หลังเปลี่ยนไปใช้ Editor (Block Editor หรือ Classic Editor) ให้ทดสอบดังต่อไปนี้:

# 1. ไปที่ WordPress Admin Dashboard
#    Goto: Posts > Add New หรือ Pages > Add New

# 2. หากใช้ Block Editor:
#    ลองเพิ่ม Block หลาย ๆ แบบเช่น Paragraph, Heading, Image
#    แล้วตรวจสอบว่าแต่ละ Block มีปุ่ม Edit ถูกต้องหรือไม่

# 3. หากใช้ Classic Editor:
#    ลองใส่ข้อความ บรรทัด ลิงก์ รูปภาพ แล้วดูว่า Preview ถูกต้องหรือไม่
#    สลับระหว่าง Visual และ Text mode

# 4. ทำการ Publish โพสต์แล้วดูหน้าแรกของเว็บไซต์
#    ตรวจว่าโพสต์แสดงผลถูกต้องหรือไม่

แก้ปัญหาที่พบบ่อย

Error: "Block Editor ไม่โหลด" หรือ "Editor ว่างเปล่า"

หลังเข้าไปแก้ไขโพสต์ Block Editor ไม่แสดง หรือแสดงแต่ว่างเปล่า

วิธีแก้: นี่มักเกิดจากปัญหา JavaScript หรือ Plugin ที่ขัดแย้ง ลองปิด Plugin ทั้งหมดชั่วคราว (ยกเว้น Akismet) แล้วลองเข้า Editor อีกครั้ง ถ้า Editor โหลดได้ แสดงว่ามี Plugin บางตัวที่ขัดแย้ง เปิด Plugin ที ละตัวจนกว่าหาตัวที่ขัดแย้ง

Error: "เมื่อเปลี่ยนจาก Block Editor เป็น Classic Editor เนื้อหาหายไป"

หลังติดตั้ง Classic Editor Plugin และเปลี่ยนไปใช้ Classic Editor โพสต์เก่าที่เขียนด้วย Block Editor กลายเป็นรหัส Block JSON แทนที่จะเป็นเนื้อหาข้อความปกติ

วิธีแก้: นี่เป็นปัญหาทั่วไป Classic Editor ไม่สามารถแสดง Block Editor Content ได้ดี ก่อนเปลี่ยน ให้ Migrate เนื้อหา Classic Editor โดยใช้ Plugin "Classic Widgets" สำหรับแต่ละ Block หรือกลับไปใช้ Block Editor แทน

Error: "Plugin Custom Blocks ไม่แสดงใน Block Editor"

ติดตั้ง Plugin ใหม่ที่ควรสร้าง Custom Block แต่ Block นั้นไม่ปรากฏใน Block Editor

วิธีแก้: Plugin บางตัวต้องการ Register Block แยกต่างหากใน WordPress ให้ติดต่อผู้พัฒนา Plugin หรือลองดูหน้า Documentation ของ Plugin เพื่อหาวิธีเปิดใช้งาน Custom Block

Error: "Classic Editor ตัวเลือกหายไปจาก Settings"

ไม่มี "Classic Editor" ให้เลือกใน Settings > Writing

วิธีแก้: ตรวจสอบว่า Classic Editor Plugin ติดตั้งและเปิดใช้งานแล้วหรือยัง หากไม่มี ให้ติดตั้ง "Classic Editor" Plugin อย่างเป็นทางการจาก WordPress.org

Error: "ส่วนหนึ่งของเนื้อหาหายไปเมื่อแสดงในหน้าแรก"

บทความเก่าที่เขียนด้วย Block Editor แสดงได้ครบใน Editor แต่เมื่อไปดูหน้าหลัก เนื้อหาบางส่วนหายไป

วิธีแก้: นี่อาจเกิดจากปัญหา CSS หรือ Theme ที่ไม่รองรับ Custom Block ลองปรับแต่งธีม CSS หรือลองใช้ธีมอื่นที่มี Full Support สำหรับ Block Editor

คำถามที่พบบ่อย

Q: ต้องอัพเกรด WordPress ให้ถึงเวอร์ชันใดจึงจะได้ Block Editor?

A: Block Editor (Gutenberg) ติดตั้งมาให้ตั้งแต่ WordPress 5.0 (ปีค.ศ. 2018) หากเวอร์ชัน WordPress ของคุณตั้งแต่ 5.0 ขึ้นไป จะมี Block Editor อยู่แล้ว หากอยากใช้ Feature ล่าสุด ลองอัพเกรด WordPress เป็นเวอร์ชัน 6.0 หรือสูงกว่า

Q: เว็บไซต์เก่าที่ใช้ Classic Editor มีวิธีอัพเกรดไปใช้ Block Editor โดยปลอดภัยหรือไม่?

A: ได้ แต่ต้องระมัดระวัง แนะนำให้ Backup เว็บไซต์ก่อน แล้วทำการ Migrate ทีละน้อย โดยแก้ไขโพสต์เก่า ๆ ใหม่เป็นบล็อก หรือใช้ Plugin "Classic to Block" เพื่อ Migrate โดยอัตโนมัติ

Q: ควรเลือก Block Editor หรือ Classic Editor สำหรับเว็บไซต์ใหม่?

A: แนะนำให้เลือก Block Editor เพราะเป็นอนาคตของ WordPress Plugin ใหม่จึงมักรองรับ Block Editor มากกว่า ยิ่งหากเป็นเว็บไซต์เก่า และผู้ใช้ชอบ Classic Editor คุณสามารถติดตั้ง Classic Editor Plugin ได้ตลอดเวลา