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

Jump to bottom

Inspector Controls: Stabilize the experimental control groups #47105

Merged
merged 11 commits into from
Jan 30, 2023
Merged

Inspector Controls: Stabilize the experimental control groups #47105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
df716e0
Stabilize inspector controls SlotFill groups
aaronrobertshaw Jan 12, 2023
a9e5464
Add deprecation for __experimentalGroup
aaronrobertshaw Jan 13, 2023
ae013cd
Update AdvancedControls SlotFill
aaronrobertshaw Jan 12, 2023
1721c3e
Update non-tabs inspector controls use of slots
aaronrobertshaw Jan 12, 2023
8867545
Stabilize groups use in Inspector Control tabs
aaronrobertshaw Jan 12, 2023
3d34025
Stabilize groups used in block support hooks
aaronrobertshaw Jan 12, 2023
5478054
Stabilize block library uses of group
aaronrobertshaw Jan 12, 2023
4ec133e
Add styles group to match default in settings tab
aaronrobertshaw Jan 19, 2023
926f6db
Alias default inspector controls group as settings
aaronrobertshaw Jan 19, 2023
0363671
Update cover advanced controls after rebase
aaronrobertshaw Jan 25, 2023
a36fbf0
Add version to deprecation messages
aaronrobertshaw Jan 27, 2023
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
18 changes: 10 additions & 8 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,22 +198,23 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
<>
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
group="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
group="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
group="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
group="border"
label={ __( 'Border' ) }
/>
<InspectorControls.Slot group="styles" />
</>
) }
</div>
Expand Down Expand Up @@ -356,22 +357,23 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
) }
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
group="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
group="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
group="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
group="border"
label={ __( 'Border' ) }
/>
<InspectorControls.Slot group="styles" />
<PositionControls />
<div>
<AdvancedControls />
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const AdvancedControls = () => {
title={ __( 'Advanced' ) }
initialOpen={ false }
>
<InspectorControls.Slot __experimentalGroup="advanced" />
<InspectorControls.Slot group="advanced" />
</PanelBody>
);
};
Expand Down
4 changes: 1 addition & 3 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,7 @@ export default function InspectorControlsTabs( {
}

if ( tab.name === TAB_LIST_VIEW.name ) {
return (
<InspectorControls.Slot __experimentalGroup="list" />
);
return <InspectorControls.Slot group="list" />;
}
} }
</TabPanel>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const PositionControls = () => {
title={ __( 'Position' ) }
initialOpen={ false }
>
<InspectorControls.Slot __experimentalGroup="position" />
<InspectorControls.Slot group="position" />
</PanelBody>
);
};
Expand Down
12 changes: 5 additions & 7 deletions packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,22 +28,20 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
</div>
) }
<InspectorControls.Slot
__experimentalGroup="color"
group="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
group="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
group="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
<InspectorControls.Slot group="border" label={ __( 'Border' ) } />
<InspectorControls.Slot group="styles" />
</>
);
};
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export default function useInspectorControlsTabs( blockName ) {
dimensions: dimensionsGroup,
list: listGroup,
position: positionGroup,
styles: stylesGroup,
typography: typographyGroup,
} = InspectorControlsGroups;

Expand All @@ -55,6 +56,7 @@ export default function useInspectorControlsTabs( blockName ) {
...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
];

Expand Down
16 changes: 15 additions & 1 deletion packages/block-editor/src/components/inspector-controls/fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
__experimentalToolsPanelContext as ToolsPanelContext,
} from '@wordpress/components';
import warning from '@wordpress/warning';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand All @@ -19,9 +20,22 @@ import useDisplayBlockControls from '../use-display-block-controls';
import groups from './groups';

