フォーラムへの返信
-
投稿者投稿
-
PHP だと厳しそうなので、js で置換することにしました。
unitone v16.0.0 ベータ2 に反映しているので、ここからダウンロードして試してみてください!
ぐわー気づいていませんでした。ちょっと無理やりな感じがありますが、こういう感じに変更したらうまくいきそうでした。
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
v15.9.0 で、下記の変更を入れました!
– 右クリックでは開かないように修正
– ブロックリンクを JavaScript 実装ではなくa
要素でラップする形に変更するフィルターフックunitone_is_outer_block_link
を追加詳細はアップデート情報をご確認ください。
アップデートしてみてください!
全然詳しくないのですがaタグでラップすることで明示的にリンクになるのでアクセシビリティ的にもいいのかも?って勝手に思っています。間違っていたらすいません。
一応キーボード操作や音声時は正しいリンクにフォーカスするようにはなっています。普通のマウス操作時は確かに出ないので不便なんですよね…。ちなみに Safari はデフォルトだと左下に URL はでないみたいでした。
色々試してみたのですがやはりこの方式では無理そうだったので、実装の種類を選べるような機能を追加するのはアリかもしれません。(現状 or
a
でラップして中のa
は除去か置換)要素の中に別のリンクが指定されていた場合、そこだけ別のリンクになるのにも違和感を感じてしまいます。
そうなんですよね…自分でコーディングするなら良いのですが、WordPress の場合はなんでも入れられるのが難しいです^^;
aタグで外もしくは内側にラップできるようにもなったらうれしいな思います。
こちら具体的にはどういうシチュエーションでしょうか?例えばある要素の内側にある要素をリンクで囲みたい場合は、その内側の要素をデコレーターブロックでラップしてリンクを設定したら良いのかな?と思ったり。
PC のブラウザでリンク上にマウスホバーした時に左下にURLが表示さるといいなというところです。
うーこれは僕もできたら良いなと思っているのですが!もともとブロックリンクは
a
の擬似要素を広げる形で実装していたのですが、それだとブロックを入れ子にした時のposition
の制御が難しい(特にサードパーティーのブロックだとposition
を変えてしまうとレイアウトが崩れる場合がある)ので、JavaScript での実装に変えた経緯があります。左下に URL がでるのはそのリンク要素にホバーしたときなのですが、JavaScript での実装だと実際にはリンク要素にはホバーしていないので URL がでないんですよね(TT)
「ホバーしたことにする」ことができれば表示されると思うのですが、調べた感じではちょっと方法を見つけきれませんでした…。
ご報告ありがとうございます!
そのリンクがマウスの右クリックで画面遷移してしまいます。
現状、JavaScript の
mousedown
/mouseup
でブロックリンクを実装していて、これ左クリックにしか反応しないと思っていたら右クリックにも反応してしまうみたいで、その影響で現象が発生してしまっているようでした。左クリックの時だけ反応するように修正入れます!こちらは検証が足りていないのですが、手元のノートPC(Windows ThinkPad)ではタッチパッドのタップでクリックに反応せず、押し込みクリックをしないと画面遷移しませんでした。
Windows 機がなくて MacBook でやってみたのですが、MacBook だと押し込まなくてもタップでいけるみたいでした。機種によって
mousedown
/mouseup
はタップ扱いにならないとかあるのかも?touchstart
/touchend
にも対応させればもしかしたら良いかもですが、mousedown
/mouseup
との共存がややこしいみたいなので、ひとまず調査してみて、できそうなら対応、すぐにはできなさそうなら今後のアップデートで対応を検討したいと思います。ということでアップデートをお待ちください m(. .)m
なるほど…。ボタンブロック(親)にも推奨幅が用意されていたのですね。
具体的には、ボタンブロック(親)自体が持っているわけではなくて、「「両端ブロックの子ブロック」に「推奨幅」が追加される」という挙動になります。
ブロックの組み合わせは調整が大変かと思いますが、今後ともよろしくお願いします!
ありがとうございます。こちらこそ、よろしくおねがいします!
♥ 0いいねをした人: いませんご報告ありがとうございます。
ボタンブロックの
min-width
、例えばユーザーが600px
と入力したときに、素直にmin-width: 600px
に設定しちゃうとモバイルサイズのときに画面を突き抜けてしまうので、親の大きさは超えることがないように内部的にmin-width: min(600px, 100%)
となるようにしています。両端ブロックは子要素を両端に寄せるために子要素を
flex-basis: fit-content
にして、子要素のサイズがなるべく中身にあわせて縮むようになっています。今回はその2つの CSS が干渉して発生している現象のようです。内部的にスマートに解決する方法がちょっと思いつかないので、とりあえずボタンブロック(親)の「推奨幅」を
fit-content
以外(例えばボタンブロック(子)に設定した最小幅と同じ値)を設定するとどうかなと思うのですが…。試してみてください!♥ 0いいねをした人: いませんありがとうございます。そのまま貼り付けたら投稿無しになったのですが、カテゴリー指定が含まれているようだったのでリセットしてみて、あと記事が1件指定になっていたので増やしてみたところ、先頭固定表示が反映されました。
もしカテゴリー指定をリセットしても反映されないのであれば、先頭固定表示したい記事に先頭固定表示が有効化されているか一度確認したほうが良いかもです。そこも問題なければ、クエリーをカスタマイズするようなこともされていないとのことなので、あとは実際に管理画面を確認しながらデバッグしないとわからないかもです…。
♥ 0いいねをした人: いません本サイトのトップページの「ブログ」のところでやってみたのですがら正しく反映されました。
※12月8日の記事が1件目に表示されているのが確認できると思います。なにかクエリーをカスタマイズするようなカードを追加したり、プラグインを使ったりしていないでしょうか?
また、そのクエリーループブロックをこちらの環境でも試してみたいので、エディターをテキストモードにして、そのクエリーループ部分のコードをここに貼り付けていただけると助かります!
♥ 0いいねをした人: いません現段階では、例えばコンテナーで囲って幅指定して、ボタンの幅を100%にするとかですかね。ボタンが1個のときしかダメですが…。
♥ 0いいねをした人: いません -
投稿者投稿