Gutenberg media & text block centering issue

  • Hi — I’m working with Pinnacle and WordPress v5.0.1, and I’m noticing some problems with the media & text block. Pinnacle’s CSS is causing all the text in the block (headers, bullet lists, paragraph text) to center.

    You can correct the header and paragraph by manually changing the alignment to left or right, but the new editor doesn’t give you alignment options for bullet lists, so there’s no way to stop them from being centered. I believe this is happening because Pinnacle’s CSS is using text-align to center non-text elements.

    Additionally, block elements set to “wide width” are sticking out past the containing element on the right and left side. This looks like it might be intentional, but it’s not optimal since the new WordPress editor only gives two options for the width of a media & text block, either “wide width” or “full width” which goes all the way to the edge of the browser window.

    On a related note, Pinnacle’s 15px margin on all images causes images in the media & text block to misalign, shifting 15 pixels outside the frame in order to accommodate the margin.

    I’ve already implemented CSS patches to fix these problems so I’m not looking for a solution, I just wanted to make you aware of these issues with Pinnacle and the new WordPress editor. I’m sure there are more, but this is what I’ve come across so far.

    For anyone who is interested, here’s what I did to fix the text centering issue. This works if your media & text block is set to “wide width” and the page is not using a sidebar.

    .main:not(.kt-sidebar) .entry-content .alignwide:not(.wp-block-kadence-rowlayout) {text-align: left;}

    This is what I did to stop the “wide width” blocks from sticking out past the edges of the containing page:

    .main:not(.kt-sidebar) .entry-content .alignwide {width: 100%; margin-left: auto; margin-right: auto; right: 0; left: 0;}

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hey,

    Thanks for reporting. I’ll send this onto the theme developer so he can take a look and provide some input on this.

    -Kevin

    Hey thanks!
    That centering issue is a bug, same with the media text margin. I’m about to update with a fix.

    I’m not sure I understand the wide align. The CSS you add makes it the exact same as a normal aligned block. Making wide not have any effect, which if it’s not having an effect why use it or change it. Maybe you can shed some light on your thoughts with that?

    Ben

    Thread Starter jeffersonpowers

    (@jeffersonpowers)

    As I mentioned in my earlier post, the new WordPress editor only gives “wide” or “full” options for some elements, such as the “media & text block” (there are no other alignment options). That may be a problem for the Gutenberg team to solve.

    However, the way Pinnacle currently handles “wide” elements places them outside the right and left edges of the #content div. Sometimes this looks okay, but not always, especially with the “media & text block” element.

    ok, I see what you are saying. The media text block is defaulting to wide. If you click that through (the wide icon) so that it gets unselected then it will out as normal without an added alignment.

    Ben

    Thread Starter jeffersonpowers

    (@jeffersonpowers)

    Wow, that is not intuitive at all (not Pinnacle’s fault, clearly a Gutenberg “feature”).

    Thanks for the tip!

    angiething

    (@angelaschuurmans1987)

    Hello,

    I’ve come across the same problem, but it does not work for me when I click through the alignment buttons (I’ve tried all variations). The images don’t align nicely and are either aligned right or stick out at the right side. I want them to align centered or wide, but that seems not possible.

    @angelaschuurmans1987,

    Can you please post a new topic with a link to your site so that I can see if there are any errors?

    Forum rules require a new topic be started for each support query. Thanks!

    -Kevin

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Gutenberg media & text block centering issue’ is closed to new replies.