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

Make font size an implicit attribute of the block #21153

Merged
merged 13 commits into from
Apr 6, 2020

Conversation

oandregal
Copy link
Member

@oandregal oandregal commented Mar 25, 2020

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 ); }

@oandregal oandregal self-assigned this Mar 25, 2020
@oandregal oandregal added the [Status] In Progress Tracking issues with work in progress label Mar 25, 2020
@github-actions
Copy link

github-actions bot commented Mar 25, 2020

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

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

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

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)

@youknowriad youknowriad force-pushed the try/font-size-implicit-attribute branch from 912731f to 619b0dd Compare April 3, 2020 16:11
@youknowriad youknowriad added [Block] Paragraph Affects the Paragraph Block and removed [Status] In Progress Tracking issues with work in progress labels Apr 3, 2020
@youknowriad youknowriad marked this pull request as ready for review April 3, 2020 16:16
@youknowriad youknowriad requested review from jasmussen and kjellr April 3, 2020 16:24
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

LGTM 👍

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

@oandregal oandregal Apr 6, 2020

Choose a reason for hiding this comment

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

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
Copy link
Member Author

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

@oandregal oandregal requested review from nerrad and ntwb as code owners April 6, 2020 15:11
@@ -217,28 +217,30 @@


// Font sizes.
:root {
Copy link
Member Author

Choose a reason for hiding this comment

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

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

Copy link
Member Author

Choose a reason for hiding this comment

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

Follow-up at #21429

@oandregal oandregal merged commit a892a83 into master Apr 6, 2020
@oandregal oandregal deleted the try/font-size-implicit-attribute branch April 6, 2020 15:44
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 6, 2020
@kjellr
Copy link
Contributor

kjellr commented Apr 6, 2020

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:

twenty-nineteen

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
Copy link
Contributor

youknowriad commented Apr 6, 2020

@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
Copy link
Contributor

kjellr commented Apr 6, 2020

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.

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants