Custom HTML Block Extension

説明

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

注意

このプラグインは、WordPress 5.8の新機能であるブロックテンプレートエディターでは動作しません。

リソース

@monaco-editor/react

ライセンス: MIT ライセンス
ソース: https://github.com/suren-atoyan/monaco-react

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 のプラグインメニューからプラグインを有効化してください。

評価

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.3.3

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

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

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

1.0.3

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

1.0.2

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

1.0.1

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

1.0.0

  • 初回リリース