A linha de código que faltava

Estou atualizando 2 dos meus temas do Wordpress e tem um problema estético nativo que sempre me incomodou: os elementos embutidos não centralizam!

Isso acontece muito nos temas que a gente baixa do catálogo do próprio Wordpress para personalizar ou quando criamos um CSS em geradores como o Underscores, e nem é algo complicado de se resolver, mas como não é necessariamente um problema, a gente não vê uma solução para isso muito fácil por aí.

O que fiz aqui para resolver isso foi o seguinte:

Centralizando vídeos do YouTube no Wordpress (Gutenberg):

Em functions.php, adicione isto:

// vídeo responsivo no Gutenberg

add_action( 'after_setup_theme', function() {

add_theme_support( 'responsive-embeds' );

} );

Esta é uma solução que eu já tinha encontrado há algum tempo, mas perdi a fonte. Agora eu a encontrei de novo aqui no fórum do próprio Wordpress: Responsive YouTube Embed on Gutenberg.

Centralizando elementos embutidos (Twitter e outros):

Na folha de estilos (style.css), localize a linha em que estão *,*:before,*:after na área dos Elements; adicione o atributo margin, vai ficar mais ou menos assim:

*,

*:before,

*:after {

    box-sizing: inherit;

    margin: auto;

}

É só isso.

O atributo margin: auto; vai fazer com que o item embutido seja alinhado de acordo com a configuração no próprio editor. Prontinho :3