Skip to content
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

Jump to bottom

FontSizePicker: Add display: contents rule to custom size select #68280

Merged
merged 5 commits into from
Dec 30, 2024
Merged

FontSizePicker: Add display: contents rule to custom size select #68280

merged 5 commits into from
Dec 30, 2024

Conversation

yogeshbhutkar
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar commented Dec 25, 2024 •
edited
Loading

Fixes: #68271

What, Why & How?

Fixes text overflow issues in the Font Size Picker component by implementing display: contents on components-font-size-picker element for long font size names.

Changes:
Adds display: contents rule to fix text overflow
Adds a new stylesheet for the font-size-picker component.

Testing Instructions

  1. Add custom font sizes with long names in your theme’s theme.json file. Example:
{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"slug": "extra-long-heading-one",
					"size": "16px",
					"name": "Extra Extra Extra Long Heading Style One"
				},
				{
					"slug": "extra-long-heading-two",
					"size": "20px",
					"name": "Extra Extra Extra Long Heading Style Two"
				}
			]
		}
	}
}
  1. Navigate to the Site Editor (Appearance > Editor).
  2. Open the Typography panel and try to select one of the custom font sizes with a long name.
  3. Notice, that the overflow is prevented because of truncation.

Screenshots

Large Devices

Before After
Screenshot 2024-12-25 at 11 34 51 AM Screenshot 2024-12-25 at 11 34 19 AM

Mobile Devices

Before After
Screenshot 2024-12-25 at 11 35 11 AM Screenshot 2024-12-25 at 11 35 35 AM

Screencast

Screen.Recording.2024-12-25.at.12.08.18.PM.mov

The fix works regardless of the screen width.

@yogeshbhutkar yogeshbhutkar marked this pull request as ready for review December 25, 2024 06:39
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 25, 2024 •
edited
Loading

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: SainathPoojary <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@yogeshbhutkar yogeshbhutkar changed the title FontSizePicker: truncate option name based on viewport size FontSizePicker: Add display: contents rule to font size picker Dec 25, 2024
@yogeshbhutkar
Copy link
Contributor Author

Hi @Mamaduka,
Could you please review this PR when you have a moment?

@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Dec 27, 2024
@Mamaduka Mamaduka requested a review from a team December 27, 2024 10:30
tyxla
tyxla reviewed Dec 27, 2024
View reviewed changes
packages/components/src/font-size-picker/style.scss Outdated
Comment on lines 1 to 3
.components-font-size-picker {
display: contents;
}
Copy link
Member

Choose a reason for hiding this comment

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

Instead of introducing a new stylesheet, it likely makes more sense to add it next to the pre-existing Emotion styles:

gutenberg/packages/components/src/font-size-picker/styles.ts

Lines 15 to 19 in 2078ac4

export const Container = styled.fieldset`
border: 0;
margin: 0;
padding: 0;
`;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, @tyxla for reviewing the PR. The suggested changes are implemented in the latest commit. The changes seem to work as expected.

Screenshot 2024-12-27 at 7 11 06 PM

mirka
mirka approved these changes Dec 27, 2024
View reviewed changes
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Looks good! I confirmed that this is currently safe and accessible in modern browsers.

packages/components/CHANGELOG.md Outdated
@@ -19,6 +19,7 @@
### Bug Fixes

- `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)).
- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the font size picker. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)).
Copy link
Member

Choose a reason for hiding this comment

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

We can be more specific here:

Suggested change
- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the font size picker. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)).
- `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the custom size select. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)).

@mirka mirka changed the title FontSizePicker: Add display: contents rule to font size picker FontSizePicker: Add display: contents rule to custom size select Dec 27, 2024
tyxla
tyxla approved these changes Dec 27, 2024
View reviewed changes
Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

LGTM, good to go once @mirka's feedback is addressed 👍

@yogeshbhutkar
Copy link
Contributor Author

Thanks for the review @mirka and @tyxla.

The suggested change has been implemented in the latest commit 🚀.

@Mamaduka Mamaduka added the props-bot Adding this label triggers the Props Bot workflow for a PR. label Dec 30, 2024
@github-actions github-actions bot removed the props-bot Adding this label triggers the Props Bot workflow for a PR. label Dec 30, 2024
@Mamaduka Mamaduka merged commit d0440b9 into WordPress:trunk Dec 30, 2024
65 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tyxla tyxla tyxla approved these changes

@mirka mirka mirka approved these changes

@Mamaduka Mamaduka Mamaduka approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 20.0
Development

Successfully merging this pull request may close these issues.

Site Editor Layout Breaks When Selecting Font Sizes with Long Names in theme.json
4 participants
@yogeshbhutkar @Mamaduka @mirka @tyxla