Skip to content

Commit

Permalink
adds color panel and other inspector controls for styling uncontrolle…
Browse files Browse the repository at this point in the history 
…d blocks in navigation (#41114)
  • Loading branch information
@draganescu
draganescu authored May 18, 2022
1 parent b8971a0 commit b495580
Showing 1 changed file with 140 additions and 143 deletions.
283 changes: 140 additions & 143 deletions packages/block-library/src/navigation/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -558,6 +558,144 @@ function Navigation( {
} );
}, [ clientId, ref ] );

const isResponsive = 'never' !== overlayMenu;

const overlayMenuPreviewClasses = classnames(
'wp-block-navigation__overlay-menu-preview',
{ open: overlayMenuPreview }
);

const stylingInspectorControls = (
<InspectorControls>
{ hasSubmenuIndicatorSetting && (
<PanelBody title={ __( 'Display' ) }>
{ isResponsive && (
<Button
className={ overlayMenuPreviewClasses }
onClick={ () => {
setOverlayMenuPreview( ! overlayMenuPreview );
} }
>
{ hasIcon && <OverlayMenuIcon /> }
{ ! hasIcon && <span>{ __( 'Menu' ) }</span> }
</Button>
) }
{ overlayMenuPreview && (
<ToggleControl
label={ __( 'Show icon button' ) }
help={ __(
'Configure the visual appearance of the button opening the overlay menu.'
) }
onChange={ ( value ) =>
setAttributes( { hasIcon: value } )
}
checked={ hasIcon }
/>
) }
<h3>{ __( 'Overlay Menu' ) }</h3>
<ToggleGroupControl
label={ __( 'Configure overlay menu' ) }
value={ overlayMenu }
help={ __(
'Collapses the navigation options in a menu icon opening an overlay.'
) }
onChange={ ( value ) =>
setAttributes( { overlayMenu: value } )
}
isBlock
hideLabelFromVision
>
<ToggleGroupControlOption
value="never"
label={ __( 'Off' ) }
/>
<ToggleGroupControlOption
value="mobile"
label={ __( 'Mobile' ) }
/>
<ToggleGroupControlOption
value="always"
label={ __( 'Always' ) }
/>
</ToggleGroupControl>
{ hasSubmenus && (
<>
<h3>{ __( 'Submenus' ) }</h3>
<ToggleControl
checked={ openSubmenusOnClick }
onChange={ ( value ) => {
setAttributes( {
openSubmenusOnClick: value,
...( value && {
showSubmenuIcon: true,
} ), // Make sure arrows are shown when we toggle this on.
} );
} }
label={ __( 'Open on click' ) }
/>

<ToggleControl
checked={ showSubmenuIcon }
onChange={ ( value ) => {
setAttributes( {
showSubmenuIcon: value,
} );
} }
disabled={ attributes.openSubmenusOnClick }
label={ __( 'Show arrow' ) }
/>
</>
) }
</PanelBody>
) }
{ hasColorSettings && (
<PanelColorSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
initialOpen={ false }
colorSettings={ [
{
value: textColor.color,
onChange: setTextColor,
label: __( 'Text' ),
},
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background' ),
},
{
value: overlayTextColor.color,
onChange: setOverlayTextColor,
label: __( 'Submenu & overlay text' ),
},
{
value: overlayBackgroundColor.color,
onChange: setOverlayBackgroundColor,
label: __( 'Submenu & overlay background' ),
},
] }
>
{ enableContrastChecking && (
<>
<ContrastChecker
backgroundColor={ detectedBackgroundColor }
textColor={ detectedColor }
/>
<ContrastChecker
backgroundColor={
detectedOverlayBackgroundColor
}
textColor={ detectedOverlayColor }
/>
</>
) }
</PanelColorSettings>
) }
</InspectorControls>
);

