Gutenbergの文字サイズを管理画面から変更できるようにする

<?php
$my_opt = get_option('my_opt');

?>
<table>
	<tr valign="top">
		<th scope="row">フォントサイズ</th>
		<td>
			<fieldset>
				<input type="hidden" name="my_opt[font_size]" value="0" />
				<label><input type="checkbox" name="my_opt[font_size]" value="1" <?php checked( $my_opt['font_size'], 1 ); ?>>デフォルトのフォントサイズを置き換える。</label>
			</fieldset>
			<ol class="font_size_setting">
				<?php
				for ( $i = 1; $i < 5; $i++ ) {
					?>
				<li>
					<ul>
						<li>ラベル：　<input type="text" name="my_opt[font_name-<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $my_opt[ 'font_name-' . $i ] ); ?>"></li>
						<li>クラス名：<input type="text" name="my_opt[font_short_name-<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $my_opt[ 'font_short_name-' . $i ] ); ?>"></li>
						<li>サイズ：　<input type="number" name="my_opt[font_size-<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $my_opt[ 'font_size-' . $i ] ); ?>"></li>
						<li>スラッグ：<input type="text" name="my_opt[font_slug-<?php echo esc_attr( $i ); ?>]" value="<?php echo esc_attr( $my_opt[ 'font_slug-' . $i ] ); ?>"></li>
					</ul>
					<?php
				}
				?>
			</ol>
		</td>
	</tr>
</table>

function my_font_size_setup() {
  $my_opt = get_option('my_opt');

  // 置きかえない設定になっている場合は処理を抜ける
	if ( ! $my_opt['font_size'] ) {
		return;
	}

	$font_sizes = array();
	for ( $i = 1; $i < 5; $i++ ) {
		$name       = my_opt['font_name-' . $i];
		$short_name = my_opt['font_short_name-' . $i];
		$size       = intval( my_opt['font_size-' . $i] ); // 必ず数値形式に変換！
		$slug       = my_opt['font_slug-' . $i]

		if ( '' == $name || '' == $short_name || 0 > $size || '' == $slug ) {
			continue;
		}
		$font_sizes[] = array(
			'name'      => $name,
			'shortName' => $short_name,
			'size'      => $size,
			'slug'      => $slug,
		);
	}

	add_theme_support( 'editor-font-sizes', $font_sizes );
}

add_action( 'init', 'my_font_size_setup' );

/**
 * インラインCSSを返す
 *
 * @return string
 */
function my_inline_css() {

	ob_start();

	for ( $i = 1; $i < 5; $i++ ) {
		$name       = my_opt['font_name-' . $i];
		$short_name = my_opt['font_short_name-' . $i];
		$size       = intval( my_opt['font_size-' . $i] );
		$slug       = my_opt['font_slug-' . $i]

		if ( '' == $name || '' == $short_name || 0 > $size || '' == $slug ) {
			continue;
		}
		?>
	.editor-styles-wrapper .has-<?php echo $slug; ?>-font-size,
	.has-<?php echo $slug; ?>-font-size {
		font-size:<?php echo $size; ?>px;
	}
	<?php
	}

	$css = ob_get_clean();
	return $css;
}

/**
 * CSSをインラインで追加
 */
function my_echo_inline_style() {
	if ( ! my_opt['font_size'] ) {
		return;
	}

	$css = my_inline_css();

	$depth = array( 'wp-block-library', 'wp-block-library-theme' );

	// CSSスタイルファイルをキューに追加.
	wp_register_style( 'my-custom', false, $depth, null );
	wp_enqueue_style( 'my-custom' );

	// インラインにCSSの内容を出力.
	wp_add_inline_style( 'my-custom', $css );
}

add_action( 'wp_enqueue_scripts', ' my_echo_inline_style' );