Skip to content

Block Selection Toolbar: Support fixed blocks by flipping toolbar when block goes out of view #46085

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

Closed
andrewserong wants to merge 7 commits into from
Closed

Block Selection Toolbar: Support fixed blocks by flipping toolbar when block goes out of view #46085

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5711462
Try: allow block selection popover toolbar to support fixed block ele…
andrewserong Nov 26, 2022
0caba0d
Update to improve flip position, handling for full height blocks
andrewserong Nov 27, 2022
7f6ec01
Simplify flip logic
andrewserong Nov 27, 2022
76fb3f1
Remove unnecessary scroll handler
andrewserong Dec 5, 2022
e3b8c9c
Add back in removed z-index for edit site header
andrewserong Dec 6, 2022
81dbb54
Add changelog entry, update docs
andrewserong Dec 6, 2022
f52091e
Add background color to widgets header
andrewserong Dec 7, 2022
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
Prev Previous commit
Next Next commit
Add changelog entry, update docs
  • Loading branch information
@andrewserong
andrewserong committed Dec 6, 2022
commit 81dbb54d4f681e1d03b983b56da17849024db3bf
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 @@ -25,6 +25,7 @@
- `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196)).
- `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
- `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
- `Popover`: Add support for padding in `flip` and `shift` props, add `strategy` prop ([#46085](https://github.com/WordPress/gutenberg/pull/46085)).

### Experimental

Expand Down
20 changes: 19 additions & 1 deletion packages/components/src/popover/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,16 @@ Show the popover fullscreen on mobile viewports.

- Required: No

### `flip`: `boolean`
### `flip`: `FlipProps | boolean`

Specifies whether the popover should flip across its axis if there isn't space for it in the normal placement.

When the using a 'top' placement, the popover will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a `right' placement.

The popover will retain its alignment of 'start' or 'end' when flipping.

When passed an object, the amount of padding before flipping can be set using a `padding` property.

- Required: No
- Default: `true`

Expand Down Expand Up @@ -224,6 +226,22 @@ Adjusts the size of the popover to prevent its contents from going out of view w
- Required: No
- Default: `true`

### `shift`: `ShiftProps | boolean`

Enables the popover to shift in order to stay in view when meeting the viewport edges.

When passed an object, the amount of padding before shifting can be set using a `padding` property.

- Required: No
- Default: `true`

### `strategy`: `'absolute' | 'fixed'`

Sets the type of CSS position property to use for the popover.

- Required: No
- Default: `'absolute'`

### `variant`: `'toolbar' | 'unstyled'`

Specifies the popover's style.
Expand Down