關於 WordPress 塊編輯器我又愛又恨的 12 件事

已發表: 2020-05-20

2017 年,Gutenberg 的第一個版本推出,樂趣和測試開始了。 Gutenberg 是為四個階段的過程選擇的項目名稱,該過程將觸及 WordPress 的每一部分:編輯、定制、協作和多語言(來源)。 第一階段的一部分是擺脫舊的經典編輯器並採用新的基於塊的編輯器

從 WordPress 5.0 開始,塊編輯器已合併到核心中,並且是您進行全新 WordPress 安裝時的默認編輯器。 這個有官方名稱嗎? 有點。 我選擇將其稱為“塊編輯器”,因為 Gutenberg 應該是圍繞未來變化的整個項目。 但是圍繞名稱應該是什麼進行了一些有趣的討論:#4681 和 #20407。

我認為分享我對塊編輯器的想法可能會很有趣,因為我已經斷斷續續地使用它三年多了。 幾個月前,我終於完全放棄了經典編輯器。 這就是為什麼。

  • 我喜歡 WordPress 塊編輯器的地方
  • 我討厭 WordPress 塊編輯器的事情

我喜歡 WordPress 塊編輯器的 8 件事

不可能列出經典編輯器和塊編輯器之間的所有差異。 作為作家和網站建設者,這些事情對我的工作流程產生了個人影響。 現在我不想沒有他們生活!

Markdown 支持更好

最後, WordPress 編輯器支持在 Markdown 中粘貼的功能。 作為一名作家和臨時開發人員,我每天使用的所有其他工具多年來都支持 Markdown。 這包括熊應用程序、Trello、Github 等。所以在其他地方使用 Markdown 真的很令人沮喪,然後無法將其複制/粘貼到 WordPress 中而無需重新格式化。

現在有了 WordPress 塊編輯器,我可以全面使用許多相同的語法。 老實說,這幾乎改變了生活。 幾年前編輯應該是這樣的。

編輯器仍然不支持開箱即用地僅在 Markdown 中編寫的功能,但它已經實現了。 至少到了不再讓我慢下來的地步。 您還可以使用 Iceberg 之類的插件來添加所有您喜歡的 Markdown 快捷方式。 我還能夠在幾秒鐘內匹配我最喜歡的 Ayu Mirage Bear 主題。 事實上,我使用 Iceberg 編寫了整篇博文。

在 WordPress 塊編輯器中更好地支持 Markdown
在 WordPress 塊編輯器中更好地支持 Markdown

其他 WordPress 插件,如 EditorsKit 和 JetPack,也可以添加 Markdown 支持。

不再重新加載

我是那種經常查看我的帖子預覽以了解流程及其外觀的人。 老實說,可能太多次了。 在經典編輯器中,您必須保存草稿,整個頁面將重新加載。 這只是煩人和分心。

在 WordPress 塊編輯器中,您在保存草稿或更新帖子時不再需要完全重新加載。 對 AJAX 贊不絕口。 歡迎來到 21 世紀。

不再刷新 WordPress 編輯器
不再刷新 WordPress 編輯器

塊是驚人的

我現在喜歡積木。 我完全可以看到它的發展方向。 我花了一段時間,因為一開始我不想喜歡積木,但我終於到了。

最近,我完全用塊重建了我們的 Perfmatters 網站,並且能夠刪除 83 行自定義代碼。 這一切都歸功於 GeneratePress、GenerateBlocks,當然還有 WordPress 塊編輯器。

WordPress 塊編輯器中的塊
WordPress 塊編輯器中的塊

我們甚至在我們的新社交分享插件 Novashare 中構建了一個方便的點擊推文塊。 你所要做的就是輸入/nova...並且繁榮,你有你的推文塊。

嘿,看,我是一個灰色的推文框。 請給我發微博。 點擊推文

其他的小東西,比如能夠輸入/image ,或/code ,或/quote非常方便!

突出顯示它本來應該是這樣的

在 WordPress 塊編輯器中突出顯示現在應該是這樣。 例如,假設您有幾個加粗的單詞。 在經典編輯器中,如果我想取消它們的粗體,我必須突出顯示所有單詞。

現在,在 WordPress 塊編輯器中,我可以簡單地單擊粗體區域中的任意位置,然後取消粗體字。 它與下劃線之類的行為相同。 隨著時間的推移,像這樣的小事情真的開始累積起來。

在 WordPress 塊編輯器中突出顯示
在 WordPress 塊編輯器中突出顯示

文檔大綱很聰明,很有幫助

WordPress 塊編輯器中的文檔大綱功能實際上非常棒! 您可以輕鬆單擊標題以立即將您帶到帖子中的該部分。 不僅如此,它背後還有一些邏輯。 在下面的示例中,您可以看到它讓我知道了錯誤的標題級別(從 H2 標題跳到 H4)。 結構方面,我應該先使用 H3。

塊編輯器文檔大綱
塊編輯器文檔大綱

在圖像上添加標題非常容易

當談到圖像標題時,我是一個堅持不懈的人。 不僅出於 SEO 的目的,而且它們也是一種方便且微妙的方式來在獲取外部圖像時對其進行歸因。

在經典編輯器之前,您必須上傳圖片,然後單擊圖片以顯示新窗口,然後輸入您的標題。 現在在 WordPress 塊編輯器中,您可以簡單地上傳圖像並在其下方鍵入標題。 我什至無法計算這些年來我上傳到 WordPress 網站的圖片數量; 它必須是數万。 所以再一次,小事情加起來!

