Gutenberg: Los bloques se superponen con metacajas en las publicaciones

Puedo confirmar este problema. Inserte un contenido largo en el bloque clásico y las metacajas se superpondrán a este bloque.

¿Alguien de ustedes puede probar con el maestro? No puedo reproducir este problema, es posible que se haya solucionado.

Persiste.
Probado con una instalación pura de WordPress 4.9.8 y Gutenberg 4.2.0
Para propósitos de prueba, instalé un complemento como se describe en # 11482

Resultado:

¿Podría ser un problema de Windows? ¿Puedes probar con este zip https://builds.danielbachhuber.com/gutenberg-nightly.zip

Con la construcción nocturna está funcionando 👍

Gracias por la prueba, es una gran noticia. Voy a cerrar esto, esto se lanzará en la versión 4.3.

Instalé Gutenberg 4.3.0-alpha-1ac70e1 en mi sitio 4.9.8 y el problema persiste.

https://youtu.be/cSdo1cUIb1E

@DeveloperWil Interesante,

@DeveloperWil ¿ podría desactivar Advanced Custom Fields PRO y
¿Yoast SEO Premium? Luego, instale el complemento como se describe en # 11482 para propósitos de prueba.

También probé (como tú) con Windows 10 de 64 bits y Chrome, WP 4.9.8, etc. y Gutenberg 4.3.0-alpha-1ac70e1 (pero nada más instalado) y el error se ha corregido.

Firefox
Ubuntu 14.04
WP 5.0-beta3-43878
Construcción nocturna de Gutenberg https://builds.danielbachhuber.com/gutenberg-nightly.zip

registró una gran cantidad de metaboxes.

Mi problema del # 11482 no persiste realmente.

@gziolo modificó los hitos: 4.3, WordPress 5.0 hace 5 días

Esto no está arreglado en Gutenberg 4.3.0 y no está arreglado en WP 5.0-beta3-43891.

No estoy seguro de si esto está relacionado, pero si lo está, puede replicarlo habilitando los botones para compartir en el complemento Jetpack. Como puede ver en la captura de pantalla, el meta cuadro de los botones para compartir se superpone a los bloques de Gutenberg. Sin embargo, esto podría ser un error en Jetpack (y el complemento All in One SEO, que tiene el mismo problema, como puede ver en la imagen)

Si se trata de un error en esos dos complementos, avíseme y registraré los problemas con cada proyecto.

Estoy haciendo una referencia cruzada a este problema de TwentyNineteen https://github.com/WordPress/twentynineteen/issues/599 ya que este problema también parece abordar los metaboxes y el campo del editor (aunque desde un ángulo ligeramente diferente)

El mismo error existe con Genesis Framework 2.7.1 (listo para Gutenberg) y Gutenberg 4.4.0

Encontré una manera de reproducir, sin embargo, solo en 4.4, no en master. Por lo tanto, vale la pena intentar averiguar cuándo y cómo se solucionó.

• Paso 1: habilita Yoast u otro complemento con un metabox. Expanda para obtener el máximo efecto.
• Paso 2: escriba un montón de cosas, vea cómo se superponen. Otro síntoma es una TONELADA de espacios en blanco antes de que puedas ver los metaboxes.

Resultado de los pasos anteriores en 4.4:

Resultado de los pasos anteriores en el maestro:

☝️ Tenga en cuenta que el color coral es uno que agregué en el depurador, al elemento editor-writing-flow__click-redirect , que inicialmente parecía ser el que se comportaba mal.

He probado esto en Chrome y Firefox en Windows y Mac.

Cuando investigué inicialmente, parecía que estaba mal flexionando el editor-writing-flow y el .editor-writing-flow__click-redirect . Sin embargo, como se señaló, no puedo reproducir este problema en master, a pesar de que el código aparece sin cambios. Intentemos averiguar qué cambió aquí recientemente.

Agradecería que alguien pudiera probar este problema en el maestro y ver si el problema persiste allí.

No estoy seguro de si esto está relacionado, pero si lo está, puede replicarlo habilitando los botones para compartir en el complemento Jetpack. Como puede ver en la captura de pantalla, el meta cuadro de los botones para compartir se superpone a los bloques de Gutenberg. Sin embargo, esto podría ser un error en Jetpack (y el complemento All in One SEO, que tiene el mismo problema, como puede ver en la imagen)

Si se trata de un error en esos dos complementos, avíseme y registraré los problemas con cada proyecto.

Resulta que mi 'error' estaba relacionado con el tema Divi y no con los complementos de Jetpack o All in One SEO.

Activando Twenty Seventeen y ejecutando la rama maestra del complemento, todo funciona bien.

Gracias por los seguimientos y las pruebas.

Si bien veo que este error está cerrado, yo también tengo este problema con los metabloques flotando sobre los bloques del editor de WP. Intenté deshabilitar mi tema actual (Theme.co Pro) y Yoast. Esto fue en un sitio de desarrollo con complementos mínimos. Intentaré desactivar todos los complementos para ver si puedo identificar un conflicto. Estoy usando 5.0-RC1.

