Skip to content

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