Gutenberg: Os blocos se sobrepõem às metacaixas nas postagens

Eu posso confirmar esse problema. Insira um conteúdo longo no bloco clássico e as metacaixas se sobreporão a esse bloco.

Qualquer um de vocês pode testar com o mestre, não estou conseguindo reproduzir este problema, pode ter sido corrigido.

Isso persiste.
Testado com uma instalação pura de WordPress 4.9.8 e Gutenberg 4.2.0
Para fins de teste, instalei um plugin conforme descrito em # 11482

Resultado:

Pode ser um problema do Windows? Você pode testar com este zip https://builds.danielbachhuber.com/gutenberg-nightly.zip

Com o nightly build está funcionando 👍

Obrigado pelo teste, isso é uma ótima notícia. Vou encerrar, esse será lançado na versão 4.3.

Instalei o Gutenberg 4.3.0-alpha-1ac70e1 no meu site 4.9.8 e o problema persiste.

https://youtu.be/cSdo1cUIb1E

@DeveloperWil Interessante, estou reabrindo para que possamos investigar mais, mas não será uma solução fácil se não pudermos reproduzir de forma confiável.

@DeveloperWil você poderia desativar Advanced Custom Fields PRO e
Yoast SEO Premium? Em seguida, instale o plugin conforme descrito em # 11482 para fins de teste?

Eu também testei (como você) com Windows 10 64bit e Chrome, WP 4.9.8 etc e Gutenberg 4.3.0-alpha-1ac70e1 (mas nada mais instalado) e o bug foi corrigido.

Raposa de fogo
Ubuntu 14.04
WP 5.0-beta3-43878
Gutenberg nightly build https://builds.danielbachhuber.com/gutenberg-nightly.zip

registrou muitas metaboxes.

Meu problema de # 11482 realmente não persiste.

@gziolo modificou os marcos: 4.3, WordPress 5.0, 5 dias atrás

Isso não foi corrigido no Gutenberg 4.3.0 e não foi corrigido no WP 5.0-beta3-43891.

Não tenho certeza se isso está relacionado, mas se estiver, você pode replicar ativando os botões de compartilhamento no plug-in Jetpack. Como você pode ver na captura de tela, a metacaixa dos botões de compartilhamento se sobrepõe aos blocos de Gutenberg. No entanto, isso pode ser um bug no Jetpack (e no plug-in All in One SEO, que tem o mesmo problema, como você pode ver na imagem)

Se isso for um bug nesses dois plug-ins, por favor me avise e eu irei registrar os problemas em cada projeto.

Estou fazendo referência cruzada a esse problema em TwentyNineteen https://github.com/WordPress/twentynineteen/issues/599, pois esse problema também parece abordar metaboxes e o campo do editor (embora de um ângulo ligeiramente diferente)

O mesmo bug existe com Genesis Framework 2.7.1 (Gutenberg pronto) e Gutenberg 4.4.0

Eu encontrei uma maneira de reproduzir, porém apenas no 4.4, não no master. Portanto, vale a pena tentar descobrir quando / como foi corrigido.

• Etapa 1: ative o Yoast ou outro plug-in com uma metabox. Expanda-o para efeito máximo.
• Etapa 2: digite um monte de coisas, veja como elas se sobrepõem. Outro sintoma é uma tonelada de espaços em branco antes que você possa ver as metaboxes.

Resultado das etapas acima em 4.4:

Resultado das etapas acima no mestre:

☝️ Observe que a cor coral é uma que adicionei no depurador, ao elemento editor-writing-flow__click-redirect , que inicialmente parecia ser o que estava se comportando mal.

Eu testei isso no Chrome e Firefox no Windows e Mac.

Quando investiguei inicialmente, parecia que o flexionamento de editor-writing-flow e .editor-writing-flow__click-redirect era incorreto. No entanto, conforme observado, não posso reproduzir esse problema no mestre, apesar de o código parecer inalterado. Vamos tentar descobrir o que mudou aqui recentemente.

Agradeceria se alguém pudesse testar este problema no mestre e ver se o problema persiste aí.

Não tenho certeza se isso está relacionado, mas se estiver, você pode replicar ativando os botões de compartilhamento no plug-in Jetpack. Como você pode ver na captura de tela, a metacaixa dos botões de compartilhamento se sobrepõe aos blocos de Gutenberg. No entanto, isso pode ser um bug no Jetpack (e no plug-in All in One SEO, que tem o mesmo problema, como você pode ver na imagem)

Se isso for um bug nesses dois plug-ins, por favor me avise e eu irei registrar os problemas em cada projeto.

Acontece que meu 'bug' estava relacionado ao tema Divi e não aos plug-ins Jetpack ou All in One SEO.

Ativando Twenty Seventeen e rodando o branch master do plugin, tudo funciona bem.

Obrigado pelo acompanhamento e teste.

Embora eu veja que esse bug está fechado, eu também tenho esse problema com os Meta Blocos flutuando sobre os blocos do editor WP. Tentei desativar o meu tema atual (Theme.co Pro), bem como o Yoast. Isso estava em um site de desenvolvimento com o mínimo de plug-ins. Vou tentar desativar todos os plug-ins para ver se consigo identificar um conflito. Estou usando o 5.0-RC1.

Atualizado : encontrado o plug-in conflitante - Shortcake (Shortcake UI) - https://wordpress.org/plugins/shortcode-ui/
Depois de desativar isso, tudo parece bem.

Ainda estou tendo esse problema com 4.9.8 e Gutenberg 4.5.1

