post-list

コピーする<?php
/**
 * Plugin Name:       Oja Post List Block
 * Description:       記事リストを表示するブロックです
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            ojako
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       post-list
 *
 * @package           oja
 */


new OjaPostListBlock;
class OjaPostListBlock {
  public function __construct() {
    // ブロック登録
    add_action( 'init', array($this, 'oja_post_list_block_init'));
  }

  public function oja_post_list_block_init() {
    if ( !function_exists('register_block_type')) {
      return;
    }
    $dir = dirname( __FILE__ );

    $script_asset_path = "$dir/build/index.asset.php";

    $index_js     = 'build/index.js';
    $script_asset = require( $script_asset_path );
    wp_register_script(
      'oja-post-list-script',
      plugins_url( $index_js, __FILE__ ),
      $script_asset['dependencies'],
      $script_asset['version']
    );
  
    $editor_css = 'build/index.css';
    wp_register_style(
      'oja-post-list-editor-style',
      plugins_url( $editor_css, __FILE__ ),
      array(),
      filemtime( "$dir/$editor_css" )
    );
  
    $style_css = 'build/style-index.css';
    wp_register_style(
      'oja-post-list-style',
      plugins_url( $style_css, __FILE__ ),
      array(),
      filemtime( "$dir/$style_css" )
    );
  
    register_block_type( "oja/post-list", array(
      'editor_script' => 'oja-post-list-script',
      'editor_style'  => 'oja-post-list-editor-style',
      'style'         => 'oja-post-list-style',
      'render_callback' => 'post_list_render_func',
      'attributes' => [
        'postListType' => [
          'type'    => 'string',
          'default' => 'post'
        ],
        'isTimeStamp' => [
          'type'    => 'boolean',
          'default' => true
        ],
        'isPostLabel' => [
          'type'    => 'boolean',
          'default' => true
        ],
        'showPostNumber' => [
          'type'    => 'number',
          'default' => 6
        ],
        'postDesign' => [
          'type'    => 'string',
          'default' => 'cade'
        ],
        'postOrder' => [
          'type' => 'string',
          'default' => 'DESC'
        ],
        'postOrderBy' => [
          'type' => 'string',
          'default' => 'date'
        ],
        'termId' => [
          'type'    => 'number',
          'default' => -1
        ]
      ]
    ) );
  }

} // class

//ダイナミックブロックによるレンダリング
function post_list_render_func($attributes, $content) {
  //画像ブロックレンダリング
  require_once dirname(__FILE__) . '/src/views/post_list_render.php';
  return post_list_render($attributes, $content);
}

index.js

