Skip to content

Commit

Permalink
Move Shadow controls to Border panel (#58466)
Browse files Browse the repository at this point in the history 
* Move shadows to border panel and remove effects

* reword shadow dropdown toggle

* add label style

* compute label for all 3 possible scenarios

* regenerate fixtures

* display shadow controls if border not supported

* remove effects-panel from css

* move shadow control components to own file

* use correct positioning of control label

* fix global styles border panel label

* remove effects panel

* do not display shadow controls by default

* update shadow control labels

* introduce a label for border control if shadows on

* fix an issue with border panel label in global styles

* toggle shadow control based on __experimentalDefaultControls

---------

Co-authored-by: madhusudhand <madhusudhan.dollu@gmail.com>
  • Loading branch information
@vcanales @madhusudhand
vcanales and madhusudhand authored Feb 7, 2024
1 parent 3657ee1 commit d0b9e7a
Show file tree
Hide file tree
Showing 14 changed files with 263 additions and 383 deletions.
12 changes: 6 additions & 6 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
import BlockInfo from '../block-info-slot-fill';
import BlockQuickNavigation from '../block-quick-navigation';
import { getBorderPanelLabel } from '../../hooks/border';

function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
const contentClientIds = useSelect(
Expand Down Expand Up @@ -139,7 +140,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
/>
<InspectorControls.Slot
group="border"
label={ __( 'Border' ) }
label={ getBorderPanelLabel( {
blockName: selectedBlockName,
} ) }
/>
<InspectorControls.Slot group="styles" />
</>
Expand Down Expand Up @@ -248,6 +251,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
[ blockName ]
);
const blockInformation = useBlockDisplayInformation( clientId );
const borderPanelLabel = getBorderPanelLabel( { blockName } );

return (
<div className="block-editor-block-inspector">
Expand Down Expand Up @@ -300,18 +304,14 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
/>
<InspectorControls.Slot
group="border"
label={ __( 'Border' ) }
label={ borderPanelLabel }
/>
<InspectorControls.Slot group="styles" />
<InspectorControls.Slot
group="background"
label={ __( 'Background' ) }
/>
<PositionControls />
<InspectorControls.Slot
group="effects"
label={ __( 'Effects' ) }
/>
<div>
<AdvancedControls />
</div>
Expand Down
73 changes: 72 additions & 1 deletion packages/block-editor/src/components/global-styles/border-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
__experimentalIsDefinedBorder as isDefinedBorder,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalItemGroup as ItemGroup,
BaseControl,
} from '@wordpress/components';
import { useCallback, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
Expand All @@ -17,13 +19,22 @@ import { __ } from '@wordpress/i18n';
import BorderRadiusControl from '../border-radius-control';
import { useColorsPerOrigin } from './hooks';
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { mergeOrigins } from '../../store/get-block-settings';
import { setImmutably } from '../../utils/object';
import { getBorderPanelLabel } from '../../hooks/border';
import { ShadowPopover } from './shadow-panel-components';

function useHasShadowControl( settings ) {
return !! settings?.shadow;
}

export function useHasBorderPanel( settings ) {
const controls = [
useHasBorderColorControl( settings ),
useHasBorderRadiusControl( settings ),
useHasBorderStyleControl( settings ),
useHasBorderWidthControl( settings ),
useHasShadowControl( settings ),
];

return controls.some( Boolean );
Expand Down Expand Up @@ -51,6 +62,7 @@ function BorderToolsPanel( {
value,
panelId,
children,
label,
} ) {
const resetAll = () => {
const updatedValue = resetAllFilter( value );
Expand All @@ -59,7 +71,7 @@ function BorderToolsPanel( {

return (
<ToolsPanel
label={ __( 'Border' ) }
label={ label }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
Expand All @@ -73,6 +85,7 @@ const DEFAULT_CONTROLS = {
radius: true,
color: true,
width: true,
shadow: false,
};

export default function BorderPanel( {
Expand All @@ -82,6 +95,7 @@ export default function BorderPanel( {
inheritedValue = value,
settings,
panelId,
name,
defaultControls = DEFAULT_CONTROLS,
} ) {
const colors = useColorsPerOrigin( settings );
Expand Down Expand Up @@ -136,6 +150,29 @@ export default function BorderPanel( {
}
return !! borderValues;
};
const hasShadowControl = useHasShadowControl( settings );

// Shadow
const shadow = decodeValue( inheritedValue?.shadow );
const shadowPresets = settings?.shadow?.presets;
const mergedShadowPresets = shadowPresets
? mergeOrigins( shadowPresets )
: [];
const setShadow = ( newValue ) => {
const slug = mergedShadowPresets?.find(
( { shadow: shadowName } ) => shadowName === newValue
)?.slug;

onChange(
setImmutably(
value,
[ 'shadow' ],
slug ? `var:preset|shadow|${ slug }` : newValue || undefined
)
);
};
const hasShadow = () => !! value?.shadow;
const resetShadow = () => setShadow( undefined );

const resetBorder = () => {
if ( hasBorderRadius() ) {
Expand Down Expand Up @@ -173,18 +210,30 @@ export default function BorderPanel( {
return {
...previousValue,
border: undefined,
shadow: undefined,
};
}, [] );

const showBorderByDefault =
defaultControls?.color || defaultControls?.width;

const label = getBorderPanelLabel( {
blockName: name,
hasShadowControl,
hasBorderControl:
showBorderColor ||
showBorderStyle ||
showBorderWidth ||
showBorderRadius,
} );

return (
<Wrapper
resetAllFilter={ resetAllFilter }
value={ value }
onChange={ onChange }
panelId={ panelId }
label={ label }
>
{ ( showBorderWidth || showBorderColor ) && (
<ToolsPanelItem
Expand All @@ -204,6 +253,8 @@ export default function BorderPanel( {
value={ border }
__experimentalIsRenderedInSidebar={ true }
size={ '__unstable-large' }
hideLabelFromVision={ ! hasShadowControl }
label={ __( 'Border' ) }
/>
</ToolsPanelItem>
) }
Expand All @@ -223,6 +274,26 @@ export default function BorderPanel( {
/>
</ToolsPanelItem>
) }
{ hasShadowControl && (
<ToolsPanelItem
label={ __( 'Shadow' ) }
hasValue={ hasShadow }
onDeselect={ resetShadow }
isShownByDefault={ defaultControls.shadow }
panelId={ panelId }
>
<BaseControl.VisualLabel as="legend">
{ __( 'Shadow' ) }
</BaseControl.VisualLabel>
<ItemGroup isBordered isSeparated>
<ShadowPopover
shadow={ shadow }
onShadowChange={ setShadow }
settings={ settings }
/>
</ItemGroup>
</ToolsPanelItem>
) }
</Wrapper>
);
}
Loading

1 comment on commit d0b9e7a

@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 d0b9e7a.
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/7809910896
📝 Reported issues:

Please sign in to comment.