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

Post Editor: Persistent list view #31047

Merged
merged 13 commits into from
May 17, 2021
Merged

Post Editor: Persistent list view #31047

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
331a114
Move the Inserter sidebar in its own file
Copons Apr 21, 2021
772d9b1
Add the new list view state
Copons Apr 21, 2021
1b23af9
Add the list view sidebar
Copons Apr 21, 2021
6588e6b
Bring changes to the e2e tests
Copons Apr 21, 2021
b0b5419
Fix incorrect class name
Copons Apr 21, 2021
9861d4e
Add missing dependencies array
Copons Apr 22, 2021
dd097e0
Fix shortcuts
Copons Apr 22, 2021
e5b0d44
On select block, move caret to the end of its text
Copons Apr 22, 2021
bd38655
Fix e2e test
Copons Apr 23, 2021
0e4e6bb
Fix incorrect action prop
Copons Apr 26, 2021
bac2925
update edit-post-layout references
ntsekouras May 17, 2021
b928438
fix e2e tests
ntsekouras May 17, 2021
29d945b
Merge branch 'trunk' into update/post-editor-persistent-list-view
ntsekouras May 17, 2021
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
23 changes: 1 addition & 22 deletions packages/block-editor/src/components/block-navigation/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@
import { Button, Dropdown } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import {
useShortcut,
store as keyboardShortcutsStore,
} from '@wordpress/keyboard-shortcuts';
import { useCallback, forwardRef } from '@wordpress/element';
import { forwardRef } from '@wordpress/element';
import { listView } from '@wordpress/icons';

