WordPress ブロックエディタのスペーサーブロックの高さをスマホで表示の際は半分の高さに調整！

2022.09.26

WordPressブロックエディタのスペーサーブロックは縦のブロック同士の余白をとりたいときに便利に使用できます。便利なんですけど

スマホ表示の際に、PCで閲覧した時と同じ高さになってしまうので、見栄えが悪いんです。

なので強制的に高さをJavaScriptで変えちゃいました。

困った時はJavaScriptで解決だ。

スペーサーブロックの高さを半分に

const mediaQuery = window.matchMedia('(max-width: 767px)');
const $spacersHtml = document.getElementsByClassName('wp-block-spacer');
const $spacersArray = Array.prototype.slice.call($spacersHtml);

const windowChange = (e) => {
	if (e.matches) {
		for (let $spacerItem of $spacersArray) {
			const spacerHeight = $spacerItem.clientHeight;
			const spHeight = spacerHeight / 2;
			$spacerItem.style.height = spHeight + 'px';
		}
	} else {
		for (let $spacerItem of $spacersArray) {
			const spacerHeight = $spacerItem.clientHeight;
			const spHeight = spacerHeight * 2;
			$spacerItem.style.height = spHeight + 'px';
		}
	}
}
mediaQuery.addListener(windowChange);

上記のコードがスペーサーブロックの高さを半分にするコードです。

スペーサーブロック要素の取得
取得した要素の高さを２で割る
指定のウィンドウサイズ以下でJavaScriptを実行

要素の取得

スペーサブロックには.wp-block-spacerが追加されるので、このクラスのついた要素を全て取得します。

const $spacersHtml = document.getElementsByClassName('wp-block-spacer');

メディアクエリで判定

判定したいメディアクエリを指定。

const mediaQuery = window.matchMedia('(max-width: 767px)');

if文でウィンドウサイズを判定し高さを半分に

const windowChange = (e) => {
	if (e.matches) {
		for (let $spacerItem of $spacersArray) {
			const spacerHeight = $spacerItem.clientHeight;
			const spHeight = spacerHeight / 2;
			$spacerItem.style.height = spHeight + 'px';
		}
	} else {
		for (let $spacerItem of $spacersArray) {
			const spacerHeight = $spacerItem.clientHeight;
			const spHeight = spacerHeight * 2;
			$spacerItem.style.height = spHeight + 'px';
		}
	}
}
mediaQuery.addListener(windowChange);

.clientHeightで要素の高さを取得して、２で割ります。
最後に割った数字に+ ‘px’を付け足します。