Make font size an implicit attribute of the block #21153

oandregal · 2020-03-25T17:17:14Z

This PR follows suit on what was done for colors at #21021 and makes the font size an implicit attribute of the block. Implemented for the paragraph block.

Notes

Custom font sizes might not be applied properly depending on the theme styles. If themes apply editor styles like this:

p {
   font-size: 12px
}

We'll recommend themes to do something like this instead

p { font-size: var( --wp--typography--font-size, 12px ); }

github-actions · 2020-03-25T17:22:26Z

Size Change: +4.12 kB (0%)

Total Size: 889 kB

Filename	Size	Change
`build/block-editor/index.js`	102 kB	+165 B (0%)
`build/block-editor/style-rtl.css`	10.2 kB	-373 B (3%)
`build/block-editor/style.css`	10.2 kB	-372 B (3%)
`build/block-library/index.js`	110 kB	+75 B (0%)
`build/block-library/style-rtl.css`	7.53 kB	+6 B (0%)
`build/block-library/style.css`	7.54 kB	+6 B (0%)
`build/blocks/index.js`	57.5 kB	+16 B (0%)
`build/components/index.js`	195 kB	+5 B (0%)
`build/core-data/index.js`	10.7 kB	+1 B
`build/edit-navigation/index.js`	2.71 kB	-2 B (0%)
`build/edit-post/index.js`	92.9 kB	+403 B (0%)
`build/edit-post/style-rtl.css`	12.3 kB	+225 B (1%)
`build/edit-post/style.css`	12.3 kB	+222 B (1%)
`build/edit-site/index.js`	10.1 kB	+340 B (3%)
`build/edit-site/style-rtl.css`	5.02 kB	+343 B (6%)	🔍
`build/edit-site/style.css`	5.02 kB	+343 B (6%)	🔍
`build/edit-widgets/index.js`	7.17 kB	+2.74 kB (38%)	🚨
`build/edit-widgets/style-rtl.css`	3.74 kB	-1 B
`build/edit-widgets/style.css`	3.73 kB	-1 B
`build/editor/editor-styles-rtl.css`	399 B	-24 B (6%)	✅
`build/editor/editor-styles.css`	400 B	-26 B (6%)	✅
`build/editor/index.js`	42.8 kB	+26 B (0%)
`build/element/index.js`	4.44 kB	-3 B (0%)
`build/nux/index.js`	3.01 kB	+1 B
`build/plugins/index.js`	2.54 kB	-1 B
`build/redux-routine/index.js`	2.84 kB	+1 B
`build/warning/index.js`	1.14 kB	+1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 kB	0 B
`build/annotations/index.js`	3.4 kB	0 B
`build/api-fetch/index.js`	3.79 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.03 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-library/editor-rtl.css`	7.22 kB	0 B
`build/block-library/editor.css`	7.22 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/components/style-rtl.css`	16.6 kB	0 B
`build/components/style.css`	16.5 kB	0 B
`build/compose/index.js`	6.21 kB	0 B
`build/data-controls/index.js`	1.04 kB	0 B
`build/data/index.js`	8.23 kB	0 B
`build/date/index.js`	5.36 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	569 B	0 B
`build/dom/index.js`	3.05 kB	0 B
`build/edit-navigation/style-rtl.css`	239 B	0 B
`build/edit-navigation/style.css`	241 B	0 B
`build/editor/style-rtl.css`	3.49 kB	0 B
`build/editor/style.css`	3.49 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	6.95 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.93 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.57 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.7 kB	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.84 kB	0 B
`build/notices/index.js`	1.57 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/rich-text/index.js`	14.5 kB	0 B
`build/server-side-render/index.js`	2.54 kB	0 B
`build/shortcode/index.js`	1.69 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/url/index.js`	4.01 kB	0 B
`build/viewport/index.js`	1.6 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

packages/block-editor/src/hooks/font-size.js

youknowriad

Nice work here, seems like we're closed. I think we might need a deprecated version to migrate the existing customFontSize attribute. I think you can just reuse the last deprecated version (since it's not released yet and was just added) and add the font size migration (similar to the color one)

packages/block-editor/src/hooks/font-size.js

youknowriad

