Direction block and vertical, what's the main differences?

Extensions
1

We’re updating our components to use the new Shopify POS API (2025-07). I noticed that the Stack component’s direction attribute has deprecated values—vertical and horizontal are now replaced by block and inline.

When I updated vertical to block, the component initially appeared to apply the gap spacing correctly. However, after making the change, the UI broke completely.

Could you help me understand the key differences between these direction values and what might be causing the layout to break?

For reference, here’s how it looked before using direction=vertical:

direction-vertical
direction-vertical942×2048 96.9 KB

After using direction=block

direction-block
direction-block942×2048 77.2 KB

2

Hi @candidogomes-smile ! IIRC, the default alignContents, justifyContent and alignItems values changed to be aligned with the rest of the surfaces. I believe you need to assign ‘stretch‘ to `alignContent`. I don’t have your exact code though, so this is just a guess based off of what I’m seeing.

3

@JS_Goupil I’ve found the issue; it was the composition component. We tried a new approach to build the component using composition, but it didn’t work well during compilation with the Shopify components.

We are trying to adopt this kind of approach: https://www.youtube.com/watch?v=N_WgBU3S9W8

After reverting to a more straightforward implementation, it worked normally.

Another thing I’ve found is that the gap attribute on the Stack component doesn’t work when the children are a map list. For example:

<Stack direction="vertical" gap="800"> // This gap doesn't work
  {objectList.map((item) => (
    <Item
      key={item.id}
      item={item}
    />
  ))}
</Stack>

I’m not sure if this is a known bug.