/**
 * テキストの翻訳を取得。
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * ブロックラッパー要素を指定する React フック。
 * class 名など、必要なプロパティをすべて提供する。
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * JavaScript ファイルから CSS、SASS、SCSS ファイルを参照することで、Webpack で処理できるようにする。
 * これらのファイルはすべて、エディタに適用される CSS に含まれる。
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * edit 関数には、エディタにおけるブロックの構造を記述する。
 * これにより、そのブロックが使用されたときの UI が描画される。
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} 描画する HTML 要素
 */
export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			{ __(
				'Customblock Information – hello from the editor!',
				'customblock-information'
			) }
		</p>
	);
}

/**
 * ブロックラッパー要素を指定する React フック。
 * class 名など、必要なプロパティをすべて提供する。
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * save 関数には、編集画面で設定された属性（type など）をもとに、
 * 最終的な HTML 構造を定義する処理を記述する。
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} 描画する HTML 要素
 */
export default function save() {
	return (
		<p { ...useBlockProps.save() }>
			{ 'Customblock Information – hello from the saved content!' }
		</p>
	);
}

/** ブロックラッパー要素を指定する React フック。 */
import { useBlockProps } from '@wordpress/block-editor';
/** スタイルシートです。 */
import './editor.scss';

export default function Edit() {
	return (
		// ここが「ブロックラッパー」。
		<p { ...useBlockProps() }>
			{ '「情報」カスタムコードブロックを作るぞ！' }
		</p>
	);
}

/** ブロックラッパー要素を指定する React フック。 */
import { useBlockProps } from '@wordpress/block-editor';
/** スタイルシートです。 */
import './editor.scss';

export default function Edit() {
	/** 引数としたいオブジェクト。 */
	const attr = {
		attr1: 'Attr-1',
		attr2: 'Attr-2',
	};

	return (
		// `attr` を、引数として与えると…
		<p { ...useBlockProps(attr) }>
			{ '「情報」カスタムコードブロックを作るぞ！' }
		</p>
	);
}

/** 模式的な表現です */
Edit(props?: BlockEditProps<T>): React.JSX.Element;

// React の useState
const [count, setCount] = useState(0);

// Gutenberg ブロックの属性。
const { attributes, setAttributes } = props;

/** 模式的な表現です */
interface useState {
  <T extends unknown>(initial: T): [val: Readonly<T>, (mutation: T) => void];
}

// [年齢, 年齢の変更関数] のタプル
const [age, setAge] = useState(20);

setAge(40); // age の値が更新されてコンポーネントが再描画される。

/** 模式的な表現です */
interface BlockEditProps<T extends Record<string, any>> {
  readonly attributes: Readonly<T>;
  readonly setAttributes: (attrs: Partial<T>) => void;
};

function Edit<T extends Record<string, any>>(blockEditProps: BlockEditProps<T>) {
  // {属性, 属性の変更関数} のオブジェクト。
  const {attributes, setAttributes} = blockEditProps;

  setAttributes({prop1: '1'}); // attributes.prop1 の値が書き換わり、コンポーネントが再描画される。
}

{
  // ... 前略
  "attributes": {
    "属性名１": {
      "この属性の性質": "性質を示す値…"
    },
    "属性名２": {
      "この属性の性質": "性質を示す値…"
    }
  }
}

{
  // ... 前略
  "attributes": {
    "type": {
      "enum": ["info", "warning", "error"],
      "default": "info"
    }
  }
}

/** 模式的な表現です */
type 属性値 = {
  type: 'info' | 'warning' | 'error';
};

function Edit(props: BlockEditProps<{type: 'info' | 'warning' | 'error'}>) {
  const {attributes, setAttributes} = props;

  console.log(attributes.type); // 'info', 'warning', 'error' のいずれか。

  setAttributes({type: 'error'}); // 属性が変更されることで再描画が発生する。
};

import {
  useBlockProps, // ブロックラッパーの React フック。
  InnerBlocks, // このカスタムブロックエディタ内に、段落などを入れられるようにする。
  BlockControls, // このカスタムブロックのそのものに対する UI を扱えるようにする。
} from '@wordpress/block-editor';

import {
  ToolbarGroup, // このカスタムブロックを、ツールバーから変更できるようにする。
  ToolbarButton, // 上記ツールバーに追加するボタン。
} from '@wordpress/components';

import {
  Icon, // WordPress のビルトインアイコンを扱えるようにする。
  cautionFilled, // 丸に「！」のアイコン 。
  error, // 三角に「！」のアイコン。
  notAllowed, // 「通行止め」のアイコン。
} from '@wordpress/icons';

