From c3e54b2c2fe9b5664d68a38d1c76599e45c6fa43 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 29 Jun 2021 22:38:35 -0700 Subject: [PATCH] Simplify wide dialog positioning hook and adjust styling --- .../src/blocks/legacy-widget/edit/form.js | 4 +- .../src/blocks/legacy-widget/edit/utils.js | 102 ++++++------------ .../src/blocks/legacy-widget/editor.scss | 48 ++++++--- 3 files changed, 67 insertions(+), 87 deletions(-) diff --git a/packages/widgets/src/blocks/legacy-widget/edit/form.js b/packages/widgets/src/blocks/legacy-widget/edit/form.js index 1ef2f57e1c597e..4bca14ab26ddb7 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/form.js +++ b/packages/widgets/src/blocks/legacy-widget/edit/form.js @@ -19,7 +19,7 @@ import { closeSmall } from '@wordpress/icons'; * Internal dependencies */ import Control from './control'; -import { useBudgeYAxisBy } from './utils'; +import { useBudgeTopBy } from './utils'; export default function Form( { title, @@ -131,7 +131,7 @@ function WideFormDialog( { isVisible, children } ) { const { ref: budgeRef, resizeObserver, - } = useBudgeYAxisBy( containerRef.current, { isEnabled: isVisible } ); + } = useBudgeTopBy( containerRef.current, { isEnabled: isVisible } ); return (
{ - const rect = scrollContextRef.current.getBoundingClientRect(); - subjectRef.current.style.maxHeight = rect.height + 'px'; - setScrollBounds( rect ); + const { defaultView } = subjectRef.current.ownerDocument; + setBounds( { start: 0, end: defaultView.innerHeight } ); }; } - // Handles window resizes to update scroll bounds - useEffect( () => { + // Sets the bounds height and handles window resizes to update it + useLayoutEffect( () => { if ( ! hasSubject || ! hasObjective || ! isEnabled ) { return; } + boundsUpdaterRef.current(); const { defaultView } = objective.ownerDocument; const updateBounds = boundsUpdaterRef.current; defaultView.addEventListener( 'resize', updateBounds ); return () => defaultView.removeEventListener( 'resize', updateBounds ); }, [ hasObjective, hasSubject, isEnabled ] ); - // Handles mutations on the scrolling element to update scroll bounds - useLayoutEffect( () => { - if ( ! hasScrollContext || ! isEnabled ) { - return; - } - boundsUpdaterRef.current(); - const { MutationObserver } = objective.ownerDocument.defaultView; - const observer = new MutationObserver( boundsUpdaterRef.current ); - observer.observe( scrollContextRef.current, { attributes: true } ); - return () => observer.disconnect(); - }, [ scrollContextHasChanged, isEnabled ] ); - const [ resizeObserver, contentSize ] = useResizeObserver(); // Handles scrolling, if needed, to update subject position useLayoutEffect( () => { - if ( - ! isEnabled || - ! hasSubject || - ! hasObjective || - ! hasScrollContext - ) { + if ( ! isEnabled || ! hasSubject || ! hasObjective ) { return; } // The subject fills the bounds so scroll handling is not needed. // Positions subject at the top of bounds and returns. - if ( contentSize.height >= scrollBounds.height ) { - subjectRef.current.style.top = scrollBounds.top + 'px'; + if ( contentSize.height >= boundsEnd ) { + // subjectRef.current.style.top = '0px'; + subjectRef.current.style.setProperty( '--budge-top', '0px' ); return; } const layout = () => { @@ -105,29 +67,26 @@ export function useBudgeYAxisBy( objective, { isEnabled } ) { let { top } = objectiveRect; const height = contentSize.height; const bottom = top + height; - const { bottom: boundsBottom, top: boundsTop } = scrollBounds; - if ( top < boundsTop || bottom > boundsBottom ) { - const fromTop = Math.abs( boundsTop - top ); - const fromBottom = Math.abs( boundsBottom - bottom ); - top = fromTop < fromBottom ? boundsTop : boundsBottom - height; + if ( top < boundsStart || bottom > boundsEnd ) { + const fromTop = Math.abs( boundsStart - top ); + const fromBottom = Math.abs( boundsEnd - bottom ); + top = fromTop < fromBottom ? boundsStart : boundsEnd - height; } - subjectRef.current.style.top = top + 'px'; + subjectRef.current.style.setProperty( '--budge-top', top + 'px' ); }; layout(); - const scrollNode = scrollContextRef.current; - const options = { passive: true }; - scrollNode.addEventListener( 'scroll', layout, options ); + const { defaultView } = objective.ownerDocument; + const options = { capture: true, passive: true }; + defaultView.addEventListener( 'scroll', layout, options ); return () => { - scrollNode.removeEventListener( 'scroll', layout, options ); + defaultView.removeEventListener( 'scroll', layout, options ); }; }, [ hasSubject, - hasScrollContext, objectiveHasChanged, contentSize.height, - scrollBounds.height, - scrollBounds.top, - scrollBounds.bottom, + boundsStart, + boundsEnd, isEnabled, ] ); @@ -136,8 +95,7 @@ export function useBudgeYAxisBy( objective, { isEnabled } ) { if ( isEnabled && !! subjectRef.current ) { const subject = subjectRef.current; return () => { - subject.style.top = ''; - subject.style.maxHeight = ''; + subject.style.removeProperty( '--budge-top' ); }; } }, [ isEnabled ] ); diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss index 1e54787dc980ed..7a143c20608e0c 100644 --- a/packages/widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/widgets/src/blocks/legacy-widget/editor.scss @@ -12,30 +12,37 @@ $wide-header-height: 46px; background: $white; border-radius: $radius-block-ui; border: 1px solid $gray-900; - padding: $grid-unit-15 - 1px; //Subtract the border width. &.is-wide { flex-direction: column; position: fixed; - top: 0; + top: max(#{$wide-header-height}, var(--budge-top, 0)); left: 299px; min-width: 300px; width: calc(100vw - 299px); max-width: 660px; - max-height: 100%; + max-height: calc(100% - #{$wide-header-height}); padding: 0; + background: none; border-radius: 0; - border: 1px solid #dcdcde; + border: none; - // Include the top and bottom border in the resizeObserver’s height. - > iframe { - margin: -1px 0; - height: calc(100% + 2px) !important; + @media (min-width: 641px) { + // The customizer sidebar has a footer and the bottom of the form + // is offset from it. + padding-bottom: $wide-header-height; + // Allows pointer interaction to pass through. + pointer-events: none; + + // Restores pointer interaction for the content. + .wp-block-legacy-widget__edit-form-header, + .wp-block-legacy-widget__edit-form-body { + pointer-events: auto; + } } .wp-block-legacy-widget__edit-form-header { position: absolute; - top: 0; left: 0; width: 100%; z-index: 1; @@ -45,22 +52,33 @@ $wide-header-height: 46px; background: #f0f0f1; height: $wide-header-height; padding: 0 5px 0 21px; - border-bottom: 1px solid #dcdcde; + margin: 0; + border: 1px solid #dcdcde; } .wp-block-legacy-widget__edit-form-body { overflow: auto; - height: 100%; - // Add the header height to the top and subtract the border width from horizontal sides. - padding: ($wide-header-height + $grid-unit-15) ($grid-unit-15 - 1px) $grid-unit-15; + margin-top: $wide-header-height; + border: 1px solid #dcdcde; + border-top-width: 0; + background: #fff; } } + .wp-block-legacy-widget__edit-form-header { + margin: 0 0 $grid-unit-15 0; + padding: $grid-unit-20 21px 0; + } + .wp-block-legacy-widget__edit-form-body { + padding: 0 $grid-unit-15 $grid-unit-05; + } + .wp-block-legacy-widget__edit-form-title { color: $black; font-family: $default-font; font-size: 14px; font-weight: 600; + margin: 0; } .widget-inside.widget-inside { @@ -121,6 +139,10 @@ $wide-header-height: 46px; } } + .widget { + margin-bottom: 0; + } + // Reset z-index set on https://github.com/WordPress/wordpress-develop/commit/f26d4d37351a55fd1fc5dad0f5fef8f0f964908c. .widget.open, .widget.open:focus-within {