Actualizado : se encontró el complemento conflictivo - Shortcake (interfaz de usuario de Shortcake) - https://wordpress.org/plugins/shortcode-ui/
Después de desactivar eso, todo se ve bien.

Sigo recibiendo este problema con 4.9.8 y Gutenberg 4.5.1

También recibo 3 lotes del siguiente error en la consola de Chrome:
wp-seo-premium-metabox-830.min.js? ver = 8.3: 109 Error de tipo no detectado: (0, i.getI18n) no es una función
en t (wp-seo-premium-metabox-830.min.js? ver = 8.3: 109)
en Object.(wp-seo-premium-metabox-830.min.js? ver = 8.3: 56)
en e (commons-premium-830.min.js? ver = 8.3: 1)
en window.yoastPremiumWebpackJsonp (commons-premium-830.min.js? ver = 8.3: 1)
en wp-seo-premium-metabox-830.min.js? ver = 8.3: 1

He reproducido esto con un pequeño caso de prueba.

Paso 1: tenga un metabox en la página. Pueden ser campos personalizados (Menú Más> Opciones> Campos personalizados)

Paso 2: Pon lo siguiente en functions.php:

add_action('init', iAmError);

Paso 3: Vuelva a cargar y observe el error.

El problema parece ser que un complemento arroja un error de PHP, pero este error a menudo no es visible en el administrador, porque el mensaje de error real está oculto porque es solo una advertencia y están ocultos por defecto en la mayoría de los hosts, o porque está cubierto por la barra de administración.

Además, esto se ve agravado por el editor _ aparentemente funcionando bien_, cuando de hecho está parcialmente en un estado de error.

Para dar más detalles, este error probablemente todavía esté presente en una página del editor sin metaboxes habilitados. Pero el error simplemente no es evidente porque no hay metaboxes para mostrar el estado de error.

¿Podemos manejar mejor estos errores?

Este también es un problema para nosotros. Encontramos los resultados a continuación mientras nuestro tema personalizado y un montón de complementos están activados (incluido YoastSEO):

Funciona correctamente con metacajas que aparecen en la parte inferior de los bloques de página cuando se usa:

• FireFox 63.0.3 (64 bits) en Windows 10
• Internet Explorer 11.285.17134.0 en Windows 10 usando la opción de emulador de herramientas de desarrollador para forzar el modo de documento 10

Los metacuadros se superponen a los bloques de página cuando se usa:

• Internet Explorer 11.285.17134.0 en Windows 10 usando las herramientas de desarrollador para forzar el modo de documento 11
• Edge 42.17134.1.0 en Windows 10
• Chrome 70.0.3538.110 en Windows 10

@SJNBham Hasta ahora, la única forma en que he podido reproducir esto es con un complemento que arroja un error en WordPress 5.0.

¿Puedo pedirle amablemente que intente desactivar sus complementos y ver si funciona? Si es así, reactívelos uno por uno para que podamos averiguar cuál está causando el error, eso me ayudará a reproducirlo y depurarlo.

Otra forma de reproducir esto sin causar un error en WP 5.0-RC1-43945:

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

Eso no produce ningún error de consola o PHP, pero el contenido se superpone a las metacajas.

@jasmussen Si desactivo todos los complementos excepto Gutenberg, activo el tema Twenty8teen, uso una plantilla de página predeterminada y selecciono para mostrar campos personalizados, se presenta el problema de superposición.

Cambié a uno de nuestros sitios más básicos que solo tenía dos complementos activados (Panel de control de Google Analytics para WP y Gutenberg). Utiliza el tema Dynamic Seventeen y las metacajas se alinean correctamente en la parte inferior de los bloques de contenido. Cambié al tema Twenty8teen solo para asegurarme de que estaba comparando manzanas con manzanas y que las metacajas continuaran comportándose correctamente.

Estamos ejecutando WordPress 4.9.8 y Gutenberg 4.5.1

Actualización: el sitio en el que estábamos viendo este problema era un sitio de prueba de nuestro sitio de producción. Descubrimos que se están presentando errores en nuestro sitio de ensayo (estamos alojando con WPEngine y probando la actualización de PHP 7.2). Creo que WPEngine es consciente del error y está trabajando en él.

"Se espera que el parámetro 1 de wp_default_scripts () sea una referencia ..."

Cuando activé Gutenberg en nuestro sitio de producción, las metacajas parecen estar alineadas en la parte inferior como se desea.

Entonces, ¿tal vez esto esté relacionado con la forma en que se manejan los errores como se indicó anteriormente?

Para aquellos de ustedes que experimenten este problema, ¿pueden intentar los siguientes pasos de depuración y ponerse en contacto conmigo?

1. Abra la consola de JavaScript.
   En Chrome es Ver> Desarrollador> Consola JavaScript . En Firefox es Herramientas> Desarrollador web> Consola web .
