Introduce document settings dropdown

WordPress · Sep 16, 2020 · dd5fe25 · dd5fe25
1 parent 202d122
commit dd5fe25
Showing 1 changed file with 53 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
@@ -6,12 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { Button, Dropdown } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalGetBlockLabel as getBlockLabel,
 	getBlockType,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import { DOWN } from '@wordpress/keycodes';
 
 function useSecondaryText() {
 	const selectedBlock = useSelect( ( select ) => {
@@ -41,6 +43,7 @@ export default function DocumentActions( { documentTitle } ) {
 	// Title is active when there is no secondary item, or when the secondary
 	// item is inactive.
 	const isTitleActive = ! label?.length || ! isActive;
+
 	return (
 		<div
 			className={ classnames( 'edit-site-document-actions', {
@@ -49,17 +52,59 @@ export default function DocumentActions( { documentTitle } ) {
 		>
 			{ documentTitle ? (
 				<>
-					<div
-						className={ classnames(
-							'edit-site-document-actions__label',
-							'edit-site-document-actions__title',
+					<Dropdown
+						position="bottom center"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const openOnArrowDown = ( event ) => {
+								if ( ! isOpen && event.keyCode === DOWN ) {
+									event.preventDefault();
+									event.stopPropagation();
+									onToggle();
+								}
+							};
 							{
-								'is-active': isTitleActive,
+								/* TODO: Fix vertical text padding */
 							}
+							return (
+								<Button
+									onClick={ onToggle }
+									className={ classnames(
+										'edit-site-document-actions__label',
+										'edit-site-document-actions__title',
+										{
+											'is-active': isTitleActive,
+										}
+									) }
+									aria-haspopup="true"
+									aria-expanded={ isOpen }
+									onKeyDown={ openOnArrowDown }
+									label={ __( 'Change document settings.' ) }
+									showTooltip
+								>
+									{ documentTitle }
+								</Button>
+							);
+						} }
+						renderContent={ () => (
+							<div
+								style={ {
+									display: 'flex',
+									justifyContent: 'space-between',
+									alignItems: 'center',
+								} }
+							>
+								{ /* TODO: Replace inline styles */ }
+								<span style={ { marginRight: '12px' } }>
+									URL
+								</span>
+								{ /* TODO: Don't allow input when there is no page context */ }
+								<input
+									placeholder={ 'nice' }
+									style={ { width: '100%' } }
+								/>
+							</div>
 						) }
-					>
-						{ documentTitle }
-					</div>
+					></Dropdown>
 					<div
 						className={ classnames(
 							'edit-site-document-actions__label',