これは「URLからの挿入を許可する」ということで、「カスタムURLを使用して画像を挿入できるオプションが追加されます」という説明がされている。

どういう機能なのか、チョットわかりにくいので調べてみたら、以下のような３番目の設定項目が出ると書いてあるのだが、実際にはいつもの「アップロード」と「メディアライブラリ」の２つしか出てこない。

いくらやってみてもダメなので、多分使えないのではと思う。プロ版は使えるのかな？

この問題、使えないということが現在の結論になっている。

自分で作成してみる。
以下が、<hr>タグの基本、スタイルはCSSで行う。

<div class="polo_hr_block">
  <hr>
</div>

現在でも、区切り線としては使用することができるhrタグですが、HTML5から大きく仕様が変わっている。今まで使えていた、線の色を変える「color」や、線の長さを変える「width」などの属性は、HTML5以降廃止になっている「size」は使える？。
見た目の装飾を調整することができる属性が使えなくなったと言うこと。Lazy Blocksでも以前の属性のつもりで作成していくと動作しない？何故？と言うことになるので注意が必要。

まず、線の太さのControlを作成 – ラインの太さ

次に、二重線の下ラインのControlを作成 – 二重線の下ラインの太さ

次に、線の種類のControlを作成 – 線の種類

更に右サイド下にスクロール

次に、線の横幅のControlを作成 – 線の横幅（%）

次に、線のカラーのControlを作成 – Hr-Color

次に、線の配置のControlを作成 – 線の配置位置

更に右サイド下にスクロール

次に、二重線の上下空きのControlを作成 – 二重線の上下空きスペース

コードを入れる

CSSでレイアウトしている。ハンドルバーも全てCSS側に入れているのが分かると思う。
Single output code for Fronted and Editor をオンにすると設定中にもプレビューが見れるようになる。

<div class="polo_hr_block">
  <hr size="1">
</div>
<style>
.polo_hr_block hr {
  border: none;
  border-width:{{hr-size}}px 0px {{second-line}}px 0px; /*上下線の太さの指定*/
  border-style:{{line-type}};/*線の種類の指定*/
  border-color:{{hr-color}}; /*線の色の指定*/
  width: {{hr-width-size}}%;
  padding-bottom:{{line-spacing}}px;
}
</style>

この場合だと、borderのpx を1px以上にしないと double（二重線）が見えない。それとラインの端が揃っていないのに気づく、１本線の場合でも線の太さを大きくすると端が直角になっていない変形した端となっている。これはおかしい。

hrという線の周りにborderを指定するという考え方なので、全方向だとborderが重なり合って太くなってしまう。そのためプロパティを分けて、方向別に太さの指定ができるborder-widthを使用しています。もしくはborderの指定すべてを1方向にするという方法も有効です。

もう一つ上下のスペースを入れた。機能的にはうまく動作するが、これは上下のラインが重なった状態で表示されているので、どうしても1pxの線の太さが太く見える。やはり上下１本だけを表示するようにする必要がある。

スタイルを実線と二重線に分ける。上のコードの7行目 {{hr-size}}px 0px {{second-line}}px 0px; これで１行目と２行目のラインを設定している。

他にも同じ画像出力でも違うコードを使って表示する方法もある。

Image Block

コンテンツ側に表示、ブロックは「Lazy Blocks」のところに表示される。

Content Controlsで「Image Block」を作成。

LABEL：Image Block
NAME：image-block（自動でできる名前でOK）
TYPE：画像
PREVIEW SIZE：デフォルトの設定

コードはこれだけ。Handlebars（ハンドルバー）出力。

<img src="{{image-block.url}}" />

単純に画像を入れるだけなので、これだけ。Handlebars（ハンドルバー）による出力になる。
詳しくは Lazy Blocks サイトでImageメニューを見ること。

もしalt属性を付けるなら以下のように、これは画像の代替テキストを指定するための属性になる。
「control_name」のところに「NAME」のところで付けた名前が入ることになる。

<img src="{{control_name.url}}" alt="{{control_name.alt}}" />

ブロックを入れた状態

そのブロックにがぞを入れた状態。画像をクリックすると変更することもできる。

実際のページでのプレビュー

ここではハンドルバーを使ったコードになる。非常に簡単で分かりやすいコードだと思う。
コントロール名を使用する場合二重括弧だけでなく三重括弧を使用する必要がある場合もあるので注意。

最終的に、ここではブロック内の画像が無い時とある時のテキストの位置を動的に変化させるようにしている。ちょっとした動きだが if 文を使った構文の勉強になると思う。

タイトル名「Callout Box」の作成

今回はInspector Controls（インスペクターコントロール）を使用する。

Box Heading の作成

• LAVEL：Box Heading
• NAME：box-heading
• TYPE：テキスト
• CHARACTERS LIMIT：60（文字数制限）

Box Color の作成

• LAVEL：Box Color
• NAME：box-color
• TYPE：カラーピッカー
• COLOR PALETTE：YES
• OUTPUT FORMAT：Colorを選択

Box Image の作成

コールアウトボックスのバックに画像を使用する。

• LAVEL：Box Image
• NAME：box-image
• PREVIEW SIZE：中 (300 × 300)

Inner Contents の作成

１行のCSSを使用して複数の要素にスタイルを設定。内部コンテンツブロックを追加する。これは右側のインスペクターでなく、中央の内部コンテンツブロックを自動的に追加できるようにする。

何故かインナーブロックが赤の警告文が表示されている。移行する方法が不明なので後で、動作はする。

インナーブロックの警告文

