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

CustomGradientPicker: Hard deprecate outer margins #58699

Merged
merged 5 commits into from
Feb 6, 2024
Merged

CustomGradientPicker: Hard deprecate outer margins #58699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
61775bd
CustomGradientPicker: Hard deprecate outer margins
mirka Feb 5, 2024
8301bce
Remove usage in GradientPicker
mirka Feb 5, 2024
e6bf7d1
Remove usage in PaletteEdit
mirka Feb 5, 2024
381db02
Update changelog
mirka Feb 5, 2024
2db4c3e
Merge branch 'trunk' into custom-gradient-picker-margin
mirka Feb 6, 2024
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Breaking Changes

- `CustomGradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58699](https://github.com/WordPress/gutenberg/pull/58699)).
- `AnglePickerControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58700](https://github.com/WordPress/gutenberg/pull/58700)).

### Enhancements
Expand Down
22 changes: 1 addition & 21 deletions packages/components/src/custom-gradient-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import type gradientParser from 'gradient-parser';

/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -140,8 +138,6 @@ const GradientTypePicker = ( {
* ```
*/
export function CustomGradientPicker( {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMargin = false,
value,
onChange,
__experimentalIsRenderedInSidebar = false,
Expand All @@ -165,24 +161,8 @@ export function CustomGradientPicker( {
};
} );

if ( ! __nextHasNoMargin ) {
deprecated(
'Outer margin styles for wp.components.CustomGradientPicker',
{
since: '6.1',
version: '6.4',
hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
}
);
}

return (
<VStack
spacing={ 4 }
className={ classnames( 'components-custom-gradient-picker', {
'is-next-has-no-margin': __nextHasNoMargin,
} ) }
>
<VStack spacing={ 4 } className="components-custom-gradient-picker">
<CustomGradientBar
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/custom-gradient-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,3 @@ const CustomGradientPickerWithState: StoryFn<
};

export const Default = CustomGradientPickerWithState.bind( {} );
Default.args = {
__nextHasNoMargin: true,
};
7 changes: 0 additions & 7 deletions packages/components/src/custom-gradient-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.

.components-custom-gradient-picker {
&:not(.is-next-has-no-margin) {
margin-top: $grid-unit-15;
margin-bottom: $grid-unit-30;
}
}

.components-custom-gradient-picker__gradient-bar {
border-radius: $radius-block-ui;
width: 100%;
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/custom-gradient-picker/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export type CustomGradientPickerProps = {
* can be safely removed once this happens.)
*
* @default false
* @deprecated Default behavior since WP 6.5. Prop can be safely removed.
* @ignore
*/
__nextHasNoMargin?: boolean;
/**
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/gradient-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,6 @@ export function GradientPicker( {
<VStack spacing={ gradients.length ? 4 : 0 }>
{ ! disableCustomGradients && (
<CustomGradientPicker
__nextHasNoMargin
__experimentalIsRenderedInSidebar={
__experimentalIsRenderedInSidebar
}
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/palette-edit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,6 @@ function ColorPickerPopover< T extends Color | Gradient >( {
{ isGradient && (
<div className="components-palette-edit__popover-gradient-picker">
<CustomGradientPicker
__nextHasNoMargin
__experimentalIsRenderedInSidebar
value={ element.gradient }
onChange={ ( newGradient ) => {
Expand Down
Loading