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

なぜフランス語!?