The Inner Blocks control deprecated since v3.4.0, you should migrate to the <InnerBlocks /> component as this control will be removed in future plugin updates.
Inner Blocks コントロールは v3.4.0 以降非推奨です。このコントロールは将来のプラグイン更新で削除されるため、 コンポーネントに移行する必要があります。

• LAVEL：Inner Content
• NAME：inner-content
• TYPE：インナーブロック（警告は出たが動作する）

このテンプレートで３つのコントロール、見出し、内部コンテンツ、ボックスの上の縁の色を設定することができるようになる。

コードの作成

カラーを設定する{{box-color}}、見出しを選択する{{box-heading}}、内部コンテンツを入れる{{inner-content}}、この３つが動的に作成されることになる。

ここではまだ画像を入れるコードは作成されていない。後で行う。

<div class="lazy-callout-box" style="border-top: 3px solid {{box-color}};>
  <div class="box-content">
    <h2>{{box-heading}}</h2>
    <div class="inner-content">{{inner-content}}</div>
  </div>
</div>

CSSを追加設定する

外観->カスタマイズ->CSSの追加 からCSSを記述していく。

パディングを追加して、見出しの下の余白を少し小さくする。
これで、このボックスの基本的なコールアウトボックスの完成になる。

.lazy-callout-box {
	border: 1px solid #ddd; /*左右と下の枠*/
	padding-left: 30px;
	padding-right: 14px;
}
.lazy-callout-box h2 {
	margin-top: 20px;
	font-size: 28px
}

投稿ページにブロックを追加して確認する。

最初の表示：

まず右のインスペクターのBOX HEADINGにテキストを「これが私のボックスの見出しです」と入れてみる、そのテキストは左のコンテンツの下に表示されている。
左のコンテンツにダミーのテキストを入れる。次に右のインスペクターに画像またはビデオを入れる。
この時点でまだ画像を入れないでここまで状態を実際のプレビューで確認する。

このコードを出力すると、下のように<p>タグがそのまま出力されている。

<p>タグを消すために、4行目 {{inner-content}} を {{{inner-content}}} に変更。
ここだけは特別に三重括弧になることに注意が必要である。

<div class="lazy-callout-box" style="border-top: 3px solid {{box-color}};>
  <div class="box-content">
    <h2>{{box-heading}}</h2>
    <div class="inner-content">{{{inner-content}}}</div>
  </div>
</div>

出力してみると <p> タグが見えなくなった。これで良し。
ハンドルバーを使用してHTMLを表示するときは注意が必要になるということ。

完成したもの：何故かパティングがうまくいっていない。後で勉強。

更にもう少しレベルアップさせるため、ボックスのバックに画像を追加して、条件付きでいくつかの機能を作成する。
ハンドルバータグを使用すると、画像を指定しているかどうかに応じてボックスのスタイルを変えることができるようになる。つまり画像があるときと無い時のレイアウトを変化させることである。
これにより、画像を使用する場合と使用しない場合というように複数の個別のボックスを作成する必要がなくなる。

新しいコードの追加

コードを追加：

3行目：no-repeat center; background-size: 100px; で画像を連続表示しないで、センターに100pxの大きさで表示するということになる。

<div class="lazy-callout-box" 
  style="border-top: 3px solid {{box-color}}; background: 
  url('{{box-image.url}}') no-repeat center; background-size: 100px;">
  <div class="box-content">
    <h2>{{box-heading}}</h2>
    <div class="inner-content">{{{inner-content}}}</div>
  </div>
</div>

インスペクター側で画像を入れる、ここでは左のコンテンツには表示されない。

実際にプレビューしてみると、このように中央に100pxの大きさで表示される。

新しい機能の追加

ここでは１つ変更することがある。
背景のURLを１行に設定して、他のスタイルはスタイルシートに設定する。

コードを以下のように変更。３行目の no-repeat center; background-size: 100px; を削除した。

<div class="lazy-callout-box" 
  style="border-top: 3px solid {{box-color}}; 
  background: url('{{box-image.url}}')">
  <div class="box-content">
    <h2>{{box-heading}}</h2>
    <div class="inner-content">{{{inner-content}}}</div>
  </div>
</div>

このように表示されるはずである。ノーリピートと画像サイズを外したのでこのようになる。

CSSで元の状態になるように細かい設定を追加する。

.lazy-callout-box {
	border: 1px solid #ddd;
	padding: 1.5em
	background-size:80px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
}
.lazy-callout-box.haz-image {
	padding-left: 100px;
}
.lazy-callout-box h2 {
	margin-bottom: 5px;
	font-size: 28px
}

ここでCSSでbackground-size:80px;とbackground-repeat: no-repeat;を設定しているが、CSSが全く効いていない。要素をみると消し線が入っている。

調べてみると、要素表示で消し線が入っているCSSは、他のCSS規則に上書きされて無効になったスタイル設定を意味するということらしい。何かと被っていることになる。クラス名を変更してやってみたが効果無しなので「!important」を付けたらCSSが効いた。

それにしてもクラス名も変更して２つとない名前なので他とダブっているとは思えないのだが、摩訶不思議な現象？　取り敢えず「!important」で話を進めることにする。

.lazypolo-callout-box {
	 border: 1px solid #ddd;
	padding: 1.5em ;
	background-size: 80px !important;
	background-repeat: no-repeat !important;
	background-position: 10px 10px !important;
	
}
.lazypolo-callout-box h2 {
	margin-bottom: 10px;
	font-size: 28px;
}

また問題が発生！ 画像はバックに入るのだから、画像の上にテキストが被さって表示されるべきなのだが、そうはなっていない。上と下に分かれてしまっている。

９行目の margin-bottom を margin-top に変更したらうまくいった。

