Try: apply the new type scale #18244

davewhitley · 2019-11-01T21:50:33Z

Description

This PR is an experiment to try and apply the new type scale, which is still a proposal at the moment.

Please note, I know there may be bugs, and there may be better ways to implement the type scale in code. This PR serves as a way to see the type scale in context. I did a few somewhat hacky things to override some styles.

Please give it a try and let me know what you think.

How has this been tested?

I have only visually tested the block editor.

Screenshots

Before/After gif https://make.wordpress.org/design/files/2019/10/comparison-editor.gif

Codepen of type scale https://codepen.io/drw158/pen/zbgEqO

After:

Types of changes

Created mixins for every type style
Updated various parts of Gutenberg to use the mixins
Minimal adjustments to spacing of some elements to solve visual defects

Visual changes:

This PR uses the new type scale, so the only visual changes are to type.
The default font size was increased to 14px, which is the biggest change.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

davewhitley · 2019-11-01T21:52:03Z

Sorry, I meant to add as a draft, and now I can't figure out how to convert it.

jameslnewell · 2019-11-05T00:29:39Z

packages/base-styles/_mixins.scss

+ * Type scale mixins
+ */
+
+@mixin text-title-large {


Should we prefix the mixins e.g. wp-text-title-large to avoid potential namespace clashes?

That seems ok to me, since there will probably be editor specific font styles like editor-text-body.

jameslnewell · 2019-11-05T00:31:49Z

packages/block-editor/src/components/block-list/style.scss

@@ -1090,18 +1090,16 @@

 	.components-toolbar {
 		border: none;
-		line-height: 1;
 		font-family: $default-font;


Should font-family be part of the mixin by default? The consumer can still override the font-family if they have a valid reason to do so.

Seems like we could get rid of font-family in the mixin.

jameslnewell · 2019-11-05T00:38:26Z

packages/base-styles/_variables.scss

 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
 $editor-font-size: 16px;
 $default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
 $text-editor-font-size: 14px;
 $editor-line-height: 1.8;
-$big-font-size: 18px;
+$big-font-size: 16px;


Do these typography related variables still need to exist now that the mixins exist? Can they be removed or at least deprecated?

The ones that are applied to the content of the post need to be kept separate and intact. The type scale shouldn't be applied in the content area because it represents the front end of the site, which is not in the scope of the type scale. For now, the type scale only applies to the application UI.

🆒🆒

Why did it change as part of this PR?

I think $big-font-size may be used for the UI, but I'd have to check and see why I changed it.

Looks like it's not used that much, but I think I changed it because of this class

.block-editor-inserter__menu-help-panel-title {

which is some sort of title in the inserter popover.

Since it's only used a couple times, it might be easier just to eliminate the need for $big-font-size

ItsJonQ · 2019-11-13T09:40:41Z

packages/block-editor/src/style.scss

@@ -37,3 +37,11 @@
 @import "./components/warning/style.scss";
 @import "./components/writing-flow/style.scss";
 @import "./hooks/anchor.scss";
+
+body {
+	@include text-body-small;


@davewhitley Halloo!!! This PR looks great :).

The thing that stuck out to me was applying styles to the overall body. For a plugin-like thing like Gutenberg, it feels strange that it would target something so broad outside of itself.

For example, when this is loaded in WP-Admin, I'm not sure what body p may affect.

If we wanted to adjust "global" (in the context of Gutenberg) font styles, would we be able to target just Gutenberg?

Hope that makes sense!

If we could specify Gutenberg only instead of body that'd be great (there's probably a good way to do that). I imagine it would take a few months to change those global styles in WP Admin.

Just checked locally. It looks like the styles are being overridden anyway by the existing common.css 😅

To apply things just to the editor, it looks like we have to update this file:
https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/style.scss#L65

Adding the @include text-body-small mixin there appeared to work 👍

davewhitley · 2019-11-13T22:21:48Z

packages/base-styles/_mixins.scss

+// Utility classes
+
+.block-editor-page .text-caption {
+	@include text-caption;


Might be a better way to do this. I had to add a class here:

https://github.com/WordPress/gutenberg/pull/18244/files/d59e72aeaab2c548c80abaee74d9c5edba77f805#diff-78ecdbd59f063cfb5365e815d2a58fd7R90

davewhitley · 2019-11-13T22:23:05Z

packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss

@@ -26,7 +29,7 @@
 	}

 	&__shortcut-term {
-		font-weight: 600;
+		// @include text-body-small;


Forgot to delete this.

iamthomasbishop · 2019-12-12T16:03:52Z

@davewhitley @jameslnewell I've been exploring how we might utilize this type scale in the native mobile version of Gutenberg, and overall I think it's going to work quite well. I have one main concern and that is letter-spacing. tl;dr my question is this: is it possible (or feasible, reasonable) to customize the letter-spacing based on which system font is used? The most-used ones (SF Pro and Roboto) have substantially different base character widths, and could thus benefit from fine-grain adjustments.

On native mobile GB, my plan was to follow the same type sizes, weights, etc. as y'all are defining here (we'd simply @import the type scale, afaik), but letter-spacing would essentially follow native values, separately for iOS and Android.

Here is my work-in-progress on mobile, closely following letter-spacing guidelines from Material Guidelines and HIG:

I understand setting everything to zero simplifies things a bit, but being an advocate for native I can't help but feel the urge to honor these type of details (pun fully intended). 🙃

EDIT: I just realized a couple of labels are off in the diagram above, but I think you get the point 😄

jameslnewell · 2019-12-13T08:37:55Z

I've been exploring how we might utilize this type scale in the native mobile version of Gutenberg, and overall I think it's going to work quite well.

Awesome!

is it possible (or feasible, reasonable) to customize the letter-spacing based on which system font is used?

With the component added in #18495 it will be easy to customise the letter-spacing based on which platform (Web/iOS/Android) the component is being used on. I think iOS/Android usually uses a single hardcoded font unlike the font-stack on Web, so customising the letter-spacing on a per-font basis should be possible on those two platforms.

iamthomasbishop · 2019-12-13T15:10:28Z

@jameslnewell All good things to hear! Thanks for confirming 😄

melchoyce · 2019-12-19T16:30:41Z

What can we do to move this PR forward?

LevinMedia · 2020-02-11T18:58:08Z

Also wanted to circle back and see if there is anything we can do to move this forward. Would love to be able to include this type scale in my designs.

jameslnewell · 2020-02-16T21:47:24Z

#18495 (comment) has landed so you can start using the styles today.

import { __experimentalText as Text } from '@wordpress/components';

export const MyComponent = () => (
	<>
		<Text variant="title.large" as="h1">Title Large</Text>
		<Text variant="title.medium" as="h2">Title Medium</Text>
		<Text variant="title.small" as="h3">Title Small</Text>
		<Text variant="subtitle">Subtitle</Text>
		<Text variant="subtitle.small">Subtitle Small</Text>
		<Text variant="body">Body</Text>
		<Text variant="body.small">Body Small</Text>
		<Text variant="button">Button</Text>
		<Text variant="caption">Caption</Text>
		<Text variant="label">Label</Text>
	</>
);

There is still some work left to do in updating the existing components to use these styles.

jameslnewell · 2020-02-16T21:50:40Z

^^^ I accidentally mashed too many keyboard keys and closed the issue, but this PR probably can be closed now @davewhitley?

jameslnewell · 2020-02-17T04:12:17Z

@iamthomasbishop @melchoyce @LevinMedia 🙏 I'd love some design input on the subtle changes/impact that applying the scale makes over here: #18652

ramonjd · 2021-08-26T05:29:18Z

This PR is a little stale and could probably be closed unless you think it's still relevant?

davewhitley added 3 commits November 1, 2019 16:31

Add mixins for type styles

c7219d6

Adjust default font size variables to adhere to type scale

73f4e3d

Apply type styles to block editor

d59e72a

davewhitley requested review from ajitbohra, chrisvanpatten, ellatrix, jorgefilipecosta, Soean, talldan and youknowriad as code owners November 1, 2019 21:50

jameslnewell reviewed Nov 5, 2019

View reviewed changes

ItsJonQ reviewed Nov 13, 2019

View reviewed changes

ItsJonQ self-requested a review November 13, 2019 09:40

jameslnewell mentioned this pull request Nov 13, 2019

Typography #18489

Closed

6 tasks

davewhitley commented Nov 13, 2019

View reviewed changes

jameslnewell mentioned this pull request Nov 14, 2019

added a Text component #18495

Merged

6 tasks

melchoyce mentioned this pull request Nov 19, 2019

Define a consistent text treatment for help text underneath form fields #15683

Open

LevinMedia mentioned this pull request Feb 12, 2020

Add dispute details screen Automattic/woocommerce-payments#418

Merged

1 task

dechov mentioned this pull request Feb 13, 2020

Update type styles to latest design standards Automattic/woocommerce-payments#427

Closed

jameslnewell closed this Feb 16, 2020

jameslnewell reopened this Feb 16, 2020

Base automatically changed from master to trunk March 1, 2021 15:42

ramonjd assigned davewhitley Aug 26, 2021

ramonjd added [Package] Base styles /packages/base-styles [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. labels Aug 26, 2021

snyk-bot mentioned this pull request May 19, 2022

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#67

Open

Mamaduka closed this Jul 15, 2022

MaxMood96 mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#77

Open

snyk-bot mentioned this pull request Dec 26, 2022

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#82

Open

MaxMood96 mentioned this pull request Jan 10, 2023

[Snyk] Fix for 1 vulnerabilities MaxMood96/gutenberg#84

Open

sirreal deleted the try/new-type-scale branch September 25, 2024 15:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: apply the new type scale #18244

Try: apply the new type scale #18244

davewhitley commented Nov 1, 2019 •

edited

Loading

davewhitley commented Nov 1, 2019

jameslnewell Nov 5, 2019 •

edited

Loading

davewhitley Nov 13, 2019

jameslnewell Nov 5, 2019 •

edited

Loading

davewhitley Nov 13, 2019

jameslnewell Nov 5, 2019 •

edited

Loading

davewhitley Nov 13, 2019 •

edited

Loading

jameslnewell Nov 13, 2019

davewhitley Nov 13, 2019

davewhitley Nov 13, 2019 •

edited

Loading

ItsJonQ Nov 13, 2019

davewhitley Nov 13, 2019

ItsJonQ Nov 14, 2019

ItsJonQ Nov 14, 2019

davewhitley Nov 13, 2019

davewhitley Nov 13, 2019

iamthomasbishop commented Dec 12, 2019 •

edited

Loading

jameslnewell commented Dec 13, 2019 •

edited

Loading

iamthomasbishop commented Dec 13, 2019

melchoyce commented Dec 19, 2019

LevinMedia commented Feb 11, 2020

jameslnewell commented Feb 16, 2020 •

edited

Loading

jameslnewell commented Feb 16, 2020

jameslnewell commented Feb 17, 2020

ramonjd commented Aug 26, 2021

Try: apply the new type scale #18244

Try: apply the new type scale #18244

Conversation

davewhitley commented Nov 1, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

davewhitley commented Nov 1, 2019

jameslnewell Nov 5, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameslnewell Nov 5, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jameslnewell Nov 5, 2019 • edited Loading

Choose a reason for hiding this comment

davewhitley Nov 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davewhitley Nov 13, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamthomasbishop commented Dec 12, 2019 • edited Loading

jameslnewell commented Dec 13, 2019 • edited Loading

iamthomasbishop commented Dec 13, 2019

melchoyce commented Dec 19, 2019

LevinMedia commented Feb 11, 2020

jameslnewell commented Feb 16, 2020 • edited Loading

jameslnewell commented Feb 16, 2020

jameslnewell commented Feb 17, 2020

ramonjd commented Aug 26, 2021

davewhitley commented Nov 1, 2019 •

edited

Loading

jameslnewell Nov 5, 2019 •

edited

Loading

jameslnewell Nov 5, 2019 •

edited

Loading

jameslnewell Nov 5, 2019 •

edited

Loading

davewhitley Nov 13, 2019 •

edited

Loading

davewhitley Nov 13, 2019 •

edited

Loading

iamthomasbishop commented Dec 12, 2019 •

edited

Loading

jameslnewell commented Dec 13, 2019 •

edited

Loading

jameslnewell commented Feb 16, 2020 •

edited

Loading