讓 WordPress 內建的分隔符號(HR)區塊可以完整顯示樣式

日期：2020.06.17
留言數：0
標籤：區塊樣式

有在用 Gutenberg HR Blocks (分隔符號) 的朋友，不知是否會發現，這個 Blocks 的預覽和實際顯示的效果不一樣。

該 Blocks 總共有三種樣式：

default / 預設
wide / 長線段
dot / 點狀線段

而我實際使用的結果，只有點狀線段的樣式會完美呈現，也就是你在後台設定的樣式與顏色，在前台都可以顯示，而其他兩個的顏色樣式都會消失。

可以看到幾個不同的點：

default / 預設樣式的顏色，以及寬度都不一樣
wide / 長線段的顏色不見了 (我在後台設定的是紅色)
區塊彼此沒有間距，在編輯文章時是有上下的間距

扒了一下官方的 wp-includes/css/dist/block-library/style.min.css，發現根本沒有 is-style-default 的樣式，然後 is-style-wide 的樣式也是半殘；而且 Github 在 2018 年就有人說過類似的事情，到現在都還沒有發 PR 解決，究竟是 … QQ

於是乎，我只好自己把樣式補回去，如果你也想要官方內建的 HR Blocks，可以試著把以下的樣式語法加到你的佈景樣式裡。

.wp-block-separator {
  margin: 2em auto;
}

.wp-block-separator.is-style-default {
  height: 2px;
  border: none;
  width: 100px;
}

.wp-block-separator.is-style-wide {
  border: none;
  height: 1px;
}

存檔後重新整理，再回到前台確認一下，就會發現之前消失的樣式都出現囉！