フォーラムへの返信
-
投稿者投稿
-
フッター固定ナビゲーションの高さを測って、追加 CSS で bottom を固定指定しちゃうのはどうでしょうか。
こちらの挙動がどのようになるのかいまいち把握できないのですが、現状で
bottom:78px!important
を与えるとセーフエリアの有無で上スクロールの時と下スクロールの時とでボタンの位置が変わりました。1つ案としては、JSの制御を廃止して、ページトップボタンは基本固定配置。
フッター固定ナビゲーションがある場合は、重なり防止のためにページトップボタンの位置を高めに設定しておく。
フッター固定ナビゲーションを任意で高くする場合は、個人でCSSでボタンの位置を調整する。
というのもありかなと思っています。
またセーフエリア対応をmargin-bottomにすると管理しやすいのかなと。#page-top { bottom: 44px; margin-bottom: env(safe-area-inset-bottom); } // フッター固定ナビゲーションがある場合 #page-top { bottom: 64px; // 高めに設定 margin-bottom: env(safe-area-inset-bottom); }
いろんな環境を試したわけではないですが、こちらのコードでも安定しているように見えました。
♥ 0いいねをした人: 居ませんお返事ありがとうございます。
セーフエリアややこしいですね。
もう1つの問題点として、上スクロール時と下スクロール時ではボタンの位置が若干異なるので、何か両立できる良い方法があればいいのですが…。♥ 0いいねをした人: 居ません見様見真似で作ってみました。
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のみで良かったりしますかね?
もし可能であれば、ご教示いただければ幸いです。♥ 0いいねをした人: 居ませんありがとうございます。
こちらline-heightを調整された感じですかね?
チェックボックスがずれてしまうようです…!♥ 0いいねをした人: 居ませんありがとうございます。
追記:iPad(Safari、Chrome)でも同様の現象だったのでこちらも併せて共有しておきます。
お手数ですが、よろしくお願いいたします。
♥ 0いいねをした人: 居ませんお返事ありがとうございます。
「テキスト入力後わずかに下の項目が動く」→なぜか端末の画面収録を使うと再現できないので、別のカメラで撮りました。inputタグで動きます。
♥ 0いいねをした人: 居ませんお返事ありがとうございます。
「リンクを表示」というのは、基本的な使い方として「パネルがクリックできることを文字を出して明示するための機能」という捉え方ですね、承知いたしました。
ブロックスタイルの方も承知いたしました。
ご回答ありがとうございます。
♥ 0いいねをした人: 居ませんアップデートで確認できました!
他の部分まで実装いただきありがとうございます。// ハンバーガーメニューのmenuを削除 add_filter( 'snow_monkey_get_template_part_args_template-parts/header/hamburger-btn', function( $args ) { $args['vars']['_label'] = ''; return $args; } );
文字の削除はこのように処理しているのですが、同時にフックでbuttonに属性追加することってできますでしょうか?
それともJavaScriptが適切ですかね?♥ 0いいねをした人: 居ません申し訳ありません。確かに、menuの文字列は削除してました…!
アイコンのみのハンバーガーメーニューの実装は多いため、button
要素自体にラベルがあった方が都合は良いですが、.c-hamburger-btn__label
との兼ね合いがありますよね…。アコーディオンブロックの更新の件、承知いたしました。ありがとうございます!
♥ 0いいねをした人: 居ません -
投稿者投稿