คู่มือ Gutenberg Block Editor WordPress ฉบับมือใหม่ 2026

ตั้งแต่ WordPress 5.0 เปิดตัว Gutenberg ใน ปี 2018 วิธีสร้างเนื้อหาบน WordPress ก็เปลี่ยนไปอย่างสิ้นเชิง จาก Editor แบบ TinyMCE ที่คล้าย Word ธรรมดา มาเป็น Block-based Editor ที่สร้างเนื้อหาเป็น "บล็อก" ทีละชิ้น เหมือน LEGO

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

1. Gutenberg คืออะไร? ประวัติและที่มา

Gutenberg คือชื่อโปรเจกต์ของ WordPress ที่พัฒนา Block Editor ขึ้นมาแทนที่ TinyMCE (Classic Editor) โดยมีเป้าหมายหลัก 3 ข้อ:

• Simplify Content Creation — ให้ใครก็ตามสามารถสร้างเลย์เอาต์สวยงามโดยไม่ต้องรู้ HTML/CSS
• Full Site Editing (FSE) — แก้ไขทุกส่วนของเว็บ ทั้ง Header, Footer และ Sidebar จาก Editor เดียว
• Developer Freedom — เปิดให้นักพัฒนาสร้าง Custom Block เป็น Component ที่ใช้ซ้ำได้

ชื่อ "Gutenberg" ตั้งตาม Johannes Gutenberg ผู้ประดิษฐ์แท่นพิมพ์ในศตวรรษที่ 15 ซึ่งเปลี่ยนการเผยแพร่ข้อมูลของมนุษย์ไปตลอดกาล

2. Interface ภาพรวม — ทำความรู้จัก 3 ส่วนหลัก

1. Top Toolbar (แถบเครื่องมือด้านบน)

• Block Inserter (+) — เปิดรายการ Block ทั้งหมดที่มี คลิกแล้วเพิ่ม Block ลงในเนื้อหา
• Tools Menu — สลับระหว่าง Edit Mode และ Select Mode
• Undo / Redo — ย้อนกลับหรือทำซ้ำการแก้ไข
• Save / Update — บันทึก Draft หรืออัปเดต Post ที่ Published แล้ว
• Settings Icon — เปิด/ปิด Document Settings ด้านขวา

2. Content Area (พื้นที่เนื้อหากลาง)

พื้นที่สีขาวตรงกลางคือที่สร้างเนื้อหา คลิกที่ใดก็ได้เพื่อเพิ่ม Block ใหม่ หรือกดปุ่ม / (Slash) เพื่อค้นหา Block ที่ต้องการได้ทันที

3. Document Settings Panel (แผงด้านขวา)

• Post tab — ตั้งค่า Status, Visibility, Publish Date, Category, Tags, Featured Image
• Block tab — ตั้งค่า Style, Color, Typography, Spacing ของ Block ที่เลือก

3. Block พื้นฐานที่ต้องรู้

WordPress มี Block มาให้กว่า 90 ตัวตั้งแต่ต้น แต่ที่ใช้บ่อยที่สุดมี 10 ตัวนี้:

4. Block Patterns คืออะไร?

Block Patterns คือ "เทมเพลตสำเร็จรูป" ที่ประกอบด้วย Block หลายตัวจัดเรียงไว้แล้ว เช่น Hero Section พร้อม Heading + Paragraph + Button, หรือ Pricing Table ที่มีการออกแบบสวยงาม

วิธีใช้ Block Patterns

1. คลิกปุ่ม Block Inserter (+) ที่มุมซ้ายบน
2. คลิกแท็บ Patterns
3. เลือกหมวดหมู่ (About, Call to Action, Text, Headers ฯลฯ)
4. คลิก Pattern ที่ต้องการ — จะถูก Insert เข้ามาทันที
5. แก้ไขข้อความและรูปให้ตรงกับเนื้อหาของตัวเอง

5. Full Site Editing (FSE) vs Classic Theme

ใน WordPress มี Theme 2 ประเภทใหญ่ที่ต้องรู้จัก:

• Classic Theme — Theme แบบเก่าที่แก้ไขได้เฉพาะส่วน Content ด้วย Gutenberg แต่ Header/Footer/Sidebar ยังต้องแก้ผ่าน Customizer หรือ PHP
• Block Theme (FSE) — Theme ที่รองรับ Full Site Editing ทำให้แก้ไขทุกส่วนของเว็บรวมถึง Header, Footer, Archive Template, Single Post Template ได้ทั้งหมดใน Block Editor

Block Theme ที่นิยมได้แก่: Twenty Twenty-Four, Ollie, Kadence (เวอร์ชัน FSE)

เข้าถึง Full Site Editing ได้ที่ Appearance → Editor (จะปรากฏเฉพาะเมื่อใช้ Block Theme)

6. Reusable Blocks — บล็อกที่ใช้ซ้ำได้

Reusable Blocks (ปัจจุบันเรียกว่า "Synced Patterns") คือ Block หรือกลุ่ม Block ที่บันทึกไว้แล้ว นำไปใช้ในหลาย Post/Page ได้ และเมื่อแก้ไขครั้งเดียว จะอัปเดตทุกที่ที่ใช้อยู่พร้อมกัน

วิธีสร้าง Reusable Block

1. เลือก Block หรือ Group ที่ต้องการบันทึก
2. คลิก ⋮ (Three Dots) → Create pattern/reusable block
3. ตั้งชื่อ เช่น "CTA Section - ติดต่อเรา"
4. เลือก Synced ถ้าต้องการให้การแก้ไขส่งผลทุกที่ที่ใช้
5. คลิก Create

7. Keyboard Shortcuts ที่ต้องรู้