/**
Expand All @@ -24,22 +20,6 @@ function BlockNavigationDropdownToggle( {
innerRef,
...props
} ) {
useShortcut(
'core/edit-post/toggle-block-navigation',
useCallback( onToggle, [ onToggle ] ),
{
bindGlobal: true,
isDisabled: ! isEnabled,
}
);
const shortcut = useSelect(
( select ) =>
select( keyboardShortcutsStore ).getShortcutRepresentation(
'core/edit-post/toggle-block-navigation'
),
[]
);

return (
<Button
{ ...props }
Expand All @@ -51,7 +31,6 @@ function BlockNavigationDropdownToggle( {
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List view' ) }
className="block-editor-block-navigation"
shortcut={ shortcut }
aria-disabled={ ! isEnabled }
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/blocks/columns.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe( 'Columns', () => {
await insertBlock( 'Columns' );
await closeGlobalBlockInserter();
await page.click( '[aria-label="Two columns; equal split"]' );
await page.click( '[aria-label="List view"]' );
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
const columnBlockMenuItem = (
await page.$x(
'//button[contains(concat(" ", @class, " "), " block-editor-block-navigation-block-select-button ")][text()="Column"]'
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/blocks/cover.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe( 'Cover', () => {
);

// Select the cover block.By default the child paragraph gets selected.
await page.click( 'button[aria-label="List view"]' );
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
await page.click(
'.block-editor-block-navigation-block__contents-container button'
);
Expand Down
17 changes: 13 additions & 4 deletions packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.type( 'First column' );

// Navigate to the columns blocks.
await page.click( '[aria-label="List view"]' );
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
const columnsBlockMenuItem = (
await page.$x(
"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Columns')]"
Expand All @@ -68,8 +68,13 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.up( 'Shift' );
await page.keyboard.type( '3' );

// Wait for the new column block to appear in the list view
// 5 = Columns, Column, Paragraph, Column, *Column*
await page.waitForSelector(
'tr.block-editor-block-navigation-leaf:nth-of-type(5)'
);

// Navigate to the last column block.
await page.click( '[aria-label="List view"]' );
const lastColumnsBlockMenuItem = (
await page.$x(
"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Column')]"
Expand Down Expand Up @@ -103,6 +108,7 @@ describe( 'Navigating the block hierarchy', () => {

// Navigate to the columns blocks using the keyboard.
await openBlockNavigator();
await pressKeyTimes( 'ArrowUp', 2 );
await page.keyboard.press( 'Enter' );

// Move focus to the sidebar area.
Expand All @@ -115,7 +121,9 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.press( 'ArrowRight' );

// Navigate to the last column in the columns block.
await openBlockNavigator();
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyWithModifier( 'ctrl', '`' );
await pressKeyTimes( 'Tab', 2 );
await pressKeyTimes( 'ArrowDown', 4 );
await page.keyboard.press( 'Enter' );
await page.waitForSelector( '.is-selected[data-type="core/column"]' );
Expand Down Expand Up @@ -145,6 +153,7 @@ describe( 'Navigating the block hierarchy', () => {

// Return to first block.
await openBlockNavigator();
await page.keyboard.press( 'ArrowUp' );
await page.keyboard.press( 'Space' );

// Replace its content.
Expand Down Expand Up @@ -175,7 +184,7 @@ describe( 'Navigating the block hierarchy', () => {
await page.click( '.editor-post-title' );

// Try selecting the group block using the Outline
await page.click( '[aria-label="List view"]' );
await page.click( '.edit-post-header-toolbar__list-view-toggle' );
const groupMenuItem = (
await page.$x(
"//button[contains(@class,'block-editor-block-navigation-block-select-button') and contains(text(), 'Group')]"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ describe( 'Inserting blocks', () => {
);
await browseAll.click();
const inserterMenuInputSelector =
'.edit-post-layout__inserter-panel .block-editor-inserter__search-input';
'.edit-post-editor__inserter-panel .block-editor-inserter__search-input';
const inserterMenuSearchInput = await page.waitForSelector(
inserterMenuInputSelector
);
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/specs/experiments/document-settings.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ describe( 'Document Settings', () => {
describe( 'and a template part is clicked in the template', () => {
it.skip( "should display the selected template part's name in the document header", async () => {
// Select the header template part via list view.
await page.click( 'button[aria-label="List View"]' );
await page.click(
'.edit-post-header-toolbar__list-view-toggle'
);
const headerTemplatePartListViewButton = await page.waitForXPath(
'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
);
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ describe( 'Multi-entity save flow', () => {
await navigationPanel.clickItemByText( 'Index' );

// Select the header template part via list view.
await page.click( 'button[aria-label="List View"]' );
await page.click( '.edit-site-header-toolbar__list-view-toggle' );
const headerTemplatePartListViewButton = await page.waitForXPath(
'//button[contains(@class, "block-editor-block-navigation-block-select-button")][contains(., "Header")]'
);
Expand Down
43 changes: 30 additions & 13 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 @@ -6,18 +6,19 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { __, _x } from '@wordpress/i18n';
import {
NavigableToolbar,
BlockNavigationDropdown,
ToolSelector,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
TableOfContents,
EditorHistoryRedo,
EditorHistoryUndo,
store as editorStore,
} from '@wordpress/editor';
import { Button, ToolbarItem } from '@wordpress/components';
import { plus } from '@wordpress/icons';
import { listView, plus } from '@wordpress/icons';
import { useRef } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';

/**
* Internal dependencies
Expand All @@ -27,32 +28,42 @@ import { store as editPostStore } from '../../../store';

function HeaderToolbar() {
const inserterButton = useRef();
const { setIsInserterOpened } = useDispatch( editPostStore );
const { setIsInserterOpened, setIsListViewOpened } = useDispatch(
editPostStore
);
const {
isInserterEnabled,
isInserterOpened,
isTextModeEnabled,
showIconLabels,
isListViewOpen,
listViewShortcut,
} = useSelect( ( select ) => {
const {
hasInserterItems,
getBlockRootClientId,
getBlockSelectionEnd,
} = select( blockEditorStore );
const { getEditorSettings } = select( editorStore );
const { getEditorMode, isFeatureActive, isListViewOpened } = select(
editPostStore
);
const { getShortcutRepresentation } = select( keyboardShortcutsStore );

return {
// This setting (richEditingEnabled) should not live in the block editor's setting.
isInserterEnabled:
select( editPostStore ).getEditorMode() === 'visual' &&
select( 'core/editor' ).getEditorSettings()
.richEditingEnabled &&
getEditorMode() === 'visual' &&
getEditorSettings().richEditingEnabled &&
hasInserterItems(
getBlockRootClientId( getBlockSelectionEnd() )
),
isInserterOpened: select( editPostStore ).isInserterOpened(),
isTextModeEnabled:
select( editPostStore ).getEditorMode() === 'text',
showIconLabels: select( editPostStore ).isFeatureActive(
'showIconLabels'
isTextModeEnabled: getEditorMode() === 'text',
showIconLabels: isFeatureActive( 'showIconLabels' ),
isListViewOpen: isListViewOpened(),
listViewShortcut: getShortcutRepresentation(
'core/edit-post/toggle-block-navigation'
),
};
}, [] );
Expand All @@ -72,10 +83,16 @@ function HeaderToolbar() {
isTertiary={ showIconLabels }
/>
<ToolbarItem
as={ BlockNavigationDropdown }
isDisabled={ isTextModeEnabled }
as={ Button }
Copy link
Contributor

Choose a reason for hiding this comment

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

Just curious here if we should use ToolbarButton here now instead of ToolbarItem. --cc @diegohaz

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, interesting!
Is there a reason why all the HeaderToolbar items are still ToolbarItem? At a quick glance it seems they could easily be ToolbarButton instead.

className="edit-post-header-toolbar__list-view-toggle"
icon={ listView }
disabled={ isTextModeEnabled }
isPressed={ isListViewOpen }
/* translators: button label text should, if possible, be under 16 characters. */
label={ __( 'List View' ) }
onClick={ () => setIsListViewOpened( ! isListViewOpen ) }
shortcut={ listViewShortcut }
showTooltip={ ! showIconLabels }
isTertiary={ showIconLabels }
/>
</>
);
Expand Down
19 changes: 16 additions & 3 deletions packages/edit-post/src/components/keyboard-shortcuts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,24 @@ import {
store as keyboardShortcutsStore,
} from '@wordpress/keyboard-shortcuts';
import { __ } from '@wordpress/i18n';
import { store as editorStore } from '@wordpress/editor';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../store';

function KeyboardShortcuts() {
const { getBlockSelectionStart } = useSelect( 'core/block-editor' );
const { getEditorMode, isEditorSidebarOpened } = useSelect( editPostStore );
const { getBlockSelectionStart } = useSelect( blockEditorStore );
const {
getEditorMode,
isEditorSidebarOpened,
isListViewOpened,
} = useSelect( editPostStore );
const isModeToggleDisabled = useSelect( ( select ) => {
const { richEditingEnabled, codeEditingEnabled } = select(
'core/editor'
editorStore
).getEditorSettings();
return ! richEditingEnabled || ! codeEditingEnabled;
}, [] );
Expand All @@ -29,6 +35,7 @@ function KeyboardShortcuts() {
openGeneralSidebar,
closeGeneralSidebar,
toggleFeature,
setIsListViewOpened,
} = useDispatch( editPostStore );
const { registerShortcut } = useDispatch( keyboardShortcutsStore );

Expand Down Expand Up @@ -158,6 +165,12 @@ function KeyboardShortcuts() {
{ bindGlobal: true }
);

useShortcut(
Copons marked this conversation as resolved.
Show resolved Hide resolved
'core/edit-post/toggle-block-navigation',
() => setIsListViewOpened( ! isListViewOpened() ),
{ bindGlobal: true }
);

return null;
}

Expand Down
Loading