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

Widgets editor: fix block toolbar position after scroll #32212

Merged
merged 3 commits into from
May 27, 2021
Merged

Widgets editor: fix block toolbar position after scroll #32212

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
0c34754
Widgets editor: fix block toolbar position after scroll
ellatrix May 25, 2021
c24336d
Fix for other editors
ellatrix May 25, 2021
dcd066a
Fix unit test
ellatrix May 27, 2021
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: 12 additions & 6 deletions packages/components/src/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ function computeAnchorRect(
anchorRect,
getAnchorRect,
anchorRef = false,
shouldAnchorIncludePadding
shouldAnchorIncludePadding,
container
) {
if ( anchorRect ) {
return anchorRect;
Expand All @@ -61,7 +62,8 @@ function computeAnchorRect(
const rect = getAnchorRect( anchorRefFallback.current );
return offsetIframe(
rect,
rect.ownerDocument || anchorRefFallback.current.ownerDocument
rect.ownerDocument || anchorRefFallback.current.ownerDocument,
container
);
}

Expand All @@ -81,7 +83,8 @@ function computeAnchorRect(
if ( typeof anchorRef?.cloneRange === 'function' ) {
return offsetIframe(
getRectangleFromRange( anchorRef ),
anchorRef.endContainer.ownerDocument
anchorRef.endContainer.ownerDocument,
container
);
}

Expand All @@ -91,7 +94,8 @@ function computeAnchorRect(
if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
const rect = offsetIframe(
anchorRef.getBoundingClientRect(),
anchorRef.ownerDocument
anchorRef.ownerDocument,
container
);

if ( shouldAnchorIncludePadding ) {
Expand All @@ -111,7 +115,8 @@ function computeAnchorRect(
topRect.width,
bottomRect.bottom - topRect.top
),
top.ownerDocument
top.ownerDocument,
container
);

if ( shouldAnchorIncludePadding ) {
Expand Down Expand Up @@ -294,7 +299,8 @@ const Popover = (
anchorRect,
getAnchorRect,
anchorRef,
shouldAnchorIncludePadding
shouldAnchorIncludePadding,
containerRef.current
);

if ( ! anchor ) {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ describe( 'offsetIframe', () => {
} ) );

const rect = child.getBoundingClientRect();
const offsettedRect = offsetIframe( rect, child.ownerDocument );
const offsettedRect = offsetIframe( rect, child.ownerDocument, parent );

expect( offsettedRect.left ).toBe( iframeLeft + childLeft );
expect( offsettedRect.top ).toBe( iframeTop + childTop );
Expand Down
13 changes: 8 additions & 5 deletions packages/components/src/popover/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,19 +328,22 @@ export function computePopoverPosition(
}

/**
* Offsets the given rect by the position of the iframe that contains the element.
* If the owner document is not in an iframe then it returns with the original rect.
* Offsets the given rect by the position of the iframe that contains the
* element. If the owner document is not in an iframe then it returns with the
* original rect. If the popover container document and the anchor document are
* the same, the original rect will also be returned.
*
* @param {DOMRect} rect bounds of the element
* @param {DOMRect} rect bounds of the element
* @param {Document} ownerDocument document of the element
* @param {Element} container The popover container to position.
*
* @return {DOMRect} offsetted bounds
*/
export function offsetIframe( rect, ownerDocument ) {
export function offsetIframe( rect, ownerDocument, container ) {
const { defaultView } = ownerDocument;
const { frameElement } = defaultView;

if ( ! frameElement ) {
if ( ! frameElement || ownerDocument === container.ownerDocument ) {
return rect;
}

Expand Down
14 changes: 7 additions & 7 deletions packages/edit-navigation/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,19 +160,19 @@ export default function Layout( { blockEditorSettings } ) {
/>
) }
{ isBlockEditorReady && (
<BlockTools>
<div
className="edit-navigation-layout__content-area"
ref={ contentAreaRef }
>
<div
className="edit-navigation-layout__content-area"
ref={ contentAreaRef }
>
<BlockTools>
<Editor
isPending={
! hasLoadedMenus
}
blocks={ blocks }
/>
</div>
</BlockTools>
</BlockTools>
</div>
) }
</>
}
Expand Down
3 changes: 3 additions & 0 deletions packages/edit-navigation/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
}

.edit-navigation-layout__content-area {
// Reference element for the block popover position.
position: relative;

// The 10px match that of similar settings pages.
padding: $grid-unit-15 10px 10px 10px;

Expand Down
30 changes: 16 additions & 14 deletions packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,22 @@ export default function WidgetAreasBlockEditorContent( {
blockEditorSettings,
} ) {
return (
<BlockTools>
<KeyboardShortcuts />
<BlockEditorKeyboardShortcuts />
<div className="edit-widgets-block-editor">
<Notices />
<div className="edit-widgets-block-editor editor-styles-wrapper">
<EditorStyles styles={ blockEditorSettings.styles } />
<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList className="edit-widgets-main-block-list" />
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
</div>
</BlockTools>
<BlockTools>
<KeyboardShortcuts />
<BlockEditorKeyboardShortcuts />
<div className="editor-styles-wrapper">
<EditorStyles styles={ blockEditorSettings.styles } />
<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList className="edit-widgets-main-block-list" />
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
</div>
</BlockTools>
</div>
);
}
24 changes: 13 additions & 11 deletions storybook/stories/playground/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,19 @@ function App() {
<div className="playground__sidebar">
<BlockInspector />
</div>
<BlockTools>
<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts.Register />
<BlockEditorKeyboardShortcuts />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</div>
</BlockTools>
<div className="playground__content">
<BlockTools>
<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts.Register />
<BlockEditorKeyboardShortcuts />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</div>
</BlockTools>
</div>
<Popover.Slot />
</BlockEditorProvider>
</SlotFillProvider>
Expand Down
5 changes: 5 additions & 0 deletions storybook/stories/playground/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@
}
}

.playground__content {
// Reference element for the block popover position.
position: relative;
}

.playground__sidebar {
position: fixed;
top: 0;
Expand Down