Lazy Blocksを使ったオリジナルブロックの作り方 (WebAPI編)

2020-12-282021-01-01

覇業の一歩

<p style="text-align: center">
  <img id="{{blockId}}-img" src="" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>

コントロールの天命

ajaxの計

<p style="text-align: center">
  <img id="{{blockId}}-img" src="" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>
<script type="application/javascript" charset="utf-8">
  jQuery(function($){
    $.ajax({
      url: '{{neko-api}}',
      dataType: 'json',
      timeout: 10000
    })
    .done(function(response) {
      // console.log(response);
      if (response.file !== undefined) {
        var img = response.file;
      }else{
        var img = response[0].url;
      }
      $('img[id={{blockId}}-img]').attr('src', img);
    })
  });
</script>

PHPの世界

<p style="text-align: center">
  <img 
    id="<?php
      echo(esc_attr($attributes['blockId']));
    ?>-img"
    src="<?php
      $url=esc_url($attributes['neko-api']);
      $response=wp_remote_get($url, array('timeout' => 10));
      $json=json_decode($response['body'],true);
      if (strpos($url,'random') === false) {
        echo($json[0]['url']);
      } else {
        echo($json['file']);
      }
    ?>" 
    width="<?php
      echo(esc_attr($attributes['size']));
    ?>%"
    height="<?php
      echo(esc_attr($attributes['size']));
    ?>%"
    alt="<?php
      echo(esc_attr($attributes['alt']));
    ?>" />
</p>

そいつの名はCustom Helper

<p style="text-align: center">
  <img id="{{blockId}}-img" src="{{neko_api neko-api}}" width="{{size}}%" height="{{size}}%" alt="{{alt}}" />
</p>

<?php
function lazy_neko_api_helper ($handlebars) {
  $handlebars->registerHelper('neko_api', function($url) {
    $response=wp_remote_get($url, array('timeout' => 10));
    $json=json_decode($response['body'],true);
    if (empty(($json['file']))) {
      return $json[0]['url'];
    } else {
      return $json['file'];
    }
  });
}
add_action('lzb/handlebars/object', 'lazy_neko_api_helper');