add-subtitle-filter.js

import { Fragment } from "@wordpress/element";
import { createHigherOrderComponent } from "@wordpress/compose";
import { addFilter } from "@wordpress/hooks";
import { TextControl } from "@wordpress/components";
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useBlockProps, PlainText } from '@wordpress/block-editor';

const AddSubtitle = createHigherOrderComponent((BlockEdit) => {
  const AddSubtitle = (props) => {
    if (props.name !== 'core/post-title') {
      return <BlockEdit {...props} />;
    }

    const { getCurrentPostType, getCurrentPostId } = useSelect('core/editor');
    const postType = getCurrentPostType();

    if (!postType) {
      return <BlockEdit {...props} />;
    }

    const [meta, setMeta] = useEntityProp(
      'postType',
      postType,
      'meta',
      props.context.postId
    );
    const updateSubtitle = (newValue) => {
      setMeta({...meta, kia_subtitle: newValue});
    };
    const TagName = 'h2';

    return (
      <Fragment>
        <BlockEdit {...props} />
        <PlainText
          tagName={TagName}
          placeholder="No Subtitle"
          value={meta.kia_subtitle}
          onChange={updateSubtitle}
          __experimentalVersion={ 2 }
          {...useBlockProps()}
        />
      </Fragment>
    );
  };

  return AddSubtitle;
}, 'AddSubtitle');

addFilter(
  'editor.BlockEdit',
  'addsubtitle-test/add-subtitle',
  AddSubtitle
);