Skip to content

Commit

Permalink
Navigation Block: Add Color Options for Submenus
Browse files Browse the repository at this point in the history
Closes #29963
  • Loading branch information
George Hotelling committed May 25, 2021
1 parent c7e3116 commit a4fb4b8
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 11 deletions.
4 changes: 4 additions & 0 deletions packages/block-library/src/navigation-link/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@
"customTextColor",
"backgroundColor",
"customBackgroundColor",
"overlayTextColor",
"customOverlayTextColor",
"overlayBackgroundColor",
"customOverlayBackgroundColor",
"fontSize",
"customFontSize",
"showSubmenuIcon",
Expand Down
49 changes: 44 additions & 5 deletions packages/block-library/src/navigation-link/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,14 @@ export default function NavigationLinkEdit( {
url,
opensInNewTab,
};
const { textColor, backgroundColor, style, showSubmenuIcon } = context;
const {
textColor,
backgroundColor,
overlayTextColor,
overlayBackgroundColor,
style,
showSubmenuIcon,
} = context;
const { saveEntityRecord } = useDispatch( coreStore );
const { insertBlock } = useDispatch( blockEditorStore );
const [ isLinkOpen, setIsLinkOpen ] = useState( false );
Expand All @@ -244,6 +251,7 @@ export default function NavigationLinkEdit( {

const {
isAtMaxNesting,
isTopLevelLink,
isParentOfSelectedBlock,
isImmediateParentOfSelectedBlock,
hasDescendants,
Expand All @@ -269,6 +277,8 @@ export default function NavigationLinkEdit( {
isAtMaxNesting:
getBlockParentsByBlockName( clientId, name ).length >=
MAX_NESTING,
isTopLevelLink:
getBlockParentsByBlockName( clientId, name ).length === 0,
isParentOfSelectedBlock: hasSelectedInnerBlock(
clientId,
true
Expand Down Expand Up @@ -380,17 +390,25 @@ export default function NavigationLinkEdit( {
};
}

const textColorForNesting = isTopLevelLink
? textColor
: overlayTextColor || textColor;
const bgColorForNesting = isTopLevelLink
? backgroundColor
: overlayBackgroundColor || backgroundColor;

const blockProps = useBlockProps( {
ref: listItemRef,
className: classnames( {
'is-editing': isSelected || isParentOfSelectedBlock,
'is-dragging-within': isDraggingWithin,
'has-link': !! url,
'has-child': hasDescendants,
'has-text-color': !! textColor || !! style?.color?.text,
[ `has-${ textColor }-color` ]: !! textColor,
'has-background': !! backgroundColor || !! style?.color?.background,
[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
'has-text-color': !! textColorForNesting || !! style?.color?.text,
[ `has-${ textColorForNesting }-color` ]: !! textColorForNesting,
'has-background':
!! bgColorForNesting || !! style?.color?.background,
[ `has-${ bgColorForNesting }-background-color` ]: !! bgColorForNesting,
} ),
style: {
color: style?.color?.text,
Expand All @@ -406,7 +424,28 @@ export default function NavigationLinkEdit( {
{
className: classnames( 'wp-block-navigation-link__container', {
'is-parent-of-selected-block': isParentOfSelectedBlock,
'has-text-color': !! (
overlayTextColor ||
textColor ||
!! style?.color?.text
),
[ `has-${ overlayTextColor || textColor }-color` ]: !! (
overlayTextColor || textColor
),
'has-background':
!! overlayBackgroundColor ||
backgroundColor ||
!! style?.color?.background,
[ `has-${
overlayBackgroundColor || backgroundColor
}-background-color` ]: !! (
overlayBackgroundColor || backgroundColor
),
} ),
style: {
color: style?.color?.text,
backgroundColor: style?.color?.background,
},
},
{
allowedBlocks: ALLOWED_BLOCKS,
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/navigation-link/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,12 @@
margin-bottom: $grid-unit-20;
margin-left: $grid-unit-20;
}

// Override the list reset for colored, nested menus
ol.has-background,
ul.has-background {
padding: 0;
}
}

.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] {
Expand Down
17 changes: 16 additions & 1 deletion packages/block-library/src/navigation/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,29 @@
"isResponsive": {
"type": "boolean",
"default": false
},
"overlayBackgroundColor": {
"type": "string"
},
"customOverlayBackgroundColor": {
"type": "string"
},
"overlayTextColor": {
"type": "string"
},
"customOverlayTextColor": {
"type": "string"
}
},
"providesContext": {
"textColor": "textColor",
"customTextColor": "customTextColor",
"backgroundColor": "backgroundColor",
"customBackgroundColor": "customBackgroundColor",
"overlayTextColor": "overlayTextColor",
"customOverlayTextColor": "customOverlayTextColor",
"overlayBackgroundColor": "overlayBackgroundColor",
"customOverlayBackgroundColor": "customOverlayBackgroundColor",
"fontSize": "fontSize",
"customFontSize": "customFontSize",
"showSubmenuIcon": "showSubmenuIcon",
Expand All @@ -68,7 +84,6 @@
"__experimentalFontStyle": true,
"__experimentalFontWeight": true,
"__experimentalTextTransform": true,
"color": true,
"__experimentalFontFamily": true,
"__experimentalTextDecoration": true
},
Expand Down
63 changes: 58 additions & 5 deletions packages/block-library/src/navigation/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {
BlockControls,
useBlockProps,
store as blockEditorStore,
withColors,
PanelColorSettings,
} from '@wordpress/block-editor';
import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
Expand Down Expand Up @@ -54,6 +56,14 @@ function Navigation( {
isSelected,
updateInnerBlocks,
className,
backgroundColor,
setBackgroundColor,
textColor,
setTextColor,
overlayBackgroundColor,
setOverlayBackgroundColor,
overlayTextColor,
setOverlayTextColor,
hasSubmenuIndicatorSetting = true,
hasItemJustificationControls = true,
} ) {
Expand All @@ -67,11 +77,23 @@ function Navigation( {
const { selectBlock } = useDispatch( blockEditorStore );

const blockProps = useBlockProps( {
className: classnames( className, {
[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
'is-vertical': attributes.orientation === 'vertical',
'is-responsive': attributes.isResponsive,
} ),
className: classnames(
className,
textColor.class,
backgroundColor.class,
{
[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
'is-vertical': attributes.orientation === 'vertical',
'is-responsive': attributes.isResponsive,
'has-text-color': !! textColor.color || !! textColor.class,
'has-background':
!! backgroundColor.color || !! backgroundColor.class,
}
),
style: {
color: textColor.color,
backgroundColor: backgroundColor.color,
},
} );

const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
Expand Down Expand Up @@ -165,6 +187,31 @@ function Navigation( {
/>
</PanelBody>
) }
<PanelColorSettings
title={ __( 'Color' ) }
colorSettings={ [
{
value: textColor.color,
onChange: setTextColor,
label: __( 'Text color' ),
},
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background text' ),
},
{
value: overlayTextColor.color,
onChange: setOverlayTextColor,
label: __( 'Overlay text color' ),
},
{
value: overlayBackgroundColor.color,
onChange: setOverlayBackgroundColor,
label: __( 'Overlay background color' ),
},
] }
/>
</InspectorControls>
<nav { ...blockProps }>
<ResponsiveWrapper
Expand Down Expand Up @@ -216,4 +263,10 @@ export default compose( [
},
};
} ),
withColors(
{ textColor: 'color' },
{ backgroundColor: 'color' },
{ overlayBackgroundColor: 'color' },
{ overlayTextColor: 'color' }
),
] )( Navigation );

0 comments on commit a4fb4b8

Please sign in to comment.