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 editor p tag "go with the flow". #12998

Merged
merged 1 commit into from
Feb 8, 2019

Conversation

m-e-h
Copy link
Member

@m-e-h m-e-h commented Dec 18, 2018

Description

This commit sets the p tag to inherit whatever font-size and line-height are set on the body i.e., .editor-styles-wrapper.
Currently the p tag here overrides a theme's most basic of font styles unless font-size and line-height are set on p in that theme.
And from what I've seen, being that specific on p is an uncommon pattern.

This also makes it easier and requires less specificity to style paragraphs on a per block basis by simply adding the font-size to the block container.

How has this been tested?

I see no visual changes on a fresh underscores theme with demo content.

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

This commit sets the `p` tag to inherit whatever `font-size` and `line-height` are set on the `body` i.e., `.editor-styles-wrapper`. 
Currently the `p` tag here overrides a theme's most basic of font styles unless `font-size` and `line-height` are set on `p` in that theme.
And from what I've seen, being that specific on `p` is an uncommon pattern.

This also makes it easier and requires less specificity to style paragraphs on a per block basis by simply adding the font-size to the block container.
@chrisvanpatten
Copy link
Contributor

This should partly fix #11200, I think?

@chrisvanpatten chrisvanpatten added the [Feature] Custom Editor Styles Functionality for adding custom editor styles label Dec 18, 2018
@m-e-h
Copy link
Member Author

m-e-h commented Dec 18, 2018

Yep, I actually tried to find that ticket @chrisvanpatten but couldn't remember what it was exactly.

Looking at it now, this wouldn't directly fix that issue. The p would still choose font-size: inherit style over the one in .has-medium-font-size.

Unless a has-medium-font-size class was on one of the wrapping elements like the <div class="editor-rich-text has-medium-font-size>.

@gziolo gziolo added the Needs Design Feedback Needs general design feedback. label Feb 7, 2019
@gziolo gziolo added this to the 5.1 (Gutenberg) milestone Feb 7, 2019
@youknowriad
Copy link
Contributor

Worth checking with themes not providing editor styles to see if it's correct. I remember that this was originally needed because Core used to styles for the paragraphs by default but maybe this inherit technique fix the issue.

Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

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

This seems solid, and should allow themes to be a little less specific in their style declarations. 👍

I tested with a number of themes: some that provided editor styles, and some that didn't. All seemed to work just fine.

@youknowriad youknowriad merged commit 3148d8c into WordPress:master Feb 8, 2019
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
This commit sets the `p` tag to inherit whatever `font-size` and `line-height` are set on the `body` i.e., `.editor-styles-wrapper`. 
Currently the `p` tag here overrides a theme's most basic of font styles unless `font-size` and `line-height` are set on `p` in that theme.
And from what I've seen, being that specific on `p` is an uncommon pattern.

This also makes it easier and requires less specificity to style paragraphs on a per block basis by simply adding the font-size to the block container.
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
This commit sets the `p` tag to inherit whatever `font-size` and `line-height` are set on the `body` i.e., `.editor-styles-wrapper`. 
Currently the `p` tag here overrides a theme's most basic of font styles unless `font-size` and `line-height` are set on `p` in that theme.
And from what I've seen, being that specific on `p` is an uncommon pattern.

This also makes it easier and requires less specificity to style paragraphs on a per block basis by simply adding the font-size to the block container.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Custom Editor Styles Functionality for adding custom editor styles Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants