Lazy Blocksを使ったオリジナルブロックの作り方 (中級編)
ということで
前回の続き、中級編にゃー
WordPressのLazy Blocksプラグインでオリジナルブロックを作成する第2段ですね
今回は多少プログラミング寄りな内容にゃー
なにやら難しそうですね
といってもHandlebarsの標準文法の範囲内にゃー
なら良いのですが
その前に、初級編を見てない人はまず見ておいてほしいのにゃー
今回のお題
つーことで
今回のお題はコレにゃー
連なりのあるブロックですかね
内容をステップごとに順を追って説明するのに使えそうなブロックですね
前回よりは実用的なブロックを今回は作ってみるのにゃー
CSSでできる部分もあるけどなるべくセレクターとか擬似クラスとかそういう機能は使わないで作るのにゃー
ちなみにステップごとに四角は自由に増減できるようにするにゃー
やはり難易度が上がってますね
CSSの機能を使わないとなると、どうやったらいいのかさっぱりです
こういうのはたいてい
問題を細かく分けて解決していけばなんとかなるものなのにゃー
そうですか
では、この場合はどのように分けたら良いでしょうか？
図形で分けるにゃー
四角と三角のパーツでできているから
まずはそれをそれぞれ作るにゃー
あとは組み合わせの反復問題になるのにゃー
それはHandlebarsのプログラミングでなんとかするにゃー
なるほど
なんとなくわかりました
では
それぞれやっていくのにゃー
四角形を作る
最初は四角形のパーツを作るところですかね
そうするにゃー
これは前回と同様にCSSで四角を表現すればいいのにゃー
なるほど
前回と同じなら難しくないですね
ベースのHTMLはこんな感じにゃー
<li class="box">
<p>
テキストとか文章
</p>
</li>シンプルなHTMLですね
続いてCSSにゃー
烈火の如くCSSジェネレーターからコピペしつつ変形にゃー
.box {
display: block;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 50%;
margin: 10px auto;
}
.box > p {
margin: 10px;
text-align: center;
}参照先はかなり目的のカタチの近い気がしますが四角形の部分だけ使うのですか？
実は参照先のCSSを軽くいじればできるかな、と思っていたけどうまくいかなかった名残りなのにゃー
普通にCSSで書けばもっと楽なの
遠回りしましたね
これで四角は完成にゃー
下三角形を作る
次は矢印のようになっている三角形の部分ですね
下向きの三角にゃー
これも例のごとくdivタグで表現はCSSジェネレーターにおまかせにゃー
<div class="triangle_down"></div>.triangle_down {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
margin: 10px auto;
}三角形もシンプルですね
これはほぼコピペで済んだので楽だったのにゃー
変数の割当
あとは前回と同じ様に変数の割当てですね
そうなのにゃー
今回はパーツが2つあるから単純にプロパティ名を変数名にすると重複して使えないのにゃー
ただただ わかりやすいように命名すればいいと思うの
変更前
.box {
display: block;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 50%;
margin: 10px auto;
}
.box > p {
margin: 10px;
text-align: center;
}
.triangle_down {
width: 0;
height: 0;
border-style: solid;
border-width: 30px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
margin: 10px auto;
}変更後
.box_{{blockId}} {
display: block;
background: {{background}};
border: {{border-width}}px solid {{border-color}};
width: {{box-width}}%;
margin: {{margin}}px auto;
}
.box_{{blockId}} > p {
margin: 10px;
text-align: center;
}
.triangle_down_{{blockId}} {
width: 0;
height: 0;
border-style: solid;
border-width: 30px {{triangle-width}}px 0 {{triangle-width}}px;
border-color: {{background}} transparent transparent transparent;
margin: 10px auto;
}これも前回と同じパターンで値を変数名に置き換えですね
裏技を使っている部分があるのにゃー
クラス名にも変数名を付け足しているのにゃー
裏技とは中級編ぽいですね
何故でしょうか？
前回の区切りブロックはCSSに変数を使っていなかったのにゃー
だけど今回はCSSの値をいじるから別の名前にする必要があるのにゃー
もし同じクラス名だと個々のブロックで色やサイズを変えても全部のブロックで同じになっちゃうのにゃー
なるほど
blockId という変数名はブロックごとのIDの値が入っているにゃー
だからコレをクラス名に合体させれば同じクラス名にならないのにゃー
それでblockIdを追加しているのですね
別個のクラスで設定した値なら他のクラスに影響しないということですね
そうなのにゃー
ちなみにblockUniqueClassという変数もあるのにゃー
コレはブロックごとに割当てられるクラス名にゃー
こっちを組み合わせても問題ないと思うのにゃー
ビルトインヘルパーで反復させる
これでパーツは作り終えたのでいよいよパーツの組み合わせですね
そうにゃー
Handlebarsのプログラミングって言っていたけど具体的にはビルトインヘルパーを使うのにゃー
ちょっとよくわからないので具体的に見ていきたいです
しかたねーにゃー
まず四角と下三角を組み合わせるとこんな感じにゃー
<li class="box_{{blockId}}">
<p>
{{{inner}}}
</p>
</li>
<div class="triangle_down_{{blockId}}"></div>
多少無理やりな気がしますがこれはわかります
四角形と下三角形の組み合わせですね
innerはテキストが入る変数ですね
そうなのにゃー
で、この組み合わせを何回か繰り返せばいいのにゃー
だから繰り返す数を決める変数が必要にゃー
repeaterという変数を追加してビルトインヘルパーと組み合わせると繰り返しができるのにゃー
<ul style="list-style-type: none;">
{{#each repeater}}
<li class="box_{{blockId}}">
<p>
{{{inner}}}
</p>
</li>
<div class="triangle_down_{{blockId}}"></div>
{{/each}}
</ul>
おー
eachというのがビルトインヘルパーですか？
そうなのにゃー
これを使うと
{{#each repeater}}と{{/each}}の間のものをrepeater変数の値分、繰り返すのにゃー
なるほど
四角形、下三角形、四角形、下三角形、四角形、下三角形、・・・
でも、これだと最後に下三角形が残ってしまいますよ
そうなのにゃー
最後の下三角を無くすにはやっぱりビルトインヘルパーの出番なのにゃー
<ul style="list-style-type: none;">
{{#each repeater}}
<li class="box_{{blockId}}">
<p>
{{{inner}}}
</p>
</li>
{{#unless @last}}
<div class="triangle_down_{{blockId}}"></div>
{{/unless}}
{{/each}}
</ul>今度はunlessと@lastが増えましたね
そうなのにゃー
unlessもビルトインヘルパーなのにゃー
{{#unless @last}}の意味は、@lastに何も値がない場合は、{{/unless}}までのHTMLを表示するということにゃー
@lastは繰り返しが最後のターンの時は自動的に値が入るのにゃー
なるほど
@lastに値が入る最後のターンは下三角形が表示されなくなるということですね
Lazy Blocksにオリジナルブロックを登録する
ここまでくればあとは前回と同じ流れにゃー
おー
Blockの設定は各自におまかせにゃー
Controlの設定はこんな感じにゃー
今回はContentとInspectorに分けてみたのにゃー
Contentがエディターのブロック内に表示
Inspectorは右側のサイドバーに表示ですね
そうにゃー
repeaterコントロールを使うと反復できるのにゃー
さっきのrepeater変数はこのコントロールに割当ててるにゃー
表示されてないけどテキストはinner変数に割当てているにゃー
そういえばinnerは大かっこが3つで囲ってますね
今回のinnerはRich Textコントロールを使っているのにゃー
大かっこが3つの場合はHTMLエスケープしないのにゃー
Rich Textコントロールを使うと改行がbrタグになるから3つになっているのにゃー
なるほど
Codeは前回と同じくCSSとHTMLをコピペにゃー
これで完成ですね
ちなみにエディター画面だとこんな感じになるにゃー
エディターの見た目もわかりやすいですね
以上にゃー
上級編はJS FiltersとかJS Actionsの使い方とかだと思うけど
使わないでも特に困ってないし、アイデアも無いから今のところは未定にゃー
もっと複雑なことをする前に中級編レベルで大概はなんとかなりそうですしね
っていうかCSSの機能も使うこともできますし
っていうかHandlebarsよりCSSの機能使ったほうがこの例だと良さそうですし
相変わらず一言余計なのにゃー
例題作るのも大変なのにゃー
最後にJSONを貼っておくのにゃー
インポートしてお試しあれ！
では アディオス アミーゴ！
今度はスペイン語！？
[
{
"id": 449,
"title": "STEP01",
"icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M12 16.5l4-4h-3v-9h-2v9H8l4 4zm9-13h-6v1.99h6v14.03H3V5.49h6V3.5H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2z\" \/><\/svg>",
"keywords": [],
"slug": "lazyblock\/step01",
"description": "",
"category": "pt",
"category_label": "pt",
"supports": {
"customClassName": true,
"anchor": false,
"align": [
"wide",
"full"
],
"html": false,
"multiple": true,
"inserter": true
},
"ghostkit": {
"supports": {
"spacings": false,
"display": false,
"scrollReveal": false
}
},
"controls": {
"control_98aa634453": {
"type": "color",
"name": "background",
"default": "#88b7d5",
"label": "背景色",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": ""
},
"control_dc28f24256": {
"type": "color",
"name": "border-color",
"default": "#c2e1f5",
"label": "ボーダーカラー",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": ""
},
"control_1c6b224ea1": {
"type": "range",
"name": "box-width",
"default": "50",
"label": "Box 幅",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": "",
"min": "10",
"max": "100"
},
"control_7288224e0b": {
"type": "number",
"name": "border-width",
"default": "4",
"label": "ボーダー幅",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": "",
"min": "0"
},
"control_3428124efd": {
"type": "number",
"name": "triangle-width",
"default": "100",
"label": "下三角 幅",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": "",
"min": "10",
"step": "10"
},
"control_4b0ab0428e": {
"type": "number",
"name": "margin",
"default": "10",
"label": "マージン",
"help": "",
"child_of": "",
"placement": "inspector",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": "",
"min": "10",
"max": "100",
"step": "10"
},
"control_1ea9df4d3e": {
"type": "repeater",
"name": "repeater",
"default": "",
"label": "Box だよ",
"help": "",
"child_of": "",
"placement": "content",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": "",
"rows_min": "1",
"rows_max": "10",
"rows_collapsible": "true",
"rows_collapsed": "false",
"rows_label": "{{#}} 個め",
"rows_add_button_label": "+ Box の追加"
},
"control_d289d2444e": {
"type": "rich_text",
"name": "inner",
"default": "",
"label": "テキスト",
"help": "",
"child_of": "control_1ea9df4d3e",
"placement": "content",
"width": "100",
"hide_if_not_selected": "false",
"save_in_meta": "false",
"save_in_meta_name": "",
"required": "false",
"placeholder": "",
"characters_limit": ""
}
},
"code": {
"editor_html": "",
"editor_callback": "",
"editor_css": "",
"frontend_html": "<style>\n.box_{{blockId}} {\n display: block;\n\tbackground: {{background}};\n\tborder: {{border-width}}px solid {{border-color}};\n\twidth: {{box-width}}%;\n\tmargin: {{margin}}px auto;\n}\n.box_{{blockId}} > p {\n margin: 10px;\n text-align: center;\n}\n.triangle_down_{{blockId}} {\n\twidth: 0;\n\theight: 0;\n\tborder-style: solid;\n\tborder-width: 30px {{triangle-width}}px 0 {{triangle-width}}px;\n\tborder-color: {{background}} transparent transparent transparent;\n\tmargin: 10px auto;\n}\n<\/style>\n<ul style=\"list-style-type: none;\">\n {{#each repeater}}\n\t <li class=\"box_{{blockId}}\">\n\t <p>\n\t {{{inner}}}\n\t <\/p>\n\t <\/li>\n\t {{#unless @last}}\n\t <div class=\"triangle_down_{{blockId}}\"><\/div>\n\t {{\/unless}}\n {{\/each}}\n<\/ul>\n",
"frontend_callback": "",
"frontend_css": "",
"show_preview": "always",
"single_output": true,
"use_php": false
},
"condition": []
}
]