Custom HTML Block Extension

Description

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

Screenshots

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

Installation

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

Reviews

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

Contributors & Developers

“Custom HTML Block Extension” is open source software. The following people have contributed to this plugin.

Contributors

“Custom HTML Block Extension” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Custom HTML Block Extension” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

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