2. Pegue lo siguiente en la consola y presione Entrar: javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

Informe el mensaje que está recibiendo.

• Cuando veo el mensaje "Estás en el modo Estándar", todo funciona según lo previsto.
• Cuando veo el mensaje "Estás en modo Quirks", veo el problema de superposición.

@jasmussen Veo “Estás en modo Quirks” cuando add_action( 'enqueue_block_editor_assets', function() { echo '<style></style>'; } ); en el archivo functions.php de un tema desde arriba.

(Es porque <style></style> se emite antes de <!DOCTYPE html> , forzando el modo peculiaridades).

Por lo tanto, el HTML inválido regular también podría desencadenar esto, así como los errores emitidos por PHP.

Gracias por verificar, @nickcernis , sí. Parece que las reglas flexibles que dimensionan el lienzo de edición principal se comportan de manera diferente en el modo peculiar en comparación con el modo estándar. Estoy buscando algunas opciones.

@jasmussen : activé ese complemento que mencioné antes (que estaba causando el problema) y puse el código que sugirió en la consola. Veo el mensaje "Estás en modo Quirks" en esa instancia con el complemento activo.
Cuando desactivo ese complemento y vuelvo a cargar la página de publicación, aparece el mensaje "Estás en modo Estándar". Espero que ayude.

@HighTechDad Eso ayuda mucho, sí. Tengo algunas ideas sobre cómo mitigar esto, pero sopesando las opciones. Si estoy en lo cierto, significa que hay un pequeño problema con el complemento de interfaz de usuario de Shortcake que está causando el problema, y ​​lo ideal es que se solucione allí. Pero volveré cuando tenga algo que compartir.

@jasmussen - Realmente no uso ese complemento de interfaz de usuario de Shortcake. Lo tenía en mi sitio de desarrollo donde estoy probando WP 5.0. Estoy seguro de que habrá / hay muchos complementos que no se han actualizado en un tiempo que pueden causar que el problema se manifieste. Solo sé que con ese complemento en particular, es fácil de probar y reproducir. (Solo preocupado cuando se implemente 5.0, habrá muchos otros complementos que tendrán "pequeños problemas" y causarán frustración).

Gracias por mantener vivo este hilo, aunque este problema en particular está marcado como "Cerrado". Quizás es hora de reabrir ...

Me comuniqué con el equipo de soporte para Yoast SEO y vieron que este ticket estaba cerrado, por lo que dijeron que era un problema de WordPress que eventualmente se solucionará con una versión más nueva de WordPress. Menciono esto porque otros proveedores pueden dar la misma respuesta si ven este ticket cerrado. También el hecho de que es muy probable que otros complementos tengan un error que activará el modo de compatibilidad. Por lo tanto, sería genial encontrar una solución para retroceder con gracia cuando el modo de compatibilidad está activo. ¡Gracias por tu trabajo en esto!

Sí, la discusión nunca se cierra. Todavía estoy tratando de averiguar dónde y cómo aparece el problema y, según los detalles, el problema se volverá a abrir o se creará uno nuevo en función de lo aprendido aquí. Gracias por su paciencia.

Tú también estás en modo Quirks para mí

Así que me encontré con esto en 5.0 RC1. Modo estándar, sin errores de PHP, sin errores de JS.
Resulta que mi problema era que mi tema tenía esto en un archivo editor-styles.css :

body {
    height: 100%;
}

que se renderizó como CSS en línea en la pantalla del editor como:

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

Parece que los malos estilos de editor son otro posible culpable de este problema.

Buen partido, @earnjam. Sin embargo, sugeriría que es un problema separado (y siéntase libre de abrir uno con los pasos para reproducir). Esto está relacionado con el hecho de que el lienzo de edición no está en un iframe, y si no está atento, puede escribir estilos de editor que afecten la interfaz de usuario circundante, como este:

* {
    border: 13px solid mediumaquamarine;
}

Los estilos del editor definitivamente pueden usar algunas mejoras en lo que respecta al alcance, y sería bueno comenzar a recopilar los problemas que queremos abordar, creo que se han observado algunos aquí y allá. Pero en este caso, los temas de WordPress tienen que optar explícitamente por el uso de estilos de editor, por lo que es de esperar que este sea el tipo de cosas que quedarán atrapadas en el desarrollo de dicho estilo. ¿Quizás la solución a este problema en particular es anotarlo en una sección de "mejores prácticas" en los documentos de soporte del tema?

De acuerdo, creé una solicitud de extracción como prueba de concepto que mitiga esto, pero dado que no es un error con Gutenberg, no creo que deba fusionarse. Pero es de esperar que pueda inspirar mejores ideas sobre cómo ayudar al usuario o desarrollador del complemento que está poniendo a Gutenberg en modo peculiar a solucionar el problema. Comparta sus pensamientos y observaciones sobre las relaciones públicas: https://github.com/WordPress/gutenberg/pull/12455

