2020.06.17
有在用 Gutenberg HR Blocks (分隔符號) 的朋友,不知是否會發現,這個 Blocks 的預覽和實際顯示的效果不一樣。
該 Blocks 總共有三種樣式:
而我實際使用的結果,只有點狀線段的樣式會完美呈現,也就是你在後台設定的樣式與顏色,在前台都可以顯示,而其他兩個的顏色樣式都會消失。
可以看到幾個不同的點:
扒了一下官方的 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; }
存檔後重新整理,再回到前台確認一下,就會發現之前消失的樣式都出現囉!