Custom HTML Block Extension

説明

Custom HTML Block Extension は、「カスタムHTMLブロック」を拡張し、高度なコードエディターに進化させます。
50種類のカラーテーマが用意されており、自分の好みに合ったテーマを選ぶことができます。
このプラグインは、ショートカットの入力を完全なコードに展開する Emmet を搭載しています。これにより、入力の回数が減り、キーストロークを節約できます。
アドバンスモードでは、あらゆる設定を変更して、理想のエディターを作り上げることができます。
また、クラシックエディター、テーマ/プラグインエディター、エディター設定のインポート/エクスポート、インデントの変更などにも対応しています。

リソース

monaco-editor

ライセンス: MIT ライセンス
ソース: https://github.com/microsoft/monaco-editor

react-notifications-component

ライセンス: MIT ライセンス
ソース: https://github.com/teodosii/react-notifications-component

emmet-monaco-es

ライセンス: MIT ライセンス
ソース: https://github.com/troy351/emmet-monaco-es

monaco-themes

ライセンス: MIT ライセンス
ソース: https://github.com/brijeshb42/monaco-themes

webfontloader

ライセンス: Apache-2.0 ライセンス
ソース: https://github.com/typekit/webfontloader

ウェブフォント (Fira Code)

ライセンス: OFL-1.1 ライセンス
ソース: https://github.com/tonsky/FiraCode

ウェブフォント (Source Code Pro)

ライセンス: OFL-1.1 ライセンス
ソース: https://github.com/adobe-fonts/source-code-pro

ウェブフォント (Ubuntu Mono)

ライセンス: OFL-1.1 ライセンス
ソース: https://ubuntu.com/legal/font-licence

ウェブフォント (Anonymous Pro)

ライセンス: OFL ライセンス
ソース: https://www.marksimonson.com/fonts/view/anonymous-pro

スクリーンショット

  • Custom HTML Block Extension
  • 多彩なカラーテーマ
  • Emmetでコーディングを高速化
  • 高いカスタマイズ性
  • クラシックエディターのサポート

インストール

  1. custom-html-block-extension フォルダ全体を /wp-content/plugins/ ディレクトリにアップロードします。
  2. WordPress のプラグインメニューからプラグインを有効化してください。

評価

2022年8月26日
This plugin is solid. I LOVE it! Adds much-needed functionality to the Custom HTML block and then some. Unbelievably well put together, you can tell the developer of this plugin has put much time and effort into its creation. 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. The HTML custom extension also appears to remove wpAutop which is a filter which automatically adds <p> to text. Which is great. 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. Wow just Wow, congratulations to the Author of this plugin is very powerful, very useful and very well put together. This plugin is an absolute must if you work with CustomHTML blocks at all! 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) Thank you Aki Hamano! Hope this becomes core functionality in WordPress on day.
2021年8月9日
カスタムHTMLブロックの編集に、驚きのEmmet実装! それだけではなく、オプションの多さ(そして、必要最低限のベーシックの設定部分はコンパクトでわかりやすくなっている)が大変気に入っています。 神プラグインだと思います。
2021年7月8日
使いやすいです。カスタムHTMLが「エディタ」になります。 ・Emmetが使える ・テーマが変えられるので、自分好みの見た目に出来る ・クラシックエディタの状態でも使える ・インデントのタブ / スペース設定が出来る ・ミニマップがついてる ・設定画面がめちゃくちゃ親切(よく分からない機能でも「i」ボタンを押すとbefore/afterがあって視覚的にわかりやすい) これまでHTMLをエディタに移してコーディングして整形して貼り付けて…の作業をしてましたが、 簡単な調整なら編集画面内で完結できるようになりました。 ありがとうございます・・・・!!!
10件のレビューをすべて表示

貢献者と開発者

Custom HTML Block Extension はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Custom HTML Block Extension” は1ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Custom HTML Block Extension” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

3.0.3

  • Monaco エディターのコアファイルを同梱

