From 213c5166b0d1b752355f0eebae59c5450cef782c Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 20 Dec 2023 20:52:24 -0500 Subject: [PATCH 1/6] add support for private apis --- package-lock.json | 2 ++ packages/interface/lock-unlock.js | 10 ++++++++++ packages/interface/package.json | 1 + packages/private-apis/src/implementation.js | 1 + 4 files changed, 14 insertions(+) create mode 100644 packages/interface/lock-unlock.js diff --git a/package-lock.json b/package-lock.json index 25144ad2de978..b5af2577f57a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55216,6 +55216,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" }, @@ -70031,6 +70032,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" } diff --git a/packages/interface/lock-unlock.js b/packages/interface/lock-unlock.js new file mode 100644 index 0000000000000..b6e29bb71c7c0 --- /dev/null +++ b/packages/interface/lock-unlock.js @@ -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' + ); diff --git a/packages/interface/package.json b/packages/interface/package.json index df3d53990e0f5..7356a7b52d1d4 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -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" }, diff --git a/packages/private-apis/src/implementation.js b/packages/private-apis/src/implementation.js index 619478cf76386..4195991381d02 100644 --- a/packages/private-apis/src/implementation.js +++ b/packages/private-apis/src/implementation.js @@ -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', From fc634c2926869fdcffd31c6f6c2786df07a3f949 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 20 Dec 2023 21:15:33 -0500 Subject: [PATCH 2/6] implement Tabs --- .../preferences-modal-tabs/index.js | 53 ++++++++++++------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js index bc8f7358b834d..577bac8abf14f 100644 --- a/packages/interface/src/components/preferences-modal-tabs/index.js +++ b/packages/interface/src/components/preferences-modal-tabs/index.js @@ -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 } ) { @@ -53,26 +60,36 @@ 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 = ( - - { getCurrentTab } - +
+ + + { tabs.map( ( tab ) => ( + + { tab.title } + + ) ) } + + { tabs.map( ( tab ) => ( + + { sectionsContentMap[ tab.name ] || null } + + ) ) } + +
); } else { modalContent = ( From 78166ec89b4506ce1f253a5b8768336381df6e75 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 20 Dec 2023 21:30:58 -0500 Subject: [PATCH 3/6] update styles --- .../src/components/preferences-modal-tabs/style.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/interface/src/components/preferences-modal-tabs/style.scss b/packages/interface/src/components/preferences-modal-tabs/style.scss index 04b71f0a773a2..84f0f28f5bed2 100644 --- a/packages/interface/src/components/preferences-modal-tabs/style.scss +++ b/packages/interface/src/components/preferences-modal-tabs/style.scss @@ -1,24 +1,24 @@ $vertical-tabs-width: 160px; .interface-preferences__tabs { - .components-tab-panel__tabs { + [role="tablist"] { 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 { + [role="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; } @@ -34,7 +34,7 @@ $vertical-tabs-width: 160px; } } - .components-tab-panel__tab-content { + [role="tabpanel"] { padding-left: $grid-unit-30; margin-left: $vertical-tabs-width; } From 4f6adf58a0787e4e4426c056cb2db3c1f3c16f1f Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Mon, 8 Jan 2024 16:20:30 -0500 Subject: [PATCH 4/6] update code comment --- .../interface/src/components/preferences-modal-tabs/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js index 577bac8abf14f..794ad50502e04 100644 --- a/packages/interface/src/components/preferences-modal-tabs/index.js +++ b/packages/interface/src/components/preferences-modal-tabs/index.js @@ -39,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( () => { From 5ca11612a5a66e780e063d9d3b3cd427245cce02 Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 10 Jan 2024 11:21:30 -0500 Subject: [PATCH 5/6] classnames rather than role selectors --- .../src/components/preferences-modal-tabs/index.js | 9 +++++++-- .../src/components/preferences-modal-tabs/style.scss | 6 +++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js index 794ad50502e04..985d963227257 100644 --- a/packages/interface/src/components/preferences-modal-tabs/index.js +++ b/packages/interface/src/components/preferences-modal-tabs/index.js @@ -72,9 +72,13 @@ export default function PreferencesModalTabs( { sections } ) { onSelect={ setActiveMenu } orientation="vertical" > - + { tabs.map( ( tab ) => ( - + { tab.title } ) ) } @@ -83,6 +87,7 @@ export default function PreferencesModalTabs( { sections } ) { { sectionsContentMap[ tab.name ] || null } diff --git a/packages/interface/src/components/preferences-modal-tabs/style.scss b/packages/interface/src/components/preferences-modal-tabs/style.scss index 84f0f28f5bed2..d814ac71aa309 100644 --- a/packages/interface/src/components/preferences-modal-tabs/style.scss +++ b/packages/interface/src/components/preferences-modal-tabs/style.scss @@ -1,14 +1,14 @@ $vertical-tabs-width: 160px; .interface-preferences__tabs { - [role="tablist"] { + .interface-preferences__tabs-tablist { position: absolute; top: $header-height + $grid-unit-30; // Aligns button text instead of button box. left: $grid-unit-20; width: $vertical-tabs-width; - [role="tab"] { + .interface-preferences__tabs-tab { border-radius: $radius-block-ui; font-weight: 400; @@ -34,7 +34,7 @@ $vertical-tabs-width: 160px; } } - [role="tabpanel"] { + .interface-preferences__tabs-tabpanel { padding-left: $grid-unit-30; margin-left: $vertical-tabs-width; } From 9dca50a864a951f8634026512f6124be10d6503d Mon Sep 17 00:00:00 2001 From: chad1008 <13856531+chad1008@users.noreply.github.com> Date: Wed, 10 Jan 2024 17:19:46 -0500 Subject: [PATCH 6/6] remove style nesting --- .../preferences-modal-tabs/style.scss | 69 +++++++++---------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/packages/interface/src/components/preferences-modal-tabs/style.scss b/packages/interface/src/components/preferences-modal-tabs/style.scss index d814ac71aa309..f598545d69c25 100644 --- a/packages/interface/src/components/preferences-modal-tabs/style.scss +++ b/packages/interface/src/components/preferences-modal-tabs/style.scss @@ -1,45 +1,44 @@ $vertical-tabs-width: 160px; -.interface-preferences__tabs { - .interface-preferences__tabs-tablist { - position: absolute; - top: $header-height + $grid-unit-30; - // Aligns button text instead of button box. - left: $grid-unit-20; - width: $vertical-tabs-width; - - .interface-preferences__tabs-tab { - border-radius: $radius-block-ui; - font-weight: 400; - - &[aria-selected="true"] { - background: $gray-100; - box-shadow: none; - font-weight: 500; - } - - &[aria-selected="true"]::after { - content: none; - } - - &:focus:not(:disabled) { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - // Windows high contrast mode. - outline: 2px solid transparent; - } - - &:focus-visible::before { - content: none; - } - } +.interface-preferences__tabs-tablist { + position: absolute; + top: $header-height + $grid-unit-30; + // Aligns button text instead of button box. + left: $grid-unit-20; + width: $vertical-tabs-width; + +} + +.interface-preferences__tabs-tab { + border-radius: $radius-block-ui; + font-weight: 400; + + &[aria-selected="true"] { + background: $gray-100; + box-shadow: none; + font-weight: 500; + } + + &[aria-selected="true"]::after { + content: none; + } + + &[role="tab"]:focus:not(:disabled) { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + // Windows high contrast mode. + outline: 2px solid transparent; } - .interface-preferences__tabs-tabpanel { - padding-left: $grid-unit-30; - margin-left: $vertical-tabs-width; + &:focus-visible::before { + content: none; } } +.interface-preferences__tabs-tabpanel { + padding-left: $grid-unit-30; + margin-left: $vertical-tabs-width; +} + @media (max-width: #{ ($break-medium - 1) }) { // Keep the navigator component from overflowing the modal content area // to ensure that sticky position elements stick where intended.