@jasmussen Sí, solo quería señalar otra causa del problema descrito en la publicación original.

La única preocupación que tendría sobre la parte de participación es que este tema en particular eligió estilos de editor en el editor anterior. No se ha actualizado en un tiempo y, por lo tanto, no se ha actualizado para admitir el nuevo editor de bloques.

Por lo tanto, no hay forma de saber cuántos temas existentes pueden tener estilos de editor que funcionen bien en el editor clásico, pero causarán problemas como este en el editor de bloques.

No estoy seguro de que haya una solución a ese problema, excepto quizás algún CSS defensivo para las reglas conocidas que pueden causar problemas.

No importa, se actualizó el 20 de noviembre. Quizás simplemente cometieron un error en las pruebas. Investigaré más.

Creo que esa es una de las razones por las que Gutenberg requiere que los desarrolladores de temas opten explícitamente por admitir los nuevos estilos de editor: https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#editor -styles: que yo sepa, los estilos de editor antiguos no deberían cargarse a menos que el autor del tema diga que son buenos para cargar. Y si lo hacen, en muchos casos los estilos deberían traducirse 1: 1, pero la opción de inclusión debería sugerir un paso de prueba allí.

Este es mi intento más reciente para mitigar y hacer que los desarrolladores conozcan los conflictos de complementos que pueden causar esto: https://github.com/WordPress/gutenberg/pull/12575 : comparta sus pensamientos.

Tuve este problema y fue causado por Form Maker Plugin, gracias por la información sobre el "Modo Quirks", ¡me habría tomado una eternidad resolverlo! Creé una publicación sobre este tema en mi sitio de WordPress. Actualmente estoy usando WP versión 5.0.2 en Debian 9 con php 7.2.13

Tenía este problema con Yoast SEO y Postmattic. Mi navegador estaba en modo Quirks debido al complemento WP Rainbow Hilite. Desactivado por ahora y ahora el problema se ha ido.

Puedo decirles que el problema de los bloques que se superponen (en realidad desaparecen debajo) de las metacajas en las páginas que usan Gutenberg todavía existe, y nos impide hacer cambios o adiciones a la página.
Algunas personas parecen pensar que se ha solucionado, pero no es así.

Estoy usando:
Navegador Google Chrome.
WordPress 5.1
Tema: Nirvana Versión: 1.5.1.1
El metabox de Yoast SEO es el primero que muestra el problema; hay otros.
Y no, no es una cosa de Windows; Estoy experimentando esto en un iMac.

Tenga en cuenta que cuando cambio a Firefox, no muestra el mismo problema, al menos en una página que probé.

Si necesita algo más para ayudar a rastrear esto, hágamelo saber ...

Gracias por el informe.

Si necesita algo más para ayudar a rastrear esto, hágamelo saber ...

¿Puede abrir la consola de JavaScript y ver si hay algún mensaje allí? En Chrome, mac es ⌘⌥J, en Firefox es ⌘⌥K, en Safari primero tienes que habilitarlo, instrucciones aquí: https://support.airtable.com/hc/en-us/articles/232313848-How- para-abrir-la-consola-de-desarrollador

Dependiendo de si hay o no un mensaje en la consola, los siguientes pasos dependen de eso. Gracias.

Aquí hay una captura de pantalla que resultó cuando dije "Editar página" en mi elección
página (adjunta).
Tenga en cuenta que borré la consola antes de editar la página.

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

¡Espero que ayude!

Bryan

¡Espero que hayas obtenido la captura de pantalla!

Gracias Bryan, sí, la captura de pantalla pasó. Edité tu comentario para vincularlo a él para que sea más fácil de ver.

Y de hecho, fue útil. En la captura de pantalla hay una advertencia que dice que el navegador está en "Modo peculiaridades". Este modo es lo que hace que los metaboxes se superpongan, y casi con certeza es causado por un complemento que agrega contenido a la página de una manera no estándar y necesita una actualización. Puede ser el tema de WordPress, pero es menos probable.

Si puede, ¿puede intentar desactivar los complementos, uno a la vez, y luego volver a cargar el editor para ver si comienza a funcionar como debería? No es necesario desactivar todos a la vez, solo uno a la vez y luego volver a cargar el editor cada vez. Cuando encuentre el único complemento que cuando está desactivado hace que el editor funcione, hágamelo saber aquí. Luego puedo comunicarme con el desarrollador y ofrecerle consejos y ayuda sobre cómo actualizar ese complemento para que funcione con el editor. ¡Gracias!

No puedo hacer esto en nuestro sitio web en vivo, pero veré si puedo hacer algo para
reproducir el problema en otro sitio web de desarrollo. Manténganse al tanto...

FWIW, hice la misma captura de consola Javascript en Firefox, que no
parece experimentar el comportamiento, usando la página de edición en la misma página que antes.
Aquí está el resultado (adjunto). Quizás comparándolo con la captura de Chrome
¿Podría arrojar algo de luz?

