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.

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

Hide the Font Size picker on Paragraph blocks when there is only one size defined #11628

Closed
JodiWarren opened this issue Nov 8, 2018 · 9 comments · Fixed by #13782
Closed
Labels
[Block] Paragraph Affects the Paragraph Block [Feature] UI Components Impacts or related to the UI component system Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Technical Feedback Needs testing from a developer perspective. Needs Testing Needs further testing to be confirmed. [Type] Enhancement A suggestion for improvement.
Milestone

Comments

@JodiWarren
Copy link

Is your feature request related to a problem? Please describe.
When the editor-font-sizes array has been limited to a single item, paragraphs only have one size. If custom font sizes are also disabled, the font size picker becomes a redundant control. See below screenshot:
image

Describe the solution you'd like
When custom font sizes are disabled, and only a single editor-font-size is set, the font size picker should not be displayed.

For instance, given the following code:

<?php
	add_theme_support( 'editor-font-sizes', array(
		array(
			'name' => __( 'Normal', 'gutenberg-test' ),
			'shortName' => __( 'N', 'gutenberg-test' ),
			'size' => 16,
			'slug' => 'normal'
		),
	) );
	add_theme_support('disable-custom-font-sizes');

I would expect to see the following:
image

Describe alternatives you've considered
This could potentially be solved on a case-by-case basis with some custom JS, or by creating a custom block. However, these are not particularly good solutions compared to a simple conditional statement in the original block definition.

@swissspidy
Copy link
Member

Agreed. I just noticed this today. Shouldn't be difficult to fix this.

@chrisvanpatten
Copy link
Contributor

I'm not sure I would remove it in the case there's only one size defined but what about if you explicitly register an empty array?

add_theme_support( 'editor-font-sizes', array() );

@JodiWarren
Copy link
Author

@chrisvanpatten That was actually the first thing I tried, but it fell back to the default settings. I'm not sure if it needs at least one font size for general usage. If not, then that seems like a good solution too.

@swissspidy
Copy link
Member

What about disabling the dropdown instead of removing it?

@JodiWarren
Copy link
Author

@swissspidy I'm no UX guru, but a disabled dropdown without much informational value just seems like visual noise to me. Since it's probably just as easy and reliable to simply not render it, that's a preferred route IMO.

@designsimply
Copy link
Member

The suggestion to not render if there aren't any options to choose sounds like a good decisions-not-options route, however, would it be confusing for someone if they were expecting to see the option there and it's missing? Or would that be fine as an edge case and worth it for the simplicity? What about displaying as plain text if choosing an option isn't available?

@designsimply designsimply added [Type] Enhancement A suggestion for improvement. [Feature] UI Components Impacts or related to the UI component system [Block] Paragraph Affects the Paragraph Block labels Nov 8, 2018
@chrisvanpatten chrisvanpatten added the Needs Design Feedback Needs general design feedback. label Nov 8, 2018
@chrisvanpatten
Copy link
Contributor

Might be a good "Needs Design Feedback" ticket too.

To clarify, the feedback we need:

If no font sizes are registered, and custom sizes are disabled, should we hide the font size picker entirely?

We can decide on the implementation after deciding how to handle it visually!

@karmatosed
Copy link
Member

I think this makes sense if no font sizes registered, showing would be not a good experience.

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Nov 22, 2018
@karmatosed karmatosed added this to the WordPress 5.0.1 milestone Nov 22, 2018
@mtias mtias added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Nov 30, 2018
@samikeijonen
Copy link
Contributor

In #5570 color palette can be disabled altogether with this code:

add_theme_support( 'editor-color-palette' );
add_theme_support( 'disable-custom-colors' );

The same should work for font sizes:

add_theme_support( 'editor-font-sizes' );
add_theme_support( 'disable-custom-font-sizes' );

But this leads to an error:

The editor has encountered an unexpected error.

I also tried with empty array: add_theme_support( 'editor-font-sizes' [ [] ] );

But this gives default font sizes like noted in previous comments. Anything we can do to move this forward?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Paragraph Affects the Paragraph Block [Feature] UI Components Impacts or related to the UI component system Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Technical Feedback Needs testing from a developer perspective. Needs Testing Needs further testing to be confirmed. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants