Home / Block and Plugin Tutorials / Create a Dynamic Block Layout Based on Container Size Using useResizeObserver

Create a Dynamic Block Layout Based on Container Size Using useResizeObserver

Learn How to Solve This Problem

While developing Photo Block, a tester sent me a screenshot of my block going out of bounds from its container. I optimized my block for the major screen sizes but never for the size of the container it was in.

After doing some research into how some other blocks do it, I came across the use of useResizeObserver, which is part of the @wordpress/compose NPM package.

Within this short tutorial, I’ll show you how I fixed this problem in Photo Block and how you can adapt it to your own block.

Step 1: Import useResizeObserver in your main block file

For most blocks, your main block file is the same file where you declare useBlockProps. This is typically edit.js or block.js.

You’ll need to add an import statement for useResizeObserver from the @wordpress/compose package.

import { useResizeObserver } from '@wordpress/compose';Code language: JavaScript (javascript)
Sample Block Import Statement With useResizeObserver Import
Sample Block Import Statement With useResizeObserver Import

Step 2: Call the useResizeObject hook

Above where you would call useBlockProps, make a call to useResizeObject and set a CSS variable.

const [ resizeListener, { width } ] = useResizeObserver();
let modifierClassNames;
if ( typeof width === 'number' ) {
	modifierClassNames = {
		'is-layout-large': width >= 700,
		'is-layout-medium': width >= 450 && width < 700,
		'is-layout-small': width < 450,
	};
}Code language: JavaScript (javascript)

The width variable is derived from resizeListener, which we’ll have to place inside a container. From the width, we can derive how large or small a particular container is. In this example, I used values from the core/image block and modified them to suit my block.

Step 3: Modify useBlockProps to take in the CSS class name

I’ll use NPM package classnames to create the CSS classes I need for useBlockProps.

You’ll need to import this one as well:

import classnames from 'classnames';Code language: JavaScript (javascript)

In this example, I’m using classnames to format my CSS classes and passing modiferClassNames and adding it to useBlockProps.

useBlockProps classnames Example
useBlockProps classnames Example

Adding the classes to useBlockProps now allows me to access CSS classes (if available):

  • is-layout-large
  • is-layout-medium
  • is-layout-small

Step 4: Add resizeListener to your container

Find the container where you’re outputting your main block interface and add resizeListener on top of its contents.

const block = (
	<>
		<section className="dlx-photo-block__container dlx-photo-block__block-wrapper">
			{ resizeListener }
			{ initCurrentScreen() }
		</section>
	</>
);Code language: JavaScript (javascript)

resizeListener will stretch to fit its container and relays its width back to the width variable destructured earlier.

resizeListener Code Example
resizeListener Code Example

The width variable sets the CSS class used on the outer container, so now you can style it.

Step 5: Add CSS styles to your editor stylesheet

Here’s an example from my block’s SASS to adapt to its container size:

.is-layout-small {
	.dlx-photo-block__upload-types__container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 15px;
	
		button {
			width: 100%;
			margin-right: 0 !important;
			justify-content: center !important;
		}
	}
	.dlx-photo-block__upload-target__container {
		display: none !important;
	}
	.dlx-photo-block__upload-types-url__container {
		display: grid;
		grid-template-columns: 1fr;
	}
}Code language: SCSS (scss)

Step 6: Test your block inside various container sizes

Try your block in column blocks, group blocks, and others with varying container sizes. If all is well, you will now have a block that adapts to its container size.

Photo Block Demo in Dynamic Container Size
Photo Block Demo in Dynamic Container Size

Questions? Comments?

Please leave a comment below or @ me at @dlxplugins on X.

Like this tutorial? There's more like it. Subscribe today!

Name(Required)

Ronald Huereca
By: Ronald Huereca
Published On: on October 24, 2024

Ronald Huereca founded DLX Plugins in 2022 with the goal of providing deluxe plugins available for download. Find out more about DLX Plugins, check out some tutorials, and check out our plugins.

Leave Your Valuable Feedback

Your email address will not be published. Required fields are marked *

Shopping Cart
  • Your cart is empty.
Scroll to Top