Intenté reproducir esto en varios otros sitios web, incluso instalando Yoast SEO si aún no estaba instalado. Desafortunadamente, no pude reproducir el comportamiento en esos sitios, lo que significa que desactivar los complementos no serviría de mucho.

¿Llegó la segunda captura de consola?

No vi el archivo adjunto. Si responde a estos mensajes por correo electrónico, no creo que surjan archivos adjuntos. Creo que tienes que ir aquí a Github a través del navegador para agregar imágenes.

Sospecho que Firefox mostrará el mismo mensaje de error, pero quizás el motor de renderizado del navegador tenga una mejor manera de manejar lo que se conoce como "modo peculiaridades". La mejor solución sigue siendo encontrar el complemento problemático y pedirle al desarrollador que envíe una solución para eso. Pero supongo que si Firefox te está funcionando bien en este momento, eso puede servirte como una solución. Entiendo totalmente por qué no puedes probar esto en producción.

Una forma alternativa en la que podemos depurar: ¿pueden enviarme una lista completa de los complementos que usa en su sitio web? Entonces puedo probarlos uno por uno, ver si puedo reproducirlo.

Yo también he tenido el mismo problema. La instalación del complemento Disable Gutenberg soluciona el problema y desaparece el mensaje "Modo peculiaridades", pero esa no es una buena solución a largo plazo.

Intenté revisar y deshabilitar complementos en mi versión local de Wordpress. He verificado que 26 de mis complementos no causan el problema, pero activar cualquiera de estos 5 hace que el problema vuelva:

Guerra social - Pro
Tabla de contenido Plus
Extensión TablePress: tablas receptivas
WP Ocultar publicación
WP Tab Widget Pro

¡Gracias por el informe, Joe! Probaré esos complementos y veré si puedo reducir el problema y regresaré con más información aquí.

¡Gracias! Curiosamente, no instalé ninguno de esos complementos hoy cuando comenzó el error (no creo que los actualicé tampoco, aunque podría estar equivocado).

He estado realizando algunos cambios en mi sitio con Elementor pro, que es lo que primero pensé que estaría causando el problema, pero desactivar eso no cambia nada.

La explicación de por qué aparece el problema es un poco técnica, pero la esencia es la siguiente:

• Si la página web (en este caso el editor) es HTML válido , se representa correctamente
• Si la página web es HTML no válido , el navegador tiene que _ adivinar_ cómo renderizar las cosas y adivina incorrectamente que los metaboxes deberían superponerse

¿Qué causa que una página web deje de ser válida? En este caso, es probable que un complemento genere algunas extensiones en el marcado del editor que hacen que se rompa. Si funciona según lo previsto en el editor clásico, es probable que se deba a que los navegadores _ adivinan correctamente_ la representación debido a cualquier cantidad de diferencias en el marcado. Dado que parece funcionar correctamente, el error en estos complementos probablemente haya pasado desapercibido hasta ahora.

La solución a los complementos que causan estos problemas es relativamente trivial: simplemente envíe las extensiones en un lugar que no rompa la validez del marcado. Entonces, una vez que sepamos qué complementos causan esto, debería ser fácil encontrar soluciones sugeridas.

Si Firefox adivina correctamente, entonces esa sería una solución alternativa sugerida hasta que los complementos puedan actualizarse por sí mismos. Gracias por su paciencia.

Joen -

Acabo de agregar la captura de pantalla a mi mensaje en Github. Espero que ayude.

Bryan

FWIW, eché un vistazo a la lista de complementos que Joe-Clements126 enumeró:

Guerra social - Pro
Tabla de contenido Plus
Extensión TablePress: tablas receptivas
WP Ocultar publicación
WP Tab Widget Pro

No utilizo ninguno de estos complementos en mi sitio web.

Por supuesto. Aquí está la información del sistema que proporciona Elementor: es una
fuente conveniente de lo que estás buscando, aunque no estoy usando
Elementor en este sitio muchísimo. Cuando muevo este sitio a uno nuevo,
eso va a cambiar.

Ver adjunto...

== Complementos activos ==
Agregar desde servidor
Versión: 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

Yo también estaba teniendo este mismo problema, así que comparé nuestra lista de complementos y desactivé Popup Builder. Eso solucionó el problema para mí.

Entonces, intenté desactivar Popup Builder en mi sitio, y el mal comportamiento
desapareció, al menos en una página donde estaba presente antes.

Creo que hemos encontrado un culpable (quizás uno entre muchos ...)

¡Gracias, Elizabeth!

¡Gracias a todos por los comentarios! Esto seguramente será útil para otras personas que busquen. Por ahora, probaré dos veces el generador de ventanas emergentes y me comunicaré con el desarrollador de Popup Builder con consejos y sugerencias para una solución. ¡Ojalá podamos arreglar esto pronto! Agradezco mucho todos los comentarios.

FWIW, reemplacé Popup Builder con Popup Maker (lo que iba a hacer, eventualmente, de todos modos).
No parece tener los mismos efectos negativos que Popup Builder.

