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.
You can download the file from the link or by clicking the download icon.
Click the heart.
The captivating image used in this article was generated by Adobe Firefly AI technology.
The theme used in my example is Twenty Twenty-Four, the variables are read from the theme.json settings
The core/media-text features are tested in WordPress version 6.2.2
Are you interested in more programming tips and tricks?
The Need to Remove and Restore WordPress Filters
WordPress filters are a powerful tool for customizing and extending the…
Creating Grid Columns with Uneven Row Heights, Resembling column-count, While Preserving Element Order
This straightforward…
Free CSS and HTML Grid Generator – Demo and Code Snippet
This is a useful online tool for both designers and programmers…
How to Accurately Determine an Element’s Top Position in JavaScript
In web development, determining the precise top…