LGTM 👍

oandregal · 2020-04-06T12:50:54Z

packages/block-editor/src/hooks/font-size.js

+	const classes = new TokenList( props.className );
+	classes.add( getFontSizeClass( attributes.fontSize ) );
+	const newClassName = classes.value;
+	props.className = newClassName ? newClassName : undefined;


Noting here that this has the side-effect of removing duplicated classes for old blocks that are updated. I can't think of any reason why this would be a problem but thought to highlight anyway before merging. cc @youknowriad

I've tested this with old content (preset values, custom values, duplicated classes) and works nicely, so I'm going to land in a few hours.

oandregal · 2020-04-06T12:56:25Z

This needs fixing an e2e snapshot. Have to go AFK for a couple of hours, will fix later.

oandregal · 2020-04-06T15:43:59Z

packages/block-library/src/style.scss

@@ -217,28 +217,30 @@


 // Font sizes.
+:root {


Ideally, this could use the CSS variables as well, can do in a separate PR. cc @jorgefilipecosta as you were thinking about this.

Follow-up at #21429

kjellr · 2020-04-06T16:48:07Z

Custom font sizes might not be applied properly depending on the theme styles.

Sorry — I didn't see this when I was pinged on Friday... This (and the other recently merged line-height PR is breaking some in-progress theme work at the moment, so I'd love to get some clarity on how themes are supposed to work with this.

At the moment, the :root specificity of this rule (and the line height one) tends to override things far beyond what's intended. For instance, in Twenty Nineteen, the site title and site description are both p tags on post pages. The line-height and font-size for those is now being overwritten by this rule:

The recommended note above is not designed to solve this problem:

p { font-size: var( --wp--typography--font-size, 12px ); }

The issue here is the :root specificity. So the theme would be required to use selectors like this to override in this case:

:root .site-title, 
:root .site-description

... and that seems a little weird. Is there a way for just to implement these new variables without relying on that :root specificity?

youknowriad · 2020-04-06T16:53:56Z

@kjellr Thanks for the comment and indeed the Global styles work has potential to conflict with theme styles.

We're still figuring out the best recommendations for theme authors and in the meantime we'll have an opt-in way to switch to the new styles. See #21428

That said, the solutions for theme will most likely involve:

writing less CSS
Adding config to the theme.json file
Use CSS variables to set these colors/customizations instead of raw values.

Can you clarify why theme would be required to do this :root .site-title but this instead?

.site-title {
    font-size: 35px; // fallback
     --wp--typography--font-size: 35px;
}

kjellr · 2020-04-06T18:04:12Z

We're still figuring out the best recommendations for theme authors and in the meantime we'll have an opt-in way to switch to the new styles. See #21428

Cool, that'll be necessary. Right now, these styles override lots of existing themes' styles.

Can you clarify why theme would be required to do this :root .site-title but this instead?

I see what you're saying. Something like that would work, but it doesn't feel very intuitive to me at first. I usually find that the variables are defined solely in the root, and then modified without actually redefining the value (eg. font-size: (var(----wp--typography--font-size) * 2)). This is likely just habit, influenced by many years of using Sass variables though. I can see how in a totally new theme (one built for global styles), this could be a comparatively easy approach.

oandregal self-assigned this Mar 25, 2020

oandregal requested review from gziolo, youknowriad and jorgefilipecosta March 25, 2020 17:17

oandregal added the [Status] In Progress Tracking issues with work in progress label Mar 25, 2020

youknowriad reviewed Mar 25, 2020

View reviewed changes

packages/block-editor/src/hooks/font-size.js Outdated Show resolved Hide resolved

oandregal force-pushed the try/font-size-implicit-attribute branch from e088390 to 912731f Compare March 27, 2020 15:02

youknowriad reviewed Mar 27, 2020

View reviewed changes

packages/block-editor/src/hooks/font-size.js Outdated Show resolved Hide resolved

youknowriad reviewed Mar 27, 2020

View reviewed changes

packages/block-editor/src/hooks/font-size.js Outdated Show resolved Hide resolved

youknowriad reviewed Mar 27, 2020

View reviewed changes

packages/block-editor/src/hooks/font-size.js Outdated Show resolved Hide resolved

youknowriad reviewed Mar 27, 2020

View reviewed changes

oandregal mentioned this pull request Mar 31, 2020

Global Styles: Try style system at site edit #20530

Closed

oandregal and others added 6 commits April 3, 2020 16:12

Make font size an implicit attribute of the block

0487f45

Export getFontSizeObjectByValue utility

1fbd486

Remove withFontSizes HOC

364cf70

Destructure props

23f62e6

Add CSS variable to block style

66da488

Refactor

619b0dd

youknowriad force-pushed the try/font-size-implicit-attribute branch from 912731f to 619b0dd Compare April 3, 2020 16:11

youknowriad added [Block] Paragraph Affects the Paragraph Block and removed [Status] In Progress Tracking issues with work in progress labels Apr 3, 2020

youknowriad marked this pull request as ready for review April 3, 2020 16:16

youknowriad requested review from ajitbohra, ellatrix, Soean and talldan as code owners April 3, 2020 16:16

youknowriad requested review from jasmussen and kjellr April 3, 2020 16:24

Add custom font-size attribute deprecation

51e0122

oandregal added 4 commits April 6, 2020 11:56

Prevent overriding other typography atts

e60bce1

Do not render line-height control if block doesnt declare support

8e7e9b4

Update paragraph example to use fontSize from style

d05f2b2

Dedupe classes

519c96c

youknowriad reviewed Apr 6, 2020

View reviewed changes

packages/block-editor/src/hooks/font-size.js Outdated Show resolved Hide resolved

Remove unnecessary classnames

652e85b

youknowriad approved these changes Apr 6, 2020

View reviewed changes

oandregal commented Apr 6, 2020

View reviewed changes

Update snapshot

b3bc3dd

oandregal requested review from nerrad and ntwb as code owners April 6, 2020 15:11

oandregal commented Apr 6, 2020

View reviewed changes

oandregal merged commit a892a83 into master Apr 6, 2020

oandregal deleted the try/font-size-implicit-attribute branch April 6, 2020 15:44

github-actions bot added this to the Gutenberg 7.9 milestone Apr 6, 2020

oandregal mentioned this pull request Apr 6, 2020

Add font size control for heading block #21431

Merged

kjellr mentioned this pull request Apr 22, 2020

Global Styles: Root font-size utility classes mismatch theme settings. #21759

Closed

oandregal mentioned this pull request Apr 29, 2020

font-size presets: fix specificity in editor #21969

Merged

oandregal mentioned this pull request May 29, 2020

Consolidate the style attributes of blocks #22700

Closed

mtias mentioned this pull request May 29, 2020

Block Styles Breakdown #20331

Closed

82 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make font size an implicit attribute of the block #21153

Make font size an implicit attribute of the block #21153

oandregal commented Mar 25, 2020 •

edited by youknowriad

github-actions bot commented Mar 25, 2020 •

edited

youknowriad left a comment

youknowriad left a comment

oandregal Apr 6, 2020 •

edited

oandregal commented Apr 6, 2020

oandregal Apr 6, 2020

oandregal Apr 6, 2020

kjellr commented Apr 6, 2020

youknowriad commented Apr 6, 2020 •

edited

kjellr commented Apr 6, 2020 •

edited

Make font size an implicit attribute of the block #21153

Make font size an implicit attribute of the block #21153

Conversation

oandregal commented Mar 25, 2020 • edited by youknowriad

github-actions bot commented Mar 25, 2020 • edited

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

oandregal Apr 6, 2020 • edited

Choose a reason for hiding this comment

oandregal commented Apr 6, 2020

oandregal Apr 6, 2020

Choose a reason for hiding this comment

oandregal Apr 6, 2020

Choose a reason for hiding this comment

kjellr commented Apr 6, 2020

youknowriad commented Apr 6, 2020 • edited

kjellr commented Apr 6, 2020 • edited

oandregal commented Mar 25, 2020 •

edited by youknowriad

github-actions bot commented Mar 25, 2020 •

edited

oandregal Apr 6, 2020 •

edited

youknowriad commented Apr 6, 2020 •

edited

kjellr commented Apr 6, 2020 •

edited