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.

Sign up for GitHub

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

Add gradient and color support in Quote #24968

Closed
wants to merge 4 commits into from
Closed

Add gradient and color support in Quote #24968

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4bc4fc
Add gradient, color, line height and font size support in Quote
ntsekouras Sep 1, 2020
a6464d0
remove quote deprecated test
ntsekouras Sep 1, 2020
6aaeba2
remove broken deprecation
ntsekouras Sep 1, 2020
750b5c2
remove typography support
ntsekouras Sep 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/block-library/src/quote/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@
}
},
"supports": {
"anchor": true
"anchor": true,
"__experimentalColor": {
"gradients": true,
"linkColor": true
},
"__experimentalLineHeight": true,
"__experimentalFontSize": true
}
}
4 changes: 4 additions & 0 deletions packages/block-library/src/quote/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@
&.is-large {
border: none;
}

.has-background & {
Copy link
Member

Choose a reason for hiding this comment

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

I saw that we use this padding in other blocks that have background color as well, but we add it in the style.css stylesheet instead of the theme.css. Not sure what's best, perhaps @jasmussen would know?

Copy link
Contributor

Choose a reason for hiding this comment

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

Good question.

Thje theme.scss file requires opt-in, style.scss is "baseline styles". Which other blocks are we using this same padding in?

Generally my instinct would be that this remains a bit of an opinionated style, and that the better place for it is in theme.scss so themes can decide themselves exactly how much padding, if any, they want to add to blocks that have background colors. But I'm not strongly of that opinion.

Is there something else we can do? Can Global Styles absorb some of this "if background then add padding" functionality?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Which other blocks are we using this same padding in?

Blocks that use this hook (color). As an example p.has-background and most of them don't have a theme.scss, they have this rule in styles.scss.

Maybe I should add it to styles.scss like the other ones, to be more consistent.

Can Global Styles absorb some of this "if background then add padding" functionality?

@nosolosw @jorgefilipecosta any thoughts?

Copy link
Member

Choose a reason for hiding this comment

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

I searched for $block-bg-padding and/or .has-background and this is what I found:

  • use styles.scss: columns, heading, list, paragraph.
  • use theme.scss: group, separator.

Not sure if there will be more. I don't have a preference and arguments can be made for both options. I trust Joen's instinct, perhaps theme.scss is less disruptive.

Another point for theme.scss is the question about global styles. Riad mentioned that we could look at using support for theme.json to do some other things (like a simpler block markup, cleaning up some styles, etc). I'd leave that out of this PR for now, but just mentioning that's another point for theme.scss (it can be more easily migrated to global styles).

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm personally not sure if the separation between theme.scss and style.scss was ever a successful thing.

Copy link
Contributor

Choose a reason for hiding this comment

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

I would agree with that, but I do think the goal of the separation was noble, and it would be nice if global styles could help there.

Two examples come to mind, when we started this, the figcaption element was rarely styled and looked out of place with his size and margins, so that was given a size and margin. And the quote had a left border.

For a theme that does style those two things, having to undo or override those styles is annoying. Therefore the separation.

If global styles could provide these came opinionated designs but allow themes to replace them (instead of overriding or unstyling), that could be a better solution.

padding: $block-bg-padding--v $block-bg-padding--h;
}
}