From 9036d3b2297004c8b9217b302605f5ac740363bb Mon Sep 17 00:00:00 2001 From: Yan Sern Date: Mon, 23 Mar 2020 18:42:53 +0800 Subject: [PATCH] Fixed gutenberg header layout issues on mobile & tablet. Be more specific with fixes. Ensure our custom inserter button on page editor also has a blue background just like in newer Gutenberg. Proper overrides for close button. Proper fix for whitespace above mobile header. Revert old overrides which I didn't fully understand the context. Should be top: 0. Balance out side padding. Hide close button label >= 960px to make room for others, hide toc button, apply padding balancing to all editor scenarios. Fix regression on header whitespace. --- .../post-content-block-appender.js | 8 +++++- .../dotcom-fse/editor/style.scss | 7 ++++++ .../plugins/close-button-override/style.scss | 16 +++++++++++- .../features/iframe-bridge-server.scss | 25 +++++++++++++++++++ 4 files changed, 54 insertions(+), 2 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/block-inserter/post-content-block-appender.js b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/block-inserter/post-content-block-appender.js index d19d452227388..7f49b123fa688 100644 --- a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/block-inserter/post-content-block-appender.js +++ b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/block-inserter/post-content-block-appender.js @@ -19,8 +19,14 @@ const PostContentBlockAppender = compose( }; } ) )( ( { rootClientId, showInserter } ) => { + const inserterToggleProps = { isPrimary: true }; return ( - + ); } ); diff --git a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/style.scss b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/style.scss index 61e7b75871d4a..f5b2e82ac1904 100644 --- a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/editor/style.scss @@ -94,3 +94,10 @@ margin: 0; } } + +@media ( max-width: 600px ) { + // Table of contents button is not displayed in mobile view. + .components-dropdown.table-of-contents { + display: none; + } +} diff --git a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/plugins/close-button-override/style.scss b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/plugins/close-button-override/style.scss index fe206c4eed65a..e996749fa60b8 100644 --- a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/plugins/close-button-override/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/plugins/close-button-override/style.scss @@ -15,7 +15,12 @@ display: flex; align-items: center; padding: 9px 10px; - margin-left: -8px; + // Close button override doesn't need the extraneous left-padding + // provided by .edit-post-header__toolbar from WP. So here we + // offset the -24px padding and then restore the 24px padding + // for other toolbar buttons that comes after this button. + margin-left: -24px; + margin-right: 24px; border: none; border-right: 1px solid #e2e4e7; @@ -46,6 +51,15 @@ .close-button-override-thin { display: flex; } + } + + // Back button is not displayed in mobile & tablet view. + @media ( max-width: 782px ) { + display: none; + } + + // Hide label to make room for others + @media ( max-width: 960px ) { .close-button-override__label { display: none; } diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss index 3c2d91b1670af..ca6047aed689c 100644 --- a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss +++ b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss @@ -9,12 +9,26 @@ } } +// For Gutenberg < 7.7 @media ( min-width: 600px ) { body.is-iframed.is-fullscreen-mode .edit-post-header { top: 0; } } +// For Gutenberg >= 7.7 +// 782px is $break-medium in Gutenberg which is +// the starting breakpoint for tablet view. +@media ( max-width: 782px ) { + // In non-iframed version, top: 46px is provided to accommodate #wpadminbar. + // On fullscreen mode, #wpadminbar is visible on tablet & mobile voew because + // fullscreen mode actually don't exists on tablet & mobile view. + // See: https://github.com/WordPress/gutenberg/pull/13425 + body.is-iframed.is-fullscreen-mode .block-editor-editor-skeleton { + top: 0; + } +} + body.is-fullscreen-mode { .edit-post-editor-regions, .components-editor-notices__dismissible { @@ -31,3 +45,14 @@ body.is-fullscreen-mode { .components-notice-list { z-index: 29; // Ensure notices are placed behind the editor header (z-index: 30). } + +// The parent element .edit-post-header__toolbar provides +// a padding-left of 24px. However, the right side of the header +// only has a padding-right of 16px. +// +// To make the toolbar buttons look more balanced, an left offset of -8px +// is added to this custom block inserter button (24px - 16px = 8px). This +// -8px offset also contributes in solving spacing issue in mobile/tablet view. +.block-editor-inserter__toggle { + margin-left: -8px; +}