ปรับแต่งบล็อกให้ตอบสนองต่อขนาดหน้าจอด้วย Block Responsive

เวลาสร้างเว็บไซต์ใน WordPress สิ่งหนึ่งที่แทบจะหลีกเลี่ยงไม่ได้คือ Responsive Design หรือการทำให้เว็บแสดงผลได้ดีบนทุกอุปกรณ์ ไม่ว่าจะเป็นมือถือ แท็บเล็ต หรือคอมพิวเตอร์ แต่ถ้าใครเคยใช้ Gutenberg Block Editor มาสักพักจะรู้ว่าบล็อกพื้นฐานของ WordPress ยังควบคุม responsive ได้ไม่ละเอียดเท่า Page builder อย่าง Elementor หรือ Bricks

โชคดีที่มีปลั๊กอินที่ช่วยเติมเต็มช่องว่างนี้ นั่นคือ Block Responsive ซึ่งช่วยเพิ่มตัวเลือก responsive ให้กับ Gutenberg blocks โดยตรง ทำให้คุณปรับดีไซน์แต่ละอุปกรณ์ได้ง่าย ๆ โดยไม่ต้องเขียน CSS เลย

ปัญหาของ Gutenberg

ต้องพูดตรง ๆ ว่า Gutenberg หรือ WordPress Block Editor ที่มาพร้อมกับ WordPress ตั้งแต่เวอร์ชัน 5.0 นั้น ดีขึ้นมากจากช่วงแรก แต่มีจุดอ่อนสำคัญจุดหนึ่งที่ยังไม่ได้รับการแก้ไขอย่างจริงจัง นั่นคือ การปรับแต่ง Responsive แบบละเอียด พูดง่ายๆ คือ เวลาคุณปรับ font size, padding, margin หรือสี มันจะตั้งค่าเป็นค่าเดียวสำหรับทุก device เลย ไม่มีทางบอกได้ว่า “บน mobile ให้ใช้ font 16px แต่บน desktop ให้ใช้ 24px” หรือ “block นี้ desktop โชว์ mobile ซ่อน”

ผลลัพธ์คือ คนที่อยากได้ responsive ละเอียดๆ ต้องหันไปพึ่ง page builder อย่าง Elementor หรือไม่ก็ต้องเขียน CSS เองซึ่งยุ่งยาก

Block Responsive คืออะไร?

Block Responsive คือปลั๊กอิน WordPress ฟรีที่เข้ามาเติมเต็มช่องว่างนี้ มันไม่ได้เพิ่ม block ใหม่ ไม่ได้เปลี่ยน editor ให้วุ่นวาย แต่เพิ่ม responsive controls เข้าไปใน inspector panel ด้านขวามือของทุก block ที่มีอยู่แล้ว โดยสิ่งที่ทำได้มีดังนี้ครับ

• Hide/Show ตาม Device ซ่อนหรือแสดง block แยกกันสำหรับ mobile, tablet, desktop
• Responsive Alignment จัด alignment และ flex direction ต่างกันในแต่ละ device
• Responsive Colors text color, background color, link color แยกตาม device
• Responsive Background Image ภาพพื้นหลังปรับได้ตาม screen
• Responsive Typography กำหนด font size, line height, letter spacing, text transform ต่างกันในแต่ละ device
• Responsive Spacing padding, margin, width, height ปรับแยกได้เลย
• Responsive Border & Shadow border radius, border width, shadow แยกกันทุก device

และที่ดีมากคือรองรับทั้ง Core WordPress blocks ทุกตัว รวมถึง WooCommerce blocks ด้วย

วิธีติดตั้ง

ไปที่เมนู Plugins > Add New ใน WordPress admin ค้นหาคำว่า “Block Responsive กด **Install Now แล้ว Activate ได้เลยครับ

ไม่มี configuration หลังบ้านให้ตั้งค่าอะไรพิเศษ ปลั๊กอินทำงานทันทีหลัง activate

วิธีใช้งานจริง

หลังจาก Activate แล้ว ให้เปิด Post หรือ Page ใดก็ได้ใน Gutenberg จากนั้นคลิกเลือก Block ที่ต้องการปรับ มองไปที่ Sidebar แท็บ Block ด้านขวา จะเห็นชื่อ Responsive Settings โผล่ขึ้นมา

คลิกขยาย Panel นั้นออกมา จะเห็นหัวข้อ Display Options เราสามารถเลือกซ่อนตามอุปกรณืที่ต้องการได้ครับ คือ Hide on mobile, Tablet และ Desktop

นอกจากนั้นเราจะเห็นว่ามีการแบ่งเป็นกลุ่มให้เราเลือกปรับ Responsive ทั้ง Alignment, Colors, Background Image, Typography, Dimensions, Border & Shadow และ Position เราสามารถคลิกเลือกปรับค่าต่าง ๆ ตามที่ต้องการได้เลยครับ

ข้อดีอีกอย่างคือ Real-time preview ปรับค่าปุ๊บ เห็นผลในหน้า editor ทันที ไม่ต้อง save แล้วเปิด preview ใหม่

เหมาะกับใคร?

• คนที่ใช้ Gutenberg/Block Editor เป็นหลักและอยากได้ responsive control โดยไม่ง้อ page builder
• Developer ที่ทำเว็บให้ลูกค้าและต้องการ responsive toolkit ที่ไม่ทำให้ editor ยุ่งยาก
• เจ้าของเว็บที่อยากควบคุม layout mobile/desktop ด้วยตัวเองโดยไม่ต้องเขียนโค้ด
• ร้านค้า WooCommerce ที่อยากปรับ product grid หรือ checkout ให้ mobile-friendly

ข้อควรรู้ก่อนใช้

มีสิ่งหนึ่งที่ต้องระวัง ถ้าคุณ Deactivate ปลั๊กอินในอนาคต Content ของคุณจะยังอยู่ครบ แต่ Responsive styling ที่ทำผ่านปลั๊กอินนี้จะหายไปทั้งหมด เพราะปลั๊กอินเป็นคนจัดการ generate CSS ให้ ถ้าไม่มีปลั๊กอิน CSS ก็ไม่มีครับ

สรุป

Block Responsive คือคำตอบที่หลายคนรอมานาน มันไม่ได้เปลี่ยน workflow ที่คุณคุ้นเคย ไม่ได้บังคับให้ใช้ Block ใหม่ แค่เพิ่ม Responsive control ให้ทุก Block ที่มีอยู่แล้ว ถ้าคุณเป็น Gutenberg user ที่เคยหงุดหงิดกับ responsive ที่จำกัด ลองลงดูครับ ฟรี ช่วยลดภาระเราลงได้มาก ทำให้เราโฟกัสกับเนื้อหาได้ดีขึ้น โดยไม่ต้องเขียนโค้ดเลยครับ

รายละเอียดเพิ่มเติม