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

Use autocomplete for font selection. #3155

Merged
merged 54 commits into from
Sep 10, 2019
Merged

Use autocomplete for font selection. #3155

merged 54 commits into from
Sep 10, 2019

Conversation

spacedmonkey
Copy link
Contributor

Fixes #3027

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@miina
Copy link
Contributor

miina commented Sep 2, 2019

Notes from functional testing:

  • The fonts don't seem to be actually applied to the block (not in editor nor in the FE)
  • After deselecting the blocks which had font assigned (e.g. by clicking somewhere else in the editor) and then choosing the block again which had the font assigned, the following displayed in the Font selector:

Screenshot 2019-09-02 at 12 43 28

  • After refreshing, the font selector is empty, not displaying the chosen value
  • Would be good to have a placeholder such as "Type to search font" or something similar.

label: font.name,
} ) );
const suggestionTemplate = ( result ) => {
maybeEnqueueFontStyle( result.name );
Copy link
Collaborator

Choose a reason for hiding this comment

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

This loads the whole font stylesheet, whereas for performance reasons it might be beneficial to only load the glyphs actually needed to display the font name.

See #3027 (comment) for an example.

Then, when the font has been selected, the whole font stylesheet could be loaded.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I did some profiling here, the font is only 24kb, which is the size of a small image. As this is only loaded once the font is being displayed, it also has the benefit the preload the font before when displayed in the content of the amp page. Even 10 fonts loaded is only 240kb, which is the size of a small image.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hmm that sounds promising. I'll check it out myself while reviewing.

@spacedmonkey
Copy link
Contributor Author

Notes from functional testing:

  • The fonts don't seem to be actually applied to the block (not in editor nor in the FE)
  • After deselecting the blocks which had font assigned (e.g. by clicking somewhere else in the editor) and then choosing the block again which had the font assigned, the following displayed in the Font selector:
Screenshot 2019-09-02 at 12 43 28
  • After refreshing, the font selector is empty, not displaying the chosen value
  • Would be good to have a placeholder such as "Type to search font" or something similar.

This tweak this morning broke everything. aab610e and are fixed in 6fbec70

@miina
Copy link
Contributor

miina commented Sep 2, 2019

Probably we could already add some e2e tests for the existing fonts, and just add some more once the Google fonts PR gets merged.

@swissspidy
Copy link
Collaborator

The existing tests for FontFamilyPicker in assets/src/stories-editor/components/font-family-picker/test/index.js don't really apply anymore with this change. Since the component is now merely a wrapper around Autocomplete, we can probably remove those tests and concentrate on E2E tests instead.

I'd say the most important part to test there is the accurate preview / stylesheet enqueuing.

@spacedmonkey
Copy link
Contributor Author

E2E tested added. I don't know how an e2e is going to test that preview works, as this is visual.

@swissspidy
Copy link
Collaborator

I don't know how an e2e is going to test that preview works, as this is visual.

Testing that the stylesheets are enqueued would be good

@spacedmonkey
Copy link
Contributor Author

Testing that the stylesheets are enqueued would be good

There is now a test to make sure that google fonts are loaded. a27364f

@swissspidy
Copy link
Collaborator

But I am wonder if this is out of scope of this ticket and should be another PR.

The old font picker allows you to clear the font:

Screenshot 2019-09-06 at 12 28 53

Removing that now would be a regression IMHO.

@spacedmonkey
Copy link
Contributor Author

When trying to add a 'Clear font' button, I noticed that there is no way to change the value of the autocomplete programmatically. The default value can be set but this value changing doesn't seem to redraw the input. Set is handle within the compound and can not be accessed externally. Again, I might be missing something here...

@spacedmonkey
Copy link
Contributor Author

Created an issue with the core library regarding the clear issue alphagov/accessible-autocomplete#354

This component serves the purpose of announcing to screen readers, that the search results have changed in the autocomplete. And it needs a small change to occur when the message of "query too short" is displayed, even as the user types more characters. Thus a number of commas were inserted, and this still happens based off query length.

However, I don't think this component works at all, as it only works if it was in the DOM on the very first load of the HTML. And it clearly wasn't for a plurality of reasons. But I'm okay with keeping it for a11y reasons even though it might not actually serve that purpose.
@dero dero self-requested a review September 9, 2019 21:48
Copy link
Contributor

@dero dero left a comment

Choose a reason for hiding this comment

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

LGTM!

@swissspidy swissspidy added cla: yes Signed the Google CLA and removed cla: no Has not signed the Google CLA labels Sep 9, 2019
@googlebot
Copy link

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

ℹ️ Googlers: Go here for more info.

@googlebot
Copy link

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

@googlebot googlebot added cla: no Has not signed the Google CLA and removed cla: yes Signed the Google CLA labels Sep 10, 2019
@swissspidy
Copy link
Collaborator

@barklund @spacedmonkey Regarding thee Status component, I feel like we could just ditch it in a future PR and use withSpokenMessages / @wordpress/a11y instead for the aria-live region.

@swissspidy swissspidy added cla: yes Signed the Google CLA and removed cla: no Has not signed the Google CLA labels Sep 10, 2019
@googlebot
Copy link

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

ℹ️ Googlers: Go here for more info.

@swissspidy swissspidy added this to the v1.3 milestone Sep 10, 2019
@swissspidy swissspidy merged commit ea7b4ba into develop Sep 10, 2019
@swissspidy swissspidy deleted the feature/autocomplete branch September 10, 2019 07:06
@spacedmonkey spacedmonkey mentioned this pull request Sep 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla: yes Signed the Google CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font Picker: Use searchable dropdown
8 participants