検索（WP5.2〜） – Block Editor 検証

Contents

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

デフォルト表示

<form class="wp-block-search" role="search" method="get" action="https://example.com/">
	<label for="wp-block-search__input-1" class="wp-block-search__label">検索</label>
	<input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="">
	<button type="submit" class="wp-block-search__button">検索</button>
</form>

ブロック設定パネル

高度な設定

スタイル設定

標準スタイル

.wp-block-search {
    display: flex;
    flex-wrap: wrap
}

.wp-block-search .wp-block-search__label {
    width: 100%
}

.wp-block-search .wp-block-search__input {
    flex-grow: 1
}

.wp-block-search .wp-block-search__button {
    margin-left: 10px
}

例）追加スタイルサンプル

抜き出したクラス名

.wp-block-search {}
.wp-block-search__label {}
.wp-block-search__input {}
.wp-block-search__button {}

ブロック制御コメント

開始タグのみ。終了タグなし。

<!-- wp:search /-->