From 0eed49ebfe89d622115f9ec5cfd2320a01d7b20f Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 4 May 2021 08:06:53 +0200 Subject: [PATCH 1/7] Turn BlockList into a scroll container --- packages/block-library/src/reset.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 8e9894f81b14f4..32ca48b1816fed 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -6,8 +6,6 @@ */ .editor-styles-wrapper { - padding: 8px; - /** * The following styles revert to the browser defaults overriding the WPAdmin styles. * This is only needed while the block editor is not being loaded in an iframe. @@ -17,6 +15,14 @@ line-height: initial; color: initial; + .block-editor-block-list__layout.is-root-container { + box-sizing: border-box; + padding: 8px; + width: 100%; + height: 100%; + overflow: auto; + } + // For full-wide blocks, we compensate for the base padding. // These margins should match the padding value above. .block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] { From a1c2baa507edcbbc7b3c2994562192a84ca931e6 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 4 May 2021 09:23:12 +0200 Subject: [PATCH 2/7] Apply to the writing flow instead --- packages/block-library/src/reset.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 32ca48b1816fed..6eb3074555d4bb 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -15,7 +15,7 @@ line-height: initial; color: initial; - .block-editor-block-list__layout.is-root-container { + & > .block-editor-writing-flow { box-sizing: border-box; padding: 8px; width: 100%; From 2bc13fa782a232d4d8907440d5feec7be059702f Mon Sep 17 00:00:00 2001 From: David Szabo Date: Tue, 4 May 2021 19:42:52 +0200 Subject: [PATCH 3/7] Revert reset.scss --- packages/block-library/src/reset.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss index 6eb3074555d4bb..8e9894f81b14f4 100644 --- a/packages/block-library/src/reset.scss +++ b/packages/block-library/src/reset.scss @@ -6,6 +6,8 @@ */ .editor-styles-wrapper { + padding: 8px; + /** * The following styles revert to the browser defaults overriding the WPAdmin styles. * This is only needed while the block editor is not being loaded in an iframe. @@ -15,14 +17,6 @@ line-height: initial; color: initial; - & > .block-editor-writing-flow { - box-sizing: border-box; - padding: 8px; - width: 100%; - height: 100%; - overflow: auto; - } - // For full-wide blocks, we compensate for the base padding. // These margins should match the padding value above. .block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] { From f4e7af0cd4a6eff0517743f7d54426f0c5262419 Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 5 May 2021 15:32:35 +0200 Subject: [PATCH 4/7] Use the window as scroll container --- .../use-block-props/use-scroll-into-view.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js index 3af1dfea024962..652ddcaa56efaf 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js @@ -47,12 +47,23 @@ export function useScrollIntoView( clientId ) { return; } - const scrollContainer = getScrollContainer( extentNode ); + let scrollContainer = getScrollContainer( extentNode ); - // If there's no scroll container, it follows that there's no scrollbar - // and thus there's no need to try to scroll into view. + // If there's no scroll container, then we check whether the + // node is in an iframe. If it's in an iframe then we check + // if it's scrollable or not. If it's scrollable we proceed + // on and tell the `scrollIntoView` to scroll the iframe. if ( ! scrollContainer ) { - return; + const { ownerDocument } = extentNode; + const isFramed = !! ownerDocument.defaultView?.frameElement; + const scrollingElement = + ownerDocument.scrollingElement || ownerDocument.body; + if ( + isFramed && + scrollingElement.scrollHeight > scrollingElement.clientHeight + ) { + scrollContainer = ownerDocument.defaultView; + } } scrollIntoView( extentNode, scrollContainer, { From 691419e35a8f1ec0bfe2e0646c426441869e844a Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 5 May 2021 15:32:52 +0200 Subject: [PATCH 5/7] Add dom-scroll-into-view patch --- patches/dom-scroll-into-view+1.2.1.patch | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 patches/dom-scroll-into-view+1.2.1.patch diff --git a/patches/dom-scroll-into-view+1.2.1.patch b/patches/dom-scroll-into-view+1.2.1.patch new file mode 100644 index 00000000000000..abf9482fb11f06 --- /dev/null +++ b/patches/dom-scroll-into-view+1.2.1.patch @@ -0,0 +1,25 @@ +diff --git a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js +index 557ed5c..23dfbad 100644 +--- a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js ++++ b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js +@@ -21,6 +21,7 @@ function scrollIntoView(elem, container, config) { + allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll; + + var isWin = util.isWindow(container); ++ var isFramed = !!(isWin && container.frameElement); + var elemOffset = util.offset(elem); + var eh = util.outerHeight(elem); + var ew = util.outerWidth(elem); +@@ -35,7 +36,11 @@ function scrollIntoView(elem, container, config) { + var ww = undefined; + var wh = undefined; + +- if (isWin) { ++ if (isFramed) { ++ container = container.document.scrollingElement || container.document.body; ++ } ++ ++ if (isWin || isFramed) { + win = container; + wh = util.height(win); + ww = util.width(win); From 782544aca7ddc16d2851eab9d4a8afaa57b45b2d Mon Sep 17 00:00:00 2001 From: David Szabo Date: Wed, 5 May 2021 16:52:00 +0200 Subject: [PATCH 6/7] Add missing return --- .../block-list/use-block-props/use-scroll-into-view.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js index 652ddcaa56efaf..167222bbeee4ce 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js @@ -63,6 +63,8 @@ export function useScrollIntoView( clientId ) { scrollingElement.scrollHeight > scrollingElement.clientHeight ) { scrollContainer = ownerDocument.defaultView; + } else { + return; } } From 24c57d79a9737ce6ce9cd647727b348f1c81db1a Mon Sep 17 00:00:00 2001 From: David Szabo Date: Fri, 7 May 2021 11:16:13 +0200 Subject: [PATCH 7/7] Simplify hook --- .../use-block-props/use-scroll-into-view.js | 23 +++++-------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js index 167222bbeee4ce..63f2b5a6c41cad 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js @@ -47,25 +47,14 @@ export function useScrollIntoView( clientId ) { return; } - let scrollContainer = getScrollContainer( extentNode ); + const scrollContainer = + getScrollContainer( extentNode ) || + extentNode.ownerDocument.defaultView; - // If there's no scroll container, then we check whether the - // node is in an iframe. If it's in an iframe then we check - // if it's scrollable or not. If it's scrollable we proceed - // on and tell the `scrollIntoView` to scroll the iframe. + // If there's no scroll container, it follows that there's no scrollbar + // and thus there's no need to try to scroll into view. if ( ! scrollContainer ) { - const { ownerDocument } = extentNode; - const isFramed = !! ownerDocument.defaultView?.frameElement; - const scrollingElement = - ownerDocument.scrollingElement || ownerDocument.body; - if ( - isFramed && - scrollingElement.scrollHeight > scrollingElement.clientHeight - ) { - scrollContainer = ownerDocument.defaultView; - } else { - return; - } + return; } scrollIntoView( extentNode, scrollContainer, {