Skip to content

fix: resetting on global typography should only affect the current de… #3621

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
bfintal merged 1 commit into from
Nov 10, 2025
Merged

fix: resetting on global typography should only affect the current de… #3621

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
61 changes: 50 additions & 11 deletions src/plugins/global-settings/typography/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,11 +350,30 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',

const resetStyles = selector => {
let newSettings = {}
const currentFontPair = getCurrentFontPair()
if ( ! isEditingFontPair && currentFontPair ) {
newSettings = { ...typographySettings, [ selector ]: currentFontPair.typography[ selector ] }

const deviceFontSizeKey = getDevicePropertyKey( 'fontSize', deviceType )
const deviceFontSizeUnitKey = getDevicePropertyKey( 'fontSizeUnit', deviceType )
const deviceLineHeightKey = getDevicePropertyKey( 'lineHeight', deviceType )
const deviceLetterSpacingKey = getDevicePropertyKey( 'letterSpacing', deviceType )

newSettings = {
...typographySettings,
[ selector ]: {
...typographySettings[ selector ],
fontFamily: getDefaultFontFamily( selector ),
Copy link
Contributor

@bfintal bfintal Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is a reset, shouldn't the fontFamily be blank?

Copy link
Contributor Author

@Arukuen Arukuen Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default font family depends on the currently selected font pair, which will be provided by getDefaultFontFamily.

fontWeight: '',
textTransform: '',
// Only reset the properties on to the current device type values
[ deviceFontSizeKey ]: '',
[ deviceFontSizeUnitKey ]: '',
[ deviceLineHeightKey ]: '',
[ deviceLetterSpacingKey ]: '',
},
}

// Remove the keys with empty string
newSettings[ selector ] = cleanTypographyStyle( newSettings[ selector ] ) || {}

doAction( 'stackable.global-settings.typography-update-global-styles', newSettings )

updateTypography( newSettings )
Expand All @@ -369,20 +388,40 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',

const getIsAllowReset = selector => {
const currentFontPair = getCurrentFontPair()
const typographyStyle = cleanTypographyStyle( typographySettings[ selector ] ) || {}
const typographyStyle = typographySettings[ selector ]

const deviceFontSizeKey = getDevicePropertyKey( 'fontSize', deviceType )
const deviceFontSizeUnitKey = getDevicePropertyKey( 'fontSizeUnit', deviceType )
const deviceLineHeightKey = getDevicePropertyKey( 'lineHeight', deviceType )
const deviceLetterSpacingKey = getDevicePropertyKey( 'letterSpacing', deviceType )

// Create a temporary typography style on the current device type for comparison
const typographyStyleOnCurrentDevice = cleanTypographyStyle( {
fontFamily: typographyStyle?.fontFamily || '',
fontWeight: typographyStyle?.fontWeight || '',
textTransform: typographyStyle?.textTransform || '',
[ deviceFontSizeKey ]: typographyStyle?.[ deviceFontSizeKey ] || '',
[ deviceFontSizeUnitKey ]: typographyStyle?.[ deviceFontSizeUnitKey ] || '',
[ deviceLineHeightKey ]: typographyStyle?.[ deviceLineHeightKey ] || '',
[ deviceLetterSpacingKey ]: typographyStyle?.[ deviceLetterSpacingKey ] || '',
} ) || {}

if ( ! isEditingFontPair && currentFontPair ) {
// Clean style object to be consistent with changeStyles operation
const fontPairStyle = cleanTypographyStyle( currentFontPair.typography?.[ selector ] ) || {}
if ( ! isEqual( fontPairStyle, typographyStyle ) && ! Array.isArray( typographyStyle ) ) {
if ( ! isEqual( fontPairStyle, typographyStyleOnCurrentDevice ) &&
! Array.isArray( typographyStyleOnCurrentDevice )
) {
return true
}
return false
Comment on lines 409 to 417
Copy link

@coderabbitai coderabbitai bot Oct 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Comparison still trips reset in tablet/mobile

fontPairStyle retains the desktop/base keys (e.g. fontSize, fontSizeUnit), but typographyStyleOnCurrentDevice only keeps the current device keys (tabletFontSize, mobileFontSize, …). On tablet/mobile views this makes isEqual always fail—even when there are no device-specific overrides—so the Reset button still shows up. Please normalize the font pair snapshot to the current device before comparing.

-			const fontPairStyle = cleanTypographyStyle( currentFontPair.typography?.[ selector ] ) || {}
-			if ( ! isEqual( fontPairStyle, typographyStyleOnCurrentDevice ) &&
+			const fontPairStyle = cleanTypographyStyle( currentFontPair.typography?.[ selector ] ) || {}
+			const fontPairStyleOnCurrentDevice = cleanTypographyStyle( {
+				fontFamily: fontPairStyle?.fontFamily || '',
+				fontWeight: fontPairStyle?.fontWeight || '',
+				textTransform: fontPairStyle?.textTransform || '',
+				[ deviceFontSizeKey ]: fontPairStyle?.[ deviceFontSizeKey ] || '',
+				[ deviceFontSizeUnitKey ]: fontPairStyle?.[ deviceFontSizeUnitKey ] || '',
+				[ deviceLineHeightKey ]: fontPairStyle?.[ deviceLineHeightKey ] || '',
+				[ deviceLetterSpacingKey ]: fontPairStyle?.[ deviceLetterSpacingKey ] || '',
+			} ) || {}
+			if ( ! isEqual( fontPairStyleOnCurrentDevice, typographyStyleOnCurrentDevice ) &&
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if ( ! isEditingFontPair && currentFontPair ) {
// Clean style object to be consistent with changeStyles operation
const fontPairStyle = cleanTypographyStyle( currentFontPair.typography?.[ selector ] ) || {}
if ( ! isEqual( fontPairStyle, typographyStyle ) && ! Array.isArray( typographyStyle ) ) {
if ( ! isEqual( fontPairStyle, typographyStyleOnCurrentDevice ) &&
! Array.isArray( typographyStyleOnCurrentDevice )
) {
return true
}
return false
if ( ! isEditingFontPair && currentFontPair ) {
// Clean style object to be consistent with changeStyles operation
const fontPairStyle = cleanTypographyStyle( currentFontPair.typography?.[ selector ] ) || {}
const fontPairStyleOnCurrentDevice = cleanTypographyStyle( {
fontFamily: fontPairStyle?.fontFamily || '',
fontWeight: fontPairStyle?.fontWeight || '',
textTransform: fontPairStyle?.textTransform || '',
[ deviceFontSizeKey ]: fontPairStyle?.[ deviceFontSizeKey ] || '',
[ deviceFontSizeUnitKey ]: fontPairStyle?.[ deviceFontSizeUnitKey ] || '',
[ deviceLineHeightKey ]: fontPairStyle?.[ deviceLineHeightKey ] || '',
[ deviceLetterSpacingKey ]: fontPairStyle?.[ deviceLetterSpacingKey ] || '',
} ) || {}
if ( ! isEqual( fontPairStyleOnCurrentDevice, typographyStyleOnCurrentDevice ) &&
! Array.isArray( typographyStyleOnCurrentDevice )
) {
return true
}
return false
🤖 Prompt for AI Agents 
In src/plugins/global-settings/typography/index.js around lines 409-417, the
comparison fails because fontPairStyle contains desktop/base keys while
typographyStyleOnCurrentDevice contains only device-specific keys; normalize the
font pair snapshot to the current device before comparing by deriving a
device-specific object from currentFontPair.typography[selector] — map/translate
desktop/base properties to the current device equivalents (e.g., for device ===
'tablet' copy desktop fontSize/fontSizeUnit ->
tabletFontSize/tabletFontSizeUnit, same for mobile), then pass that normalized
device-specific object through cleanTypographyStyle and use isEqual against
typographyStyleOnCurrentDevice (keeping the existing Array.isArray guard).

} else if ( typographyStyle && ( typographyStyle.fontFamily ||
typographyStyle.fontSize || typographyStyle.tabletFontSize || typographyStyle.mobileFontSize ||
typographyStyle.fontWeight ||
typographyStyle.textTransform ||
typographyStyle.lineHeight || typographyStyle.tabletLineHeight || typographyStyle.mobileLineHeight ||
typographyStyle.letterSpacing || typographyStyle.tabletLetterSpacing || typographyStyle.mobileLetterSpacing ) ) {
} else if ( typographyStyleOnCurrentDevice && ( typographyStyleOnCurrentDevice.fontFamily ||
typographyStyleOnCurrentDevice[ deviceFontSizeKey ] ||
typographyStyleOnCurrentDevice[ deviceFontSizeUnitKey ] ||
typographyStyleOnCurrentDevice[ deviceLineHeightKey ] ||
typographyStyleOnCurrentDevice[ deviceLetterSpacingKey ] ||
typographyStyleOnCurrentDevice.fontWeight ||
typographyStyleOnCurrentDevice.textTransform ) ) {
return true
}
return false
Expand Down
Loading