「テキスト」と「囲み枠」の色を別々に選択できるようにする

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/richtext",
	"version": "0.1.0",
	"title": "Richtext",
	"category": "text",
	"icon": "welcome-write-blog",
	"description": "RichTextを使ってブロックを実装",
	"supports": {
		"className": false,
		"html": true
	},
	"styles": [
		{
			"name": "default",
			"label": "デフォルト",
			"isDefault": true
		},
		{
			"name": "red-border",
			"label": "赤枠"
		},
		{
			"name": "blue-border",
			"label": "青枠"
		}
	],
	"attributes": {
		"content": {
			"type": "string",
			"source": "html",
			"selector": ".my-richtext"
		},
		"color": {
			"type": "string",
			"default": ""
		}
	},
	"textdomain": "richtext",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';
import './editor.scss';

export default function Edit(props) {
	const { attributes, setAttributes } = props;
	const blockProps = useBlockProps({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		placeholder: "ここにテキストを入力・・・",
		style: { color: attributes.color || null },
		onChange: (newContent) => {
			setAttributes({ content: newContent });
		}
	});
	return (
		<>
			<RichText {...blockProps} />
			<div className='polo-ritch'>
				<SelectControl
					value={attributes.color}
					options={[
						{ value: '', label: 'テキストカラー選択' },
						{ value: 'red', label: '赤色' },
						{ value: 'blue', label: '青色' }
					]}
					onChange={(newColor) => {
						setAttributes({ color: newColor });
					}}
				/>
			</div>
		</>
	);
}

import { __ } from '@wordpress/i18n';
import { RichText, useBlockProps } from '@wordpress/block-editor';

export default function save(props) {
	const{ attributes } = props;
	const blockProps = useBlockProps.save({
		tagName: "div",
		className: "my-richtext",
		value: attributes.content,
		style: { color: attributes.color || null }
	});
	return (
		<RichText.Content {...blockProps} />
	);
}

.polo-ritch {
	width: 100px;
	margin:  0 auto;  
}

なし