Visual Studio Code でブロックテーマを編集するための覚書

Visual Studio Code でブロックテーマを編集するための覚書-Visual Studio Code でブロックテーマを編集するための覚書-Visual Studio Code でブロックテーマを編集するための覚書


6.0で新しく導入されたフロントページ
テーマエディターでつくると当然front-pege.htmlになる
ではローカルフォルダでつくったfront-pege.htmlはどこへ行くか?

固定ページなんぞつくってしまうと/front-page-2/になった。
DBが絡んでいるので作成・操作順によっては違う結果かも(深追いしない)
とりあえずテーマエクスポート機能を使うと、front-pege.htmlが堂々と2つ入っていた。

テーマ作者がつくったものなら「デフォルト値」として.htmlが担保されるが
テーマを借りてる場合はたいていfront-pege.htmlなし
home.htmlもあとからつくったくらいだ。

よって適当な仮ファイル名でフロント要素を書き出していく。

とはいえ

テーマエディタはBODYタグに触れることはできない。
ページの種別によってBODYにつくClass名は決まっていて
フロントページ、インデックスページ、ホーム、サイトルートで表示される前提のあるグループは一律・下記で、フロントページの別扱いはなかった。(惜しい

<body class="home blog logged-in wp-embed-responsive">
<svg xmlns="....</svg>
<div class="wp-site-blocks">
<div class="wp-site-blocks">
	<header></header>
	<main></main>
	<footer></footer>
</div>

が基本要素。Class:wp-site-blocksの抱き込みから逃れることはできない。
ヘッダーやメインやフッターもタグ変え指定しなければDIVで書かれる。
恐ろしいのでそこは健気に一つずつ訂正していく。

<div class="wp-site-blocks"><header class="wp-block-template-part">

これがデフォルトかな? テーマによって差はあるか。TwentyTwenty-Two見ないと不明。

固定ページpage 個別ページ single などのBODY:Class名は想像つくので割愛。
まぁ作業してればきっと見ることになる。

heder高をheight: 100vh;にする

body.home {
	background: tomato;
	.banner {
		.has-parallax {
			height: 100vh;
		}
		background: cyan;
	}
}

解釈

BODYがhome-Classなbanner-Classの中にあるhas-parallaxは画面に対し身長100%
中に配置する要素によって借りてくるWPデフォルトClass名は変える。

この場合wp-block-coverでもよいけど、何となくオマケ要素値のほうがグローバル性消えて良いかと。(フロントのスタイルはそのとき一過性のものゆえの気分)→テイスト変えたいときに引きずらない。
* テスト中のためelement毎に派手なbackgroundつけてブロックサイズを可視化中

SVGはブロックパターンで対応した

ブロックテーマでいちばん辛いとこはSVGをインラインで書きづらいこと。
アクセントにちょろりと置きたいときなんぞは苦労する
重くしないためのSVGで外箱つくりまくっちゃ本末転倒だろし

大判テンプレート中にややこしいカスタムHTMLとか書くのは辛いので別置きにした。
テンプレートパーツも下手書きすると直す?直す?と言われそうな気がしたのでパターンで。

<!-- wp:pattern {"slug":"front-dd-svg"} /-->

サックリと表示され、付加してたアニメーションも再現された。

左側でサイトエディター、右側でVS Code、静的には出来上がっていたページを最新のぶっロックエディタさんに合わせてClass名など変えていく(Sassパート

テーマエディタは基本「コードエディター」で見ながら時々「ビジュアルエディター」にすると、書き方間違ってる場合(たいていは定義と実態に齟齬があるとき)
そのマトリューシカくんはそのマトリューシカさんに挿れないで!とか警告 & 補正下着なことしてくれるのが嬉しい。

見出しHeadingに画像入れようとしただけで却下!消去。と素早いので、こういうのもパターンに書き足し。


投稿日

カテゴリー:

投稿者:

タグ: