Create a Dynamic Block Layout Based on Container Size Using useResizeObserver

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 packageOpens in a new window.

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 fileOpens in a new window

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)

Pin itWebShare

Step 2: Call the useResizeObject hookOpens in a new window

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 nameOpens in a new window

I’ll use NPM package classnamesOpens in a new window 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 classnamesOpens in a new window to format my CSS classes and passing modiferClassNames and adding it to useBlockProps.

Pin itWebShare

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 containerOpens in a new window

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.

Pin itWebShare

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 stylesheetOpens in a new window

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 sizesOpens in a new window

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.

Pin itWebShare

Questions? Comments?Opens in a new window

Please leave a comment below or @ me at @dlxplugins on XOpens in a new window.