Lo intenté hoy y no pude reproducir el problema con el generador de ventanas emergentes. Eso no significa que no haya ningún problema, tal vez signifique que debe usar el generador de ventanas emergentes de una manera particular o en un entorno de servidor particular. Por ejemplo, si genera un mensaje de error en el código fuente, eso también lo causaría.

Me comuniqué con el desarrollador, parece ser muy activo y receptivo en sus foros. Parece que podrían abordar esto rápidamente, ya que su última actualización fue hace una semana. ¡Gracias por los informes!

Gracias por mirar en esto. Hoy tenía un desarrollador trabajando en mi sitio y estaba seguro de que Elementor estaba causando el problema.

Esto es con lo que regresó, que les he transmitido.

"Dentro de elementor / includes / utils.php dentro del complemento Elementor hay una función que inyecta etiquetas de script en lo que deberían ser respuestas JSON normales.

La siguiente función está causando el problema, ya que no puede enviar al azar '. PHP_EOL;}

Sería genial si pudiera actualizar su complemento para determinar si la solicitud / respuesta es JSON antes de jugar con este resultado "

Acabo de recibir comentarios del desarrollador de Popup Builder que esperan una solución en la próxima versión. No he podido verificar esto, pero es genial ver una respuesta tan rápida 👏

Hola chicos, gracias por compartir. Con respecto a los problemas con Popup Builder, el problema que rompe el editor visual es ese nuevo botón que agregaron al editor. Esta es la solución (quitar ese botón) ...

Vaya al siguiente archivo en su sitio: your_wordpress_folder / wp-content / plugins / popup-builder / com / classes / Actions.php
Elimine la línea 26: add_action ('mce_external_plugins', array ($ this, 'editorButton')); ....
Esto deberia resolver el problema.

Utilizo WP 5.1.1 y me solucionó el problema en todos mis sitios.

Solo quería informar que el problema de superposición también es causado por Ninja Forms 3.4.4., Beta4 y WP 5.1.1.

@ alkah3st No puedo replicar estos problemas solo con la versión 3.4.4 del complemento Ninja Forms y el tema de WordPress 2019 activado en WP 5.1.1 Parece que el problema que está viendo es causado por el complemento ACF 5.8.0 Beta4 .

Hmm, cuando dejo todo desactivado excepto ACF Beta 4 y Yoast, no me superpongo. En el instante en que enciendo Ninja Forms, comienza la superposición. Puedo crear una instancia de ensayo para demostrar esto si lo desea.

Actualización: parece que Ninja Forms genera este error:

Error de la base de datos de WordPress: [columna desconocida 'form_title' en 'lista de campos']

| SELECCIONE title , created_at , form_title , default_label_pos , show_title , clear_complete , hide_complete , logged_in , seq_num
| DESDE wp_k5n_nf3_forms
| DONDE id = 2

Cuando no hay un título asignado a un formulario (algo que está permitido en Ninja Forms). Entonces, este error se descarga en la parte superior del documento, antes de la declaración HTML, lo que hace que el editor ingrese al modo Quirks.

No estoy seguro de si esto es de alguna ayuda ... pero cuando tengo una advertencia de PHP mientras WP_DEBUG está activo, se produce un problema de superposición. Cuando resuelvo la advertencia de PHP, la superposición desaparece.

@ alkah3st No puedo replicar estos problemas solo con la versión 3.4.4 del complemento Ninja Forms y el tema de WordPress 2019 activado en WP 5.1.1 Parece que el problema que está viendo es causado por el complemento ACF 5.8.0 Beta4 .

Tengo ACF Beta4 en todos los sitios que estoy desarrollando actualmente y no tengo problemas de superposición en esos sitios.

Para ser claros, esto es solo una advertencia para cualquiera que use Ninja Forms, ya que el problema proviene de Ninja Forms que inyecta su error antes de la declaración HTML, lo que hace que el documento entre en modo Quirks (como ocurre con otras personas con problemas similares con diferentes complementos en este hilo).

Gracias a todos por los excelentes informes de errores aquí. Toda su información es valiosa para que sepamos cómo podemos mitigar y fortalecer esto en el futuro.

@ellatrix Veo algunos informes de que la función de complementos externos de TinyMCE puede estar causando algunos errores de PHP; esto también causaría que se produzca la superposición, ya que coloca al navegador en modo peculiar. ¿Sabe si hay algo que podamos hacer para evitar que esto suceda? ¿Algo, desde no cargar complementos externos en Gutenberg hasta generar el error de PHP en un lugar diferente? Gracias Ella.

Hay varios problemas abiertos con este mismo problema y parece haber múltiples fuentes. También me encontré con él, para mí el problema no eran los errores silenciosos de php. El problema era que mi tema css tenía una regla que establecía la altura del elemento del cuerpo en 100%. La forma en que Gutenberg maneja los estilos del editor es transformando el CSS de su tema:

