区切り – Block Editor 検証

Contents

デフォルト表示
ブロック設定パネル
- サンプル
スタイル設定
- 標準スタイル
ブロック制御コメント

デフォルト表示

<hr class="wp-block-separator">

ブロック設定パネル

色設定

高度な設定

スタイル
デフォルト / 幅広線 / ドット

サンプル

デフォルト↓

<hr class="wp-block-separator is-style-wide">

幅広線↓

<hr class="wp-block-separator is-style-wide">

ドット↓

<hr class="wp-block-separator is-style-dots">

色設定のサンプル

<hr class="wp-block-separator has-text-color has-background has-pale-cyan-blue-background-color has-pale-cyan-blue-color is-style-wide">

<hr class="wp-block-separator has-text-color has-background has-pale-pink-background-color has-pale-pink-color is-style-dots">

スタイル設定

標準スタイル

.wp-block-separator.is-style-wide {
    border-bottom-width:1px
}

.wp-block-separator.is-style-dots {
    background: none !important;
    border: none;
    text-align: center;
    max-width: none;
    line-height: 1;
    height:auto
}

.wp-block-separator.is-style-dots:before {
    content: "\00b7 \00b7 \00b7";
    color: currentColor;
    font-size: 20px;
    letter-spacing: 2em;
    padding-left: 2em;
    font-family:serif
}

.wp-block-separator {
    border: none;
    border-bottom: 2px solid #8f98a1;
    margin-left: auto;
    margin-right:auto
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width:100px
}

.wp-block-separator.has-background:not(.is-style-dots) {
    border-bottom: none;
    height:1px
}

.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
    height:2px
}

ブロック制御コメント

<!-- wp:separator -->
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-wide"} -->
<!-- /wp:separator -->

<!-- wp:separator {"className":"is-style-dots"} -->
<!-- /wp:separator -->

<!-- wp:separator {"color":"pale-cyan-blue","className":"is-style-wide"} -->
<!-- /wp:separator -->

<!-- wp:separator {"color":"pale-pink","className":"is-style-dots"} -->
<!-- /wp:separator -->