寫得更好
寫得更好(圖片來源:Pinterest)

更好的視圖可供選擇

使用 WordPress 塊編輯器可以在寫作方面提供更多視圖供您選擇。 畢竟,這是新編輯器的一大重點,就是改善整體寫作體驗。

在我看來,你有像 Medium 這樣的競爭對手,它們讓舊的經典編輯器大吃一驚。 值得慶幸的是,現在 WordPress 塊編輯器的行為更像其他一些第三方寫作平台。

三種不同的觀點包括:

  • 頂部工具欄:在一個地方訪問所有塊和文檔工具。
  • 聚光燈模式:一次專注於一個塊。
  • 全屏模式:工作時不會分心。

如果您選擇了所有三個,下面是它的樣子。

所有三個 WordPress 塊編輯器視圖
所有三個 WordPress 塊編輯器視圖

我實際上是 Spotlight 模式和沒有頂部工具欄的全屏模式的忠實粉絲。

我最喜歡的 WordPress 塊編輯器視圖
我最喜歡的 WordPress 塊編輯器視圖

終於有人想到了ID

在經典編輯器中添加 HTML 錨鏈接非常煩人,因為您必須切換到代碼視圖才能添加 ID。 你必須用 HTML 來做這件事。 這使得它變得非常麻煩,這也是人們想要添加錨鏈接的一個重要原因,只需安裝一個 WordPress 插件以使其更容易。

在 WordPress 塊編輯器中,您終於可以在同一視圖中添加 ID 了! 不需要插件。 萬歲。

添加 HTML 錨點 ID
添加 HTML 錨點 ID

我討厭 WordPress 塊編輯器的 4 件事

顯然,您已經可以看出我現在是 WordPress 塊編輯器的粉絲。 但是,有幾件事我不喜歡。 我希望這些在塊編輯器的未來版本中得到修復。

我的光標在這裡,現在它在那裡

這個很難描述,但是任何使用 WordPress 塊編輯器一段時間的人都應該能夠知道我在說什麼。

當您單擊不同的塊時,光標並不總是正確地跟隨您。 有時它會來回跳動,你必須重試兩三次,非常小心光標的位置。 否則,您可以輕鬆地開始輸入錯誤的塊。 或者更糟糕的是,有時它會立即將您滾動回頂部。

我已經向數十人證實了這種奇怪的行為,所以我知道這不僅僅是我。

挫折
沮喪(圖片來源:Memedroid)

讓主題覆蓋編輯器可能並不適合所有人

如果您讓主題覆蓋編輯器樣式,它的外觀或感覺可能並不總是相同。 您的偏好可能會有所不同,具體取決於您使用塊編輯器執行的操作以及您是否在許多不同的站點之間來回跳轉。

我管理著很多不同的 WordPress 網站,我更喜歡剝離主題樣式並回到原生塊編輯器樣式。 這樣一來,我在所有網站上都有類似的感覺,即使是在我使用積木構建和設計時也是如此。

例如,我在所有網站上都使用 GeneratePress 主題。 因此,我添加了以下過濾器以默認恢復為原始塊編輯器樣式。

 add_filter('generate_show_block_editor_styles', '__return_false');

下面是它的外觀之前和之後。

之前的塊編輯器(主題覆蓋樣式)

WordPress 主題覆蓋編輯器樣式
WordPress 主題覆蓋編輯器樣式

之後的塊編輯器(剝離主題樣式)

塊編輯器默認樣式
塊編輯器默認樣式

語法不能正常工作,可能永遠不會

我是 Grammarly 的忠實用戶。 然而,自從新的 WordPress 塊編輯器問世以來, Grammarly 一直無法正常工作。 它有時會找到東西,有時卻找不到。

我在 Twitter 上也看到了用戶類似的抱怨。 據我所知,我認為這與每個塊如何完全分開有關。 因此,Grammarly 不能總是看到完整的上下文。 我還認為它只是在掃描基於 React.js 的編輯器時遇到了問題。

老實說,我對他們解決這個問題並不抱太大希望。 我現在嘗試在他們的支持下以及在 Twitter 上提出這個問題。 WordPress 團隊說這是語法結束的事情。

我很驚訝地從評論這篇文章的 Jakab 那裡得知,其他解決方案(例如 ProWritingAid 的擴展)在塊編輯器中工作得很好。

無法再查看單個帖子的評論

這可能不是編輯器本身的變化,而是 WordPress 5.0 和 WordPress 塊編輯器的推出發生的變化。 以前,您可以滾動到您正在處理的帖子的底部並查看待處理的評論。 這是在關注手頭主題的同時趕上評論的好方法。 這不再存在。

您現在必須從主儀表板窗口回複評論,或單擊“所有帖子”屏幕上的評論圖標。 這樣做的問題是,您還可以閱讀文章的內容。 因此,當我回答評論時,我只是開始在另一個窗口中打開帖子以供參考。

WordPress 塊編輯器中的待處理評論
WordPress 塊編輯器中的待處理評論

我在這篇文章中提出這個問題的原因是很多時候我會根據評論的反饋在編輯器中更正或更新內容。 有人認為這個工作流程需要改變,我猜,並且不再在同一個窗口中。

概括

我真的很想听聽大家的反饋。 您喜歡新的 WordPress 塊編輯器的發展方向嗎? 你喜歡和討厭它的哪些方面? 在評論下方留下您的想法。