export default function InspectorControlsFill( {
__experimentalGroup: group = 'default',
children,
group = 'default',
__experimentalGroup,
} ) {
if ( __experimentalGroup ) {
deprecated(
'`__experimentalGroup` property in `InspectorControlsFill`',
{
since: '6.2',
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
version: '6.4',
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we follow-up on these deprecations as we've reached the target version.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

PR is up removing the deprecations and old experimental prop here: #56023

alternative: '`group`',
}
);
group = __experimentalGroup;
}

const isDisplayed = useDisplayBlockControls();
const Fill = groups[ group ]?.Fill;
if ( ! Fill ) {
Expand Down
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/inspector-controls/fill.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { View } from 'react-native';
import { Children } from '@wordpress/element';
import { BottomSheetConsumer } from '@wordpress/components';
import warning from '@wordpress/warning';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand All @@ -19,9 +20,21 @@ import { BlockSettingsButton } from '../block-settings';

export default function InspectorControlsFill( {
children,
__experimentalGroup: group = 'default',
group = 'default',
__experimentalGroup,
...props
} ) {
if ( __experimentalGroup ) {
deprecated(
'`__experimentalGroup` property in `InspectorControlsFill`',
{
since: '6.2',
version: '6.4',
alternative: '`group`',
}
);
group = __experimentalGroup;
}
const isDisplayed = useDisplayBlockControls();

const Fill = groups[ group ]?.Fill;
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/inspector-controls/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const InspectorControlsTypography = createSlotFill(
'InspectorControlsTypography'
);
const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );

const groups = {
default: InspectorControlsDefault,
Expand All @@ -23,6 +24,8 @@ const groups = {
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
list: InspectorControlsListView,
settings: InspectorControlsDefault, // Alias for default.
styles: InspectorControlsStyles,
typography: InspectorControlsTypography,
position: InspectorControlsPosition,
};
Expand Down
8 changes: 2 additions & 6 deletions packages/block-editor/src/components/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,10 @@ InspectorControls.Slot = InspectorControlsSlot;

// This is just here for backward compatibility.
export const InspectorAdvancedControls = ( props ) => {
return (
<InspectorControlsFill { ...props } __experimentalGroup="advanced" />
);
return <InspectorControlsFill { ...props } group="advanced" />;
};
InspectorAdvancedControls.Slot = ( props ) => {
return (
<InspectorControlsSlot { ...props } __experimentalGroup="advanced" />
);
return <InspectorControlsSlot { ...props } group="advanced" />;
};
InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';

Expand Down
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/inspector-controls/slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
import warning from '@wordpress/warning';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand All @@ -15,10 +16,22 @@ import BlockSupportSlotContainer from './block-support-slot-container';
import groups from './groups';

export default function InspectorControlsSlot( {
__experimentalGroup: group = 'default',
__experimentalGroup,
group = 'default',
label,
...props
} ) {
if ( __experimentalGroup ) {
deprecated(
'`__experimentalGroup` property in `InspectorControlsSlot`',
{
since: '6.2',
version: '6.4',
alternative: '`group`',
}
);
group = __experimentalGroup;
}
const Slot = groups[ group ]?.Slot;
const slot = useSlot( Slot?.__unstableName );
const fills = useSlotFills( Slot?.__unstableName );
Expand Down
15 changes: 14 additions & 1 deletion packages/block-editor/src/components/inspector-controls/slot.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,29 @@
* WordPress dependencies
*/
import warning from '@wordpress/warning';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import groups from './groups';

export default function InspectorControlsSlot( {
__experimentalGroup: group = 'default',
__experimentalGroup,
group = 'default',
...props
} ) {
if ( __experimentalGroup ) {
deprecated(
'`__experimentalGroup` property in `InspectorControlsSlot`',
{
since: '6.2',
version: '6.4',
alternative: '`group`',
}
);
group = __experimentalGroup;
}
const Slot = groups[ group ]?.Slot;
if ( ! Slot ) {
warning( `Unknown InspectorControl group "${ group }" provided.` );
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const withInspectorControl = createHigherOrderComponent(
<>
<BlockEdit { ...props } />
{ isWeb && (
<InspectorControls __experimentalGroup="advanced">
<InspectorControls group="advanced">
{ textControl }
</InspectorControls>
) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/border.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ export function BorderPanel( props ) {
const hydratedBorder = getBorderObject( attributes, colors );

return (
<InspectorControls __experimentalGroup="border">
<InspectorControls group="border">
{ ( isWidthSupported || isColorSupported ) && (
<ToolsPanelItem
hasValue={ () => hasBorderValue( props ) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default function ColorPanel( {
const colorGradientSettings = useMultipleOriginColorsAndGradients();

return (
<InspectorControls __experimentalGroup="color">
<InspectorControls group="color">
<ColorGradientSettingsDropdown
enableAlpha={ enableAlpha }
panelId={ clientId }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/custom-class-name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const withInspectorControl = createHigherOrderComponent(
return (
<>
<BlockEdit { ...props } />
<InspectorControls __experimentalGroup="advanced">
<InspectorControls group="advanced">
<TextControl
__nextHasNoMarginBottom
autoComplete="off"
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/dimensions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export function DimensionsPanel( props ) {

return (
<>
<InspectorControls __experimentalGroup="dimensions">
<InspectorControls group="dimensions">
{ ! isPaddingDisabled && (
<ToolsPanelItem
className={ spacingClassnames }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ export function PositionPanel( props ) {
return Platform.select( {
web:
options.length > 1 ? (
<InspectorControls __experimentalGroup="position">
<InspectorControls group="position">
<BaseControl className="block-editor-hooks__position-selection">
<CustomSelectControl
__nextUnconstrainedWidth
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export function TypographyPanel( props ) {
} );

return (
<InspectorControls __experimentalGroup="typography">
<InspectorControls group="typography">
{ ! isFontFamilyDisabled && (
<ToolsPanelItem
hasValue={ () => hasFontFamilyValue( props ) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ function ButtonEdit( props ) {
setAttributes={ setAttributes }
/>
</InspectorControls>
<InspectorControls __experimentalGroup="advanced">
<InspectorControls group="advanced">
<TextControl
__nextHasNoMarginBottom
label={ __( 'Link rel' ) }
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/comments/edit/comments-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function CommentsInspectorControls( {
};
return (
<InspectorControls>
<InspectorControls __experimentalGroup="advanced">
<InspectorControls group="advanced">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/cover/edit/inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export default function CoverInspectorControls( {
</PanelBody>
) }
</InspectorControls>
<InspectorControls __experimentalGroup="color">
<InspectorControls group="color">
<ColorGradientSettingsDropdown
__experimentalIsRenderedInSidebar
settings={ [
Expand Down Expand Up @@ -304,7 +304,7 @@ export default function CoverInspectorControls( {
/>
</ToolsPanelItem>
</InspectorControls>
<InspectorControls __experimentalGroup="dimensions">
<InspectorControls group="dimensions">
<ToolsPanelItem
hasValue={ () => !! minHeight }
label={ __( 'Minimum height' ) }
Expand Down Expand Up @@ -335,7 +335,7 @@ export default function CoverInspectorControls( {
/>
</ToolsPanelItem>
</InspectorControls>
<InspectorControls __experimentalGroup="advanced">
<InspectorControls group="advanced">
<SelectControl
__nextHasNoMarginBottom
label={ __( 'HTML element' ) }
Expand Down
Loading