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

Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll #44998

Merged
merged 3 commits into from Oct 18, 2022
Merged

Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll #44998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a3d525
Block Popover: Fix incorrect positioning of padding and margin visual…
BE-Webdesign Oct 16, 2022
62e79d7
Block Popover: Add changelog comment describing bug fix for padding a…
BE-Webdesign Oct 16, 2022
733c9f8
Block Popover: Add shift property documentation to README.md
Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@

- `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))
- `getTypographyClassesAndStyles()`: Ensure that font sizes are transformed into fluid values if fluid typography is activated ([#44852](https://github.com/WordPress/gutenberg/pull/44852))
- `BlockPopover`: Ensure that padding and margin visualizers display in correct position even when scrolling past block. ([#44998](https://github.com/WordPress/gutenberg/pull/44998))

### New features

Expand Down
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/block-popover/README.md
View file
Open in desktop
Expand Up @@ -22,6 +22,14 @@ The client ID of the block representing the bottom position of the popover.
- Type: `String`
- Required: No

#### shift

This determines whether the block popover always shifts into the viewport or remains at its original position. See FloatingUI for more details on shift.

- Type: `Boolean`
- Required: No
- Default: `true`

## BlockPopoverInbetween

### Props
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-popover/index.js
View file
Open in desktop
Expand Up @@ -32,6 +32,7 @@ function BlockPopover(
__unstableCoverTarget = false,
__unstablePopoverSlot,
__unstableContentRef,
shift = true,
...props
},
ref
Expand Down Expand Up @@ -166,7 +167,7 @@ function BlockPopover(
placement="top-start"
resize={ false }
flip={ false }
shift
shift={ shift }
{ ...props }
className={ classnames(
'block-editor-block-popover',
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/margin.js
View file
Open in desktop
Expand Up @@ -231,6 +231,7 @@ export function MarginVisualizer( { clientId, attributes } ) {
clientId={ clientId }
__unstableCoverTarget
__unstableRefreshSize={ margin }
shift={ false }
>
<div className="block-editor__padding-visualizer" style={ style } />
</BlockPopover>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/padding.js
View file
Open in desktop
Expand Up @@ -222,6 +222,7 @@ export function PaddingVisualizer( { clientId, attributes } ) {
clientId={ clientId }
__unstableCoverTarget
__unstableRefreshSize={ padding }
shift={ false }
>
<div className="block-editor__padding-visualizer" style={ style } />
</BlockPopover>
Expand Down