3.0.2

  • WordPress 6.0で動作確認
  • 作者名のアップデート

3.0.1

  • ドキュメント: タイポの修正

3.0.0

  • 更新: フルサイトエディター、モバイル / タブレットデバイスプレビュー、ブロックテンプレートエディターのサポート

2.5.0

  • WordPress 5.9で動作確認
  • 更新: ブロックエディターにおけるインデント変換ツールの UI を改善
  • 更新: フルサイトエディター、モバイル / タブレットデバイスプレビュー、ブロックテンプレートエディターでコードエディターを無効に
  • 削除: ローカル翻訳ファイルのサポート

2.4.3

  • 修正: IntelliSense の誤った CSS

2.4.2

  • 修正: 不適切な検索ボックスのスタイル

2.4.1

  • 整理: リリースに含まれる不要なファイルの削除

2.4.0

  • 修正: 特定の条件下でエディターモードが正しく検出されない
  • 整理: monaco エディターのバージョンを更新
  • 整理: PHP の名前空間の変更

2.3.3

  • 修正: 特定の条件下でエディターモードが正しく検出されない

2.3.2

  • 整理: npm パッケージのアップデートと構文チェックの実行
  • 修正: インデント変更ツールのスタイル

2.3.1

  • 修正: IntelliSense の誤った CSS

2.3.0

  • テーマ/プラグインエディターのサポート
  • コードをリファクタリング
  • 整理: npm パッケージのアップデート

2.2.3

  • 修正: クラシックエディターでクイックタグの挿入が反映されない

2.2.2

  • 修正: Emmet がクラシックエディターで動作しない

2.2.1

  • 整理: npm パッケージのアップデート
  • 削除: バンドルされた言語ファイル

2.2.0

  • 追加: インデント変換ツール
  • 修正: クラシックエディターがコンテンツエディターに対応していない場合の処理を追加
  • ドキュメント: ウェルカムガイド、翻訳ファイルの更新
  • 修正: メタボックスで追加されたビジュアルエディターがクラシックエディターで表示されない

2.1.2

  • 修正: 日本語入力時に、変換が確定するまで文字が表示されない

2.1.1

  • ドキュメント: tested up to を更新

2.1.0

  • WordPress 5.8で動作確認
  • 修正: 正しいブロックアイコンが表示されない問題
  • 整理: npm パッケージのアップデート
  • 追加: クラシックエディターに Ctrl+S のショートカットアクションを追加
  • 修正:クラシックエディターを初めて使用したときに、エディターのモードが正しく検出されない

2.0.2

  • 修正: クラシックエディターにおいて、ビジュアルエディターを無効にしたときに発生するエラー

2.0.1

  • 修正: ブラウザのコンソールエラーと、クラシックエディターでのコードエディターのマージントップが正しく設定されない問題

2.0.0

  • ドキュメント: 翻訳ファイルのアップデート
  • 追加: クラシックエディターのサポート

1.2.1

  • 修正: ショートカットの「切り取り」「コピー」が設定によって正常に動作しない問題

1.2.0

  • ドキュメント: 翻訳ファイルのアップデート
  • 追加: エディターの設定をインポート/エクスポートするツール
  • 整理: 内部ロジックの調整

1.1.0

  • ドキュメント: 翻訳ファイルのアップデート
  • ドキュメント: カスタムフォントの追加方法について
  • 追加: カスタムフォントを追加するためのフィルターフック

1.0.3

  • 修正: エディター設定のプレビューでサンプルコードのインデントが設定と一致しない
  • 修正:エディター設定のプレビューのサンプルコードの不正な HTML 構文
  • 整理: 内部ロジックの調整
  • 変更: 一部の設定項目の範囲
  • スタイル: 水平スクロールバーとサイズ変更可能なボックスのハンドルの間にスペースを追加

1.0.2

  • 整理: gif ファイルの再録画と圧縮

1.0.1

  • 整理: console.log を削除
  • 整理: .eslintignore を .distignore から削除

1.0.0

  • 初回リリース