diff --git a/package-lock.json b/package-lock.json index 8bb461bcc86606..c3fecca6c64780 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11554,6 +11554,7 @@ "requires": { "@babel/runtime": "^7.9.2", "@wordpress/components": "file:packages/components", + "@wordpress/compose": "file:packages/compose", "@wordpress/data": "file:packages/data", "@wordpress/element": "file:packages/element", "@wordpress/i18n": "file:packages/i18n", diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index ffbde09fe0919a..3361223367be2e 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -14,6 +14,14 @@ $block-inserter-tabs-height: 44px; @include break-medium { position: relative; } + + &__content { + // This improves render performance when scrolling. + // It promotes this element to a dedicated "layer" in the browser. The rendering + // is then assisted by the GPU, which improves performance. + // See: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ + transform: translate3d(0, 0, 0); + } } .block-editor-inserter__popover .block-editor-inserter__menu { diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 5f606745b3940d..7b72a5a8c4ff73 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -266,6 +266,7 @@ function Layout() { + diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index f9450581e4418b..8bd2432158e0b1 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -107,8 +107,10 @@ } } -.edit-post-layout .interface-interface-skeleton__content { - background-color: $light-gray-700; +.edit-post-layout { + .interface-interface-skeleton__content { + background-color: $light-gray-700; + } } .edit-post-layout__inserter-panel { @@ -136,3 +138,15 @@ height: 100%; } } + +.edit-post-sidebar { + // This improves render performance when scrolling. + // It promotes this element to a dedicated "layer" in the browser. The rendering + // is then assisted by the GPU, which improves performance. + // See: https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ + transform: translate3d(0, 0, 0); + + > .components-panel { + transform: translate3d(0, 0, 0); + } +} diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 026acf6654bb51..d28db72e5875d3 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -16,7 +16,6 @@ import { __experimentalBlockSettingsMenuFirstItem, __experimentalUseResizeCanvas as useResizeCanvas, } from '@wordpress/block-editor'; -import { Popover } from '@wordpress/components'; /** * Internal dependencies @@ -38,7 +37,6 @@ function VisualEditor() { > - diff --git a/packages/interface/package.json b/packages/interface/package.json index ee7636477ff810..bcf33d83d7360f 100644 --- a/packages/interface/package.json +++ b/packages/interface/package.json @@ -29,6 +29,7 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@wordpress/components": "file:../components", + "@wordpress/compose": "file:../compose", "@wordpress/data": "file:../data", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 7ba335b9dffa6e..88fe5243fb01a5 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -6,10 +6,15 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useEffect } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { navigateRegions } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { useObserveInterfaceHeight } from './utils'; + function useHTMLClass( className ) { useEffect( () => { const element = @@ -36,6 +41,11 @@ function InterfaceSkeleton( { } ) { useHTMLClass( 'interface-interface-skeleton__html-container' ); + const bodyNodeRef = useRef(); + const { resizeListener } = useObserveInterfaceHeight( { + ref: bodyNodeRef, + } ); + const defaultLabels = { /* translators: accessibility text for the top bar landmark region. */ header: __( 'Header' ), @@ -60,6 +70,7 @@ function InterfaceSkeleton( { 'interface-interface-skeleton' ) } > + { resizeListener } { !! header && (
) } -
+
{ !! leftSidebar && (
{ + const bodyHeight = ref.current?.clientHeight; + if ( bodyHeight ) { + const nextHeight = window.innerHeight - bodyHeight; + // We're using calc with a 100vh offset improve responsiveness + // when resizing the browser's height. Using a fixed pixel value + // directly may result in double scrollbar flickering. + const nextHeightValue = `calc(100vh - ${ nextHeight }px)`; + + // We'll set the value as a custom CSS variable. + // The inner content, sidebar, and complementary areas are + // "subscribed" to this value using CSS. + document.documentElement.style.setProperty( + SKELETON_BODY_HEIGHT_CSS_PROP, + nextHeightValue + ); + } + }; + + useEffect( setBodyHeightValue, [ sizes.height ] ); + + return { resizeListener }; +}