/* ===== ここから CSS（タイトルボックス） ===== */
/* 中タイトル：<h2 class="title-box">中タイトル</h2>
   ・ここは大きさと余白だけ。装飾は「装飾のサンプル」から1つ選んで、この下に追記する */
.title-box {
  display: block;
  width: fit-content;         /* 文字の幅にする（装飾が文字の幅で囲まれる） */
  max-width: 100%;            /* 長い中タイトルは記事の幅で折り返す */
  box-sizing: border-box;
  margin: 30px 0 10px;        /* ★ 上：前の段落との間隔／下：次の要素との間隔 */
  padding: .25em .8em;        /* ★ 装飾と文字の間（上下 左右） */
  font-size: 1.1em;           /* ★ 文字の大きさ（本文の 1.1倍） */
  font-weight: normal;
  line-height: 1.5;
}
/* ===== ここまで CSS（タイトルボックス） ===== */

/* =====================================================================
   ブロック「タイトルボックス」（編集画面）
   - ブロックの中に文字を入力するだけ。ショートコード [title_box] と同じ表示
   - 実際の HTML は PHP（functions.php の title_box_render()）で作るので、ここは入力画面だけ
   - 編集画面のデザインも css/title-box.css で決まる
   - ビルドなしで動くように、WordPress に入っている部品を使う
   ===================================================================== */
( function ( wp ) {
	'use strict';

	var el                = wp.element.createElement;
	var registerBlockType = wp.blocks.registerBlockType;
	var useBlockProps     = wp.blockEditor.useBlockProps;
	var RichText          = wp.blockEditor.RichText;

	registerBlockType( 'title-box/title', {
		apiVersion: 3,
		title: 'タイトルボックス',
		description: '記事の中タイトルを入れる（文字を入力するだけで装飾される）',
		category: 'text',
		icon: 'heading',
		keywords: [ '中タイトル', '見出し', 'title', 'h2' ],
		attributes: {
			text: { type: 'string', default: '' }
		},

		edit: function ( props ) {
			// 公開ページと同じ <h2 class="title-box"> の形にして、同じ CSS で表示する
			return el( RichText, useBlockProps( {
				tagName: 'h2',
				className: 'title-box',
				value: props.attributes.text,
				allowedFormats: [ 'core/bold', 'core/italic', 'core/link' ],
				placeholder: '中タイトルを入力',
				onChange: function ( v ) { props.setAttributes( { text: v } ); },
				// Enter を押したら、次に段落ブロックを追加してそこへ移る
				__unstableOnSplitAtEnd: function () {
					props.insertBlocksAfter( wp.blocks.createBlock( 'core/paragraph' ) );
				}
			} ) );
		},

		// 保存しない（表示は毎回 PHP で作る）
		save: function () { return null; }
	} );
} )( window.wp );

/* =====================================================================
   タイトルボックス：記事の中タイトルを角丸の枠で囲む
   ・使い方：
       ブロック「タイトルボックス」 … 「＋」から選んで、ブロックの中に文字を入力する
       ショートコード [title_box]中タイトル[/title_box] … 段落に入力する
   ・出力（どちらも同じ）：<h2 class="title-box">中タイトル</h2>
   ・書式は css/title-box.css、編集画面のブロックは js/title-box-block.js
   ===================================================================== */

/**
 * 中タイトルの HTML を作る（ブロックとショートコードで共通）
 *
 * @param string $text 中タイトルの文字。太字・リンクなどは本文と同じ範囲だけ許可する。
 * @return string 文字が空のときは何も表示しない。
 */
function title_box_render( $text ) {
	$text = trim( (string) $text );
	if ( '' === $text ) {
		return '';
	}
	return '<h2 class="title-box">' . wp_kses_post( $text ) . '</h2>';
}

/**
 * ショートコード [title_box]中タイトル[/title_box]
 *
 * @param array       $atts    属性（使わない）。
 * @param string|null $content [title_box] と [/title_box] の間の文字。
 * @return string
 */
function title_box_shortcode( $atts, $content = null ) {
	return title_box_render( $content );
}
add_shortcode( 'title_box', 'title_box_shortcode' );

/**
 * 段落ブロックに [title_box] だけを入力したときは、外側の <p> を外す
 * ・<p> を外さないと <p><h2>…</h2></p> になり、ブラウザが <p> を途中で閉じて前後に空の段落ができるため
 * ・render_block はショートコードの変換より先に動くので、ここでは <p> を外すだけ
 *
 * @param string $block_content 段落ブロックの HTML。
 * @return string
 */
function title_box_unwrap_paragraph( $block_content ) {
	if ( false === strpos( $block_content, '[title_box]' ) ) {
		return $block_content;
	}
	if ( preg_match( '#^\s*<p[^>]*>\s*(\[title_box\].*?\[/title_box\])\s*</p>\s*$#s', $block_content, $m ) ) {
		return $m[1];
	}
	return $block_content;
}
add_filter( 'render_block_core/paragraph', 'title_box_unwrap_paragraph' );

/**
 * css/title-box.css を、公開ページと編集画面の両方で読み込む
 * ・enqueue_block_assets：公開ページと、ブロックエディタの中の両方で動く
 */
function title_box_enqueue_assets() {
	wp_enqueue_style(
		'title-box',
		get_theme_file_uri( 'css/title-box.css' ),
		array(),
		filemtime( get_theme_file_path( 'css/title-box.css' ) ) // CSS を更新したら、ブラウザが読み直す
	);
}
add_action( 'enqueue_block_assets', 'title_box_enqueue_assets' );

/**
 * ブロック「タイトルボックス」を登録
 * ・保存するのは文字だけ。HTML は表示のたびに title_box_render() で作る
 */
function title_box_register_block() {
	wp_register_script(
		'title-box-block',
		get_theme_file_uri( 'js/title-box-block.js' ),
		array( 'wp-blocks', 'wp-element', 'wp-block-editor' ),
		filemtime( get_theme_file_path( 'js/title-box-block.js' ) ),
		true
	);

	register_block_type(
		'title-box/title',
		array(
			'api_version'     => 3,
			'editor_script'   => 'title-box-block',
			'attributes'      => array(
				'text' => array(
					'type'    => 'string',
					'default' => '',
				),
			),
			'render_callback' => function ( $attributes ) {
				return title_box_render( isset( $attributes['text'] ) ? $attributes['text'] : '' );
			},
		)
	);
}
add_action( 'init', 'title_box_register_block' );

/* A：角丸の罫線 */
.title-box {
  border: 1px solid #b5b9c6;  /* ★ 罫線の太さ・色 */
  border-radius: 4px;         /* ★ 角の丸み */
}

/* B：カプセル形 */
.title-box {
  padding: .25em 1.1em;       /* 両端が丸くなる分、左右を広げる */
  border: 1px solid #b5b9c6;  /* ★ 罫線の太さ・色 */
  border-radius: 1em;         /* 1行の高さの半分。999px にすると、2行になったとき楕円のように丸くなりすぎる */
}

/* C：幅いっぱいの下線 */
.title-box {
  width: auto;                /* 記事の幅いっぱいにする */
  padding: 0 0 .2em;          /* ★ 文字と下線の間 */
  border-bottom: 1px solid #b5b9c6;  /* ★ 下線の太さ・色 */
}

/* D：地色の角丸 */
.title-box {
  background: #eef1f4;        /* ★ 地色 */
  border-radius: 4px;         /* ★ 角の丸み */
}

/* 元の指定をコメントアウトする例
h2::before {
  content: "\f053";
}
*/