wpcom block editor: hide new Gutenberg preview button (#40388)

* wpcom block editor: hide new Gutenberg preview button * Import new file via editor.scss * Move to calypso folder * Remove leftover css file * Add docs'n'links
Automattic · Mar 24, 2020 · 7b831d2 · 7b831d2
1 parent dfe7550
commit 7b831d2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/apps/wpcom-block-editor/src/calypso/editor.scss b/apps/wpcom-block-editor/src/calypso/editor.scss
@@ -1 +1,5 @@
 @import './features/iframe-bridge-server';
+
+// Temporary load this here too to get it work on Atomic sites at least via Calypso
+// Will be moved to wpcom folder unless fixed otherwise
+@import './features/legacy-preview-button';
diff --git a/apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss b/apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss
@@ -0,0 +1,18 @@
+/**
+ * Enforces simple preview button to be always visible and hide more complex preview that was introduced in Gutenberg 7.7
+ *
+ * Doesn't affect editors older than 7.7
+ *
+ * This can be removed once we support scaling down CSS to the new preview
+ * @link https://github.com/Automattic/wp-calypso/issues/40401
+ */
+@media ( min-width: 600px ) {
+	// Normally visible on mobile only, make it always visible
+	.editor-post-preview {
+		display: inline-flex;
+	}
+	// Normally visible on desktops, make it always hidden
+	.editor-post-preview__dropdown {
+		display: none;
+	}
+}