Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add select icon for Navigation Block's menu button #43674

Merged
merged 2 commits into from Sep 1, 2022
Merged

Add select icon for Navigation Block's menu button #43674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ceb5b8c
Add select option to choose an icon for navigation button
kevin940726 Aug 29, 2022
43f7fc0
Fix unit test and linting
kevin940726 Aug 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Expand Up @@ -393,7 +393,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
- **Name:** core/navigation
- **Category:** theme
- **Supports:** align (full, wide), anchor, inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor
- **Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, textColor

## Custom Link

Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/navigation/block.json
View file
Open in desktop
Expand Up @@ -41,6 +41,10 @@
"type": "string",
"default": "mobile"
},
"icon": {
"type": "string",
"default": "handle"
},
"hasIcon": {
"type": "boolean",
"default": true
Expand Down
20 changes: 10 additions & 10 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Expand Up @@ -52,6 +52,7 @@ import UnsavedInnerBlocks from './unsaved-inner-blocks';
import NavigationMenuDeleteControl from './navigation-menu-delete-control';
import useNavigationNotice from './use-navigation-notice';
import OverlayMenuIcon from './overlay-menu-icon';
import OverlayMenuPreview from './overlay-menu-preview';
import useConvertClassicToBlockMenu, {
CLASSIC_MENU_CONVERSION_ERROR,
CLASSIC_MENU_CONVERSION_PENDING,
Expand Down Expand Up @@ -92,6 +93,7 @@ function Navigation( {
flexWrap = 'wrap',
} = {},
hasIcon,
icon,
} = attributes;

const ref = attributes.ref;
Expand Down Expand Up @@ -468,7 +470,7 @@ function Navigation( {
>
{ hasIcon && (
<>
<OverlayMenuIcon />
<OverlayMenuIcon icon={ icon } />
<Icon icon={ close } />
</>
) }
Expand All @@ -481,15 +483,10 @@ function Navigation( {
</Button>
) }
{ overlayMenuPreview && (
<ToggleControl
label={ __( 'Show icon button' ) }
help={ __(
'Configure the visual appearance of the button opening and closing the overlay menu.'
) }
onChange={ ( value ) =>
setAttributes( { hasIcon: value } )
}
checked={ hasIcon }
<OverlayMenuPreview
setAttributes={ setAttributes }
hasIcon={ hasIcon }
icon={ icon }
/>
) }
<h3>{ __( 'Overlay Menu' ) }</h3>
Expand Down Expand Up @@ -638,6 +635,8 @@ function Navigation( {
id={ clientId }
onToggle={ setResponsiveMenuVisibility }
isOpen={ isResponsiveMenuOpen }
hasIcon={ hasIcon }
icon={ icon }
isResponsive={ 'never' !== overlayMenu }
isHiddenByDefault={ 'always' === overlayMenu }
overlayBackgroundColor={ overlayBackgroundColor }
Expand Down Expand Up @@ -845,6 +844,7 @@ function Navigation( {
onToggle={ setResponsiveMenuVisibility }
label={ __( 'Menu' ) }
hasIcon={ hasIcon }
icon={ icon }
isOpen={ isResponsiveMenuOpen }
isResponsive={ isResponsive }
isHiddenByDefault={ 'always' === overlayMenu }
Expand Down
39 changes: 25 additions & 14 deletions packages/block-library/src/navigation/edit/overlay-menu-icon.js
View file
Open in desktop
Expand Up @@ -2,19 +2,30 @@
* WordPress dependencies
*/
import { SVG, Rect } from '@wordpress/primitives';
import { Icon, menu, moreVertical, moreHorizontal } from '@wordpress/icons';

export default function OverlayMenuIcon() {
return (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
aria-hidden="true"
focusable="false"
>
<Rect x="4" y="7.5" width="16" height="1.5" />
<Rect x="4" y="15" width="16" height="1.5" />
</SVG>
);
export default function OverlayMenuIcon( { icon } ) {
if ( icon === 'handle' ) {
return (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
aria-hidden="true"
focusable="false"
>
<Rect x="4" y="7.5" width="16" height="1.5" />
<Rect x="4" y="15" width="16" height="1.5" />
</SVG>
);
} else if ( icon === 'menu' ) {
return <Icon icon={ menu } />;
} else if ( icon === 'more-vertical' ) {
return <Icon icon={ moreVertical } />;
} else if ( icon === 'more-horizontal' ) {
return <Icon icon={ moreHorizontal } />;
}

return null;
}
61 changes: 61 additions & 0 deletions packages/block-library/src/navigation/edit/overlay-menu-preview.js
View file
Open in desktop
@@ -0,0 +1,61 @@
/**
* WordPress dependencies
*/
import {
ToggleControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import OverlayMenuIcon from './overlay-menu-icon';

export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
return (
<>
<ToggleControl
label={ __( 'Show icon button' ) }
help={ __(
'Configure the visual appearance of the button opening the overlay menu.'
) }
onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
checked={ hasIcon }
/>

<ToggleGroupControl
label={ __( 'Icon' ) }
value={ icon }
help={ __( 'Choose an icon or add your own.' ) }
onChange={ ( value ) => setAttributes( { icon: value } ) }
>
<ToggleGroupControlOption
value="handle"
aria-label={ __( 'handle' ) }
label={ <OverlayMenuIcon icon="handle" /> }
className="wp-block-navigation__icon-button"
/>
<ToggleGroupControlOption
value="menu"
aria-label={ __( 'menu' ) }
label={ <OverlayMenuIcon icon="menu" /> }
className="wp-block-navigation__icon-button"
/>
<ToggleGroupControlOption
value="more-vertical"
aria-label={ __( 'more vertical' ) }
label={ <OverlayMenuIcon icon="more-vertical" /> }
className="wp-block-navigation__icon-button"
/>
<ToggleGroupControlOption
value="more-horizontal"
aria-label={ __( 'more horizontal' ) }
label={ <OverlayMenuIcon icon="more-horizontal" /> }
className="wp-block-navigation__icon-button"
/>
</ToggleGroupControl>
</>
);
}
3 changes: 2 additions & 1 deletion packages/block-library/src/navigation/edit/responsive-wrapper.js
View file
Open in desktop
Expand Up @@ -26,6 +26,7 @@ export default function ResponsiveWrapper( {
overlayBackgroundColor,
overlayTextColor,
hasIcon,
icon,
} ) {
if ( ! isResponsive ) {
return children;
Expand Down Expand Up @@ -83,7 +84,7 @@ export default function ResponsiveWrapper( {
className={ openButtonClasses }
onClick={ () => onToggle( true ) }
>
{ hasIcon && <OverlayMenuIcon /> }
{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
{ ! hasIcon && (
<span className="wp-block-navigation__toggle_button_label">
{ __( 'Menu' ) }
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Expand Up @@ -610,3 +610,8 @@ body.editor-styles-wrapper
display: none;
}


.components-toggle-group-control-option-base.wp-block-navigation__icon-button {
// Override the default padding of ToggleGroupControlOption.
padding: 0 3px;
}
11 changes: 9 additions & 2 deletions packages/block-library/src/navigation/index.php
View file
Open in desktop
Expand Up @@ -610,8 +610,15 @@ function render_block_core_navigation( $attributes, $content, $block ) {
$is_hidden_by_default ? 'always-shown' : '',
);

$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
if ( 'menu' === $attributes['icon'] ) {
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
} elseif ( 'more-vertical' === $attributes['icon'] ) {
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" /></svg>';
} elseif ( 'more-horizontal' === $attributes['icon'] ) {
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 13h2v-2h-2v2zm-6 0h2v-2H5v2zm12-2v2h2v-2h-2z" /></svg>';
}
Comment on lines +615 to +621
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kevin940726 I'm seeing some PHP errors here:
Screen Shot 2022-09-13 at 1 03 20 pm

I'd recommend checking for the existence of a property before accessing it using something like isset( $attributes['icon'] ).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My "bad" as well for not recommending this - I keep forgetting the "older source" problem sorry @kevin940726 ✋🏻

$toggle_button_content = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
$toggle_close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__navigation.json
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@
"openSubmenusOnClick": false,
"overlayMenu": "mobile",
"hasIcon": true,
"icon": "handle",
"maxNestingLevel": 5
},
"innerBlocks": []
Expand Down