[Nmr]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】 最新：11.1.1
【お使いのブラウザ】Chrome（Mac）
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

お世話になります。
FontAwesomeでアイコンをつけると、テキストの選択ができなくなります。

【再現の手順】

１）
段落ブロックを追加し、文字を入力する。

２）
「HTMLとして編集」を選択して、FontAwesomeのソースコードを追加する。
例：<p><i class=”fas fa-check”></i>テキストテキスト</p>

３）
ビジュアル編集に戻す。

４）
この状態で、FontAwesome入りのテキストをマウスで選択しようとすると、
テキストがうまく選択できず、あとから文字を編集したり、文字色の変更ができません。

FontAwesomeのソースコードの追加は、この方法じゃない方が良いでしょうか？

ご確認いただけますと幸いです。
よろしくお願いいたします。

♥ 0

Who liked: No user

[キタジマ タカシ]

ブロックエディター（Gutenberg）には「ブロックエディターに登録されていないブロック（HTML）は編集できない」という仕様があります。FontAwesome 用のブロックがない場合は提示されたような挙動になります。

ちょっとどのような対応がベストなのか迷いますが、一番単純なのはショートコードをつくってしまうことかなと思います。

My Snow Monkey プラグインに下記のコードをコピペしてください。

add_shortcode(
	'fontawesome',
	function( $atts ) {
		$atts = shortcode_atts(
			[
				'icon' => false,
			],
			$atts
		);

		if ( empty( $atts['icon'] ) ) {
			return false;
		}

		return sprintf(
			'<i class="%1$s"></i>',
			esc_html( $atts['icon'] )
		);
	}
);

そして、エディター上で [fontawesome icon="fab fa-twitter"] のように入力すると実際のページにアイコンが表示されます。

♥ 1

Who liked: No user

[Nmr]

キタジマさま

早速の解決方法のご提示、ありがとうございました！
こちらの方法で試したところ、問題なくテキストの選択ができるようになりました。

解決しましたので、トピック閉じさせていただきます。
ありがとうございました。

♥ 1

Who liked: No user

[投稿者]

投稿