Skip to content

Commit

Permalink
Show justification controls for vertical variant
Browse files Browse the repository at this point in the history
- Don't limit controls to show only on horizontal
- This enables controls to show for both horiz and vert
- The vertical CSS specifies a block so will require tweaking
- Filter out space-between from vertical controls
  • Loading branch information
mkaz authored and jasmussen committed Mar 30, 2021
1 parent 169a0ca commit a9e44c9
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 13 deletions.
29 changes: 16 additions & 13 deletions packages/block-library/src/navigation/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ function Navigation( {
updateInnerBlocks,
className,
hasSubmenuIndicatorSetting = true,
hasItemJustificationControls = attributes.orientation === 'horizontal',
} ) {
const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
! hasExistingNavItems
Expand Down Expand Up @@ -108,21 +107,25 @@ function Navigation( {
);
}

const justifyAllowedControls =
attributes.orientation === 'vertical'
? [ 'left', 'center', 'right' ]
: [ 'left', 'center', 'right', 'space-between' ];

return (
<>
<BlockControls>
{ hasItemJustificationControls && (
<JustifyToolbar
value={ attributes.itemsJustification }
onChange={ ( value ) =>
setAttributes( { itemsJustification: value } )
}
popoverProps={ {
position: 'bottom right',
isAlternate: true,
} }
/>
) }
<JustifyToolbar
value={ attributes.itemsJustification }
allowedControls={ justifyAllowedControls }
onChange={ ( value ) =>
setAttributes( { itemsJustification: value } )
}
popoverProps={ {
position: 'bottom right',
isAlternate: true,
} }
/>
<ToolbarGroup>{ navigatorToolbarButton }</ToolbarGroup>
</BlockControls>
{ navigatorModal }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
flex-wrap: wrap;

// Vertical layout
// TODO: What to todo here?
.is-vertical & {
display: block;
}
Expand Down

0 comments on commit a9e44c9

Please sign in to comment.