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.

Sign up for GitHub

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

Jump to bottom

Alignment of images left or right next to text blocks #39

Open
danstramer opened this issue Mar 2, 2018 · 2 comments
Open

Alignment of images left or right next to text blocks #39

danstramer opened this issue Mar 2, 2018 · 2 comments

Comments

@danstramer
Copy link

Up till today, adding an image and setting it's alignment (Left, Right, Center, None) would cause the text to wrap around as expected.
Adding the alignment to an image block next to a text block does not work as expected.
More info in the comment section of this post:
https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/comment-page-1/#comment-170699

Dan
@gziolo
Copy link
Member

gziolo commented Mar 5, 2018 •
edited
Loading

I have the same issue.

Editor view

screen shot 2018-03-05 at 10 36 13

Frontend view

screen shot 2018-03-05 at 10 35 04

@jasmussen, I think it might be related to your recent changes to floats in the editor. Any hints how to fix it in the theme? I'm happy to open PR.

I think it is caused by the included max-width: 50% inline style:
screen shot 2018-03-05 at 10 40 55

which is a quite different when you compare with the editor:
screen shot 2018-03-05 at 10 42 18

jasmussen pushed a commit that referenced this issue Mar 7, 2018
Fix floats
6f6befc 
Starts work at #39.

This PR makes floats work in Gutenberg Starter Theme, right alongside wide and fullwide images. Captions work too.

However due to the addition of the inline max-width style added by Gutenberg, this PR features an !important modifier. We should strive to make changes to Gutenberg upstream, so that this is not necesary. While potentially we could find a different way to combine floats with wide and fullwide images (see https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/), the method used in this PR (based on https://codepen.io/joen/pen/oEYVXB?editors=1100) is fairly elegant in that (aside from captions) reduces complexity and the need to hide horizontal scrollbars occurring from the vw unit.
@jasmussen jasmussen mentioned this issue Mar 7, 2018
Merged
karmatosed pushed a commit that referenced this issue Mar 7, 2018
@jasmussen
Fix floats (#40)
339b62a 
Starts work at #39.

This PR makes floats work in Gutenberg Starter Theme, right alongside wide and fullwide images. Captions work too.

However due to the addition of the inline max-width style added by Gutenberg, this PR features an !important modifier. We should strive to make changes to Gutenberg upstream, so that this is not necesary. While potentially we could find a different way to combine floats with wide and fullwide images (see https://themeshaper.com/2018/02/15/styling-themes-for-gutenberg/), the method used in this PR (based on https://codepen.io/joen/pen/oEYVXB?editors=1100) is fairly elegant in that (aside from captions) reduces complexity and the need to hide horizontal scrollbars occurring from the vw unit.
@jdenning
Copy link

Another related issue for me is when I use Drop Cap. I am experimenting with Gutenberg in a test install. I do get text wrap when I am not using Drop Cap but as soon as I flip the switch to Drop Cap the entire paragraph box is parallel to the inserted image.
dropcap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gziolo @danstramer @jdenning