วิธีการใช้งาน Gutenberg WordPress Block Editor

Gutenberg คือ Editor ตัวใหม่ที่ WordPress เวอร์ชั่น 5 เป็นต้นไป ได้ถูกนำมาใช้แทนที่ Classic Editor ตัวเก่าที่ใช้มาอย่างยาวนาน โดย Block Editor ตัวใหม่นี้แตกต่างจาก Classic Editor แบบเก่าค่อนข้างมาก รูปแบบการใช้งานจะเป็นการเลือก Block ต่างๆไม่ว่าจะเป็น Paragraph, Image, Heading, หรือ Video มาลงที่พื้นที่หลักของหน้า Block Editor ในลักษณะเป็น Block เรียงกันลงมาเหมือนการต่อเลโก้ ส่วนการตั้งค่าของหน้า Post หรือ Page และตั้งค่าของ Block นั้นๆ จะอยู่ทางด้านขวาและการตั้งค่าบางส่วนจะอยู่ทางด้านบนของ Block นั้นๆ ส่วนตัวเลือก Block ต่างๆ นั้นจะอยู่ทางด้านบนสุดของหน้า Block Editor รวมถึงสามารถกดเพิ่มได้จาก Block ล่าสุด

สำหรับใครที่รู้สึกว่าไม่ถนัดกับการใช้ Block Editor แบบใหม่ ก็สามารถติดตั้งปลั๊กอิน Classic Editor มาใช้งานได้เหมือนเดิม

Block Editor ที่มากับ WordPress มีอะไรบ้าง

1. Text เป็น Block ที่เกี่ยวกับการแสดงผลข้อความทั้งหมด
2. Media – เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ
3. Design – เป็น Block ที่ใช้จัดการด้าน Design ของ Block
4. Widgets – เป็น Block ที่ใช้เรียกการทำงานของโมดูลใน WordPress
5. Embeds – เป็น Block สำหรับฝัง Link ของ Social Media

Text – เป็น Block ที่เกี่ยวกับการแสดงผลข้อความทั้งหมด

Paragraph ถ้าแปลตรงตัวก็คือย่อหน้า ก็คือ Block ที่เอาไว้ใส่เนื้อหาข้อความ โดยถ้าเรากด Enter จะเป็นการสร้าง Block Paragraph ใหม่
Heading หัวข้อเรื่อง มีให้เลือกตั้งแต่ H1 ถึง H6
List สร้างรายการ มีให้เลือกทั้งแบบ Bullet และตัวเลข
Quote จะมีการสร้างกรอบขึ้นมาสำหรับใส่เนื้อหาที่ต้องการเน้นหรือให้เห็นเด่นชัดกว่าข้อความทั่วไป
Code สำหรับแทรกเนื้อหาที่เป็นภาษาโค้ดต่างๆเช่น HTML PHP ใช้กรณีต้องการทำบทความประเภทสื่อการสอน
Classic ใช้ใส่ Editor แบบเก่าลงไปในบทความ
Preformatted ใช้ใส่เนื้อหาข้อความเหมือนกับ Block Paragraph แต่จะแตกต่างกันตรงที่ Block Preformatted จะสามารถกด Enter เพื่อขึ้นบรรทัดใหม่ได้ แต่ Block Paragraph ถ้ากด Enter จะเป็นการสร้าง Block Paragraph ใหม่
Pullquote จะคล้ายกับ Quote แต่ข้อความในกรอบจะมีขนาดใหญ่กว่าและสามารถใส่สีข้อความและสีของเส้นกรอบบนล่างได้
Table ใช้สร้างตาราง
Verse สำหรับใส่เนื้อหาประเภทที่ต้องมีการเคาะวรรค เช่นกลอน เนื้อเพลง เป็นต้น ไม่ว่าเราจะเคาะวรรคตรงไหนก็ตาม เนื้อหาก็จะแสดงออกมาตามที่เราต้องการ

Media – เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ

Image สำหรับใส่รูปภาพลงใน Post
Gallery สำหรับใส่รูปภาพมากกว่า 1 ภาพ ลงใน Post โดยจะแสดงในแบบแกลลอรี่
Audio สำหรับใส่ไฟล์เสียงเช่น mp3, wma, flac
Cover ใส่รูปภาพหรือวิดีโอ โดยจะแตกต่างจาก Block Image ตรงนี้สามารถใส่ข้อความลงไปบนภาพได้ด้วย
File สำหรับอัปโหลดไฟล์เพื่อให้ผู้ใช้ดาวน์โหลดไฟล์นั้นๆ โดยจะมีปุ่ม Download ให้
Media & Text สำหรับแทรกไฟล์สื่อภาพหรือวิดีโอโดยจะมีช่องให้ใส่ข้อความด้านข้าง
Video สำหรับใส่วิดีโอ ได้ทั้งแบบอัปโหลดลงเว็บหรือเป็น Link

