Gutenberg: Media & Text block is not aligning in IE 11

[mahdiyazdani]

I wonder while we know that display: grid is NOT supported in IE11 and will not be implemented in any possible way, why are we still pushing for it?

We can either drop the IE11 support or stick to the cutting edge CSS techniques.

[drdogbot7]

I can see the value in using display:grid;, if it's enabling us to do something we couldn't do otherwise, but it makes no sense to me here.

Wouldn't display:flex; be more appropriate _and more compatible_?

[kuchenundkakao]

This should really at least get a fallback. Maybe put something like this into the general block stylesheet? (Makes the content float with 50% width in IE11, shows correctly in other browsers)

/*--------------------------------------------------------------
## Gutenberg Media & Text Block Fallback for IE11
--------------------------------------------------------------*/
.wp-block-media-text:after {
    display: table;
    content: "";
    clear: both;
}
.wp-block-media-text figure {
    float: left;
    width: 50%;
}
.wp-block-media-text .wp-block-media-text__content {
    float: right;
    width: 50%;
}
.wp-block-media-text.has-media-on-the-right figure {
    float: right;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    float: left;
}
@supports (display: grid) {
    .wp-block-media-text figure {
        float: none;
        width: inherit;
    }   
    .wp-block-media-text .wp-block-media-text__content {
        float: none;
        width: inherit;
    }   
    .wp-block-media-text.has-media-on-the-right figure {
        float: none;
    }
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        float: none;
    }
}

[thewebwright]

Thanks a million kuchenundkakao! Been futzing with this on a client's site for 2 days.

[mario-neuhold]

Additionally to the flex or float approaches, this actually can be done with grid in IE, via display: -ms-grid.
The main problem with the IE implementation of grid is the lack of support for grid-template-areas: "media-text-content media-text-media"; of the container and the corresponding grid-area: media-text-content; of the columns.
But this can be easily translated into -ms-grid-col to work in IE.

This is what got it working for me on IE11:

/*---------------------
  IE 11 grid fix
-----------------------*/
.wp-block-media-text {
    display: -ms-grid;
    -ms-grid-columns: 50% auto;
}

/* default media on the left */
.wp-block-media-text .wp-block-media-text__media {
    -ms-grid-column: 1;
}
.wp-block-media-text .wp-block-media-text__content {
    -ms-grid-column: 2;
}

/* media on the right */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    -ms-grid-column: 2;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    -ms-grid-column: 1;
}

[mitchhawkins]

Thank you so much @mario-neuhold!
I dad no idea that IE and Edge weren't displaying properly; got a big shock when going to test and media images stretched/stacked.

One small typo in the first grid it says '-ms-grid-columns' and should be '-ms-grid-column'.

[thewebwright]

I'm not sure that's a typo @mitchhawkins. I think the plural is for the container and the singular column is for classes within the container. The code, as @mario-neuhold has it, worked for me.

[clarklab]

Still running into this. Fwiw, I'm kinda shocked that a core block shipped without IE11 support. The fix from @mario-neuhold basically fixes thing, but column gap is still missing.

It's hard for me to view columns as progressive enhancement. And I can guarantee most clients won't.

[LukaszJaro]

Any chance this will land in WP 5.3?