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

有在用 Gutenberg HR Blocks (分隔符號) 的朋友,不知是否會發現,這個 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,可以試著把以下的樣式語法加到你的佈景樣式裡。

CSS
wp-content/themes/{佈景主題}/style.css

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

消失的樣式都出現了
想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團