initial commit

packages/woocommerce-blocks/assets/js/editor-components/block-title/editor.scss

@@ -0,0 +1,6 @@
+// Ensure textarea bg color is transparent for block titles.
+// Some themes (e.g. Twenty Twenty) set a non-white background for the editor, and Gutenberg sets white background for text inputs, creating this issue.
+// https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1204
+.wc-block-editor-components-title {
+	background-color: transparent;
+}

packages/woocommerce-blocks/assets/js/editor-components/block-title/index.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { PlainText } from '@wordpress/block-editor';
+import { withInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const BlockTitle = ( {
+	className,
+	headingLevel,
+	onChange,
+	heading,
+	instanceId,
+} ) => {
+	const TagName = `h${ headingLevel }`;
+	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 }
+			/>
+		</TagName>
+	);
+};
+
+BlockTitle.propTypes = {
+	/**
+	 * Classname to add to title in addition to the defaults.
+	 */
+	className: PropTypes.string,
+	/**
+	 * The value of the heading.
+	 */
+	value: PropTypes.string,
+	/**
+	 * Callback to update the attribute when text is changed.
+	 */
+	onChange: PropTypes.func,
+	/**
+	 * Level of the heading tag (1, 2, 3... will render <h1>, <h2>, <h3>... elements).
+	 */
+	headingLevel: PropTypes.number,
+};
+
+export default withInstanceId( BlockTitle );