Media & Text Block: Add additional gutter/padding options for the text area

Media and text blocks enforce 8% of left and right padding around the text column. This ends up being quite a bit of space when dealing with small images.

The Media & Text block should be updated to mirror the custom padding support available in the cover block. That would allow that space to be editable.

Example

Here's an example use case of something I'm trying to achieve — a user photo next to a username:

But since that 8% margin isn't editable, it ends up looking like this:

Would be great if the media & text block's default content padding could be edited within theme.json. I wasn't able to find a way to do this other than add this CSS:

@media (max-width: 600px) {
	.wp-block-media-text__content {
		padding: 0 !important;
	}
}
@media (min-width: 600px) {
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
		padding: 0 6% 0 0;
	}
	.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
		padding: 0 0 0 6%;
	}
}

For those want to test spacing support, this allow control of gap in editor.
(this is not a beautiful solution)

In a js file:

wp.hooks.addFilter(
  "blocks.registerBlockType",
  "media-text/addSpacingSupport",
  (settings, name) => {
    if (name !== "core/media-text") {
      return settings;
    }
    settings.supports = {
      ...settings.supports,
      spacing: {
        margin: true,
        padding: true,
        blockGap: true,
        __experimentalDefaultControls: {
          padding: true,
          blockGap: true,
        },
      },
    };
    return settings;
  }
);

wp.hooks.addFilter(
  "editor.BlockListBlock",
  "my-plugin/with-inline-style",
  wp.compose.createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
      inlineStyles = computeSpacingStyle(props.attributes, {});
      console.log(inlineStyles);

      return (
        <BlockListBlock {...props} wrapperProps={{ style: inlineStyles }} />
      );
    };
  })
);

let computeSpacingStyle = (attributes, inlineStyles) => {
  if (attributes?.style?.spacing?.blockGap) {
    let gap = attributes.style.spacing.blockGap + "";
    gap = gap.split("|").pop();
    if (/^\d+$/.test(gap)) {
      gap = "var(--wp--preset--spacing--" + gap + ")";
    }
    inlineStyles.gap = gap;
    return inlineStyles;
  }
};

wp.hooks.addFilter(
  "blocks.getSaveContent.extraProps",
  "media-text/addSpacingSupport",
  function (extraProps, blockType, attributes) {
    if (blockType.name === "core/media-text") {
      let inlineStyles = extraProps.style || "";
      inlineStyles = computeSpacingStyle(attributes, inlineStyles);
      extraProps.style = inlineStyles;
    }
    return extraProps;
  }
);

In css reset default space and set your preferred

.wp-block-media-text > .wp-block-media-text__content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-media-text {
  gap: var(--wp--preset--spacing--60);
}

I don't know why this bloc not support spacing by default, but it work.

Now I know why there's no demo of the Media & Text block in the playground 😆

It's not an enhancement, it's a bug that breaks the layout!

My CSS fix:

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding-left: 0 !important;
}
.wp-block-media-text.has-media-on-the-left > .wp-block-media-text__content,
.wp-block-media-text:not(.has-media-on-the-right, .has-media-on-the-left) > .wp-block-media-text__content {
	padding-right: 0 !important;
}

Old issue, but still valid. I'm coming here from #67208 which has some good discussion, notably asking where to apply the gap.

You've also correctly identified the issue, which is this:

.wp-block-media-text > .wp-block-media-text__content {
    direction: ltr;
    grid-column: 2;
    grid-row: 1;
    padding: 0 8% 0 8%;
    word-break: break-word;
}

The text field on the right has a hard-coded padding value. Given we have both block-gap and padding controls that can be adjusted on a per-side basis, this no longer makes any sense.

In that vein, the ideal solution would be to remove that padding rule, and instead rely on block supports: the regular padding control around the whole media & text block could apply to just the right side, if that was your preference, and the block gap would define the gap between the image on the left, and the __content field on the right.

That is the ideal design solution. The challenge here is backwards compatibility: I'd defer to developers, what would be possible to do here.

But one idea is: instead of the padding applying around the whole media & text block apply it solely around the __content area. That way, we could retain the current padding value but with lowered specificity:

:where(.wp-block-media-text > .wp-block-media-text__content) {
    padding: 0 8% 0 8%;
}

As soon as you applied a block-supports padding, it would "win", same with block spacing.

Navigation Menu

Repository navigation

Media & Text Block: Add additional gutter/padding options for the text area #28556

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Media & Text Block: Add additional gutter/padding options for the text area #28556

Description

Activity

james-s-k commented on Apr 10, 2023

mkdgs commented on Aug 8, 2024

Klemart3D commented on Dec 18, 2025

jasmussen commented on Aug 24, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions