UK br Changer

WordPressのブロックエディタ(Gutenberg)の見出しと段落ブロックを拡張し、PC・タブレット・スマートフォンの各デバイスで個別の改行(<br>)ごとに表示を制御できるプラグインです。

機能

• 改行ごとにデバイス別制御: 各<br>タグに個別にPC、タブレット、スマホでの表示/非表示を設定可能
• 対応ブロック:
  • 見出しブロック (core/heading)
  • 段落ブロック (core/paragraph)
• リッチテキストツールバー: ブロックエディタのツールバーから改行にクラスを簡単に適用
• 視覚的なフィードバック: エディタ内で設定された改行が分かりやすく表示

インストール方法

1. このプラグインを wp-content/plugins/ ディレクトリにアップロード
2. プラグインディレクトリで依存関係をインストール:

   npm install

3. JavaScriptをビルド:

   npm run build

4. WordPress管理画面でプラグインを有効化

開発

必要な環境

• Node.js 14.0 以上
• npm 6.0 以上

ビルドコマンド

# 開発モード（ウォッチモード）
npm start

# 本番ビルド
npm run build

# コードフォーマット
npm run format

# リント
npm run lint:js

使用方法

基本的な使い方

1. ブロックエディタで見出しまたは段落ブロックを選択
2. テキストを入力し、Shift + Enterで改行を挿入
3. ブロックを選択した状態で、右サイドバーの「改行の表示設定」パネルを開く
4. ブロック内のすべての改行が一覧表示されます
5. 各改行ごとに、非表示にしたいデバイスのボタンをクリック:
   • PC: デスクトップ表示で改行を非表示
   • タブレット: タブレット表示で改行を非表示
   • モバイル: モバイル表示で改行を非表示

使い方のポイント

• ボタンが青色(Primary)になっている場合、そのデバイスで改行が非表示になります
• ボタンが灰色(Secondary)の場合、そのデバイスで改行が表示されます
• 複数のデバイスを同時に選択することもできます
• 設定を解除する場合は、青色のボタンを再度クリックしてください

エディタでの確認方法

• 設定した改行には、エディタ内で視覚的なマーカーが表示されます:
  • ↵PC: PC非表示の改行
  • ↵Tab: タブレット非表示の改行
  • ↵SP: スマホ非表示の改行

実例

例えば、以下のようなテキストがある場合:

これは長いタイトルです<br class="uk-br-hide-pc">
モバイルでは改行されます

• PC表示: 「これは長いタイトルですモバイルでは改行されます」（1行）
• モバイル表示: 2行で表示

ブレイクポイント

• PC: 1025px 以上
• タブレット: 768px - 1024px
• モバイル: 767px 以下

ライセンス

GPL v2 or later

作者

Yuki Uota

リポジトリ

https://github.com/yukiuota/uk-br-changer

バージョン

1.0.0