Centering Social Media Blocks with Gutenberg

Gutenberg just needs a little hand.

Categories: WordPress

I can confirm that centering of most media embeds does not work.

Left and right alignment do, but it then causes content to wrap around the media in an undesirable ( for me ) way.

Here is some SCSS that mostly worked for me. There is some spacing on the right that I haven’t tracked down yet so the Tweet is not 100% centered.

This works for Twitter, Instagram, and Tumblr, if there is something else let me know.

Facebook Posts have some funky static widths applied in a few places so I haven’t been able to adjust that one yet.
Facebook Video I treated as a responsive embed (100% width), You can check that out here.

.wp-block-embed.aligncenter.is-type-rich{
        > .wp-block-embed__wrapper iframe,
        > .wp-block-embed__wrapper twitter-widget {
                margin-left: auto !important;
                margin-right: auto !important;
        }
}