Eu também recebo 3 lotes do seguinte erro no console do Chrome:
wp-seo-premium-metabox-830.min.js? ver = 8.3: 109 TypeError não capturado: (0, i.getI18n) não é uma função
em t (wp-seo-premium-metabox-830.min.js? ver = 8,3: 109)
em Object.(wp-seo-premium-metabox-830.min.js? ver = 8,3: 56)
em e (commons-premium-830.min.js? ver = 8,3: 1)
em window.yoastPremiumWebpackJsonp (commons-premium-830.min.js? ver = 8.3: 1)
em wp-seo-premium-metabox-830.min.js? ver = 8,3: 1

Eu reproduzi isso com um pequeno caso de teste.

Etapa 1: tenha uma metabox na página. Podem ser campos personalizados (Menu Mais> Opções> Campos personalizados)

Etapa 2: coloque o seguinte em functions.php:

add_action('init', iAmError);

Etapa 3: recarregue e observe o erro.

O problema parece ser que um plug-in gera um erro de PHP, mas esse erro geralmente não é visível no administrador, porque a mensagem de erro real está oculta porque é apenas um aviso e estão ocultos por padrão na maioria dos hosts ou porque ele é coberto pelo adminbar.

Além disso, isso é agravado pelo editor _parentemente funcionando bem_, quando na verdade está parcialmente em um estado de erro.

Para elaborar mais, esse erro provavelmente ainda está presente em uma página do editor sem metaboxes habilitadas. Mas o erro simplesmente não é aparente porque não há metaboxes para mostrar o estado de erro.

Podemos lidar melhor com esses erros?

Este é um problema para nós também. Encontramos os resultados abaixo enquanto nosso tema personalizado e vários plug-ins são ativados (incluindo YoastSEO):

Funciona corretamente com metacaixas aparecendo na parte inferior dos blocos de página ao usar:

• FireFox 63.0.3 (64 bits) no Windows 10
• Internet Explorer 11.285.17134.0 no Windows 10 usando a opção de emulador de ferramentas de desenvolvedor para forçar o modo de documento 10

As metacaixas se sobrepõem aos blocos de página ao usar:

• Internet Explorer 11.285.17134.0 no Windows 10 usando as ferramentas do desenvolvedor para forçar o modo de documento 11
• Edge 42.17134.1.0 no Windows 10
• Chrome 70.0.3538.110 no Windows 10

@SJNBham Até agora, a única maneira que consegui reproduzir isso é ter um plugin que gera um erro no WordPress 5.0.

Posso pedir que você experimente e desative seus plug-ins e veja se funciona? Em caso afirmativo, reative-os um por um para que possamos descobrir qual está causando o erro, o que me ajudará a reproduzir e depurar isso.

Outra maneira de reproduzir isso sem causar um erro no WP 5.0-RC1-43945:

add_action( 'enqueue_block_editor_assets', function() { echo '<style></style>'; } );

Isso não produz nenhum erro de console ou PHP, mas o conteúdo se sobrepõe às metacaixas.

@jasmussen Se eu desabilitar todos os plug-ins, exceto Gutenberg, ativar o tema Twenty8teen, usar um modelo de página padrão e selecionar para mostrar campos personalizados, o problema de sobreposição é apresentado.

Mudei para um dos nossos sites mais básicos, que tinha apenas dois plug-ins ativados (Google Analytics Dashboard para WP e Gutenberg). Ele usa o tema Dynamic Seventeen e as metacaixas se alinham corretamente na parte inferior dos blocos de conteúdo. Mudei para o tema Twenty8teen apenas para ter certeza de que estava comparando maçãs com maçãs e as metacaixas continuaram a se comportar corretamente.

Estamos executando o WordPress 4.9.8 e Gutenberg 4.5.1

Atualização: o site em que vimos esse problema era um local de teste do nosso site de produção. Descobrimos que há erros sendo apresentados em nosso site de teste (estamos hospedando com WPEngine e testando a atualização do PHP 7.2). Acredito que a WPEngine está ciente do erro e trabalhando nisso.

"Parâmetro 1 para wp_default_scripts () deve ser uma referência ...."

Quando ativei Gutenberg em nosso site de produção, as metacaixas parecem estar alinhadas na parte inferior, conforme desejado.

Então, talvez isso esteja relacionado a como os erros estão sendo tratados, conforme declarado anteriormente?

Para aqueles que estão enfrentando esse problema, podem tentar as seguintes etapas de depuração e entrar em contato conosco.

1. Abra o console JavaScript.
   No Chrome, é Exibir> Desenvolvedor> Console JavaScript . No Firefox é Ferramentas> Desenvolvedor Web> Console da web .
2. Cole o seguinte no console e pressione Enter: javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

Por favor, relate qual mensagem você está recebendo.

• Quando vejo a mensagem "Você está no modo Padrões", tudo está funcionando como planejado para mim.
• Quando vejo a mensagem "Você está no modo Quirks", vejo o problema de sobreposição.

@jasmussen Vejo “Você está no modo Quirks” ao usar o snippet add_action( 'enqueue_block_editor_assets', function() { echo '<style></style>'; } ); no arquivo functions.php de um tema acima.

(É porque <style></style> é emitido antes de <!DOCTYPE html> , forçando o modo quirks.)

Portanto, o HTML inválido regular pode acionar isso também, assim como os erros emitidos pelo PHP.

Obrigado por verificar, @nickcernis , claro que sim. Parece que as regras flex que dimensionam a tela de edição principal se comportam de maneira diferente quando no modo quirks em comparação ao modo padrão. Estou procurando algumas opções.

@jasmussen - Eu ativei o plugin que mencionei antes (que estava causando o problema) e coloquei o código que você sugeriu no console. Eu vejo a mensagem "Você está no modo Quirks" nessa instância com o plug-in ativo.
Quando eu desativo esse plugin e recarrego a página de postagem, obtenho a mensagem "Você está no modo padrão". Espero que ajude.

@HighTechDad Isso ajuda muito, sim. Tenho algumas ideias de como mitigar isso, mas pesando as opções. Se eu estiver certo, isso significa que há um pequeno problema com o plugin Shortcake UI que está causando o problema e, de preferência, está corrigido aí. Mas voltarei quando tiver algo para compartilhar.

@jasmussen - Eu realmente não uso o plugin Shortcake UI. Acabei de tê-lo no meu site de desenvolvimento, onde estou testando o WP 5.0. Tenho certeza de que haverá / existem muitos plug-ins que não são atualizados há algum tempo e que podem fazer com que o problema se manifeste. Só sei que, com esse plugin específico, é fácil de testar e reproduzir. (Só estou preocupado quando o 5.0 for lançado, haverá muitos outros plug-ins que terão "pequenos problemas" e causarão frustração.)

Obrigado por manter este tópico ativo, embora este problema específico esteja marcado como "Fechado". Talvez seja hora de reabrir ...

Falei com a equipe de suporte do Yoast SEO e eles viram que esse tíquete foi fechado, então disseram que era um problema do WordPress que será resolvido com uma versão mais recente do WordPress eventualmente. Estou mencionando isso porque outros fornecedores podem dar a mesma resposta se virem este tíquete fechado. Também o fato de que é muito provável que outros plugins tenham um erro neles que irá acionar o modo de compatibilidade. Portanto, seria ótimo encontrar uma solução para retroceder normalmente quando o modo de compatibilidade estiver ativo. Obrigado pelo seu trabalho nisso!

Sim, a discussão nunca é encerrada. Ainda estou tentando descobrir onde e como o problema aparece e, dependendo dos detalhes, o problema será reaberto ou será criado um novo com base nos aprendizados aqui. Obrigado pela sua paciência.

Você está no modo peculiares para mim também

Acabei de encontrar isso no 5.0 RC1. Modo padrão, sem erros de PHP, sem erros de JS.
Acontece que meu problema era que meu tema estava em um arquivo editor-styles.css :

body {
    height: 100%;
}

que foi renderizado como css embutido na tela do editor como:

.editor-styles-wrapper {
    height: 100%;
}

Portanto, parece que estilos de editor ruins são outro possível culpado para esse problema.

Boa captura, @earnjam. Eu sugeriria que esse é um problema separado (e fique à vontade para abrir um com as etapas para reproduzir). Isso está relacionado ao fato de que a tela de edição não está em um iframe e, se você não estiver atento, pode escrever estilos de editor que afetam a IU circundante, como este:

* {
    border: 13px solid mediumaquamarine;
}

Os estilos do editor podem definitivamente usar algumas melhorias no que diz respeito ao escopo, e seria bom começar a coletar os problemas que pretendemos abordar, acho que alguns foram observados aqui e ali. Mas, neste caso, os temas do WordPress têm que optar explicitamente pelo uso de estilos de editor, então, esperançosamente, esse é o tipo de coisa que será detectada no desenvolvimento desse estilo. Talvez a solução para esse problema específico seja anotá-lo em uma seção de "práticas recomendadas" nos documentos de suporte do tema.

Ok, criei uma solicitação de pull como uma prova de conceito que atenua isso, mas, como é um erro que não é do Gutenberg, não acho que deva ser mesclado. Mas espero que possa inspirar algumas idéias melhores sobre como ajudar o usuário ou desenvolvedor do plugin que está colocando Gutenberg no modo peculiares a corrigir o problema. Compartilhe seus pensamentos e observações sobre o PR: https://github.com/WordPress/gutenberg/pull/12455

@jasmussen Sim, eu só queria observar outra causa do problema descrito na postagem original.

A única preocupação que eu teria sobre a parte opt-in é que esse tema específico optou por estilos de editor no editor antigo. Não é atualizado há algum tempo e, portanto, não foi atualizado para oferecer suporte ao novo editor de bloco.

Portanto, não há como saber quantos temas existentes podem ter estilos de editor que funcionam bem no editor clássico, mas causarão problemas como este no editor de blocos.

Não tenho certeza se existe uma solução para esse problema, exceto talvez algum CSS defensivo para regras conhecidas que podem causar problemas.

Deixa pra lá, foi atualizado em 20 de novembro. Talvez eles tenham cometido um erro no teste. Vou investigar mais.

Acredito que essa é uma das razões pelas quais Gutenberg exige que os desenvolvedores de temas ativem explicitamente o suporte aos novos estilos de editor: https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#editor -styles - que eu saiba, os estilos do editor antigo não devem ser carregados, a menos que o autor do tema diga que eles são bons para carregar. E se o fizerem, em muitos casos os estilos devem traduzir 1: 1 - mas o opt in deve sugerir uma etapa de teste aqui.

Esta é minha mais nova tentativa de mitigar e conscientizar o desenvolvedor sobre os conflitos de plug-ins que podem causar isso: https://github.com/WordPress/gutenberg/pull/12575 - compartilhe suas ideias.

Eu tive esse problema e ele foi causado pelo Plug-in do Form Maker, obrigado pela informação sobre o "Modo Quirks" que demoraria uma eternidade para eu descobrir isso! Eu criei uma postagem sobre este problema no meu site WordPress. Atualmente, estou usando o WP versão 5.0.2 no Debian 9 com php 7.2.13