// If the block has inner blocks, but no menu id, then these blocks are either:
// - inserted via a pattern.
// - inserted directly via Code View (or otherwise).
Expand All @@ -568,6 +706,7 @@ function Navigation( {
if ( hasUnsavedBlocks ) {
return (
<TagName { ...blockProps }>
{ stylingInspectorControls }
<ResponsiveWrapper
id={ clientId }
onToggle={ setResponsiveMenuVisibility }
Expand Down Expand Up @@ -633,13 +772,6 @@ function Navigation( {
? CustomPlaceholder
: Placeholder;

const isResponsive = 'never' !== overlayMenu;

const overlayMenuPreviewClasses = classnames(
'wp-block-navigation__overlay-menu-preview',
{ open: overlayMenuPreview }
);

if ( isPlaceholder ) {
return (
<TagName { ...blockProps }>
Expand Down Expand Up @@ -677,142 +809,7 @@ function Navigation( {
</ToolbarGroup>
) }
</BlockControls>
<InspectorControls>
{ hasSubmenuIndicatorSetting && (
<PanelBody title={ __( 'Display' ) }>
{ isResponsive && (
<Button
className={ overlayMenuPreviewClasses }
onClick={ () => {
setOverlayMenuPreview(
! overlayMenuPreview
);
} }
>
{ hasIcon && <OverlayMenuIcon /> }
{ ! hasIcon && (
<span>{ __( 'Menu' ) }</span>
) }
</Button>
) }
{ overlayMenuPreview && (
<ToggleControl
label={ __( 'Show icon button' ) }
help={ __(
'Configure the visual appearance of the button opening the overlay menu.'
) }
onChange={ ( value ) =>
setAttributes( { hasIcon: value } )
}
checked={ hasIcon }
/>
) }
<h3>{ __( 'Overlay Menu' ) }</h3>
<ToggleGroupControl
label={ __( 'Configure overlay menu' ) }
value={ overlayMenu }
help={ __(
'Collapses the navigation options in a menu icon opening an overlay.'
) }
onChange={ ( value ) =>
setAttributes( { overlayMenu: value } )
}
isBlock
hideLabelFromVision
>
<ToggleGroupControlOption
value="never"
label={ __( 'Off' ) }
/>
<ToggleGroupControlOption
value="mobile"
label={ __( 'Mobile' ) }
/>
<ToggleGroupControlOption
value="always"
label={ __( 'Always' ) }
/>
</ToggleGroupControl>
{ hasSubmenus && (
<>
<h3>{ __( 'Submenus' ) }</h3>
<ToggleControl
checked={ openSubmenusOnClick }
onChange={ ( value ) => {
setAttributes( {
openSubmenusOnClick: value,
...( value && {
showSubmenuIcon: true,
} ), // Make sure arrows are shown when we toggle this on.
} );
} }
label={ __( 'Open on click' ) }
/>

<ToggleControl
checked={ showSubmenuIcon }
onChange={ ( value ) => {
setAttributes( {
showSubmenuIcon: value,
} );
} }
disabled={
attributes.openSubmenusOnClick
}
label={ __( 'Show arrow' ) }
/>
</>
) }
</PanelBody>
) }
{ hasColorSettings && (
<PanelColorSettings
__experimentalHasMultipleOrigins
__experimentalIsRenderedInSidebar
title={ __( 'Color' ) }
initialOpen={ false }
colorSettings={ [
{
value: textColor.color,
onChange: setTextColor,
label: __( 'Text' ),
},
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background' ),
},
{
value: overlayTextColor.color,
onChange: setOverlayTextColor,
label: __( 'Submenu & overlay text' ),
},
{
value: overlayBackgroundColor.color,
onChange: setOverlayBackgroundColor,
label: __( 'Submenu & overlay background' ),
},
] }
>
{ enableContrastChecking && (
<>
<ContrastChecker
backgroundColor={
detectedBackgroundColor
}
textColor={ detectedColor }
/>
<ContrastChecker
backgroundColor={
detectedOverlayBackgroundColor
}
textColor={ detectedOverlayColor }
/>
</>
) }
</PanelColorSettings>
) }
</InspectorControls>
{ stylingInspectorControls }
{ isEntityAvailable && (
<InspectorControls __experimentalGroup="advanced">
{ hasResolvedCanUserUpdateNavigationMenu &&
Expand Down

0 comments on commit b495580

Please sign in to comment.