From e9c3a62c23933c4f92dbccae20fa3ade3f27fd08 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 24 Mar 2020 11:58:07 +0200 Subject: [PATCH 1/5] wpcom block editor: hide new Gutenberg preview button --- apps/wpcom-block-editor/src/wpcom/editor.js | 5 +++++ .../src/wpcom/features/legacy-preview-button.scss | 14 ++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss diff --git a/apps/wpcom-block-editor/src/wpcom/editor.js b/apps/wpcom-block-editor/src/wpcom/editor.js index d46e0a54a3826..fa0765089626b 100644 --- a/apps/wpcom-block-editor/src/wpcom/editor.js +++ b/apps/wpcom-block-editor/src/wpcom/editor.js @@ -5,3 +5,8 @@ import './features/deprecate-coblocks-buttons'; import './features/fix-block-invalidation-errors'; import './features/reorder-block-categories'; import './features/tracking'; + +/** + * Style dependencies + */ +import './features/legacy-preview-button.scss'; diff --git a/apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss b/apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss new file mode 100644 index 0000000000000..2ee642b8bc5ff --- /dev/null +++ b/apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss @@ -0,0 +1,14 @@ +/** + * Enforces simple preview to be always visible and hide more complex preview + * @TODO: backwards compatibility with older Gutenberg + */ +@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; + } +} From d7972bd1b42627af7efe58984c46c03a48cafc65 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 24 Mar 2020 13:06:33 +0200 Subject: [PATCH 2/5] Import new file via editor.scss --- apps/wpcom-block-editor/src/wpcom/editor.js | 5 ----- apps/wpcom-block-editor/src/wpcom/editor.scss | 1 + 2 files changed, 1 insertion(+), 5 deletions(-) create mode 100644 apps/wpcom-block-editor/src/wpcom/editor.scss diff --git a/apps/wpcom-block-editor/src/wpcom/editor.js b/apps/wpcom-block-editor/src/wpcom/editor.js index fa0765089626b..d46e0a54a3826 100644 --- a/apps/wpcom-block-editor/src/wpcom/editor.js +++ b/apps/wpcom-block-editor/src/wpcom/editor.js @@ -5,8 +5,3 @@ import './features/deprecate-coblocks-buttons'; import './features/fix-block-invalidation-errors'; import './features/reorder-block-categories'; import './features/tracking'; - -/** - * Style dependencies - */ -import './features/legacy-preview-button.scss'; diff --git a/apps/wpcom-block-editor/src/wpcom/editor.scss b/apps/wpcom-block-editor/src/wpcom/editor.scss new file mode 100644 index 0000000000000..fb8bc2b72a2c4 --- /dev/null +++ b/apps/wpcom-block-editor/src/wpcom/editor.scss @@ -0,0 +1 @@ +@import './features/legacy-preview-button'; From 9a71896cabba1aa92a3f2c892c69641e4e253fa1 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 24 Mar 2020 13:12:00 +0200 Subject: [PATCH 3/5] Move to calypso folder --- apps/wpcom-block-editor/src/calypso/editor.scss | 4 ++++ .../{wpcom => calypso}/features/legacy-preview-button.scss | 0 2 files changed, 4 insertions(+) rename apps/wpcom-block-editor/src/{wpcom => calypso}/features/legacy-preview-button.scss (100%) diff --git a/apps/wpcom-block-editor/src/calypso/editor.scss b/apps/wpcom-block-editor/src/calypso/editor.scss index a9dee9775f5c0..fdbc2c1d9a3fa 100644 --- 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/wpcom/features/legacy-preview-button.scss b/apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss similarity index 100% rename from apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss rename to apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss From 74bd71115e3a803b3986318fa92e8dc0cf55b32c Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 24 Mar 2020 13:46:34 +0200 Subject: [PATCH 4/5] Remove leftover css file --- apps/wpcom-block-editor/src/wpcom/editor.scss | 1 - 1 file changed, 1 deletion(-) delete mode 100644 apps/wpcom-block-editor/src/wpcom/editor.scss diff --git a/apps/wpcom-block-editor/src/wpcom/editor.scss b/apps/wpcom-block-editor/src/wpcom/editor.scss deleted file mode 100644 index fb8bc2b72a2c4..0000000000000 --- a/apps/wpcom-block-editor/src/wpcom/editor.scss +++ /dev/null @@ -1 +0,0 @@ -@import './features/legacy-preview-button'; From 073c7aaec86691bd0b3e6a944b0acb764f523f72 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 24 Mar 2020 17:55:53 +0200 Subject: [PATCH 5/5] Add docs'n'links --- .../src/calypso/features/legacy-preview-button.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 index 2ee642b8bc5ff..c46f27ce8856a 100644 --- a/apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss +++ b/apps/wpcom-block-editor/src/calypso/features/legacy-preview-button.scss @@ -1,6 +1,10 @@ /** - * Enforces simple preview to be always visible and hide more complex preview - * @TODO: backwards compatibility with older Gutenberg + * 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