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

Allow editing of new menu items from the block inspector #22210

Merged
merged 5 commits into from
May 18, 2020
Merged

Allow editing of new menu items from the block inspector #22210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0771607
Make block inspector items editable
adamziel May 8, 2020
2366592
Improve the performance
adamziel May 11, 2020
1854fa0
Introduce <BlockNavigationEditor /> component
adamziel May 14, 2020
b103f20
Remove the wp-block-navigation-link__label class name from RichText
adamziel May 14, 2020
450eafe
remove the dependency list optimization
adamziel May 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 32 additions & 42 deletions packages/block-editor/src/components/block-navigation/block-contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,51 +96,41 @@ const BlockNavigationBlockSelectButton = forwardRef( ( props, ref ) => (

const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`;

const BlockNavigationBlockSlot = forwardRef(
(
{ block, isSelected, onClick, position, siblingCount, level, ...props },
ref
) => {
const { clientId } = block;

return (
<Slot name={ getSlotName( clientId ) }>
{ ( fills ) => {
if ( ! fills.length ) {
return (
<BlockNavigationBlockSelectButton
ref={ ref }
block={ block }
onClick={ onClick }
isSelected={ isSelected }
position={ position }
siblingCount={ siblingCount }
level={ level }
{ ...props }
/>
);
}
const noop = () => null;
const BlockNavigationBlockSlot = forwardRef( ( props, ref ) => {
const { clientId } = props.block;

return (
<Slot name={ getSlotName( clientId ) }>
{ ( fills ) => {
if ( ! fills.length ) {
return (
<BlockNavigationBlockContentWrapper as="div">
{ Children.map( fills, ( fill ) =>
cloneElement( fill, {
...{
block,
isSelected,
onClick,
...props,
},
...fill.props,
} )
) }
</BlockNavigationBlockContentWrapper>
<BlockNavigationBlockSelectButton
ref={ ref }
{ ...props }
/>
);
} }
</Slot>
);
}
);
}

return (
<BlockNavigationBlockContentWrapper
as="div"
{ ...props }
// Fills should implement onClick on their own
onClick={ noop }
>
{ Children.map( fills, ( fill ) =>
cloneElement( fill, {
...{ props },
...fill.props,
} )
) }
</BlockNavigationBlockContentWrapper>
);
} }
</Slot>
);
} );

export const BlockNavigationBlockFill = ( props ) => {
const { clientId } = useContext( BlockListBlockContext );
Expand Down
30 changes: 30 additions & 0 deletions packages/block-editor/src/components/block-navigation/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { RichText } from '../';
import { BlockNavigationBlockFill } from './block-contents';

export default function BlockNavigationEditor( { value, onChange } ) {
return (
<BlockNavigationBlockFill>
<RichText
value={ value }
onChange={ onChange }
placeholder={ __( 'Navigation item' ) }
keepPlaceholderOnFocus
withoutInteractiveFormatting
allowedFormats={ [
'core/bold',
'core/italic',
'core/image',
'core/strikethrough',
] }
/>
</BlockNavigationBlockFill>
);
}
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-contents';
export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
RichText,
__experimentalLinkControl as LinkControl,
__experimentalBlock as Block,
__experimentalBlockNavigationEditor as BlockNavigationEditor,
} from '@wordpress/block-editor';
import { isURL, prependHTTP } from '@wordpress/url';
import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
Expand Down Expand Up @@ -195,6 +196,12 @@ function NavigationLinkEdit( {
/>
</PanelBody>
</InspectorControls>
<BlockNavigationEditor
value={ label }
onChange={ ( labelValue ) =>
setAttributes( { label: labelValue } )
}
/>
<Block.li
className={ classnames( {
'is-editing': isSelected || isParentOfSelectedBlock,
Expand Down