En el editor clásico, la hoja de estilo del editor se carga directamente en el iframe del editor WYSIWYG, sin cambios. Gutenberg, sin embargo, no usa iframes. Para asegurarnos de que sus estilos se apliquen solo al contenido del editor, transformamos automáticamente los estilos de su editor reescribiendo o ajustando selectivamente ciertos selectores de CSS. Esto también permite a Gutenberg aprovechar el estilo de su editor en vistas previas de variaciones de bloques.

El resultado en mi caso es que body { height: 100% } convierte en .editor-styles-wrapper { height: 100% } . Esta es la regla CSS que hizo que los metaboxes del complemento se superpusieran al editor. Eliminar height: 100% del elemento del cuerpo solucionó el problema.

El resultado en mi caso es que el cuerpo {altura: 100%} se convierte en .editor-styles-wrapper {altura: 100%}. Esta es la regla CSS que hizo que los metaboxes del complemento se superpusieran al editor. Eliminar la altura: el 100% del elemento del cuerpo solucionó el problema.

¡Gracias por compartir eso, @bitwitch! @youknowriad esto se siente como algo que deberíamos mitigar. ¿Crees que deberíamos eliminar esa altura al reescribir, o crear una regla separada en la nueva hoja de estilo de "normalización" que anula la altura para que sea siempre automática, quizás con un comentario!

¿Puedo preguntar por qué hay un body { height: 100% } en los estilos del editor?

La principal razón del hecho de que los estilos de editor sean opcionales en Gutenberg es el hecho de que los estilos de editor antiguos no se pueden utilizar directamente. Los autores de temas deben verificar si sus estilos son "compatibles" y luego habilitarlos.

No estoy seguro de que debamos introducir trucos como este.

¿Puedo preguntar por qué hay un cuerpo {altura: 100%} en los estilos del editor?

La razón principal para hacer esto suele ser para crear sitios web que utilicen la altura completa de la ventana del navegador para los elementos. Por ejemplo, si tiene un elemento de bienvenida "arriba del pliegue" en su página de inicio, uno que es siempre 100% alto. O si necesita alinear hacia abajo algo en una página que no se desplaza.

Es cierto que esto es una cuestión de front-end, y no algo que normalmente pondrías en el estilo del editor. En ese sentido, compro su argumento de hecho. Mi idea al abrir un ticket por separado es dar otro pequeño paso hacia un futuro en el que el estilo del editor no tenga que ser diferente del estilo de la interfaz. Aunque quizás este en particular sea una tarea para volver a visitar en un momento posterior.

¿Puedo preguntar por qué hay un cuerpo {altura: 100%} en los estilos del editor?

La razón de esta regla en mi caso es porque no usamos una hoja de estilo separada para el editor. Minificamos el CSS de todo el sitio en un solo archivo, incluido todo el CSS para bloques personalizados. La altura del cuerpo: la regla 100 es para cualquier otra parte del sitio. Mi intención al publicar era ayudar a otros que pueden tener la misma fuente de problemas que yo, no necesariamente recomendar la introducción de una solución alternativa al final de Gutenberg.

No tengo mucho que agregar más que decir que he tenido el mismo problema (texto de bloqueo de SEO de Yoast en el editor de la página) hasta el punto de hacerlo apenas utilizable.

@PhotoCoog generalmente se trata de un problema de complementos.

¿Puede abrir la consola de JavaScript y ver si hay algún mensaje allí? En Chrome, mac es ⌘⌥J, en Firefox es ⌘⌥K, en Safari primero tienes que habilitarlo, instrucciones aquí: https://support.airtable.com/hc/en-us/articles/232313848-How- para-abrir-la-consola-de-desarrollador

Dependiendo de si hay o no un mensaje en la consola, los siguientes pasos dependen de eso. Gracias.

¡Tiene lo siguiente que realmente menciona el problema! Alguna manera de arreglarlo?

JQMIGRATE: Migrate está instalado, versión 1.4.1
edit-post.min.js? ver = 3.1.11: 12 Su navegador está usando el modo Quirks.

Esto puede causar problemas de renderizado, como bloques que se superponen a metacuadros en el editor. El modo Quirks puede ser activado por errores PHP o código HTML que aparece antes de la apertura. Intente verificar la fuente de la página sin procesar o el registro de errores PHP de su sitio y resolver los errores allí, eliminar cualquier HTML antes del tipo de documento o deshabilitar los complementos.

@PhotoCoog ¡ Gracias por mirar!

Esto significa que hay un complemento o un tema en su sitio web que necesita una actualización. Una forma de probar es deshabilitar los complementos uno por uno y averiguar cuál hace que el editor se procese correctamente, pero me doy cuenta de que esto es complicado de hacer en un sitio de producción. Como alternativa, siéntase libre de enviarme una lista de los complementos que está utilizando, y puedo probarlos uno por uno y ver cuál causa el problema. Una vez que encontremos al culpable, puedo comunicarme con el desarrollador para sugerir una solución.

