Migrate BlockSpacer

The previous BlockSpacer component has been removed. There's no direct replacement. Use <s-stack> with the gap prop to create spacing between sibling elements.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-stack gap="large-200">
      <s-text>First item</s-text>
      <s-text>Second item</s-text>
    </s-stack>
  );
}

import {
  reactExtension,
  BlockSpacer,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Text>First item</Text>
      <BlockSpacer spacing="loose" />
      <Text>Second item</Text>
    </>
  );
}

Anchor to Spacing valuesSpacing values

The previous BlockSpacer spacing values map to the Polaris stack gap token scale:

The new token scale also adds 'small-500', 'small-300', 'small-100', 'small', 'large', 'large-100', 'large-300', and 'large-400'.

For more on the scale system, see Scale.