Conflito de estilos em elementos embed

Olá.

O Tainacan está inserindo uma <div> com a classe .tainacan-embed-container ao redor de objetos incorporados no conteúdo de qualquer página. O problema é que os estilos de bloco do Wordpress já preveêm embeds e os estilos do Tainacan alí aplicados estão gerando conflito. O tema possui a opção responsive-embeds ativada.

Ao desativar a opção responsive-embeds, somente alguns objetos ficam corretos, como vídeos do Youtube. Embeds do Worpress, por exemplo, ainda ficam com problemas.

Dessa forma, peço: existe uma possibilidade de desativar esse comportamento do plugin? talvez através de um hook ou alguma outra forma?

Obrigado desde já.

1 curtida

Olá @ricardomoro, seja bem vindo!

Sim, esta é uma questão que estamos já faz um tempo tentando resolver. Acho que não custa nada bolarmos um jeito de permitir que a classe não seja inserida em alguns casos, só precisamos pensar melhor nos critérios.

Pode me passar o link do site para eu dar uma olhada? Qual tema você está usando? O ideal seria que não fosse necessária esta classe do Tainacan mesmo. Quando criamos ela, estas opções de embeds responsivos ainda estava engatinhando. Me surpreende que até hoje ainda tenha casos como estes de embeds do WP (e do Twitter) em que ele insere este padding enorme embaixo… sendo que foi feito pro YouTube este ajuste, basicamente.

1 curtida

Olá.

Ainda não está no ar essa instalação do Tainacan, por isso não consigo te passar uma URL. Estou usando um tema próprio, está em desenvolvimento e por isso, nos testes, acabei esbarrando nesse problema.

Pois é, esse padding acontece pois essa “técnica” está duplicada, nos estilos do Tainacan e nos do Wordpress.
Se posso fazer uma sugestão, seria colocar essa criação da div dentro de um hook, onde seja possível sobrescrever com algo do gênero: add_filter('tainacan_embed', ' __return_false');
Ou então, antes de adicionar essa div, verificar se o tema atual supporta embeds responsivos com: if (current_theme_supports( 'responsive-embeds' )) { ... }

Fizemos uns testes aqui, por mais que o responsive do WP faça um serviço até melhor que o nosso, tem muitas situações em que o conteúdo é criado no plugin sem as divs q ele usa… então não rola realmente desabilitarmos.

Mas evitar que nosso CSS afete os caras que foram criados pelo WP quando o responsive-embeds está ativo faz sentido sim. Estou rascunhando uma solução aqui direto no CSS. Até amanhã vou gerar um build pra você testar e me dizer se está funcionando no seu tema, beleza?

Imaginei que o responsive-embeds do WP não cobriria todas as situações do plugin. Mas realmente se tiver como desabilitar a inserção da div, principalmente fora do escopo do plugin, seria ótimo.

Muito obrigado, fico no aguardo para testar então. :slightly_smiling_face:

Desculpe a demora, não tive muito tempo para testar aqui… Mas segue o build:
https://drive.google.com/file/d/1P4RjEHpiQu9ExbigGAYrzYIvi8u1ENbD/view?usp=sharing

No seu caso, como foram inseridos este vídeo do YouTube e Links do WP? Pelo editor de blocos mesmo?

Imagina, não tem pressa.

Pedi o acesso ao link, que está protegido.

Sim, inseri esses embeds através dos blocos padrão do Gutenberg mesmo.

Foi mals, acho que agora deve estar liberado. Me diga aê se resolveu!

Sim, consegui baixar.

Vou testar e já dou um retorno.

Obrigado.

Com o responsive-embeds ativado as coisas voltaram a funcionar, apesar da div ainda estar presente.

Já com o responsive-embeds desativado o Youtube funcionou mas o embed do Wordpress, por exemplo, ficou estranho.

Enfim, essa modificação aparentemente está funcionando para a grande maioria dos embeds! :slightly_smiling_face:
Sem querer ser chato, mas o ideal mesmo é que tenha uma forma de desativar completamente a inserção dessa div, de repente possa virar uma melhoria futura? :grinning:

1 curtida

De fato, vou ver se conseguimos melhorar ele… Me incomoda que não coseguimos detectar quando oembed se trata de um vídeo do youtube (quando faz sendido adicionar aquele padding locão) e quando não é…

Tranquilo cara, não é ser chato não, só precisamos bolar um jeito de que seja possível desativar isso sem quebrar as coisas do Tainacan. Por hora não temos este filtro justamente porque não conseguimos elaborar uma maneira de distinguir os contextos… Então devo fazer mais alguns ajustes e mandar para a 0.18 essas mudanças só do lado do CSS. Mas já deixamos aberto aqui pra investigarmos mais pra frente:

2 curtidas

Estou bem curioso para saber sobre como você vai tratar da compatibilidade do seu tema com as páginas do Tainacan. Talvez você já tenha visto, mas temos algumas páginas na Wiki tratando sobre isso:

https://tainacan.github.io/tainacan-wiki/#/dev/creating-compatible-themes

O problema é que lá temos bem cobertas as possibilidades relacionadas às páginas de listagens dos itens, mas muito pouco sobre a single do item em si. E nela tem várias questões, como o carrossel de anexos/documentos, a lista de metadados, navegação entre itens relacionados… Quando chegar neste tipo de questão, não exite em dar um grito aqui pra que eu possa ajudar e mostrar o que temos feito até o momento em outros temas.

A ideia é que no futuro isso fique mais simples de ser feito, possivelmente só o plugin gerando alguma função que vá montar a página de vez, mesmo que uma versão limitada e que não tenha toda a flexibilidade que uma implementação do zero possa trazer. Isso está sendo feito aos poucos com uso das funções do Theme Helper:

Que certamente merecem um espaço na documentação. Nosso mais recente movimento neste sentido foi a criação do componente de galeria de mídia:

Então creio que as coisas vão começar a ficar mais simples.

Enfim, precisando, estamos ae!

1 curtida

Lendo isso me ocorreu de, de repente, criar um filtro em cima do the_content específico para templates do Tainacan, como o single-item. Dessa forma, o conteúdo de páginas e posts fora do escopo do plugin não são afetados, pois por padrão o WP só usa o filtro the_content. E deixar a opção para chamar esse filtro específico em temas que queiram/precisem usá-lo, como o Tainacan Interface. Enfim, é uma de tantas formas, tem que ver qual se adapta melhor a realidade do plugin.

Vi sim, inclusive usei os aquivos ali disponibilizados como base para compatibilizar inicialmente o tema com o plugin.

Sim, estou nesse momento começando a trabalhar no single-item. Comecei copiando do Tainacan Interface e tentando entender como funcionam as coisas.

Sim, seria ótimo.

Obrigado, vou precisar, achei um erro no PHP em uma situação específica, vou criar um novo tópico para isso. E ainda não entendi direito como funcionam os documentos e anexos do single-item. Mas se surgir algum problema eu posto.

Muito obrigado pela ajuda até aqui. :grin:

1 curtida

Beleza, vou mencionar o caminho do the_content lá na issue pra lembrarmos de tentar por aí u.u

1 curtida