Responsive Offset Block
Born of Necessity
The responsive offset block was created specifically because the curved edge sidebar has an option that allows the admin to set a minimum sidebar width and the window width at which to start the reduction.
The responsive offset block allows inner blocks to follow that same movement for a more consistent layout at any window width.
You can also just have fun with it like I’ve done below.
The block itself
This is one of the blocks that renders the front-end, through render.php, completely independently from the edit panel through edit.js. In this case, the block allows the user to add child blocks so save.js returns children from InnerBlockProps saved with BlockProps.
For fun (resize the window)
Adjust the window width to see how the sidebar and content interact on resize.
This is just a silly example of something that can be done. It doesn’t really look good on all screen sizes, so it’s not recommended. It’s just illustrative of how the block works.
For more examples, the home page and the curved edge sidebar post both use the responsive offset block extensively.