Design – เป็น Block ที่ใช้จัดการด้าน Design ของ Block เช่น Columns ใช้แบ่งส่วนของ Block ออกเป็นหลายๆ Columns

Buttons ใช้สำหรับใส่ปุ่ม โดยสามารถพิมพ์ชื่อปุ่มและใส่ URL Link ได้
Columns สำหรับแบ่ง Block ออกเป็นหลายคอลัมน์ โดยแบ่งได้มากสุด 3 คอลัมน์
Group ใช้สำหรับตั้ง Group เพื่อรวม Block หลาย Block เข้าเป็น Group เดียวกัน
More สำหรับใส่ข้อความ Read More ที่บทความ สามารถแก้ไขคำว่า Read More เป็นคำอื่นๆได้
*โดยข้อความ Read More จะไม่แสดงในหน้า Single Post แต่จะแสดงในหน้า Blog Homepage ของ WordPress
Page Break ใช้สำหรับแบ่งบทความออกเป็นหลายๆหน้า
Separator สำหรับใส่เส้นคั่นแนวนอน หรือก็คือคำสั่ง HR ในภาษา HTML นั่นเอง
Spacer สำหรับใช้เพิ่มช่องว่างระหว่าง Block ในบทความ

Widgets – เป็น Block ที่ใช้เรียกการทำงานของโมดูลใน WordPress เช่น Custom HTML สำหรับทำให้ Block ใช้ภาษา HTML ได้

Shortcode สำหรับใส่ Shortcode ในบทความ (การลง Plugin ที่สามารถใช้ Shortcode ก็จะได้ Shortcode ของ Plugin นั้นมาด้วย เช่น Contact From 7 เป็นต้น)
Archives สำหรับใส่คลังบทความ โดยจะโชว์ List เป็นเดือนและปีที่ลงบทความไว้
Calendar ใช้ใส่ปฏิทินลงในบทความ
Categories สำหรับแสดงหมวดหมู่ของบทความทั้งหมดของเว็บ
Custom HTML ใช้เขียน Code HTML ลงในบทความ โดย Code HTML ที่เขียนลงไปก็จะแปลจากภาษา HTML เช่น 123 เมื่อแสดงผลออกมาที่หน้าเว็บก็จะเป็นคำว่า 123 ตัวหนา
Latest Comments สำหรับแสดงความคิดเห็นล่าสุด (ถ้ามีการเปิดให้แสดงความเห็นได้)
Latest Posts สำหรับใช้แสดงบทความล่าสุดที่ลง โดยจะแสดงเป็นหัวข้อและสามารถเลือกได้ว่าจะแสดงจำนวนที่บทความ
RSS สำหรับดึง RSS Feed จากเว็บอื่นมาแสดง
Social Icons สำหรับใส่ Social Icons
Tag Cloud สำหรับใช้แสดง Tag ทั้งหมดที่มีของเว็บ
Search สำหรับใส่ช่องและปุ่มค้นหา โดยสามารถแก้ไข Placeholder ได้

Embeds – เป็น Block สำหรับฝัง Link ของ Social Media ต่างๆ เช่น Youtube, Twitter, Vimeo, Amazon Kindle ส่วนการแสดงผล นั้นก็แล้วแต่เนื้อหาของ Social นั้นๆ เช่น Youtube ก็จะเป็น Content ด้าน Video

การ Add Block

เมื่อเราคลิก All New เพื่อสร้างหน้า Page หรือ Post ใหม่นั้น ตัว WordPress Block Editor จะสร้าง Block Paragraph จำนวน 1 Block ให้โดยอัตโนมัติ การจะเพิ่ม Block ใหม่นั้นถ้าเป็นการเพิ่ม Block แรกถัดจาก Block Paragraph แรกที่ระบบสร้างให้นั้น ให้คลิกที่ไอคอนรูป + สีน้ำเงินที่บริเวณมุมซ้ายบน

ต่อมาเมื่อจะเพิ่ม Block อีก สามารถเพิ่มได้จากสองจุดคือ ไอคอนรูป + สีน้ำเงินที่บริเวณมุมซ้ายบนและไอคอนรูป + สีดำที่ใต้ Block ล่าสุด

เมื่อคลิกปุ่ม Add Block แล้ว หน้าจอก็จะขึ้น Popup แสดง Block ทั้งหมดที่มีสามารถกดที่ชื่อ Block นั้นๆ หรือจะพิมพ์ชื่อค้นหาจากช่อง Search ก็ได้

