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

Cover: Add repeated background option #26001

Merged
merged 6 commits into from
Oct 12, 2020

Conversation

retrofox
Copy link
Contributor

@retrofox retrofox commented Oct 9, 2020

Description

This PR adds the Repeated Background option to the core/cover block.

ezgif com-gif-maker (1)

How has this been tested?

  • Create a cover block

  • Add an image as the background

  • Open the Block settings sidebar

  • Confirm you see the Repeated Background just below to Fixed Background

  • Play with different combinations

Screenshots

image

image

Video Demos

video 01 video 02

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.

@retrofox retrofox added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Oct 9, 2020
@github-actions
Copy link

github-actions bot commented Oct 9, 2020

Size Change: +106 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/index.js 145 kB +61 B (0%)
build/block-library/style-rtl.css 7.69 kB +23 B (0%)
build/block-library/style.css 7.69 kB +22 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 667 B 0 B
build/block-directory/index.js 8.56 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 130 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 8.65 kB 0 B
build/block-library/editor.css 8.65 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/index.js 169 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 9.63 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.63 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.28 kB 0 B
build/edit-site/index.js 21.3 kB 0 B
build/edit-site/style-rtl.css 3.8 kB 0 B
build/edit-site/style.css 3.81 kB 0 B
build/edit-widgets/index.js 21.2 kB 0 B
build/edit-widgets/style-rtl.css 3.03 kB 0 B
build/edit-widgets/style.css 3.03 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 45.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.75 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@retrofox retrofox self-assigned this Oct 10, 2020
@paaljoachim paaljoachim added the Needs Design Feedback Needs general design feedback. label Oct 12, 2020
@paaljoachim
Copy link
Contributor

This is a very cool PR! Thank you for creating the various videos! They show a nice overview of the creativity that one can add by repeating a pattern. I have also tested the PR.

One thing that comes to mind is how the Customizer handles the Background Image.
It uses a Preset drop down.

Screen Shot 2020-10-12 at 13 40 43

Here is an example of adding the same drop down to Gutenberg Cover block.
Cover-block-preset-options-dropdown

I will ping:
@mapk @ItsJonQ
As we need some more input on the UI.

Copy link
Contributor

@mapk mapk left a comment

Choose a reason for hiding this comment

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

I just tested this PR and it works well. 👍

repeat

I do like @paaljoachim's comment about including a few more options as the Customizer does, but I don't want to hold up this PR. Maybe we can get this in and then work toward those other options in another PR?

@retrofox
Copy link
Contributor Author

I do like @paaljoachim's comment about including a few more options as the Customizer does...

Yes. I do like it too, but wondering whether it should be adapted to the final user. I mean maybe it isn't totally clear what means every background option.

..., but I don't want to hold up this PR.

👍

Maybe we can get this in and then work toward those other options in another PR?

Sounds good to me. Thanks.

@retrofox retrofox force-pushed the update/cover-add-repeated-background branch from 214eb55 to 35561cd Compare October 12, 2020 18:20
@retrofox retrofox merged commit df8f6fd into master Oct 12, 2020
@retrofox retrofox deleted the update/cover-add-repeated-background branch October 12, 2020 20:57
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 12, 2020
@noahtallen
Copy link
Member

@retrofox I think this may have broken unit tests for the repo -- I think isRepeated needs to be added to the block fixtures for the unit tests

@noahtallen
Copy link
Member

Fix in #26044, I think

@retrofox
Copy link
Contributor Author

@retrofox I think this may have broken unit tests for the repo -- I think isRepeated needs to be added to the block fixtures for the unit tests

Sorry, my bad. I didn't realize it. 🤦 Thank you very much for fixing it. It won't happen again.

@marekhrabe
Copy link
Contributor

Awesome feature btw! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants