如何去掉WordPress编辑器的蓝色边框

前一篇文章里,我提到WordPress编辑器已经不像之前那么难用,作为日常写内容的编辑器算是合格了。但是有个体验不太好的地方,就是某个block在编辑态下会有蓝色边框,这个用意大概是好的,因为WordPress后来升级为Gutenberg编辑器后,每一行以及每个新增的元素都作为一个单独的内容模块,这个逻辑有点类似Markdown。所以有这么个边框用来提醒。

但是对于已经熟悉这种模式的用户来说,看着这个边框就很annoying了。

应该是没有开放出来设置,因而找了一些方法,先是安装了一款插件,发现有点复杂,马上删掉。看来是逃不过改代码。

先是用了豆包给的代码,无效。

后改为DeepSeek的代码,有效。方法是在function.php文件的末尾,添加如下代码:

function custom_block_editor_styles() {
    wp_add_inline_style(
        'wp-edit-blocks',
        '.block-editor-block-list__block:focus,
         .block-editor-block-list__block.is-selected,
         .block-editor-block-list__block:hover {
            outline: none !important;
            box-shadow: none !important;
         }'
    );
}
add_action('enqueue_block_editor_assets', 'custom_block_editor_styles');
PHP

生效后的效果如下,没有边框,基本跟正常Markdown编辑器没什么两样了,在浏览器里写跟在本地写体验基本可以对齐。尤其是打开专注模式和全屏模式,体验还是很赞的。

新的想法:

  1. 如果能有黑夜模式就更赞了。
  2. 另外,如果是长文,涉及到多个小标题定位,这个编辑器目前来看还是无法满足的。估计还是要折腾一番。不去管这个了,我对它的定位目前就是一个轻量编辑器,临时写点东西,一点问题都没有。如果是长文,还是要在本地写个七七八八,然后在贴上来做小修补发布。
文章已创建 4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部