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

Add gradients support to Group, columns and media & text blocks #21375

Merged
merged 1 commit into from
Apr 8, 2020

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 3, 2020

Based on #21266

closes #21055

The paragraph and heading blocks also use the same hook so it's just as easy to add the gradients support there but I left them out cause gradient might not be that useful on textual blocks. That said, if you think we should just do it and be consistent, I'm happy to update the PR.

Everything is in the title.

@youknowriad youknowriad added [Block] Columns Affects the Columns Block [Block] Media & Text Affects the Media & Text Block [Block] Group Affects the Group Block (and row, stack and grid variants) [Type] Feature New feature to highlight in changelogs. labels Apr 3, 2020
@youknowriad youknowriad self-assigned this Apr 3, 2020
@github-actions
Copy link

github-actions bot commented Apr 3, 2020

Size Change: +18 B (0%)

Total Size: 889 kB

Filename Size Change
build/block-library/index.js 110 kB +18 B (0%)
ℹ️ 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-editor/index.js 103 kB 0 B
build/block-editor/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 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/style-rtl.css 7.42 kB 0 B
build/block-library/style.css 7.43 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/blocks/index.js 57.5 kB 0 B
build/components/index.js 195 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/core-data/index.js 10.7 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/index.js 2.75 kB 0 B
build/edit-navigation/style-rtl.css 279 B 0 B
build/edit-navigation/style.css 280 B 0 B
build/edit-post/index.js 92.9 kB 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-site/index.js 10.1 kB 0 B
build/edit-site/style-rtl.css 5.02 kB 0 B
build/edit-site/style.css 5.02 kB 0 B
build/edit-widgets/index.js 7.17 kB 0 B
build/edit-widgets/style-rtl.css 3.74 kB 0 B
build/edit-widgets/style.css 3.73 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.49 kB 0 B
build/editor/style.css 3.49 kB 0 B
build/element/index.js 4.44 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/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.84 kB 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/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Member

@ZebulanStanphill ZebulanStanphill left a comment

Choose a reason for hiding this comment

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

With regard to Paragraph and Heading blocks, I think the most common use-case for a background on a Paragraph is to highlight that Paragraph as important/special, and I can see someone wanting to use a gradient background for that. I also think consistency would be a good thing in this case.

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

Hi @youknowriad The PR itself looks good, but as in #21266 we will need to think about how things cascade.
Cascading for gradients may make sense e.g: as the theme, I may want to make buttons by default have a specific gradient, but it does not make much sense to have the gradient cascade from a group to the buttons inside. The solution is complex maybe that's where more specific variables enter? E.g: button may have a more specific variable, specifying the "background" the variable can be gradient or color than fallback to some kind of primary color.
Cascading the gradients in a container like a group to the descendants is probably never expected and maybe an inline style makes sense. But when we set a gradient in a container all the background related variables should be unset so the descents become transparent.

packages/block-library/src/columns/style.scss Outdated Show resolved Hide resolved
@youknowriad
Copy link
Contributor Author

@jorgefilipecosta I agree about the cascading issue, I'll try to come up with a solution on a separate PR.

@youknowriad youknowriad force-pushed the try/support-gradient-color-flg branch from 5c7f989 to cb39108 Compare April 8, 2020 10:58
@youknowriad youknowriad changed the base branch from try/support-gradient-color-flg to master April 8, 2020 13:30
@youknowriad youknowriad force-pushed the add/gradients-support-group-columns-media-text branch from 988ad5e to daae30a Compare April 8, 2020 13:31
@youknowriad youknowriad merged commit aa05f36 into master Apr 8, 2020
@youknowriad youknowriad deleted the add/gradients-support-group-columns-media-text branch April 8, 2020 13:56
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 8, 2020
@paaljoachim
Copy link
Contributor

@youknowriad

That said, if you think we should just do it and be consistent, I'm happy to update the PR.

Do please update the PR to include Paragraph and Heading blocks!
Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Block] Group Affects the Group Block (and row, stack and grid variants) [Block] Media & Text Affects the Media & Text Block [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Are gradients supported now?
4 participants