[WIP] Move title to header toolbar

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -35,6 +35,7 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import TemplateTitle from '../template-title';
+import PostTitle from '../post-title';
 import { store as editPostStore } from '../../../store';
 
 function HeaderToolbar() {
@@ -220,7 +221,9 @@ characters. */
 				) }
 			</div>
 
-			<TemplateTitle />
+			<div className="edit-post-header-toolbar__middle">
+				{ isTemplateMode ? <TemplateTitle /> : <PostTitle /> }
+			</div>
 
 			{ displayBlockToolbar && (
 				<div

packages/edit-post/src/components/header/header-toolbar/style.scss

@@ -92,6 +92,12 @@
 	}
 }
 
+.edit-post-header-toolbar__middle {
+	display: inline-flex;
+	flex-grow: 1;
+	justify-content: center;
+}
+
 // Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
 	// Stack toolbar below Editor Bar.

packages/edit-post/src/components/header/post-title/index.js

@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronDown } from '@wordpress/icons';
+
+import {
+	Dropdown,
+	Button,
+	VisuallyHidden,
+	__experimentalText as Text,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+function PostTitle() {
+	const { entityTitle, entityLabel } = useSelect(
+		( select ) => ( {
+			entityTitle: select( editorStore ).getEditedPostAttribute(
+				'title'
+			),
+			entityLabel: select( editorStore ).getEditedPostAttribute( 'type' ),
+		} ),
+		[]
+	);
+
+	const titleRef = useRef();
+
+	if ( ! entityTitle ) {
+		return (
+			<div className="edit-post-title-actions">{ __( 'Loading…' ) }</div>
+		);
+	}
+
+	return (
+		<div className="edit-post-title-actions">
+			<div
+				ref={ titleRef }
+				className="edit-post-title-actions__title-wrapper"
+			>
+				<Text
+					variant="body.small"
+					className="edit-post-title-actions__title-prefix"
+				>
+					<VisuallyHidden as="span">
+						{ sprintf(
+							/* translators: %s: the entity being edited, like "template"*/
+							__( 'Editing %s:' ),
+							entityLabel
+						) }
+					</VisuallyHidden>
+				</Text>
+
+				<Text
+					variant="body.small"
+					className="edit-post-title-actions__title"
+					as="h1"
+				>
+					{ entityTitle.length === 0
+						? __( 'No Title' )
+						: entityTitle }
+				</Text>
+
+				<Dropdown
+					popoverProps={ {
+						anchorRef: titleRef.current,
+					} }
+					position="bottom center"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							className="edit-post-title-actions__get-info"
+							icon={ chevronDown }
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ onToggle }
+							label={ sprintf(
+								/* translators: %s: the entity to see details about, like "template"*/
+								__( 'Show %s details' ),
+								entityLabel
+							) }
+						/>
+					) }
+					contentClassName="edit-post-title-actions__info-dropdown"
+					renderContent={ () => (
+						<span>{ __( 'Nothing here yet.' ) }</span>
+					) }
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default PostTitle;

packages/edit-post/src/components/header/post-title/style.scss

@@ -0,0 +1,57 @@
+.edit-post-title-actions {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+
+	.edit-post-title-actions__title-wrapper {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+
+		// See comment above about min-width
+		min-width: 0;
+
+		.components-dropdown {
+			display: inline-flex;
+			margin-left: $grid-unit-05;
+
+			.components-button {
+				min-width: 0;
+				padding: 0;
+			}
+		}
+	}
+
+	.edit-post-title-actions__title-wrapper > h1 {
+		margin: 0;
+
+		// See comment above about min-width
+		min-width: 0;
+	}
+
+	.edit-post-title-actions__title {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 120px;
+
+		@include break-medium() {
+			max-width: 75px;
+		}
+
+		@include break-xlarge() {
+			max-width: 180px;
+		}
+	}
+}
+.edit-post-title-actions__info-dropdown > .components-popover__content > div {
+	padding: 0;
+	min-width: 240px;
+}

packages/edit-post/src/style.scss

@@ -3,7 +3,7 @@
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/header-toolbar/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/header/template-title/style.scss";
+@import "./components/header/post-title/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/manage-blocks-modal/style.scss";