「バグ報告と提案」カテゴリに投稿されていますが、おそらく WordPress 側の問題ではないと思われます。
AddQuicktag は最終更新が４年前。
ブロックエディタの台頭によって多くのユーザーが必要としなくなり、現時点では開発がストップしています。
このプラグインが不具合のもとになっている可能性があるかなと思います。
トピック投稿者
mofty
(@mofty7373)
コメントありがとうございます。プラグインなのですが、無効化しても解決しませんでした。
WordPress側の問題ではないと言われましても、プラグインを無効化しても解決しない場合はプラグイン無効化後も意図しない影響を解消できないWordPress側の問題な気がするのですが、違うのでしょうか？
AddQuickTag をインストールする前は問題は起きていなかったということでよろしかったですよね？
問題解決のためのチェックリスト をお読みになり、ここにある「トラブルシューティングの基本」を一度お試しください。
トピック投稿者
mofty
(@mofty7373)
はい、プラグインのインストール前では発生していません。
ブロックエディタで記事編集開始後の一瞬は表示されるのですが、エディタ内スタイル適用と同時にh3タグだけ消えてしまいます。
問題解決のためのチェックリスト の内容はご確認いただけましたか。
トピック投稿者
mofty
(@mofty7373)
はい。キャッシュクリアを試しましたが、何も変化はありませんでした。
また、既に公開中のためテーマを初期化することはできないので困っています。
一方で、WPの投稿画面表示状態でデバッグによるコード確認を実施したところ、画像のようにタグ内に余計な変換が入っていることが確認できました。
具体的には、本来
>「文字列」</h3>
と表示されるはずが
> :: before “文字列”</h3>
という形にコード変換されてしまっています。
beforeは疑似要素扱いであり、文字列はダブルクォートで囲われているため表示できなくなったものと考えられます。
テーマはCocoonで、スキンはinnocentなのですが、どうすれば解消できますでしょうか？
トピック投稿者
mofty
(@mofty7373)
画像はこちらです。公開済み画像しか使えないのですね。WPからアップロードしました。
画像の共有には「imgur (イミジャー)」が便利ですよー！
≫ https://setouchi-kotori.com/how-to-use-imgur/
―
いま公開中の環境をまるっと複製して、複製サイトで確認するのが早いかなと思いました。
Backup Migration というプラグインを使うと手っ取り早くサイトの複製ができます。ただしデータ量に制限があるなど条件が合わないとなりません。
バックアップを取り、有事の際に元に戻せる状態をご用意いただいた上で、お試しいただければと思います。
Cocoon のフォーラムを探してみましたが、同様の症状でのご相談はありませんでしたねぇ･･･。
こんにちは
横からごめんなさい。編集画面のソースに data-block-attribute-key=content という属性がありますが、bind を使っているのでしょうか？
使用しているということでなければ、右サイドバーの属性の縦3点メニューから、「すべてリセット」をしてみると 何か変化しますか？
トピック投稿者
mofty
(@mofty7373)
bindとは何でしょうか？聞いたことがありません・・・
「すべてリセット」という選択肢も見当たらず、特になにもできませんでした。
とにかく自動で疑似要素のbeforeが付与されてしまう謎の現象が解決したいのですが、
元々Cocoonのinnocentスキンを使っている時は編集エディタ内のデザインと公開された後外部から見た時のデザインが異なっていたため、これが競合していることも要因の一つと考えられます。
エディタ内だけ適用CSSが一部変わってしまう原因、どなたかわかりますでしょうか？
これがわかれば、エディタ内だけで適用される謎のCSSを除外すれば解決できる気がします
bind (The Block Bindings API) は、WordPress 6.5 以降の新しい機能です。どんな機能なのかというと、
ごく簡単には、見出しや段落などに入力した文字列を、カスタムフィールドの値に置き換える機能として知られています。なので、この機能が働いていて指定したカスタムフィールドが存在しない場合は、フロントエンド側に、編集画面で入力した文字列が表示された文字列が表示されない等、入力内容と実際の表示に食い違いが出ます。
提示していただいたソースを見ると
<h3 ......>::before "リップルの特徴”</h3>
となっていますが？これは疑似要素のbefore でしょうか？ 有効なCSSには私には見えません。
というか、なぜ、使用してもいない機能なのに、data-block-attribute-key=content という属性がついてしまっているのか「不思議だなぁ」と思った次第です。
CSSの問題として確信があるようなので、ほかの人の回答を待ってみるのがいいと思います。
トピック投稿者
mofty
(@mofty7373)
「data-wp-block-attribute-key」属性について
これは、問題が起きていないcocoonのWordPress上エディタ内でも同様に付与されていました。
よって、今回の問題とは無関係なようです。
その他、公開ソースで付与されていない属性がてんこ盛りで付与されるのが
WordPressのブロックエディタ用ソースコードということがわかりました。
よって、このプロパティの件は無関係として断定します。
トピック投稿者
mofty
(@mofty7373)
Cocoonのフォーラムにおいて同様の問題が見当たらなかった件について・・・
Cocoonのテーマ内で、さらに「innocent」というスキンを適用しているので、
もしかするとinnocentの問題かもしれません。
■現状、問題点は以下のようです
＜問題点１＞
・Cocoonのinnocentは、元々WPの編集画面と公開コードのH3の表示のされかたが違う
⇒もともとごちゃまぜになっていた疑惑があります。
⇒この、「WordPressの編集画面と公開コードで別デザインになってしまう」問題について、
WordPress固有仕組みだと思うので、どなたか有識者の方わかる方いますでしょうか？
＜問題点２＞
・今回、個別に私がCSSでH3タグをカスタマイズしました。
・H2もカスタマイズしたのですが、H2は問題なしです。
・H3は、元々疑似要素のbeforeが使われています
⇒問題点１に加えてこのようなカスタマイズをするとバランスが崩れて
WPエディタ上のタグ構成が壊れるようです。
⇒具体的には、<H3>::before<span>表示文字列</span></H3>となるはずのタグが
WPエディタ内で<H3>::before “表示文字列”</H3>の形に壊れてしまっています。
そもそもの問題は「問題点１」にあるので、「問題点２」は問題点１を顕在化させるための引き金にすぎないし、多少カスタマイズした程度で簡単に不具合が起こるようでは話にならないと思っています。
WPの編集画面のソースコードGeneratorのロジックのループ処理で何か意図しない動きになって壊れたのでしょうか・・・？
横からすみません。
私のブラウザ（Google Chrome）のスクリーンキャプチャです。おそらく、オレンジ色の部分の見出しのことだと思います。
なので、端末によって表示される / 表示されないがあるとすれば、キャッシュの可能性があると思います。
トピック投稿者
mofty
(@mofty7373)
今回の事象はワードプレスの投稿エディタ内の話となります。
公開HTMLにおいては何の不具合もないんです。。。
そのため、WordPressに問い合わせております。
一応私はプロエンジニアです。