Eu estava tendo esse problema com Yoast SEO e Postmattic. Meu navegador estava no modo Quirks por causa do plugin WP Rainbow Hilite. Desativado por enquanto e agora o problema desapareceu.

Posso dizer que o problema de blocos que se sobrepõem (na verdade, desaparecem sob) metacaixas em páginas que usam Gutenberg ainda existe e nos impede de fazer alterações ou acréscimos à página.
Algumas pessoas parecem pensar que foi consertado, mas não foi.

Estou usando:
Navegador Google Chrome.
WordPress 5.1
Tema: Nirvana Versão: 1.5.1.1
Yoast SEO metabox é o primeiro que mostra o problema; há outros.
E não, não é uma coisa do Windows; Estou experimentando isso em um iMac.

Observe que quando eu mudo para o Firefox, ele não mostra o mesmo problema - pelo menos em uma página que tentei.

Se você precisar de mais alguma coisa para ajudar a rastrear isso, me avise ...

Obrigado pelo relatório.

Se você precisar de mais alguma coisa para ajudar a rastrear isso, me avise ...

Você pode abrir o console JavaScript e ver se há alguma mensagem lá? No Chrome, mac é ⌘⌥J, no Firefox é ⌘⌥K, no Safari é necessário ativá-lo primeiro, instruções aqui: https://support.airtable.com/hc/en-us/articles/232313848-How- para abrir o console do desenvolvedor

Dependendo se há ou não uma mensagem no console, as próximas etapas dependem disso. Obrigado.

Aqui está uma captura de tela que resultou quando eu disse "Editar página" no meu
página (em anexo).
Observe que limpei o console antes de fazer a página de edição.

https://user-images.githubusercontent.com/1204802/54151216-a0ea1c80-443a-11e9-8ea7-9f34965840c7.png

Espero que ajude!

Bryan

Espero que você tenha conseguido a captura de tela!

Obrigado Bryan, sim, a imagem passou. Editei seu comentário para criar um link para ele, de modo que seja mais fácil de ver.

E, de fato, foi útil. Na captura de tela há um aviso que diz que o navegador está no "Modo Quirks". Esse modo é o que está causando a sobreposição das metaboxes e quase certamente é causado por um plug-in que está adicionando conteúdo à página de uma forma não padrão e precisa de uma atualização. _Pode_ ser o tema WordPress, mas é menos provável.

Se você puder, pode tentar desativar os plug-ins, um de cada vez, e recarregar o editor para ver se ele começa a funcionar como deveria? Não é necessário desativar tudo de uma vez, apenas um de cada vez e recarregar o editor a cada vez. Quando você encontrar um plugin que, quando desativado, faz o editor funcionar, informe-me aqui. Posso então entrar em contato com o desenvolvedor e oferecer conselhos e ajuda sobre como atualizar esse plug-in para funcionar com o editor. Obrigado!

Não posso fazer isso em nosso site ao vivo, mas vou ver se posso fazer algo para
reproduzir o problema em outro site de desenvolvimento. Fique ligado...

FWIW, fiz a mesma captura de console Javascript no Firefox, que não
parecem experimentar o comportamento, usando a página de edição na mesma página de antes.
Aqui está o resultado (em anexo). Talvez comparando com a captura do Chrome
pode lançar alguma luz?

Tentei reproduzir isso em vários outros sites, até mesmo instalando Yoast SEO se já não estava instalado. Infelizmente, não consegui reproduzir o comportamento nesses sites, o que significa que a desativação de plug-ins não adiantaria muito.

A segunda captura do console aconteceu?

Eu não vi o anexo. Se você responder a essas mensagens por e-mail, não acho que apareçam anexos. Acho que você tem que ir aqui ao Github através do navegador para adicionar imagens.

Suspeito que o Firefox mostrará a mesma mensagem de erro, mas talvez o mecanismo de renderização do navegador tenha uma maneira melhor de lidar com o que é conhecido como "modo peculiares". A melhor solução ainda é encontrar o plugin problemático e pedir ao desenvolvedor que envie uma correção para ele. Mas suponho que se o Firefox está funcionando bem para você no momento, isso pode servir como uma solução alternativa. Eu entendo perfeitamente porque você não pode testar isso em produção.

Uma maneira alternativa de depurar: você pode me enviar uma lista completa dos plug-ins que usa em seu site? Então posso testá-los um por um, ver se consigo reproduzi-los.

Tenho tido o mesmo problema também. Instalar o plugin Disable Gutenberg corrige o problema e a mensagem "Quirks Mode" desaparece, mas essa não é uma boa solução a longo prazo.

Tentei desabilitar plug-ins em minha versão local do Wordpress. Verifiquei que 26 dos meus plug-ins não causam o problema, mas ativar qualquer um desses 5 faz com que o problema volte:

Guerra Social - Pro
Tabela de conteúdos mais
Extensão TablePress: tabelas responsivas
WP Esconder Post
WP Tab Widget Pro

Obrigado pelo relatório, Joe! Vou tentar esses plug-ins e ver se consigo restringir o problema e retornar com mais informações aqui.

Obrigado! Curiosamente, não instalei nenhum desses plug-ins hoje quando o erro começou (não acho que eu os atualizei, embora possa estar errado).

Tenho feito algumas alterações no meu site com o Elementor pro, que é o que pensei que estaria causando o problema, mas desativar isso não muda nada.

A explicação de por que o problema aparece é um pouco técnica, mas a essência é esta:

