WordPressのブロックエディタでチェックされたら押せるボタンを作る

WordPressのボタンブロックで「チェックされたらボタンを押せるようにしたい」という要望に対応したのでその方法のメモです。コピペで簡単に設置できます。
※IEは非対応です。

1 デモ
2 基本的な考え方
3 ソースコード
4 カスタムHTMLブロックが便利

デモ

「利用規約」に同意する
（チェックを入れると、購入ボタンが押せるようになります） //初期状態はクリック不可＋タブ不可にしておく。 jQuery(function() { jQuery(“.for_check_1 .wp-block-button__link”).addClass(‘disable’).attr(‘tabindex’,-1); }); jQuery(“#check_1”).click(function(){ if (jQuery(this).prop(“checked”) == false) { //チェックなしの場合 jQuery(“.for_check_1 .wp-block-button__link”).addClass(‘disable’).attr(‘tabindex’,-1); } else { // チェックありの場合 jQuery(“.for_check_1 .wp-block-button__link”).removeClass(‘disable’) .removeAttr(‘tabindex’); } }); .wp-block-button__link.disable { pointer-events: none; opacity:0.5; }

購入する

基本的な考え方

まず、リンクの有効無効はCSSのpointer-eventsで制御できます。pointer-events: none;とすることで、その要素のリンクが無効になります。

ただし、これだけではタブキーで要素にフォーカスしてしまいます。これはユーザービリティ的には微妙なので、<a>要素のtabindex属性を−1にしてタブキーによるフォーカスの対象にならないようにします。

以上の処理を、チェックボックスのオンオフに合わせて行います。今回はjQueryを使いました。

IE11とEdgeへの対応

IE11とEdgeでは、<a>要素がdisplay:inline-blockもしくはdisplay:blockでないとpointer-events:noneが効きません。今回の場合はボタンブロックのCSSで<a>要素はすでにdisplay:inline-blockとなっていたので特に問題はありませんでした。他で応用する場合には注意が必要です。

ソースコード

チェックボックス

<input type="checkbox" id="check_1">
<label for="check_1">「利用規約」に同意する</label><br>
（チェックを入れると、購入ボタンが押せるようになります）

JavaScript

<script type='text/javascript'>
//初期状態はクリック不可＋タブ不可にしておく。
jQuery(function() {
   jQuery(".for_check_1 .wp-block-button__link").addClass('disable').attr('tabindex',-1);
});
jQuery("#check_1").click(function(){
    if (jQuery(this).prop("checked") == false) {
      //チェックなしの場合
      jQuery(".for_check_1 .wp-block-button__link").addClass('disable').attr('tabindex',-1);
    } else {
      // チェックありの場合
      jQuery(".for_check_1 .wp-block-button__link").removeClass('disable') .removeAttr('tabindex');
    }
  });
</script>

CSS

ボタンが使用不可の場合のスタイルを定義。透明度をつけて使用不可ということが見た目でも分かるようにしています。

.wp-block-button__link.disable {
	  pointer-events: none;
		opacity:0.5;
}

ボタンブロック

ボタンブロックには「高度な設定」でfor_check_1というクラスを追加します。

このクラスはJavaSrciptでボタンを特定するために使います。本当はidを指定する方がよいですが、ボタンブロックの設定ではidは指定できないのでクラスとしました。

カスタムHTMLブロックが便利

実はカスタムHTMLブロックにはJavaScriptやCSSも書くことができます。それを利用すると上記のソースをまとめて一つのカスタムHTMLブロックに書くことができます。実際、この記事では下図のようにしてデモ用のボタンを実装しています。

ということで全部まとめたソースを用意しました。下記のソースをそのままHTMLブロックにコピペし、ボタンブロックに属性を設定するだけで動作します。

<input type="checkbox" id="check_1"><label for="check_1">「利用規約」に同意する</label>
<br>（チェックを入れると、購入ボタンが押せるようになります）
<script type="text/javascript">
//初期状態はクリック不可＋タブ不可にしておく。
jQuery(function() {
   jQuery(".for_check_1 .wp-block-button__link").addClass('disable').attr('tabindex',-1);
});
jQuery("#check_1").click(function(){
    if (jQuery(this).prop("checked") == false) {
      //チェックなしの場合
      jQuery(".for_check_1 .wp-block-button__link").addClass('disable').attr('tabindex',-1);
    } else {
      // チェックありの場合
      jQuery(".for_check_1 .wp-block-button__link").removeClass('disable') .removeAttr('tabindex');
    }
  });
</script>
<style type="text/css">
.wp-block-button__link.disable {
  pointer-events: none;
  opacity:0.5;
}
</style>

以上で、チェックを入れたときだけ有効になるボタンの説明は終了です。

このカスタムHTMLブロックとボタンを合わせて再利用ブロックに登録すれば、いろいろな所で簡単に利用できるようにできます。

ブロックエディターは使いこなすと本当に便利ですね。