วิธีแก้ปัญหา Gutenberg ซ้อนทับ Metabox

เนื่องจากเช้าวันนี้ผมตื่นขึ้นมาเปิดเว็บไซต์ของผมหลังบ้านแล้วพบว่าเจ้า Gutenberg ของ WordPress เกิดแสดงข้อผิดพลาดมีการซ้อนทับกับ Metabox ทำให้เกิดการบังเนื้อหากันไปมา และทำการทดลองเปิดอีกสองเว็บไซต์ก็พบปัญหาเช่นเดียวกัน ทำให้เกิดบทความนี้ที่จะมาแนะนำถึงวิธีการแก้ปัญหาดังกล่าวครับ

ภาพเหตุการณ์ที่เกิดขึ้นเมื่อเช้านี้ เป็นทั้งหมด 3 เว็บไซต์ ไม่เข้าใจเหมือนกันว่าเพราะอะไร

หลังจากเกิดปัญหาขึ้น ผมก็ตั้งสติคิดว่าเมื่อวานนี้เราไม่ได้ทำการเพิ่มปลั๊กอิน หรืออัพเดทธีมและปลั๊กอิน สาเหตุนี้เกิดจากอะไร หรือว่าจะเป็นในเรื่องของ WordPress อัพเดทเอง ผมจึงเริ่มทำการทดสอบด้วยการปิดปลั๊กอินทั้งหมดและเปลี่ยนธีมดูว่าปัญหานนั้นยังเกิดอยู่หรือไม่ครับ ผลปรากฏว่า ปัญหา Gutenberg ซ้อนทับยังมีอยู่ !! ผมจึงได้ทำการค้นหาปัญหาที่เกิดขึ้นว่ามาจากอะไร จนไปพบกับลิงก์นี้

Blocks overlap meta boxes on posts #11378

ลิงก์ด้านบนเป็นการแจ้งปัญหากับ WordPress ว่ามีปัญหาใดบ้าง แสดงให้เห็นว่ามีคนเจอปัญหาเดียวกับผมเยอะมาก และวิธีการแก้ปัญหาของแต่ละคนไม่เหมือนกันเลย บางคนใช้วิธีการปิดปลั๊กอิน เช่น ปิด Yoast Seo ปัญหาก็หายไป หรือบางคนแก้โดยการใส่โค้ดเพิ่มก็หายไป สุดท้ายผมจึงได้นำมาปรับเปลี่ยนโค้ดนิดหน่อย โดยโค้ดที่แก้ของผมเป็นดังนี้ครับ

// Add style for dashboard, overlap meta boxes on posts(editor)
add_action('admin_head', 'themevilles_fix_gutenberg_overlap_meta');
function themevilles_fix_gutenberg_overlap_meta() {
    echo '<style>
    .block-editor-writing-flow{
       height: auto;
    }
    </style>';
}

ให้นำโค้ดนี้ ไปวางไว้ในไฟล์ functions.php ผลที่ได้ก็จะทำให้เว็บของเรากลับมาเป็นเหมือนเดิมตามรูปด้านล่าง

ถึงตรงนี้แล้วผมก็ยังไม่รู้ว่าเพราะอะไรแค่ผ่านไปคืนเดียวถึงทำให้พังได้ เอาเป็นว่าใช้ได้ก็แล้วกัน จึงนำมาบอกกันครับ หากใครเจอปัญหานี้ก็ลองเอาโค้ดไปใส่ดูนะ