• Se a página da web (neste caso, o editor) for HTML válido , ela será renderizada corretamente
• Se a página da web for um HTML inválido , o navegador terá que _adivinhar_ como processar as coisas e incorretamente adivinhar que as metaboxes devem se sobrepor

O que faz com que uma página da web se torne inválida? Nesse caso, é provável que um plug-in produza algumas extensões na marcação do editor que o faz quebrar. Se funcionar como pretendido no editor clássico, é provável que isso ocorra porque os navegadores _estimam corretamente_ quanto à renderização devido a qualquer número de diferenças na marcação. Uma vez que parece funcionar corretamente, o bug nesses plug-ins provavelmente passou despercebido até agora.

A correção dos plug-ins que causam esses problemas é relativamente trivial: apenas exiba as extensões em um local que não interrompa a validade da marcação. Assim que soubermos quais plug-ins causam isso, será fácil entrar em contato com as soluções sugeridas.

Se o Firefox adivinhar corretamente, essa seria uma alternativa sugerida até que os plug-ins possam se atualizar. Obrigado pela sua paciência.

Joen -

Acabei de adicionar a captura de tela à minha mensagem no Github. Espero que ajude.

Bryan

FWIW, dei uma olhada na lista de plug-ins que Joe-Clements126 listou:

Guerra Social - Pro
Tabela de conteúdos mais
Extensão TablePress: tabelas responsivas
WP Esconder Post
WP Tab Widget Pro

Não uso nenhum desses plug-ins no meu site.

Certo. Aqui estão as informações do sistema que Elementor fornece - é um
fonte conveniente do que você está procurando, embora eu não esteja usando
Elementor neste site terrivelmente muito. Quando eu mudo este site para um novo,
isso vai mudar.

Ver anexo...

== Plug-ins ativos ==
Adicionar do servidor
Versão: 3.3.3
Autor: Dion Hulse

Akismet Anti-Spam
    Version: 4.1.1
    Author: Automattic

Antispam Bee
    Version: 2.9.1
    Author: pluginkollektiv

Auto Update Plugins
    Version: 0.1.4
    Author: Geenyous Limited

Better Font Awesome
    Version: 1.7.1
    Author: Mickey Kay

Black Studio TinyMCE Widget
    Version: 2.6.8
    Author: Black Studio

Broken Link Checker
    Version: 1.11.5
    Author: Janis Elsts, Vladimir Prelovac

Classic Editor
    Version: 1.4
    Author: WordPress Contributors

Contact Form 7
    Version: 5.1.1
    Author: Takayuki Miyoshi

Contact Form 7 Style
    Version: 3.1.8
    Author: Johnny, dorumarginean, mlehelsz, MirceaR

Cryout Serious Theme Settings
    Version: 0.5.9
    Author: Cryout Creations

Custom Menu Wizard
    Version: 3.3.1
    Author: Roger Barrett

Easy Google Fonts
    Version: 1.4.4
    Author: Titanium Themes

Elementor
    Version: 2.5.5
    Author: Elementor.com

Google Analytics Dashboard for WP (GADWP)
    Version: 5.3.7
    Author: ExactMetrics

Howdy Tweaks
    Version: 2.3
    Author: Kailey Lampert

Jetpack by WordPress.com
    Version: 7.1.1
    Author: Automattic

Members
    Version: 2.1.0
    Author: Justin Tadlock

My Custom Functions
    Version: 4.35
    Author: Space X-Chimp

myStickymenu
    Version: 2.0.6
    Author: m.r.d.a

Nav Menu Roles
    Version: 1.9.3
    Author: Kathy Darling

Page Links To
    Version: 3.0.1
    Author: Mark Jaquith

Popup Builder
    Version: 3.1.7.1
    Author: Sygnoos

Profile Builder - Email Confirmation Field
    Version: 1.0.4
    Author: Cozmoslabs, Adrian Spiac

Profile Builder - Numbers and Phone Validation
    Version: 1.0.1
    Author: Cozmoslabs, Cristian Antohe

Profile Builder Pro
    Version: 2.9.7
    Author: Cozmoslabs

Search Exclude
    Version: 1.2.2
    Author: Roman Pronskiy

ShareThis Share Buttons
    Version: 1.1.8
    Author: ShareThis

Simple History
    Version: 2.29.2
    Author: Pär Thernström

SSL Insecure Content Fixer
    Version: 2.7.2
    Author: WebAware

Tela Albums: Google Photo Albums for Wordpress
    Version: 1.5.2.8
    Author: Isaac Brown

Timeline Express
    Version: 1.8.0
    Author: Code Parrots

TinyMCE Advanced
    Version: 5.1.0
    Author: Andrew Ozz

Title Remover
    Version: 1.2
    Author: WPGurus

Visual Form Builder
    Version: 2.9.9
    Author: Matthew Muro

WP-VR-view - Photo Sphere and 360 video
    Version: 1.6
    Author: Tumanov Alexander

WP Mail SMTP
    Version: 1.4.1
    Author: WPForms

WP Media Category Management
    Version: 1.9.3
    Author: DeBAAT <[email protected]>

WP UI - Tabs, accordions and more.
    Version: 0.8.8
    Author: Kavin

Yoast SEO
    Version: 10.0
    Author: Team Yoast

Eu estava tendo o mesmo problema também, então comparei nossa lista de plug-ins e desativei o Popup Builder. Isso resolveu o problema para mim.

Então, tentei desativar o Popup Builder em meu site, e o mau comportamento
foi embora, pelo menos em uma página onde estava presente antes.

Acho que encontramos um culpado (talvez um entre muitos ...)