8. Plugin เสริม Gutenberg ที่แนะนำ

WordPress Core มี Block มาให้แค่พื้นฐาน ถ้าต้องการ Block ที่ซับซ้อนขึ้นหรือ Design ที่สวยงามกว่า ใช้ Plugin เหล่านี้:

Spectra (โดย Brainstorm Force)

Plugin ฟรีที่มี Block เพิ่มเติมมากกว่า 40 ตัว เช่น Advanced Heading, Icon List, Info Box, Team, Testimonial, Price List, Timeline และ Star Rating ทั้งหมดนี้ปรับแต่ง Style ได้ละเอียดมาก

GenerateBlocks

เน้นความเร็วและ Performance สูง มี Block น้อยตัวแต่ Flexible มาก (Container, Grid, Headline, Button, Image, Dynamic Data) Code ที่ Generate ออกมาสะอาดมาก ทำให้ PageSpeed สูงกว่า Plugin อื่น

Kadence Blocks

มี Block ฟรีครบทุกด้านสำหรับเว็บธุรกิจ: Advanced Gallery, Tabs, Accordion, Icon Box, Info Box, Row Layout พร้อม Header/Footer Builder ใน Kadence Theme Pro

การจัดการ Block อย่างมีประสิทธิภาพ

การใช้ Gutenberg ให้คล่องต้องเข้าใจวิธีจัดการ Block ในระดับที่ลึกกว่าแค่คลิกเพิ่มและพิมพ์ข้อความ ส่วนนี้รวมเทคนิคที่ผู้ใช้ส่วนใหญ่ค้นพบช้ากว่าที่ควร

Transform Block

คุณสามารถเปลี่ยน Block จากประเภทหนึ่งไปอีกประเภทได้โดยไม่สูญเสียเนื้อหา เช่น Paragraph → Heading, List → Quote หรือ Columns → Group เพียงคลิก Block แล้วกดปุ่ม Block Type ที่มุมซ้ายบน (ไอคอนรูปร่าง Block) แล้วเลือก "Transform to"

Moving Blocks ระหว่าง Column

ถ้ามี Block อยู่ใน Column ซ้าย และต้องการย้ายไป Column ขวา ให้ Cut Block (Ctrl+X) ออก แล้ว Paste (Ctrl+V) ใน Column ปลายทาง การ Drag ข้าม Column อาจทำงานไม่สม่ำเสมอในบางเบราว์เซอร์

Block Locking

เว็บที่มีหลาย Editor ทำงานร่วมกัน ควรล็อก Block สำคัญเอาไว้ป้องกันการลบหรือย้ายโดยไม่ตั้งใจ:

1. เลือก Block ที่ต้องการล็อก
2. คลิก ⋮ → Lock
3. เลือก "Prevent removal" และ/หรือ "Prevent movement"
4. คลิก Apply

การตั้งค่า Typography และ Spacing ใน Block

ตั้งแต่ WordPress 6.x เป็นต้นมา Gutenberg รองรับการตั้งค่า Typography และ Spacing ในทุก Block โดยไม่ต้องเขียน CSS เพิ่ม:

Typography Controls

• Font size — ปรับขนาด Font ด้วย Preset (S/M/L/XL/XXL) หรือกำหนดค่า px/rem เอง
• Font family — ถ้า Theme รองรับ Typography ผ่าน theme.json จะสามารถเลือก Font Family ต่างกันในแต่ละ Block ได้
• Line height — ควบคุม Line Spacing ระหว่างบรรทัด
• Letter spacing — ควบคุมระยะห่างระหว่างตัวอักษร เหมาะสำหรับ Heading ที่ต้องการความ Modern
• Text transform — UPPERCASE, Capitalize หรือ lowercase โดยไม่ต้องพิมพ์ใหม่

Spacing Controls

• Padding — พื้นที่ภายใน Block (ควบคุมได้ทีละด้าน Top/Right/Bottom/Left)
• Margin — พื้นที่ภายนอก Block เพื่อห่างจาก Block ข้างเคียง
• Block gap — ระยะห่างระหว่าง Block ย่อยใน Container หรือ Group

ทั้งหมดนี้อยู่ใน Block Settings Panel → Styles ด้านขวา ถ้าไม่เห็น Options ให้คลิก ⋮ → Show more settings

Gutenberg กับ Performance และ Core Web Vitals

การใช้ Gutenberg อย่างถูกวิธีช่วยให้เว็บ WordPress โหลดเร็วและผ่านเกณฑ์ Core Web Vitals ของ Google ได้ดีขึ้น:

นอกจากนี้ Plugin อย่าง LiteSpeed Cache สามารถ Optimize CSS ที่ Block Editor สร้างได้อัตโนมัติ ทำให้ First Contentful Paint (FCP) เร็วขึ้นอีกขั้น

9. เคล็ดลับสำหรับมือใหม่

• ใช้ List View (ไอคอน 3 เส้นซ้อนกัน) เพื่อดูโครงสร้าง Block ทั้งหมดของ Post แบบ Tree View
• ลาก Block ขึ้น-ลงเพื่อเรียงลำดับใหม่ หรือคลิกลูกศรขึ้น/ลงบน Block Toolbar
• ใช้ Group Block ห่อ Block หลายตัวเข้าด้วยกัน เพื่อจัดการ Background Color หรือ Padding ทั้งกลุ่มพร้อมกัน
• Lock Block ป้องกันการ Delete หรือ Move — เหมาะสำหรับ Block ที่สำคัญในเว็บหลายคนดูแล
• กด Escape เพื่อออกจากการแก้ไขข้อความ และกด Enter เพื่อเพิ่ม Block ใหม่ถัดไป