การ Delete Block

ให้เลือกที่ Block ที่ต้องการลบ แล้วคลิกที่บริเวณ จุดสามจุด แล้วเลือก Remove Block

การตั้งค่า Block

แต่ละ Block นั้นจะมีการตั้งค่าที่ไม่เหมือนกัน ปรับเปลี่ยนไปตามประเภทของ Block

แท็บเมนูด้านบนของ Block จะใช้ตั้งค่าเลื่อนตำแหน่ง Block ขึ้นลง ถ้าเป็น Block ประเภท Text ก็จะสามารถใส่ตัวหนา เอียง ลิงก์ จัดตำแหน่ง Align Text

แท็บเมนูด้านขวาของ Block ตรงนี้จะเป็นส่วนที่ใช้ตั้งค่าหลักๆของ Block นั้นๆ เช่นถ้า Block ประเภท Text ก็จะปรับขนาด Font รวมถึงใส่สีให้ข้อความ พื้นหลังของ Block ได้

Reusable Blocks – คือการบันทึก Block ที่เราใช้บ่อยๆ เป็น Template เอาไว้ เพื่อความสะดวกในการเลือกใช้ซ้ำ จะไม่ได้ต้องตั้งค่าซ้ำๆอีก วิธีการทำได้โดยการคลิกที่ จุดสามจุดของ Block ที่ต้องการและเลือกที่ Add to Reusable Blocks และเราสามารถตั้งชื่อ Reusable block ได้จากที่แท็บเมนูด้านขวาของ Block จากนั้นคลิกที่ปุ่ม Publish แล้วติ๊กถูกเฉพาะ Reusable block ที่ตั้งชื่อไว้

การเรียกใช้งาน Reusable Blocks ทำได้โดยคลิกที่ Add Block แล้วเลือกที่แท็บ Reusable ก็จะแสดง Reusable Blocks ที่เราบันทึกไว้

นอกจากนี้ยังสามารถดู Reusable Blocks ทั้งหมดที่เคยสร้างไว้ได้โดยคลิกที่ Manage all reusable blocks โดยเราสามารถแก้ไข ลบ Reusable Blocks ได้จากหน้านี้

แนะนำ Block ที่ใช้บ่อยๆ

โดยทั่วไปแล้วมีประมาณ 5 Block ที่เป็นพื้นฐานที่ไม่ว่าจะลงเนื้อหาแบบใดก็ล้วนต้องใช้ทั้งสิ้น

1. Paragraph เป็น Block สำหรับใส่เนื้อหาข้อความทั่วไป สามารถกำหนดตัวหนา เอียง ใส่ลิงค์ ใส่สีข้อความ พื้นหลัง และจัดตำแหน่ง ซ้าย กลาง ขวาได้

2. Heading เป็น Block สำหรับใส่หัวข้อ มีตั้งแต่ H1-H6 (ภาษา HTML) การตั้งค่างๆก็คล้ายกับ Paragraph Block แต่จะมีสิ่งที่เพิ่มเติมเข้ามาก็คือใส่ HTML anchor เพื่อเชื่อมโยงหัวข้อไปยังส่วนต่างๆของหน้าบทความได้

3. List เป็น Block สำหรับสร้างรายการโดยใส่ได้ทั้งแบบ Bullet และตัวเลข List Block นี้โดยปกติจะไม่มีการตั้งค่าใดๆเพิ่มเติม แต่ก็สามารถกำหนดตัวหนา เอียง ใส่ลิงค์ ใส่สีข้อความ พื้นหลัง ได้เหมือน Paragraph Block

4. Image ใช้แสดงรูปภาพ โดยเลือกได้ทั้งการอัปโหลดจากคอม เลือกจากคลังภาพในเว็บ หรือใส่ Link ภาพ สามารถำหนดขนาด Width Height ของภาพที่จะแสดงได้

5. Spacer สำหรับใช้เพิ่มช่องว่างระหว่าง Block สามารถกำหนดขนาด Height ของ Spacer ได้โดยมีค่าเป็น Pixels

แนะนำแถบไอคอนด้านบนของหน้า Add New

ด้านซ้ายบน

