Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move post/page title to top toolbar #46135

Closed
wants to merge 8 commits into from
Closed

Move post/page title to top toolbar #46135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9b56f36
Move post/page title to top bar
artemiomorales Nov 28, 2022
cbd4d91
Prevent erroneous display of aria-label
artemiomorales Nov 28, 2022
6f31274
Add style variant to dropdown button
artemiomorales Nov 28, 2022
7e47c77
Remove dropdown and convert title to input field
artemiomorales Nov 30, 2022
d16216d
Add tooltip, revise label for a11y, revise styles
artemiomorales Dec 5, 2022
6cd9e5c
Style adjustments
jameskoster Dec 5, 2022
8dcc497
Fix wrapping bug and widen title input
artemiomorales Dec 5, 2022
42cd7a1
Hide inspector button below medium breakpoint
artemiomorales Dec 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/edit-post/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@wordpress/editor": "file:../editor",
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
"@wordpress/html-entities": "file:../html-entities",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/interface": "file:../interface",
Expand Down
33 changes: 31 additions & 2 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,16 @@ import {
EditorHistoryUndo,
store as editorStore,
} from '@wordpress/editor';
import { Button, ToolbarItem } from '@wordpress/components';
import {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason you are not using PostTitle from wordpress/editor in here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PostTitle contains block editor logic that, as far as I can tell, is not necessary for the functioning of this feature. With that in mind, it seemed like a good opportunity to simplify the codebase by removing reference to and potentially deprecating PostTitle.

There may be onPaste or accessibility logic within PostTitle that could be of use here, but overall I figured this pull request could be the start of the conversation to see what might be the best way to approach, whether to revise PostTitle, remove it, or revise our approach to this feature altogether.

Am happy to hear additional thoughts!

Button,
ToolbarItem,
TextControl,
Tooltip,
} from '@wordpress/components';
import { listView, plus } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
Expand All @@ -30,9 +36,11 @@ const preventDefault = ( event ) => {

function HeaderToolbar() {
const inserterButton = useRef();
const { editPost } = useDispatch( editorStore );
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editPostStore );
const {
title,
isInserterEnabled,
isInserterOpened,
isTextModeEnabled,
Expand All @@ -42,12 +50,14 @@ function HeaderToolbar() {
} = useSelect( ( select ) => {
const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
select( blockEditorStore );
const { getEditorSettings } = select( editorStore );
const { getEditedPostAttribute, getEditorSettings } =
select( editorStore );
const { getEditorMode, isFeatureActive, isListViewOpened } =
select( editPostStore );
const { getShortcutRepresentation } = select( keyboardShortcutsStore );

return {
title: getEditedPostAttribute( 'title' ),
// This setting (richEditingEnabled) should not live in the block editor's setting.
isInserterEnabled:
getEditorMode() === 'visual' &&
Expand Down Expand Up @@ -152,6 +162,25 @@ function HeaderToolbar() {
</>
) }
</div>
<div className="edit-post-header-toolbar__center">
<Tooltip position="bottom center" text={ __( 'Edit title' ) }>
<div className="edit-post-header__edit-title">
<TextControl
value={
title !== ''
? decodeEntities( title )
: 'Untitled'
}
label={ __( 'Edit title' ) }
hideLabelFromVision={ true }
onChange={ ( newTitle ) =>
editPost( { title: newTitle } )
}
size={ title.length }
/>
</div>
</Tooltip>
</div>
</NavigableToolbar>
);
}
Expand Down
38 changes: 37 additions & 1 deletion packages/edit-post/src/components/header/header-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
.edit-post-header-toolbar {
display: inline-flex;
flex-grow: 1;
flex-basis: min-content;
align-items: center;
border: none;

// Hide all action buttons except the inserter on mobile.
.edit-post-header-toolbar__left > .components-button {
display: none;

@include break-small() {
@include break-medium() {
display: inline-flex;
}
}
Expand Down Expand Up @@ -58,6 +59,7 @@
display: none;
}
}

}

// Reduced UI.
Expand Down Expand Up @@ -110,3 +112,37 @@
.show-icon-labels .edit-post-header-toolbar__left > * + * {
margin-left: $grid-unit-10;
}

.edit-post-header-toolbar__center {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;

.edit-post-header__edit-title {
.components-base-control {
.css-10urnh1-StyledField-deprecatedMarginField {
margin-bottom: 0;

.components-text-control__input {
text-align: center;
color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
border: none;
min-height: $button-size;
text-overflow: ellipsis;
max-width: 800px;
&:hover {
cursor: pointer;
}

&:focus {
background: $gray-100;
box-shadow: none;
color: var(--wp--preset--color--contrast);
cursor: text;
}
}
}
}
}
}
9 changes: 9 additions & 0 deletions packages/edit-post/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
.edit-post-header__toolbar {
display: flex;
flex-grow: 1;
flex-basis: min-content;

.table-of-contents {
display: none;
Expand Down Expand Up @@ -63,6 +64,14 @@
@include break-small() {
gap: $grid-unit-10;
}

.interface-pinned-items .components-button {
display: none;

@include break-medium {
display: block;
}
}
}

.edit-post-header-preview__grouping-external {
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-post/src/components/text-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import {
PostTextEditor,
PostTitle,
TextEditorGlobalKeyboardShortcuts,
store as editorStore,
} from '@wordpress/editor';
Expand Down Expand Up @@ -39,7 +38,6 @@ export default function TextEditor() {
</div>
) }
<div className="edit-post-text-editor__body">
<PostTitle />
<PostTextEditor />
</div>
</div>
Expand Down
5 changes: 1 addition & 4 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import classnames from 'classnames';
*/
import {
VisualEditorGlobalKeyboardShortcuts,
PostTitle,
store as editorStore,
} from '@wordpress/editor';
import {
Expand Down Expand Up @@ -376,9 +375,7 @@ export default function VisualEditor( { styles } ) {
}
) }
contentEditable={ false }
>
<PostTitle ref={ titleRef } />
</div>
></div>
) }
<RecursionProvider
blockName={ wrapperBlockName }
Expand Down