From 9b56f368c8b84fb977bad43a6504c14af589610e Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Mon, 28 Nov 2022 14:58:08 -0500 Subject: [PATCH 1/8] Move post/page title to top bar The title's position in the editor can be inaccurate depending on how themes are styled; to more accurately represent how a post will look when published, this commit moves the title from the editor body to the top toolbar. This mirrors the treatment for the toolbar in Full Site Editing. For reference, see edit-site/ header-edit-mode/document-actions. --- packages/edit-post/package.json | 1 + .../components/header/header-toolbar/index.js | 59 ++++++++++++++++++- .../header/header-toolbar/style.scss | 12 ++++ .../src/components/text-editor/index.js | 2 - .../src/components/visual-editor/index.js | 5 +- 5 files changed, 70 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 3414e958344d2..cb652c8e30a10 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -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", diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index b4d30adc20244..0e34c042f953d 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -14,10 +14,18 @@ import { EditorHistoryUndo, store as editorStore, } from '@wordpress/editor'; -import { Button, ToolbarItem } from '@wordpress/components'; -import { listView, plus } from '@wordpress/icons'; +import { + Button, + ToolbarItem, + Dropdown, + VisuallyHidden, + TextControl, + __experimentalText as Text, +} from '@wordpress/components'; +import { chevronDown, 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 @@ -30,9 +38,12 @@ const preventDefault = ( event ) => { function HeaderToolbar() { const inserterButton = useRef(); + const centerToolbar = useRef(); + const { editPost } = useDispatch( editorStore ); const { setIsInserterOpened, setIsListViewOpened } = useDispatch( editPostStore ); const { + title, isInserterEnabled, isInserterOpened, isTextModeEnabled, @@ -42,12 +53,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' && @@ -152,6 +165,46 @@ function HeaderToolbar() { ) } +
+ + + { __( 'Editing: ' ) } + + { title !== '' + ? decodeEntities( title ) + : __( '(Untitled Document)' ) } + + ( + + ) } + contentClassName="edit-post-header-toolbar__title-dropdown" + renderContent={ () => ( + + editPost( { title: newTitle } ) + } + /> + ) } + /> +
); } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 87aec00004c02..d39696a67a91d 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -110,3 +110,15 @@ .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-toolbar__title-dropdown > .components-popover__content { + min-width: 240px; + padding: 16px; +} diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js index 9c9b3c29e9948..c95e927095695 100644 --- a/packages/edit-post/src/components/text-editor/index.js +++ b/packages/edit-post/src/components/text-editor/index.js @@ -3,7 +3,6 @@ */ import { PostTextEditor, - PostTitle, TextEditorGlobalKeyboardShortcuts, store as editorStore, } from '@wordpress/editor'; @@ -39,7 +38,6 @@ export default function TextEditor() { ) }
-
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 8062e9d51dada..7694b7801d5c5 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -8,7 +8,6 @@ import classnames from 'classnames'; */ import { VisualEditorGlobalKeyboardShortcuts, - PostTitle, store as editorStore, } from '@wordpress/editor'; import { @@ -376,9 +375,7 @@ export default function VisualEditor( { styles } ) { } ) } contentEditable={ false } - > - - + > ) } Date: Mon, 28 Nov 2022 14:59:07 -0500 Subject: [PATCH 2/8] Prevent erroneous display of aria-label When 'Show button text labels' is enabled in the Gutenberg preferences, it causes the aria-label to display beside the dropdown button unnecessarily. This commit adds a style to prevent the aria-label from appearing. --- .../src/components/header/header-toolbar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index d39696a67a91d..fc925e571f341 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -58,6 +58,11 @@ display: none; } } + + .edit-post-header-toolbar__center .components-button.has-icon::after { + content: none; + } + } // Reduced UI. From 6f31274d3fb01a306e1619c7d0ef6cdb1c4b2582 Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Mon, 28 Nov 2022 15:58:29 -0500 Subject: [PATCH 3/8] Add style variant to dropdown button --- packages/edit-post/src/components/header/header-toolbar/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 0e34c042f953d..71aef3e16c98a 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -188,6 +188,7 @@ function HeaderToolbar() { aria-expanded={ isOpen } aria-haspopup="true" onClick={ onToggle } + variant={ showIconLabels ? 'tertiary' : undefined } label={ __( 'Edit document details' ) } > { showIconLabels && __( 'Details' ) } From 7e47c7763ceed103f62df955877550acfc6da737 Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Wed, 30 Nov 2022 15:31:54 -0500 Subject: [PATCH 4/8] Remove dropdown and convert title to input field --- .../components/header/header-toolbar/index.js | 58 +++---------------- .../header/header-toolbar/style.scss | 21 ++++--- 2 files changed, 22 insertions(+), 57 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 71aef3e16c98a..6defcb1f5f611 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -14,15 +14,8 @@ import { EditorHistoryUndo, store as editorStore, } from '@wordpress/editor'; -import { - Button, - ToolbarItem, - Dropdown, - VisuallyHidden, - TextControl, - __experimentalText as Text, -} from '@wordpress/components'; -import { chevronDown, listView, plus } from '@wordpress/icons'; +import { Button, ToolbarItem, TextControl } 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'; @@ -38,7 +31,6 @@ const preventDefault = ( event ) => { function HeaderToolbar() { const inserterButton = useRef(); - const centerToolbar = useRef(); const { editPost } = useDispatch( editorStore ); const { setIsInserterOpened, setIsListViewOpened } = useDispatch( editPostStore ); @@ -165,45 +157,13 @@ function HeaderToolbar() { ) } -
- - - { __( 'Editing: ' ) } - - { title !== '' - ? decodeEntities( title ) - : __( '(Untitled Document)' ) } - - ( - - ) } - contentClassName="edit-post-header-toolbar__title-dropdown" - renderContent={ () => ( - - editPost( { title: newTitle } ) - } - /> - ) } +
+ editPost( { title: newTitle } ) } />
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index fc925e571f341..863d876b02d6a 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -59,10 +59,6 @@ } } - .edit-post-header-toolbar__center .components-button.has-icon::after { - content: none; - } - } // Reduced UI. @@ -121,9 +117,18 @@ display: flex; align-items: center; justify-content: center; -} -.edit-post-header-toolbar__title-dropdown > .components-popover__content { - min-width: 240px; - padding: 16px; + .components-base-control { + width: 50%; + + .css-10urnh1-StyledField-deprecatedMarginField { + margin-bottom: 0; + + .components-text-control__input { + text-align: center; + } + } + + } + } From d16216d47b82da04d03d53e0c90eb12e566e5f8a Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Sun, 4 Dec 2022 20:24:32 -0500 Subject: [PATCH 5/8] Add tooltip, revise label for a11y, revise styles --- .../components/header/header-toolbar/index.js | 30 ++++++++++++++----- .../header/header-toolbar/style.scss | 30 ++++++++++++------- 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 6defcb1f5f611..47dc47b2789b3 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -14,7 +14,12 @@ import { EditorHistoryUndo, store as editorStore, } from '@wordpress/editor'; -import { Button, ToolbarItem, TextControl } from '@wordpress/components'; +import { + 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'; @@ -158,13 +163,22 @@ function HeaderToolbar() { ) }
- editPost( { title: newTitle } ) } - /> + +
+ + editPost( { title: newTitle } ) + } + /> +
+
); diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 863d876b02d6a..02dfa4b1329dd 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -118,17 +118,27 @@ align-items: center; justify-content: center; - .components-base-control { - width: 50%; - - .css-10urnh1-StyledField-deprecatedMarginField { - margin-bottom: 0; - - .components-text-control__input { - text-align: center; + .edit-post-header__edit-title { + width: 98%; + + .components-base-control { + width: 100%; + + .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; + + &:focus { + background: #ececec; + box-shadow: none; + color: var(--wp--preset--color--contrast); + } + } } } - } - } From 6cd9e5cda02215f24a641526cd76a6c48953d05c Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 5 Dec 2022 11:26:30 +0000 Subject: [PATCH 6/8] Style adjustments --- .../components/header/header-toolbar/style.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 02dfa4b1329dd..8355d81d619c9 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -119,11 +119,7 @@ justify-content: center; .edit-post-header__edit-title { - width: 98%; - .components-base-control { - width: 100%; - .css-10urnh1-StyledField-deprecatedMarginField { margin-bottom: 0; @@ -131,11 +127,21 @@ text-align: center; color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); border: none; + width: auto; + min-height: $button-size; + &:hover { + cursor: pointer; + } &:focus { - background: #ececec; + background: $gray-100; box-shadow: none; color: var(--wp--preset--color--contrast); + cursor: text; + + @include break-xlarge() { + width: 400px; + } } } } From 8dcc497b3d1fea8c1f9b28b634bfe8d79ca19006 Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Mon, 5 Dec 2022 16:36:24 -0500 Subject: [PATCH 7/8] Fix wrapping bug and widen title input Revised styles so that items in the header don't wrap, allowing the left and center parts of the toolbar to shrink as needed. We also now hide the undo, redo, mode switcher, and Inspector buttons at resolutions below the medium breakpoint. Also, I made it so more characters are visible in the title, and added ellipsis when the title overflows. --- .../src/components/header/header-toolbar/index.js | 1 + .../src/components/header/header-toolbar/style.scss | 10 ++++------ packages/edit-post/src/components/header/style.scss | 1 + 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 47dc47b2789b3..dbe385e051f76 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -176,6 +176,7 @@ function HeaderToolbar() { onChange={ ( newTitle ) => editPost( { title: newTitle } ) } + size={ title.length } /> diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 8355d81d619c9..d3d005c87a7a2 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -1,6 +1,7 @@ .edit-post-header-toolbar { display: inline-flex; flex-grow: 1; + flex-basis: min-content; align-items: center; border: none; @@ -8,7 +9,7 @@ .edit-post-header-toolbar__left > .components-button { display: none; - @include break-small() { + @include break-medium() { display: inline-flex; } } @@ -127,8 +128,9 @@ text-align: center; color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); border: none; - width: auto; min-height: $button-size; + text-overflow: ellipsis; + max-width: 800px; &:hover { cursor: pointer; } @@ -138,10 +140,6 @@ box-shadow: none; color: var(--wp--preset--color--contrast); cursor: text; - - @include break-xlarge() { - width: 400px; - } } } } diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 160543684a702..1234b60898605 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -34,6 +34,7 @@ .edit-post-header__toolbar { display: flex; flex-grow: 1; + flex-basis: min-content; .table-of-contents { display: none; From 42cd7a11bcd70fee875f1cf3a15ee36b5943b6fb Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Tue, 6 Dec 2022 15:41:10 -0500 Subject: [PATCH 8/8] Hide inspector button below medium breakpoint --- packages/edit-post/src/components/header/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 1234b60898605..f2c257db543d8 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -64,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 {