Upload an image in the editor and set its alignment to Right.
View the page — the image still appears left-aligned.
I noticed that the alignright class is applied to the parent container along with the wp-block-image class, but in the CSS, the alignright class is being targeted on the child tag instead.
We have to update the CSS to target the alignleft, alignright, and aligncenter classes properly.
Please see the screenshots for reference.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | 3568931-1.patch | 456.83 KB | keshavv |
| css.png | 201.5 KB | keshavv | |
| dom_view.png | 193.57 KB | keshavv | |
| alignment.png | 48.44 KB | keshavv |
Comments
Comment #2
keshavv commentedCreated a patch to fix it by updating the CSS
Comment #3
marcofernandes commentedThe vendor CSS in the module (block-library/blocks/image/style.css) matches upstream WordPress Gutenberg and is working as designed. It's best if themes provide their own alignment styles for .alignleft, .alignright, and .aligncenter.
Maybe we should have highlighted a bit more or be more detailed on the documentation but it's there: https://www.drupal.org/docs/contributed-modules/gutenberg/best-practices...
This is a more complex issue than just patching the css. For starters, Gutenberg module includes the style from block-library on the frontend when this style is only to be used in the editor. The alignment classes should be built on the fly (with cache mechanisms, ofc) via layout processor which implementation is incomplete in Drupal Gutenberg. Hopefully a fix it's on the way but no ETA yet.
Comment #4
marcofernandes commented