Snow Monkey + Snow Monkey Forms + Table of Contents Plus だけのシンプルなテスト環境をつくってみたのですが、問題は再現できませんでした。
もしかしたら他のプラグインやカスタマイズコードが影響しているのかもしれません。
var(–_padding-1)、計算式を分解していくと実態としては下記のようになっています。
((1 + var(--_half-leading)* 2) / 3 * 2) * 1rem
で、1 + var(--_half-leading)* 2 が line-height の値（デフォルトだと 1.8）になるんですけど、そこが 0.8 になっているということなので、var(--_half-leading) を 0.1 にするような CSS がどこかに書いてあるのじゃないかなぁと思いました。
実際のサイトを見てみて、CSS の上書きを追っていけば何かわかるかもしれません。
なるほどです。Snow Monkey Forms は REST API で画面の切り替えや送信を行うですが、REST API は他のプラグインの処理の影響（フックされた処理）を受けるので、Table of Contents Plus のほうで REST API を考慮せずに処理している部分がもしかしたらあるのかもしれません。
Snow Monkey Blocks にも目次ブロックがあるのでそれで良ければそれを使うか、Table of Contents Plus のほうにも報告して確認してみてもらうのが良いかもです。
ありがとうございます。無事にPCで非表示にできました。
とこでいくつかの同じようなサイトに設置しようとしているのですが、ひとつだけボタンのpaddingが異なるサイトがあってどこが違うのか気になっています。
デベロッパーツールでみると下記の同じスタイルがあたっているのですが、
p-footer-cta .c-btn {
--_font-size-level: -1;
font-size: var(--_font-size);
line-height: var(--_line-height);
padding: var(--_padding-1);
}
var(–_padding-1) の値を見ると
通常は
calc( calc( 1.8 / 3 * 2) * 1rem)
ですが、ひとつだけ
calc( calc( 0.8 / 3 * 2) * 1rem)
となるサイトがあります。
適当な値で上書きすればよいのでしょうが、もし何かお分かりになるようでしたら教えていただけますと助かります。
恐らくこれだと思うのですが、以下の内容から何かわかりますでしょうか？
[Fri Apr 12 14:45:38.916675 2024] [proxy_fcgi:error] [pid 3365248:tid 3365367] [client 126.38.61.216:56774] AH01071: Got error 'PHP message: PHP Warning: Attempt to read property "id" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 647
PHP message: PHP Warning: Attempt to read property "theme" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 651
PHP message: PHP Warning: Attempt to read property "content" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 658
PHP message: PHP Warning: Attempt to read property "content" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 662
PHP message: PHP Warning: Attempt to read property "slug" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 666
PHP message: PHP Warning: Attempt to read property "source" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 670
PHP message: PHP Warning: Attempt to read property "origin" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 674
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 678
PHP message: PHP Warning: Attempt to read property "description" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 682
PHP message: PHP Warning: Attempt to read property "title" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 690
PHP message: PHP Warning: Attempt to read property "wp_id" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 694
PHP message: PHP Warning: Attempt to read property "title" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 698
PHP message: PHP Warning: Attempt to read property "status" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 703
PHP message: PHP Warning: Attempt to read property "wp_id" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 707
PHP message: PHP Warning: Attempt to read property "has_theme_file" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 711
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 714
PHP message: PHP Warning: Attempt to read property "author" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 719
PHP message: PHP Warning: Attempt to read property "modified" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 727
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 769
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 769
PHP message: PHP Warning: Attempt to read property "author" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 829
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 769
PHP message: PHP Warning: Attempt to read property "type" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 769
PHP message: PHP Warning: Attempt to read property "id" on null in /home/xxxxx/sample.com/public_html/xxxxx/wp-includes/rest-api/endpoints/class-wp-rest-templates-controller.php on line 746', referer: https://xxxxx/wp-admin/post.php?post=2876&action=edit
はい、そういう意味でした。
設定としては無いので、CSS で消してしまうのが簡単だと思います。
@media (min-width:640px) {
.p-footer-cta {
display: none;
}
}
ただ、いただいたコードをカスタムHTMLに貼り付け表示を見つつ、
カスタム HTML ブロックではなくて、ブロックエディター自体をコードエディターに切り替えて（画面の一番右上の点が縦に3つ並んでいるところから切り替えられます）、貼り付け、ビジュアルエディターに戻すと、グリッドブロックとして認識されます！
のような流れであっていますでしょうか？
そこまではあっているのですが、スライダー（僕の例でいうと画像ブロック）にグリッドアイテムとしての位置設定をする必要があります。画像ブロックを選択して、設定パネルを「スタイル」タブに切り替えると設定 UI が表示されます。
カラム数を2にしているために左、右、左（2列目）…といった順で要素が並んでしまい、最初の要素のみ左に配置し、それ以外を右側に配置するといPC表示時の見た目を作ることもできませんでした。
カラム数は2なんですけど、"gridTemplateRows":"auto 1fr"なので、グリッドとしては
| (A) 高さは要素に合わせる（auto） |
(C) 高さは要素に合わせる（auto） |
| (B) 高さは余った分を使う（1fr） |
(D) 高さは余った分を使う（1fr） |
という感じになります。
で、画像が gridColumn":"1 / 2","gridRow":"1 / -1 なので、上の表でいうと、 A と B のエリアに配置されます。
|
画像
|
(C) 高さは要素に合わせる（auto） |
| (D) 高さは余った分を使う（1fr） |
＞キタジマさん
ご返信ありがとうございます！
それならば、スライダーを2個入れておいて、Snow Monkey Editor のウィンドウサイズによるブロックの表示・非表示機能で適宜表示状態を設定したほうが簡単な気はします。
こちらの初期コンテンツ作成時であればそのほうがシンプルにやりやすく、私も本来であればそうしたかったのですが…今後知識のあまりないクライアント側が更新作業をすることを考えると同じスライダーを「PC用」「スマホ用」で設置すると混乱したり設定忘れが起こりそうでして…なるべくクライアント側の作業は一工程でも減らしいため、裏側の処理や項目の工夫で四苦八苦しているところでした。。。
一応グリッドでブロックで試してみたので記録として残しておきます。
こちらサンプルコードありがとうございます！おかげさまで何となくの理解が進みました。
ただ、いただいたコードをカスタムHTMLに貼り付け表示を見つつ、自分で設定したブロックをHTMLに変換して見比べてやってみようかと思ったのですが…『グリッド』ブロックはHTMLに変換できないのでしょうか？うまく中身を見ることができませんでした…
なんとか読み取ろうとした感じですが、
・『グリッド』ブロックを用意
・『グリッド』ブロックにcssクラス「hogehoge」を付与
・ブロック設定のGRID-TEMPLATE-COLUMNSは『カラム数』で「2」に設定
・GRID-TEMPLATE-ROWSは『自由入力』で「auto 1fr」に設定
・『グリッド』内には「画像（要素1）」「見出し（要素2）」「段落とボタン（要素3／グループ化）」の3要素
・上記3要素をcssでモバイル時（メディアクエリ）で順序変更
のような流れであっていますでしょうか？
この仮定で、同じように自分で
・要素１：「スライダー」
・要素２：「見出し」「段落（サブテキスト）」の「グループ」化
・要素３：「ボックス」「表」「ボタン」などのグループ化
を用意し配置しようと思ったのですが、うまくいきませんでした。
またそもそも『グリッド』ブロック及びグリッドレイアウトの理解があまり進んでいなく、普通に3つの要素を用意してエディタ内で配置しようとすると、カラム数を2にしているために左、右、左（2列目）…といった順で要素が並んでしまい、最初の要素のみ左に配置し、それ以外を右側に配置するといPC表示時の見た目を作ることもできませんでした。
※繰り返しで恐縮ですが、PC時は左にスライダー、それ以外の要素は右にしたいのですがそれすらできなかったです…
モバイル時の順序を入れ替える以前に、まずどうやってエディタ上で、『グリッド』ブロックを使い上記のようなPCレイアウトを作るのか？でつまづいてしまいました。。。
ご面倒をおかけし大変恐縮ではございますが、
・どこまでブロックエディタ上で設定し、どこからHTML編集（HTMLに変換など必要？）がいるのか、
など手順のアドバイスをいただけますと幸いです…。
何卒よろしくお願いいたします。
「モバイルでは縦に並べる」にチェックが入っている場合、モバイルでは子要素の幅が flex-basis: 100% !important になるようでした。なのでそれを CSS で上書きして2列にしなければいけないみたいです。
@media (max-width: 781px) {
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 40% !important; /* 状況に合わせてちょうどよい幅に調整してください。 */
}
}
キタジマさん、Olein_jpさん、
ありがとうございます。
カスタムフィールドブロックは
Snow Monkey Blocks のカスタムフィールドブロックのことです。
ちょっとやってみて、またここにご報告します！
カスタムフィールドブロックを使って出力していますが、他のフィールドは問題なく出力されており、テーブルの料金表のみが「Array」と出力されてしまいます。
この「カスタムフィールドブロック」というのは Snow Monkey Blocks のカスタムフィールドブロックのことですかね？
だとした場合、Snow Monkey Blocks のカスタムフィールドブロックは値として文字列がくることを期待しているため、配列がくると正しく表示することができません。
Advanced Custom Fields の Table Field がどのような値を持っているかはわからないので具体的なコードは提示できませんが、カスタムフィールドブロックにはフックがあって値を操作して出力することができるので、そこで表の形に整形して出力すればいけるのかなとは思います。
// name が「あいうえお」なカスタムフィールドの値を書き換えて出力する
add_filter(
'snow_monkey_blocks_custom_field_value_あいうえお'
function( $value ) {
// ここで $value を書き換えて return する
return $value;
}
);
ただ、結構大変そうな気はするので、ACF のほうに表の形で出力する何らかの機能があるのであれば、それを使うのが良いと思います。
