diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx index 761045ceaa6d..2af68f9896fd 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx @@ -189,30 +189,35 @@ export default function MyJetpackScreen() {

{ __( 'My Jetpack', 'jetpack-my-jetpack' ) }

- - { ! isNewUser && ( - - -
- - - ) } - { noticeMessage && ( - - - - - - ) } { isSectionVisible && userIsAdmin && } { isRedirectingFromOnboarding && } - + + + { ! isNewUser && ( + + +
+ + + ) } + { noticeMessage && ( + + + + + + ) } + + } + /> ); } diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx index a52cec2fddc4..edef32cf2a98 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx @@ -5,17 +5,21 @@ import { useNavigate, useParams } from 'react-router'; import useAnalytics from '../../hooks/use-analytics'; import useIsJetpackUserNew from '../../hooks/use-is-jetpack-user-new'; import { MY_JETPACK_SECTION_OVERVIEW } from './constants'; +import { FullWidthSeparator } from './full-width-separator'; import styles from './styles.module.scss'; import { TabContent } from './tab-content'; import { MyJetpackSection } from './types'; import { getMyJetpackSections, isValidMyJetpackSection } from './utils'; +import type { ReactNode } from 'react'; /** * My Jetpack Tab panel component. * + * @param {object} root0 - Component props. + * @param {ReactNode} root0.beforeContent - Content to render between the tab separator and tab content. * @return The rendered component. */ -export function MyJetpackTabPanel() { +export function MyJetpackTabPanel( { beforeContent }: { beforeContent?: ReactNode } ) { const params = useParams(); const navigate = useNavigate(); const { recordEvent } = useAnalytics(); @@ -55,9 +59,18 @@ export function MyJetpackTabPanel() { [ navigate, params.section, recordEvent, isNewUser ] ); - const tabRenderer = useCallback( ( tab: { name: string } ) => { - return ; - }, [] ); + const tabRenderer = useCallback( + ( tab: { name: string } ) => { + return ( + <> + + { beforeContent } + + + ); + }, + [ beforeContent ] + ); // Handle external navigation (URL changes not from tab clicks) useEffect( () => { diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx index 560ba63551b9..26e03d77f069 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx @@ -1,5 +1,4 @@ import clsx from 'clsx'; -import { FullWidthSeparator } from './full-width-separator'; import { HelpContent } from './help/content'; import { OverviewContent } from './overview/content'; import { ProductsContent } from './products/content'; @@ -33,7 +32,6 @@ export function TabContent( { name }: TabContentProps ) { return (
-
diff --git a/projects/packages/my-jetpack/changelog/fix-admin-notices-inside-header b/projects/packages/my-jetpack/changelog/fix-admin-notices-inside-header new file mode 100644 index 000000000000..bea8b1a04d18 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/fix-admin-notices-inside-header @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Move admin notices and JITMs below the tab bar instead of rendering inside the page header. diff --git a/projects/packages/publicize/_inc/components/admin-page/header/index.js b/projects/packages/publicize/_inc/components/admin-page/header/index.js index 694aee4b888c..d2e233e4ece3 100644 --- a/projects/packages/publicize/_inc/components/admin-page/header/index.js +++ b/projects/packages/publicize/_inc/components/admin-page/header/index.js @@ -1,5 +1,4 @@ import { Button, Col, Container, H3 } from '@automattic/jetpack-components'; -import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection'; import { getAdminUrl } from '@automattic/jetpack-script-data'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -15,41 +14,27 @@ const Header = () => { }; } ); - const { hasConnectionError } = useConnectionErrorNotice(); - const { openConnectionsModal } = useDispatch( socialStore ); return ( - <> - - { hasConnectionError && ( - - - - ) } - -
- - - - -

{ __( 'Write once, post everywhere', 'jetpack-publicize-pkg' ) }

-
- { isModuleEnabled && ! hasConnections && ( - - ) } - -
- -
- + ) } + +
+ +
); }; diff --git a/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss b/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss index d0d97cee02d4..9c8638a69b66 100644 --- a/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss +++ b/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss @@ -57,10 +57,6 @@ } } -.connection-error-col { - margin-top: 25px; -} - .bar-wrapper { margin-bottom: var(--spacing-base); diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx index e5d94e1c2220..fcd6bfbe4041 100644 --- a/projects/packages/publicize/_inc/components/admin-page/index.tsx +++ b/projects/packages/publicize/_inc/components/admin-page/index.tsx @@ -6,7 +6,11 @@ import { Col, GlobalNotices, } from '@automattic/jetpack-components'; -import { useConnection } from '@automattic/jetpack-connection'; +import { + ConnectionError, + useConnection, + useConnectionErrorNotice, +} from '@automattic/jetpack-connection'; import { getMyJetpackUrl, isJetpackSelfHostedSite, @@ -25,7 +29,7 @@ import ConnectionScreen from './connection-screen'; import Header from './header'; import InfoSection from './info-section'; import PricingPage from './pricing-page'; -import './styles.module.scss'; +import styles from './styles.module.scss'; import SupportSection from './support-section'; import SocialImageGeneratorToggle from './toggles/social-image-generator-toggle'; import SocialModuleToggle from './toggles/social-module-toggle'; @@ -38,6 +42,7 @@ export const SocialAdminPage = () => { const isJetpackSite = isJetpackSelfHostedSite(); const { isUserConnected, isRegistered } = useConnection(); + const { hasConnectionError } = useConnectionErrorNotice(); const showConnectionCard = ! isSimple && ( ! isRegistered || ! isUserConnected ); const [ pricingPageDismissed, setPricingPageDismissed ] = useState( false ); @@ -101,6 +106,16 @@ export const SocialAdminPage = () => { { isJetpackSite && ! hasSocialPaidFeatures() && showPricingPage && ! pricingPageDismissed ? ( + + { hasConnectionError && ( + + + + ) } + +
+ + @@ -112,6 +127,16 @@ export const SocialAdminPage = () => {
+ + { hasConnectionError && ( + + + + ) } + +
+ + { canManageOptions && ( diff --git a/projects/packages/publicize/_inc/components/admin-page/styles.module.scss b/projects/packages/publicize/_inc/components/admin-page/styles.module.scss index 44901e1385cc..654492123840 100644 --- a/projects/packages/publicize/_inc/components/admin-page/styles.module.scss +++ b/projects/packages/publicize/_inc/components/admin-page/styles.module.scss @@ -23,3 +23,7 @@ .notice { grid-column: 1 / -1; } + +.connection-error-col { + margin-top: 25px; +} diff --git a/projects/packages/publicize/changelog/fix-admin-notices-inside-header b/projects/packages/publicize/changelog/fix-admin-notices-inside-header new file mode 100644 index 000000000000..9825c5c69f3c --- /dev/null +++ b/projects/packages/publicize/changelog/fix-admin-notices-inside-header @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Move admin notices and JITMs below the page header instead of rendering inside it. diff --git a/projects/packages/search/changelog/fix-admin-notices-inside-header b/projects/packages/search/changelog/fix-admin-notices-inside-header new file mode 100644 index 000000000000..9825c5c69f3c --- /dev/null +++ b/projects/packages/search/changelog/fix-admin-notices-inside-header @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Move admin notices and JITMs below the page header instead of rendering inside it. diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx index 62cbba5ecf6d..467941c9cb59 100644 --- a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx +++ b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx @@ -107,6 +107,8 @@ export default function DashboardPage( { isLoading = false } ) { return ( <> + { /* Always in the DOM so JITM JS finds it immediately (Path A). */ } +
{ isPageLoading && } { ! isPageLoading && (
@@ -126,20 +128,17 @@ export default function DashboardPage( { isLoading = false } ) { className="uses-new-admin-ui" showFooter={ false } > - - { hasConnectionError && ( - - - - ) } - -
- - + { hasConnectionError && ( + + + + + + ) } { isNewPricing && supportsInstantSearch && (