-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Heading font size "Default" does not match visual size in dropdown #26036
Comments
Agreed! What is the dropdown font size based on now, if not the actual font? I guess it doesn't take into account theme styles? I bet the ALL CAPS doesn't exactly help the size perception either. Anyway, seems like a win to fix this one. What do we need to solve this, code-wise? |
The following is a test in WordPress 5.7. It looks like it has been improved. |
Just looking at that gif I can see that in the dropdown *I realized later the ticket is about |
Perhaps @carolinan Carolina will have some thoughts on the themes Twenty Twenty and Twenty Twenty One in regards to font selector previews in the backend. |
I don't think I understand the problem, perhaps someone can try to explain it in different words?, or someone who worked on the updated size control can reply. large ... actually renders as smaller to what the default was I don't find it strange that a headings default size is larger than "large". I also see that the controls are different in the two gifs? |
What we mean is that the text in the font size dropdown is not the same size as the font size shown in the editor on the left. |
The font sizes in the drop down used to match the number of pixels that were assigned to that font size. So if I understand correctly now, it would be better if all the text in the drop down is displayed with the same size. |
I do agree that the default should also reflect its scale in comparison to the other font size options. However, the default size option is generated by not adding a "has-{font-size-slug}-font-size" class to the block. Because the theme determines the default size for the block, typically in CSS, we cannot access this size to imitate it in the select menu. On top of that, as @carolinan mentioned, if the font size is larger than the max font size display (currently set to 25px in Wordpress 5.8) it gets capped and can no longer be compared visually to other font sizes that have been capped. As that max font size is not that large, most of them are displayed as 25px. This completely defeats the purpose of this feature. I propose that scale comparison be removed from the select menu and all font sizes display the same and instead add a feature that will temporarily add the class to the block while hovering over the font size option in the select menu. This allows the user to visualize it without needing to select each and every option. In that same note, I also propose removing "Custom" as an option and only displaying it if a custom value is set in the "Custom" input. Currently, if you select the "Custom" option and the input for "Custom" is empty, it changes the selection to "Default" and appears to do nothing. That can potentially create frustration for users. |
After more thought, adding a class on "hover" would restrict the devices to only those who handle pointer events (ie not mobile). This may not be a big deal, but with over half of internet usage being on mobile devices, who knows... I still think that scale comparison should be removed if it is not consistent with the theme design. Some themes change type scale for responsive design as well and font sizes are not reflective of responsive design at this point. For example, the designer sets the initial font size presets for mobile and in CSS, updates the CSS variable presets values for different breakpoints. Also, the font family affects how the type displays and it does not mimic the font family used on the blocks; it is the standard Wordpress UI font-family. I know that font-families are a WIP though so maybe one day... Thoughts? |
I'm closing this as with the updated Font Size picker we show all the available options with the same size. |
Problem
The default font size doesn't match the size visually in the dropdown. Most other font sizes match visually. When I see the default size and go to click on a larger option in the dropdown, it actually renders as smaller to what the default was. Picking a larger option in the dropdown to see it rendered smaller is confusing.
Example of problem
Solution
The default font size should reflect the visual size as the other options do in the dropdown.
The text was updated successfully, but these errors were encountered: