Lazy Blocksを使ったオリジナルブロックの作り方 (初級編)
Lazy Blocks関連の記事が年間ランキングで3位にランクイン
ということで、記念にLazy Blocksを使ってWordPressのオリジナルのブロックを作成する手順を記事にしてみたいと思いますのにゃー
https://possiblytrue.com/イベント/いつの間にか二周年-過去記...
おー、類似のプラグインであるBlock Labは買収されて今後は進展が望めないようなのでLazy Blocks一択という感じですからね
Lazy Blocksユーザーが増えそうな予感
HTMLとプログラミングの知識が多少あれば簡単に作れるのにゃー
では早速やってみましょう！
新しい区切りブロックを作ってみる
今回は比較的簡単なものを作ってみるのにゃー
WordPress標準で提供されている区切りブロックが気に食わないのでオリジナルで区切りブロックを作ってみるのにゃー
WordPressにケンカを売ってるのかって話ですけども
後で削除しても影響なさそうなオリジナルブロックってことでご容赦くださいなのにゃー
まずは準備、ということでLazy Blocksプラグインのインストールですね
既に導入方法は書いたのでそちらを参照してくれぃ！
https://ja.wordpress.org/plugins/lazy-blocks/
バージョンが古い時に書いたので画面が少し違いますけどね
今回の作成手順は執筆時点で最新の2.0.5バージョンをベースに書くのにゃー
Lazy Blocksの基本的な使い方の流れはこんな感じにゃ―
- HTMLで元ネタを作成
- 元ネタのHTMLをLazy Blocks向けに修正
- Lazy Blocksに登録して使用する
Lazy BlocksはPHPも使えますが今回はHandlebars(JavaScript)を基本として使います
プログラミングはほとんど意識しないで大丈夫です
区切り線の元ネタを作成する
あとはどんな準備が必要でしょうか？
まずはHTMLで雛形をつくる方が楽なのにゃー
今回はdivタグでサクッと作ろうかなと言うことでベースのHTMLはこんな感じにゃー
<div class="new_hr"
style="width: 100%;
height: 10px;
margin: 10px auto;
border-radius: 25px;
"></div>
なるほど
でもこれだとなにも表示されないですね
表示はCSSでやるのにゃー
new_hr クラスに適当に色をつければいいと思うの
今回はめんどくさいのでCSSジェネレーターでコピペにゃー
https://www.colorzilla.com/gradient-editor/<style>
.new_hr {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10 preview */
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}
</style>出た、手抜き！
まあ、練習ってことで😘
あとはdivタグの中で変化をさせたいパラメータをLazy Blocks向けに変更にゃー
こんな感じ
変更前
<div class="new_hr"
style="width: 100%;
height: 10px;
margin: 10px auto;
border-radius: 25px;
"></div>変更後
<div class="new_hr"
style="width:{{width}}%;
height:{{height}}px;
margin:10px auto;
border-radius:{{border-radius}}px;
"></div>
なるほど
パラメータ値を変数に置き換える感じですね
そうなのにゃー
変数名は何でもいいけど、めんどくさいのでプロパティ名と同じにしたのにゃー
大かっこはHandlebarsのルールなのにゃー
普通は大かっこ2つで変数を囲っておけば問題ないのにゃー
これで雛形は完成ですね
あとはLazy Blocksに登録をすればいいだけなのにゃー
Lazy Blocksにオリジナルブロックを登録する
Lazy Blocksプラグインをインストールすると左のメニューにLazy Blocksが追加されるから、そこから新規追加を選ぶのにゃー
画面が出ましたね
まずは右側のBlock設定をしていけばいいの
slug以外は日本語も使えるにゃー
Titleがブロック名、slugは内部IDのようなもの、iconやCategoryはお好みですね
次はControlsにゃー
変数の設定だと思えばいいのにゃー
プラスマークのアイコンをクリックすると新規追加できるので大かっこにした変数を追加するのにゃー
Nameは大かっこで囲った変数名と同じ、あとは値のタイプに合わせて設定にゃー
Labelはエディターを使う時に表示されるもので日本語が使えます
Typeは数値の場合は、RangeかNumberにしておくといいでしょうか
どのTypeを選べばよいのかはここを見れば良い感じですね
最小限の設定はそんなところにゃー
Minimum Valueなどは適当に
Default Valueは設定しておくとブロック使うとき楽なのにゃー
残りはCodeですが
これは雛形をコピペすればいいだけなので楽なのにゃー
Single output code for Frontend and Editor は普通はYesにしておけばいいと思うの
Output MethodはHTML＋Handolebarsで
PHPはわからん
今回はPHPを使わない手順ですね
というかPHPは使ったことがないのでわからないだけですが
WordPress開発者ならPHPの方がわかりやすいのだろうけどにゃー
そういう方はこういうプラグインは必要ないのかも
Show block preview in editorは好みで
更新ボタンを押せば完成にゃー
エディター画面で新しいブロックが使えるようになっているはずにゃー
おー
ブロックが出てきました
こんな感じの青い区切りが出てきましたよ
あとはパラメータを変更したりと楽しんでくれぃ！
エクスポートしたJSONファイルを貼っておくので手軽に試したい方はこれを使ってインポートしてみてくれぃ！
[
{
"id": 463,
"title": "new hr",
"icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M19 13H5v-2h14v2z\" \/><\/svg>",
"keywords": [],
"slug": "lazyblock\/new-hr",
"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_f1e83f4291": {
"type": "range",
"name": "width",
"default": "100",
"label": "width",
"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": "",
"min": "10",
"step": "10",
"max": ""
},
"control_9e3a88492c": {
"type": "range",
"name": "height",
"default": "20",
"label": "height",
"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": "",
"min": "1"
},
"control_1318714b83": {
"type": "number",
"name": "border-radius",
"default": "25",
"label": "border-radius",
"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": "",
"min": "0"
}
},
"code": {
"editor_html": "",
"editor_callback": "",
"editor_css": "",
"frontend_html": "<style>\n.new_hr {\n\/* Permalink - use to edit and share this gradient: https:\/\/colorzilla.com\/gradient-editor\/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 *\/\nbackground: #ebf1f6; \/* Old browsers *\/\nbackground: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); \/* FF3.6-15 *\/\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); \/* Chrome4-9,Safari4-5 *\/\nbackground: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); \/* Chrome10-25,Safari5.1-6 *\/\nbackground: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); \/* Opera 11.10-11.50 *\/\nbackground: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); \/* IE10 preview *\/\nbackground: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); \/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *\/\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); \/* IE6-9 *\/\n}\n<\/style>\n<div class=\"new_hr\" \n style=\"width:{{width}}%;\n height:{{height}}px;\n margin:10px auto;\n border-radius:{{border-radius}}px;\n\"><\/div>",
"frontend_callback": "",
"frontend_css": "",
"show_preview": "always",
"single_output": true,
"use_php": false
},
"condition": []
}
]HTMLができれば意外と簡単に作れそうですね
そうなのにゃー
それがLazy Blocksのすごいところなのにゃー
失敗してもやり直しが効くし最高なのにゃー
それはそうと
このブロックを使うとCSSも含まれているので、使う分だけ同じCSSが増えてしまいますね
CSSは切り出して別方法で読み込むとか対応が必要にゃー
あと
これは区切り線というよりバーに近いですね
太くしないとグラディエーションがわからないし
太すぎるとダサいし
ブチのめされてーのかコノヤロー
練習用だと言っているだろうがッ
まあ、何にせよ初級編は終了ということですね
そうなのにゃー
次回、中級編は少し別のコントロールを使って見るのにゃー
それでは
アデュー
なぜフランス語！？
