クラシックブロックについて再度テストしてみる。この下にクラシックブロックを挿入。カスタムHTMLブロックについても試してみる。
クラシックブロック内の段落、この段落をdivで囲んでクラスを付与したいが、「HTMLとして編集」する以外に方法は無いのだろうか。
段落自体は、通常の段落ブロックと全く同じ。
HTML編集でdivタグで囲んでみた。特に問題なくできた。ブロックエディタによるスタイルの追加なども無い。ブロックテーマでも使えるのかも知れない。
wp-includes/blocks/ 以下にも、classic というフォルダーは存在しない。
しかしながら、ブロックテーマのサイトエディタでは、クラシックというブロックが無い、投稿や固定ページの編集ではクラシックがある。使うなということなのか。
続きを読む »»最近のサイトを見ていると、テキストや画像をフレックスやグリッドなどで単に横に並べるだけで無く、上下左右に自在に配置するようになっているものがかなりある。
これらの記事をよく見ると、本来の位置から、transform:translate()を使って動かしているものが多い、負のマージンやパディングなどで大きくずらしているものもある。
ワードプレスでこれをやろうとすると、クラシックブロックやカスタムHTMLでスタイルを書き込むしか無いが、これではビジュアルに編集することができない。
外部スタイルシートで代表的なパターンを数種類用意しておいて、グループにクラス名を付与する方法しか無いのかも知れない。
で、パターンが足りなければ、子テーマで、その都度追加していくようにするしか無い。
フルワイドなサイトが増えてきている。
現在のテーマは、コンテンツワイズを決めて、幅広、全幅ブロックは、マイナスマージンで広げているが、エディタ内でのワードプレス側の処理との違いが生じてきており、フロント側では、別のスタイル処理を行う結果になっている。
現在のテーマを修正するか、新しいテーマにすべきか。
続きを読む »»結局のところ、ブロックテーマを使わない限り、投稿パターンや、クエリーブロック、投稿テンプレートを適切に使うことは困難なようだ。インデックスページやカテゴリーページ自体で使うべきということらしい。
非ブロックテーマを使う限り、ショートコードでやることは、止む無しということかも知れない。
投稿内で使うのは、難しいが、固定ページ内では用途を限定すればそれなりに使えるかも知れない。
背景画像のテスト中です。
子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
ワイドウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
html :where(.wp-block)[data-align=wide]{max-width:1100px;}
html :where(.wp-block)[data-align=full]{max-width:none;}
になっている。
ワードウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
viewport-wide, viewport-wide-bg との調整が必要
本来なら、html幅の制限との調整も必要だが！
取り敢えず、両者ともviewport-wide と同じスタイルを当て、alignwideは、max1100となるよう、パディングを計算して調整。
画面幅が1100px以で計算するように修正。サイドバーがあっても広がるので、修正。
基本ブロック（wp-block）
幅広（alignwide）
全幅（alignfull)
上下のマージンの調整などが必要、段落同様に1emにするか。？
グループで囲み、グループを全幅にしてみた。内側のカラムズは、840px幅になっている。
が、フロント画面では一杯に広がる。合わせるなら、フロント用のスタイル追加が必要
viewport-wide-bgでは、背景の確認ができないので、こっちを使うほうがわかり易いかも。
背景画像の上下に、スペーサーを入れてある。スタイルで調整するより便利かも知れない。
カラムブロックで囲むと、画面幅が780px前後で一列になる。後出のカラムズクラスの付与なら、630px位で１列に。カラム幅とギャップの指定で、細かな調整が可能になる。グループは、インナーが余分だが。不思議なのは、クラスは外側に付与しているのに、画像はインナーの中で２列になっている。？
それで良いということらしい。ブレークで明示的に制御しない限り、中間のものも、最下位の要素までも、すべてブレークするらしい。
figureにflex:1 0 300pxなどを指定するとかない細かくコントロールできる。ベストか？
グローで広がるが、画面幅300以下で、画像がはみ出る。シュリンク１にすると、画像が小さいと、エディタ上で広がらない、
コンテンツらしい
改行で次の段落ができる。
シフト改行で本当の改行
スタイルを見るとグリッドになっている。
左にfigure, 右のブロックがalign-self:centerになっている。
フルワイドにも対応している。内部にショートコードを置くこともできる。オーバレイ用のspanと、画像用のimgタグ、インナーコンテナー用のdivタグが、絶対配置で含まれている。これだけで殆ど、用が足りている。
タイトルを入力
改行もできるが
カラーが黒
設定エリアでテキストを白に
外側のブロックがflexで、center center になっている。
カバーブロックの中にショートコードをいれることもできる。