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 Background size support #26976

Closed
wants to merge 10 commits into from

Conversation

retrofox
Copy link
Contributor

@retrofox retrofox commented Nov 14, 2020

Description

This PR adds the background-size control section to the Cover block, in the block settings sidebar.

Demo Video

https://cloudup.com/cLE07dcijeQ

How has this been tested?

Add a cover block. Set an image background, and play with the background-size options.

Screen Shot 2020-11-13 at 9 26 06 PM

Background Size options

It supports four size options: cover, contain, original, and custom. Note: please feel free to destroy the icons 😅

Cover (default)

Applies cover CSS background-size property to the image.

Screen Shot 2020-11-13 at 9 35 54 PM

Contain

Applies contain CSS background-size property to the image.

Screen Shot 2020-11-13 at 9 36 40 PM

Original

Applies initial CSS background-size property to the image.

Screen Shot 2020-11-13 at 9 37 24 PM

Custom

It opens a secondary panel that allows defining the background-size with value + units, with the width, height, and Width & Height modes.

  • width: It will apply width size to the image, and auto to the height. It keeps doesn't change the image proportion.
  • height: It will apply height size to the image, and auto to the width. It keeps doesn't change the image proportion.
  • Width & Height: apply width and height values. The image could change its proportions.
width height Width & Height
Screen Shot 2020-11-13 at 9 38 30 PM Screen Shot 2020-11-13 at 9 39 57 PM Screen Shot 2020-11-13 at 9 41 28 PM

The available units are px and %.

CSS class and inline styles.

In the editor canvas, the styles are applied using inline styles. On another hand, the styles are applied via CSS classes, less the custom mode, since it uses value + unit notation.

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. Needs Design Feedback Needs general design feedback. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Nov 14, 2020
@github-actions
Copy link

Size Change: +1.26 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/index.js 148 kB +985 B (0%)
build/block-library/style-rtl.css 8.24 kB +136 B (1%)
build/block-library/style.css 8.24 kB +139 B (1%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 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 133 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.9 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 821 B 0 B
build/data/index.js 8.74 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/edit-site/index.js 23.2 kB 0 B
build/edit-site/style-rtl.css 3.98 kB 0 B
build/edit-site/style.css 3.98 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 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 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 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.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

Thanks for the PR! This seems like it could be a cool feature, but it also adds a great deal of complexity to a sidebar that is currently complex.

That doesn't mean we can't make it work, but it does mean that it needs a good and solid sidebar component control design before we can move on it. We will get there, but I'll ask your patience because it might not be this week!

CC: @jameskoster @ItsJonQ

@retrofox
Copy link
Contributor Author

That doesn't mean we can't make it work, but it does mean that it needs a good and solid sidebar component control design before we can move on it

Yeah, agree. I did a pretty-simple buttons group, but the idea is to be able to switch it for another component easily. I tried to get involved with some ideas around this component but not lucky so far.

@stokesman
Copy link
Contributor

@retrofox, I'm glad to work on this feature. In case you hadn't see it, I wanted to point out the related concept in #20193. Something like that, while probably a good bit more effort to implement, could sidestep the concern about a complicating the sidebar. Plenty to work out though even beside the implementation since that concept only seems to detail the "custom" scenario and it's not shown how that might switch from "cover" or "contain".

@retrofox
Copy link
Contributor Author

@retrofox, I'm glad to work on this feature. In case you hadn't see it, I wanted to point out the related concept in #20193.

Thanks. Yes, I saw it :-)

Something like that, while probably a good bit more effort to implement, could sidestep the concern about a complicating the sidebar.

What's not clear to me is the UI. should the block change its inner content with an Editing background tool? Providing a save button that allows going back to the regular state?

Plenty to work out though even beside the implementation since that concept only seems to detail the "custom" scenario and it's not shown how that might switch from "cover" or "contain".

we can add a preview button to switch quickly between background edition mode and regular mode

@stokesman
Copy link
Contributor

What's not clear to me is the UI. should the block change its inner content with an Editing background tool?

In that issue it is mentioned #20193 (comment):

... would focus just on the background of the block (fading all the layered blocks and their controls away)

But do they fade away completely? It may be desirable to adjust the background in relation to the inner blocks but because it will vary responsively, perhaps just fading them away completely is better. It does seem clear they should not be selectable though.

Providing a save button that allows going back to the regular state?

I think that's the checkmark here:
block toolbar concept
But it'd probably be better to do like the Image block currently implements for cropping and supply “Apply” and “Cancel” buttons.

BTW, my original comment here was supposed to say “I'm glad to see work on this feature”, to express appreciation for your work on this. (And while I would like to work on the implementation I'm not sure when I'll find the time).

Base automatically changed from master to trunk March 1, 2021 15:44
@annezazu
Copy link
Contributor

annezazu commented Apr 4, 2024

This hasn't been worked on in a number of years! I'm going to close it out as a result and encourage you to open a new PR that's in sync with the current codebase at this point. There's some great efforts currently under way to improve background image support too over the last couple of releases if you wanted to get involved there: #54336

@annezazu annezazu closed this Apr 4, 2024
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.

4 participants