ブロックを充実させるプラグインSpectraのcarouselで高さが揃わない件

ブロックエディターとの付き合いにもだいぶ慣れてきて、カスタムブロックなら「LazyBlocks」、溺愛のブロックを追加するなら「Spectra」と使い分けしている今日この頃。「Spectra」は無料でも使い勝手はかなり良いのですが。コンテンツcarouselの各スライド背景に背景色を入れると、高さが不揃いになってしまうのが難点。

Custom Blocks Constructor – Lazy Blocks

Spectra – WordPress Gutenberg Blocks

ということで、この高さをCSSで揃える方法を考えてみました。

carouselは、実際にはSlickslideで作られています。Slickslideの高さ揃え用のCSSを使えば良いと思いましたが、若干タグが複雑なようで、追加のCSSが必要でした。以下で揃いました。

/*Spectraのcarousel高さ不揃い*/
.slick-track {
  display: flex!important;
	align-items: stretch;
}
.slick-slide {
  height: auto !important;
}
.slick-slide > div{
	height:100%;
}
.slick-slide > div >article{
	background:#FFF;
	height:100%;
}

#FFFの箇所は、ご利用の背景色を入れてください。