Skip to content

Commit

Permalink
Fix padding and max-width
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 committed Sep 9, 2024
1 parent ecbd668 commit 33b11ac
Showing 1 changed file with 2 additions and 27 deletions.
29 changes: 2 additions & 27 deletions packages/block-library/src/image/use-max-width-observer.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { useRef, useMemo } from '@wordpress/element';
import { useRef } from '@wordpress/element';
import { useResizeObserver } from '@wordpress/compose';

function useMaxWidthObserver() {
Expand All @@ -26,32 +26,7 @@ function useMaxWidthObserver() {
</div>
);

const maxWidth = useMemo( () => {
const observer = observerRef.current;
if ( ! observer ) {
return width;
}

const win = observer.ownerDocument.defaultView;
const observerStyle = win.getComputedStyle( observer );
const parentStyle = win.getComputedStyle( observer.parentElement );

const isParentBorderBox = parentStyle.boxSizing === 'border-box';
const paddingInline = isParentBorderBox
? 0
: parseFloat( parentStyle.paddingLeft ) +
parseFloat( parentStyle.paddingRight );

const observerMaxWidth = parseFloat( observerStyle.maxWidth );
const contentWidth =
width - ( Number.isNaN( paddingInline ) ? 0 : paddingInline );

return Number.isNaN( observerMaxWidth )
? contentWidth
: Math.min( contentWidth, observerMaxWidth );
}, [ width ] );

return [ maxWidthObserver, maxWidth ];
return [ maxWidthObserver, width ];
}

export { useMaxWidthObserver };

0 comments on commit 33b11ac

Please sign in to comment.