Obrigada, Elizabeth!

Obrigado a todos pelo feedback! Isso certamente será útil para outras pessoas que estiverem pesquisando. Por enquanto, vou fazer um teste duplo do construtor de pop-up e entrar em contato com o desenvolvedor do Popup Builder com conselhos e sugestões para uma correção. Esperamos que possamos consertar isso em breve! Agradeço muito todos os comentários.

FWIW, substituí o Popup Builder pelo Popup Maker (o que eu faria, eventualmente, de qualquer maneira).
Não parece ter os mesmos efeitos negativos que o Popup Builder.

Tentei hoje e não consegui reproduzir o problema com o construtor de pop-up. Isso não significa que não haja nenhum problema, talvez signifique que você precise usar o construtor de pop-up de uma maneira específica ou em um ambiente de servidor específico. Por exemplo, se ele gerar uma mensagem de erro no código-fonte, isso também causaria isso.

Entrei em contato com o desenvolvedor, eles parecem ser muito ativos e responsivos em seus fóruns. Parece que eles podem resolver isso rapidamente, já que sua última atualização foi há uma semana. Obrigado pelos relatórios!

Obrigado por investigar isso. Eu tinha um desenvolvedor trabalhando em meu site hoje e ele tinha certeza de que era o Elementor que estava causando o problema.

Foi com isso que ele voltou, que passei a eles.

"Dentro de elementor / includes / utils.php dentro do plugin Elementor, há uma função que injeta tags de script no que deveriam ser respostas JSON normais.

A função abaixo está causando o problema, pois você não pode simplesmente enviar aleatoriamente '. PHP_EOL;}

Seria ótimo se você pudesse atualizar seu plug-in para determinar se a solicitação / resposta é JSON antes de mexer com esta saída "

Acabei de receber feedback do desenvolvedor do Popup Builder que eles esperam uma correção para a próxima versão. Não consegui verificar isso, mas é legal ver uma resposta tão rápida 👏

Oi pessoal, obrigado por todos os seus compartilhamentos. Em relação aos problemas com o Popup Builder, o problema que quebra o editor visual é aquele novo botão que eles adicionaram ao editor. Esta é a correção (remova esse botão) ...

Vá para o seguinte arquivo em seu site: your_wordpress_folder / wp-content / plugins / popup-builder / com / classes / Actions.php
Remova a linha 26: add_action ('mce_external_plugins', array ($ this, 'editorButton')); ....
Isso deve resolver o problema.

Eu uso o WP 5.1.1 e resolveu o problema para mim em todos os meus sites.

Gostaria apenas de informar que o problema de sobreposição também é causado pelo Ninja Forms 3.4.4., Beta4 e WP 5.1.1.

@ alkah3st Não consigo replicar esses problemas apenas com o plugin Ninja Forms versão 3.4.4 e o tema WordPress 2019 ativado no WP 5.1.1 Parece que o problema que você está vendo é causado pelo plugin ACF 5.8.0 Beta4 .

Hmm, quando deixo tudo desativado, exceto ACF Beta 4 e Yoast, não consigo sobrepor. No instante em que ligo o Ninja Forms, a sobreposição começa a acontecer. Posso criar uma instância de teste para demonstrar isso, se quiser.

Atualização: parece que o Ninja Forms gera este erro:

Erro de banco de dados do WordPress: [coluna desconhecida 'form_title' na 'lista de campos']

| SELECIONE title , created_at , form_title , default_label_pos , show_title , clear_complete , hide_complete , logged_in , seq_num
| DE wp_k5n_nf3_forms
| ONDE id = 2

Quando não há título atribuído a um formulário (algo que é permitido em Formulários Ninja). Portanto, este erro é despejado no topo do documento, antes da declaração HTML, fazendo com que o editor entre no Modo Quirks.

Não tenho certeza se isso é de alguma ajuda ... mas quando recebo um aviso do PHP enquanto WP_DEBUG está ativo, ocorre o problema de sobreposição. Quando resolvo o aviso do PHP, a sobreposição desaparece.

@ alkah3st Não consigo replicar esses problemas apenas com o plugin Ninja Forms versão 3.4.4 e o tema WordPress 2019 ativado no WP 5.1.1 Parece que o problema que você está vendo é causado pelo plugin ACF 5.8.0 Beta4 .

Eu tenho o ACF Beta4 em todos os sites que estou desenvolvendo e não tenho problemas de sobreposição nesses sites.

Para ser claro, este é apenas um aviso para qualquer pessoa que use o Ninja Forms, já que o problema vem do Ninja Forms injetar seu erro antes da declaração HTML, o que faz com que o documento entre no modo Quirks (como acontece com outras pessoas com problemas semelhantes com diferentes plug-ins neste tópico).

Obrigado a todos, pelos ótimos relatórios de bugs aqui. Todas as suas informações são valiosas para descobrirmos como podemos mitigar e fortalecer isso no futuro.

@ellatrix Vejo alguns relatos de que o recurso de plug-ins externos do TinyMCE pode estar causando alguns erros de PHP - isso também pode causar a sobreposição, pois coloca o navegador no modo quirks. Você sabe se há algo que possamos fazer para evitar que isso aconteça? Qualquer coisa, desde não carregar plug-ins externos no Gutenberg, até gerar o erro do PHP em um lugar diferente? Obrigado Ella.

Existem vários problemas abertos com este mesmo problema e parece haver várias fontes. Também me deparei com isso, para mim o problema não eram erros silenciosos de php. O problema era que meu css de tema tinha uma regra definindo a altura do elemento do corpo para 100%. A forma como Gutenberg lida com estilos de editor é transformando o css do seu tema:

