Left and right image alignment issues with FSE themes

  • jharries

    (@jharries)


    1 year ago

    Hi All,

    I have found a bunch of threads on this problem, but they are all closed as resolved and as a long term WordPress user I don’t think it is resolved, at least not for people like me who are not high skill developers—I fumble around in CCS and PHP and get simple stuff done, but that’s it.

    I just want to be able to have wide images and align right and left images and have it work right, as it does here on a traditional (not FSE) theme as shown on my present live site: https://www.morganscloud.com/2023/11/10/bilge-alarms-and-monitoring/

    But on a full site editing theme, this does not work, as shown on the linked page above (now running Spectra One but I have tested this in 2023 and 2024, same thing). Scroll down to see the problem images.

    Of course I can get the small left and right images to respect the content area by grouping the post content block and then setting inner blocks to use content width, but If I do that the top image is no longer wide width.

    I could live with this behaviour if the left and right aligned images were contained to the wide width, but they are not. As I widen the viewport on the browser they keep going further and further out with no end. To me, at least, this makes this feel like a bug.

    I could also fix this on a per post basis, but I have 1500 posts on my live site, so editing each one is just not practical.

    I will be very grateful for any help since this is the only thing currently standing between me and converting to FSE, which I’m all over, and I suspect others will be in the same situation.

    Thanks

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jharries

    (@jharries)

    Hi Herry,

    Thanks for coming up, but that does not help. As I say my original ticket, like many long term WP users we have over 1500 posts so solutions that require editing at post level are not practical.

    The point being that this works fine in classic themes, and is broken in FSE themes, so I would suggest it needs fixing at the template or Theme.JSON level since it presents a barrier to the adoption of FSE for many loyal WP users.

    That said, in the mean time I would be grateful if anyone has any CSS and /or block filtering suggestions.

    • This reply was modified 1 year ago by jharries.
    Thread Starter jharries

    (@jharries)

    OK I found a work around on GitHub: https://github.com/WordPress/gutenberg/issues/40323

    @media only screen and (min-width : 768px) {
   figure.wp-block-image.alignleft {
	  margin-left: calc( ( 100% - var(--wp--style--global--content-size)) / 2 );
 }

   figure.wp-block-image.alignright {
	margin-right: calc( ( 100% - var(--wp--style--global--content-size)) / 2 );
 }
}

    I class this as a work around, not a fix since I really think that it should be fixed in a future release of core since the way it is now images alined left or right float all the way to the viewport edge and are not constrained in anyway to content or wide width, which is idiosyncratic to the way everything else works and very difficult for #nocode users to understand.

    And yes, I understand that putting the images inside a group is a fix, but is not practical for users like me with thousands of existing posts that this problem breaks.

    Point being that this is, in my view and now we have 6.4 and 2024, one of the few barriers standing in the way of wide spread adoption of FSE particularly by #nocode users.

    @jharries you are so right, this feels very much like a bug! I just upgraded & switched themes on a site with a few hundred pages all using full-width ‘group’ blocks with nested images floated left and right and post-upgrade the images all zipped waaay off the left or right, not respecting the ‘inner container’ width. THANK YOU for this CSS solution, it’s saving my life.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Left and right image alignment issues with FSE themes’ is closed to new replies.