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

Components: replace TabPanel with Tabs in the Editor Preferences Modal #57293

Merged
merged 6 commits into from
Jan 11, 2024
Merged

Components: replace TabPanel with Tabs in the Editor Preferences Modal #57293

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
213c516
add support for private apis
chad1008 Dec 21, 2023
fc634c2
implement Tabs
chad1008 Dec 21, 2023
78166ec
update styles
chad1008 Dec 21, 2023
4f6adf5
update code comment
chad1008 Jan 8, 2024
5ca1161
classnames rather than role selectors
chad1008 Jan 10, 2024
9dca50a
remove style nesting
chad1008 Jan 10, 2024
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
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions packages/interface/lock-unlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* WordPress dependencies
*/
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';

export const { lock, unlock } =
__dangerousOptInToUnstableAPIsOnlyForCoreModules(
'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
'@wordpress/interface'
);
1 change: 1 addition & 0 deletions packages/interface/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"@wordpress/icons": "file:../icons",
"@wordpress/plugins": "file:../plugins",
"@wordpress/preferences": "file:../preferences",
"@wordpress/private-apis": "file:../private-apis",
"@wordpress/viewport": "file:../viewport",
"classnames": "^2.3.1"
},
Expand Down
60 changes: 41 additions & 19 deletions packages/interface/src/components/preferences-modal-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,22 @@ import {
__experimentalText as Text,
__experimentalTruncate as Truncate,
FlexItem,
TabPanel,
Card,
CardHeader,
CardBody,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useMemo, useCallback, useState } from '@wordpress/element';
import { useMemo, useState } from '@wordpress/element';
import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
import { isRTL, __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { unlock } from '../../../lock-unlock';

const { Tabs } = unlock( componentsPrivateApis );

const PREFERENCES_MENU = 'preferences-menu';

export default function PreferencesModalTabs( { sections } ) {
Expand All @@ -32,7 +39,7 @@ export default function PreferencesModalTabs( { sections } ) {
const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
/**
* Create helper objects from `sections` for easier data handling.
* `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
* `tabs` is used for creating the `Tabs` and `sectionsContentMap`
* is used for easier access to active tab's content.
*/
const { tabs, sectionsContentMap } = useMemo( () => {
Expand All @@ -53,26 +60,41 @@ export default function PreferencesModalTabs( { sections } ) {
return mappedTabs;
}, [ sections ] );

const getCurrentTab = useCallback(
( tab ) => sectionsContentMap[ tab.name ] || null,
[ sectionsContentMap ]
);

let modalContent;
// We render different components based on the viewport size.
if ( isLargeViewport ) {
modalContent = (
<TabPanel
className="interface-preferences__tabs"
tabs={ tabs }
initialTabName={
activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
}
onSelect={ setActiveMenu }
orientation="vertical"
>
{ getCurrentTab }
</TabPanel>
<div className="interface-preferences__tabs">
<Tabs
initialTabId={
activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
}
onSelect={ setActiveMenu }
orientation="vertical"
>
<Tabs.TabList className="interface-preferences__tabs-tablist">
{ tabs.map( ( tab ) => (
<Tabs.Tab
tabId={ tab.name }
key={ tab.name }
className="interface-preferences__tabs-tab"
>
{ tab.title }
</Tabs.Tab>
) ) }
</Tabs.TabList>
{ tabs.map( ( tab ) => (
<Tabs.TabPanel
tabId={ tab.name }
key={ tab.name }
className="interface-preferences__tabs-tabpanel"
focusable={ false }
>
{ sectionsContentMap[ tab.name ] || null }
</Tabs.TabPanel>
) ) }
</Tabs>
</div>
);
} else {
modalContent = (
Expand Down
10 changes: 5 additions & 5 deletions packages/interface/src/components/preferences-modal-tabs/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
$vertical-tabs-width: 160px;

.interface-preferences__tabs {
.components-tab-panel__tabs {
.interface-preferences__tabs-tablist {
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
position: absolute;
top: $header-height + $grid-unit-30;
// Aligns button text instead of button box.
left: $grid-unit-20;
width: $vertical-tabs-width;

.components-tab-panel__tabs-item {
.interface-preferences__tabs-tab {
border-radius: $radius-block-ui;
font-weight: 400;

&.is-active {
&[aria-selected="true"] {
background: $gray-100;
box-shadow: none;
font-weight: 500;
}

&.is-active::after {
&[aria-selected="true"]::after {
content: none;
}

Expand All @@ -34,7 +34,7 @@ $vertical-tabs-width: 160px;
}
}

.components-tab-panel__tab-content {
.interface-preferences__tabs-tabpanel {
padding-left: $grid-unit-30;
margin-left: $vertical-tabs-width;
}
Expand Down
1 change: 1 addition & 0 deletions packages/private-apis/src/implementation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
'@wordpress/edit-widgets',
'@wordpress/editor',
'@wordpress/format-library',
'@wordpress/interface',
'@wordpress/patterns',
'@wordpress/reusable-blocks',
'@wordpress/router',
Expand Down
Loading