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

Show appender only when item has submenu #18153

Merged
merged 4 commits into from Oct 31, 2019
Merged

Show appender only when item has submenu #18153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
325e17b
Show appender only when item has submenu
tellthemachines Oct 29, 2019
f02c035
Address PR feedback.
tellthemachines Oct 29, 2019
4730cf8
Insert block directly from toolbar
tellthemachines Oct 30, 2019
2599ed1
updates submenu label, field css and shows toolbar button all the time
draganescu Oct 31, 2019
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
56 changes: 45 additions & 11 deletions packages/block-library/src/navigation-menu-item/edit.js
View file
Open in desktop
Expand Up @@ -6,10 +6,14 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
import {
ExternalLink,
PanelBody,
Path,
SVG,
TextareaControl,
TextControl,
Toolbar,
Expand Down Expand Up @@ -40,9 +44,11 @@ import {

function NavigationMenuItemEdit( {
attributes,
hasDescendants,
isSelected,
isParentOfSelectedBlock,
setAttributes,
insertMenuItemBlock,
} ) {
const [ isLinkOpen, setIsLinkOpen ] = useState( false );
const [ isEditingLink, setIsEditingLink ] = useState( false );
Expand Down Expand Up @@ -89,7 +95,14 @@ function NavigationMenuItemEdit( {
title={ __( 'Link' ) }
onClick={ () => setIsLinkOpen( ! isLinkOpen ) }
/>
{ isLinkOpen &&
{ <ToolbarButton
name="submenu"
icon={ <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"><Path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" /><Path fill="none" d="M0 0h24v24H0z" /></SVG> }
title={ __( 'Add submenu item' ) }
onClick={ insertMenuItemBlock }
/> }
</Toolbar>
{ isLinkOpen &&
<>
<URLPopover
className="wp-block-navigation-menu-item__inline-link-input"
Expand All @@ -115,8 +128,7 @@ function NavigationMenuItemEdit( {

</URLPopover>
</>
}
</Toolbar>
}
</BlockControls>
<InspectorControls>
<PanelBody
Expand Down Expand Up @@ -184,18 +196,40 @@ function NavigationMenuItemEdit( {
{ ( isSelected || isParentOfSelectedBlock ) &&
<InnerBlocks
allowedBlocks={ [ 'core/navigation-menu-item' ] }
renderAppender={ hasDescendants ? InnerBlocks.ButtonBlockAppender : false }
/>
}
</div>
</Fragment>
);
}

export default withSelect( ( select, ownProps ) => {
const { hasSelectedInnerBlock } = select( 'core/block-editor' );
const { clientId } = ownProps;
export default compose( [
withSelect( ( select, ownProps ) => {
const { getClientIdsOfDescendants, hasSelectedInnerBlock } = select( 'core/block-editor' );
const { clientId } = ownProps;

return {
isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ),
};
} )( NavigationMenuItemEdit );
return {
isParentOfSelectedBlock: hasSelectedInnerBlock( clientId, true ),
hasDescendants: !! getClientIdsOfDescendants( [ clientId ] ).length,
};
} ),
withDispatch( ( dispatch, ownProps ) => {
return {
insertMenuItemBlock() {
const { clientId } = ownProps;

const {
insertBlock,
} = dispatch( 'core/block-editor' );

const blockToInsert = createBlock( 'core/navigation-menu-item' );
insertBlock(
blockToInsert,
0,
clientId,
);
},
};
} ),
] )( NavigationMenuItemEdit );
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation-menu-item/editor.scss
View file
Open in desktop
Expand Up @@ -25,7 +25,7 @@
// Compensate for menu item base padding.
margin-left: -$grid-size;

.wp-block-navigation-menu-item__field {
.wp-block-navigation-menu-item__content {
margin-right: $grid-size;

// This should match the padding of the menu item.
Expand Down