No editor clássico, a folha de estilo do editor é carregada diretamente no iframe do editor WYSIWYG, sem alterações. Gutenberg, no entanto, não usa iframes. Para garantir que seus estilos sejam aplicados apenas ao conteúdo do editor, transformamos automaticamente os estilos do editor reescrevendo ou ajustando seletivamente certos seletores CSS. Isso também permite que Gutenberg aproveite seu estilo de editor em visualizações de variação de bloco.

O resultado no meu caso é que body { height: 100% } se torna .editor-styles-wrapper { height: 100% } . Esta é a regra css que fez com que as metaboxes do plug-in se sobrepusessem ao editor. Remover height: 100% do elemento do corpo resolveu o problema para mim.

O resultado no meu caso é que o corpo {height: 100%} se torna .editor-styles-wrapper {height: 100%}. Esta é a regra css que fez com que as metaboxes do plug-in se sobrepusessem ao editor. Remover a altura: 100% do elemento do corpo resolveu o problema para mim.

Obrigado por compartilhar isso, @bitwitch! @youknowriad isso parece algo que devemos mitigar. Você acha que devemos remover essa altura ao reescrever ou criar uma regra separada na nova folha de estilo de "normalização" que substitui a altura para sempre ser automática, talvez com um! Important e um comentário embutido?

Posso perguntar por que há body { height: 100% } nos estilos do editor?

As principais razões para o fato de os estilos do editor serem opcionais em Gutenberg é o fato de que os estilos do editor antigo não podem ser usados ​​diretamente. Os autores de temas devem verificar se seus estilos são "compatíveis" e então ativá-los.

Não tenho certeza se devemos introduzir hacks como este.

Posso perguntar por que há um corpo {height: 100%} nos estilos do editor?

O principal motivo para fazer isso geralmente é criar sites que usam toda a altura da janela do navegador para os elementos. Por exemplo, se você tiver um elemento de splash "acima da dobra" em sua página inicial, sempre 100% alto. Ou se você precisar alinhar na parte inferior algo em uma página que não rola.

Admito que isso é muito mais uma coisa de front-end, e não algo que você normalmente colocaria no estilo do editor. Nesse sentido, eu compro seu argumento de fato. Meu pensamento em talvez abrir um ticket separado é dar mais um pequeno passo em direção a um futuro onde o estilo do editor não precisa ser diferente do estilo front-end. Embora talvez este em particular seja uma tarefa para revisitar mais tarde.

Posso perguntar por que há um corpo {height: 100%} nos estilos do editor?

A razão para tal regra no meu caso é porque não usamos uma folha de estilo separada para o editor. Minificamos todo o css do site em um único arquivo, incluindo todo o css para blocos personalizados. A regra da altura do corpo: 100 é para outras partes do site. Minha intenção ao postar era ajudar outras pessoas que possam ter a mesma fonte de problema que eu, não necessariamente recomendar a introdução de uma solução alternativa para o lado de Gutenberg.

Não tenho muito a acrescentar além de dizer que tive o mesmo problema (Yoast SEO bloqueando texto no editor de página) a ponto de torná-lo quase impossível de usar.

@PhotoCoog geralmente é um problema de plug-in.

Você pode abrir o console JavaScript e ver se há alguma mensagem lá? No Chrome, mac é ⌘⌥J, no Firefox é ⌘⌥K, no Safari é necessário ativá-lo primeiro, instruções aqui: https://support.airtable.com/hc/en-us/articles/232313848-How- para abrir o console do desenvolvedor

Dependendo se há ou não uma mensagem no console, as próximas etapas dependem disso. Obrigado.

Tem o seguinte que realmente menciona o problema! Alguma maneira de consertar isso?

JQMIGRATE: Migrate está instalado, versão 1.4.1
edit-post.min.js? ver = 3.1.11: 12 Seu navegador está usando o modo Quirks.

Isso pode causar problemas de renderização, como blocos que se sobrepõem às metacaixas no editor. O modo Quirks pode ser acionado por erros de PHP ou código HTML que aparecem antes da abertura. Tente verificar a origem da página bruta ou o log de erros de PHP do seu site e resolva os erros, removendo qualquer HTML anterior ao doctype ou desativando os plug-ins.

@PhotoCoog Obrigado por olhar!

Isso significa que há um plugin ou tema em seu site que precisa ser atualizado. Uma maneira de testar é desabilitar os plug-ins um por um e descobrir qual deles faz o editor renderizar corretamente, mas eu percebo que isso é complicado de fazer em um site de produção. Como alternativa, sinta-se à vontade para me enviar uma lista dos plug-ins que você está usando, e posso testá-los um por um para você e ver qual deles causa o problema. Assim que encontrarmos o culpado, posso entrar em contato com o desenvolvedor para sugerir uma solução.

Corrija esse problema de estilo para o painel.

Adicione este gancho em seu tema, functions.php

// Adicionar estilo para o painel, sobrepor as metacaixas nas postagens (editor)
add_action ('admin_head', 'custom_metabox_style');

function custom_metabox_style ()
{
eco ' ';
}

@rendergraf Você pode abrir o console JavaScript e me avisar se https://support.airtable.com/hc/en-us/articles/232313848-How- para abrir o console do desenvolvedor

Já tentei esse truque de transbordamento no passado e há efeitos colaterais infelizes. Além disso, se você _do_ vir um aviso no console JS, significa que _is_ um conflito com um plug-in, e a verdadeira correção é consertar esse plug-in.

