-
Notifications
You must be signed in to change notification settings - Fork 4k
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.
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
Adding Font size presets UI #63057
Open
matiasbenedetto
wants to merge
18
commits into
trunk
Choose a base branch
from
add/font-size-preset-ui-to-editor
base: trunk
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Adding Font size presets UI #63057
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
45959e4
adding ui for size presets
matiasbenedetto 923bc76
add disable prop
matiasbenedetto f27fc7d
Merge branch 'trunk' into add/font-size-preset-ui-to-editor
matiasbenedetto a8cc36b
removes font size custom ordering
matiasbenedetto 0585007
use origins
matiasbenedetto 8c8f8cd
fix spelling
matiasbenedetto cea269f
fixing font size presets count button size
matiasbenedetto f7df1da
size of font size preset item
matiasbenedetto 57ecea1
edit wording
matiasbenedetto e2b3653
style on font size preset item
matiasbenedetto a8e816d
focus on input on the rename preset modal
matiasbenedetto 2d1f957
redirect to font sizes
matiasbenedetto 7cc1260
Add confirm dialog to reset font size presets
matiasbenedetto 535953f
update wording
matiasbenedetto 316b24f
Merge branch 'trunk' into add/font-size-preset-ui-to-editor
matiasbenedetto 7752e21
remove size prop for ItemGroup
matiasbenedetto 1a22c99
remove number in font size presets drilldown
matiasbenedetto 679122e
improve item look
matiasbenedetto File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
adding ui for size presets
- Loading branch information
commit 45959e4eb4395e68e0fbf724906b4d0e9bd2056f
There are no files selected for viewing
49 changes: 49 additions & 0 deletions
49
...ages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
__experimentalConfirmDialog as ConfirmDialog, | ||
__experimentalUseNavigator as useNavigator, | ||
} from '@wordpress/components'; | ||
import { __, sprintf } from '@wordpress/i18n'; | ||
|
||
function ConfirmDeleteFontSizeDialog( { | ||
fontSize, | ||
isOpen, | ||
toggleOpen, | ||
handleRemoveFontSize, | ||
} ) { | ||
const navigator = useNavigator(); | ||
|
||
const handleConfirm = async () => { | ||
toggleOpen(); | ||
handleRemoveFontSize( fontSize ); | ||
navigator.goTo( '/typography/' ); | ||
}; | ||
|
||
const handleCancel = () => { | ||
toggleOpen(); | ||
}; | ||
|
||
return ( | ||
<ConfirmDialog | ||
isOpen={ isOpen } | ||
cancelButtonText={ __( 'Cancel' ) } | ||
confirmButtonText={ __( 'Delete' ) } | ||
onCancel={ handleCancel } | ||
onConfirm={ handleConfirm } | ||
size="medium" | ||
> | ||
{ fontSize && | ||
sprintf( | ||
/* translators: %s: Name of the font size preset. */ | ||
__( | ||
'Are you sure you want to delete "%s" font size preset?' | ||
), | ||
fontSize.name | ||
) } | ||
</ConfirmDialog> | ||
); | ||
} | ||
|
||
export default ConfirmDeleteFontSizeDialog; |
28 changes: 28 additions & 0 deletions
28
packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { unlock } from '../../../lock-unlock'; | ||
const { useGlobalStyle } = unlock( blockEditorPrivateApis ); | ||
|
||
function FontSizePreview( { fontSize } ) { | ||
const [ font ] = useGlobalStyle( 'typography' ); | ||
return ( | ||
<div | ||
className="edit-site-typography-preview" | ||
style={ { | ||
fontSize: fontSize.size, | ||
fontFamily: font?.fontFamily ?? 'serif', | ||
} } | ||
> | ||
{ __( 'Aa' ) } | ||
</div> | ||
); | ||
} | ||
|
||
export default FontSizePreview; |
241 changes: 241 additions & 0 deletions
241
packages/edit-site/src/components/global-styles/font-sizes/font-size.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,241 @@ | ||||||
/** | ||||||
* WordPress dependencies | ||||||
*/ | ||||||
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; | ||||||
import { __, sprintf } from '@wordpress/i18n'; | ||||||
import { | ||||||
__experimentalSpacer as Spacer, | ||||||
__experimentalUseNavigator as useNavigator, | ||||||
__experimentalView as View, | ||||||
__experimentalHStack as HStack, | ||||||
__experimentalVStack as VStack, | ||||||
privateApis as componentsPrivateApis, | ||||||
Button, | ||||||
FlexItem, | ||||||
ToggleControl, | ||||||
} from '@wordpress/components'; | ||||||
import { moreVertical } from '@wordpress/icons'; | ||||||
import { useState } from '@wordpress/element'; | ||||||
|
||||||
/** | ||||||
* Internal dependencies | ||||||
*/ | ||||||
import { unlock } from '../../../lock-unlock'; | ||||||
const { | ||||||
DropdownMenuV2: DropdownMenu, | ||||||
DropdownMenuItemV2: DropdownMenuItem, | ||||||
DropdownMenuItemLabelV2: DropdownMenuItemLabel, | ||||||
} = unlock( componentsPrivateApis ); | ||||||
const { useGlobalSetting } = unlock( blockEditorPrivateApis ); | ||||||
import ScreenHeader from '../header'; | ||||||
import FontSizePreview from './font-size-preview'; | ||||||
import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog'; | ||||||
import RenameFontSizeDialog from './rename-font-size-dialog'; | ||||||
import SizeControl from '../size-control'; | ||||||
|
||||||
function FontSize() { | ||||||
const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false ); | ||||||
const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false ); | ||||||
|
||||||
const { | ||||||
params: { slug }, | ||||||
goBack, | ||||||
} = useNavigator(); | ||||||
const [ fontSizes, setFontSizes ] = useGlobalSetting( | ||||||
'typography.fontSizes' | ||||||
); | ||||||
// Get the font sizes from the theme or use the default ones. | ||||||
const sizes = fontSizes.theme ?? fontSizes.default ?? []; | ||||||
|
||||||
// Get the font size by slug. | ||||||
const fontSize = sizes.find( ( size ) => size.slug === slug ); | ||||||
|
||||||
// Whether fluid is true or an object, set it to true, otherwise false. | ||||||
const isFluid = !! fontSize.fluid ?? false; | ||||||
|
||||||
// Whether custom fluid values are used. | ||||||
const isCustomFluid = typeof fontSize.fluid === 'object'; | ||||||
|
||||||
const handleNameChange = ( value ) => { | ||||||
updateFontSize( 'name', value ); | ||||||
}; | ||||||
|
||||||
const handleFontSizeChange = ( value ) => { | ||||||
updateFontSize( 'size', value ); | ||||||
}; | ||||||
|
||||||
const handleFluidChange = ( value ) => { | ||||||
updateFontSize( 'fluid', value ); | ||||||
}; | ||||||
|
||||||
const handleCustomFluidValues = ( value ) => { | ||||||
if ( value ) { | ||||||
// If custom values are used, init the values with the current ones. | ||||||
updateFontSize( 'fluid', { | ||||||
min: fontSize.size, | ||||||
max: fontSize.size, | ||||||
} ); | ||||||
} else { | ||||||
// If custom fluid values are disabled, set fluid to true. | ||||||
updateFontSize( 'fluid', true ); | ||||||
} | ||||||
}; | ||||||
|
||||||
const handleMinChange = ( value ) => { | ||||||
updateFontSize( 'fluid', { ...fontSize.fluid, min: value } ); | ||||||
}; | ||||||
|
||||||
const handleMaxChange = ( value ) => { | ||||||
updateFontSize( 'fluid', { ...fontSize.fluid, max: value } ); | ||||||
}; | ||||||
|
||||||
const updateFontSize = ( key, value ) => { | ||||||
const newFontSizes = sizes.map( ( size ) => { | ||||||
if ( size.slug === slug ) { | ||||||
return { ...size, [ key ]: value }; // Create a new object with updated key | ||||||
} | ||||||
return size; | ||||||
} ); | ||||||
|
||||||
setFontSizes( { | ||||||
...fontSizes, | ||||||
theme: newFontSizes, | ||||||
} ); | ||||||
}; | ||||||
|
||||||
const handleRemoveFontSize = () => { | ||||||
// Navigate to the font sizes list. | ||||||
goBack(); | ||||||
|
||||||
const newFontSizes = sizes.filter( ( size ) => size.slug !== slug ); | ||||||
setFontSizes( { | ||||||
...fontSizes, | ||||||
theme: newFontSizes, | ||||||
} ); | ||||||
}; | ||||||
|
||||||
const toggleDeleteConfirm = () => { | ||||||
setIsDeleteConfirmOpen( ! isDeleteConfirmOpen ); | ||||||
}; | ||||||
|
||||||
const toggleRenameDialog = () => { | ||||||
setIsRenameDialogOpen( ! isRenameDialogOpen ); | ||||||
}; | ||||||
|
||||||
return ( | ||||||
<> | ||||||
<ConfirmDeleteFontSizeDialog | ||||||
fontSize={ fontSize } | ||||||
isOpen={ isDeleteConfirmOpen } | ||||||
toggleOpen={ toggleDeleteConfirm } | ||||||
handleRemoveFontSize={ handleRemoveFontSize } | ||||||
/> | ||||||
|
||||||
{ isRenameDialogOpen && ( | ||||||
<RenameFontSizeDialog | ||||||
fontSize={ fontSize } | ||||||
isOpen={ isRenameDialogOpen } | ||||||
toggleOpen={ toggleRenameDialog } | ||||||
handleRename={ handleNameChange } | ||||||
/> | ||||||
) } | ||||||
|
||||||
<VStack spacing={ 4 }> | ||||||
<HStack justify="space-between" align="flex-start"> | ||||||
<ScreenHeader | ||||||
title={ fontSize.name } | ||||||
description={ sprintf( | ||||||
/* translators: %s: font size preset name. */ | ||||||
__( 'Manage the font size %s.' ), | ||||||
fontSize.name | ||||||
) } | ||||||
/> | ||||||
<FlexItem> | ||||||
<Spacer | ||||||
marginTop={ 3 } | ||||||
marginBottom={ 0 } | ||||||
paddingX={ 4 } | ||||||
> | ||||||
<DropdownMenu | ||||||
trigger={ | ||||||
<Button | ||||||
size="small" | ||||||
icon={ moreVertical } | ||||||
label={ __( 'Menu' ) } | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Improved accessibility. There might be a more appropriate label. |
||||||
/> | ||||||
} | ||||||
> | ||||||
<DropdownMenuItem | ||||||
onClick={ toggleRenameDialog } | ||||||
> | ||||||
<DropdownMenuItemLabel> | ||||||
{ __( 'Rename' ) } | ||||||
</DropdownMenuItemLabel> | ||||||
</DropdownMenuItem> | ||||||
<DropdownMenuItem | ||||||
onClick={ toggleDeleteConfirm } | ||||||
> | ||||||
<DropdownMenuItemLabel> | ||||||
{ __( 'Delete' ) } | ||||||
</DropdownMenuItemLabel> | ||||||
</DropdownMenuItem> | ||||||
</DropdownMenu> | ||||||
</Spacer> | ||||||
</FlexItem> | ||||||
</HStack> | ||||||
|
||||||
<View> | ||||||
<Spacer paddingX={ 4 }> | ||||||
<VStack spacing={ 4 }> | ||||||
<FlexItem> | ||||||
<FontSizePreview fontSize={ fontSize } /> | ||||||
</FlexItem> | ||||||
|
||||||
<SizeControl | ||||||
label={ __( 'Size' ) } | ||||||
value={ fontSize.size } | ||||||
onChange={ handleFontSizeChange } | ||||||
/> | ||||||
|
||||||
<ToggleControl | ||||||
label={ __( 'Fluid typography' ) } | ||||||
checked={ isFluid } | ||||||
onChange={ handleFluidChange } | ||||||
__nextHasNoMarginBottom | ||||||
/> | ||||||
|
||||||
{ isFluid && ( | ||||||
<ToggleControl | ||||||
label={ __( 'Custom fluid values' ) } | ||||||
help={ __( | ||||||
'Set custom min and max values for the fluid font size.' | ||||||
) } | ||||||
checked={ isCustomFluid } | ||||||
onChange={ handleCustomFluidValues } | ||||||
__nextHasNoMarginBottom | ||||||
/> | ||||||
) } | ||||||
|
||||||
{ isCustomFluid && ( | ||||||
<> | ||||||
<SizeControl | ||||||
label={ __( 'Minimum' ) } | ||||||
value={ fontSize.fluid?.min } | ||||||
onChange={ handleMinChange } | ||||||
/> | ||||||
<SizeControl | ||||||
label={ __( 'Maximum' ) } | ||||||
value={ fontSize.fluid?.max } | ||||||
onChange={ handleMaxChange } | ||||||
/> | ||||||
</> | ||||||
) } | ||||||
</VStack> | ||||||
</Spacer> | ||||||
</View> | ||||||
</VStack> | ||||||
</> | ||||||
); | ||||||
} | ||||||
|
||||||
export default FontSize; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
RenameFontSizeDialog
component does not receive anisOpen
prop.