From 5ba0ba522665670edef2ed7d9aa4f8eae98a6560 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 6 Nov 2019 16:48:19 +0000 Subject: [PATCH 1/6] Fix to allow overflow scroll when many horiztonal nav items --- packages/block-library/src/navigation-menu/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/block-library/src/navigation-menu/style.scss b/packages/block-library/src/navigation-menu/style.scss index 3c2222ef59f25..3c8bae816e42a 100644 --- a/packages/block-library/src/navigation-menu/style.scss +++ b/packages/block-library/src/navigation-menu/style.scss @@ -117,3 +117,13 @@ } } + + +/** + * Editor Only Styles + */ +.block-editor-block-list__block-edit { + .wp-block-navigation-menu { + overflow: auto; // allow overflowing items to cause scroll + } +} From de302bb71e66ac445af1bd71239de1704128e8aa Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 6 Nov 2019 16:53:15 +0000 Subject: [PATCH 2/6] Limit to x axis only --- packages/block-library/src/navigation-menu/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-menu/style.scss b/packages/block-library/src/navigation-menu/style.scss index 3c8bae816e42a..21e5a92557746 100644 --- a/packages/block-library/src/navigation-menu/style.scss +++ b/packages/block-library/src/navigation-menu/style.scss @@ -124,6 +124,6 @@ */ .block-editor-block-list__block-edit { .wp-block-navigation-menu { - overflow: auto; // allow overflowing items to cause scroll + overflow-x: auto; // allow overflowing items to cause scroll } } From 4a1f457db0d0374087b72cb2a7ac28a102549c79 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Nov 2019 09:17:21 +0000 Subject: [PATCH 3/6] Updates to make space on RHS for item block toolbars and block appender --- packages/block-library/src/navigation-menu/editor.scss | 9 ++++++++- packages/block-library/src/navigation-menu/style.scss | 10 ---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss index d23df6cd6c6f3..bb52bb5974240 100644 --- a/packages/block-library/src/navigation-menu/editor.scss +++ b/packages/block-library/src/navigation-menu/editor.scss @@ -2,10 +2,17 @@ // @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block. // When that happens, leverage that instead of the following overrides. [data-type="core/navigation-menu"] { + + // Allow overflowing items to scroll container + .wp-block-navigation-menu { + overflow-x: auto; + } + // 1. Reset margins on immediate innerblocks container. .wp-block-navigation-menu .block-editor-inner-blocks > .block-editor-block-list__layout { margin-left: 0; margin-right: 0; + padding-right: 25%; } // 2. Remove paddings on subsequent immediate children. @@ -13,7 +20,7 @@ width: auto; padding-left: 0; padding-right: 0; - margin-left: 0; // something + margin-left: 0; } // 3. Remove margins on subsequent Edit container. diff --git a/packages/block-library/src/navigation-menu/style.scss b/packages/block-library/src/navigation-menu/style.scss index 21e5a92557746..3c2222ef59f25 100644 --- a/packages/block-library/src/navigation-menu/style.scss +++ b/packages/block-library/src/navigation-menu/style.scss @@ -117,13 +117,3 @@ } } - - -/** - * Editor Only Styles - */ -.block-editor-block-list__block-edit { - .wp-block-navigation-menu { - overflow-x: auto; // allow overflowing items to cause scroll - } -} From e5b4ab8325b4a1a36b614dab8d9b38c8fbf0bfe1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Nov 2019 10:01:44 +0000 Subject: [PATCH 4/6] Updates to only add RHS padding if scroll is present Now detects hoz scroll and adds suitable class which can be used to hook CSS styles for when there is hoz scrolling. --- .../block-library/src/navigation-menu/edit.js | 21 ++++++++++++++++++- .../src/navigation-menu/editor.scss | 6 +++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 7bba746cd0833..a2eb65c115b8e 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -9,6 +9,9 @@ import classnames from 'classnames'; import { useMemo, useEffect, + useLayoutEffect, + useRef, + useState, } from '@wordpress/element'; import { InnerBlocks, @@ -45,6 +48,21 @@ function NavigationMenu( { setTextColor, setAttributes, } ) { + const navMenuRef = useRef(); + const [ hasScrollX, setHasScrollX ] = useState( false ); + + useLayoutEffect( () => { + if ( navMenuRef && navMenuRef.current ) { + const navMenu = navMenuRef.current; + + if ( navMenu.scrollWidth > navMenu.clientWidth ) { + setHasScrollX( true ); + } else { + setHasScrollX( false ); + } + } + } ); + const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId ); const defaultMenuItems = useMemo( () => { @@ -79,6 +97,7 @@ function NavigationMenu( { 'wp-block-navigation-menu', { 'has-text-color': textColor.color, 'has-background-color': backgroundColor.color, + 'has-scroll-x': hasScrollX, [ attributes.backgroundColorCSSClass ]: attributes && attributes.backgroundColorCSSClass, [ attributes.textColorCSSClass ]: attributes && attributes.textColorCSSClass, } @@ -147,7 +166,7 @@ function NavigationMenu( { -
+
{ isRequesting && <> { __( 'Loading Navigation…' ) } } { pages && .block-editor-block-list__layout { margin-left: 0; margin-right: 0; - padding-right: 25%; } // 2. Remove paddings on subsequent immediate children. From 582de84a6f969ac86e7cdc268e01040912891451 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 8 Nov 2019 09:41:18 +0000 Subject: [PATCH 5/6] Refactor to optimise scroll detection Addresses https://github.com/WordPress/gutenberg/pull/18336#pullrequestreview-313301858 --- .../block-library/src/navigation-menu/edit.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index a2eb65c115b8e..910d08f50e596 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -50,18 +50,16 @@ function NavigationMenu( { } ) { const navMenuRef = useRef(); const [ hasScrollX, setHasScrollX ] = useState( false ); + const clientWidth = navMenuRef.current ? navMenuRef.current.clientWidth : 0; + const scrollWidth = navMenuRef.current ? navMenuRef.current.scrollWidth : 0; useLayoutEffect( () => { - if ( navMenuRef && navMenuRef.current ) { - const navMenu = navMenuRef.current; - - if ( navMenu.scrollWidth > navMenu.clientWidth ) { - setHasScrollX( true ); - } else { - setHasScrollX( false ); - } + if ( scrollWidth > clientWidth ) { + setHasScrollX( true ); + } else { + setHasScrollX( false ); } - } ); + }, [ clientWidth, scrollWidth ] ); const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId ); const defaultMenuItems = useMemo( From 01383ce8fba4a5afc77e94eec4a1efd6df35953b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 8 Nov 2019 10:19:12 +0000 Subject: [PATCH 6/6] Fixes clipped scrollbar using artifical padding technique --- .../block-library/src/navigation-menu/edit.js | 16 ++++++++------- .../src/navigation-menu/editor.scss | 20 +++++++++++++++---- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js index 910d08f50e596..388ef39e7f91a 100644 --- a/packages/block-library/src/navigation-menu/edit.js +++ b/packages/block-library/src/navigation-menu/edit.js @@ -48,10 +48,10 @@ function NavigationMenu( { setTextColor, setAttributes, } ) { - const navMenuRef = useRef(); + const scrollContainerRef = useRef(); const [ hasScrollX, setHasScrollX ] = useState( false ); - const clientWidth = navMenuRef.current ? navMenuRef.current.clientWidth : 0; - const scrollWidth = navMenuRef.current ? navMenuRef.current.scrollWidth : 0; + const clientWidth = scrollContainerRef.current ? scrollContainerRef.current.clientWidth : 0; + const scrollWidth = scrollContainerRef.current ? scrollContainerRef.current.scrollWidth : 0; useLayoutEffect( () => { if ( scrollWidth > clientWidth ) { @@ -164,16 +164,18 @@ function NavigationMenu( { -
- { isRequesting && <> { __( 'Loading Navigation…' ) } } - { pages && +
+
+ { isRequesting && <> { __( 'Loading Navigation…' ) } } + { pages && - } + } +
); diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss index 9db9223abd88d..7d07ce9b5086f 100644 --- a/packages/block-library/src/navigation-menu/editor.scss +++ b/packages/block-library/src/navigation-menu/editor.scss @@ -4,13 +4,25 @@ [data-type="core/navigation-menu"] { // Allow overflowing items to scroll container - .wp-block-navigation-menu { + .wp-block-navigation-menu > .wp-block-navigation-menu__scroll-container { + // if X is "auto" or "scroll" then spec says Y must also assume this value + // therefore the Y overflow is effectively "clipped" meaning that the toolbar + // of child Blocks cannot display correctly. We "fix" this below. + // Note: as Y will be "auto" anyway we need to hide the scroll bars + // created by the artificial spacing. overflow-x: auto; + overflow-y: hidden; // required for FF + + // Hack: create artificial overflow space within the element which has its Y + // value clipped (see above). This value is equal to that of the positioned + // toolbar element (usually `top: -51px`). + padding-top: 51px; + margin-top: -51px; } - // Allow more space on RHS when scroll is present - .wp-block-navigation-menu.has-scroll-x .block-editor-block-list__layout { - padding-right: 25%; + [data-type="core/navigation-menu-item"] > .block-editor-block-list__block-edit .block-editor-block-contextual-toolbar { + // Hack - see above. Reset top position value. + top: 0; } // 1. Reset margins on immediate innerblocks container.