一番簡単なhrでの区切り線を作成してみる。
下の画像で薄いグレーのラインが最初のブロックを入れた時に表示されるライン(プレビュー)になる。

hrタグ、HTML5から大きく仕様が変わっている。
今まで使えていた、線の色「color」や、線の長さを「width」などの属性は、HTML5以降廃止。
従って結論としてCSSで作成するしかない。
最初にhtmlのhrタグをこの中に入れることから開始する。ここではCSSを使っているので、hrタグに対してCSSでリイアウトを作成していく。
これがまず最初の作業になる。その後、PHPを作成していく手順になる。
Lazy Blocksでの作業
左側:5つの項目を作成:
右側: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;">';