Gutenberg 古騰堡編輯器插入圖片的全幅寬度功能

在古騰堡(Gutenberg )編輯器選擇『圖片區塊』後，應該會發現它的寬度是窄的，並非符合螢幕寬度的全幅版，其實要改成全幅寬度也是可以的。

要變成全幅編輯圖片區塊時，選擇『全幅寬度』就可以了，該功能位置如下圖。

若沒有看到這個選項，代表你的佈景主題並沒有支援調整全幅寬度。這時候可以修改佈景的 functions.php 檔，或是利用其他可以自定程式碼的外掛來改也行。程式語法如下：

function align_image_full() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'align_image_full' );

然後還要加入相關的 css 樣式：

.entry-content .alignwide {
    margin-left  : -80px;
    margin-right : -80px;
}
.entry-content .alignfull {
    margin-left  : calc( -100vw / 2 + 100% / 2 );
    margin-right : calc( -100vw / 2 + 100% / 2 );
    max-width    : 100vw;
}
.alignfull img {
    width: 100vw;
}