Improve dropcap resizing

pixelgrade · May 18, 2022 · 94a5f00 · 94a5f00
1 parent 28d9061
commit 94a5f00
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/packages/block-library/src/blocks/supernova/frontend.js b/packages/block-library/src/blocks/supernova/frontend.js
@@ -14,3 +14,4 @@ const debouncedResizeAllDropcaps = debounce( resizeAllDropcaps, 100 );
 domReady( resizeAllDropcaps );
 
 window.addEventListener( 'resize', debouncedResizeAllDropcaps );
+window.addEventListener( 'nb:layout', resizeAllDropcaps );
diff --git a/packages/collection/src/frontend.js b/packages/collection/src/frontend.js
@@ -193,6 +193,7 @@ const handleParametricGrid = ( $grid, $block, attributes ) => {
 }
 
 const handleGrids = ( selector ) => {
+
   $( selector ).each( function( i, grid ) {
     const $grid = $( grid );
     const $block = $grid.closest( '[data-layout-style]' );
@@ -210,4 +211,7 @@ const handleGrids = ( selector ) => {
       handleMasonryGrid( $grid, $block, attributes );
     }
   } );
+
+  const resize = new CustomEvent( 'nb:layout' );
+  window.dispatchEvent( resize );
 }
diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js
@@ -379,10 +379,10 @@ export const resizeDropcap = dropcap => {
   const wrapper = dropcap.parentElement;
 
   const dropcapWidth = dropcap.offsetWidth;
-  const wrapperWidth = wrapper.offsetWidth;
+  const wrapperWidth = wrapper.offsetWidth * 0.9;
   const widthRatio = wrapperWidth / dropcapWidth;
   const dropcapHeight = dropcap.offsetHeight;
-  const wrapperHeight = wrapper.offsetHeight;
+  const wrapperHeight = wrapper.offsetHeight * 0.9;
   const heightRatio = wrapperHeight / dropcapHeight;
   const ratio = Math.min( widthRatio, heightRatio );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@ const debouncedResizeAllDropcaps = debounce( resizeAllDropcaps, 100 );
		domReady( resizeAllDropcaps );

		window.addEventListener( 'resize', debouncedResizeAllDropcaps );
		window.addEventListener( 'nb:layout', resizeAllDropcaps );