Solucione este problema desde el estilo del tablero.

Agrega este gancho en tu tema, functions.php

// Agregar estilo para el tablero, superponer metacuadros en las publicaciones (editor)
add_action ('admin_head', 'custom_metabox_style');

función custom_metabox_style ()
{
eco ' ';
}

@rendergraf ¿Puedes abrir la consola de JavaScript y avisarme si ves una advertencia allí? En Chrome, mac es ⌘⌥J, en Firefox es ⌘⌥K, en Safari primero tienes que habilitarlo, instrucciones aquí: https://support.airtable.com/hc/en-us/articles/232313848-How- para-abrir-la-consola-de-desarrollador

Probé ese truco de desbordamiento en el pasado y tiene efectos secundarios desafortunados. Además, si ve una advertencia en la consola JS, significa que hay un conflicto con un complemento, y la verdadera solución es arreglar ese complemento.

@jasmussen en la consola no muestra ningún error relacionado con admin_head.

todo funciona correctamente

¡Interesante! Gracias por responderme con eso.

Si abre el inspector web, ¿es lo primero en el documento el tipo de documento? Es decir ¿O hay algo antes de eso?

No, en mi caso es:

Por favor, si necesita más información sobre hook admin_head, puede ver la documentación oficial:
https://developer.wordpress.org/reference/hooks/admin_head/

Espero que te ayude

En mi caso, el problema estaba en un código CSS que se repitió en el gancho admin_menu, cambió el gancho a 'admin_bar_menu' y todo parece estar bien

Solucione este problema desde el estilo del tablero.

Agrega este gancho en tu tema, functions.php

// Agregar estilo para el tablero, superponer metacuadros en las publicaciones (editor)
add_action ('admin_head', 'custom_metabox_style');

función custom_metabox_style ()
{
eco ' ';
}

eso funciona

pero por qué todavía no está arreglado en WP.

Me encontré con este problema ayer, después de actualizar a la versión 77.0.3865.75 de Google Chrome en mi mac. Deshabilité todos los complementos del navegador, el problema aún existe.

La edición funciona normalmente en Google Chrome 76. Actualicé Chrome a la versión 77 en esta máquina y también aparece el problema.

También probé con Chrome Canary versión 79.0.3912.0 (Offizieller Build) canary (64 bits) sin problemas.

Y probé con Firefox. Tampoco hay problemas.

Me encontré con este problema ayer, después de actualizar a la versión 77.0.3865.75 de Google Chrome en mi mac. Deshabilité todos los complementos del navegador, el problema aún existe.

La edición funciona normalmente en Google Chrome 76. Actualicé Chrome a la versión 77 en esta máquina y también aparece el problema.

También probé con Chrome Canary versión 79.0.3912.0 (Offizieller Build) canary (64 bits) sin problemas.

Y probé con Firefox. Tampoco hay problemas.

La solución superior no me ayuda, trato de editar este gancho y funciona para mí.

// Agregar estilo para el tablero, superponer metacuadros en las publicaciones (editor)
add_action ('admin_head', 'custom_metabox_style');

función custom_metabox_style ()
{
eco ' ';
}

Veo este mismo problema en varios sitios que se actualizaron a 5.2.3. Las configuraciones de ACF, Yoast y RevSlider cubren el contenido de la publicación y, si se contrae, permanecerá en el medio del contenido cuando se desplaza. Intenté aislar apagando los complementos y usando uno a la vez y el comportamiento es el mismo.

Confirmo.

Complementos: Yoast, ACF

Firefox 69.0

Cromo 77.0.3865.75

Este fragmento de código corrige un poco el comportamiento de Chrome

add_action('admin_head', 'custom_metabox_style');

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

los metaboxes están en la parte inferior ahora, pero persisten algunos retrasos

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

Funciona para mi.
Win10, Google Chrome

Puede confirmar que este problema existe en Chrome 77.0.3865.75 en MacOS.

Las soluciones anteriores con respecto a agregar height: auto; a .block-editor-writing-flow o overflow: auto; a .editor-writing-flow no funcionaron para mí. La solución para mí fue agregar:

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
Puedo confirmar su solución css.
La misma solución funcionó para mí.

Mejor
Patricio

Sucediendo en 4 sitios en 5.2.3 para nosotros. La solución de TylerB funcionó para mí, aunque debería eliminar el comentario // ya que no es un comentario CSS válido.
También puede ejecutar esto en la consola como una solución temporal:
document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'

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

¡Trabajó para mi!

document.querySelector('.edit-post-layout__content .edit-post-visual-editor').style.flexBasis = 'auto'
esto funciona como una solución temporal, pero ¿por qué no se agrega al núcleo de forma predeterminada?

También puedes usar:

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

Con esto, el editor mostrará su contenido siempre, y no se encogerá cuando su mouse ingrese a un meta-cuadro.

Esto es lo que me solucionó, que es la combinación de ambas soluciones.

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
}

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

Poner en cola solo en admin:
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' ); }