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.

Resources

monaco-editor

License: MIT License
Source: https://github.com/microsoft/monaco-editor

react-notifications-component

License: MIT License
Source: https://github.com/teodosii/react-notifications-component

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.

评价

2023年2月14日
Dear friend. You have made a wonderful plugin. I've wanted to find one for a long time and I'm very glad I found it. This is despite the fact that half of the plugin's functions do not work on my computer. Minimap, code folding, suggest function are absolutely dead. But there is a wonderful indentation system. Find and replace text works great. Code coloring is remarkably fast. Well chosen colors. Very convenient multiple selection and correction.Indeed, I have tried dozen of editors and coloring systems, no one of them is comparable to your package. Huge thanks to you for your work. Maybe you will find time to understand Why some of the functions do not work on my computer. I am working with WordPress 6.1.1, PHP 7.4.26 system. Even if you only make assumptions, I will be extremely grateful to you. I am Nick, best regards!
2023年1月15日
<p>This plugin is solid. I LOVE it!Adds much-needed functionality to the Custom HTML block and then some.<br />Unbelievably well put together, you can tell the developer of this plugin has put much time and effort into its creation.<br />The options/settings available for the plugin are extensive and the little helper pop-up showing you visual representations of what the option does is really useful and intuitive.<br />The HTML custom extension also appears to remove wpAutop which is a filter which automatically adds to text. Which is great.<br />Your HTML formatting is retained! Yes, you heard right all your indents and extra lines etc, are not lost on save like the standard HTML editor.<br />Wow just Wow, congratulations to the Author of this plugin is very powerful, very useful and very well put together.<br />This plugin is an absolute must if you work with CustomHTML blocks at all!</p> <p>In the future would love to see this in use in the Code Editor mode (which for those who don't know is accessed via the visual editor with Ctrl+shift+alt+M)</p> <p>Thank you Aki Hamano! Hope this becomes core functionality in WordPress one day.</p>
2021年8月9日
カスタムHTMLブロックの編集に、驚きのEmmet実装! それだけではなく、オプションの多さ(そして、必要最低限のベーシックの設定部分はコンパクトでわかりやすくなっている)が大変気に入っています。 神プラグインだと思います。
阅读所有11条评价

贡献者及开发者

“Custom HTML Block Extension” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

“Custom HTML Block Extension”插件已被翻译至1种本地话语言。 感谢所有译者为本插件所做的贡献。

将“Custom HTML Block Extension”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码,查看SVN仓库,或通过RSS订阅开发日志

更新日志

3.2.1

  • Enhancement: Change modal HTML editor icon

3.2.0

  • Feature: Add modal HTML editor
  • Enhancement: Don’t display toolbar buttons when preview mode
  • Fix: Wrong CSS for Monaco Editor in the block editor
  • Fix: Copy and cut lines don’t work in the block editor
  • Clean: Polish block editor popover UI
  • Clean: Polish classic editor popover UI
  • Clean: Polish setting page UI

3.1.0

  • Tested to WordPress 6.1
  • Drop support for WordPress 5.6 through 5.8
  • Clean: Bump monaco-editor version
  • Enhancement: Apply admin color scheme to the settings screen
  • Fix: the position of notifications on the settings screen

3.0.3

  • Bundle the core files of the Monaco Editor

3.0.2

  • Tested to WordPress 6.0
  • Update author name

3.0.1

  • Doc: Fix typo

3.0.0

  • Update: Support for full site editor, mobile / tablet device preview, and block template editor

2.5.0

  • Tested to WordPress 5.9
  • Update: UI improvement of the indent conversion tool in block editor
  • Update: Disable the code editor in full site editor, mobile / tablet device preview, and block template editor
  • Remove: Support for local translation files

2.4.3

  • Fix: Wrong CSS for IntelliSense

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

  • Tested 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