.lazypolo-callout-box {
	border: 1px solid #ddd;
	padding: 1.5em ;
	background-size: 80px !important;
	background-repeat: no-repeat !important;
	background-position: 10px 10px !important;
}
.lazypolo-callout-box h2 {
	margin-top: 10px;
	font-size: 28px;
}

結果がこれ：

これで話を進めることができる。
環境によってはこんなことをせずにスムースにいくのかもしれないが…..。

これからの話としては、左側はコンテンツ（テキストのこと）を押し退けて背景に余裕を持たせるため、7行目に左パティング padding-left: 100px; を追加する。

.lazypolo-callout-box {
	border: 1px solid #ddd;
	padding: 1.5em ;
	background-size: 80px !important;
	background-repeat: no-repeat !important;
	background-position: 10px 10px !important;
    padding-left: 100px;
}
.lazypolo-callout-box h2 {
	margin-top: 10px;
	font-size: 28px;
}

これが結果：

ここで問題になるのは、ボックスで画像を選択しないと、ここには何も画像がない空白のスペースができてしまうということ。

ハンドルバーを使用して、画像がある場合に条件付きでボックスにクラスを追加し、これにより画像が追加されたかどうかに応じてボックスのスタイルを変えることにする。

ハンドルバーの構文をLazyBlocksのサイトで見てみると、このようになっている。

