Skip to content

Commit 542fa17

Browse files
youknowriadjameskoster
youknowriad
and
jameskoster
authored
Update the document title in the site editor to open the command center (#50369)
Co-authored-by: James Koster <james@jameskoster.co.uk>
1 parent 7a93783 commit 542fa17

File tree

14 files changed

+88
-675
lines changed

14 files changed

+88
-675
lines changed

‎packages/edit-site/src/components/header-edit-mode/document-actions/index.js

+27-129
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,39 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import classnames from 'classnames';
5-
61
/**
72
* WordPress dependencies
83
*/
94
import { sprintf, __ } from '@wordpress/i18n';
5+
import { useDispatch } from '@wordpress/data';
106
import {
11-
__experimentalGetBlockLabel as getBlockLabel,
12-
getBlockType,
13-
} from '@wordpress/blocks';
14-
import { useSelect } from '@wordpress/data';
15-
import {
16-
Dropdown,
177
Button,
188
VisuallyHidden,
199
__experimentalText as Text,
10+
__experimentalHStack as HStack,
2011
} from '@wordpress/components';
21-
import { chevronDown } from '@wordpress/icons';
22-
import { useState, useMemo } from '@wordpress/element';
23-
import {
24-
store as blockEditorStore,
25-
useBlockDisplayInformation,
26-
BlockIcon,
27-
} from '@wordpress/block-editor';
28-
import { store as preferencesStore } from '@wordpress/preferences';
12+
import { BlockIcon } from '@wordpress/block-editor';
13+
import { privateApis as commandsPrivateApis } from '@wordpress/commands';
2914

3015
/**
3116
* Internal dependencies
3217
*/
33-
import TemplateDetails from '../../template-details';
3418
import useEditedEntityRecord from '../../use-edited-entity-record';
19+
import { unlock } from '../../../private-apis';
3520

36-
function getBlockDisplayText( block ) {
37-
if ( block ) {
38-
const blockType = getBlockType( block.name );
39-
return blockType ? getBlockLabel( blockType, block.attributes ) : null;
40-
}
41-
return null;
42-
}
43-
44-
function useSecondaryText() {
45-
const { getBlock } = useSelect( blockEditorStore );
46-
const activeEntityBlockId = useSelect(
47-
( select ) =>
48-
select(
49-
blockEditorStore
50-
).__experimentalGetActiveBlockIdByBlockNames( [
51-
'core/template-part',
52-
] ),
53-
[]
54-
);
55-
56-
const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
57-
58-
if ( activeEntityBlockId ) {
59-
return {
60-
label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
61-
isActive: true,
62-
icon: blockInformation?.icon,
63-
};
64-
}
65-
66-
return {};
67-
}
21+
const { store: commandsStore } = unlock( commandsPrivateApis );
6822

6923
export default function DocumentActions() {
70-
const showIconLabels = useSelect(
71-
( select ) =>
72-
select( preferencesStore ).get(
73-
'core/edit-site',
74-
'showIconLabels'
75-
),
76-
[]
77-
);
78-
const { isLoaded, record, getTitle } = useEditedEntityRecord();
79-
const { label, icon } = useSecondaryText();
80-
81-
// Use internal state instead of a ref to make sure that the component
82-
// re-renders when the popover's anchor updates.
83-
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
84-
85-
// Memoize popoverProps to avoid returning a new object every time.
86-
const popoverProps = useMemo(
87-
() => ( {
88-
// Use the title wrapper as the popover anchor so that the dropdown is
89-
// centered over the whole title area rather than just one part of it.
90-
anchor: popoverAnchor,
91-
placement: 'bottom',
92-
} ),
93-
[ popoverAnchor ]
94-
);
24+
const { open: openCommandCenter } = useDispatch( commandsStore );
25+
const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
9526

9627
// Return a simple loading indicator until we have information to show.
9728
if ( ! isLoaded ) {
98-
return (
99-
<div className="edit-site-document-actions">
100-
{ __( 'Loading…' ) }
101-
</div>
102-
);
29+
return null;
10330
}
10431

10532
// Return feedback that the template does not seem to exist.
10633
if ( ! record ) {
10734
return (
10835
<div className="edit-site-document-actions">
109-
{ __( 'Template not found' ) }
36+
{ __( 'Document not found' ) }
11037
</div>
11138
);
11239
}
@@ -116,21 +43,21 @@ export default function DocumentActions() {
11643
? __( 'template part' )
11744
: __( 'template' );
11845

46+
const isMac = /Mac|iPod|iPhone|iPad/.test( window.navigator.platform );
47+
11948
return (
120-
<div
121-
className={ classnames( 'edit-site-document-actions', {
122-
'has-secondary-label': !! label,
123-
} ) }
49+
<Button
50+
className="edit-site-document-actions"
51+
onClick={ () => openCommandCenter() }
12452
>
125-
<div
126-
ref={ setPopoverAnchor }
127-
className="edit-site-document-actions__title-wrapper"
53+
<span className="edit-site-document-actions__left"></span>
54+
<HStack
55+
spacing={ 1 }
56+
justify="center"
57+
className="edit-site-document-actions__title"
12858
>
129-
<Text
130-
size="body"
131-
className="edit-site-document-actions__title"
132-
as="h1"
133-
>
59+
<BlockIcon icon={ icon } />
60+
<Text size="body" as="h1">
13461
<VisuallyHidden as="span">
13562
{ sprintf(
13663
/* translators: %s: the entity being edited, like "template"*/
@@ -140,39 +67,10 @@ export default function DocumentActions() {
14067
</VisuallyHidden>
14168
{ getTitle() }
14269
</Text>
143-
<div className="edit-site-document-actions__secondary-item">
144-
<BlockIcon icon={ icon } showColors />
145-
<Text size="body">{ label ?? '' }</Text>
146-
</div>
147-
148-
<Dropdown
149-
popoverProps={ popoverProps }
150-
renderToggle={ ( { isOpen, onToggle } ) => (
151-
<Button
152-
className="edit-site-document-actions__get-info"
153-
icon={ chevronDown }
154-
aria-expanded={ isOpen }
155-
aria-haspopup="true"
156-
onClick={ onToggle }
157-
variant={ showIconLabels ? 'tertiary' : undefined }
158-
label={ sprintf(
159-
/* translators: %s: the entity to see details about, like "template"*/
160-
__( 'Show %s details' ),
161-
entityLabel
162-
) }
163-
>
164-
{ showIconLabels && __( 'Details' ) }
165-
</Button>
166-
) }
167-
contentClassName="edit-site-document-actions__info-dropdown"
168-
renderContent={ ( { onClose } ) => (
169-
<TemplateDetails
170-
template={ record }
171-
onClose={ onClose }
172-
/>
173-
) }
174-
/>
175-
</div>
176-
</div>
70+
</HStack>
71+
<span className="edit-site-document-actions__shortcut">
72+
{ isMac ? '⌘' : 'Ctrl' } K
73+
</span>
74+
</Button>
17775
);
17876
}

‎packages/edit-site/src/components/header-edit-mode/document-actions/style.scss

+28-59
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,48 @@
11
.edit-site-document-actions {
22
display: flex;
3-
flex-direction: column;
4-
justify-content: center;
5-
padding: 0 $grid-unit;
6-
height: 100%;
3+
align-items: center;
4+
gap: $grid-unit;
5+
height: $button-size;
6+
padding: $grid-unit;
7+
justify-content: space-between;
78
// Flex items will, by default, refuse to shrink below a minimum
89
// intrinsic width. In order to shrink this flexbox item, and
910
// subsequently truncate child text, we set an explicit min-width.
1011
// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
1112
min-width: 0;
13+
background: $gray-100;
14+
border-radius: 4px;
15+
width: min(100%, 450px);
1216

13-
.edit-site-document-actions__title-wrapper {
14-
display: flex;
15-
flex-direction: row;
16-
justify-content: center;
17-
align-items: center;
18-
19-
// See comment above about min-width
20-
min-width: 0;
21-
22-
.components-dropdown {
23-
display: inline-flex;
24-
margin-left: $grid-unit-05;
25-
26-
.components-button {
27-
min-width: 0;
28-
padding: 0;
29-
}
30-
}
31-
}
32-
33-
.edit-site-document-actions__title-wrapper > h1 {
34-
margin: 0;
35-
36-
// See comment above about min-width
37-
min-width: 0;
38-
}
39-
40-
.edit-site-document-actions__title {
41-
white-space: nowrap;
42-
overflow: hidden;
43-
text-overflow: ellipsis;
17+
&:hover {
4418
color: currentColor;
19+
background: $gray-200;
4520
}
21+
}
4622

47-
.edit-site-document-actions__secondary-item {
48-
display: flex;
49-
align-items: center;
23+
.edit-site-document-actions__title {
24+
flex-grow: 1;
25+
color: var(--wp-block-synced-color);
26+
overflow: hidden;
27+
28+
h1 {
29+
color: var(--wp-block-synced-color);
5030
white-space: nowrap;
5131
overflow: hidden;
5232
text-overflow: ellipsis;
53-
max-width: 0;
54-
opacity: 0;
55-
padding: 0;
56-
transition: all ease 0.2s;
57-
background: rgba(var(--wp-block-synced-color--rgb), 0.04);
58-
border-radius: 2px;
59-
@include reduce-motion(transition);
60-
61-
.block-editor-block-icon.has-colors {
62-
color: var(--wp-block-synced-color);
63-
}
6433
}
34+
}
6535

66-
&.has-secondary-label {
67-
.edit-site-document-actions__secondary-item {
68-
opacity: 1;
69-
padding: 0 4px;
70-
max-width: 180px;
71-
margin-left: 6px;
72-
}
36+
.edit-site-document-actions__shortcut {
37+
flex-shrink: 0;
38+
color: $gray-700;
39+
width: #{$grid-unit * 4.5};
40+
&:hover {
41+
color: $gray-700;
7342
}
7443
}
7544

76-
.edit-site-document-actions__info-dropdown > .components-popover__content {
77-
padding: 0;
78-
min-width: 240px;
45+
.edit-site-document-actions__left {
46+
min-width: $button-size;
47+
flex-shrink: 0;
7948
}

‎packages/edit-site/src/components/header-edit-mode/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ $header-toolbar-min-width: 335px;
2727
align-items: center;
2828
height: 100%;
2929
flex-grow: 1;
30+
margin: 0 $grid-unit-10;
3031
justify-content: center;
3132
// Flex items will, by default, refuse to shrink below a minimum
3233
// intrinsic width. In order to shrink this flexbox item, and

‎packages/edit-site/src/components/template-details/edit-template-title.js

-41
This file was deleted.

0 commit comments

Comments
 (0)