自訂 Gutenberg 編輯器中文章區塊最大寬度的實作說明

前言

在使用 WordPress 的 Gutenberg 編輯器時，預設的區塊寬度可能不符合特定網站設計需求，尤其是針對文章（post）類型。這段程式碼示範如何透過後台樣式調整，限制文章區塊的最大寬度，讓編輯介面更貼近前端顯示效果，適合想優化編輯體驗的開發者與自學者。

為什麼要調整 Gutenberg 編輯器的區塊寬度？

Gutenberg 編輯器的區塊寬度預設較寬，可能導致編輯時排版與前端顯示不一致，影響內容編輯的直觀感受。透過限制最大寬度，可以讓編輯時的視覺效果更接近實際網站呈現，減少排版錯誤。

程式碼解析

1. 透過 admin_head 動作掛載自訂樣式

add_action( 'admin_head', 'custom_post_gutenberg_editor_width' );

這行程式碼將自訂函式掛載到 WordPress 後台的 head 區塊，確保樣式只在後台生效。

2. 目標限定為文章(post)類型的區塊

.post-type-post .wp-block {
    max-width: 600px !important;
}

這段 CSS 限制所有文章類型的區塊最大寬度為 600px，避免編輯器區塊過寬。

3. 調整 “wide” 對齊方式的寬度

.post-type-post .wp-block[data-align="wide"] {
    max-width: 600px !important;
}

將 “wide” 對齊的區塊同樣限制在 600px，避免因預設寬度過寬而影響排版。

4. 保留 “full” 對齊的全寬效果

.post-type-post .wp-block[data-align="full"] {
    max-width: none !important;
}

讓 “full” 對齊的區塊維持編輯器全寬，符合使用者預期的全屏展示。

實務應用與延伸

• 可依需求調整 max-width 數值，配合網站前端設計寬度。
• 若需針對其他自訂文章類型，也可複製此函式並修改 .post-type-post 選擇器。
• 若想更細緻控制不同區塊類型寬度，可增加更多 CSS 選擇器與規則。

常見問題與注意事項

• 使用 !important 是為了覆蓋 Gutenberg 預設樣式，避免無效。
• 此方法只影響後台編輯器，不會改變前端顯示。
• 若有快取或 CSS 優先權問題，請清除快取或調整掛載優先順序。

完整程式碼

<?php
function custom_post_gutenberg_editor_width() {
    echo '
<style>
        /* Target ONLY the standard "post" post type in the editor */
        .post-type-post .wp-block {
            max-width: 600px !important; 
        }

        /* Optionally, set the "wide" alignment to the same narrow width */
        .post-type-post .wp-block[data-align="wide"] {
            max-width: 600px !important; 
        }

        /* Ensure "full" alignment still goes full width of the editor screen */
        .post-type-post .wp-block[data-align="full"] {
            max-width: none !important;
        }
    </style>';
}
add_action( 'admin_head', 'custom_post_gutenberg_editor_width' );