[core/media-text] Use CSS variables for media width

[Fyrins]

What problem does this address?

Actually the media width is defined in CSS with the rule :

.wp-block-media-text {
    ...
    grid-template-columns: 50% 1fr;
    ...
}

and it is override with inline CSS when the media width is change :

<div class="wp-block-media-text" style="grid-template-columns: 33% auto;">

In a project I've to override grid-template-columns: 50% 1fr; with grid-template-columns: 50% minmax(0, auto); to avoid a conflict with Swiper.js but if the user change the media width, my code cannot work anymore because of the inline style.

What is your proposed solution?

Why not using CSS variables to avoid inline styling ? ie :

.wp-block-media-text {
    --media-text--media-width: 50%;
    ...
    grid-template-columns: var( --media-text--media-width) auto;
    ...
}

And in the inline style we put the variable value. So everyone can use the rule they want without being override by the inline styling.

<div class="wp-block-media-text" style="--media-text--media-width: 33%;">

[cbirdsong]

Related:

• Adopt a classes-first approach to CSS #54033