Gutenberg(ブロックエディタ)メモ: wp_is_mobile関数を利用して出し分け機能をもったブロックを作る

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

WordPressのGutenberg用ブロックとしてモバイルとPCで出し分ける機能をもったブロックを試作しました。

簡易な仕組みなので大した内容ではありませんが、応用は効くかもしれません。

構築環境
WordPress5.0-beta4-43896
PHP7.2.6
JavaScriptJSX/ESNext
Gutenberg4.3.0

実現したいこと

  • PCとモバイルで表示するか否かを決められるブロックを作る

サンプルコードの後で後述しますが、簡易に出し分けるためにwp_is_mobile()を利用します。

なお当初はRichTextとPlainTextの2種類での実現を考えていましたが、RichTextの方がうまく組めなかったためPlaintextでの例のみとなります。

サンプル

モバイルとPCで出し分けるブロック
モバイルとPCで出し分けるブロック

上記のスクリーンショットのようにサイドバーで選択して使う形になります。

今回JSだけではなくPHP側の記述も必要となりますので、まずJSから。


const { registerBlockType } = wp.blocks;
const { Fragment } = wp.element;
const {
  PlainText,
  InspectorControls,
} = wp.editor;
const {
  PanelBody,
  RadioControl
} = wp.components;

registerBlockType( 'my-plugin/switching-for-device', {
  title: 'switching-for-device',
  icon: 'universal-access-alt',
  category: 'layout',

  attributes: {
    content: {
      type: 'string',
    },
    option: {
      type: 'string',
      default: 'pc',
    }
  },
  edit( {attributes, setAttributes} ) {
    const { content, option } = attributes;

    //簡易に実装したかったためstyle属性を使っていますが、スタイルシートに記述する方が筋かもしれません
    const plainTextBlockStyle = { backgroundColor: '#f8f9f9',padding: '.5em' };
    const plainTextNoteStyle = { marginTop: '0',marginBottom: '5px',color: '#aaa' };
    const plainTextStyle = { border: '1px solid #ccc' };

    const onChangeContent = newContent => {
      setAttributes( { content: newContent } );
    };
    const onChangeOption = newOption => {
     setAttributes( { option: newOption } );
    };

    return(
      <Fragment>
        <InspectorControls>
         <PanelBody title="表示切替">
            <RadioControl
            label="デバイス選択"
            help="wp_is_mobile関数を利用し、チェックしたデバイスのみに表示されます。"
            selected={ option }
            options={ [
                { label: 'PC', value: 'pc' },
                { label: 'MOBILE', value: 'mobile' },
            ] }
            onChange={ onChangeOption }
          />
          </PanelBody>
        </InspectorControls>
        <div style={ plainTextBlockStyle }>
          <p style={ plainTextNoteStyle }>[{ attributes.option }のみ表示]</p>
          <PlainText
            style={ plainTextStyle }
            value={ content }
            onChange={ onChangeContent }
          />
        </div>
      </Fragment>
    );
  },
  save() {
    return null;
  }
} );

続いてPHP。


//初期設定
add_action( 'enqueue_block_editor_assets', function() {
  wp_enqueue_script(
    'myplugin-gutenberge',
    plugins_url( 'block.js', __FILE__ ),
    [ 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ]
  );
} );

//今回用の設定
register_block_type(
  'my-plugin/switching-for-device',
  array(
    'attributes' => array(
      'content' => array (
        'type' => 'string'
      ),
      'option' => array (
        'type' => 'string',
        'default' => 'pc',
      ),
    ),
    'render_callback' => 'gutenberg_switching_for_device_func',
  )
);
function gutenberg_switching_for_device_func($attributes) {
  $content = $attributes['content'];
  $option  = $attributes['option'];

  if($option == 'mobile' && wp_is_mobile()){
      return $content;
  } elseif($option == 'pc' && wp_is_mobile() === false) {
      return $content;
  }
  return;
}

仕組みは単純で、RadioControlで選択した内容とwp_is_mobileの組み合わせで出力するか否かを決めているだけです。

そのため、wp_is_mobaile()の部分をUAなどをいれて判別する関数などに変えても動作するはずです。一応選択肢を増やせるようにToggleControlではなくRadioControlにしているので、増設も簡易にできるかと。

また、ブロックにフォーカスされていないとInspectorControls(サイドバー)の情報が表示されず、ぱっと見でブロックの意味や状態が分からなくなりそうだったので、入力欄の上に「PCのみ表示」などの説明文を表示させるようにしました。
RadioControlの値をそのまま使っているので表示の仕組みも簡易にできました。

結び

主目的はPHP側での出し分け処理の実装だったので、wp_is_mobileなどを使ってのデバイス毎の出し分けに限らずより複雑な分岐条件(日付や時間など)にでも使えるのではと思います。

RichTextと配列

とりあえず想定した動作にはなりましたがRichTextでの構築ができず残念です。

RichTextの場合は配列になるので、その配列をPHPに渡すことができていない、あるいは渡したあと保存できていない、というような問題が起きていたと考えています。

この点が解決できればあとは今回の分岐の仕組みを使えばよいだけのはずなのですが…。

今後目処が立てば記事に追記しようかと思います。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