47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { PlainText } from '@wordpress/block-editor';
|
|
import { withInstanceId } from '@wordpress/compose';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './editor.scss';
|
|
interface BlockTitleProps {
|
|
className: string;
|
|
headingLevel: number;
|
|
onChange: ( value: string ) => void;
|
|
heading: string;
|
|
instanceId: number;
|
|
}
|
|
const BlockTitle = ( {
|
|
className,
|
|
headingLevel,
|
|
onChange,
|
|
heading,
|
|
instanceId,
|
|
}: BlockTitleProps ) => {
|
|
const TagName = `h${ headingLevel }` as keyof JSX.IntrinsicElements;
|
|
return (
|
|
<TagName className={ className }>
|
|
<label
|
|
className="screen-reader-text"
|
|
htmlFor={ `block-title-${ instanceId }` }
|
|
>
|
|
{ __( 'Block title', 'woocommerce' ) }
|
|
</label>
|
|
<PlainText
|
|
id={ `block-title-${ instanceId }` }
|
|
className="wc-block-editor-components-title"
|
|
value={ heading }
|
|
onChange={ onChange }
|
|
style={ { backgroundColor: 'transparent' } }
|
|
/>
|
|
</TagName>
|
|
);
|
|
};
|
|
|
|
export default withInstanceId( BlockTitle );
|