Zenn
Open21

投稿タイトルに書式フォーマットつかいたいから色々調べた

WordPress
ちあきちあき

最近記事のタイトルに supだとかsubだとかをつけた文字に遭遇することが多いので検証してみる

ちあきちあき

supタグsubタグ書けてた気がしたんだけどそのまま文字で出力されるようになったから、改行以外は受け付けなくなったのかな

ちあきちあき

一旦これでデフォルト用意。

import { registerFormatType } from '@wordpress/rich-text';

const name = 'block-format-extension/sup-super-script';

registerFormatType( name, {
	name,
	title: 'sup',
	interactive: false,
	tagName: 'sup',
	className: null,
	edit: () => null
} );

これからeditを書いていく

ちあきちあき

ていうかデフォルトで上付き下付きあるからこれをサイトタイトルで使えるようにならんのかという話だよなあ

ちあきちあき

あくまで表示用のタイトルを出すに特化するだけならカスタムフィールド使うならできる……。が、2回入力の手間がある

ちあきちあき

初期値だけ投稿タイトルをとってきて、編集後は該当のカスタムフィールドの内容ってできるかな……やってみるか…？

ちあきちあき

一旦初期値入れることはできたけど、これだと投稿タイトル変更しても変わらないな…

import { RichText, useBlockProps } from '@wordpress/block-editor';
import type {BlockEditProps} from "@wordpress/blocks";
import { useEntityProp } from '@wordpress/core-data';
import { useEffect } from "@wordpress/element";

import './editor.scss';

type BlockAttributes = {
	title: string;
}

export default function Edit( { attributes: { title }, setAttributes, context: { postType, postId } }: BlockEditProps< BlockAttributes > ) {
	const blockProps = useBlockProps();
	const [ rawTitle = '' ] = useEntityProp(
		'postType',
		// @ts-ignore
		postType,
		'title',
		postId
	);
	useEffect(() => {
		if ( title === '' || title === rawTitle ) {
			setAttributes( {
				title: rawTitle,
			} );
		}
	}, [ rawTitle ] );

	return (
		<div { ...blockProps }>
			<RichText
				tagName="h1"
				value={ title }
				onChange={ ( value ) => {
					setAttributes( {
						title: value,
					} );
				} }
			/>
		</div>
	);
}
ちあきちあき

ChatGPTにいい案なあい？って聞いたら、ユーザーが変更したかどうか検知したらいいじゃん！って言われたので、確かに！！！！！！！！！！ってなりました

ちあきちあき
import { RichText, useBlockProps } from '@wordpress/block-editor';
import type {BlockEditProps} from "@wordpress/blocks";
import { useEntityProp } from '@wordpress/core-data';
import { useEffect } from "@wordpress/element";

import './editor.scss';

type BlockAttributes = {
	title: string;
	userEdited: boolean;
}

export default function Edit( { attributes: { title, userEdited }, setAttributes, context: { postType, postId } }: BlockEditProps< BlockAttributes > ) {
	const blockProps = useBlockProps();
	const [ rawTitle = '' ] = useEntityProp(
		'postType',
		// @ts-ignore
		postType,
		'title',
		postId
	);
	useEffect(() => {
		if ( ! userEdited ) {
			setAttributes( {
				title: rawTitle,
			} );
		}
	}, [ rawTitle ] );

	return (
		<div { ...blockProps }>
			<RichText
				tagName="h1"
				value={ title }
				onChange={ ( value ) => {
					setAttributes( {
						title: value,
						userEdited: true
					} );
				} }
			/>
		</div>
	);
}
ちあきちあき

PluginDocumentSettingPanel 使ってカスタムフィールド表示するブロックつくる

ちあきちあき

ずーっとエラー吐いてるんだけど、

import { PluginDocumentSettingPanel } from '@wordpress/editor';
は
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
の誤り……？

ちあきちあき

カスタムフィールドなんか空になちゃうな、なんでかな、って1時間ぐらい悩んでたけど、単純にパネルのカスタムフィールド表示してたからだった…………死