コピーするimport { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";

registerBlockType("oja/post-list", {
  title: "Oja Post List Block",
  description: "記事リストをブロックとして表示します",
  category: "common",
  icon: "smiley",
  keywords: ["post", "oja", "list"],
  supports: {
    customClassName: false,
    anchor: false,
    html: false,
  },
  edit: Edit,
  save: () => {
    return null;
  },
});

edit.js（全文）

コピーするimport { InspectorControls } from "@wordpress/block-editor";
import ServerSideRender from "@wordpress/server-side-render";
import {
  PanelBody,
  PanelRow,
  RadioControl,
  SelectControl,
  ToggleControl,
} from "@wordpress/components";
import SelectTaxonomy from "./components/SelectTaxonomy";
import PostNumber from "./components/PostNumber";
import apiFetch from "@wordpress/api-fetch";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";

export default function Edit(props) {
  const {
    attributes: {
      postListType,
      isTimeStamp,
      isPostLabel,
      showPostNumber,
      postDesign,
      postOrder,
      postOrderBy,
      termId,
    },
    className,
    setAttributes,
  } = props;
  return [
    <InspectorControls>
      <PanelBody title="投稿リスト設定" initialOpen={true}>
        <PanelRow>
          <RadioControl
            className="ojaPostListType"
            label="投稿のタイプ"
            selected={postListType}
            options={[
              { label: "最新の投稿", value: "post" },
              { label: "カテゴリー", value: "category" },
              { label: "タグ", value: "tag" },
            ]}
            onChange={(val) => setAttributes({ postListType: val })}
          />
        </PanelRow>
        {postListType !== "post" && (
          <PanelRow>
            <SelectTaxonomy
              postListType={postListType}
              termId={termId}
              setAttributes={setAttributes}
            />
          </PanelRow>
        )}
      </PanelBody>
      <PanelBody title="表示設定" initialOpen={true}>
        <PanelRow>
          <PostNumber
            showPostNumber={showPostNumber}
            setAttributes={setAttributes}
          />
        </PanelRow>
        <PanelRow>
          <ToggleControl
            label={isTimeStamp ? "日付を表示する" : "日付を表示しない"}
            checked={isTimeStamp}
            onChange={(val) => setAttributes({ isTimeStamp: val })}
          />
        </PanelRow>
        <PanelRow>
          <ToggleControl
            label={
              isPostLabel ? "投稿にラベルを表示する" : "ラベルは表示しない"
            }
            checked={isPostLabel}
            onChange={(val) => setAttributes({ isPostLabel: val })}
          />
        </PanelRow>
        <PanelRow>
          <RadioControl
            className="ojaPostListDesign"
            label="表示タイプ (デザイン)"
            selected={postDesign}
            options={[
              { label: "カード", value: "cade" },
              { label: "シンプル", value: "simple" },
              { label: "テキスト", value: "text" },
            ]}
            onChange={(val) => setAttributes({ postDesign: val })}
          />
        </PanelRow>
        <PanelRow>
          <SelectControl
            label="表示基準"
            value={postOrderBy}
            options={[
              { label: "日付順", value: "date" },
              { label: "更新順", value: "modified" },
              { label: "ランダム", value: "rand" },
              { label: "タイトル順", value: "title" },
              { label: "著者順", value: "author" },
            ]}
            onChange={(val) => setAttributes({ postOrderBy: val })}
          />
        </PanelRow>
        <PanelRow>
          <SelectControl
            label="表示順"
            value={postOrder}
            options={[
              { label: "昇順", value: "ASC" },
              { label: "降順", value: "DESC" },
            ]}
            onChange={(val) => setAttributes({ postOrder: val })}
          />
        </PanelRow>
      </PanelBody>
    </InspectorControls>,
    <div className={className}>
      <ServerSideRender
        block={props.name}
        attributes={{
          postListType,
          isTimeStamp,
          isPostLabel,
          showPostNumber,
          postDesign,
          termId,
          postOrder,
          postOrderBy,
        }}
        className="oja-server-siderender"
      />
    </div>,
  ];
}

src/style.scss

コピーする@charset "utf-8";

.wp-block-oja-post-list {
  padding: 12px 10px 2px;
  width: 100%;
  min-height: 285px;
  ul.post-list-container {
    border: none;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    li {
      padding: 0;
      margin: 20px 0 0;
      position: relative;
      background: #fff;
      -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
      box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
      pointer-events: none;
      transition: all 0.3s;
      &:hover {
        transform: translateY(-2px);
        color: #888888;
        box-shadow: 0 0 10px rgb(125 125 125 / 50%);
      }
      @media screen and (max-width:543px) {
        flex-basis: 100% !important;
      }
      a.post-list-link {
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: #847d76;
        pointer-events: auto;
      }
      figure {
        width: 100%;
        position: relative;
        overflow: hidden;
        &:before {
          content: "";
          display: block;
          padding-top: 28.5%;
        }
        
        img {
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .post_content {
        display: block;
        padding: 10px 13px 30px;

        h3 {
          font-family: 'Rounded Mplus 1c',sans-serif;
          font-size: 13px;
          line-height: 1.3rem;
          font-weight: 400;
          color: #847d76;
          margin: 0;
          padding: 0;
          &::before,::after {
            content: none;
          }
          @media screen and (max-width:768px) {
            font-size: 12px;
             line-height: 1.2rem;
          }
          @media screen and (max-width:543px) {
            font-size: 13px;
          }
        }
        span.post_label {
          font-family: Quicksand,'Rounded Mplus 1c',sans-serif;
          position: absolute;
          left: 0%;
          top: 0%;
          padding: 0 3px;
          background-color: #b8e886;
          color: #fff;
          font-size: 10px;
        }
        time {
          position: absolute;
          bottom: 3%;
          left: 5%;
          transform: scale(1.05);
          font-size: 10px;
          margin-top: 5%;
          font-family: Quicksand,'Rounded Mplus 1c',sans-serif;
          &::before {
            margin-right: 0.3em;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f017";
          }
        }
      }
    } //li
  } //ul

  //シンプル＆テキストスタイル
  &.simple,&.text {
    ul.post-list-container {
      flex-direction: column;
      flex-wrap: nowrap;
      li {
        margin-bottom: 2%;
        margin-top: 10px;
        @media screen and (max-width:543px) {
          margin-bottom: 0;
        }
        a.post-list-link {
          flex-direction: row;
        }
        figure {
          width: 30%;
          @media screen and (max-width:768px) {
            width: 40%;
          }
          @media screen and (max-width:543px) {
            width: 90%;
          }
        }
        .post_content {
          padding: 22px 20px 15px;
          @media screen and (max-width:543px) {
            padding: 8px 10px 5px;
          }
        }
        h3 {
          font-size: 16px;
          @media screen and (max-width:768px) {
            font-size: 14px;
          }
          @media screen and (max-width:543px) {
            font-size: 10px;
          }
        }
        time {
          position: absolute;
          right: 3%;
          bottom: 3%;
          left: initial;
          @media screen and (max-width:543px) {
            transform:scale(.8);
            right: 1%;
            bottom: 1%;
          }
        }
      }
    }
  }
  &.text {
    .post_content {
      padding: 25px 10px !important;
      @media screen and (max-width:543px) {
        padding-bottom: 15px !important;
      }
    }
  }
} //wp-block

src/editor.scss

コピーする@charset "utf-8";
.wp-block-oja-post-list {
  min-height: initial;
  padding: 0;
  figure {
    margin: 0;
  }
}

.components-radio-control {
  .components-base-control__field {
    display: flex;
    flex-wrap: wrap;
    .components-base-control__label {
      max-width: initial;
      flex-basis: 100%;
    }
  }

  &__option {
    width: 30%;
    display: flex;
    flex-direction: column;

    input {
      display: none;
    }

    input[type="radio"]:checked + label {
      background-color: #0085ba;
      color: #fff;
      text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82;
    }

    label {
      flex-grow: 1;
      display: block;
      cursor: pointer;
      width: 100%;
      margin: 0;
      padding: 7px 4px;
      background: #f7f7f7;
      color: #555e64;
      text-align: center;
      line-height: 1.3;
      font-size: 12px;
      transition: .2s;
      border: solid 1px #ccc;
      box-shadow: inset 0 -1px 0 #ccc;

      &:hover {
        background: #fafafa;
        border-color: #999;
        box-shadow: inset 0 -1px 0 #999;
        color: #23282d;
      }
    }
  }
  
}
.postsNumber {
  width: 80%;
  position:relative;
  &:after {
    content: '記事表示します';
    display: block;
    position: absolute;
    right: 40%;
    top: 55%;
  }
}