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

FocalPointPicker with __next40pxDefaultSize #56021

Merged
merged 4 commits into from
Dec 7, 2023
Merged

FocalPointPicker with __next40pxDefaultSize #56021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0550447
__next40pxDefaultSize and size adjustment
richtabor Nov 9, 2023
5ef1b29
Make `__next40pxDefaultSize ` prop opt in
brookewp Nov 20, 2023
a3076ff
Update changelog
brookewp Nov 20, 2023
718a033
Rebase to update changelog
brookewp Dec 6, 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
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 @@ -8,6 +8,7 @@
- `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)).
- `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
- `PaletteEdit`: Gradient pickers to use same width as color pickers ([#56801](https://github.com/WordPress/gutenberg/pull/56801)).
- `FocalPointPicker`: Add opt-in prop for 40px default size ([#56021](https://github.com/WordPress/gutenberg/pull/56021)).

### Bug Fix

Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/focal-point-picker/controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const noop = () => {};

export default function FocalPointPickerControls( {
__nextHasNoMarginBottom,
__next40pxDefaultSize,
hasHelpText,
onChange = noop,
point = {
Expand Down Expand Up @@ -51,8 +52,10 @@ export default function FocalPointPickerControls( {
className="focal-point-picker__controls"
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
hasHelpText={ hasHelpText }
gap={ 4 }
>
<FocalPointUnitControl
__next40pxDefaultSize={ __next40pxDefaultSize }
label={ __( 'Left' ) }
aria-label={ __( 'Focal point left position' ) }
value={ [ valueX, '%' ].join( '' ) }
Expand All @@ -66,6 +69,7 @@ export default function FocalPointPickerControls( {
dragDirection="e"
/>
<FocalPointUnitControl
__next40pxDefaultSize={ __next40pxDefaultSize }
label={ __( 'Top' ) }
aria-label={ __( 'Focal point top position' ) }
value={ [ valueY, '%' ].join( '' ) }
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/focal-point-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
*/
export function FocalPointPicker( {
__nextHasNoMarginBottom,
__next40pxDefaultSize = false,
autoPlay = true,
className,
help,
Expand Down Expand Up @@ -273,6 +274,7 @@ export function FocalPointPicker( {
</MediaWrapper>
<Controls
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
__next40pxDefaultSize={ __next40pxDefaultSize }
hasHelpText={ !! help }
point={ { x, y } }
onChange={ ( value ) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const MediaPlaceholder = styled.div`
`;

export const StyledUnitControl = styled( UnitControl )`
width: 100px;
width: 100%;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
`;

const deprecatedBottomMargin = ( {
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/focal-point-picker/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ export type FocalPointPickerProps = Pick<
* @default false
*/
__nextHasNoMarginBottom?: boolean;
/**
* Start opting into the larger default height that will become the default size in a future version.
*
* @default false
*/
__next40pxDefaultSize?: boolean;
/**
* Autoplays HTML5 video. This only applies to video sources (`url`).
*
Expand Down Expand Up @@ -62,6 +68,7 @@ export type FocalPointPickerProps = Pick<

export type FocalPointPickerControlsProps = {
__nextHasNoMarginBottom?: boolean;
__next40pxDefaultSize?: boolean;
/**
* A bit of extra bottom margin will be added if a `help` text
* needs to be rendered under it.
Expand Down
Loading