Enhancing the WordPress Media-Text Block: Custom Spacing and Border Radius Fixes
This is my example of a simple way to extend the core Media-Text block in WordPress to gain better control over content spacing and fix the border-radius styling for a cleaner, more polished design.
The Media-Text Block
The core/media-text block is a versatile tool in WordPress, providing an intuitive way to showcase media alongside text.
Out of the box and If the theme permits, it supports customizations for color, dimensions (padding and margin), border, and border-radius, allowing users to easily style the block for various layouts and presentations.
I frequently use this block in my projects due to its flexibility and ease of setup.
However, while the block offers many options, there were a couple of enhancements I found myself needing repeatedly. To streamline my workflow and align the block’s behavior with my design vision, I developed a simple extension.
This extension introduces more refined control over vertical spacing for the content area while also addressing a persistent issue with the block’s border-radius styling on the media side.
The Default Features
When working with the media-text block, my goal was to emphasize the content without compromising the display of the media. While the block allows padding adjustments, applying padding to both the media and the text areas often resulted in undesirable effects—specifically, it clipped parts of the image, which detracted from the overall design.
The Extended Solution
To resolve this, I extended the block to allow padding adjustments solely for the content element, leaving the media untouched. This approach ensures that both the content and media maintain their distinct visual roles while appearing well-integrated on the page.
Additionally, I fixed an issue where the border-radius setting wasn’t applying correctly on the media side, further enhancing the block’s visual consistency.
The Plugin (Free Download)
This is the sidebar view of the core media-text block, after activating the plugin.
The new control appears at the bottom of the panel, under the Content Vertical Padding. The options in the dropdown are read from the theme.json spacing options, and the plugin includes a PHP filter that allows you to change programmatically the list of options for this feature.
Here is the solution packed as a simple plugin.
Note: The article featured image was generated using Adobe Firefly AI technology.