Skip to content

SEO: migrate Settings styles to CSS Modules #50619

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

Merged
gmjuhasz merged 3 commits into from
Jul 23, 2026
Merged

SEO: migrate Settings styles to CSS Modules #50619

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec4bcf8
SEO: migrate Settings styles to CSS Modules
gmjuhasz Jul 17, 2026
c5704f1
SEO: restore schema pair error assertions
gmjuhasz Jul 22, 2026
1706944
Merge remote-tracking branch 'origin/trunk' into agent/migrate-seo-se…
gmjuhasz Jul 23, 2026
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
1 change: 0 additions & 1 deletion projects/packages/seo/_inc/screens/settings/author-profile-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { __, sprintf } from '@wordpress/i18n';
import { Badge, Card, CollapsibleCard, Stack } from '@wordpress/ui';
import { useAuthorProfile } from '../../data/use-author-profile';
import AuthorProfileSection from './schema-settings/author-profile-section';
import './style.scss';

const notSetLabel = __( 'Not set', 'jetpack-seo' );

Expand Down
30 changes: 15 additions & 15 deletions projects/packages/seo/_inc/screens/settings/google-verification-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { TextControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Badge, Button, Link, Stack } from '@wordpress/ui';
import { Badge, Button, Link, Stack, Text } from '@wordpress/ui';
import { useGoogleVerify } from '../../data/use-google-verify';
import type { FC } from 'react';

Expand Down Expand Up @@ -68,25 +68,25 @@ const GoogleVerificationField: FC< Props > = ( { value, onChange, onCommit, disa
// `unavailable` (e.g. a `forbidden` response on an under-construction site).
if ( ! isConnected || state === 'unavailable' ) {
return (
<div className="jetpack-seo-settings__google-verification">
<TextControl
label={ __( 'Google', 'jetpack-seo' ) }
value={ value }
onChange={ onChange }
onBlur={ onCommit }
help={ manualHelp }
disabled={ disabled }
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
</div>
<TextControl
label={ __( 'Google', 'jetpack-seo' ) }
value={ value }
onChange={ onChange }
onBlur={ onCommit }
help={ manualHelp }
disabled={ disabled }
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
);
}

return (
<Stack direction="column" gap="md" className="jetpack-seo-settings__google-verification">
<Stack direction="column" gap="md">
<Stack direction="row" justify="space-between" align="center" gap="sm">
<strong>{ __( 'Google', 'jetpack-seo' ) }</strong>
<Text variant="heading-md" render={ <strong /> }>
{ __( 'Google', 'jetpack-seo' ) }
</Text>
{ state === 'verified' && (
<Badge intent="stable">{ __( 'Verified', 'jetpack-seo' ) }</Badge>
) }
Expand Down
32 changes: 16 additions & 16 deletions projects/packages/seo/_inc/screens/settings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { TextareaControl, ToggleControl } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { useSearch } from '@wordpress/route';
import { Badge, Button, Card, CollapsibleCard, Link, Notice, Stack } from '@wordpress/ui';
import { Badge, Button, Card, CollapsibleCard, Link, Notice, Stack, Text } from '@wordpress/ui';
import AuthorProfileCard from './author-profile-card';
import SchemaCard from './schema-card';
import SocialPreviewsCard from './social-previews-card';
import styles from './style.module.scss';
import TitleStructureField from './title-structure-field';
import VerificationCard from './verification-card';
import './style.scss';
import type { SettingsForm } from '../../data/use-settings';
import type { FC } from 'react';

Expand Down Expand Up @@ -68,7 +68,7 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
} = form;

// Overview deep links (`?focus=visibility|verification`) scroll the matching
// section to its top. `scroll-margin-top` on the section (style.scss) clears
// section to its top. `scroll-margin-block-start` on the section's module clears
// the fixed header + sticky tabs so the section title stays visible.
// Bound to the Settings route id (`/settings`); the screen only renders there.
const search = useSearch( {
Expand Down Expand Up @@ -110,8 +110,8 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
( local.search_engines_visible ? 1 : 0 ) + ( sitemapEffectivelyOn ? 1 : 0 );

return (
<div className="jetpack-seo-settings">
<div id="visibility" className="jetpack-seo-settings__section">
<Stack direction="column" gap="lg" className={ styles.root }>
<div id="visibility" className={ styles.section }>
<CollapsibleCard.Root defaultOpen>
<CollapsibleCard.Header>
<Stack direction="row" justify="space-between" align="center" gap="sm">
Expand Down Expand Up @@ -139,7 +139,7 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
disabled={ isSaving }
__nextHasNoMarginBottom
/>
<div className="jetpack-seo-settings__sitemap-field">
<Stack direction="column" gap="xs">
<ToggleControl
label={ __( 'Generate an XML sitemap', 'jetpack-seo' ) }
help={ local.search_engines_visible ? sitemapHelp : sitemapBlockedHelp }
Expand All @@ -154,25 +154,25 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
{ sitemapEffectivelyOn &&
( local.sitemap_url ? (
<Link
className="jetpack-seo-settings__sitemap-link"
className={ styles.sitemapLink }
href={ local.sitemap_url }
openInNewTab
rel="noopener noreferrer"
>
{ sitemapViewLabel }
</Link>
) : (
<span className="jetpack-seo-settings__sitemap-hint">
<Text variant="body-sm" className={ styles.sitemapHint }>
{ sitemapGeneratingLabel }
</span>
</Text>
) ) }
</div>
</Stack>
</Stack>
</CollapsibleCard.Content>
</CollapsibleCard.Root>
</div>

<div id="verification" className="jetpack-seo-settings__section">
<div id="verification" className={ styles.section }>
<VerificationCard
value={ local.verification }
onChange={ setVerification }
Expand All @@ -185,13 +185,13 @@ const SettingsScreen: FC< Props > = ( { form } ) => {

{ /* Container for the site-level schema controls delivered by later
issues. Own `id` so it can be deep-linked like `#verification`. */ }
<div id="schema" className="jetpack-seo-settings__section">
<div id="schema" className={ styles.section }>
<SchemaCard initialSettings={ local.schema } onSave={ setSchemaSettings } />
</div>

{ /* The signed-in user's Person / ProfilePage schema source — per-user,
unlike the site-level Schema card above. */ }
<div id="author-profile" className="jetpack-seo-settings__section">
<div id="author-profile" className={ styles.section }>
<AuthorProfileCard />
</div>

Expand Down Expand Up @@ -248,20 +248,20 @@ const SettingsScreen: FC< Props > = ( { form } ) => {
disabled={ isSaving }
__nextHasNoMarginBottom
/>
<div className="jetpack-seo-settings__save">
<Stack direction="row" justify="flex-end">
<Button
onClick={ () => commitFields( [ 'front_page_description' ] ) }
disabled={ isSaving || ! isDirty( [ 'front_page_description' ] ) }
>
{ saveLabel }
</Button>
</div>
</Stack>
</Stack>
</CollapsibleCard.Content>
</CollapsibleCard.Root>

<SocialPreviewsCard description={ local.front_page_description } />
</div>
</Stack>
);
};

Expand Down
1 change: 0 additions & 1 deletion projects/packages/seo/_inc/screens/settings/schema-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useSchemaSettings } from '../../data/use-schema-settings';
import LocalBusinessSection from './schema-settings/local-business-section';
import OrganizationSection from './schema-settings/organization-section';
import type { SchemaSettings } from '../../data/schema-settings-types';
import './style.scss';

const notSetLabel = __( 'Not set', 'jetpack-seo' );
const enabledLabel = __( 'Enabled', 'jetpack-seo' );
Expand Down
23 changes: 12 additions & 11 deletions projects/packages/seo/_inc/screens/settings/schema-settings/author-profile-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { TextControl, TextareaControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Button, Stack } from '@wordpress/ui';
import { Button, Link, Stack, Text } from '@wordpress/ui';
import ProfileUrlList, { hasProfileUrlErrors } from './profile-url-list';
import styles from './style.module.scss';
import type { AuthorProfileForm } from '../../../data/use-author-profile';
import type { FC } from 'react';

Expand Down Expand Up @@ -38,12 +39,12 @@ const AuthorProfileSection: FC< Props > = ( { form } ) => {

return (
<Stack direction="column" gap="lg">
<span className="jetpack-seo-settings__title-tokens-label">
<Text variant="body-sm" className={ styles.muted }>
{ __(
'Shown as Person schema on your articles and author archive. Name, bio, and website update your WordPress profile.',
'jetpack-seo'
) }
</span>
</Text>

<TextControl
label={ __( 'Name', 'jetpack-seo' ) }
Expand Down Expand Up @@ -76,17 +77,17 @@ const AuthorProfileSection: FC< Props > = ( { form } ) => {
/>

<Stack direction="column" gap="sm">
<span className="jetpack-seo-settings__schema-field-label">
<Text variant="heading-sm" className={ styles.fieldLabel }>
{ __( 'Avatar', 'jetpack-seo' ) }
</span>
<div className="jetpack-seo-settings__schema-avatar">
</Text>
<Stack direction="row" align="center" gap="sm" className={ styles.avatar }>
{ avatarUrl ? (
<img src={ avatarUrl } alt={ __( 'Author avatar', 'jetpack-seo' ) } />
) : null }
<a href="https://gravatar.com/profile" target="_blank" rel="noopener noreferrer">
<Link href="https://gravatar.com/profile" openInNewTab rel="noopener noreferrer">
{ __( 'Change your photo on Gravatar', 'jetpack-seo' ) }
</a>
</div>
</Link>
</Stack>
</Stack>

<TextControl
Expand All @@ -109,15 +110,15 @@ const AuthorProfileSection: FC< Props > = ( { form } ) => {
disabled={ disabled }
/>

<div className="jetpack-seo-settings__save">
<Stack direction="row" justify="flex-end">
<Button
onClick={ save }
disabled={ disabled || ! isDirty || hasNameError || hasProfileErrors }
aria-label={ __( 'Save author profile', 'jetpack-seo' ) }
>
{ saveLabel }
</Button>
</div>
</Stack>
</Stack>
);
};
Expand Down
55 changes: 29 additions & 26 deletions projects/packages/seo/_inc/screens/settings/schema-settings/local-business-fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

import { TextControl } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { Stack } from '@wordpress/ui';
import { Stack, Text } from '@wordpress/ui';
import clsx from 'clsx';
import styles from './style.module.scss';
import type {
LocalBusinessAddress,
LocalBusinessSettings,
Expand Down Expand Up @@ -177,28 +178,28 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
return (
<Stack direction="column" gap="lg">
{ storedAddressEmpty && defaultAddressEmpty && (
<span className="jetpack-seo-settings__title-tokens-label">
<Text variant="body-sm" className={ styles.muted }>
{ __(
'Add your business address — Google requires it before LocalBusiness info is shown.',
'jetpack-seo'
) }
</span>
</Text>
) }

{ ADDRESS_FIELD_ROWS.map( fields => (
<div
key={ fields[ 0 ].field }
className={ clsx( {
'jetpack-seo-settings__schema-paired-fields': fields.length > 1,
[ styles.pairedFields ]: fields.length > 1,
} ) }
>
{ fields.map( ( { field, label, help } ) => {
const fieldError = field === 'addressCountry' && ! isCountryCode( address[ field ] );
return (
<div
key={ field }
className={ clsx( 'jetpack-seo-settings__schema-paired-field', {
'jetpack-seo-settings__schema-field--error': fieldError,
className={ clsx( styles.pairedField, {
[ styles.fieldError ]: fieldError,
} ) }
>
<TextControl
Expand All @@ -220,10 +221,10 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
</div>
) ) }

<div className="jetpack-seo-settings__schema-paired-fields">
<div className={ styles.pairedFields }>
<div
className={ clsx( 'jetpack-seo-settings__schema-paired-field', {
'jetpack-seo-settings__schema-field--error': ! isPhoneNumber( localBusiness.telephone ),
className={ clsx( styles.pairedField, {
[ styles.fieldError ]: ! isPhoneNumber( localBusiness.telephone ),
} ) }
>
<TextControl
Expand All @@ -244,8 +245,8 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
</div>

<div
className={ clsx( 'jetpack-seo-settings__schema-paired-field', {
'jetpack-seo-settings__schema-field--error': ! isPriceRange( localBusiness.priceRange ),
className={ clsx( styles.pairedField, {
[ styles.fieldError ]: ! isPriceRange( localBusiness.priceRange ),
} ) }
>
<TextControl
Expand All @@ -269,11 +270,11 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
</div>
</div>

<div className="jetpack-seo-settings__schema-paired-fields">
<div className={ styles.pairedFields }>
{ GEO_FIELDS.map( ( { field, label, max } ) => {
const fieldError = hasPartialGeo || ! isCoordinate( geo[ field ], max );
return (
<div key={ field } className="jetpack-seo-settings__schema-paired-field">
<div key={ field } className={ styles.pairedField }>
<TextControl
label={ label }
inputMode="decimal"
Expand All @@ -289,22 +290,22 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
);
} ) }
{ geoError && (
<span id={ GEO_ERROR_ID } className="jetpack-seo-settings__schema-pair-error">
<Text id={ GEO_ERROR_ID } variant="body-sm" className={ styles.pairError }>
{ geoError }
</span>
</Text>
) }
</div>

<Stack direction="column" gap="sm">
<span className="jetpack-seo-settings__schema-field-label">
<Text variant="heading-sm" className={ styles.fieldLabel }>
{ __( 'Opening hours', 'jetpack-seo' ) }
</span>
<span className="jetpack-seo-settings__title-tokens-label">
</Text>
<Text variant="body-sm" className={ styles.muted }>
{ __(
"Leave a day blank if it's closed. A closing time earlier than opening means the business closes the following day.",
'jetpack-seo'
) }
</span>
</Text>
{ OPENING_DAYS.map( ( { code, label } ) => {
const hasOpens = Boolean( openingHours[ code ].opens.trim() );
const hasCloses = Boolean( openingHours[ code ].closes.trim() );
Expand All @@ -313,10 +314,12 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
const hasPairError = opensError || closesError;
const errorId = `jetpack-seo-settings-opening-hours-${ code }-error`;
return (
<div key={ code } className="jetpack-seo-settings__schema-opening-hours-row">
<span className="jetpack-seo-settings__schema-day-label">{ label }</span>
<div className="jetpack-seo-settings__schema-paired-fields">
<div className="jetpack-seo-settings__schema-paired-field">
<div key={ code } className={ styles.openingHoursRow }>
<Stack render={ <span /> } align="center" className={ styles.dayLabel }>
{ label }
</Stack>
<div className={ styles.pairedFields }>
<div className={ styles.pairedField }>
<TextControl
label={ sprintf(
/* translators: %s: day of week. */
Expand All @@ -335,7 +338,7 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
__nextHasNoMarginBottom
/>
</div>
<div className="jetpack-seo-settings__schema-paired-field">
<div className={ styles.pairedField }>
<TextControl
label={ sprintf(
/* translators: %s: day of week. */
Expand All @@ -355,9 +358,9 @@ const LocalBusinessFields: FC< Props > = ( { form } ) => {
/>
</div>
{ hasPairError && (
<span id={ errorId } className="jetpack-seo-settings__schema-pair-error">
<Text id={ errorId } variant="body-sm" className={ styles.pairError }>
{ OPENING_HOURS_PAIR_ERROR }
</span>
</Text>
) }
</div>
</div>
Expand Down
Loading
Loading