そこでテンプレートに戻り、クラスを追加する。
ここでは、赤のところがクラスになる {{#if box-image}}has-image{{/if}}”、下のコードには１行目の後半に追加している。

<div class="lazypolo-callout-box {{#if box-image}}has-image{{/if}}"
  style="border-top: 3px solid {{box-color}}; background:url('{{box-image.url}}');">
  <div class="box-content">
    <h2>{{box-heading}}</h2>
    <div class="inner-content">{{{inner-content}}}</div>
  </div>
</div>

これでプレビューしてみる。テキストが右に100px移動しているのが確認された。しかし画像が出ていないことがわかる。

画像を出現させるためにCSSを変更する必要がある。padding-left: 100px;が.lazypolo-callout-boxの中の7行目にあったが、新しく.lazypolo-callout-box.has-imageを作成して、11行目に移動させる。

以下が最終のCSSになる。

.lazypolo-callout-box {
	border: 1px solid #ddd;
	padding: 1.5em ;
	background-size: 80px !important;
	background-repeat: no-repeat !important;
	background-position: 10px 10px !important;
	/*padding-left: 100px;はここにあった、これを削除する*/
}

.lazypolo-callout-box.has-image {
	padding-left: 100px; /*ここに移動させる、これで画像が表示されるようになる*/
}

.lazypolo-callout-box h2 {
	margin-top: 10px;
	font-size: 28px;
}

これでもう一度画像を追加させて表示してみる。画像がうまく表示された、画像を削除するとテキストは左に移動して画像は表示されなくなる。ボックス内が動的に変化することになる。

これで完了。

これがベースになっている。

<div style=”padding: 10px;
margin-bottom: 10px;
border: 1px dashed #333333;
border-radius: 5px;
background-color: #009999;
color: #ffffff;”>
    ここに文字を入力する。
</div>

左側：15項目を作成：
右側：SLUG：lazyblock/border-frame：タイトル名が自動で入る？。気に食わないなら自分で作成。
ICON：作成したブロックに近いイメージのアイコンを選択。ここでは未選択。
CATEGORY：Lazy Blocks
KEYWORDS：なし
DESCRIPTION：なし

囲み枠のタイプ

• LABEL：囲み枠のタイプ
• NAME：polo_frame_type
• TYPE：選択
• CHOICES：実線-solid、点線-dashed、二重線-double
• ALLOW NULL：No
• MULTIPLE：No
• OUTPUT FORMAT：Both(Array)
• DEFAULT VALUE：solid（上の実線のvalue=solid）、最初にこれが表示される。
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：100%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

Text

• LABEL：Text
• NAME：polo_text
• TYPE：テキスト
• PLACEHOLDER：ここに文字を入力
• CHARACTERS LIMIT：なし
• DEFAULT VALUE：なし
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：100%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• WPML TRANSLATION：
• SAVE IN META：No

Padding Top、Padding Bottom、Padding Left、Padding Right

• LABEL：Padding Top、Padding Bottom、Padding Left、Padding Right
• NAME：polo_padding_top、polo_padding_bottom、polo_padding_left、polo_padding_right
• TYPE：範囲
• MINIMUM VALUE：0
• MAXIMUM VALUE：20
• STEP SIZE：1
• PLACEHOLDER：なし
• DEFAULT VALUE：10
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

Margin Top、Margin Bottom、Margin Left、Margin Right

• LABEL：Margin_Top、Margin_Bottom、Margin_Left、Margin_Right
• NAME：polo_margin_top、polo_margin_bottom、polo_margin_left、polo_margin_right
• TYPE：範囲
• MINIMUM VALUE：0
• MAXIMUM VALUE：20
• STEP SIZE：1
• DEFAULT VALUE：0
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

線の太さ

• LABEL：線の太さ
• NAME：polo_line_weight
• TYPE：数値
• MINIMUM VALUE：1
• MAXIMUM VALUE：5
• STEP SIZE：1
• PLACEHOLDER：No
• DEFAULT VALUE：3
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

線の色

• LABEL：線の色
• NAME：polo_line_color
• TYPE：カラーピッカー
• ALONGSIDE TEXT：なし
• ALPHA CHANNEL：No
• COLOR PALETTE：Yes
• OUTPUT FORMAT：Color
• DEFAULT VALUE： #66cdaa
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

テキストの色

• LABEL：テキストの色
• NAME：polo_text_color
• TYPE：カラーピッカー
• ALONGSIDE TEXT：なし
• ALPHA CHANNEL：No
• COLOR PALETTE：Yes
• OUTPUT FORMAT：Color
• DEFAULT VALUE： black
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

背景の色

• LABEL：背景の色
• NAME：polo_background_color
• TYPE：カラーピッカー
• ALONGSIDE TEXT：なし
• ALPHA CHANNEL：No
• COLOR PALETTE：Yes
• OUTPUT FORMAT：Color
• DEFAULT VALUE： white
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

角の丸み

• LABEL：角の丸み
• NAME：polo_corner_radius
• TYPE：数値
• MINIMUM VALUE：0
• MAXIMUM VALUE：20
• STEP SIZE：2
• PLACEHOLDER：No
• DEFAULT VALUE：0
• HELP TEXT：なし
• PLACEMENT：Content
• WDTH：25%
• REQUIRED：No
• HIDE IF BLOCK IS NOT SELECTED：No
• SAVE IN META：No

Code

OUTPUT METHOD：HTML+Handlebars
Single output code for Frontend and Editor：オン
CODE OUTPUT IN EDITOR：Display Always
Preview：現在の設定がプレビューされている。

<div style="padding:{{polo_padding_top}}px {{polo_padding_right}}px {{polo_padding_bottom}}px {{polo_padding_left}}px; 
            margin: {{polo_margin_top}}px {{polo_margin_right}}px {{polo_margin_bottom}}px {{polo_margin_left}}px; 
            border:{{polo_line_weight}}px {{polo_frame_type.value}} {{polo_line_color}};
            border-radius:{{polo_corner_radius}}px;
            background-color: {{polo_background_color}};
            color:{{polo_text_color}};">

  {{polo_text}}

</div>

タイトルの付け方とかが、かなりいい加減に付けているので適当に変更してください。
以下のサイトを参考にしたもので、それに準じて作成しています。

参考Youtube：https://www.youtube.com/watch?v=csKDTcS9QAs

リピーターフィールドから始めて、以下のような製品グリッドを構築する。
その後、レイジーブロックフィールドで基本的な数学演算を実行する方法など、高度なハンドルバーについて説明します。
最後に構築したLazy BlocksのカスタムCSSをキューに入れる最良の方法を紹介。

まず左上のタイトルを入れる。
タイプは「繰り返し」を選択、ROW LAVEL（行ラベル）は products{{#}} ラベルを付ける。

• LAVEL：Featured Products
• NAME：featured-products
• TYPE：繰り返し
• ROW LAVEL（行ラベル）：products{{#}}（これが出力になる）
• ADD BUTTON LAVEL（ボタンラベルの追加）：Add Product（これが各新しい行のラベルになる）
• MINIMUM ROWS（最小行数）：3
• MAXIMUM ROWS（最大行数）：12

これで保存。

繰り返しの動くは基本的にラッパーなので、この中には小要素があり、作成した「繰り返し」の回数だけループすることになる。

小要素を作成するには「Show Child Controls」をクリックして追加する。

作成するものは画像、テキスト、サブテキスト、リンクが必要になるので４つのブロックを追加することになる。

Products Nameの作成

• LAVEL：Product Name
• NAME：product-name
• TYPE：テキスト
• PLAEHOLDER：Product Name
• CHARACTERS LIMIT（文字数制限）：30

Products Blurbの作成

• LABEL：Product Blurb
• NAME：product-blurb
• TYPE：テキスト
• PLACEHOLDER：なぜ素晴らしいのか
• CHARACTERS LIMIT：45

Product Imageの作成

• LAVEL：Product Image
• NAME：product-image
• TYPE：画像
• WIDTH：50％を選択

Product Linkの作成

• LABEL：Product Link
• NAME：product-link
• TYPE：URL

これで必要なことは全て完了。

Lazy Blocksのサイトでハンドルバーを確認すると、ハンドルバーを使用してリピーターフィールドをループする方法が説明されている。

コードを記述する

実際の HTML+Handlebars コード

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{featured-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

Lazy Blocksに記述する元になるhtmlコード（これを元に上のハンドルバー構文に変換している）

<div class="featured-product-grid">
    <a class="product" href="https//:polo-web.com">
      <img class="product-image" src="画像パス" alt="画像alt">
      <div class="product-text">
        <p class="product-name">名前</p>
        <p class="product-description">product-blurb</p>
      </div>
    </a>
</div>

1行目：外側のコンテナを用意し、その中にそれぞれを配置する。
２行目に {{#each 各ループを配置、記述していく、二重括弧が正しく記述されていることを確認。最後に{{/each}}でループを終了するタグを入れる。
3行目移行は繰り返しの各ループに出力できるテンプレートになる。

ブロックを投稿ページに入れると以下のように表示される。

products1をクリックすると以下のように入力蘭が表示される。

それぞれ４つ分、入力してみる。

URLリンクは右側のチェックを入れること、これでリンクの確定になる。

ページでプレビューしてみる。

最初の部分だけですが４つとも問題なく作成されている。

CSSの作成

後はCSSを記述してレイアウトを整える。

ここにYoutube説明：https://www.youtube.com/watch?v=Klrsfp3ZZxI これは便利ではあるが有料なのでやめておく。使い勝手は非常にいいが、勉強のためには自分でCSSを記述しよう。

/* 各ブロックの横並び */
.featured-product-grid {
	display: flex; /*横並び*/
	flex-wrap:wrap;/*子要素を折り返す*/
}
/* ブロックの中の横並び */
.featured-product-grid a {
	display: flex; /*横並び*/
  flex-wrap:wrap;
}
.featured-product-grid .product-image {
  width: 60px; /*画像サイズ指定*/
	height:60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.featured-product-grid .product-text {
	width: 160px; /*1つの枠の横幅*/
  margin: 0 0 0 20px;
  padding: 0;
}
.featured-product-grid .product-name {
  font-size: 1.5em;
	font-weight:bold;
	margin: 0 0 0 0px;
  padding: 0;
}
.featured-product-grid .product-description {
  font-size: 1em;
	margin: 0 0 0 0px;
  padding: 0;
}

投稿ページでのプレビュー。

ハンドルバーのクールな秘密の機能をもう２つ紹介します。
Lazy Blocksで使用できます。

以下のコードで各ループアイテムにループカウンターを追加したいとします。特定のアイテムを異なるスタイルにしたり、色を交互にしたりしたい場合。ループインデックス機能があるので、このインデックスを実行すると、ループないでその番号にアクセスでき、積を言うことができます。
つまり、追加作成していくアイテム毎に別のスタイルを適用できるようにすると言うことかな？

3行目、product-{{@index}}が追加した文になる。

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product product-{{@index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

この状態で更新してプレビューでコードの要素を確認すると0、1、2、3の積が出力されているのがわかる。

0が最初に入るのは、インデクスのスタートが0からだから。実際にはLazy Blocksの秘密の数学演算子を使用する。それがどのように機能するか見てみましょう。

これも、Lazy Blocksのサイトでmath（数学）のハンドルバーを使って、加算、乗算、除算、パーセンテージも実行できる。
ループインデックスに１を加える。これで希望どおりの結果が出るはず。

3行目 {{math 1 ‘+’ @index}} と変更する。

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product product-{{math 1 '+' @index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

０からでなく、１からスタートできるようになる。これで混乱することなく１からスタートできると言うわけ。

ここでもう一つのトリックを紹介。繰り返しは内のアイテムの数を取得したい場合は、下部で６までカウントできるが、それではダメです。親要素に特別なクラスを配置したい場合、例えば、４つの要素を配置し、小要素が４つある場合は２×２のグリッドにしたい場合と、小要素が３×２のグリッドにしたい場合がある。

長さのプロパティを使って、{{featured-products.length}}-products と追加します。
保存してページを開いて、要素を見てみると以下のように５つの商品がカウントされているのがわかる。これをクラスとして出力する。これを使って、２列のグリッドでなく３列のグリッドをレイアウトする。
もちろん、セレクターを使用することもできるし、ブロックのコントロールを使用して、基本的に２列のグリッドとして設定することもできる。
または３列のグリッドなど、ワークフローに合わせて設定してください。

ここまでの説明でインデックスを追加できることはわかったが実際にどう使うかがわからない。

話が次に進んだ。

カスタムブロックのCSSスタイルを読むことができます。これまではWordPressのカスタマイザーの追加のCSS部分を使用してきたが、明らかな欠点があり、このCSSがすべてのページに読み込まれることです。サイトにカスタムブロックを組み込むのは、おそらくサイト全体の20〜10%程度でしょう。
また、他の追加CSSとパッケージ化されているため、見つけ安くするため別々にしておくと良いでしょう。カスタムブロックのCSSを維持するには、２つの良い解決策があります。

１つのオプションは、インラインスタイルを使用して、HTMLを使用してページに出力されるブロックテンプレートにCSSを直接埋め込むことです。
もう一つの選択肢は、ページにLazy Blocksが配置されるたびに、Lazy Blocks用の別のスタイルシートを条件付きでロードすること。これはWordPressの組み込みのhasブロック機能を使用して実行できます。

まずは最初の方法が一番簡単です。では、これがどのように機能するかお見せしましょう。

HTMLタンプレートにスタイルタグをここに配置するだけ、以下は１番目のアイテムを青色でバックを付け、角丸にしている。さらにマウスを持っていくとホバー動作をるようにスタイルシートで設定追加した分。

CSSが効いていることがわかります。

このように、特にブロックを１ページ内で１回だけ使用する場合や、１〜２回しか使用しない場合は、これで問題ありまえせん。それほど大きくはなく、コードを使用していないサイトの他のページに読み込まれるコードを節約できるのでこれは多くの人にとってコードを追加する良い解決策だと思います。

最終的なコード：

<div class="featured-product-grid {{featured-products.length}}-products">
  {{#each featured-products}}
    <a class="product product-{{math 1 '+' @index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>
<style>
  .featured-product-grid .product:first-of-type {
    background-color: rgb(105, 200, 255); !important;
    border-radius: 5px;
  }
  .featured-product-grid .product:hover {
    transform: translateY(2px);
  }
  .featured-product-grid .product {
    transition: all .25s;
  }
</style>

以上で完了。

下の画像で薄いグレーのラインが最初のブロックを入れた時に表示されるライン（プレビュー）になる。

hrタグ、HTML5から大きく仕様が変わっている。
今まで使えていた、線の色「color」や、線の長さを「width」などの属性は、HTML5以降廃止。
従って結論としてCSSで作成するしかない。

最初にhtmlのhrタグをこの中に入れることから開始する。ここではCSSを使っているので、hrタグに対してCSSでリイアウトを作成していく。

これがまず最初の作業になる。その後、PHPを作成していく手順になる。

Lazy Blocksでの作業

左側：５つの項目を作成：
右側：SLUG：lazyblock/lesshrgreater：自分では何でこれか不明。なんでも良いので自分で作成してもよいと思う。
ICON：作成したブロックに近いイメージのアイコンを選択。
CATEGORY：Lazy Blocks
KEYWORDS：なし
DESCRIPTION：なし

線の種類

• LABEL：線の種類
• NAME：hr_select
• TYPE：選択
• CHOICES：実線-solid、立体線-3D-line、点線-dashed、二重線-double
• ALLOW NULL：No
• MULTIPLE：No
• OUTPUT FORMAT：Value
• DEFAULT VALUE：solid（上の実線のvalue=solid）、最初にこれが表示される。
• HELP TEXT：なし
• PLACEMENT：Inspector
• GROUP：Default
• REQUIRED：No
• SAVE IN META

線の太さ

• LABEL：線の肉太さ
• NAME：polo_thickness
• TYPE：数値
• MINIMUM VALUE：1
• MAXIMUM VALUE：10
• STEP SIZE：1
• PLACEHOLDER：なし
• DEFAULT VALUE：1
• HELP TEXT：なし
• PLACEMENT：Inspector
• GROUP：Default
• REQUIRED：No
• SAVE IN META：No

線の横幅

• LABEL：線の横幅
• NAME：polo_width
• TYPE：数値
• MINIMUM VALUE：10
• MAXIMUM VALUE：100
• STEP SIZE：10
• PLACEHOLDER：なし
• DEFAULT VALUE：100
• HELP TEXT：なし
• PLACEMENT：Inspector
• GROUP：Default
• REQUIRED：No
• SAVE IN META：No

線のカラー

• LABEL：カラー
• NAME：polo_color
• TYPE：カラーピッカー
• ALONGSIDE TEXT：なし
• ALPHA CHANNEL：No
• COLOR PALETTE：Yes
• OUTPUT FORMAT：Value
• DEFAULT VALUE：#E5E5E5
• HELP TEXT：なし
• PLACEMENT：Inspector
• GROUP：Default
• REQUIRED：No
• SAVE IN META：No

線の間隔（二重線）

• LABEL：線の間隔
• NAME：polo_line-spacing
• TYPE：数値
• MINIMUM VALUE：2
• MAXIMUM VALUE：10
• STEP SIZE：1
• PLACEHOLDER：なし
• DEFAULT VALUE：3
• HELP TEXT：この間隔は二重線を選択した時のみ有効になる。
• PLACEMENT：Inspector
• GROUP：Default
• REQUIRED：No
• SAVE IN META：No

Code

OUTPUT METHOD：PHP
Single output code for Frontend and Editor：オン
CODE OUTPUT IN EDITOR：Display Always
Preview：現在の設定がプレビューされている。

<?php

$polo_solid_value = 'solid';
$polo_3Dline_value = '3D-line';
$polo_dashed_value = 'dashed';

if ($polo_solid_value == $attributes['hr_select']) {
    echo "<hr class='polo_solid' noshade>";
} elseif ($polo_3Dline_value == $attributes['hr_select']) {
    echo "<hr class='polo_linear-gradient'>";
} elseif ($polo_dashed_value == $attributes['hr_select']) {
    echo "<hr class='polo_dashed' noshade>";
} else {
    echo "<hr class='polo_double'>";
}

?>

<style>
    hr.polo_solid {
        border: none;
        border-top: <?php echo esc_html($attributes['polo_thickness']) ?>
            px solid;
        /*肉太さ*/
        border-color: <?php echo esc_html($attributes['polo_color']) ?>;
        /* borderだけだと上下の線がダブって表示されるので肉太くなる */
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        /* 画面幅の50%に横線を調整 */
    }

    hr.polo_linear-gradient {
        border: none;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        height: <?php echo esc_html($attributes['polo_thickness']) ?>px;
        background: linear-gradient(0.25turn, white, <?php echo esc_html($attributes['polo_color']) ?>, white);
    }

    hr.polo_dashed {
        border: none;
        border-top: dashed
            <?php echo esc_html($attributes['polo_thickness']) ?>px
            <?php echo esc_html($attributes['polo_color']) ?>;
        background-color: transparent;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
    }

    /*二重線はdoubleでは間隔を調整できないのでborder-topになっている*/
    hr.polo_double {
        border: none;
        width: <?php echo esc_html($attributes['polo_width']) ?>%;
        border-top: <?php echo esc_html($attributes['polo_thickness']) ?>px solid
                <?php echo esc_html($attributes['polo_color']) ?>
        ;
        border-bottom: <?php echo esc_html($attributes['polo_thickness']) ?>px solid
                       <?php echo esc_html($attributes['polo_color']) ?>;
        height: <?php echo esc_html($attributes['polo_line-spacing']) ?>px;/*二重線の上下間隔*/
    }
</style>

ブロックに出来上がったアイコン

その他のコード記述例

こんな書き方もある：これをベースにLazy Blocksで設定していく。

<hr style="border:none; border-top:dashed 1px #ff0000; height:1px;color:#FFFFFF; width:500px;">;

echo '<hr style="border:none; border-top:dashed 1px #ff0000; height:1px;color:#FFFFFF; width:500px;">';

一番簡単な、ハンドルバーで記述するコードになる。

参考Youtube：https://www.youtube.com/watch?v=0O7Gx84kyXk

２色の見出しという意味で Dual-Color Heading というタイトルのブロックを作成。

まず、タイトルを入力、①Content Controlsを選択。
これを選択すると、ブロックを入れたその場所に表示されるようになる。右の②Inspecter Controlsを選択すると右側のサイドバーにコントロールを配置して、いろんな設定ができるようになる。

今回は左側のコンテンツ側にブロックを入れるので①Content Controlsを選択。これによりすべてのコントロールをコンテンツ側に配置することになる。
③では＋で追加していく。半分になっているのは50%を選択しているから。

位置を移動したい場合は、左のアイコンをドラッグすると移動することができる。

以下は最終的に出来上がる状態。

実際の設定方法

Before Text
ここでは、Before用のテキストを入れるテキストボックスを作成。

これを選択すると、右の「Control」のところに設定するところが出る（上図）。

• LABEL：Before Text
• NAME：before_text　重要！（これが参照されるのでコード入力とお同じ名前にする）
• TYPE：テキスト
• PLACEHOLDER：Before（空欄時に表示されるヒントなどのテキスト）

以下のように、ここに「Before」と表示される。

• PLACEMENT：Content を選択（下にスクロールすると出る）
• WIDTH：100%を選択（下にスクロールすると出る）

更に、右側のインスペクターを下にスクロールしてWIDTHを100%に。

After Text
ここでは、After用のテキストを入れるテキストボックスを作成。
上のBefore Textをコピーすると作業が早いかも（タイトルの下の小さなDuplicate：重複をクリック）

• LABEL：After Text
• NAME：after_text　重要！（これが参照されるのでコード入力とお同じ名前にする）
• TYPE：テキスト
• PLACEHOLDER：After（空欄時に表示されるヒントなどのテキスト、先に説明した）
• PLACEMENT：Content を選択（下にスクロールすると出る）
• WIDTH：100%を選択（下にスクロールすると出る）

After Color
After用のテキストのカラーを設定、つまりテキストの色を変えるということやる。

• LABEL：After Color
• NAME：after_color　重要！（これが参照されるのでコード入力とお同じ名前にする）
• TYPE：カラーピッカー
• COLOR PALETTE：Yes（定義済みの色でカラーパレットを表示）
• OUTPUT FORMAT：Colorを選択
• PLACEMENT：Content を選択（下にスクロールすると出る）
• WIDTH：100%を選択（下にスクロールすると出る）

コードを記述する

ここで実際に動作させるためのコードを入力、最大の難関になる。
しかしハンドルバーとして（{{}}二重括弧、{{{}}}三重括弧）で記述するので一番簡単で理解しやすいコードではある。

HTML+ハンドルバー、ハンドルバーは基本的にチョットしたもので、構文ではPHPコードを書かずに変数名などをHTMLテンプレートに直接配置することができる。
参考として、Lazy BlocksのWebサイトにはハンドルがどのように機能するかについての完全なドキュメントがあり、それだけでなく表示されるコントロールの種類ごとに説明がある。

例えば、Color Pickerのハンドルバーの使いたい場合、HANDOLEBARSをクリックして、コントロール名とHTMLコードに挿入する方法を示してある。ハンドルバーを更に複雑にしたい場合は、if else loopなどもサポートされている。

テキストについても同じようにサイトに行けばヒントが得られる。

下のコード、まずテキストから、コントロール名は「before_text」と「after_text」、カラーは「after_color」という名前でハンドルバーに二重括弧で入っている。

このハンドルバーがLazy Blocksで作成した各ブロックの設定を動的に実行することになる。

「Single output code for Frontend and Editor」のところもオンにする。
これでフロントエンドとバックエンドに同じコードを使用することになる。

Single output code for Frontend and Editor
フロントエンドとエディター用の単一出力コード

実際のコード

<h2>
  {{before_text}}
  <span class="after-text" style="color:{{after_color}}">
    {{after_text}}
  </span>
</h2>

参考までに：これを元のhtmlで記述すると以下のようになる。上のコードはこれが元になっている。

<h2>
  Before
  <span class="after-text" style="color:#0000FF">
    Affter
  </span>
</h2>

この元の html をそのままプレビューするとこのようになる。

ページでプレビュー確認してみる

ここまで完了したら、どのように表示されるか確認する。

赤枠のブロックが出来ているので、ページに入れると以下のように表示される。

BEFORE TEXTとAFTER TEXTに入力すると、下にもそのテキストが表示される。

AFTER COLORは、まだ色が選択されていない状態のアイコンをクリックすると、カラー選択が出て色を選択できるようになる。選択した色がテキストに適用されているのがわかる。赤の広い四角の色の部分をクリックすると更に多くの色を選択できるようになる。

この前と後のテキストの間にはスペースが無いという説明だが、みた限りではあるように見えるが、説明を続けて見てみる。

LavelとValue

これに見出しを追加する

Heading Level
見出しを設定する。

• LABEL：Heading Level
• NAME：hedng_level　重要！（これが参照されるのでコード入力とお同じ名前にする）
• TYPE：選択

更に下にスクロールして設定。

• CHOICES（上の画像では一番上）のところの下、青色の文字 +Add Choice をクリックして３つのフィールドを作成して、それぞれH2〜H3までを作成。
• OUTPUT FORMAT：Valueを選択。
• DEFAULT VALUE：h2 と入力。

Before Color
最後に、Before用のテキストのカラーを作成。これはAfter Colorを下の矢印のところのDuplicateをクリックしてコピーする。これで作業が早くなる。

あとはコピーしたもののラベル以下を同じように変更していく。

• LABEL：Before Color
• NAME：before_color　重要！（これが参照されるのでコード入力とお同じ名前にする）

あとは、After Colorと全く同じ設定でOK。

追加した分のコードを書き足していく

ここでは<h2>タグを動的にするために<h2>のところを{{heding_level}}と入れ替えることになる。更にBefore Colorを追加したの<span>タグを新しく挿入することになる。

以下が挿入して出来上がったコード。１行目と８行目が<h2>を入れ替えたところ、２〜４行目が<span>タグを新しく挿入したところ。

<{{heading_level}}>
  <span class="before-text" style="color:{{before_color}}">
    {{before_text}}
  </span>
  <span class="after-text" style="color:{{after_color}}; margin-left: 6px;">
    {{after_text}}
  </span>
</{{heading_level}}>

保存して確認すると以下のような画像になる。

うまくいったか確認する。それぞれテキストが入力して変更できるか、カラーを選択して下のテキストの色が変わるか、見出し（H2〜H4）を選択して変化するかどうか。以下のようになったらOK。

<h3>を選択した時、少し文字が下がるのが気になるが、他は全く問題ない。

レイアウトを見やすいように変えてみる

現在のレイアウトがこれ

BEFORE TEXTとBEFORE COLORを横並びに、同じくAFTER側も横並びにレイアウトする。

Lazy BLocksでは現在以下のようになっている。

これをこのようにWIDTHを50％に変更する。下の３つも同じように、一番下は25%にする。

このようにレイアウトが変わる。Befor Textの横にBefore Colorがあった方がいいと思うので、ドラッグして移動する。

レイアウトの完成になる。プレビューティーしてみる。

これでレイアウトがスッキリして、分かりやすくなった。

選択コントロールは、カスタマイズ可能なオプションを備えたドロップダウンメニューを提供。
出力は、単一選択と複数選択の両方をサポートしている。

PHPによる出力

phpでの作成（PHPを選択することを忘れずに）

Valueだけを出力する場合はこれ

基本的にはこれが使われると思う。「select = NAME」

<p><?php echo $attributes['select'];?></p>

Nameの[‘select’]を入れるだけでValueが出力される。これはContorl設定でValueが選択されているから。

LavelとValueを同時に出力する場合はこれ

選択-1を選択すると、下にlabelとvalueの値が出力される。上のControl設定でOUTPUT FORMATをBothを選択する必要がる。Valueだけだと「選択-1」はでないで「solid」が出るだけ。

<p><?php echo $attributes['select']['label']; ?></p>
<p><?php echo $attributes['select']['value']; ?></p>

複数出力でリストで出力するには

<?php if ( $attributes['select'] ) : ?>
  <ul class="features">
    <?php foreach( $attributes['select'] as $value ): ?>
      <li class="feature-<?php echo esc_attr( $value ); ?>">
        <?php echo esc_html( $value ); ?>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

配列出力フォーマット

Bothを選択しているが、3行目でLavel出力の指定がされている。

<?php if ( $attributes['select'] ) : ?>
  <div class="option-<?php echo esc_attr( $attributes['select']['value'] ); ?>">
    <?php echo esc_html( $attributes['select']['label'] ); ?>
  </div>
<?php endif; ?>

ハンドルバーによる出力

HTML + Handlebaresを選択を忘れないように。

<div class="layout-{{select}}">
  Content
</div>

ハンドルバーによる複数選択（LabelとValue）

必ずBothを選択する必要がある。
{{#each select}}と{{/each}}の間のものをselect変数の値分、繰り返すことになる。eachは各々という意味？。
下の<li class=”feature-{{this}}”>は動的に{{this}}の中にselectのデータを入れてクラスを変化させている。その後の{{this}}に実際の内容を入れている。

{{#if select}}
  <ul class="features">
    {{#each select}}
      <li class="feature-{{this}}">{{this}}</li>
    {{/each}}
  </ul>
{{/if}}

以下のように選択した内容を複数のリストで表示している。
Bothの時だけ表示され、他のを選択すると表示されない。

ハンドルバーによる配列出力フォーマット

{{#if select}}
  <div class="option-{{control_name.value}}">
    {{select.label}}
    {{select.value}}
  </div>
{{/if}}

横並びになる。

選択で<hr>タグを使って線を扱う

まず、選択でValueに<hr>のhtmlコードを直接入れる。
入れたのは <hr size=”1″ width=”400″ align=”center” noshade> このようなもの。

以下のコードで出力してみる。

<?php foreach( $attributes['select'] as $inner ): ?>
    <p><?php echo $inner; ?></p>
<?php endforeach; ?>

線はうまく表示された、$innerなので全て Lavelの値（実線）まで出力されている。これを外すには？

これでうまくいった。それぞれのValueにhtmlのタグを入れて切り替えることができる。

<p><?php echo $attributes['select']['value']; ?></p>

[‘select’]で選択して[‘value’]で選択したhtmlを出力することができた。これによって下のようにラインが表示されている。

Valueにhtmlを直接入れると[‘size’]等の細かい設定が機能しない。

従って、スタイルを作成してやってみた。
Value内のhtmlはうまく機能した。
ここに入れるタグは<hr class=”solid-line”>と<p class=”double-bottom”</p>を入れてやってみた。htmlはうまく動作しているが、CSS内に[‘size’]とかを入れても効かない。細かい設定ができないので、結局php内にhtmlを入れるしか方法が無い。どうしたらいいか？

<p><?php echo $attributes['select']['value']; ?></p>
<style>
hr.solid-line {
 height: 5px;
 background-color: red;
 width: 60%;
 border: none;
}
p.double-bottom {
  border-bottom: double;
}
</style>

やはりphpでif文を使って実践を選択したら以下を出力でhtmlを入れる。この方法しかない。

<?php
$url = $attributes['control_name'];
if ( $url ) : ?>
    <div class="cta-button">
        <a href="<?php echo esc_url( $url ); ?>"
           class="button"
           target="_blank"
           rel="noopener noreferrer">
            もっと詳しく知る
        </a>
    </div>
<?php endif; ?>

２行目：$urlで変数名を宣言、[‘control_name’]で入力されたurlを取得。
３行目：もし、URLが入っていたら、ということになるのかな？
５~10行目：<a href=”リンク先のパス” class=”button” target=”_blank” rel=”noopener noreferrer”>もっと詳しく知る</a> これを作成している。( $url )は１行目の変数に入ったURLをここに入れている。下の画像でAにあたる。