Skip to content

Commit

Permalink
Refactor "Settings" panel of Navigation Item block to use ToolsPanel …
Browse files Browse the repository at this point in the history 
…instead of PanelBody (#67973)

Co-authored-by: rinkalpagdar <rinkalpagdar@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
  • Loading branch information
@rinkalpagdar @fabiankaegy
@getdave @Mamaduka
5 people authored Dec 19, 2024
1 parent 505bbc8 commit afca7b5
Showing 1 changed file with 101 additions and 61 deletions.
162 changes: 101 additions & 61 deletions packages/block-library/src/navigation-link/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import clsx from 'clsx';
import { createBlock } from '@wordpress/blocks';
import { useSelect, useDispatch } from '@wordpress/data';
import {
PanelBody,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
TextControl,
TextareaControl,
ToolbarButton,
Expand Down Expand Up @@ -161,71 +162,110 @@ function getMissingText( type ) {
function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
const { label, url, description, title, rel } = attributes;
return (
<PanelBody title={ __( 'Settings' ) }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ label ? stripHTML( label ) : '' }
onChange={ ( labelValue ) => {
setAttributes( { label: labelValue } );
} }
<ToolsPanel label={ __( 'Settings' ) }>
<ToolsPanelItem
hasValue={ () => !! label }
label={ __( 'Text' ) }
autoComplete="off"
onFocus={ () => setIsLabelFieldFocused( true ) }
onBlur={ () => setIsLabelFieldFocused( false ) }
/>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ url ? safeDecodeURI( url ) : '' }
onChange={ ( urlValue ) => {
updateAttributes(
{ url: urlValue },
setAttributes,
attributes
);
} }
onDeselect={ () => setAttributes( { label: '' } ) }
isShownByDefault
>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Text' ) }
value={ label ? stripHTML( label ) : '' }
onChange={ ( labelValue ) => {
setAttributes( { label: labelValue } );
} }
autoComplete="off"
onFocus={ () => setIsLabelFieldFocused( true ) }
onBlur={ () => setIsLabelFieldFocused( false ) }
/>
</ToolsPanelItem>

<ToolsPanelItem
hasValue={ () => !! url }
label={ __( 'Link' ) }
autoComplete="off"
/>
<TextareaControl
__nextHasNoMarginBottom
value={ description || '' }
onChange={ ( descriptionValue ) => {
setAttributes( { description: descriptionValue } );
} }
onDeselect={ () => setAttributes( { url: '' } ) }
isShownByDefault
>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Link' ) }
value={ url ? safeDecodeURI( url ) : '' }
onChange={ ( urlValue ) => {
updateAttributes(
{ url: urlValue },
setAttributes,
attributes
);
} }
autoComplete="off"
/>
</ToolsPanelItem>

<ToolsPanelItem
hasValue={ () => !! description }
label={ __( 'Description' ) }
help={ __(
'The description will be displayed in the menu if the current theme supports it.'
) }
/>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ title || '' }
onChange={ ( titleValue ) => {
setAttributes( { title: titleValue } );
} }
onDeselect={ () => setAttributes( { description: '' } ) }
isShownByDefault
>
<TextareaControl
__nextHasNoMarginBottom
label={ __( 'Description' ) }
value={ description || '' }
onChange={ ( descriptionValue ) => {
setAttributes( { description: descriptionValue } );
} }
help={ __(
'The description will be displayed in the menu if the current theme supports it.'
) }
/>
</ToolsPanelItem>

<ToolsPanelItem
hasValue={ () => !! title }
label={ __( 'Title attribute' ) }
autoComplete="off"
help={ __(
'Additional information to help clarify the purpose of the link.'
) }
/>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ rel || '' }
onChange={ ( relValue ) => {
setAttributes( { rel: relValue } );
} }
onDeselect={ () => setAttributes( { title: '' } ) }
isShownByDefault
>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Title attribute' ) }
value={ title || '' }
onChange={ ( titleValue ) => {
setAttributes( { title: titleValue } );
} }
autoComplete="off"
help={ __(
'Additional information to help clarify the purpose of the link.'
) }
/>
</ToolsPanelItem>

<ToolsPanelItem
hasValue={ () => !! rel }
label={ __( 'Rel attribute' ) }
autoComplete="off"
help={ __(
'The relationship of the linked URL as space-separated link types.'
) }
/>
</PanelBody>
onDeselect={ () => setAttributes( { rel: '' } ) }
isShownByDefault
>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Rel attribute' ) }
value={ rel || '' }
onChange={ ( relValue ) => {
setAttributes( { rel: relValue } );
} }
autoComplete="off"
help={ __(
'The relationship of the linked URL as space-separated link types.'
) }
/>
</ToolsPanelItem>
</ToolsPanel>
);
}

Expand Down

1 comment on commit afca7b5

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in afca7b5.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12416566729
📝 Reported issues:

Please sign in to comment.