[hisanobu]

【お使いの Snow Monkey のバージョン】25.2.6
【お使いの Snow Monkey Blocks のバージョン】20.3.5
【お使いの Snow Monkey Editor のバージョン】9.3.2
【お使いのブラウザ】Safari
【当該サイトのURL】

### 実現したいこと

特定のブロックに任意のspan要素を配置したいが、「HTMLとして編集」するとブロックがうまく変換してくれなかったり、ブロックによってはコードが多いため編集しづらくなります。

選択してワンクリックで任意のspanタグを入れられるような方法はないでしょうか？

使い道としては、

• white-space: nowrapを当て、キリの良いところで折り返させる
• フォームの「任意」「必須」タグをCSSで管理する

などです。

### 発生している問題

「HTMLとして編集」をすると、「このブロックには、想定されていないか無効なコンテンツが含まれています。」となり、エラーがないか確認する作業が増えてしまいます。

 

### 試したこと

spanを入れたい箇所に一旦「文字色」などを当て、文字色のspanタグにCSSを当てる方法などでやってみましたが、詳細度を強くしないといけなかったり管理しづらいため、他の方法を模索しています。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

js を書く必要がありますが、WordPress のフォーマット API を使えば機能を追加できます。

書式ツールバー API

概要 書式 API (Format API) を使用すると開発者は、書式ツールバーにカスタムボタンを追加し、選…

ja.wordpress.org

♥ 0

いいねをした人: 居ません

[hisanobu]

ありがとうございます！

まだこの辺の前提知識がないため、いろいろと調べてみます。

♥ 1

いいねをした人:

[hisanobu]

見様見真似で作ってみました。
 

my-snow-monkey.phpに記述

// ブロックエディター用の JS 読み込み
add_action(
  'enqueue_block_editor_assets',
  function () {
    wp_enqueue_script(
      'my_editor',
      MY_SNOW_MONKEY_URL . '/js/editor.js',
      [
        'wp-element',
        'wp-rich-text',
        'wp-editor'
      ],
      filemtime( MY_SNOW_MONKEY_PATH . '/js/editor.js' ),
      true
    );
  }
);

jsに記述

(function (richText, element, editor) {
    richText.registerFormatType('my-editor/editor01', {
        title: '折り返しを制限',
        tagName: 'span',
        className: 'inline-block',
        edit: function (args) {
            return element.createElement(wp.blockEditor.RichTextToolbarButton, {
                icon: 'admin-customizer',
                title: '折り返しを制限',
                onClick: function () {
                    args.onChange(richText.toggleFormat(args.value, {
                        type: 'my-editor/editor01'
                    }));
                },
                isActive: args.isActive,
            });
        },
    }),
    richText.registerFormatType('my-editor/editor02', {
        title: 'カスタムspan',
        tagName: 'span',
        className: 'custom-span',
        edit: function (args) {
            return element.createElement(wp.blockEditor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'カスタムspan',
                onClick: function () {
                    args.onChange(richText.toggleFormat(args.value, {
                        type: 'my-editor/editor02'
                    }));
                },
                isActive: args.isActive,
            });
        },
    })
}(
    window.wp.richText,
    window.wp.element,
    window.wp.editor
));

一応動いてはいるようですが、ハンドブックを見ても前提が多く難しいので、他の記事を見ながら作成しました。
依存関係なども曖昧なのですが、wp-rich-textのみで良かったりしますかね？
もし可能であれば、ご教示いただければ幸いです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

依存関係なども曖昧なのですが、wp-rich-textのみで良かったりしますかね？

うーんどうなんでしょう、僕はいつも wp-scripts というライブラリを使っていて、これでビルドすると自動的に依存関係を解決してくれるので、依存関係についてあまり意識しないので詳しくなく…。

wp-scripts 入門

@wordpress/scripts パッケージは構成ファイルとスクリプトのセットで、一般に&nbs…

ja.wordpress.org

特にエラーがでていないのであれば問題ないのではないかと思います。

♥ 0

いいねをした人: 居ません

[hisanobu]

なるほど…ライブラリ便利ですね

もうちょっと調べて本番実装してみようと思います。
ご回答ありがとうございました！

♥ 1

いいねをした人:

[投稿者]

投稿