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

[FEAT] Support linear gradient in cover block #20411

Merged
merged 34 commits into from
Feb 26, 2020

Conversation

dratwas
Copy link
Contributor

@dratwas dratwas commented Feb 24, 2020

Description

Fixes wordpress-mobile/gutenberg-mobile#1860

Gutenberg-mobile PR - wordpress-mobile/gutenberg-mobile#1949

ATM we are able to set the linear gradient as a background in the cover block. Since we don't have the gradient picker on mobile yet I added a possibility to render linear-gradient if it set on the web.

Additionally, I moved the logic from ColorBackground related to the gradient to a separate file - LinearGradient.

How has this been tested?

Test case 1

  • Add cover block on the web with predefined gradient as a background (it has to be linear gradient)
  • Open that post on mobile
  • The gradient background should be applied to the cover block on mobile

Test case 2

  • Add cover block on the web with custom gradient as a background (it has to be linear gradient)
  • Open that post on mobile
  • The custom gradient background should be applied to the cover block on mobile

Test case 3

  • Set gradient as a background as in previous test cases
  • Click on the button in BlockToolbar and choose media to set an image as a background
  • The gradient should be changed to the image you selected

Test case 4

  • Set gradient as a background as in previous test cases
  • Open block settings of the cover block
  • there should be only one option "Minimum height in pixel" since we don't support overlay on top of gradient

Screenshots

Simulator Screen Shot - iPhone X - 2020-02-24 at 10 33 55

Types of changes

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.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

geriux and others added 23 commits January 17, 2020 15:37
…/cover-block

# Conflicts:
#	packages/block-editor/src/components/media-upload/index.native.js
#	packages/block-library/src/heading/edit.native.js
#	packages/block-library/src/paragraph/edit.native.js
#	packages/rich-text/src/component/index.native.js
…h mobile and renaming to attributesFromMedia
…/cover-block

# Conflicts:
#	packages/rich-text/src/component/index.native.js
…/cover-block

# Conflicts:
#	packages/block-editor/src/components/media-upload/index.native.js
#	packages/components/src/index.native.js
@dratwas dratwas requested a review from geriux February 24, 2020 11:35
@dratwas dratwas added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Feb 24, 2020
@github-actions
Copy link

github-actions bot commented Feb 25, 2020

Size Change: 0 B

Total Size: 865 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 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.02 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 104 kB 0 B
build/block-editor/style-rtl.css 10.3 kB 0 B
build/block-editor/style.css 10.3 kB 0 B
build/block-library/editor-rtl.css 7.66 kB 0 B
build/block-library/editor.css 7.67 kB 0 B
build/block-library/index.js 116 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 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.6 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.9 kB 0 B
build/edit-post/style-rtl.css 8.59 kB 0 B
build/edit-post/style.css 8.58 kB 0 B
build/edit-site/index.js 4.62 kB 0 B
build/edit-site/style-rtl.css 2.51 kB 0 B
build/edit-site/style.css 2.51 kB 0 B
build/edit-widgets/index.js 4.41 kB 0 B
build/edit-widgets/style-rtl.css 2.59 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 325 B 0 B
build/editor/editor-styles.css 327 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 4.01 kB 0 B
build/editor/style.css 4 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 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.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.45 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.68 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.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 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.49 kB 0 B
build/priority-queue/index.js 879 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

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

All test cases worked perfectly, tested on the demo and the main apps for iOS and Android. Gradients look so pretty 🤩nice work! LGTM!

Btw remember to change the base of the PR to develop.

@dratwas dratwas changed the base branch from rnmobile/cover-block to master February 26, 2020 10:59
@dratwas
Copy link
Contributor Author

dratwas commented Feb 26, 2020

The base branch has been updated :). I also added one test case to check if we have correct settings when the gradient is set

@pinarol
Copy link
Contributor

pinarol commented Feb 26, 2020

Let's update the PR description to refer to wordpress-mobile/gutenberg-mobile#1860 instead. My bad directing to the wrong issue in the first place.

@geriux
Copy link
Member

geriux commented Feb 26, 2020

The base branch has been updated :). I also added one test case to check if we have correct settings when the gradient is set

All working great! Thanks!! Nice work!

@dratwas dratwas merged commit fcbc6ca into master Feb 26, 2020
@dratwas dratwas deleted the rnmobile/cover-block-gradient branch February 26, 2020 14:29
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cover block: Allow rendering gradient background
3 participants