Pictures alignment issues after new update of WP

  • Resolved misaka1

    (@misaka1)


    3 years, 4 months ago

    Hello,

    I noticed that after the recent update of WP something looked different.
    I am sometimes using in my article introduction for guest posters and under that, I want to use a small avatar of them that is aligned left (which by default was even though I did not use any alignment at all).

    After the recent WP update, it looks like this while I edit (the picture is aligned left) it but the live version shows the picture in the center.
    I want the picture to be aligned left normally.

    If I force the picture to align left, it moves the text under it next to it instead of it being neatly under like before… and even if I press enter many times to fix it in the editor the live version is still showing it next to it no matter what I do.

    Is this fixable?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Isabel Brison

    (@isabel_brison)

    3 years, 4 months ago

    Hi! That sounds a lot like an issue that was recently fixed. Could you share a few more details about your setup to help us debug? It would be useful to know:

    * WordPress version
    * Gutenberg version
    * If you are using the default image block for the avatar, or a custom block
    * Any other plugins you have active
    * Active theme

    In the meantime, a quick fix would be to force the image to align left, and add a Spacer block right under it, with height set to 1px so it won’t affect the layout. This should ensure that the text below doesn’t wrap around the image.

    Thread Starter misaka1

    (@misaka1)

    3 years, 4 months ago

    Hello @isabel_brison ,

    I am 100% sure this is related to updating WordPress to 5.6 version. It happened right after I updated the WP version to the newest one.
    After I rollbacked my WP to 5.5.3 (Oct 30 release), it works normally again and the picture alignment is just fine.
    I am not sure why this is happening. I would like to use the newest version of WP but I am really upset with this bug it’s causing.
    Every plugin I have is updated. It is the default image block.

    Other plugins I am using:
    Akismet Anti-Spam
    Asset CleanUp: Page Speed Booster
    Atomic Blocks – Gutenberg Blocks Collection
    Code Snippets
    Cookie Notice
    Edit Author Slug
    Favicon by RealFaviconGenerator
    Jetpack by WordPress.com
    OneSignal Push Notifications
    Read Meter – Reading Time & Progress Bar for WordPress.
    Really Simple SSL
    Remove Footer Credit
    Simple Author Box
    Site Kit by Google
    Smash Balloon Instagram Feed
    Stackable – Gutenberg Blocks
    ThirstyAffiliates
    Title and Nofollow For Links
    Webcraftic Robin image optimizer
    Wordfence Security
    WP Downgrade | Specific Core Version
    WP Fastest Cache
    WP Mail SMTP
    WP Rollback
    WP-PageNavi
    WPS Hide Login
    Yoast SEO

    Active Theme: Colormag

    btw thanks for the quick fix tip, I will definitely try it

    • This reply was modified 3 years, 4 months ago by misaka1.
    Plugin Author Isabel Brison

    (@isabel_brison)

    3 years, 4 months ago

    Hi @misaka1 , thanks for the extra info! I can reproduce the issue with the Colormag theme, but it’s also happening in 5.5.3 for me. It seems to be caused by theme styles: the image wrapper center-aligns its contents, and the image itself also gets centered as a result. This doesn’t happen on any of the default themes because the image is set to display: block on those.

    Is it possible there was a theme update around the time of 5.6 that caused this? It might be worth raising the issue with them.

    Otherwise, you could try adding a snippet of CSS in the customizer to fix the issue globally, something like:

    .wp-block-image img { display; block; }

    But make sure to check if that doesn’t cause issues with other images, as it will affect all image blocks.

    Thread Starter misaka1

    (@misaka1)

    3 years, 4 months ago

    It seems to not be doing anything. 🙁

    Also, if I add .wp-block-image img into additional CSS, it’s red. I rollbacked three updates ago and it doesn’t seem to change, but each them when I downgrade my WP version to 5.5.3 it shows correctly again. I have just updated it now, and it shows in the center again. I absolutely don’t get it.

    By the way, why is it that I can’t copy paste spacer and separator in Gutenberg editor? All other blocks work with shortcut ctrl c, ctrl v. It has been bugging me for some time. There are the blocks where using shortcuts (keyboard) doesn’t work for me. If I try ctrl c, it does nothing. It works only if I click on the block and copy it like that.

    Thanks!

    • This reply was modified 3 years, 4 months ago by misaka1.
    Plugin Author Isabel Brison

    (@isabel_brison)

    3 years, 4 months ago

    Oh whoops, sorry, just realised there was a typo in that snippet. It should read

    .wp-block-image img { display: block; }

    (that’s why it was showing red)

    By the way, why is it that I can’t copy paste spacer and separator in Gutenberg editor?

    That sounds like a bug! Thanks for letting us know. I’ll write up a report for it and hopefully it’ll get fixed soon.

    • This reply was modified 3 years, 4 months ago by Isabel Brison.
    Thread Starter misaka1

    (@misaka1)

    3 years, 4 months ago

    I added the code now. It seems to be working, thanks a lot!

    By the way, this copy function with ctrl c seems to be dependant on the version of WP too for me. When I had 5.5.3, it could copy at least Separator, but could not copy Spacer.

    In 5.6, I can’t copy either of them with ctrl c anymore. It’s indeed a bug.

    Thank you for your time, it was of great help to me

    Plugin Author Isabel Brison

    (@isabel_brison)

    3 years, 4 months ago

    No worries, happy to help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Pictures alignment issues after new update of WP’ is closed to new replies.