1. ปุ่ม Add Block
2. ไว้สลับโหมดของแท็บเมนูด้านบนของ Block มีสองโหมดคือ Edit คือแก้ไขได้, Select คือแก้ไขไม่ได้ โดยปกติค่าเริ่มต้นจะเป็น Edit
3. Undo เลิกทำคำสั่งล่าสุด และ Redo ทำซ้ำคำสั่งล่าสุด แต่คำสั่ง Redo ต้องมีการกด Undo ก่อนอย่างน้อย 1 ครั้ง ถึงจะกด Redo ได้ ซึ่งก็จะเป็นการย้อนคืนคำสั่ง Undo นั้นเอง
4. Details แสดงรายละเอียดว่าหน้านั้นๆมีกี่ Block
5. Live View โชว์ว่าหน้านั้นๆมี Block อะไรอยู่บ้าง จะแสดงในลักษณะเรียงกันลงมา

ด้านขวาบน

1. Save Draft ปุ่มเซฟเป็นบันทึกร่าง กรณียังไม่พร้อมจะเผยแพร่
2. Preview สำหรับดูหน้าตัวอย่าง
3. Publish กดเพื่อเผยแพร่ Post
4. Settings สำหรับแสดงหรือซ่อนเมนูตั้งค่าทางด้านขวาทั้งหมด
5. Options ตั้งค่าพื้นฐานของ Blog Editor รวมถึง Plugin ที่เกี่ยวข้องกับ Block Editor ที่มีการลงเอาไว้

นอกจากนี้ในส่วนของ Options (จุดสามจุด) ยังสามารถตั้งค่าอื่นๆที่น่าสนใจ เช่น

• เปิด-ปิด Fullscreen mode (ค่ามาตรฐานของ Block Editor คือเปิด)
• สลับโหมด Editor จาก Visual Editor เป็น Code Editor ได้

เมนูด้านขวาของ Post หรือ Page

Status & visibility : ตั้งค่าการแสดงผล สามารถการตั้งเวลาในการเผยแพร่ได้
Permalink : เป็น URL Slug ของ Post หรือ Page จะถัดจากชื่อโดเมน เช่น youdomain.com/…
Categories : หมวดหมู่ของ Post (ถ้าเป็น Page จะไม่มีหมวดหมู่)
Tags : แท็ก ของ Post (ถ้าเป็น Page จะไม่มีหมวดหมู่)
Featured image : ภาพหน้าปกของ Post
Excerpt : คำเกริ่นนำของ Post
Discussion : เปิดหรือปิดให้แสดงความเห็นใน Post ได้

การติดตั้ง Block เพิ่มเติม

นอกจาก Block ที่มากับ Gutenberg WordPress Block Editor แล้ว เรายังสามารถลง Plugin เพิ่มเติมได้ สำหรับ Plugin ที่แนะนำให้ติดตั้งเพิ่มเติมก็จะมี

GenerateBlocks – จะมีทั้งเวอร์ชั่น Free และ Pro เป็น Plugin ที่เพิ่มความยืดหยุ่นใหักับ Gutenberg โดย GenerateBlocks ประกอบด้วย Block เพียง 4 Block ข้อดีมากๆของ GenerateBlocks ก็คือสามารถตั้งค่าการแสดงผลแยกได้ทั้งการแสดงผลบน Desktop, Tablet และ Mobile

Container – เป็นกล่องสำหรับเก็บเนื้อหาต่างๆ สามารถตั้งค่าได้มากมาย
Grid – คือ Block ที่ใช้แบ่ง Column ออกเป็นหลายๆ Column แบ่งได้มากสุด 6 Column
Headline – เป็นได้ทั้ง Heading, Paragraph
Buttons – ปุ่มกด ตั้งค่าต่างๆได้ค่อนข้างละเอียด ทั้งสีข้อความ พื้นหลังปุ่ม ใส่ icon ลงที่ข้อความและอื่นๆอีกมากมาย

Download ได้จากที่นี่

สรุป

สำหรับผู้ที่เปลี่ยนจาก Classic Editor ตัวเก่ามาใช้ Gutenberg WordPress Block Editor ช่วงแรกคงต้องใช้เวลาในการทำความเข้าใจกับระบบ Block Editor กันสักหน่อย แต่เชื่อว่าเมื่อใช้งานได้คล่องแล้วจะไม่กลับไปใช้ Classic Editor อีก เพราะ Gutenberg WordPress Block Editor ใช้งานได้ง่ายและยืดหยุ่นกว่าเยอะ รูปแบบการทำงานก็จะคล้ายกับ Plugin ประเภท Page Builder โดย Gutenberg สามารถใช้ได้ทั้ง Post และ Page แต่โดยมากแล้วนิยมใช้กับ Post ที่เป็นเนื้อหาที่มีรูปแบบตายตัวมากกว่า Page ที่มักจะใช้สร้างหน้าหลักของเว็บ เช่น หน้า Home, Service, About, Contact