Lazy Blocksを使ったオリジナルブロックの作り方 (初級編)

2020-04-27

Lazy Blocks関連の記事が年間ランキングで3位にランクイン
ということで、記念にLazy Blocksを使ってWordPressのオリジナルのブロックを作成する手順を記事にしてみたいと思いますのにゃー
人物のアイコン素材 その5
おー、類似のプラグインであるBlock Labは買収されて今後は進展が望めないようなのでLazy Blocks一択という感じですからね
Lazy Blocksユーザーが増えそうな予感
HTMLとプログラミングの知識が多少あれば簡単に作れるのにゃー
人物のアイコン素材 その5
では早速やってみましょう!

新しい区切りブロックを作ってみる

標準の区切りブロック
今回は比較的簡単なものを作ってみるのにゃー
WordPress標準で提供されている区切りブロックが気に食わないのでオリジナルで区切りブロックを作ってみるのにゃー
人物のアイコン素材 その5
WordPressにケンカを売ってるのかって話ですけども
後で削除しても影響なさそうなオリジナルブロックってことでご容赦くださいなのにゃー
人物のアイコン素材 その5
まずは準備、ということでLazy Blocksプラグインのインストールですね
既に導入方法は書いたのでそちらを参照してくれぃ!
人物のアイコン素材 その5
バージョンが古い時に書いたので画面が少し違いますけどね
今回の作成手順は執筆時点で最新の2.0.5バージョンをベースに書くのにゃー
Lazy Blocksの基本的な使い方の流れはこんな感じにゃ―

  • HTMLで元ネタを作成
  • 元ネタのHTMLをLazy Blocks向けに修正
  • Lazy Blocksに登録して使用する
人物のアイコン素材 その5
Lazy BlocksはPHPも使えますが今回はHandlebars(JavaScript)を基本として使います
プログラミングはほとんど意識しないで大丈夫です

区切り線の元ネタを作成する

人物のアイコン素材 その5
あとはどんな準備が必要でしょうか?
まずはHTMLで雛形をつくる方が楽なのにゃー
今回はdivタグでサクッと作ろうかなと言うことでベースのHTMLはこんな感じにゃー
<div class="new_hr" 
  style="width: 100%;
  height: 10px;
  margin: 10px auto;
  border-radius: 25px;
"></div>
人物のアイコン素材 その5
なるほど
でもこれだとなにも表示されないですね
表示はCSSでやるのにゃー
new_hr クラスに適当に色をつければいいと思うの
今回はめんどくさいのでCSSジェネレーターでコピペにゃー
<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>
人物のアイコン素材 その5
出た、手抜き!
まあ、練習ってことで😘
あとは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>
人物のアイコン素材 その5
なるほど
パラメータ値を変数に置き換える感じですね
そうなのにゃー
変数名は何でもいいけど、めんどくさいのでプロパティ名と同じにしたのにゃー
大かっこはHandlebarsのルールなのにゃー
普通は大かっこ2つで変数を囲っておけば問題ないのにゃー
人物のアイコン素材 その5
これで雛形は完成ですね
あとはLazy Blocksに登録をすればいいだけなのにゃー

Lazy Blocksにオリジナルブロックを登録する

Lazy Blocksプラグインをインストールすると左のメニューにLazy Blocksが追加されるから、そこから新規追加を選ぶのにゃー
人物のアイコン素材 その5
画面が出ましたね
まずは右側のBlock設定をしていけばいいの
slug以外は日本語も使えるにゃー
人物のアイコン素材 その5
Titleがブロック名、slugは内部IDのようなもの、iconやCategoryはお好みですね
設定追加前
設定追加後
次はControlsにゃー
変数の設定だと思えばいいのにゃー
プラスマークのアイコンをクリックすると新規追加できるので大かっこにした変数を追加するのにゃー
Nameは大かっこで囲った変数名と同じ、あとは値のタイプに合わせて設定にゃー
設定追加前
設定追加後
人物のアイコン素材 その5
Labelはエディターを使う時に表示されるもので日本語が使えます
Typeは数値の場合は、RangeかNumberにしておくといいでしょうか
どのTypeを選べばよいのかはここを見れば良い感じですね
最小限の設定はそんなところにゃー
Minimum Valueなどは適当に
Default Valueは設定しておくとブロック使うとき楽なのにゃー
人物のアイコン素材 その5
残りはCodeですが
これは雛形をコピペすればいいだけなので楽なのにゃー
Single output code for Frontend and Editor は普通はYesにしておけばいいと思うの
Output MethodはHTML+Handolebarsで
PHPはわからん
人物のアイコン素材 その5
今回はPHPを使わない手順ですね
というかPHPは使ったことがないのでわからないだけですが
WordPress開発者ならPHPの方がわかりやすいのだろうけどにゃー
人物のアイコン素材 その5
そういう方はこういうプラグインは必要ないのかも
Show block preview in editorは好みで
更新ボタンを押せば完成にゃー
エディター画面で新しいブロックが使えるようになっているはずにゃー
人物のアイコン素材 その5
おー
ブロックが出てきました
こんな感じの青い区切りが出てきましたよ
オリジナルブロックで作った区切り
あとはパラメータを変更したりと楽しんでくれぃ!
エクスポートした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": []
    }
]
人物のアイコン素材 その5
HTMLができれば意外と簡単に作れそうですね
そうなのにゃー
それがLazy Blocksのすごいところなのにゃー
失敗してもやり直しが効くし最高なのにゃー
人物のアイコン素材 その5
それはそうと
このブロックを使うとCSSも含まれているので、使う分だけ同じCSSが増えてしまいますね
CSSは切り出して別方法で読み込むとか対応が必要にゃー
人物のアイコン素材 その5
あと
これは区切り線というよりバーに近いですね
太くしないとグラディエーションがわからないし
太すぎるとダサいし
ブチのめされてーのかコノヤロー
練習用だと言っているだろうがッ
人物のアイコン素材 その5
まあ、何にせよ初級編は終了ということですね
そうなのにゃー
次回、中級編は少し別のコントロールを使って見るのにゃー
それでは
アデュー
人物のアイコン素材 その5
なぜフランス語!?