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)
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.
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.
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.
Questions? Comments?
Please leave a comment below or @ me at @dlxplugins on X.
Like this tutorial? There's more like it. Subscribe today!
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.