From 678d0efb10a0817733b814a68240174e6dcfaf48 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 28 Jun 2021 16:58:50 +0100 Subject: [PATCH 1/4] Experiment with useSetting to control orientation --- packages/block-library/src/navigation/edit.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index d4b6cd57b497b5..fd821396107ed8 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -15,6 +15,7 @@ import { BlockControls, useBlockProps, store as blockEditorStore, + useSetting, } from '@wordpress/block-editor'; import { useDispatch, withSelect, withDispatch } from '@wordpress/data'; import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components'; @@ -63,12 +64,20 @@ function Navigation( { false ); + const possibleOrientation = attributes.orientation || 'horizontal'; + + const allowedOrientations = useSetting( 'layout.orientations' ); + + const blockOrientation = allowedOrientations.includes( possibleOrientation ) + ? possibleOrientation + : 'vertical'; + const { selectBlock } = useDispatch( blockEditorStore ); const blockProps = useBlockProps( { className: classnames( className, { [ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification, - 'is-vertical': attributes.orientation === 'vertical', + 'is-vertical': blockOrientation === 'vertical', 'is-responsive': attributes.isResponsive, } ), } ); @@ -85,7 +94,7 @@ function Navigation( { }, { allowedBlocks: ALLOWED_BLOCKS, - orientation: attributes.orientation || 'horizontal', + orientation: blockOrientation, renderAppender: ( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants ) || @@ -120,7 +129,7 @@ function Navigation( { } const justifyAllowedControls = - attributes.orientation === 'vertical' + blockOrientation === 'vertical' ? [ 'left', 'center', 'right' ] : [ 'left', 'center', 'right', 'space-between' ]; From f29565f9b6d2f319dd57378d39b71b2ecdcf6043 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 29 Jun 2021 09:55:36 +0100 Subject: [PATCH 2/4] Use predefined orientation settings --- packages/block-library/src/navigation/edit.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index fd821396107ed8..33ffca4adf94e2 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -44,6 +44,8 @@ const LAYOUT = { alignments: [], }; +const DEFAULT_ORIENTATION = 'vertical'; + function Navigation( { selectedBlockHasDescendants, attributes, @@ -64,13 +66,20 @@ function Navigation( { false ); - const possibleOrientation = attributes.orientation || 'horizontal'; + const possibleOrientation = attributes.orientation || DEFAULT_ORIENTATION; - const allowedOrientations = useSetting( 'layout.orientations' ); + const allowedOrientations = Object.entries( + useSetting( 'layout.orientations' ) + ).reduce( ( allowed, curr ) => { + if ( true === curr[ 1 ] ) { + allowed.push( curr[ 0 ] ); + } + return allowed; + }, [] ); const blockOrientation = allowedOrientations.includes( possibleOrientation ) ? possibleOrientation - : 'vertical'; + : DEFAULT_ORIENTATION; const { selectBlock } = useDispatch( blockEditorStore ); From af24321be2e5f15dd0c15cb9ae9fbf8917427c2a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 29 Jun 2021 10:05:22 +0100 Subject: [PATCH 3/4] Allow for conditional default orientation --- packages/block-library/src/navigation/edit.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 33ffca4adf94e2..7f2b1378dce576 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -44,8 +44,6 @@ const LAYOUT = { alignments: [], }; -const DEFAULT_ORIENTATION = 'vertical'; - function Navigation( { selectedBlockHasDescendants, attributes, @@ -66,8 +64,6 @@ function Navigation( { false ); - const possibleOrientation = attributes.orientation || DEFAULT_ORIENTATION; - const allowedOrientations = Object.entries( useSetting( 'layout.orientations' ) ).reduce( ( allowed, curr ) => { @@ -77,9 +73,24 @@ function Navigation( { return allowed; }, [] ); + let defaultOrientation; + + if ( allowedOrientations.includes( 'vertical' ) ) { + defaultOrientation = 'vertical'; + } else if ( + ! allowedOrientations.includes( 'vertical' ) && + allowedOrientations.includes( 'horizontal' ) + ) { + defaultOrientation = 'horizontal'; + } else { + defaultOrientation = 'vertical'; + } + + const possibleOrientation = attributes.orientation || defaultOrientation; + const blockOrientation = allowedOrientations.includes( possibleOrientation ) ? possibleOrientation - : DEFAULT_ORIENTATION; + : defaultOrientation; const { selectBlock } = useDispatch( blockEditorStore ); From 02fee65648590ed4a8f2c728d8237f570290d8c6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 29 Jun 2021 10:24:56 +0100 Subject: [PATCH 4/4] =?UTF-8?q?Use=20constants=20because=20I=20can?= =?UTF-8?q?=E2=80=99t=20type=20or=20spell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/block-library/src/navigation/edit.js | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 7f2b1378dce576..3521b49f56882a 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -44,6 +44,9 @@ const LAYOUT = { alignments: [], }; +const ORIENTATION_VERTICAL = 'vertical'; +const ORIENTATION_HORIZONTAL = 'horizontal'; + function Navigation( { selectedBlockHasDescendants, attributes, @@ -64,26 +67,29 @@ function Navigation( { false ); - const allowedOrientations = Object.entries( - useSetting( 'layout.orientations' ) - ).reduce( ( allowed, curr ) => { - if ( true === curr[ 1 ] ) { - allowed.push( curr[ 0 ] ); - } - return allowed; - }, [] ); + const orientationSettings = useSetting( 'layout.orientations' ) || {}; + + const allowedOrientations = Object.entries( orientationSettings ).reduce( + ( allowed, curr ) => { + if ( true === curr[ 1 ] ) { + allowed.push( curr[ 0 ] ); + } + return allowed; + }, + [] + ); let defaultOrientation; - if ( allowedOrientations.includes( 'vertical' ) ) { - defaultOrientation = 'vertical'; + if ( allowedOrientations.includes( ORIENTATION_VERTICAL ) ) { + defaultOrientation = ORIENTATION_VERTICAL; } else if ( - ! allowedOrientations.includes( 'vertical' ) && - allowedOrientations.includes( 'horizontal' ) + ! allowedOrientations.includes( ORIENTATION_VERTICAL ) && + allowedOrientations.includes( ORIENTATION_HORIZONTAL ) ) { - defaultOrientation = 'horizontal'; + defaultOrientation = ORIENTATION_HORIZONTAL; } else { - defaultOrientation = 'vertical'; + defaultOrientation = ORIENTATION_VERTICAL; } const possibleOrientation = attributes.orientation || defaultOrientation; @@ -97,7 +103,7 @@ function Navigation( { const blockProps = useBlockProps( { className: classnames( className, { [ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification, - 'is-vertical': blockOrientation === 'vertical', + 'is-vertical': blockOrientation === ORIENTATION_VERTICAL, 'is-responsive': attributes.isResponsive, } ), } ); @@ -149,7 +155,7 @@ function Navigation( { } const justifyAllowedControls = - blockOrientation === 'vertical' + blockOrientation === ORIENTATION_VERTICAL ? [ 'left', 'center', 'right' ] : [ 'left', 'center', 'right', 'space-between' ];