From 45c750dcf2a983ebe45e57eb4f35f8fb8456393d Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 29 Nov 2018 13:10:32 +0100
Subject: [PATCH] Try: Compat hack for when the browser is in quirks mode

Browsers can run in _standards_ modes, or in _quirks_ modes. Usually when a proper doctype declaration is present _right at the top of the page_, the browser will render everything correctly in standards mode.

However lots of things can trigger what's referred to as "quirks" mode. The usual method is when the doctype declaration is missing, or isn't the very first thing in the document. This makes the browser render in a compatibility mode. When this happens, Gutenberg still works, however there are some intricacies of the flexbox we are using for the layout, that break.

It seems that in the majority of cases, what triggers Quirks mode for Gutenberg, is a PHP warning, or PHP error. These are output as little notices at the top of the page, before the doctype. Because of that, the doctype might as well not be present, and quirksmode is initiated.

Obviously the real fix here is for the developer address any PHP errors or notices that might have been thrown by a theme, a plugin, or a metabox. But because the notice might be invisible to the user (output at the top of the page but hidden by the editor bar or something else), a user might blame Gutenberg for not working as intended. Especially because Gutenberg works 99% when in quirksmode.

This PR adds a horrendous hack (seriously, we should probably find a different approach, but see this as a proof of concept) that detects whether Gutenberg is being loaded in quirks mode, and then applies an `is-quirks-mode` CSS class to the `body` element. This CSS class is then used to apply a CSS hack that prevents metaboxes from overlapping content in the main editing canvas.
---
 gutenberg.php                                 | 24 +++++++++++++++++++
 .../src/components/layout/style.scss          |  7 ++++++
 2 files changed, 31 insertions(+)

diff --git a/gutenberg.php b/gutenberg.php
index 327a6dba8e76f..39e042e4e501e 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -567,3 +567,27 @@ function gutenberg_add_responsive_body_class( $classes ) {
 }
 
 add_filter( 'body_class', 'gutenberg_add_responsive_body_class' );
+
+
+/**
+ * Prints JavaScript to detect whether the browser is in standards mode or not.
+ *
+ * @since 4.5
+ */
+function gutenberg_detect_quirks_mode() {
+	?>
+	<script type="text/javascript">
+		document.addEventListener( 'DOMContentLoaded', function() {
+			try {
+				var documentMode = document.compatMode==='CSS1Compat'?'Standards':'Quirks';
+				if (documentMode != 'Standards' ) {
+					console.log( 'You are in ' + documentMode + ' mode.' );
+					document.body.className += ' ' + 'is-quirks-mode';
+				}
+			} catch( e ) { }
+		} );
+	</script>
+	<?php
+}
+add_action( 'admin_print_scripts-post.php', 'gutenberg_detect_quirks_mode' );
+add_action( 'admin_print_scripts-post-new.php', 'gutenberg_detect_quirks_mode' );
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 0cd4a03af0dfe..ca3785d6a5960 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -103,6 +103,13 @@
 		@supports (position: sticky) {
 			flex-basis: 100%;
 		}
+
+		// This is an ugly hack that applies a table display to the main editing canvas when the browser is
+		// detected to be in quirks mode. Without this hack in quirks mode, the flexbox rules we use to size
+		// the various elements do not work, causing overlap.
+		.is-quirks-mode & {
+			display: table;
+		}
 	}
 
 	.edit-post-layout__metaboxes {