Add panel component with control for editing entity title

WordPress · Oct 24, 2021 · 4fee83e · 4fee83e
1 parent 78b200c
commit 4fee83e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/packages/edit-post/src/components/header/post-title/index.js b/packages/edit-post/src/components/header/post-title/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -11,14 +11,32 @@ import {
 	Dropdown,
 	Button,
 	VisuallyHidden,
+	TextControl,
 	__experimentalText as Text,
 } from '@wordpress/components';
 
 /**
- * Internal dependencies
+ * External dependencies
  */
+import { noop } from 'lodash';
+
+const EditPostTitlePanel = ( { entityTitle, onChange = noop } ) => {
+	return (
+		<div className="edit-post-title-panel">
+			<TextControl
+				className=""
+				label={ __( 'Title' ) }
+				value={ entityTitle ?? '' }
+				min={ 1 }
+				onChange={ onChange }
+			/>
+		</div>
+	);
+};
 
 function PostTitle() {
+	const { editPost } = useDispatch( editorStore );
+
 	const { entityTitle, entityLabel } = useSelect(
 		( select ) => ( {
 			entityTitle: select( editorStore ).getEditedPostAttribute(
@@ -49,7 +67,7 @@ function PostTitle() {
 				>
 					<VisuallyHidden as="span">
 						{ sprintf(
-							/* translators: %s: the entity being edited, like "template"*/
+							/* translators: %s: the entity being edited, like "post"*/
 							__( 'Editing %s:' ),
 							entityLabel
 						) }
@@ -87,7 +105,12 @@ function PostTitle() {
 					) }
 					contentClassName="edit-post-title-actions__info-dropdown"
 					renderContent={ () => (
-						<span>{ __( 'Nothing here yet.' ) }</span>
+						<EditPostTitlePanel
+							entityTitle={ entityTitle }
+							onChange={ ( value ) =>
+								editPost( { title: value } )
+							}
+						/>
 					) }
 				/>
 			</div>

diff --git a/packages/edit-post/src/components/header/post-title/style.scss b/packages/edit-post/src/components/header/post-title/style.scss
@@ -55,3 +55,8 @@
 	padding: 0;
 	min-width: 240px;
 }
+
+.edit-post-title-panel {
+	max-width: 240px;
+	padding: 16px;
+}