@jasmussen no console não mostra nenhum erro relacionado ao admin_head.

tudo funciona corretamente

Interessante! Obrigado por me responder com isso.

Se você abrir o inspetor da web, a primeira coisa no documento é o doctype? Ie? Ou existe algo antes disso?

Não, no meu caso é:

Por favor, se você precisar de mais informações sobre o hook admin_head, pode ver a documentação oficial:
https://developer.wordpress.org/reference/hooks/admin_head/

Espero que te ajude

No meu caso, o problema estava em um código CSS ecoado no gancho admin_menu, alterei o gancho para 'admin_bar_menu' e tudo parece estar bem

Corrija esse problema de estilo para o painel.

Adicione este gancho em seu tema, functions.php

// Adicionar estilo para o painel, sobrepor as metacaixas nas postagens (editor)
add_action ('admin_head', 'custom_metabox_style');

function custom_metabox_style ()
{
eco ' ';
}

isso funciona

mas por que ainda não é corrigido no próprio WP.

Eu corro neste problema ontem, depois que atualizei para o Google Chrome versão 77.0.3865.75 no meu mac. Desativei todos os plug-ins do navegador, o problema ainda existe.

A edição está funcionando normalmente no Google Chrome 76. Eu atualizei o Chrome para a versão 77 nesta máquina e o problema também aparece.

Também testei com o Chrome Canary versão 79.0.3912.0 (Offizieller Build) canário (64 bits) sem problemas.

E eu testei com o firefox. Também sem problemas.

Eu corro neste problema ontem, depois que atualizei para o Google Chrome versão 77.0.3865.75 no meu mac. Desativei todos os plug-ins do navegador, o problema ainda existe.

A edição está funcionando normalmente no Google Chrome 76. Eu atualizei o Chrome para a versão 77 nesta máquina e o problema também aparece.

Também testei com o Chrome Canary versão 79.0.3912.0 (Offizieller Build) canário (64 bits) sem problemas.

E eu testei com o firefox. Também sem problemas.

A solução superior não me ajuda, tento editar este gancho e funciona para mim.

// Adicionar estilo para o painel, sobrepor as metacaixas nas postagens (editor)
add_action ('admin_head', 'custom_metabox_style');

function custom_metabox_style ()
{
eco ' ';
}

Estou vendo esse mesmo problema em vários sites atualizados para 5.2.3. As configurações ACF, Yoast e RevSlider cobrem o conteúdo da postagem e, se forem recolhidas, permanecerão no meio do conteúdo quando você rolar. Tentei isolar desligando os plugins e usando um de cada vez e o comportamento é o mesmo.

Eu confirmo.

Plugins: Yoast, ACF

Firefox 69.0

Chrome 77.0.3865.75

Este trecho de código corrige um pouco o comportamento do Chrome

add_action('admin_head', 'custom_metabox_style');

function custom_metabox_style()
{
echo '<style>
.block-editor-writing-flow {
height: auto;}
</style>';
}

metaboxes estão no fundo agora, mas alguns atrasos persistem

add_action('admin_head', 'custom_metabox_style');
function custom_metabox_style() {
    echo '<style>.block-editor-writing-flow { height: auto; }</style>';
}

Funciona para mim.
Win10, Google Chrome

Pode confirmar que este problema existe no Chrome 77.0.3865.75 no MacOS.

As soluções acima relacionadas à adição de height: auto; a .block-editor-writing-flow ou overflow: auto; a .editor-writing-flow não funcionaram para mim. A solução para mim foi adicionar:

add_action( 'admin_head', 'fix_overlapping_blocks' );
function fix_overlapping_blocks() {
    ?>
    <style>
        .edit-post-layout__content .edit-post-visual-editor {
            flex-basis: auto; // override the default flex-basis: 100%;
        }
    </style>
    <?php
}

@ TylerB24890
posso confirmar sua solução de css.
A mesma solução funcionou para mim.

Melhor
Patrick

Acontecendo em 4 sites em 5.2.3 para nós. A correção do TylerB funcionou para mim, embora você deva remover o // comentário, pois não é um comentário CSS válido.
Você também pode executar isso no console como uma correção temporária:
document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'

.block-editor-writing-flow {
height: auto;}

Funcionou para mim!

document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'
isso funciona como uma solução temporária, mas por que não é adicionado ao núcleo por padrão?

Você também pode usar:

#editor .edit-post-layout__content {
  display:block;
}

Com isso, o editor mostrará seu conteúdo sempre, e não encolherá quando o mouse entrar em uma caixa-meta.

Aqui está o que consertou para mim, que é a combinação das duas soluções.

add_action( 'admin_head', 'fix_overlapping_blocks' );
function fix_overlapping_blocks() {  // fix the admin edit post with metabox
    ?>
    <style>
    #editor .edit-post-layout__content {
        display: block;
    }
    #editor .edit-post-layout__content .edit-post-visual-editor {
        flex-basis: auto;  /* override the default flex-basis: 100%;*/
        clear: both;
    }
    </style>
    <?php
}

Corrija com isso:
/* sort out floating metaboxes issue */ in file 'post_edit_styles.css' .block-editor-page .edit-post-visual-editor.editor-styles-wrapper { min-height: unset; }

Enfileirar apenas no administrador:
function function_name( $hook){ $screen = get_current_screen(); if ( ! is_admin() && $screen->id !== 'edit-post' ) { return; } $datetimeversion = date('YmdHis'); wp_enqueue_style( 'post_edit_styles', plugin_dir_url( __FILE__ ) . 'css/post-edit-page.css', array(), $datetimeversion, 'all' ); }