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;
        }
}

Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!