Improve handling of centered 1-col galleries with small images #11040
Conversation
If you insert a gallery that has a single column, and multiple smallish images, then center it, the images inside do not appear centered. This is technically correct, since the _gallery itself_ is centered, but because it's full width and because the images might vary in widths, this doesn't appear to make any difference to the content inside. So although "correct", it's not a good user experience. This PR simply centers the content also.
| @@ -148,4 +148,12 @@ | |||
| &.alignright { | |||
| display: flex; | |||
| } | |||
|
|
|||
| // If the gallery is centered, center the content inside as well. | |||
| [data-align="center"] &, | |||
There was a problem hiding this comment.
Hi @jasmussen is [data-align="center"] &really needed? It looks like even in the editor the align center class is being applied.
If it is really needed I think we should add this selector in editor.scss. I think this selector will never be used on the frontend and is editor specific, so we should avoid sending editor specific CSS to sites frontend.
I checked that we have other editor selectors in this file we should probably remove them as well maybe in other PR as it is not related to this changes.
There was a problem hiding this comment.
The data-align properties, I'm almost completely convinced, used to be necessary in order for the styles to take on both front and editor, as in editor those alignment classes were not present. I may be misremembering, but I'm almost certain, which is why those classes were also present for left and right alignments. Those are all removed now, in fedf089, because as you note, they seem to be present, and it's working:
Those alignment classes are still not present for images, but I suppose that's a separate issue.
…ress#11040) * Improve handling of centered 1-col galleries with small images If you insert a gallery that has a single column, and multiple smallish images, then center it, the images inside do not appear centered. This is technically correct, since the _gallery itself_ is centered, but because it's full width and because the images might vary in widths, this doesn't appear to make any difference to the content inside. So although "correct", it's not a good user experience. This PR simply centers the content also. * Remove editor specific alignments.
…rnmobile/merge-blocks-on-backspace * 'master' of https://github.com/WordPress/gutenberg: Do not add isDirty prop to DOM (#11093) Format API (#10209) Remove 4.2 deprecated features (#10952) Update `@wordpress/hooks` README to include namespace mention (#11061) Feature: save lock control via actions (#10649) Fix usage of `preg_quote()` (#10998) Update plugin version to 4.1.1 (#11078) Improve preloading request code (#11007) Fix dynamic blocks not rendering in the frontend (#11050) Media & Text: Fixing vertical alignment of the image (#11025) Date: Mark getSettings as experimental (#10636) Improve handling of centered 1-col galleries with small images (#11040) Use better help text for ALT text input; fixes #8391. (#11052) # Conflicts: # packages/editor/src/components/rich-text/index.native.js
mtias
added
the
[Block] Gallery
If you insert a gallery that has a single column, and multiple smallish images, then center it, the images inside do not appear centered.
This is technically correct, since the gallery itself is centered, but because it's full width and because the images might vary in widths, this doesn't appear to make any difference to the content inside. So although "correct", it's not a good user experience.
This PR simply centers the content also.
This fixes #9531.
Centered 1 column gallery with small images before:
After:
Note this also has the following effect if you apply more than one column, while centered:
But that's fun! And remember, that's only if you disable cropping. If you enable cropping again, you get this recognizable friend: