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

0
いいねをした人: 居ません
  • このトピックには5件の返信、2人の参加者があり、最後にhisanobuにより2ヶ月、 2週前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #133860
    hisanobu
    参加者
    28

    【お使いの 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
    いいねをした人: 居ません
    #133872
    キタジマ タカシ
    参加者
    2201

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

    0
    いいねをした人: 居ません
    #133915
    hisanobu
    参加者
    28

    ありがとうございます!

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

    1
    いいねをした人:
    #134005
    hisanobu
    参加者
    28

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

    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
    いいねをした人: 居ません
    #134037
    キタジマ タカシ
    参加者
    2201

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

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

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

    0
    いいねをした人: 居ません
    #134067
    hisanobu
    参加者
    28

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

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

    1
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。