// .scss ファイルを .css に変換するため、ここで import する。
import './editor.scss';

/** 属性名とアイコンとの key/value 値。 */
const ICONS = {
  info: { label: '情報', icon: cautionFilled },
  warning: { label: '注意', icon: error },
  error: { label: '警告', icon: notAllowed },
};

/**
 * React Edit Component
 *
 * @param {BlockEditProps<{type:"info"|"warning"|"error"}>} param
 * @returns {React.JSX.Element}
 */
export function Edit({ attributes, setAttributes }) {
  const { type } = attributes; // info, warning, error のいずれか。

  return (
    <>
      {/* ツールバー */}
      <BlockControls>
        <ToolbarGroup>
          {Object.entries(ICONS).map(([key, { label, icon }]) => (
            {/* ツールバーに３種類のボタンを描画し、押したら再描画させる。 */}
            <ToolbarButton
              key={key}
              icon={icon}
              label={label}
              isPressed={type === key}
              onClick={() => setAttributes({ type: key, icon })}
            />
          ))}
        </ToolbarGroup>
      </BlockControls>

      {/* エディターのブロック本体。 */}
      <aside {...useBlockProps({ className: `info-block ${type}` })}>
        {/* アイコンを描画する。 */}
        <Icon icon={ICONS[type].icon} className="info-icon" size={28} />
        <div className={'content'}>
          {/* このカスタムコードブロックは、いかなるコードブロックも入れ子にできる。 */}
          <InnerBlocks allowedBlocks={null} />
        </div>
      </aside>
    </>
  );
}

import {
  useBlockProps, // ブロックラッパーの React フック。
  InnerBlocks, // このカスタムブロックエディタ内に、段落などを入れられるようにする。
} from '@wordpress/block-editor';

import {
  Icon, // WordPress のビルトインアイコンを扱えるようにする。
  cautionFilled, // 丸に「！」のアイコン 。
  error, // 三角に「！」のアイコン。
  notAllowed, // 「通行止め」のアイコン。
} from '@wordpress/icons';

/** 属性名とアイコンとの key/value 値。 */
const ICONS = {
  info: cautionFilled,
  warning: error,
  error: notAllowed,
};

/**
 * JSX Element
 *
 * @param {BlockSaveProps<{type:"info"|"warning"|"error"}>} param
 * @returns {React.JSX.Element}
 */
export function save({ attributes }) {
  const { type } = attributes;
  return (
    <aside {...useBlockProps.save({ className: `info-block ${type}` })}>
      {/* アイコンを描画する。 */}
      <Icon icon={ICONS[type]} className="info-icon" size={28} />
      <div className={'content'}>
        {/* edit 関数で編集した内容を、反映させる。 */}
        <InnerBlocks.Content />
      </div>
    </aside>
  );
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';

import { Edit } from './edit';
import { save } from './save';
import metadata from './block.json';

// edit 関数と save 関数を、登録する。
registerBlockType(metadata.name, {
  /**
   * @see ./edit.js
   */
  edit: Edit,

  /**
   * @see ./save.js
   */
  save,
});

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/customblock-information",
  "version": "0.1.0",
  "title": "情報ブロック",
  "category": "text",
  "icon": "info-outline",
  "description": "情報、警告、エラーメッセージを表示するブロック",
  "parent": ["core/post-content"],
  "example": {},
  "textdomain": "customblock-information",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "attributes": {
    "type": {
      "enum": ["info", "warning", "error"],
      "default": "info"
    }
  }
}

// いちばん外側のセレクタが、カスタムコードブロックです。
.wp-block-create-block-customblock-information {
  div.block-editor-block-list__layout {
    & > *:first-child {
      margin-top: 0;
    }
    & > *:last-child {
      margin-bottom: 0;
    }
  }
}

// いちばん外側のセレクタが、カスタムコードブロックです。
.wp-block-create-block-customblock-information {
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid;
  border-radius: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  & > div > *:first-child {
    margin-top: 0;
  }
  & > div > *:last-child {
    margin-bottom: 0;
  }
  & > .info-icon {
    margin-right: 0.2em;
  }

  &.info {
    background: #beddff;
    border-color: #2b7cd3;

    & > .info-icon {
      color: #0645ad;
      fill: currentColor;
    }
  }

  &.warning {
    background: #fff3cd;
    border-color: #ffc107;

    & > .info-icon {
      color: #856404;
      fill: currentColor;
    }
  }

  &.error {
    background: #f8d7da;
    border-color: #dc3545;

    & > .info-icon {
      color: #721c24;
      fill: currentColor;
    }
  }
}