Gutenberg คือ Editor ตัวใหม่ที่ WordPress เวอร์ชั่น 5 เป็นต้นไป ได้ถูกนำมาใช้แทนที่ Classic Editor ตัวเก่าที่ใช้มาอย่างยาวนาน คล้ายๆ กับ Microsoft Word โดย Block Editor ตัวใหม่นี้แตกต่างจาก Classic Editor แบบเก่าค่อนข้างมาก รูปแบบการใช้งานจะเป็นการเลือก Block ต่างๆ ซึ่งเราจะเรียกตรงนี้ว่า Widget เช่น Paragraph, Image, Heading, หรือตัวอื่นๆ และจะมีส่วนของการตั้งค่าของหน้า Post หรือ Page และตั้งค่าของ Block นั้นๆ จะอยู่ทางด้านขวาและการตั้งค่าบางส่วนจะอยู่ทางด้านบนของ Block นั้นๆ ส่วนตัวเลือก Block ต่างๆ นั้นจะอยู่ทางด้านบนสุดของหน้า Block Editor รวมถึงสามารถกดเพิ่มได้จาก Block ล่าสุด
1. Block Editor ที่มากับ WordPress มีอะไรบ้าง
- Text เป็น Block ที่เกี่ยวกับการแสดงผลข้อความทั้งหมด
- Media – เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ
- Design – เป็น Block ที่ใช้จัดการด้าน Design ของ Block
- Widgets – เป็น Block ที่ใช้เรียกการทำงานของโมดูลใน WordPress
- Embeds – เป็น Block สำหรับฝัง Link ของ Social Media
1.1 Text
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 สำหรับใส่เนื้อหาประเภทที่ต้องมีการเคาะวรรค เช่นกลอน เนื้อเพลง เป็นต้น ไม่ว่าเราจะเคาะวรรคตรงไหนก็ตาม เนื้อหาก็จะแสดงออกมาตามที่เราต้องการ
1.2 Media
Media เป็น Block ที่ใช้งานกับ Media ทั้งหมด เช่น ภาพ เสียง วิดีโอ
- Image สำหรับใส่รูปภาพ
- Gallery สำหรับใส่รูปภาพมากกว่า 1 ภาพ โดยจะแสดงในรูปแบบแกลลอรี่
- Audio สำหรับใส่ไฟล์เสียงเช่น mp3, wma, flac
- Cover ใส่รูปภาพหรือวิดีโอ โดยจะแตกต่างจาก Block Image ตรงนี้สามารถใส่ข้อความลงไปบนภาพได้ด้วย
- File สำหรับอัปโหลดไฟล์เพื่อให้ผู้ใช้ดาวน์โหลดไฟล์นั้นๆ โดยจะมีปุ่ม Download ให้
- Media & Text สำหรับแทรกไฟล์สื่อภาพหรือวิดีโอโดยจะมีช่องให้ใส่ข้อความด้านข้าง
- Video สำหรับใส่วิดีโอ ได้ทั้งแบบอัปโหลดลงเว็บหรือเป็น Link
1.3 Design
Design เป็น Block ที่ใช้จัดการด้าน Design ของ Block เช่น Columns ใช้แบ่งส่วนของ Block ออกเป็นหลายๆ Columns
- Buttons ใช้สำหรับใส่ปุ่ม โดยสามารถพิมพ์ชื่อปุ่มและใส่ URL Link ได้
- Columns สำหรับแบ่ง Block ออกเป็นหลายคอลัมน์ โดยแบ่งได้มากสุด 3 คอลัมน์
- Group ใช้สำหรับตั้ง Group เพื่อรวม Block หลายๆ Block เข้าเป็น Group เดียวกัน
- More สำหรับใส่ข้อความ Read More ที่บทความ สามารถแก้ไขคำว่า Read More เป็นคำอื่นๆได้
- Page Break ใช้สำหรับแบ่งบทความออกเป็นหลายๆหน้า
- Separator สำหรับใส่เส้นคั่นแนวนอน หรือก็คือคำสั่ง HR ในภาษา HTML นั่นเอง
- Spacer สำหรับใช้เพิ่มช่องว่างระหว่าง Block ในบทความ
1.4 Widgets
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 ได้
1.5 Embeds
Embeds เป็น Block สำหรับฝัง Link ของ Social Media ต่างๆ เช่น Youtube, Twitter, Vimeo, Amazon Kindle ส่วนการแสดงผล นั้นก็แล้วแต่เนื้อหาของ Social นั้นๆ เช่น Youtube ก็จะเป็น Content ด้าน Video
2. วิธีการเพิ่ม Block ต่างๆ
เมื่อเราคลิก All New เพื่อสร้างหน้า Page หรือ Post ใหม่นั้น ตัว WordPress Block Editor จะสร้าง Block Paragraph จำนวน 1 Block ให้โดยอัตโนมัติ การจะเพิ่ม Block ใหม่นั้นถ้าเป็นการเพิ่ม Block แรกถัดจาก Block Paragraph แรกที่ระบบสร้างให้นั้น ให้คลิกที่ไอคอนรูป + สีน้ำเงินที่บริเวณมุมซ้ายบน หรือ คลิกที่ไอคอนรูป + สีดำตรง Paragraph
เมื่อคลิกปุ่ม Add Block แล้ว หน้าจอก็จะขึ้น Popup แสดง Block ทั้งหมดที่สามารถเลือกใช้งานได้ตามเหตุการณ์ต่างๆ โดยการกดที่ชื่อ Block นั้นๆ หรือจะพิมพ์ชื่อเพื่อค้นหาจากช่อง Search ก็ได้
เมื่อกดเพิ่ม Block ที่ต้องการแล้ว Block แต่ละตัวจะสามารถตั้งค่า หรือ ปรับแต่งได้ เช่น Block หัวข้อ เมื่อคลิกที่หัวข้อ
- ด้านบนของหัวข้อนั้นสามารถจัดการได้เช่น ปรับเป็น H1-H6, จัด ซ้าย ขวา กลาง, ทำตัวหนา ตัวเอียง, เพิ่มลิงค์ ต่างๆ ได้
- ส่วนจุดสามจุดก็จะมีการใช้งานดังนี้
- ซ่อนการตั้งค่า หมายถึง ซ่อนตัวปรับแต่งที่อยู่ฝั่งขวาสุด
- คัดลอก (Copy) เพื่อไปวางที่อื่นๆ ได้
- ทำสำเนา (Duplicate ) หรือการโคลนเป็นอีกตัวได้
- แทรกก่อนหน้า (Insert Before) หมายถึงเพิ่ม Block ใหม่ ข้างบนตัวมันเอง
- แทรกต่อท้าย (Insert After) หมายถึงเพิ่ม Block ใหม่ ข้างล่างตัวมันเอง
- แก้ไขแบบ HTML คือการเขียนในรูปแบบ HTML
- Lock อันนี้กรณีไม่ต้องการย้าย หรือ ลบตัวนี้ เราก็สามารถ Lock ได้
- เพิ่มไปยังบล็อกใช้ซ้ำได้ หรือ หมายถึงเป็นการบันทึกเพื่อเป็น Template
- รวมกลุ่ม หมายถึง การรวบรวม Block ต่างๆ ให้อยู่ในกลุ่มเดี่ยวกัน
- Remove หัวข้อ คือ การลบ Block ตัวนั้นๆ ออกนั้นเอง
แท็บเมนูด้านขวาของ Block ตรงนี้จะเป็นส่วนที่ใช้ตั้งค่าหลักๆของ Block นั้นๆ เช่นถ้า Block ประเภท Text ก็จะปรับขนาด Font รวมถึงใส่สีให้ข้อความ พื้นหลังของ Block ได้
3. อธิบายเรื่อง เพิ่มไปยังบล็อกใช้ซ้ำได้ (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 ได้จากหน้านี้
4. อธิบายแถบไอคอนด้านบนของหน้า Block
- ปุ่ม Add Block หรือ Widget
- ไว้สำหรับสลับโหมดของแท็บเมนูด้านบนของ Block ซึ่งจะมีสองโหมดคือ Edit คือ (แก้ไขได้), Select (แก้ไขไม่ได้) โดยปกติค่าเริ่มต้นจะเป็น Edit
- Undo เลิกทำคำสั่งล่าสุด และ Redo ทำซ้ำคำสั่งล่าสุด แต่คำสั่ง Redo ต้องมีการกด Undo ก่อนอย่างน้อย 1 ครั้ง ถึงจะกด Redo ได้ ซึ่งก็จะเป็นการย้อนคืนคำสั่ง Undo นั้นเอง
- Details แสดงรายละเอียดว่าหน้านั้นๆ มีกี่ Block
- Live View โชว์ว่าหน้านั้นๆ มี Block อะไรอยู่บ้าง จะแสดงในลักษณะเรียงกันลงมา ซึ่งถ้าใน Photoshop เราจะเรียกว่า Layer
- Desktop, Tablet, Mobile สามารถสลับดูและปรับในแต่ละโหมด หรือ เรียกว่า (Responsive)
- Save Draft ปุ่มเซฟเป็นบันทึกฉบับร่าง กรณียังไม่พร้อมจะเผยแพร่
- Preview สำหรับดูหน้าตัวอย่าง
- Publish กดเพื่อเผยแพร่ Post/Page
- Settings สำหรับแสดงหรือซ่อนเมนูตั้งค่าทางด้านขวาทั้งหมด
- Options ตั้งค่าพื้นฐานของ Blog Editor รวมถึง Plugin ที่เกี่ยวข้องกับ Block Editor ที่มีการลงเอาไว้
5. นอกจากนี้ในส่วนของ Options (จุดสามจุด) ยังสามารถตั้งค่าอื่นๆที่น่าสนใจ เช่น
- เปิด-ปิด Fullscreen mode (ค่ามาตรฐานของ Block Editor คือเปิด)
- สลับโหมด Editor จาก Visual Editor เป็น Code Editor ได้
