任意のspan要素をブロックに配置したい

♥ 0

Who liked: No user

このトピックには5件の返信、2人の参加者があり、最後にhisanobuにより11ヶ月、 3週前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2023年11月29日 9:59 PM #133860
hisanobu
参加者

♥ 30
【お使いの 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

Who liked: No user
2023年11月30日 6:51 AM #133872

キタジマタカシ
参加者

♥ 2421

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

書式ツールバー API

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

ja.wordpress.org

♥ 0

Who liked: No user

2023年11月30日 11:45 PM #133915

hisanobu
参加者

♥ 30

ありがとうございます！

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

♥ 1

Who liked:

2023年12月3日 10:27 AM #134005
hisanobu
参加者

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

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

Who liked: No user
2023年12月4日 9:25 AM #134037

キタジマタカシ
参加者

♥ 2421

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

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

wp-scripts 入門

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

ja.wordpress.org

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

♥ 0

Who liked: No user

2023年12月4日 8:28 PM #134067

hisanobu
参加者

♥ 30

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

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

♥ 1

Who liked:
投稿者

投稿