WordPressの記事一覧ブロック（Gutenberg）を自作する

ルートディレクトリ/
  └ wp-content/
     ├ themes/
     └ your-theme/（実装したいテーマフォルダ）
      ├ functions.php（ブロックを読み込むため編集）
      └ new-block/（ここにブロックを作成します）
        ├ package.json（後ほどコマンドで作成）
        └ src/（新規追加）
          └ index.js（新規追加）

cd new-block

npm init -y

{
  "name": "new-block",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm i @wordpress/scripts -D

export NODE_OPTIONS=--openssl-legacy-provider

npm cache clean --force

[webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor

npm i -D --save-exact mini-css-extract-plugin@2.4.5

"start": "wp-scripts start"

npm start

"block:live": "wp-scripts start"

npm run block:live

  console.log('hello, cusom block!!');

ルートディレクトリ/
  └ wp-content/
    └ themes/
      ├ functions.php
      └ your-theme/
        └ new-block/
          ├ package.json
          ├ src/
          |  └ index.js
          └ build/（新規作成される）
             ├ index.js
             ├ index.js.map
             └ index.assets.php

"start": "wp-scripts start block/index.js --output-path=block/build"

"wp:build": "wp-scripts build block/index.js --output-path=block/build",

"build": "wp-scripts build",

npm run buld

/**
 * My New Block.
 */
function my_new_block() {
	$asset_file = include __DIR__ . '/new-block/index.asset.php';

	wp_enqueue_script(
		'my-new-block-script',
		get_theme_file_uri( '/new-block/build/index.js' ),
		$asset_file['dependencies'],
		$asset_file['version'],
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'my_new_block' );

<?php return array('dependencies' => array(), 'version' => 'c3eeb99a5f31cf29f838e513e0bdaf63');

$asset_file['dependencies'],
$asset_file['version']

import { registerBlockType } from "@wordpress/blocks";

registerBlockType("mybloc/list-block", {
  title: "記事一覧",
  icon: "smiley",
  category: "layout",
  edit: () => <div>Hello, custom block!</div>,
  save: () => <div>Hello, custom block!</div>,
});

icon: "list-view",

import { registerBlockType } from "@wordpress/blocks";
import {
  PanelBody,
  __experimentalNumberControl as NumberControl,
} from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";

registerBlockType("mybloc/list-block", {
  title: "記事一覧",
  icon: "smiley",
  category: "layout",
  attributes: {
    cnt: {
      type: "number",
      default: 6,
    },
  },
  edit: ({ attributes, setAttributes }) => {
    return (
      <>
        <InspectorControls>
          <PanelBody>
            <NumberControl
              label="表示数"
              isShiftStepEnabled="true"
              shiftStep="1"
              min="1"
              max="30"
              value={attributes.num}
              onChange={(value) => setAttributes({ num: parseInt(value) })}
            />
          </PanelBody>
        </InspectorControls>
        <p style={{ padding: `20px`, backgroundColor: `#eee` }}>ここに{attributes.num}記事の一覧が出力されます。</p>
      </>
    );
  },
});

attributes: {
  cnt: {
    type: "number",
    default: 6,
  },
},

parseInt(value)

<NumberControl
  label={ラベル}
  isShiftStepEnabled={シフト（十字キーとか）入力できるようにする}
  shiftStep={シフトで進む数}
  min={最小}
  max={最大}
  value={値}
  onChange={変更があった時の処理}
/>

<SelectControl
  label={ラベル}
  value={値}
  options={[オプションに追加する配列]}
  onChange={変更に関する条件}
/>

import { registerBlockType } from "@wordpress/blocks";
import {
  PanelBody,
  SelectControl,
  __experimentalNumberControl as NumberControl,
} from "@wordpress/components";
import apiFetch from "@wordpress/api-fetch";
import { InspectorControls } from "@wordpress/block-editor";

const categories = [{ label: "すべて", value: -1 }];

apiFetch({ path: "/wp/v2/categories?_fields=name,slug,id" }).then((cates) => {
  cates.forEach((cate) => {
    categories.push({ label: cate["name"], value: cate["id"] });
  });
});

registerBlockType("mybloc/list-block", {
  title: "記事一覧",
  icon: "smiley",
  category: "layout",
  attributes: {
    cnt: {
      type: "number",
      default: 6,
    },
    cateid: {
      type: "number",
      default: -1,
    },
  },
 edit: ({ attributes, setAttributes }) => {
   const getCate = categories.filter((i) => {
      if (i.value === attributes.cateid) {
        return i;
      }
    });
    const textCate = attributes.cateid !== -1 ? `「カテゴリー・${getCate[0].label}」` : "";
    return (
      <>
        <InspectorControls>
          <PanelBody>
            <NumberControl
              label="表示数"
              isShiftStepEnabled="true"
              shiftStep="1"
              min="1"
              max="30"
              value={attributes.num}
              onChange={(value) => setAttributes({ num: parseInt(value) })}
            />
            <SelectControl
              label="カテゴリー"
              value={attributes.cateid}
              options={categories}
              onChange={(value) => setAttributes({ cateid: value })}
            />
          </PanelBody>
        </InspectorControls>
        <p style={{ padding: `20px`, backgroundColor: `#eee` }}>
          ここに{textCate}
          {attributes.num}記事の一覧が出力されます。
        </p>
      </>
    );
  },
});

register_block_type(
	'mybloc/list-block',
	array(
		'attributes'      => array(
			'num'    => array(
				'type' => 'string',
			),
			'cateid' => array(
				'type' => 'string',
			),
		),
		'render_callback' => function( $attr, $content = '' ) {
			$attr = wp_parse_args(
				$attr,
				array(
					'num'    => 0,
					'cateid' => -1,
				)
			);
			return '';
		},
	)
);

$defaults = array(
	'type' => 'post',
	'before' => "<p>",
	'after' => "</p> \n",
	'echo' => TRUE
);
$args = wp_parse_args( $args, $defaults );

register_block_type(
	'mybloc/list-block',
	array(
		'attributes'      => array(
			'cnt'    => array(
				'type' => 'number',
			),
			'cateid' => array(
				'type' => 'number',
			),
		),
		'render_callback' => function ( $attr, $content = '' ) {
			$attr = wp_parse_args(
				$attr,
				array(
					'cnt'    => 0,
					'cateid' => -1,
				)
			);

			$args = array(
				'orderby'        => 'date',
				'order'          => 'DESC',
				'post_status'    => 'publish',
				'post_type'      => 'post',
				'posts_per_page' => $attr['cnt'],
			);
			//cateid がすべてじゃない場合カテゴリidで絞り込む
			if ( -1 !== $attr['cateid'] ) {
				$args['cat'] = $attr['cateid'];
			}

			$archive   = '';
			$the_query = new WP_Query( $args );

			if ( $the_query->have_posts() ) {
				while ( $the_query->have_posts() ) {
					$the_query->the_post();
					$archive .= '<li><a href="' . get_the_permalink() . '">';
					$archive .= '<time datetime="' . get_the_date( 'Y-m-d' ) . '">' . get_the_date( 'Y年m月d日' ) . '</time>';
					$archive .= '<h3>' . get_the_title() . '</h3>';
					$archive .= '</a></li>';
				}
					$archive = '<ul>' . $archive . '</ul>';

			} else {
				$archive = '<p>記事はありません</p>';
			}
			wp_reset_postdata();
			//出力
			return $archive;
		},
	)
);