From e08b6b0fefcbc30532f567bb558a8e34c126c503 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 9 Nov 2021 17:53:12 +1100 Subject: [PATCH 1/6] Fix submenu justification and spacer orientation. --- packages/block-library/src/navigation/edit/index.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index cea0281d33e916..f89828d404d263 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -105,11 +105,19 @@ function Navigation( { const { itemsJustification, openSubmenusOnClick, - orientation, overlayMenu, showSubmenuIcon, + layout: { justifyContent, orientation } = {}, } = attributes; + // Spacer block needs orientation from context. This is a patch until + // https://github.com/WordPress/gutenberg/issues/36197 is addressed. + useEffect( () => { + if ( orientation ) { + setAttributes( { orientation } ); + } + }, [ orientation ] ); + const [ areaMenu, setAreaMenu ] = useEntityProp( 'root', 'navigationArea', @@ -191,6 +199,8 @@ function Navigation( { className: classnames( className, { [ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification, 'is-vertical': orientation === 'vertical', + 'items-justified-right': justifyContent === 'right', + 'items-justified-space-between': justifyContent === 'space-between', 'is-responsive': 'never' !== overlayMenu, 'has-text-color': !! textColor.color || !! textColor?.class, [ getColorClassName( From e64dd662b8c5df06157ee4bb28db9ea8cc20d39e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 10 Nov 2021 11:31:03 +1100 Subject: [PATCH 2/6] Add back justification classes in the front end. --- packages/block-library/src/navigation/index.php | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index bbaa8794be9855..6b0187a2f90002 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -179,12 +179,24 @@ function( $block ) { if ( empty( $inner_blocks ) ) { return ''; } + + // Restore legacy classnames for submenu positioning. + $layout_class = ''; + if ( isset( $attributes['layout']['justifyContent'] ) ) { + if ( 'right' === $attributes['layout']['justifyContent']) { + $layout_class .= 'items-justified-right'; + } elseif ( 'space-between' === $attributes['layout']['justifyContent']) { + $layout_class .= 'items-justified-space-between'; + } + } + $colors = block_core_navigation_build_css_colors( $attributes ); $font_sizes = block_core_navigation_build_css_font_sizes( $attributes ); $classes = array_merge( $colors['css_classes'], $font_sizes['css_classes'], - $is_responsive_menu ? array( 'is-responsive' ) : array() + $is_responsive_menu ? array( 'is-responsive' ) : array(), + $layout_class ? array( $layout_class ) : array() ); $inner_blocks_html = ''; From 65926046e05ee0b0e232fec72bd501e0ccc67f3d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 10 Nov 2021 11:35:24 +1100 Subject: [PATCH 3/6] Add default orientation for Spacer. --- packages/block-library/src/navigation/edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index f89828d404d263..a009ba94ce2972 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -107,7 +107,7 @@ function Navigation( { openSubmenusOnClick, overlayMenu, showSubmenuIcon, - layout: { justifyContent, orientation } = {}, + layout: { justifyContent, orientation = 'horizontal' } = {}, } = attributes; // Spacer block needs orientation from context. This is a patch until From e2b0c540d5d0f85aa99f08516a61bb48b90a8353 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 10 Nov 2021 11:48:56 +1100 Subject: [PATCH 4/6] Remove legacy attributes and styles. --- .../src/navigation/edit/index.js | 3 -- .../block-library/src/navigation/editor.scss | 30 +------------------ 2 files changed, 1 insertion(+), 32 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index a009ba94ce2972..8240065d07f696 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -103,7 +103,6 @@ function Navigation( { customAppender: CustomAppender = null, } ) { const { - itemsJustification, openSubmenusOnClick, overlayMenu, showSubmenuIcon, @@ -197,8 +196,6 @@ function Navigation( { const blockProps = useBlockProps( { ref: navRef, className: classnames( className, { - [ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification, - 'is-vertical': orientation === 'vertical', 'items-justified-right': justifyContent === 'right', 'items-justified-space-between': justifyContent === 'space-between', 'is-responsive': 'never' !== overlayMenu, diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index ed5c91fca3db52..489c028542b509 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -282,7 +282,6 @@ $color-control-label-height: 20px; } // Hide entirely when vertical. - .is-vertical.is-selected &, .wp-block-navigation.is-selected .is-small &, .wp-block-navigation.is-selected .is-medium & { display: none; @@ -320,19 +319,12 @@ $color-control-label-height: 20px; // Show stacked for the vertical navigation, or small placeholders. .is-small &, - .is-medium &, - .is-vertical & { + .is-medium & { .wp-block-navigation-placeholder__actions { flex-direction: column; } } - // Both selected and vertical. - .is-selected.is-vertical & { - display: inline-flex; // This makes the white box not take up all available space. - padding: $grid-unit-15; - } - .wp-block-navigation-placeholder__icon { margin-right: $grid-unit-15; height: $button-size; // Prevents jumpiness. @@ -353,11 +345,6 @@ $color-control-label-height: 20px; margin-right: $grid-unit-05; } - .is-vertical & { - margin-bottom: $grid-unit-05; - margin-left: 0; - } - // Show only in big placeholders. display: none; .is-large & { @@ -366,21 +353,6 @@ $color-control-label-height: 20px; } } -// When block is vertical. -.is-vertical .wp-block-navigation-placeholder, -.is-vertical .wp-block-navigation-placeholder__preview, -.is-vertical .wp-block-navigation-placeholder__controls { - min-height: - $icon-size + - ( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3; -} - -.is-vertical .wp-block-navigation-placeholder__preview, -.is-vertical .wp-block-navigation-placeholder__controls { - flex-direction: column; - align-items: flex-start; -} - .wp-block-navigation-placeholder__actions { display: flex; font-size: $default-font-size; From 3e3b6769058081df85c26267ed9f6d1f70ee2f6b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 11 Nov 2021 11:43:59 +1100 Subject: [PATCH 5/6] Fix php lint errors. --- packages/block-library/src/navigation/index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 6b0187a2f90002..845a93db3b4b3a 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -183,9 +183,9 @@ function( $block ) { // Restore legacy classnames for submenu positioning. $layout_class = ''; if ( isset( $attributes['layout']['justifyContent'] ) ) { - if ( 'right' === $attributes['layout']['justifyContent']) { + if ( 'right' === $attributes['layout']['justifyContent'] ) { $layout_class .= 'items-justified-right'; - } elseif ( 'space-between' === $attributes['layout']['justifyContent']) { + } elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) { $layout_class .= 'items-justified-space-between'; } } From ef87465f971029a3a8f18094782d8b645ff81daa Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 11 Nov 2021 14:19:16 +1100 Subject: [PATCH 6/6] Mark orientation change as not persistent. --- .../src/navigation/edit/index.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 8240065d07f696..e51aa40a9677ed 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -109,14 +109,6 @@ function Navigation( { layout: { justifyContent, orientation = 'horizontal' } = {}, } = attributes; - // Spacer block needs orientation from context. This is a patch until - // https://github.com/WordPress/gutenberg/issues/36197 is addressed. - useEffect( () => { - if ( orientation ) { - setAttributes( { orientation } ); - } - }, [ orientation ] ); - const [ areaMenu, setAreaMenu ] = useEntityProp( 'root', 'navigationArea', @@ -157,7 +149,11 @@ function Navigation( { [ clientId ] ); const hasExistingNavItems = !! innerBlocks.length; - const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore ); + const { + replaceInnerBlocks, + selectBlock, + __unstableMarkNextChangeAsNotPersistent, + } = useDispatch( blockEditorStore ); const [ hasSavedUnsavedInnerBlocks, @@ -227,6 +223,15 @@ function Navigation( { ] = useState(); const [ detectedOverlayColor, setDetectedOverlayColor ] = useState(); + // Spacer block needs orientation from context. This is a patch until + // https://github.com/WordPress/gutenberg/issues/36197 is addressed. + useEffect( () => { + if ( orientation ) { + __unstableMarkNextChangeAsNotPersistent(); + setAttributes( { orientation } ); + } + }, [ orientation ] ); + useEffect( () => { if ( ! enableContrastChecking ) { return;