[Resolved] “Text & Media” block

[Michal Janata]

Hi,
I would like to report 2 issues with the new “Text & Media” block, which is included as part of WordPress.
1) The block does not respect the padding around page content
When the block is inserted into the page, it goes right to the edge of the the content box, not respecting the padding which is normally present for content. I was able to fix this with the following Additional CSS:

@media (min-width: 769px) {
    .entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
        margin-left: 0;
        width: inherit;
    }
    .wp-block-media-text.has-media-on-the-left .wp-block-media-text__content,
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        padding-left: 0;
    }
}

2) There is no space between the image and the text on mobile
On mobile, the text is pushed bellow the image. However, there is no spacing, so the text almost touches the image. I was able to fix this with the following Additional CSS:

@media (max-width: 768px) {	
    .is-stacked-on-mobile .wp-block-media-text__media {
        margin-bottom: 1.5em;
    }
}

(however, I think the value maybe should come from the customizer, not be hard-coded)

Thanks 🙂

[Leo]

Hi there,

Ideally, these things should be handled by WordPress itself and truthfully it’s kind of a pointless block – it’s nothing more than a columns block.

My honest recommendation would be to use the grid blocks from GenerateBlocks so you will have complete control over the paddings, margins, gaps, order etc:
https://docs.generateblocks.com/article/grid-overview/

[Michal Janata]

Hi, there is a meaningful difference between the columns block and that is the behaviour on mobile – the image is always above the text. With columns, this is not the case.
I have seen GenerateBlocks and it seems really nice. However, GeneratePress and GenerateBlocks are two separate products and I would like to be able to use stock WordPress blocks with GP without being forced to use GB as well.

[Leo]

Sounds good. Your CSS would be the best solution for now.

[Michal Janata]

So will you fix it for yourself? To make it work properly.

[Leo]

1) The block does not respect the padding around page content
When the block is inserted into the page, it goes right to the edge of the the content box, not respecting the padding which is normally present for content.

Looks like the text and media block only has 2 alignment options – wide width and full width:
https://www.screencast.com/t/3JNP58wb

The Wide width option is supposed to overwrite the padding around the page content – you can see the indication in the Wide width icon as shown in the screenshot above.

2) There is no space between the image and the text on mobile.

I would say that this is a personal preference so CSS solution should be used when needed.

[Michal Janata]

Hi,
thanks for the reply
1) I haven’t noticed that and will try to add the option for non-wide alignment with gutenberg.
2) Yes, this is a personal preference, however, I don’t think the current state is a good default.

[Leo]

2) Yes, this is a personal preference, however, I don’t think the current state is a good default.

We haven’t received other mentions of this. Let’s say if we add what you proposed, then other users that are using the text & media block who are happy with the current default/layout will have some to add the CSS to remove it. It’s essentially the same thing.

I’d say that this should be an option added by Gutenberg.

[Michal Janata]

Well, I’m trying to argue that putting some spacing in would be preferable by more users than not doing so.

[Leo]

I can’t recall other similar requests on this – most users who want control over the spacing would just go with GenerateBlocks as it allows you complete control and not just a set default padding.

GP doesn’t add or remove styles from the default Text & Media block so in this case, CSS should be added when needed.

[Author]

Posts