-
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
Font Library: adds the ability to use generic() in font family names. #59103
Conversation
… CSS level 4 spec. Example: generic(kai)
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress. If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged. If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack. Thank you! ❤️ View changed files❔ lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php |
Size Change: -1.35 kB (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
Looks like I the spaces should not be allowed inside generic() I'll remove that. |
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.
Left suggestions about simplifying the regex and clarifying a comment. Otherwise this looks good!
One thing that comes to mind is remembering to update the phpunit tests for WP_Font_Utils::sanitize_font_family
when this is merged to Core.
$regex = '/^(?!generic\([a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/'; | ||
$item = trim( $item ); | ||
if ( preg_match( $regex, $item ) ) { |
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.
Perhaps a simpler way to handle this part: use this regex that matches font family names that don't need quotes, and then add the quotes if there isn't a match: /^(generic\()?[A-z\-]+\)?$/
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.
there are some cases where this regex won't work as expected.
Example: generic(font
will match it because in the regex the trailing (
is optional.
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.
There's another error in the regex proposed that could produce unexpected results. A-z
doesn't match the same characters as a-zA-Z
but a wider and, in this case, unwanted set of characters.
Example: backets[]font
match that regex.
Reference: https://stackoverflow.com/questions/4923380/difference-between-regex-a-z-and-a-za-z
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.
Also, making the regex positive instead of negative makes it less specific and could match other unwanted strings, such as an empty string. For these reasons, I think we should keep the current regex.
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.
Good points, thanks for explaining. I see why the negative matching makes more sense in this case.
// Matchs any non alphabetic characters (a-zA-Z), dashes - , or parenthesis () | ||
const regex = /[^a-zA-Z\-()]+/; | ||
// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens). | ||
const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/; |
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.
Same as above, seems simpler to use /^(generic\()?[A-z\-]+\)?$/
and add quotes if a font family name doesn't match.
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.
See my answer above :)
Thanks for the review!
I think we should maintain the current, I explained the reasons here: #59103 (comment)
That's true 👍 |
Flaky tests detected in ea65057. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7931386181
|
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.
This is working as expected, and seems to do a better job of supporting the CSS spec recommendations 🎉.
$regex = '/^(?!generic\([a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/'; | ||
$item = trim( $item ); | ||
if ( preg_match( $regex, $item ) ) { |
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.
Good points, thanks for explaining. I see why the negative matching makes more sense in this case.
…#59103) * adds the ability to use generic in font families as the examples from CSS level 4 spec. Example: generic(kai) * update comment
I just cherry-picked this PR to the cherry-pick-beta-2 branch to get it included in the next release: 07eaea9 |
…#59103) * adds the ability to use generic in font families as the examples from CSS level 4 spec. Example: generic(kai) * update comment
What?
generic()
in font family names following the examples from the CSS level 4 specification.Example:
Reference: https://www.w3.org/TR/css-fonts-4/#font-family-prop
Why?
To be compliant with the CSS spec.
How?
Not adding quotes around generic font families. Example
generic(kai)
Testing instructions
Follow testing instructions from
generic()
families.