- このトピックには16件の返信、2人の参加者があり、最後に
により1ヶ月、 4週前に更新されました。
-
ご報告ありがとうございます！
そのリンクがマウスの右クリックで画面遷移してしまいます。
現状、JavaScript の
mousedown/mouseupでブロックリンクを実装していて、これ左クリックにしか反応しないと思っていたら右クリックにも反応してしまうみたいで、その影響で現象が発生してしまっているようでした。左クリックの時だけ反応するように修正入れます！こちらは検証が足りていないのですが、手元のノートPC(Windows ThinkPad)ではタッチパッドのタップでクリックに反応せず、押し込みクリックをしないと画面遷移しませんでした。
Windows 機がなくて MacBook でやってみたのですが、MacBook だと押し込まなくてもタップでいけるみたいでした。機種によって
mousedown/mouseupはタップ扱いにならないとかあるのかも？touchstart/touchendにも対応させればもしかしたら良いかもですが、mousedown/mouseupとの共存がややこしいみたいなので、ひとまず調査してみて、できそうなら対応、すぐにはできなさそうなら今後のアップデートで対応を検討したいと思います。ということでアップデートをお待ちください m(. .)m
いいねをした人：aタグで外もしくは内側にラップできるようにもなったらうれしいな思います。
こちら具体的にはどういうシチュエーションでしょうか？例えばある要素の内側にある要素をリンクで囲みたい場合は、その内側の要素をデコレーターブロックでラップしてリンクを設定したら良いのかな？と思ったり。
PC のブラウザでリンク上にマウスホバーした時に左下にURLが表示さるといいなというところです。
うーこれは僕もできたら良いなと思っているのですが！もともとブロックリンクは
aの擬似要素を広げる形で実装していたのですが、それだとブロックを入れ子にした時のpositionの制御が難しい（特にサードパーティーのブロックだとpositionを変えてしまうとレイアウトが崩れる場合がある）ので、JavaScript での実装に変えた経緯があります。左下に URL がでるのはそのリンク要素にホバーしたときなのですが、JavaScript での実装だと実際にはリンク要素にはホバーしていないので URL がでないんですよね(TT)
「ホバーしたことにする」ことができれば表示されると思うのですが、調べた感じではちょっと方法を見つけきれませんでした…。
いいねをした人：ありがとうございます！
aタグでラップしたいのは
PC のブラウザでリンク上にマウスホバーした時に左下にURLが表示さるといいなというところです。
これを実現したいというのが一番大きいです。
全然詳しくないのですがaタグでラップすることで明示的にリンクになるのでアクセシビリティ的にもいいのかも？って勝手に思っています。間違っていたらすいません。
要素の中に別のリンクが指定されていた場合、そこだけ別のリンクになるのにも違和感を感じてしまいます。「ホバーしたことにする」
これしたいですよね。。
できないことがわかったので要素全体をリンクにするときはJavaScript で実装することが多いです(； ･`ω･´)
JavaScript の書き方にもよるのですが、不要なaタグを削除したり1つ目のリンクで上書きするということが多いです。ちょっと書き方雑なのですが、最近はこんな感じで
.linkboxというclass をつけることで実装しました。
aタグの中にaタグが入ったままになるので一般的なものにするなら削除する形に修正が必要だと思います。document.addEventListener(‘DOMContentLoaded', function () { const linkBoxes = document.querySelectorAll(‘.linkbox'); linkBoxes.forEach(linkBox => { // .linkbox 内のすべての <a> タグを取得 const aTags = linkBox.querySelectorAll(‘a'); if (aTags.length === 0) return; // <a> タグがなければスキップ // 最初の <a> タグの href を取得 const firstATag = aTags[0]; const href = firstATag.getAttribute(‘href'); if (!href) return; // href がなければスキップ // 2つ目以降の <a> タグの href を上書き for (let i = 1; i < aTags.length; i++) { aTags[i].setAttribute(‘href', href); } // <a> タグで .linkbox をラップ const wrapperATag = document.createElement(‘a'); wrapperATag.setAttribute(‘href', href); // 元の target 属性を保持 const target = firstATag.getAttribute(‘target'); if (target) { wrapperATag.setAttribute(‘target', target); } // ラップする <a> タグにスタイルを設定 wrapperATag.style.textDecoration = ‘none'; // アンダーラインを消す wrapperATag.style.color = ‘inherit'; // テキストの色を親要素から継承 // .linkbox の親要素にラップを追加 const parent = linkBox.parentNode; parent.replaceChild(wrapperATag, linkBox); wrapperATag.appendChild(linkBox); }); });わからんことばかりなので間違っていたらすいません(´；ω；｀)
いいねをした人：全然詳しくないのですがaタグでラップすることで明示的にリンクになるのでアクセシビリティ的にもいいのかも？って勝手に思っています。間違っていたらすいません。
一応キーボード操作や音声時は正しいリンクにフォーカスするようにはなっています。普通のマウス操作時は確かに出ないので不便なんですよね…。ちなみに Safari はデフォルトだと左下に URL はでないみたいでした。
色々試してみたのですがやはりこの方式では無理そうだったので、実装の種類を選べるような機能を追加するのはアリかもしれません。（現状 or
aでラップして中のaは除去か置換）要素の中に別のリンクが指定されていた場合、そこだけ別のリンクになるのにも違和感を感じてしまいます。
そうなんですよね…自分でコーディングするなら良いのですが、WordPress の場合はなんでも入れられるのが難しいです^^;
いいねをした人：ぐわー気づいていませんでした。ちょっと無理やりな感じがありますが、こういう感じに変更したらうまくいきそうでした。
unitone/inc/block.phpの中の/** * Add "Outer block link" support to core/query. */ add_filter( 'render_block_core/query', function ( $block_content, $block ) { // 省略 }, 10, 2 );を
add_filter( 'render_block_core/query', function ( $block_content, $block ) { $attrs = $block['attrs'] ?? array(); $class_name = $attrs['className'] ?? false; if ( ! $class_name || ( false === strpos( $class_name, 'is-style-block-link' ) ) ) { return $block_content; } $is_outer_link = apply_filters( 'unitone_is_outer_block_link', false, $block_content, $block ); if ( ! $is_outer_link ) { return $block_content; } $p = new \WP_HTML_Tag_Processor( $block_content ); $p->next_tag(); $p->set_attribute( 'data-unitone-layout', implode( ' ', array_filter( array( $p->get_attribute( 'data-unitone-layout' ), '-has-outer-block-link', ) ) ) ); return $p->get_updated_html(); }, 10, 2 ); add_filter( 'render_block_context', function( $context, $parsed_block, $parent_block ) { if ( 'core/post-template' === $parsed_block['blockName']) { if ( false !== strpos( $parent_block->parsed_block['attrs']['className'] ?? '', 'is-style-block-link' ) ) { $context['unitone'] = array_merge( $context['unitone'] ?? array(), array( 'post-block-link' => true ) ); } } return $context; }, 10, 3 ); add_filter( 'render_block_core/post-template', function( $block_content, $block, $wp_block ) { if ( $wp_block->context['unitone']['post-block-link'] ?? false ) { $block_content = str_replace( array( '<a ', '</a>' ), array( '<span ', '</span>' ), $block_content ); } return $block_content; }, 10, 3 );に変更。もうちょっと後で整理しようと思いますが、よかったら試してみてくださいm(_ _)m
いいねをした人：
- トピック「デコレーターブロックにリンクを設定した場合やクエリーループブロックでブロックリンクにした場合、右クリックで画面遷移してしまう」には新しい返信をつけることはできません。
