Custom HTML Block Extension

外掛說明

Custom HTML Block Extension extends “Custom HTML block” to evolve into an advanced code editor.
There are 50 different color themes to choose from, and you can select the one that best suits your taste.
This plugin features Emmet that expand shortcut input into complete code. This reduces the number of times you have to type and saves keystrokes.
You can change all kinds of settings to create your ideal editor in advanced mode.
And supports the classic editor, the theme/plugin editor, import/export editor settings, and change indentation.

Note

This plugin will not work on the “Block Template” editor, which is a new feature in WordPress 5.8.

Resources

@monaco-editor/react

License: MIT License
Source: https://github.com/suren-atoyan/monaco-react

emmet-monaco-es

License: MIT License
Source: https://github.com/troy351/emmet-monaco-es

monaco-themes

License: MIT License
Source: https://github.com/brijeshb42/monaco-themes

webfontloader

License: Apache-2.0 License
Source: https://github.com/typekit/webfontloader

Web Font (Fira Code)

License: OFL-1.1 License
Source: https://github.com/tonsky/FiraCode

Web Font (Source Code Pro)

License: OFL-1.1 License
Source: https://github.com/adobe-fonts/source-code-pro

Web Font (Ubuntu Mono)

License: OFL-1.1 License
Source: https://ubuntu.com/legal/font-licence

Web Font (Anonymous Pro)

License: OFL License
Source: https://www.marksimonson.com/fonts/view/anonymous-pro

螢幕擷圖

  • Custom HTML Block Extension
  • Various color themes
  • Faster coding with Emmet
  • High customizability
  • Classic Editor support

安裝方式

  1. Upload the custom-html-block-extension folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the \’Plugins\’ menu in WordPress.

使用者評論

2021 年 8 月 9 日
カスタムHTMLブロックの編集に、驚きのEmmet実装! それだけではなく、オプションの多さ(そして、必要最低限のベーシックの設定部分はコンパクトでわかりやすくなっている)が大変気に入っています。 神プラグインだと思います。
2021 年 7 月 8 日
使いやすいです。カスタムHTMLが「エディタ」になります。 ・Emmetが使える ・テーマが変えられるので、自分好みの見た目に出来る ・クラシックエディタの状態でも使える ・インデントのタブ / スペース設定が出来る ・ミニマップがついてる ・設定画面がめちゃくちゃ親切(よく分からない機能でも「i」ボタンを押すとbefore/afterがあって視覚的にわかりやすい) これまでHTMLをエディタに移してコーディングして整形して貼り付けて…の作業をしてましたが、 簡単な調整なら編集画面内で完結できるようになりました。 ありがとうございます・・・・!!!
2021 年 5 月 10 日
編集画面で負担なくコーディングができるようになりとても便利です。(Emmetが使える!) プラグイン独自のブロックではなく、WordPressコアのHTMLブロックでエディタが使えるようになるのがとても良いです。 オプションが充実していてテーマやインデントなど好みに設定できるのでいつも使っているVSCodeと同じ設定にして使ってみています。 あとは、なんと検索機能も使える...!優れたプラグインです。
閱讀全部 6 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Custom HTML Block Extension〉的開發相關工作。

參與者

Custom HTML Block Extension 外掛目前已有 1 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Custom HTML Block Extension 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.4.2

  • Fix: Incorrect search box style

2.4.1

  • Clean: Remove unnecessary file included in the release

2.4.0

  • Fix: Editor mode is not detected correctly under certain conditions
  • Clean: Update monaco editor version
  • Clean: change PHP namespace

2.3.3

  • Fix: Editor mode is not detected correctly under certain conditions

2.3.2

  • Clean: Update npm packages and run a lint check
  • Fix: Indent conversion tool style

2.3.1

  • Fix: Wrong CSS for IntelliSense

2.3.0

  • Add: Theme/Plugin Editor support
  • Code refactoring
  • Clean: Update npm packages

2.2.3

  • Fix: Quick tag insertion is not reflected in the classic editor

2.2.2

  • Fix: Emmet does not work in the classic editor

2.2.1

  • Clean: Update npm packages
  • Remove: Bundled language files

2.2.0

  • Add: Indent conversion tool
  • Fix: Add handling of the classic editor when it does not support the content editor
  • Doc: Update welcome guide, translation file
  • Fix: The visual editor added in the metabox does not show up in the Classic Editor

2.1.2

  • Fix: Characters are not visible until the conversion is confirmed when typing Japanese

2.1.1

  • Doc: Update tested up to

2.1.0

  • Testes to WordPress 5.8
  • Fix: Issue with the correct block icon not being displayed
  • Clean: Update npm packages
  • Add: Ctrl+S shortcut action to the classic editor
  • Fix: Editor mode is not detected correctly the first time the Classic Editor is used

2.0.2

  • Fix: Error that occurs when the visual editor is disabled in the classic editor

2.0.1

  • Fix: Problem about browser console error and incorrectly margin-top of the code editor at classic editor

2.0.0

  • Doc: Update translation file
  • Add: Classic Editor support

1.2.1

  • Fix: Problem aoubt the cut/copy shortcut action does not work properly depending on the settings

1.2.0

  • Doc: Update translation file
  • Add: Import/Export editor config tool
  • Clean: Ajust internal logic

1.1.0

  • Doc: Update translation file
  • Doc: About how to add custom fonts
  • Add: Filter hook for adding custom fonts

1.0.3

  • Fix: Indent of the sample code in the editor config preview is not consistent with the settings
  • Fix: Incorrect HTML syntax in the sample code of the editor config preview
  • Clean: Ajust internal logic
  • Change: the range of some setting items
  • Style: Add space between the horizontal scroll bar and the handle of resizable box

1.0.2

  • Clean: Re-record and compress gif files

1.0.1

  • Clean: remove console.log
  • Clean: remove .eslintignore from .distignore

1.0.0

  • Initial release