Skip to content

Commit

Permalink
Improve control visibility logic
Browse files Browse the repository at this point in the history 
- Moved read progress toggle to top level for better visibility
- Grouped all value-related controls under a conditional block
- Reorganized controls to show/hide based on read progress state
  • Loading branch information
@Infinite-Null
Infinite-Null committed Jan 23, 2025
1 parent 665f35d commit 97aa873
Showing 1 changed file with 189 additions and 157 deletions.
346 changes: 189 additions & 157 deletions packages/block-library/src/progress-bar/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,119 +93,6 @@ export default function Edit( { attributes, setAttributes } ) {
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Progress Value' ) }
isShownByDefault
hasValue={ () => value !== 50 }
onDeselect={ () => setAttributes( { value: 50 } ) }
>
<RangeControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Progress Value' ) }
value={ value }
onChange={ ( currentValue ) =>
setAttributes( { value: currentValue } )
}
min={ 0 }
max={ max }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Maximum Value' ) }
isShownByDefault
hasValue={ () => max !== 100 }
onDeselect={ () => setAttributes( { max: 100 } ) }
>
<NumberControl
__next40pxDefaultSize
__nextHasNoMarginBottom
isShiftStepEnabled
shiftStep={ 10 }
label={ __( 'Maximum Value' ) }
value={ max }
onChange={ ( maxValue ) =>
setAttributes( { max: maxValue } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Progress bar height' ) }
isShownByDefault
hasValue={ () => height !== 11 }
onDeselect={ () => setAttributes( { height: 11 } ) }
>
<RangeControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Progress bar height' ) }
help={ __( 'Height in pixels' ) }
value={ height }
onChange={ ( heightValue ) =>
setAttributes( { height: heightValue } )
}
min={ 1 }
max={ 30 }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Show value' ) }
isShownByDefault
hasValue={ () => ! showValue }
onDeselect={ () =>
setAttributes( { showValue: true } )
}
>
<ToggleControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Show value' ) }
checked={ showValue }
onChange={ () =>
setAttributes( { showValue: ! showValue } )
}
/>
</ToolsPanelItem>
{ showValue && (
<ToolsPanelItem
label={ __( 'Show total value' ) }
isShownByDefault
hasValue={ () => showTotal }
onDeselect={ () =>
setAttributes( { showTotal: false } )
}
>
<ToggleControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Show total value' ) }
checked={ showTotal }
onChange={ () =>
setAttributes( { showTotal: ! showTotal } )
}
/>
</ToolsPanelItem>
) }
{ showValue && showTotal && (
<ToolsPanelItem
label={ __( 'Value Seprator' ) }
isShownByDefault
hasValue={ () => seprator !== '/' }
onDeselect={ () =>
setAttributes( { seprator: '/' } )
}
>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Value Seprator' ) }
value={ seprator }
onChange={ ( newSeprator ) =>
setAttributes( { seprator: newSeprator } )
}
/>
</ToolsPanelItem>
) }
<ToolsPanelItem
label={ __( 'Use as read progress' ) }
isShownByDefault
Expand All @@ -226,50 +113,195 @@ export default function Edit( { attributes, setAttributes } ) {
}
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Value Symbol' ) }
isShownByDefault
hasValue={ () => symbol !== '%' }
onDeselect={ () => setAttributes( { symbol: '%' } ) }
>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Value Symbol' ) }
value={ symbol }
onChange={ ( newSymbol ) =>
setAttributes( { symbol: newSymbol } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Symbol Position' ) }
isShownByDefault
hasValue={ () => symbolPosition !== 'suffix' }
onDeselect={ () =>
setAttributes( { symbolPosition: 'suffix' } )
}
>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Symbol Position' ) }
value={ symbolPosition }
options={ [
{
label: __( 'Before number' ),
value: 'prefix',
},
{
label: __( 'After number' ),
value: 'suffix',
},
] }
onChange={ ( position ) =>
setAttributes( { symbolPosition: position } )
}
/>
</ToolsPanelItem>
{ ! isReadProgress && (
<>
<ToolsPanelItem
label={ __( 'Progress Value' ) }
isShownByDefault
hasValue={ () => value !== 50 }
onDeselect={ () =>
setAttributes( { value: 50 } )
}
>
<RangeControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Progress Value' ) }
value={ value }
onChange={ ( currentValue ) =>
setAttributes( { value: currentValue } )
}
min={ 0 }
max={ max }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Maximum Value' ) }
isShownByDefault
hasValue={ () => max !== 100 }
onDeselect={ () =>
setAttributes( { max: 100 } )
}
>
<NumberControl
__next40pxDefaultSize
__nextHasNoMarginBottom
isShiftStepEnabled
shiftStep={ 10 }
label={ __( 'Maximum Value' ) }
value={ max }
onChange={ ( maxValue ) =>
setAttributes( { max: maxValue } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Progress bar height' ) }
isShownByDefault
hasValue={ () => height !== 11 }
onDeselect={ () =>
setAttributes( { height: 11 } )
}
>
<RangeControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Progress bar height' ) }
help={ __( 'Height in pixels' ) }
value={ height }
onChange={ ( heightValue ) =>
setAttributes( { height: heightValue } )
}
min={ 1 }
max={ 30 }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Show value' ) }
isShownByDefault
hasValue={ () => ! showValue }
onDeselect={ () =>
setAttributes( { showValue: true } )
}
>
<ToggleControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Show value' ) }
checked={ showValue }
onChange={ () =>
setAttributes( {
showValue: ! showValue,
} )
}
/>
</ToolsPanelItem>
{ showValue && (
<ToolsPanelItem
label={ __( 'Show total value' ) }
isShownByDefault
hasValue={ () => showTotal }
onDeselect={ () =>
setAttributes( { showTotal: false } )
}
>
<ToggleControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Show total value' ) }
checked={ showTotal }
onChange={ () =>
setAttributes( {
showTotal: ! showTotal,
} )
}
/>
</ToolsPanelItem>
) }
{ showValue && showTotal && (
<ToolsPanelItem
label={ __( 'Value Seprator' ) }
isShownByDefault
hasValue={ () => seprator !== '/' }
onDeselect={ () =>
setAttributes( { seprator: '/' } )
}
>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Value Seprator' ) }
value={ seprator }
onChange={ ( newSeprator ) =>
setAttributes( {
seprator: newSeprator,
} )
}
/>
</ToolsPanelItem>
) }
{ showValue && (
<>
<ToolsPanelItem
label={ __( 'Value Symbol' ) }
isShownByDefault
hasValue={ () => symbol !== '%' }
onDeselect={ () =>
setAttributes( { symbol: '%' } )
}
>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Value Symbol' ) }
value={ symbol }
onChange={ ( newSymbol ) =>
setAttributes( {
symbol: newSymbol,
} )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Symbol Position' ) }
isShownByDefault
hasValue={ () =>
symbolPosition !== 'suffix'
}
onDeselect={ () =>
setAttributes( {
symbolPosition: 'suffix',
} )
}
>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Symbol Position' ) }
value={ symbolPosition }
options={ [
{
label: __(
'Before number'
),
value: 'prefix',
},
{
label: __( 'After number' ),
value: 'suffix',
},
] }
onChange={ ( position ) =>
setAttributes( {
symbolPosition: position,
} )
}
/>
</ToolsPanelItem>
</>
) }
</>
) }
</ToolsPanel>
<PanelColorSettings
title={ __( 'Color Settings' ) }
Expand Down

0 comments on commit 97aa873

Please sign in to comment.