- このトピックには5件の返信、2人の参加者があり、最後に
により11ヶ月、 3週前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
-
投稿
-
【お使いの 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を当てる方法などでやってみましたが、詳細度を強くしないといけなかったり管理しづらいため、他の方法を模索しています。
いいねをした人: 居ません見様見真似で作ってみました。
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のみで良かったりしますかね？
もし可能であれば、ご教示いただければ幸いです。いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
- このトピックに返信するにはログインが必要です。