From ad8819df5a01f59448a268f66420e9c26c406819 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 1 Nov 2023 16:23:26 -0400
Subject: [PATCH 01/23] implement Tabs in editor settings sidebar
---
.../sidebar/settings-header/index.js | 94 ++++++++++---------
.../sidebar/settings-sidebar/index.js | 82 ++++++++++------
2 files changed, 103 insertions(+), 73 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index ef32450e7209f..5c591753b0e91 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -1,7 +1,10 @@
/**
* WordPress dependencies
*/
-import { Button } from '@wordpress/components';
+import {
+ Button,
+ privateApis as componentsPrivateApis,
+} from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
@@ -10,6 +13,9 @@ import { store as editorStore } from '@wordpress/editor';
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
const SettingsHeader = ( { sidebarName } ) => {
const { openGeneralSidebar } = useDispatch( editPostStore );
@@ -27,66 +33,68 @@ const SettingsHeader = ( { sidebarName } ) => {
};
}, [] );
- const [ documentAriaLabel, documentActiveClass ] =
+ const [ documentAriaLabel ] =
sidebarName === 'edit-post/document'
? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
[ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ]
: [ documentLabel, '' ];
- const [ blockAriaLabel, blockActiveClass ] =
+ const [ blockAriaLabel ] =
sidebarName === 'edit-post/block'
? // translators: ARIA label for the Block Settings Sidebar tab, selected.
[ __( 'Block (selected)' ), 'is-active' ]
: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
[ __( 'Block' ), '' ];
- const [ templateAriaLabel, templateActiveClass ] =
+ const [ templateAriaLabel ] =
sidebarName === 'edit-post/document'
? [ __( 'Template (selected)' ), 'is-active' ]
: [ __( 'Template' ), '' ];
- /* Use a list so screen readers will announce how many tabs there are. */
return (
-
- { ! isTemplateMode && (
- -
-
-
- ) }
- { isTemplateMode && (
- -
-
-
- ) }
- -
-
}
-
-
-
+ >
+ { /* translators: Text label for the Block Settings Sidebar tab. */ }
+ { __( 'Block' ) }
+
+
+
);
};
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index e566ea400c12b..bf236157d5145 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -6,7 +6,7 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
-import { Platform } from '@wordpress/element';
+import { Platform, useContext } from '@wordpress/element';
import { isRTL, __ } from '@wordpress/i18n';
import { drawerLeft, drawerRight } from '@wordpress/icons';
import { store as interfaceStore } from '@wordpress/interface';
@@ -29,6 +29,10 @@ import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
import PluginSidebarEditPost from '../plugin-sidebar';
import TemplateSummary from '../template-summary';
import { store as editPostStore } from '../../../store';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
web: true,
@@ -72,36 +76,54 @@ const SettingsSidebar = () => {
[]
);
+ const Content = () => {
+ const tabsContextValue = useContext( Tabs.Context );
+
+ return (
+
+
+
+ }
+ closeLabel={ __( 'Close Settings' ) }
+ headerClassName="edit-post-sidebar__panel-tabs"
+ /* translators: button label text should, if possible, be under 16 characters. */
+ title={ __( 'Settings' ) }
+ toggleShortcut={ keyboardShortcut }
+ icon={ isRTL() ? drawerLeft : drawerRight }
+ isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+ >
+
+
+ { ! isTemplateMode && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ ) }
+ { isTemplateMode && }
+
+
+
+
+
+
+ );
+ };
+
return (
- }
- closeLabel={ __( 'Close Settings' ) }
- headerClassName="edit-post-sidebar__panel-tabs"
- /* translators: button label text should, if possible, be under 16 characters. */
- title={ __( 'Settings' ) }
- toggleShortcut={ keyboardShortcut }
- icon={ isRTL() ? drawerLeft : drawerRight }
- isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
- >
- { ! isTemplateMode && sidebarName === 'edit-post/document' && (
- <>
-
-
-
-
-
-
-
-
-
-
- ) }
- { isTemplateMode && sidebarName === 'edit-post/document' && (
-
- ) }
- { sidebarName === 'edit-post/block' && }
-
+
+
+
);
};
From 4cb5c69e350820f473b73d631362475cfe6cba3e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 1 Nov 2023 16:24:09 -0400
Subject: [PATCH 02/23] remove duplicated styles from editor sidebar
---
.../sidebar/settings-header/style.scss | 74 -------------------
packages/edit-post/src/style.scss | 1 -
2 files changed, 75 deletions(-)
delete mode 100644 packages/edit-post/src/components/sidebar/settings-header/style.scss
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
deleted file mode 100644
index aaf7698cb6ddb..0000000000000
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-// This tab style CSS is duplicated verbatim in
-// /packages/components/src/tab-panel/style.scss
-.components-button.edit-post-sidebar__panel-tab {
- position: relative;
- border-radius: 0;
- height: $grid-unit-60;
- background: transparent;
- border: none;
- box-shadow: none;
- cursor: pointer;
- padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
- margin-left: 0;
- font-weight: 500;
-
- &:focus:not(:disabled) {
- position: relative;
- box-shadow: none;
- outline: none;
- }
-
- // Tab indicator
- &::after {
- content: "";
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- pointer-events: none;
-
- // Draw the indicator.
- background: var(--wp-admin-theme-color);
- height: calc(0 * var(--wp-admin-border-width-focus));
- border-radius: 0;
-
- // Animation
- transition: all 0.1s linear;
- @include reduce-motion("transition");
- }
-
- // Active.
- &.is-active::after {
- height: calc(1 * var(--wp-admin-border-width-focus));
-
- // Windows high contrast mode.
- outline: 2px solid transparent;
- outline-offset: -1px;
- }
-
- // Focus.
- &::before {
- content: "";
- position: absolute;
- top: $grid-unit-15;
- right: $grid-unit-15;
- bottom: $grid-unit-15;
- left: $grid-unit-15;
- pointer-events: none;
-
- // Draw the indicator.
- box-shadow: 0 0 0 0 transparent;
- border-radius: $radius-block-ui;
-
- // Animation
- transition: all 0.1s linear;
- @include reduce-motion("transition");
- }
-
- &:focus-visible::before {
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
- // Windows high contrast mode.
- outline: 2px solid transparent;
- }
-}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 53219bc6a3736..88916bf70f76d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -12,7 +12,6 @@
@import "./components/sidebar/post-format/style.scss";
@import "./components/sidebar/post-slug/style.scss";
@import "./components/sidebar/post-visibility/style.scss";
-@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/template-summary/style.scss";
@import "./components/text-editor/style.scss";
@import "./components/visual-editor/style.scss";
From ddd8d7f7adfccd07d9e244d431e35386c95c6119 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 3 Nov 2023 11:03:10 -0400
Subject: [PATCH 03/23] incorporate initial feedback
---
.../sidebar/settings-header/index.js | 25 ++++++++-----------
.../sidebar/settings-sidebar/index.js | 3 +++
2 files changed, 13 insertions(+), 15 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index 5c591753b0e91..beb4ba3884188 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -33,23 +33,23 @@ const SettingsHeader = ( { sidebarName } ) => {
};
}, [] );
- const [ documentAriaLabel ] =
+ const documentAriaLabel =
sidebarName === 'edit-post/document'
? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
- [ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ]
- : [ documentLabel, '' ];
+ sprintf( __( '%s (selected)' ), documentLabel )
+ : documentLabel;
- const [ blockAriaLabel ] =
+ const blockAriaLabel =
sidebarName === 'edit-post/block'
? // translators: ARIA label for the Block Settings Sidebar tab, selected.
- [ __( 'Block (selected)' ), 'is-active' ]
+ __( 'Block (selected)' )
: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
- [ __( 'Block' ), '' ];
+ __( 'Block' );
- const [ templateAriaLabel ] =
+ const templateAriaLabel =
sidebarName === 'edit-post/document'
- ? [ __( 'Template (selected)' ), 'is-active' ]
- : [ __( 'Template' ), '' ];
+ ? __( 'Template (selected)' )
+ : __( 'Template' );
return (
<>
@@ -60,14 +60,12 @@ const SettingsHeader = ( { sidebarName } ) => {
isTemplateMode ? (
) : (
@@ -81,13 +79,10 @@ const SettingsHeader = ( { sidebarName } ) => {
render={
+ />
}
>
{ /* translators: Text label for the Block Settings Sidebar tab. */ }
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index bf236157d5145..473902a00ae70 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -77,6 +77,9 @@ const SettingsSidebar = () => {
);
const Content = () => {
+ // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
+ // need to forward the `Tabs` context so it can be passed through the
+ // underlying slot/fill.
const tabsContextValue = useContext( Tabs.Context );
return (
From 4142f5ae83d141367769957ce6449ee4082363b6 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 9 Nov 2023 16:57:15 -0500
Subject: [PATCH 04/23] pass props to Tabs directly
---
.../sidebar/settings-header/index.js | 37 ++++++-------------
1 file changed, 11 insertions(+), 26 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index beb4ba3884188..aa1143482e97d 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -1,10 +1,7 @@
/**
* WordPress dependencies
*/
-import {
- Button,
- privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
@@ -56,34 +53,22 @@ const SettingsHeader = ( { sidebarName } ) => {
- ) : (
-
- )
+ onClick={ openDocumentSettings }
+ aria-label={
+ isTemplateMode ? templateAriaLabel : documentAriaLabel
+ }
+ data-label={
+ isTemplateMode ? __( 'Template' ) : documentLabel
}
>
{ isTemplateMode ? __( 'Template' ) : documentLabel }
- }
+ onClick={ openBlockSettings }
+ aria-label={ blockAriaLabel }
+ // translators: Data label for the Block Settings Sidebar tab.
+ data-label={ __( 'Block' ) }
>
{ /* translators: Text label for the Block Settings Sidebar tab. */ }
{ __( 'Block' ) }
From b67019bb14d339a1761d9435c8a74a618cef4dea Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 16 Nov 2023 14:29:56 -0500
Subject: [PATCH 05/23] add `closeGeneralSidebar` to `onSelect` callback
---
.../src/components/sidebar/settings-header/index.js | 9 +--------
.../src/components/sidebar/settings-sidebar/index.js | 10 ++++++++--
2 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index aa1143482e97d..5cefbd9aa5f5d 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -3,7 +3,7 @@
*/
import { privateApis as componentsPrivateApis } from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
/**
@@ -15,11 +15,6 @@ import { unlock } from '../../../lock-unlock';
const { Tabs } = unlock( componentsPrivateApis );
const SettingsHeader = ( { sidebarName } ) => {
- const { openGeneralSidebar } = useDispatch( editPostStore );
- const openDocumentSettings = () =>
- openGeneralSidebar( 'edit-post/document' );
- const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
-
const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
const { getPostTypeLabel, getRenderingMode } = select( editorStore );
@@ -53,7 +48,6 @@ const SettingsHeader = ( { sidebarName } ) => {
{
{
);
};
+ const { openGeneralSidebar } = useDispatch( editPostStore );
return (
-
+ {
+ openGeneralSidebar( selectedId );
+ } }
+ >
);
From b9723d7a4f239c76931ca59512208eca638f52e2 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:18:00 -0500
Subject: [PATCH 06/23] set TabPanels to `focuasable={false}`
---
.../src/components/sidebar/settings-sidebar/index.js | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 514ee60b7bcf1..d6b3a3437b03e 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -99,7 +99,10 @@ const SettingsSidebar = () => {
isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
>
-
+
{ ! isTemplateMode && (
<>
@@ -115,7 +118,7 @@ const SettingsSidebar = () => {
) }
{ isTemplateMode && }
-
+
From 1fbbef4f8d1e0cf8caae30ce4de6a8745cfe3835 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:28:08 -0500
Subject: [PATCH 07/23] detect when sidebar is closed. pass `selectedTabId` of
`null`
---
.../src/components/sidebar/settings-sidebar/index.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index d6b3a3437b03e..dc15a2d14500e 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -40,8 +40,8 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
} );
const SettingsSidebar = () => {
- const { sidebarName, keyboardShortcut, isTemplateMode } = useSelect(
- ( select ) => {
+ const { sidebarName, isSidebarOpen, keyboardShortcut, isTemplateMode } =
+ useSelect( ( select ) => {
// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
// If one of the two sidebars is active the component will contain the content of that sidebar.
@@ -52,6 +52,7 @@ const SettingsSidebar = () => {
let sidebar = select( interfaceStore ).getActiveComplementaryArea(
editPostStore.name
);
+ const isOpen = sidebar !== null;
if (
! [ 'edit-post/document', 'edit-post/block' ].includes(
sidebar
@@ -67,14 +68,13 @@ const SettingsSidebar = () => {
).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
return {
sidebarName: sidebar,
+ isSidebarOpen: isOpen,
keyboardShortcut: shortcut,
isTemplateMode:
select( editorStore ).getRenderingMode() ===
'template-only',
};
- },
- []
- );
+ }, [] );
const Content = () => {
// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
@@ -129,7 +129,7 @@ const SettingsSidebar = () => {
const { openGeneralSidebar } = useDispatch( editPostStore );
return (
{
openGeneralSidebar( selectedId );
} }
From f3fea729e97e45233976e79e5bac87f7571fae0f Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:33:25 -0500
Subject: [PATCH 08/23] improve `Tabs` `onSelect` callback
---
.../components/sidebar/settings-sidebar/index.js | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index dc15a2d14500e..823b3523b8255 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -6,7 +6,7 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
-import { Platform, useContext } from '@wordpress/element';
+import { Platform, useCallback, useContext } from '@wordpress/element';
import { isRTL, __ } from '@wordpress/i18n';
import { drawerLeft, drawerRight } from '@wordpress/icons';
import { store as interfaceStore } from '@wordpress/interface';
@@ -127,12 +127,20 @@ const SettingsSidebar = () => {
};
const { openGeneralSidebar } = useDispatch( editPostStore );
+
+ const onTabSelect = useCallback(
+ ( newSelectedTabId ) => {
+ if ( !! newSelectedTabId ) {
+ openGeneralSidebar( newSelectedTabId );
+ }
+ },
+ [ openGeneralSidebar ]
+ );
+
return (
{
- openGeneralSidebar( selectedId );
- } }
+ onSelect={ onTabSelect }
>
From a01b24c757015f9aa690f89f0c424835e2f6969b Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 17 Nov 2023 14:33:30 -0500
Subject: [PATCH 09/23] remove `aria-label` and `data-label` props
---
.../sidebar/settings-header/index.js | 40 +++----------------
.../sidebar/settings-sidebar/index.js | 23 +++++------
2 files changed, 15 insertions(+), 48 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index 5cefbd9aa5f5d..7136275f683f2 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
@@ -11,10 +11,11 @@ import { store as editorStore } from '@wordpress/editor';
*/
import { store as editPostStore } from '../../../store';
import { unlock } from '../../../lock-unlock';
+import { sidebars } from '../settings-sidebar';
const { Tabs } = unlock( componentsPrivateApis );
-const SettingsHeader = ( { sidebarName } ) => {
+const SettingsHeader = () => {
const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
const { getPostTypeLabel, getRenderingMode } = select( editorStore );
@@ -25,44 +26,13 @@ const SettingsHeader = ( { sidebarName } ) => {
};
}, [] );
- const documentAriaLabel =
- sidebarName === 'edit-post/document'
- ? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
- sprintf( __( '%s (selected)' ), documentLabel )
- : documentLabel;
-
- const blockAriaLabel =
- sidebarName === 'edit-post/block'
- ? // translators: ARIA label for the Block Settings Sidebar tab, selected.
- __( 'Block (selected)' )
- : // translators: ARIA label for the Block Settings Sidebar tab, not selected.
- __( 'Block' );
-
- const templateAriaLabel =
- sidebarName === 'edit-post/document'
- ? __( 'Template (selected)' )
- : __( 'Template' );
-
return (
<>
-
+
{ isTemplateMode ? __( 'Template' ) : documentLabel }
-
+
{ /* translators: Text label for the Block Settings Sidebar tab. */ }
{ __( 'Block' ) }
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 823b3523b8255..03fa465b3aa6c 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -38,6 +38,10 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
web: true,
native: false,
} );
+export const sidebars = {
+ document: 'edit-post/document',
+ block: 'edit-post/block',
+};
const SettingsSidebar = () => {
const { sidebarName, isSidebarOpen, keyboardShortcut, isTemplateMode } =
@@ -53,15 +57,11 @@ const SettingsSidebar = () => {
editPostStore.name
);
const isOpen = sidebar !== null;
- if (
- ! [ 'edit-post/document', 'edit-post/block' ].includes(
- sidebar
- )
- ) {
+ if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
if ( select( blockEditorStore ).getBlockSelectionStart() ) {
- sidebar = 'edit-post/block';
+ sidebar = sidebars.block;
}
- sidebar = 'edit-post/document';
+ sidebar = sidebars.document;
}
const shortcut = select(
keyboardShortcutsStore
@@ -87,7 +87,7 @@ const SettingsSidebar = () => {
identifier={ sidebarName }
header={
-
+
}
closeLabel={ __( 'Close Settings' ) }
@@ -99,10 +99,7 @@ const SettingsSidebar = () => {
isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
>
-
+
{ ! isTemplateMode && (
<>
@@ -118,7 +115,7 @@ const SettingsSidebar = () => {
) }
{ isTemplateMode && }
-
+
From 2e73939b0cf555974e6744e07a5e4e04573e9f92 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 17 Nov 2023 14:51:42 -0500
Subject: [PATCH 10/23] add note explaining null selected tab when sidebar is
closed
---
.../src/components/sidebar/settings-sidebar/index.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 03fa465b3aa6c..50b2e79a915e7 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -136,6 +136,11 @@ const SettingsSidebar = () => {
return (
From ed1c930fbe0c49197650759911317eaf6f533940 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 20 Nov 2023 12:50:08 -0500
Subject: [PATCH 11/23] update e2e test
---
.../e2e-tests/specs/editor/various/preferences.test.js | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js
index 98249637c7e96..54990a4004422 100644
--- a/packages/e2e-tests/specs/editor/various/preferences.test.js
+++ b/packages/e2e-tests/specs/editor/various/preferences.test.js
@@ -17,7 +17,7 @@ describe( 'preferences', () => {
async function getActiveSidebarTabText() {
try {
return await page.$eval(
- '.edit-post-sidebar__panel-tab.is-active',
+ 'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]',
( node ) => node.textContent
);
} catch ( error ) {
@@ -29,11 +29,15 @@ describe( 'preferences', () => {
}
it( 'remembers sidebar dismissal between sessions', async () => {
+ const blockTab = await page.waitForXPath(
+ `//button[@role="tab"][contains(text(), 'Block')]`
+ );
+
// Open by default.
expect( await getActiveSidebarTabText() ).toBe( 'Post' );
// Change to "Block" tab.
- await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' );
+ await blockTab.click();
expect( await getActiveSidebarTabText() ).toBe( 'Block' );
// Regression test: Reload resets to document tab.
@@ -46,7 +50,7 @@ describe( 'preferences', () => {
// Dismiss.
await page.click(
- '.edit-post-sidebar__panel-tabs [aria-label="Close Settings"]'
+ 'div[aria-label="Editor settings"] div[role="tablist"] + button[aria-label="Close Settings"]'
);
expect( await getActiveSidebarTabText() ).toBe( null );
From 4d47b3412208ac014129e93a3ad16440c12a3659 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 20 Nov 2023 13:09:20 -0500
Subject: [PATCH 12/23] style updates
---
packages/edit-post/src/components/sidebar/style.scss | 12 ------------
1 file changed, 12 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index 7b10eaec0d224..7a20cc5f0f54f 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -1,20 +1,8 @@
.components-panel__header.edit-post-sidebar__panel-tabs {
- justify-content: flex-start;
padding-left: 0;
padding-right: $grid-unit-20;
- border-top: 0;
- margin-top: 0;
-
- ul {
- display: flex;
- }
- li {
- margin: 0;
- }
.components-button.has-icon {
- display: none;
- margin: 0 0 0 auto;
padding: 0;
min-width: $icon-size;
height: $icon-size;
From 1e471ee4c408b08cce7d6d94c133ab8f5dc4f72e Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 22 Nov 2023 13:18:40 -0500
Subject: [PATCH 13/23] update internal component structure to avoid rerenders
---
.../sidebar/settings-sidebar/index.js | 104 ++++++++++--------
1 file changed, 56 insertions(+), 48 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 50b2e79a915e7..a2452b4721c16 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -43,6 +43,57 @@ export const sidebars = {
block: 'edit-post/block',
};
+const SidebarContent = ( {
+ sidebarName,
+ keyboardShortcut,
+ isTemplateMode,
+} ) => {
+ // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
+ // need to forward the `Tabs` context so it can be passed through the
+ // underlying slot/fill.
+ const tabsContextValue = useContext( Tabs.Context );
+
+ return (
+
+
+
+ }
+ closeLabel={ __( 'Close Settings' ) }
+ headerClassName="edit-post-sidebar__panel-tabs"
+ /* translators: button label text should, if possible, be under 16 characters. */
+ title={ __( 'Settings' ) }
+ toggleShortcut={ keyboardShortcut }
+ icon={ isRTL() ? drawerLeft : drawerRight }
+ isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+ >
+
+
+ { ! isTemplateMode && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ ) }
+ { isTemplateMode && }
+
+
+
+
+
+
+ );
+};
+
const SettingsSidebar = () => {
const { sidebarName, isSidebarOpen, keyboardShortcut, isTemplateMode } =
useSelect( ( select ) => {
@@ -76,53 +127,6 @@ const SettingsSidebar = () => {
};
}, [] );
- const Content = () => {
- // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
- // need to forward the `Tabs` context so it can be passed through the
- // underlying slot/fill.
- const tabsContextValue = useContext( Tabs.Context );
-
- return (
-
-
-
- }
- closeLabel={ __( 'Close Settings' ) }
- headerClassName="edit-post-sidebar__panel-tabs"
- /* translators: button label text should, if possible, be under 16 characters. */
- title={ __( 'Settings' ) }
- toggleShortcut={ keyboardShortcut }
- icon={ isRTL() ? drawerLeft : drawerRight }
- isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
- >
-
-
- { ! isTemplateMode && (
- <>
-
-
-
-
-
-
-
-
-
-
- ) }
- { isTemplateMode && }
-
-
-
-
-
-
- );
- };
-
const { openGeneralSidebar } = useDispatch( editPostStore );
const onTabSelect = useCallback(
@@ -144,7 +148,11 @@ const SettingsSidebar = () => {
selectedTabId={ isSidebarOpen ? sidebarName : null }
onSelect={ onTabSelect }
>
-
+
);
};
From 9ea4a0e9e75558e4e54a636d234fe27674d72aec Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 22 Nov 2023 13:39:30 -0500
Subject: [PATCH 14/23] remove fragment
---
.../sidebar/settings-header/index.js | 20 +++++++++----------
1 file changed, 9 insertions(+), 11 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index 7136275f683f2..ae9e5b0b57e72 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -27,17 +27,15 @@ const SettingsHeader = () => {
}, [] );
return (
- <>
-
-
- { isTemplateMode ? __( 'Template' ) : documentLabel }
-
-
- { /* translators: Text label for the Block Settings Sidebar tab. */ }
- { __( 'Block' ) }
-
-
-
+
+
+ { isTemplateMode ? __( 'Template' ) : documentLabel }
+
+
+ { /* translators: Text label for the Block Settings Sidebar tab. */ }
+ { __( 'Block' ) }
+
+
);
};
From 8e5ad9510f89c4ff338fcbc554dacb2ffb32b084 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 24 Nov 2023 11:44:07 -0500
Subject: [PATCH 15/23] prevent infinite loop when opening third party sidebar
---
.../sidebar/settings-sidebar/index.js | 66 ++++++++++---------
1 file changed, 35 insertions(+), 31 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index a2452b4721c16..0c47dcfe7c990 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -95,37 +95,41 @@ const SidebarContent = ( {
};
const SettingsSidebar = () => {
- const { sidebarName, isSidebarOpen, keyboardShortcut, isTemplateMode } =
- useSelect( ( select ) => {
- // The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
- // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
- // If one of the two sidebars is active the component will contain the content of that sidebar.
- // When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
- // component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
- // should contain the sidebar that will be active when the toggle button is pressed. If a block
- // is selected, that should be edit-post/block otherwise it's edit-post/document.
- let sidebar = select( interfaceStore ).getActiveComplementaryArea(
- editPostStore.name
- );
- const isOpen = sidebar !== null;
- if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
- if ( select( blockEditorStore ).getBlockSelectionStart() ) {
- sidebar = sidebars.block;
- }
- sidebar = sidebars.document;
+ const {
+ sidebarName,
+ isSettingsSidebarActive,
+ keyboardShortcut,
+ isTemplateMode,
+ } = useSelect( ( select ) => {
+ // The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
+ // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
+ // If one of the two sidebars is active the component will contain the content of that sidebar.
+ // When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
+ // component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
+ // should contain the sidebar that will be active when the toggle button is pressed. If a block
+ // is selected, that should be edit-post/block otherwise it's edit-post/document.
+ let sidebar = select( interfaceStore ).getActiveComplementaryArea(
+ editPostStore.name
+ );
+ let isSettingsSidebar = true;
+ if ( ! [ sidebars.document, sidebars.block ].includes( sidebar ) ) {
+ isSettingsSidebar = false;
+ if ( select( blockEditorStore ).getBlockSelectionStart() ) {
+ sidebar = sidebars.block;
}
- const shortcut = select(
- keyboardShortcutsStore
- ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
- return {
- sidebarName: sidebar,
- isSidebarOpen: isOpen,
- keyboardShortcut: shortcut,
- isTemplateMode:
- select( editorStore ).getRenderingMode() ===
- 'template-only',
- };
- }, [] );
+ sidebar = sidebars.document;
+ }
+ const shortcut = select(
+ keyboardShortcutsStore
+ ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
+ return {
+ sidebarName: sidebar,
+ isSettingsSidebarActive: isSettingsSidebar,
+ keyboardShortcut: shortcut,
+ isTemplateMode:
+ select( editorStore ).getRenderingMode() === 'template-only',
+ };
+ }, [] );
const { openGeneralSidebar } = useDispatch( editPostStore );
@@ -145,7 +149,7 @@ const SettingsSidebar = () => {
// tab can't be found. This causes the component to continuously reset
// the selection to `null` in an infinite loop.Proactively setting
// the selected tab to `null` avoids that.
- selectedTabId={ isSidebarOpen ? sidebarName : null }
+ selectedTabId={ isSettingsSidebarActive ? sidebarName : null }
onSelect={ onTabSelect }
>
Date: Mon, 27 Nov 2023 13:46:47 -0500
Subject: [PATCH 16/23] update e2e tests for `Tabs` compatibility
---
.../specs/editor/various/editor-modes.test.js | 15 +++++++++------
.../editor/plugins/custom-post-types.spec.js | 2 +-
.../various/block-hierarchy-navigation.spec.js | 2 +-
.../various/keyboard-navigable-blocks.spec.js | 4 ++--
4 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
index 81878ebf7208e..aea6536f605bb 100644
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
@@ -102,21 +102,24 @@ describe( 'Editing modes (visual/HTML)', () => {
expect( title ).toBe( 'Paragraph' );
// The Block inspector should be active.
- let blockInspectorTab = await page.$(
- '.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
+ let [ blockInspectorTab ] = await page.$x(
+ '//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
);
expect( blockInspectorTab ).not.toBeNull();
await switchEditorModeTo( 'Code' );
// The Block inspector should not be active anymore.
- blockInspectorTab = await page.$(
- '.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
+ [ blockInspectorTab ] = await page.$x(
+ '//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
);
- expect( blockInspectorTab ).toBeNull();
+ expect( blockInspectorTab ).toBeUndefined();
// No block is selected.
- await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
+ const inactiveBlockInspectorTab = await page.waitForXPath(
+ '//button[@role="tab"][contains(text(), "Block")]'
+ );
+ inactiveBlockInspectorTab.click();
const noBlocksElement = await page.$(
'.block-editor-block-inspector__no-blocks'
);
diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
index 17a497f26cee0..01dde03650ef7 100644
--- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js
+++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
@@ -31,7 +31,7 @@ test.describe( 'Test Custom Post Types', () => {
await editor.openDocumentSettingsSidebar();
await page
.getByRole( 'region', { name: 'Editor settings' } )
- .getByRole( 'button', {
+ .getByRole( 'tab', {
name: 'Hierarchical No Title',
} )
.click();
diff --git a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
index f0bfe5bff203f..a695b0a9ead67 100644
--- a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
+++ b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
@@ -127,7 +127,7 @@ test.describe( 'Navigating the block hierarchy', () => {
await pageUtils.pressKeys( 'ctrl+`' );
// Navigate to the block settings sidebar and tweak the column count.
- await pageUtils.pressKeys( 'Tab', { times: 5 } );
+ await pageUtils.pressKeys( 'Tab', { times: 4 } );
await expect(
page.getByRole( 'slider', { name: 'Columns' } )
).toBeFocused();
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 080abe011206a..0687f233e760c 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -151,7 +151,7 @@ test.describe( 'Order of block keyboard navigation', () => {
);
await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block' );
await pageUtils.pressKeys( 'shift+Tab' );
await KeyboardNavigableBlocks.expectLabelToHaveFocus(
@@ -233,7 +233,7 @@ class KeyboardNavigableBlocks {
await expect( activeElement ).toHaveText( paragraphText );
await this.page.keyboard.press( 'Tab' );
- await this.expectLabelToHaveFocus( 'Post' );
+ await this.expectLabelToHaveFocus( 'Block' );
// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
await this.pageUtils.pressKeys( 'shift+Tab' );
From 8a7b8f13cacd9b0cfd68f9a99ddb4ca9714e73c9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 28 Nov 2023 16:21:06 -0500
Subject: [PATCH 17/23] fix double top margin on tabpanels
---
.../src/components/sidebar/settings-sidebar/index.js | 4 ++++
packages/edit-post/src/components/sidebar/style.scss | 4 ++++
2 files changed, 8 insertions(+)
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 0c47dcfe7c990..fd45c09d42db9 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -62,6 +62,10 @@ const SidebarContent = ( {
}
closeLabel={ __( 'Close Settings' ) }
+ // This classname is added so we can apply a corrective negative
+ // margin to the panel.
+ // see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+ className="edit-post-sidebar__panel"
headerClassName="edit-post-sidebar__panel-tabs"
/* translators: button label text should, if possible, be under 16 characters. */
title={ __( 'Settings' ) }
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index 7a20cc5f0f54f..1921c5cfd7b31 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -12,3 +12,7 @@
}
}
}
+
+.edit-post-sidebar__panel {
+ margin-top: -1px;
+}
From c3eb43e2dc30efc2f2a2d9a7eb7a384d763ea7e3 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 13:27:27 -0500
Subject: [PATCH 18/23] update to use new tabId prop
---
.../edit-post/src/components/sidebar/settings-header/index.js | 4 ++--
.../src/components/sidebar/settings-sidebar/index.js | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index ae9e5b0b57e72..42b97d1f3aba0 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -28,10 +28,10 @@ const SettingsHeader = () => {
return (
-
+
{ isTemplateMode ? __( 'Template' ) : documentLabel }
-
+
{ /* translators: Text label for the Block Settings Sidebar tab. */ }
{ __( 'Block' ) }
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index fd45c09d42db9..9fa27c6ac2ade 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -74,7 +74,7 @@ const SidebarContent = ( {
isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
>
-
+
{ ! isTemplateMode && (
<>
@@ -90,7 +90,7 @@ const SidebarContent = ( {
) }
{ isTemplateMode && }
-
+
From 73db1df0fb3c534b33ca2f7b437b3eef5b57d34c Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 13:27:49 -0500
Subject: [PATCH 19/23] remove import that is no longer needed after rebase
---
.../edit-post/src/components/sidebar/settings-header/index.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index 42b97d1f3aba0..368bd3e9e50db 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -9,7 +9,6 @@ import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
*/
-import { store as editPostStore } from '../../../store';
import { unlock } from '../../../lock-unlock';
import { sidebars } from '../settings-sidebar';
From 7fe4d020d35f9bffd6c614454211f0f44474e8ad Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 14:38:59 -0500
Subject: [PATCH 20/23] fix keyboard navigable blocks test
---
.../specs/editor/various/keyboard-navigable-blocks.spec.js | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 0687f233e760c..84536c88227ce 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -75,9 +75,7 @@ test.describe( 'Order of block keyboard navigation', () => {
);
await page.keyboard.press( 'Tab' );
- await KeyboardNavigableBlocks.expectLabelToHaveFocus(
- 'Post (selected)'
- );
+ await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
} );
test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
From 4d0c5470fc0f4f76846588832c38251fe187c903 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:23:22 -0500
Subject: [PATCH 21/23] fix visibility and tab order tests
---
.../specs/editor/various/sidebar.test.js | 29 ++++++++++---------
1 file changed, 16 insertions(+), 13 deletions(-)
diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js
index 2e5d46eec2f7a..0cd39093aabb8 100644
--- a/packages/e2e-tests/specs/editor/various/sidebar.test.js
+++ b/packages/e2e-tests/specs/editor/various/sidebar.test.js
@@ -13,7 +13,8 @@ import {
} from '@wordpress/e2e-test-utils';
const SIDEBAR_SELECTOR = '.edit-post-sidebar';
-const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active';
+const ACTIVE_SIDEBAR_TAB_SELECTOR =
+ 'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]';
const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post';
describe( 'Sidebar', () => {
@@ -99,22 +100,24 @@ describe( 'Sidebar', () => {
// Tab lands at first (presumed selected) option "Post".
await page.keyboard.press( 'Tab' );
- const isActiveDocumentTab = await page.evaluate(
- () =>
- document.activeElement.textContent === 'Post' &&
- document.activeElement.classList.contains( 'is-active' )
+
+ // The Post tab should be focused and selected.
+ const [ documentInspectorTab ] = await page.$x(
+ '//button[@role="tab"][@aria-selected="true"][contains(text(), "Post")]'
);
- expect( isActiveDocumentTab ).toBe( true );
+ expect( documentInspectorTab ).toBeDefined();
+ expect( documentInspectorTab ).toHaveFocus();
- // Tab into and activate "Block".
- await page.keyboard.press( 'Tab' );
+ // Arrow key into and activate "Block".
+ await page.keyboard.press( 'ArrowRight' );
await page.keyboard.press( 'Space' );
- const isActiveBlockTab = await page.evaluate(
- () =>
- document.activeElement.textContent === 'Block' &&
- document.activeElement.classList.contains( 'is-active' )
+
+ // The Block tab should be focused and selected.
+ const [ blockInspectorTab ] = await page.$x(
+ '//button[@role="tab"][@aria-selected="true"][contains(text(), "Block")]'
);
- expect( isActiveBlockTab ).toBe( true );
+ expect( blockInspectorTab ).toBeDefined();
+ expect( blockInspectorTab ).toHaveFocus();
} );
it( 'should be possible to programmatically remove Document Settings panels', async () => {
From 10507a2427396b1bb6641affad2020807806a1d4 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 17:11:38 -0500
Subject: [PATCH 22/23] fix footnotes tests
---
test/e2e/specs/editor/various/footnotes.spec.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
index 14a2fc653e387..6102f48749543 100644
--- a/test/e2e/specs/editor/various/footnotes.spec.js
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -362,7 +362,7 @@ test.describe( 'Footnotes', () => {
await editor.openDocumentSettingsSidebar();
await page
.getByRole( 'region', { name: 'Editor settings' } )
- .getByRole( 'button', { name: 'Post' } )
+ .getByRole( 'tab', { name: 'Post' } )
.click();
await page.locator( 'a:text("2 Revisions")' ).click();
await page.locator( '.revisions-controls .ui-slider-handle' ).focus();
@@ -440,7 +440,7 @@ test.describe( 'Footnotes', () => {
await editor.openDocumentSettingsSidebar();
await page
.getByRole( 'region', { name: 'Editor settings' } )
- .getByRole( 'button', { name: 'Post' } )
+ .getByRole( 'tab', { name: 'Post' } )
.click();
// Visit the published post.
From 5d20c8b8c45d13eeb57a64e80ce4dda56ce336dd Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Fri, 8 Dec 2023 21:26:40 -0500
Subject: [PATCH 23/23] fix change detection test
---
.../e2e-tests/specs/editor/various/change-detection.test.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js
index 62057c4cbb2bc..0eb673671222f 100644
--- a/packages/e2e-tests/specs/editor/various/change-detection.test.js
+++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js
@@ -370,7 +370,11 @@ describe( 'Change detection', () => {
it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => {
// Open the sidebar block settings.
await openDocumentSettingsSidebar();
- await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
+
+ const blockInspectorTab = await page.waitForXPath(
+ '//button[@role="tab"][contains(text(), "Block")]'
+ );
+ await blockInspectorTab.click();
// Insert a paragraph.
await clickBlockAppender();