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

Update icons for Paragraph, Heading and Subheading for clarity #9152

Merged
merged 2 commits into from Aug 20, 2018

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Aug 20, 2018

This PR changes the Paragraph heading to an outline version of the paragraph symbol. This is done to fix the confusion where the text-icon looks confusing next to alignments: https://mobile.twitter.com/webmatros/status/1030816482614235137

By using the Paragraph icon, it shows what the block is.

This PR also adds new icons for Heading and Subheading, a capital H and smallcap italic H respectively. This is inspired by the same reasons as the "P for Paragraph" argument, H for Heading. Subheading was changed additionally because its previous visual language could also be confused with alignments.

screen shot 2018-08-20 at 09 58 35

Edit: Don't mind the icon that says "Broken" — this was me testing a shared block to try and break something ;)

Update icons for Paragraph, Heading and Subheading for clarity
This PR changes the Paragraph heading to an outline version of the paragraph symbol. This is done to fix the confusion where the text-icon looks confusing next to alignments: https://mobile.twitter.com/webmatros/status/1030816482614235137

By using the Paragraph icon, it shows what the block is.

This PR also adds new icons for Heading and Subheading, a capital H and smallcap italic H respectively. This is inspired by the same reasons as the "P for Paragraph" argument, H for Heading. Subheading was changed additionally because its previous visual language could also be confused with alignments.

@jasmussen jasmussen added this to the 3.7 milestone Aug 20, 2018

@jasmussen jasmussen self-assigned this Aug 20, 2018

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Aug 20, 2018

@tofumatt

I like it. 👍🏻

@jasmussen jasmussen merged commit 1e540a2 into master Aug 20, 2018

2 checks passed

codecov/project 50.84% remains the same compared to 2d9f53b
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jasmussen jasmussen deleted the update/paragraph-icon branch Aug 20, 2018

@mtias

This comment has been minimized.

Show comment
Hide comment
@mtias

mtias Aug 20, 2018

Contributor

Nice, thanks for addressing.

I do have concerns with "H" as it doesn't make a lot of sense in most languages and I feel it's too English centric (I know this also corresponds to the HTML tag). It's one where it'd be nice to have localized icons. I do think the "T" works a bit better as the latin root is at least a bit more common across more languages.

Contributor

mtias commented Aug 20, 2018

Nice, thanks for addressing.

I do have concerns with "H" as it doesn't make a lot of sense in most languages and I feel it's too English centric (I know this also corresponds to the HTML tag). It's one where it'd be nice to have localized icons. I do think the "T" works a bit better as the latin root is at least a bit more common across more languages.

jasmussen added a commit that referenced this pull request Aug 20, 2018

Update Heading icon
This refines the recent heading icon change in #9152 (comment), per feedback.

Although it is H for Heading, internationally that first letter is not quite as ubiquitous, whereas T fares a bit better. By changing from an H we are also avoiding the very same issue that we sought to address by bringing back the Paragraph icon, namely that there are going to be icons (for heading levels) right next to the switcher, and if they look too alike that might cause confusion.

@jasmussen jasmussen referenced this pull request Aug 20, 2018

Merged

Update Heading icon #9159

@tofumatt

This comment has been minimized.

Show comment
Hide comment
@tofumatt

tofumatt Aug 20, 2018

Member
Member

tofumatt commented Aug 20, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Aug 20, 2018

Contributor

@tofumatt Don't worry about it, it's good to move fast. Also, I have it fixed in #9159 :)

Contributor

jasmussen commented Aug 20, 2018

@tofumatt Don't worry about it, it's good to move fast. Also, I have it fixed in #9159 :)

jasmussen added a commit that referenced this pull request Aug 20, 2018

Update Heading icon (#9159)
This refines the recent heading icon change in #9152 (comment), per feedback.

Although it is H for Heading, internationally that first letter is not quite as ubiquitous, whereas T fares a bit better. By changing from an H we are also avoiding the very same issue that we sought to address by bringing back the Paragraph icon, namely that there are going to be icons (for heading levels) right next to the switcher, and if they look too alike that might cause confusion.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment