From 1e35e5293b1444a50c1199acde86b16c87a36c66 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 17 Aug 2023 20:04:24 -0400
Subject: [PATCH] Rename vertical stack to block stack (#10032)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris/issues/9984

Documentation improvement will be done in a follow up

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .../AccountConnection.stories.tsx             |  16 ++--
 .../AccountConnection/AccountConnection.tsx   |   6 +-
 .../ActionList/ActionList.stories.tsx         |   6 +-
 .../ActionList/components/Section/Section.tsx |  10 +--
 .../AppProvider/AppProvider.stories.tsx       |   6 +-
 .../src/components/Avatar/Avatar.stories.tsx  |  70 ++++++++---------
 .../src/components/Badge/Badge.stories.tsx    |  22 +++---
 .../src/components/Banner/Banner.stories.tsx  |  18 ++---
 .../src/components/Banner/Banner.tsx          |  22 +++---
 .../BlockStack.scss}                          |  16 ++--
 .../BlockStack.stories.tsx}                   |  54 ++++++-------
 .../BlockStack.tsx}                           |  18 ++---
 .../src/components/BlockStack/index.ts        |   1 +
 .../BlockStack/tests/BlockStack.test.tsx      |  53 +++++++++++++
 .../src/components/Box/Box.stories.tsx        |  14 ++--
 .../src/components/Button/Button.stories.tsx  |  58 +++++++-------
 .../src/components/Card/Card.stories.tsx      |  26 +++---
 .../components/Checkbox/Checkbox.stories.tsx  |   6 +-
 .../src/components/ChoiceList/ChoiceList.tsx  |  10 +--
 .../DatePicker/DatePicker.stories.tsx         |   6 +-
 .../components/Divider/Divider.stories.tsx    |   6 +-
 .../components/DropZone/DropZone.stories.tsx  |  74 +++++++++---------
 .../src/components/DropZone/DropZone.tsx      |   6 +-
 .../components/FileUpload/FileUpload.tsx      |  10 +--
 .../src/components/EmptyState/EmptyState.tsx  |  10 +--
 .../components/Filters/Filters.stories.tsx    |   2 +-
 .../components/FilterPill/FilterPill.tsx      |   6 +-
 .../FormLayout/FormLayout.stories.tsx         |   6 +-
 .../FullscreenBar/FullscreenBar.stories.tsx   |  10 +--
 .../src/components/Icon/Icon.stories.tsx      |   6 +-
 .../KeyboardKey/KeyboardKey.stories.tsx       |   6 +-
 .../LegacyCard/LegacyCard.stories.tsx         |  14 ++--
 .../LegacyTabs/LegacyTabs.stories.tsx         |  26 +++---
 .../components/Listbox/Listbox.stories.tsx    |  30 +++----
 .../MediaCard/MediaCard.stories.tsx           |   6 +-
 .../src/components/MediaCard/MediaCard.tsx    |   6 +-
 .../OptionList/OptionList.stories.tsx         |   6 +-
 .../src/components/OptionList/OptionList.tsx  |   6 +-
 .../components/Popover/Popover.stories.tsx    |  38 ++++-----
 .../RadioButton/RadioButton.stories.tsx       |  18 ++---
 .../Scrollable/Scrollable.stories.tsx         |   6 +-
 .../SettingToggle/SettingToggle.stories.tsx   |  26 +++---
 .../ShadowBevel/ShadowBevel.stories.tsx       |   6 +-
 .../components/SkeletonPage/SkeletonPage.tsx  |  10 +--
 .../SkeletonThumbnail.stories.tsx             |   6 +-
 .../src/components/Tabs/Tabs.stories.tsx      |   6 +-
 .../TextContainer/TextContainer.tsx           |   2 +-
 .../Thumbnail/Thumbnail.stories.tsx           |   6 +-
 .../components/Tooltip/Tooltip.stories.tsx    |  22 +++---
 .../src/components/VerticalStack/index.ts     |   1 -
 .../tests/VerticalStack.test.tsx              |  57 --------------
 .../VideoThumbnail/VideoThumbnail.stories.tsx |  18 ++---
 polaris-react/src/index.ts                    |   4 +-
 .../{vertical-stack.md => block-stack.md}     |   8 +-
 .../content/patterns/variant.md.template      |   2 +-
 .../examples/bleed-specific-direction.tsx     |   6 +-
 ...h-align.tsx => block-stack-with-align.tsx} |  18 ++---
 ...-with-gap.tsx => block-stack-with-gap.tsx} |  10 +--
 ....tsx => block-stack-with-inline-align.tsx} |  22 +++---
 .../pages/examples/box-with-padding.tsx       |   6 +-
 .../examples/card-with-varying-padding.tsx    |   6 +-
 .../examples/divider-with-border-color.tsx    |   6 +-
 ...ensed-with-views-search-filter-sorting.tsx |   6 +-
 .../examples/index-table-small-screen.tsx     |   6 +-
 .../examples/inline-stack-with-align.tsx      |  12 +--
 .../inline-stack-with-block-align.tsx         |   6 +-
 .../pages/examples/inline-stack-with-gap.tsx  |   6 +-
 ...tting-toggle-with-primitive-components.tsx |  14 ++--
 .../{vertical-stack.png => block-stack.png}   | Bin
 .../src/components/TipBanner/TipBanner.tsx    |   6 +-
 70 files changed, 510 insertions(+), 530 deletions(-)
 rename polaris-react/src/components/{VerticalStack/VerticalStack.scss => BlockStack/BlockStack.scss} (60%)
 rename polaris-react/src/components/{VerticalStack/VerticalStack.stories.tsx => BlockStack/BlockStack.stories.tsx} (79%)
 rename polaris-react/src/components/{VerticalStack/VerticalStack.tsx => BlockStack/BlockStack.tsx} (75%)
 create mode 100644 polaris-react/src/components/BlockStack/index.ts
 create mode 100644 polaris-react/src/components/BlockStack/tests/BlockStack.test.tsx
 delete mode 100644 polaris-react/src/components/VerticalStack/index.ts
 delete mode 100644 polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx
 rename polaris.shopify.com/content/components/layout-and-structure/{vertical-stack.md => block-stack.md} (90%)
 rename polaris.shopify.com/pages/examples/{vertical-stack-with-align.tsx => block-stack-with-align.tsx} (82%)
 rename polaris.shopify.com/pages/examples/{vertical-stack-with-gap.tsx => block-stack-with-gap.tsx} (78%)
 rename polaris.shopify.com/pages/examples/{vertical-stack-with-inline-align.tsx => block-stack-with-inline-align.tsx} (80%)
 rename polaris.shopify.com/public/images/components/layout-and-structure/{vertical-stack.png => block-stack.png} (100%)

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
index 5b7996f10a0..bd639d1b20c 100644
--- a/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
+++ b/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
@@ -1,12 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  AccountConnection,
-  Box,
-  Link,
-  Text,
-  VerticalStack,
-} from '@shopify/polaris';
+import {AccountConnection, Box, Link, Text, BlockStack} from '@shopify/polaris';
 
 import {useFeatures} from '../../utilities/features';
 
@@ -17,20 +11,20 @@ export default {
 export function All() {
   return (
     <>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
-      <VerticalStack gap="4">
+      </BlockStack>
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With account connected
         </Text>
         <WithAccountConnected />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
     </>
   );
 }
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
index 49af08061dd..ec28e6cdccf 100644
--- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx
+++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -8,7 +8,7 @@ import {Card} from '../Card';
 import {Box} from '../Box';
 import {InlineStack} from '../InlineStack';
 import {Text} from '../Text';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {useBreakpoints} from '../../utilities/breakpoints';
 
 export interface AccountConnectionProps {
@@ -84,10 +84,10 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <InlineStack gap="4">
           {avatarMarkup}
-          <VerticalStack gap="1">
+          <BlockStack gap="1">
             {titleMarkup}
             {detailsMarkup}
-          </VerticalStack>
+          </BlockStack>
         </InlineStack>
       </SettingAction>
       {termsOfServiceMarkup}
diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
index f4193407293..2681125c0c5 100644
--- a/polaris-react/src/components/ActionList/ActionList.stories.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -7,7 +7,7 @@ import {
   Icon,
   Popover,
   Thumbnail,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 import {
   TickSmallMinor,
@@ -27,7 +27,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="16">
+    <BlockStack gap="16">
       <InAPopover />
       <WithIconsOrImage />
       <WithAnIconAndASuffix />
@@ -36,7 +36,7 @@ export function All() {
       <WithDestructiveItem />
       <WithHelpText />
       <WithAPrefixAndASuffix />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index 0b21d2e1aee..f1d51412c0b 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -8,7 +8,7 @@ import type {
   ActionListSection,
 } from '../../../../types';
 import {InlineStack} from '../../../InlineStack';
-import {VerticalStack} from '../../../VerticalStack';
+import {BlockStack} from '../../../BlockStack';
 
 export interface SectionProps {
   /** Section of action items */
@@ -108,13 +108,9 @@ export function Section({
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
-        <VerticalStack
-          gap="1"
-          as="ul"
-          {...(sectionRole && {role: sectionRole})}
-        >
+        <BlockStack gap="1" as="ul" {...(sectionRole && {role: sectionRole})}>
           {actionMarkup}
-        </VerticalStack>
+        </BlockStack>
       </Box>
     </>
   );
diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
index 34fdf268734..e8e720585de 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
@@ -8,7 +8,7 @@ import {
   Page,
   ResourceList,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 
 export default {
@@ -180,7 +180,7 @@ export const WithSummerEditionsFeature = {
     const CheckFeature = () => {
       return (
         <Card>
-          <VerticalStack gap="4">
+          <BlockStack gap="4">
             <Text
               as="h2"
               variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}
@@ -190,7 +190,7 @@ export const WithSummerEditionsFeature = {
                 polarisSummerEditions2023 ? 'ON' : 'OFF'
               }`}
             </Text>
-          </VerticalStack>
+          </BlockStack>
         </Card>
       );
     };
diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
index 465a9f0afea..b311f18096f 100644
--- a/polaris-react/src/components/Avatar/Avatar.stories.tsx
+++ b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -6,7 +6,7 @@ import {
   Avatar,
   Button,
   Popover,
-  VerticalStack,
+  BlockStack,
   InlineStack,
   Box,
   Text,
@@ -74,14 +74,14 @@ const styleInitialsLongEntries = Object.entries(styleInitialsLong) as Entries<
 
 export function All() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {shapeEntries.map(([shape, shapeLabel]) => (
         <Box key={shape} paddingBlockEnd="2">
-          <VerticalStack gap="3">
+          <BlockStack gap="3">
             <Text as="h2" variant="headingXl">
               Shape: {shapeLabel}
             </Text>
-            <VerticalStack gap="2">
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 Default
               </Text>
@@ -90,8 +90,8 @@ export function All() {
                   <Avatar key={size} shape={shape} size={size} />
                 ))}
               </InlineStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With customer
               </Text>
@@ -100,8 +100,8 @@ export function All() {
                   <Avatar key={size} shape={shape} size={size} customer />
                 ))}
               </InlineStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With image
               </Text>
@@ -115,12 +115,12 @@ export function All() {
                   />
                 ))}
               </InlineStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With name (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsDefaultEntries.map(([style, initials]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -133,13 +133,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With default initials (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsDefaultEntries.map(([style, initials]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -152,13 +152,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With long initials (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsLongEntries.map(([style, initialsLong]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -171,13 +171,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With long and wide initials
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 <InlineStack gap="2" blockAlign="center">
                   {sizeEntries.map(([size]) => (
                     <Avatar
@@ -188,12 +188,12 @@ export function All() {
                     />
                   ))}
                 </InlineStack>
-              </VerticalStack>
-            </VerticalStack>
-          </VerticalStack>
+              </BlockStack>
+            </BlockStack>
+          </BlockStack>
         </Box>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -203,7 +203,7 @@ export function Default() {
 
 export function CircleIconColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="4">
         <Avatar customer size="extraSmall" />
         <Avatar name="AG" size="extraSmall" />
@@ -236,13 +236,13 @@ export function CircleIconColorsSizes() {
         <Avatar name="AB" size="large" />
         <Avatar name="AE" size="large" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function CircleInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="4">
         <Avatar initials="AG" size="extraSmall" />
         <Avatar initials="AA" size="extraSmall" />
@@ -275,7 +275,7 @@ export function CircleInitialsColorsSizes() {
         <Avatar initials="AE" size="large" />
         <Avatar initials="WW" size="large" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -325,7 +325,7 @@ export function CircleImage() {
 
 export function SquareIconColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="4">
         <Avatar customer size="extraSmall" shape="square" />
         <Avatar name="AG" size="extraSmall" shape="square" />
@@ -358,13 +358,13 @@ export function SquareIconColorsSizes() {
         <Avatar name="AB" size="large" shape="square" />
         <Avatar name="AE" size="large" shape="square" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function SquareInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="4">
         <Avatar initials="AG" size="extraSmall" shape="square" />
         <Avatar initials="AA" size="extraSmall" shape="square" />
@@ -397,6 +397,6 @@ export function SquareInitialsColorsSizes() {
         <Avatar initials="AE" size="large" shape="square" />
         <Avatar initials="WW" size="large" shape="square" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx
index 08624660703..543a75328fd 100644
--- a/polaris-react/src/components/Badge/Badge.stories.tsx
+++ b/polaris-react/src/components/Badge/Badge.stories.tsx
@@ -5,7 +5,7 @@ import {
   Badge,
   InlineStack,
   LegacyCard,
-  VerticalStack,
+  BlockStack,
   Text,
   Box,
 } from '@shopify/polaris';
@@ -134,11 +134,11 @@ export function All() {
     <LegacyCard sectioned>
       {sizeEntries.map(([size, sizeLabel]) => (
         <Box key={size} paddingBlockEnd="2">
-          <VerticalStack gap="3">
+          <BlockStack gap="3">
             <Text as="h2" variant="headingXl">
               Size: {sizeLabel}
             </Text>
-            <VerticalStack gap="2">
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 Status only
               </Text>
@@ -153,8 +153,8 @@ export function All() {
                   </Badge>
                 ))}
               </InlineStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 Status with progress
               </Text>
@@ -172,10 +172,10 @@ export function All() {
                   ))}
                 </InlineStack>
               ))}
-            </VerticalStack>
+            </BlockStack>
             {/* Remove `size` condition when micro icons are available */}
             {size === 'large-experimental' && (
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 <Text as="h2" variant="headingXs">
                   Status with icon
                 </Text>
@@ -191,10 +191,10 @@ export function All() {
                     </Badge>
                   ))}
                 </InlineStack>
-              </VerticalStack>
+              </BlockStack>
             )}
             {/* TODO: Re-enable the following examples when designs are available (post se23) */}
-            {/* <VerticalStack gap="2">
+            {/* <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 Status with icon only
               </Text>
@@ -208,8 +208,8 @@ export function All() {
                   />
                 ))}
               </InlineStack>
-            </VerticalStack> */}
-          </VerticalStack>
+            </BlockStack> */}
+          </BlockStack>
         </Box>
       ))}
     </LegacyCard>
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index 6732a9456ea..62eb3ee8151 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -2,7 +2,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  VerticalStack,
+  BlockStack,
   Banner,
   Button,
   Card,
@@ -179,7 +179,7 @@ export function WithFocus() {
 export function InACard() {
   return (
     <Card roundedAbove="sm">
-      <VerticalStack gap="3">
+      <BlockStack gap="3">
         <Text as="h2" variant="headingMd">
           Online store dashboard
         </Text>
@@ -190,7 +190,7 @@ export function InACard() {
           </Text>
         </Banner>
         <Text as="p">View a summary of your online store’s performance.</Text>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -215,7 +215,7 @@ export function InALegacyCard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <VerticalStack gap="1">
+      <BlockStack gap="1">
         <InlineStack gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
@@ -225,7 +225,7 @@ export function WithEndJustifiedContent() {
           </Link>
         </InlineStack>
         <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
-      </VerticalStack>
+      </BlockStack>
     </Banner>
   );
 }
@@ -255,7 +255,7 @@ export function CustomIcon() {
 
 export function All() {
   return (
-    <VerticalStack gap="3">
+    <BlockStack gap="3">
       <Text as="h2" variant="headingMd">
         With dismiss and actions
       </Text>
@@ -394,13 +394,13 @@ export function All() {
           }
         />
       </LegacyCard>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 function AllBanners(props) {
   return (
-    <VerticalStack>
+    <BlockStack>
       <Banner
         title="Default"
         children={<Text as="p">Default status</Text>}
@@ -430,6 +430,6 @@ function AllBanners(props) {
         children={<Text as="p">Critical status</Text>}
         {...props}
       />
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index de1be6e0b52..04d8eafd89e 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/polaris-react/src/components/Banner/Banner.tsx
@@ -12,7 +12,6 @@ import {CancelMinor} from '@shopify/polaris-icons';
 
 import type {Action, DisableableAction, LoadableAction} from '../../types';
 import {Text} from '../Text';
-import {VerticalStack} from '../VerticalStack';
 import type {InlineStackProps} from '../InlineStack';
 import {InlineStack} from '../InlineStack';
 import type {BoxProps} from '../Box';
@@ -27,6 +26,7 @@ import {classNames} from '../../utilities/css';
 import {useBreakpoints} from '../../utilities/breakpoints';
 import {useI18n} from '../../utilities/i18n';
 import {useEventListener} from '../../utilities/use-event-listener';
+import {BlockStack} from '../BlockStack';
 
 import styles from './Banner.scss';
 import type {BannerHandles} from './utilities';
@@ -198,7 +198,7 @@ export function DefaultBanner({
 
   return (
     <Box width="100%">
-      <VerticalStack align="space-between">
+      <BlockStack align="space-between">
         <Box
           background={backgroundColor}
           color={textColor}
@@ -223,13 +223,13 @@ export function DefaultBanner({
         </Box>
         {hasContent && (
           <Box padding={{xs: '3', md: '4'}} paddingBlockStart="3">
-            <VerticalStack gap="2">
+            <BlockStack gap="2">
               <div>{children}</div>
               {actionButtons}
-            </VerticalStack>
+            </BlockStack>
           </Box>
         )}
-      </VerticalStack>
+      </BlockStack>
     </Box>
   );
 }
@@ -273,10 +273,10 @@ export function InlineIconBanner({
               </div>
             ) : null}
             <Box ref={contentNode} width="100%">
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 <div>{children}</div>
                 {actionButtons}
-              </VerticalStack>
+              </BlockStack>
             </Box>
           </InlineStack>
         </Box>
@@ -312,13 +312,13 @@ export function WithinContentContainerBanner({
         <InlineStack gap="1_5-experimental" wrap={false}>
           {bannerIcon}
           <Box width="100%">
-            <VerticalStack gap="2">
-              <VerticalStack gap="05">
+            <BlockStack gap="2">
+              <BlockStack gap="05">
                 {bannerTitle}
                 <div>{children}</div>
-              </VerticalStack>
+              </BlockStack>
               {actionButtons}
-            </VerticalStack>
+            </BlockStack>
           </Box>
         </InlineStack>
         {dismissButton}
diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.scss b/polaris-react/src/components/BlockStack/BlockStack.scss
similarity index 60%
rename from polaris-react/src/components/VerticalStack/VerticalStack.scss
rename to polaris-react/src/components/BlockStack/BlockStack.scss
index 0fa8215f762..d61ba1c6225 100644
--- a/polaris-react/src/components/VerticalStack/VerticalStack.scss
+++ b/polaris-react/src/components/BlockStack/BlockStack.scss
@@ -1,19 +1,19 @@
 @import '../../styles/common';
 
-.VerticalStack {
-  @include responsive-props('vertical-stack', 'gap', 'gap');
+.BlockStack {
+  @include responsive-props('block-stack', 'gap', 'gap');
   // stylelint-disable -- Polaris component custom properties
-  --pc-vertical-stack-align: initial;
-  --pc-vertical-stack-inline-align: initial;
-  --pc-vertical-stack-order: initial;
+  --pc-block-stack-align: initial;
+  --pc-block-stack-inline-align: initial;
+  --pc-block-stack-order: initial;
   // stylelint-enable
   display: flex;
   // stylelint-disable-next-line -- custom property to set flex direction
-  flex-direction: var(--pc-vertical-stack-order);
+  flex-direction: var(--pc-block-stack-order);
   // stylelint-disable-next-line -- custom property to set horizontal alignment
-  align-items: var(--pc-vertical-stack-inline-align);
+  align-items: var(--pc-block-stack-inline-align);
   // stylelint-disable-next-line -- custom property to set vertical alignment
-  justify-content: var(--pc-vertical-stack-align);
+  justify-content: var(--pc-block-stack-align);
 }
 
 .listReset {
diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx b/polaris-react/src/components/BlockStack/BlockStack.stories.tsx
similarity index 79%
rename from polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
rename to polaris-react/src/components/BlockStack/BlockStack.stories.tsx
index 76ea43a473e..b9bed1de887 100644
--- a/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
+++ b/polaris-react/src/components/BlockStack/BlockStack.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, VerticalStack} from '@shopify/polaris';
+import {Box, BlockStack} from '@shopify/polaris';
 
 export default {
-  component: VerticalStack,
-} as ComponentMeta<typeof VerticalStack>;
+  component: BlockStack,
+} as ComponentMeta<typeof BlockStack>;
 
 export function Default() {
   return (
-    <VerticalStack>
+    <BlockStack>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -18,13 +18,13 @@ export function Default() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithGap() {
   return (
-    <VerticalStack gap="8">
+    <BlockStack gap="8">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -34,13 +34,13 @@ export function WithGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithResponsiveGap() {
   return (
-    <VerticalStack gap={{xs: '4', md: '10'}}>
+    <BlockStack gap={{xs: '4', md: '10'}}>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -50,14 +50,14 @@ export function WithResponsiveGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithAlignStart() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="start">
+      <BlockStack gap="4" align="start">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -67,7 +67,7 @@ export function WithAlignStart() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
@@ -75,7 +75,7 @@ export function WithAlignStart() {
 export function WithAlignCenter() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="center">
+      <BlockStack gap="4" align="center">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -85,7 +85,7 @@ export function WithAlignCenter() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
@@ -93,7 +93,7 @@ export function WithAlignCenter() {
 export function WithAlignEnd() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="end">
+      <BlockStack gap="4" align="end">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -103,7 +103,7 @@ export function WithAlignEnd() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
@@ -111,7 +111,7 @@ export function WithAlignEnd() {
 export function WithAlignSpaceAround() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="space-around">
+      <BlockStack gap="4" align="space-around">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -121,7 +121,7 @@ export function WithAlignSpaceAround() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
@@ -129,7 +129,7 @@ export function WithAlignSpaceAround() {
 export function WithAlignSpaceBetween() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="space-between">
+      <BlockStack gap="4" align="space-between">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -139,7 +139,7 @@ export function WithAlignSpaceBetween() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
@@ -147,7 +147,7 @@ export function WithAlignSpaceBetween() {
 export function WithAlignSpaceEvenly() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <VerticalStack gap="4" align="space-evenly">
+      <BlockStack gap="4" align="space-evenly">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -157,14 +157,14 @@ export function WithAlignSpaceEvenly() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
 
 export function WithInlineAlignStart() {
   return (
-    <VerticalStack gap="4" inlineAlign="start">
+    <BlockStack gap="4" inlineAlign="start">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -174,13 +174,13 @@ export function WithInlineAlignStart() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithInlineAlignCenter() {
   return (
-    <VerticalStack gap="4" inlineAlign="center">
+    <BlockStack gap="4" inlineAlign="center">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -190,13 +190,13 @@ export function WithInlineAlignCenter() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithInlineAlignEnd() {
   return (
-    <VerticalStack gap="4" inlineAlign="end">
+    <BlockStack gap="4" inlineAlign="end">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -206,6 +206,6 @@ export function WithInlineAlignEnd() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.tsx b/polaris-react/src/components/BlockStack/BlockStack.tsx
similarity index 75%
rename from polaris-react/src/components/VerticalStack/VerticalStack.tsx
rename to polaris-react/src/components/BlockStack/BlockStack.tsx
index 851b8f3ddd9..ea92bbffadf 100644
--- a/polaris-react/src/components/VerticalStack/VerticalStack.tsx
+++ b/polaris-react/src/components/BlockStack/BlockStack.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
 
-import styles from './VerticalStack.scss';
+import styles from './BlockStack.scss';
 
 type Align =
   | 'start'
@@ -24,7 +24,7 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
 type Gap = ResponsiveProp<SpaceScale>;
 
-export interface VerticalStackProps extends React.AriaAttributes {
+export interface BlockStackProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** HTML Element type
    * @default 'div'
@@ -49,7 +49,7 @@ export interface VerticalStackProps extends React.AriaAttributes {
   >;
 }
 
-export const VerticalStack = ({
+export const BlockStack = ({
   as = 'div',
   children,
   align,
@@ -58,18 +58,18 @@ export const VerticalStack = ({
   id,
   reverseOrder = false,
   ...restProps
-}: VerticalStackProps) => {
+}: BlockStackProps) => {
   const className = classNames(
-    styles.VerticalStack,
+    styles.BlockStack,
     (as === 'ul' || as === 'ol') && styles.listReset,
     as === 'fieldset' && styles.fieldsetReset,
   );
 
   const style = {
-    '--pc-vertical-stack-align': align ? `${align}` : null,
-    '--pc-vertical-stack-inline-align': inlineAlign ? `${inlineAlign}` : null,
-    '--pc-vertical-stack-order': reverseOrder ? 'column-reverse' : 'column',
-    ...getResponsiveProps('vertical-stack', 'gap', 'space', gap),
+    '--pc-block-stack-align': align ? `${align}` : null,
+    '--pc-block-stack-inline-align': inlineAlign ? `${inlineAlign}` : null,
+    '--pc-block-stack-order': reverseOrder ? 'column-reverse' : 'column',
+    ...getResponsiveProps('block-stack', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return React.createElement(
diff --git a/polaris-react/src/components/BlockStack/index.ts b/polaris-react/src/components/BlockStack/index.ts
new file mode 100644
index 00000000000..ebd7bb8aade
--- /dev/null
+++ b/polaris-react/src/components/BlockStack/index.ts
@@ -0,0 +1 @@
+export * from './BlockStack';
diff --git a/polaris-react/src/components/BlockStack/tests/BlockStack.test.tsx b/polaris-react/src/components/BlockStack/tests/BlockStack.test.tsx
new file mode 100644
index 00000000000..23c132fa574
--- /dev/null
+++ b/polaris-react/src/components/BlockStack/tests/BlockStack.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import {BlockStack} from '../BlockStack';
+
+const text = 'This is a stack';
+const children = <p>{text}</p>;
+
+describe('<BlockStack />', () => {
+  it('renders children', () => {
+    const blockStack = mountWithApp(<BlockStack>{children}</BlockStack>);
+
+    expect(blockStack).toContainReactComponent('p', {children: text});
+  });
+
+  it('renders custom properties by default', () => {
+    const blockStack = mountWithApp(<BlockStack>{children}</BlockStack>);
+
+    expect(blockStack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-block-stack-order': 'column',
+      }) as React.CSSProperties,
+    });
+  });
+
+  it('overrides custom properties if they are passed in', () => {
+    const blockStack = mountWithApp(
+      <BlockStack inlineAlign="center" gap="10">
+        {children}
+      </BlockStack>,
+    );
+
+    expect(blockStack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-block-stack-inline-align': 'center',
+        '--pc-block-stack-gap-xs': 'var(--p-space-10)',
+      }) as React.CSSProperties,
+    });
+  });
+
+  it('accepts gap based on breakpoints', () => {
+    const blockStack = mountWithApp(
+      <BlockStack gap={{xs: '2', md: '8'}}>{children}</BlockStack>,
+    );
+
+    expect(blockStack).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-block-stack-gap-md': 'var(--p-space-8)',
+        '--pc-block-stack-gap-xs': 'var(--p-space-2)',
+      }) as React.CSSProperties,
+    });
+  });
+});
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 1e45efceed0..a276298f50d 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {VerticalStack, Text, Box, Icon} from '@shopify/polaris';
+import {BlockStack, Text, Box, Icon} from '@shopify/polaris';
 import {PaintBrushMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -17,7 +17,7 @@ export function Default() {
 
 export function WithBorders() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box background="bg" padding="4" borderWidth="1" borderColor="border">
         <Text as="p">1px solid border</Text>
       </Box>
@@ -100,13 +100,13 @@ export function WithBorders() {
       >
         <Text as="p">5px solid transparent</Text>
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function WithOutline() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box background="bg" padding="4" outlineWidth="1" outlineColor="border">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -151,7 +151,7 @@ export function WithOutline() {
       >
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -165,7 +165,7 @@ export function WithBorderRadius() {
 
 export function WithResponsivePadding() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box
         background="bg"
         padding={{xs: '2', sm: '8'}}
@@ -209,6 +209,6 @@ export function WithResponsivePadding() {
       >
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 53b698b9801..f1d1d851dea 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -5,7 +5,7 @@ import {
   ButtonGroup,
   Card,
   InlineStack,
-  VerticalStack,
+  BlockStack,
   Text,
   Box,
 } from '@shopify/polaris';
@@ -23,8 +23,8 @@ export default {
 export function All() {
   return (
     <div>
-      <VerticalStack gap="8">
-        <VerticalStack gap="4">
+      <BlockStack gap="8">
+        <BlockStack gap="4">
           <Text as="h2">default</Text>
           <Box padding="4">
             <InlineStack gap="5" blockAlign="end">
@@ -80,8 +80,8 @@ export function All() {
               />
             </InlineStack>
           </Card>
-        </VerticalStack>
-        <VerticalStack gap="4">
+        </BlockStack>
+        <BlockStack gap="4">
           <Text as="h2">outline destructive</Text>
           <Box padding="4">
             <InlineStack gap="5" blockAlign="end">
@@ -165,8 +165,8 @@ export function All() {
               />
             </InlineStack>
           </Card>
-        </VerticalStack>
-        <VerticalStack gap="2">
+        </BlockStack>
+        <BlockStack gap="2">
           <Text as="h2">destructive</Text>
           <Box padding="4">
             <InlineStack gap="5" blockAlign="end">
@@ -228,13 +228,13 @@ export function All() {
               />
             </InlineStack>
           </Card>
-        </VerticalStack>
-        <VerticalStack gap="4">
+        </BlockStack>
+        <BlockStack gap="4">
           <Text as="h2">primary</Text>
           <Primary />
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">primary destructive</Text>
           <InlineStack gap="5" blockAlign="end">
             <Button primary destructive>
@@ -260,9 +260,9 @@ export function All() {
               accessibilityLabel="Dismiss"
             />
           </InlineStack>
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">primary sucess</Text>
           <InlineStack gap="5" blockAlign="end">
             <Button primarySuccess>Label</Button>
@@ -285,14 +285,14 @@ export function All() {
               accessibilityLabel="Dismiss"
             />
           </InlineStack>
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">plain</Text>
           <Plain />
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">plain destructive</Text>
           <InlineStack gap="5" blockAlign="end">
             <Button plain destructive>
@@ -329,14 +329,14 @@ export function All() {
               accessibilityLabel="Dismiss"
             />
           </InlineStack>
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">primary plain</Text>
           <PlainPrimary />
-        </VerticalStack>
+        </BlockStack>
 
-        <VerticalStack gap="2">
+        <BlockStack gap="2">
           <Text as="h2">primary plain destructive</Text>
           <InlineStack gap="5" blockAlign="end">
             <Button primary plain destructive>
@@ -363,8 +363,8 @@ export function All() {
               accessibilityLabel="Dismiss"
             />
           </InlineStack>
-        </VerticalStack>
-      </VerticalStack>
+        </BlockStack>
+      </BlockStack>
     </div>
   );
 }
@@ -427,7 +427,7 @@ export function Plain() {
 
 export function PlainPrimary() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box padding="4">
         <InlineStack gap="5" blockAlign="end">
           <Button primary plain>
@@ -485,7 +485,7 @@ export function PlainPrimary() {
           />
         </InlineStack>
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -510,7 +510,7 @@ export function PlainDestructive() {
 
 export function Primary() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box padding="4">
         <InlineStack gap="5" blockAlign="end">
           <Button primary>Label</Button>
@@ -571,7 +571,7 @@ export function Primary() {
           />
         </InlineStack>
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -617,7 +617,7 @@ export function Slim() {
 
 export function Large() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="5" blockAlign="end">
         <Button size="large">Create store</Button>
         <Button size="large" accessibilityLabel="Edit" icon={EditMajor} />
@@ -630,7 +630,7 @@ export function Large() {
           Create store
         </Button>
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx
index 6ffe74d7add..a616a12dd24 100644
--- a/polaris-react/src/components/Card/Card.stories.tsx
+++ b/polaris-react/src/components/Card/Card.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   Card,
-  VerticalStack,
+  BlockStack,
   Bleed,
   Box,
   Divider,
@@ -19,12 +19,12 @@ export default {
 export function Default() {
   return (
     <Card>
-      <VerticalStack gap="5">
+      <BlockStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -38,12 +38,12 @@ export function WithBackgroundSubdued() {
         polarisSummerEditions2023 ? 'bg-secondary-experimental' : 'bg-subdued'
       }
     >
-      <VerticalStack gap="5">
+      <BlockStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -51,12 +51,12 @@ export function WithBackgroundSubdued() {
 export function WithBorderRadiusRoundedAbove() {
   return (
     <Card roundedAbove="sm">
-      <VerticalStack gap="5">
+      <BlockStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -64,12 +64,12 @@ export function WithBorderRadiusRoundedAbove() {
 export function WithResponsivePadding() {
   return (
     <Card padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
-      <VerticalStack gap={{xs: '4', sm: '5'}}>
+      <BlockStack gap={{xs: '4', sm: '5'}}>
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -79,7 +79,7 @@ export function WithSubduedSection() {
 
   return (
     <Card roundedAbove="sm">
-      <VerticalStack gap="5">
+      <BlockStack gap="5">
         <Text as="h3" variant="headingMd">
           Staff accounts
         </Text>
@@ -89,7 +89,7 @@ export function WithSubduedSection() {
             <List.Item>Ezequiel Manno</List.Item>
           </List>
         </Box>
-      </VerticalStack>
+      </BlockStack>
       <Bleed
         marginBlockEnd={{xs: '4', sm: '5'}}
         marginInline={{xs: '4', sm: '5'}}
@@ -103,7 +103,7 @@ export function WithSubduedSection() {
           }
           padding={{xs: '4', sm: '5'}}
         >
-          <VerticalStack gap="2">
+          <BlockStack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts
             </Text>
@@ -111,7 +111,7 @@ export function WithSubduedSection() {
               <List.Item>Felix Crafford</List.Item>
               <List.Item>Ezequiel Manno</List.Item>
             </List>
-          </VerticalStack>
+          </BlockStack>
         </Box>
       </Bleed>
     </Card>
diff --git a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx
index 991d225cae7..69a127e874e 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.stories.tsx
+++ b/polaris-react/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Checkbox, InlineStack, VerticalStack, Card} from '@shopify/polaris';
+import {Checkbox, InlineStack, BlockStack, Card} from '@shopify/polaris';
 
 export default {
   component: Checkbox,
@@ -99,7 +99,7 @@ export function WithBleedAndFill() {
     [],
   );
   return (
-    <VerticalStack gap="6">
+    <BlockStack gap="6">
       <Card padding="4">
         <Checkbox
           label="No bleed"
@@ -134,6 +134,6 @@ export function WithBleedAndFill() {
           onChange={handleChange4}
         />
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
index 066610e986b..452c83dd6ec 100644
--- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx
+++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -4,7 +4,7 @@ import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
@@ -133,18 +133,18 @@ export function ChoiceList({
   );
 
   return (
-    <VerticalStack
+    <BlockStack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
       aria-invalid={error != null}
       id={finalName}
     >
       {titleMarkup}
-      <VerticalStack as="ul" gap={{xs: '4', md: '0'}}>
+      <BlockStack as="ul" gap={{xs: '4', md: '0'}}>
         {choicesMarkup}
-      </VerticalStack>
+      </BlockStack>
       {errorMarkup}
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/DatePicker/DatePicker.stories.tsx b/polaris-react/src/components/DatePicker/DatePicker.stories.tsx
index fb7deecd1a5..7fd6832b300 100644
--- a/polaris-react/src/components/DatePicker/DatePicker.stories.tsx
+++ b/polaris-react/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, Card, DatePicker, VerticalStack} from '@shopify/polaris';
+import {Box, Card, DatePicker, BlockStack} from '@shopify/polaris';
 
 export default {
   component: DatePicker,
@@ -8,7 +8,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Box maxWidth="290px">
         <Card>
           <Default />
@@ -34,7 +34,7 @@ export function All() {
           <WithSpecificDisabledDates />
         </Card>
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
index cc9d8853b2c..1c971565b2b 100644
--- a/polaris-react/src/components/Divider/Divider.stories.tsx
+++ b/polaris-react/src/components/Divider/Divider.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {VerticalStack, Divider, Text} from '@shopify/polaris';
+import {BlockStack, Divider, Text} from '@shopify/polaris';
 
 export default {
   component: Divider,
@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -29,6 +29,6 @@ export function WithBorderStyles() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index 9f2bf0ea8ab..c80ee800681 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -7,7 +7,7 @@ import {
   DropZone,
   List,
   Page,
-  VerticalStack,
+  BlockStack,
   Thumbnail,
   InlineStack,
 } from '@shopify/polaris';
@@ -31,7 +31,7 @@ export function Default() {
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
     <div style={{padding: '0'}}>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         {files.map((file, index) => (
           <InlineStack gap="4" align="center" key={index}>
             <Thumbnail
@@ -51,7 +51,7 @@ export function Default() {
             </div>
           </InlineStack>
         ))}
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 
@@ -86,7 +86,7 @@ export function WithImageFileUpload() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -102,7 +102,7 @@ export function WithImageFileUpload() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   const errorMessage = hasError && (
@@ -121,13 +121,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -183,7 +183,7 @@ export function WithDropOnPage() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -203,7 +203,7 @@ export function WithDropOnPage() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -244,7 +244,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -260,7 +260,7 @@ export function AcceptsOnlySVGFiles() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   const errorMessage = hasError && (
@@ -279,7 +279,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -289,7 +289,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -306,7 +306,7 @@ export function Nested() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -326,7 +326,7 @@ export function Nested() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
@@ -343,8 +343,8 @@ export function Nested() {
 
 export function MediumSized() {
   return (
-    <VerticalStack gap="4">
-      <VerticalStack gap="2">
+    <BlockStack gap="4">
+      <BlockStack gap="2">
         <div>
           <Text as="h2" variant="headingMd">
             Medium sized Drop zone
@@ -355,8 +355,8 @@ export function MediumSized() {
             <DropZone.FileUpload />
           </DropZone>
         </div>
-      </VerticalStack>
-      <VerticalStack gap="2">
+      </BlockStack>
+      <BlockStack gap="2">
         <div>
           <Text as="h2" variant="headingMd">
             Medium sized Drop zone with label and hint
@@ -367,15 +367,15 @@ export function MediumSized() {
             <DropZone.FileUpload actionHint="Accepts .gif" />
           </DropZone>
         </div>
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
 export function SmallSized() {
   return (
-    <VerticalStack gap="4">
-      <VerticalStack gap="2">
+    <BlockStack gap="4">
+      <BlockStack gap="2">
         <div>
           <Text as="h2" variant="headingMd">
             Small sized Drop zone
@@ -386,8 +386,8 @@ export function SmallSized() {
             <DropZone.FileUpload />
           </DropZone>
         </div>
-      </VerticalStack>
-      <VerticalStack gap="2">
+      </BlockStack>
+      <BlockStack gap="2">
         <div>
           <Text as="h2" variant="headingMd">
             Small sized Drop zone with error
@@ -399,8 +399,8 @@ export function SmallSized() {
             <DropZone.FileUpload />
           </DropZone>
         </div>
-      </VerticalStack>
-      <VerticalStack gap="2">
+      </BlockStack>
+      <BlockStack gap="2">
         <div>
           <Text as="h2" variant="headingMd">
             Small sized Drop zone with disabled state
@@ -411,8 +411,8 @@ export function SmallSized() {
             <DropZone.FileUpload />
           </DropZone>
         </div>
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
@@ -432,7 +432,7 @@ export function WithCustomFileUploadText() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -452,7 +452,7 @@ export function WithCustomFileUploadText() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
@@ -480,7 +480,7 @@ export function WithCustomFileDialogTrigger() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {files.map((file, index) => (
         <InlineStack gap="4" align="center" key={index}>
           <Thumbnail
@@ -500,7 +500,7 @@ export function WithCustomFileDialogTrigger() {
           </div>
         </InlineStack>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
@@ -539,7 +539,7 @@ export function Error() {
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
     <div style={{padding: '0'}}>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         {files.map((file, index) => (
           <InlineStack gap="4" align="center" key={index}>
             <Thumbnail
@@ -559,12 +559,12 @@ export function Error() {
             </div>
           </InlineStack>
         ))}
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 
   return (
-    <VerticalStack gap="2">
+    <BlockStack gap="2">
       <div>
         <Text as="h2" variant="headingMd">
           Drop zone with error
@@ -575,7 +575,7 @@ export function Error() {
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx
index 0e1aa8ff671..4c2ec5ece75 100755
--- a/polaris-react/src/components/DropZone/DropZone.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.tsx
@@ -21,7 +21,7 @@ import {useI18n} from '../../utilities/i18n';
 import {isServer} from '../../utilities/target';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {useEventListener} from '../../utilities/use-event-listener';
 
 import {FileUpload} from './components';
@@ -388,14 +388,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
     }
     return (
       <div className={styles.Overlay}>
-        <VerticalStack gap="2" inlineAlign="center">
+        <BlockStack gap="2" inlineAlign="center">
           {size === 'small' && <Icon source={icon} color={iconColor} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}
             </Text>
           )}
-        </VerticalStack>
+        </BlockStack>
       </div>
     );
   }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
index 0c29f5bad70..43febe9eca0 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -10,7 +10,7 @@ import {uploadArrow} from '../../images';
 import {DropZoneContext} from '../../context';
 import {useI18n} from '../../../../utilities/i18n';
 import {createAllowMultipleKey} from '../../utils';
-import {VerticalStack} from '../../../VerticalStack';
+import {BlockStack} from '../../../BlockStack';
 
 import styles from './FileUpload.scss';
 
@@ -59,18 +59,18 @@ export function FileUpload(props: FileUploadProps) {
   switch (size) {
     case 'large':
       viewMarkup = (
-        <VerticalStack inlineAlign="center" gap="2">
+        <BlockStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </VerticalStack>
+        </BlockStack>
       );
       break;
     case 'medium':
       viewMarkup = (
-        <VerticalStack inlineAlign="center" gap="2">
+        <BlockStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </VerticalStack>
+        </BlockStack>
       );
       break;
     case 'small':
diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx
index ef19e2f81c6..79dbe017dab 100644
--- a/polaris-react/src/components/EmptyState/EmptyState.tsx
+++ b/polaris-react/src/components/EmptyState/EmptyState.tsx
@@ -6,7 +6,7 @@ import {Box} from '../Box';
 import {buttonFrom} from '../Button';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {InlineStack} from '../InlineStack';
 
 import styles from './EmptyState.scss';
@@ -120,11 +120,11 @@ export function EmptyState({
   const detailsMarkup =
     textContentMarkup || actionsMarkup || footerContentMarkup ? (
       <Box maxWidth={fullWidth ? '100%' : '400px'}>
-        <VerticalStack inlineAlign="center">
+        <BlockStack inlineAlign="center">
           {textContentMarkup}
           {actionsMarkup}
           {footerContentMarkup}
-        </VerticalStack>
+        </BlockStack>
       </Box>
     ) : null;
 
@@ -135,10 +135,10 @@ export function EmptyState({
       paddingBlockStart="5"
       paddingBlockEnd="16"
     >
-      <VerticalStack inlineAlign="center">
+      <BlockStack inlineAlign="center">
         {imageMarkup}
         {detailsMarkup}
-      </VerticalStack>
+      </BlockStack>
     </Box>
   );
 }
diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
index 75c6e097e3d..a53a27c80ec 100644
--- a/polaris-react/src/components/Filters/Filters.stories.tsx
+++ b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -12,7 +12,7 @@ import {
   ResourceList,
   TextField,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 
 export default {
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
index 365e1f71e29..e7ebbd21d4f 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
@@ -9,7 +9,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {Popover} from '../../../Popover';
 import {Button} from '../../../Button';
-import {VerticalStack} from '../../../VerticalStack';
+import {BlockStack} from '../../../BlockStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {InlineStack} from '../../../InlineStack';
@@ -201,10 +201,10 @@ export function FilterPill({
       >
         <div className={styles.PopoverWrapper}>
           <Popover.Section>
-            <VerticalStack gap="1">
+            <BlockStack gap="1">
               {filter}
               {clearButtonMarkup}
-            </VerticalStack>
+            </BlockStack>
           </Popover.Section>
         </div>
       </Popover>
diff --git a/polaris-react/src/components/FormLayout/FormLayout.stories.tsx b/polaris-react/src/components/FormLayout/FormLayout.stories.tsx
index f280633af69..04a3df61aba 100644
--- a/polaris-react/src/components/FormLayout/FormLayout.stories.tsx
+++ b/polaris-react/src/components/FormLayout/FormLayout.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Card, FormLayout, TextField, VerticalStack} from '@shopify/polaris';
+import {Card, FormLayout, TextField, BlockStack} from '@shopify/polaris';
 
 export default {
   component: FormLayout,
@@ -56,7 +56,7 @@ export function CondensedFieldGroup() {
 
 export function All() {
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <Card>
         <FormLayout>
           <FormLayout.Group
@@ -102,6 +102,6 @@ export function All() {
           </FormLayout.Group>
         </FormLayout>
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx b/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx
index 8cc867a012f..8a885fea2e1 100644
--- a/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx
+++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx
@@ -6,7 +6,7 @@ import {
   ButtonGroup,
   FullscreenBar,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
@@ -20,19 +20,19 @@ export default {
 export function All() {
   return (
     <>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With children
         </Text>
         <WithChildren />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           No children
         </Text>
         <NoChildren />
-      </VerticalStack>
+      </BlockStack>
     </>
   );
 }
diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index c82f2380d94..52b6ad1f8f2 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {VerticalStack, Box, Icon} from '@shopify/polaris';
+import {BlockStack, Box, Icon} from '@shopify/polaris';
 import type {BoxProps, IconProps} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 
@@ -45,13 +45,13 @@ export function WithBackdrop() {
     </Box>
   );
   return (
-    <VerticalStack gap="1">
+    <BlockStack gap="1">
       <BackdropIcon iconColor="base" boxBackground="bg-strong" />
       <BackdropIcon iconColor="highlight" boxBackground="bg-info" />
       <BackdropIcon iconColor="success" boxBackground="bg-success" />
       <BackdropIcon iconColor="warning" boxBackground="bg-warning" />
       <BackdropIcon iconColor="critical" boxBackground="bg-critical" />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx b/polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx
index d04c6c310c4..d63a7d1ca28 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {KeyboardKey, Card, Text, VerticalStack} from '@shopify/polaris';
+import {KeyboardKey, Card, Text, BlockStack} from '@shopify/polaris';
 
 export default {
   component: KeyboardKey,
@@ -75,7 +75,7 @@ export function Small() {
 
 export function All() {
   return (
-    <VerticalStack gap="2">
+    <BlockStack gap="2">
       <Text as="h2" variant="headingMd">
         Default
       </Text>
@@ -92,6 +92,6 @@ export function All() {
         <KeyboardKey size="small">⌘</KeyboardKey>
         <KeyboardKey size="small">h</KeyboardKey>
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx b/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx
index 150e9763e37..d4c4bf9988f 100644
--- a/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx
+++ b/polaris-react/src/components/LegacyCard/LegacyCard.stories.tsx
@@ -14,7 +14,7 @@ import {
   LegacyStack,
   Text,
   TextContainer,
-  VerticalStack,
+  BlockStack,
   Box,
 } from '@shopify/polaris';
 import {ProductsMajor, CancelMajor} from '@shopify/polaris-icons';
@@ -405,7 +405,7 @@ export function WithFlushedSections() {
 
 export function All() {
   return (
-    <VerticalStack gap="2">
+    <BlockStack gap="2">
       <LegacyCard title="All headings">
         <LegacyCard.Section title="Section 1 heading">
           Section 1 content
@@ -508,7 +508,7 @@ export function All() {
       <LegacyCard title="Only one header section" />
       <LegacyCard>
         <LegacyCard.Section title="First outside section">
-          <VerticalStack gap="2">
+          <BlockStack gap="2">
             <Box>
               <LegacyCard.Section subdued>
                 First nested section
@@ -519,10 +519,10 @@ export function All() {
                 Second nested section
               </LegacyCard.Section>
             </Box>
-          </VerticalStack>
+          </BlockStack>
         </LegacyCard.Section>
         <LegacyCard.Section title="Second outside section">
-          <VerticalStack gap="2">
+          <BlockStack gap="2">
             <Box>
               <LegacyCard.Section subdued>
                 First nested section
@@ -533,7 +533,7 @@ export function All() {
                 Second nested section
               </LegacyCard.Section>
             </Box>
-          </VerticalStack>
+          </BlockStack>
         </LegacyCard.Section>
       </LegacyCard>
       <LegacyCard>
@@ -547,7 +547,7 @@ export function All() {
         </LegacyCard.Header>
       </LegacyCard>
       <WithAllElements />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx b/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx
index 5834348818a..705b55a50ae 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx
@@ -5,7 +5,7 @@ import {
   LegacyCard,
   LegacyTabs,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 
 export default {
@@ -14,42 +14,42 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="8">
-      <VerticalStack gap="4">
+    <BlockStack gap="8">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With URL tabs
         </Text>
         <WithUrlTabs />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Fitted
         </Text>
         <Fitted />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With badge content
         </Text>
         <WithBadgeContent />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With custom disclosure
         </Text>
         <WithCustomDisclosure />
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
index c99959cde84..b5e1e8d7433 100644
--- a/polaris-react/src/components/Listbox/Listbox.stories.tsx
+++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -9,7 +9,7 @@ import {
   Listbox,
   LegacyStack,
   AutoSelection,
-  VerticalStack,
+  BlockStack,
   InlineStack,
   Text,
   Box,
@@ -24,55 +24,55 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="8">
-      <VerticalStack gap="4">
+    <BlockStack gap="8">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With loading
         </Text>
         <WithLoading />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With action
         </Text>
         <WithAction />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With custom element
         </Text>
         <WithCustomOptions />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With search
         </Text>
         <WithSearch />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With disabled text option
         </Text>
         <WithDisabledTextOption />
-      </VerticalStack>
+      </BlockStack>
       <Box paddingBlockEnd="3" />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/MediaCard/MediaCard.stories.tsx b/polaris-react/src/components/MediaCard/MediaCard.stories.tsx
index bb4e63871d2..05a9d4b3138 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.stories.tsx
+++ b/polaris-react/src/components/MediaCard/MediaCard.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {MediaCard, VerticalStack, VideoThumbnail} from '@shopify/polaris';
+import {MediaCard, BlockStack, VideoThumbnail} from '@shopify/polaris';
 
 export default {
   component: MediaCard,
@@ -225,11 +225,11 @@ export function All() {
   );
 
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <MediaCardExample title="Default medium" />
       <MediaCardExample title="Default small" size="small" />
       <MediaCardExample title="Portrait medium" portrait />
       <MediaCardExample title="Portrait small" portrait size="small" />
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/MediaCard/MediaCard.tsx b/polaris-react/src/components/MediaCard/MediaCard.tsx
index b43cafa6fa0..77364336efa 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.tsx
+++ b/polaris-react/src/components/MediaCard/MediaCard.tsx
@@ -15,7 +15,7 @@ import {LegacyStack} from '../LegacyStack';
 import {Box} from '../Box';
 import {InlineStack} from '../InlineStack';
 import {useFeatures} from '../../utilities/features';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 
 import styles from './MediaCard.scss';
 
@@ -183,14 +183,14 @@ export function MediaCard({
         <div className={infoContainerClassName}>
           {polarisSummerEditions2023 ? (
             <Box padding="5">
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 <InlineStack wrap={false} align="space-between" gap="2">
                   {headerMarkup}
                   {popoverOrDismissMarkup}
                 </InlineStack>
                 <p className={styles.Description}>{description}</p>
                 {actionMarkup}
-              </VerticalStack>
+              </BlockStack>
             </Box>
           ) : (
             <LegacyCard.Section>
diff --git a/polaris-react/src/components/OptionList/OptionList.stories.tsx b/polaris-react/src/components/OptionList/OptionList.stories.tsx
index a7652c3c73f..bbb84e0f4f8 100644
--- a/polaris-react/src/components/OptionList/OptionList.stories.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.stories.tsx
@@ -10,7 +10,7 @@ import {
   OptionList,
   Popover,
   Thumbnail,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 import {DiscountsMajor, DiscountsMinor} from '@shopify/polaris-icons';
 
@@ -203,7 +203,7 @@ export function WithDisabledOption() {
 
 export function All() {
   return (
-    <VerticalStack gap="2">
+    <BlockStack gap="2">
       <Card padding="0">
         <OptionList
           title="Default"
@@ -433,6 +433,6 @@ export function All() {
           selected={['source']}
         />
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx
index 8b2a7fec58a..fb7faa51c28 100644
--- a/polaris-react/src/components/OptionList/OptionList.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.tsx
@@ -13,7 +13,7 @@ import type {BoxProps} from '../Box';
 import {Text} from '../Text';
 import {Bleed} from '../Bleed';
 import {useFeatures} from '../../utilities/features';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 
 import {Option} from './components';
 
@@ -222,10 +222,10 @@ export function OptionList({
             paddingBlockStart={blockStartPadding}
           >
             {polarisSummerEditions2023 ? (
-              <VerticalStack gap={isFirstOption && sections ? undefined : '0'}>
+              <BlockStack gap={isFirstOption && sections ? undefined : '0'}>
                 {titleMarkup}
                 {option}
-              </VerticalStack>
+              </BlockStack>
             ) : (
               <>
                 {titleMarkup}
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 8c51e39ab47..f6c65e37188 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -18,7 +18,7 @@ import {
   Scrollable,
   EmptySearchResult,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 import {SearchMinor} from '@shopify/polaris-icons';
 
@@ -30,56 +30,56 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="8">
-      <VerticalStack gap="4">
+    <BlockStack gap="8">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With action list
         </Text>
         <WithActionList />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With content and actions
         </Text>
         <WithContentAndActions />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With form components
         </Text>
         <WithFormComponents />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With lazy loaded list
         </Text>
         <WithLazyLoadedList />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With scrollable lazy loaded list
         </Text>
         <WithScrollableLazyLoadedList />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With searchable listbox
         </Text>
         <WithSearchableListbox />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text as="h2" variant="headingXl">
           With loading smaller content
         </Text>
         <WithLoadingSmallerContent />
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
@@ -112,7 +112,7 @@ export function WithActionList() {
 
   return (
     <div style={{height: '250px'}}>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Popover
           active={activePopover === 'popover1'}
           activator={activator}
@@ -135,7 +135,7 @@ export function WithActionList() {
             items={[{content: 'Import file'}, {content: 'Export file'}]}
           />
         </Popover>
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }
diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
index bc56bd9a160..71d7efa3763 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -4,7 +4,7 @@ import {
   RadioButton,
   LegacyStack,
   Card,
-  VerticalStack,
+  BlockStack,
   Text,
   Box,
   Divider,
@@ -83,11 +83,11 @@ export function WithBleed() {
   );
 
   return (
-    <VerticalStack gap="8">
-      <VerticalStack gap="2">
+    <BlockStack gap="8">
+      <BlockStack gap="2">
         <Text as="h2">No Bleed</Text>
         <Card padding="4">
-          <VerticalStack gap="4">
+          <BlockStack gap="4">
             <RadioButton
               label="Accounts are disabled"
               checked={value1 === 'disabled'}
@@ -102,10 +102,10 @@ export function WithBleed() {
               checked={value1 === 'optional'}
               onChange={handleChange1}
             />
-          </VerticalStack>
+          </BlockStack>
         </Card>
-      </VerticalStack>
-      <VerticalStack gap="2">
+      </BlockStack>
+      <BlockStack gap="2">
         <Text as="h2">Bleed</Text>
         <Box width="min-content" background="bg" borderRadius="3">
           <div
@@ -136,7 +136,7 @@ export function WithBleed() {
             />
           </div>
         </Box>
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
index ad795b0b8c7..022aa19cddd 100644
--- a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
+++ b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
@@ -7,7 +7,7 @@ import {
   Banner,
   Box,
   Text,
-  VerticalStack,
+  BlockStack,
   FormLayout,
   TextField,
 } from '@shopify/polaris';
@@ -1170,7 +1170,7 @@ export function UsingInstantScrollToFromRef() {
 
 export function WithShadowOverComplexChildren() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Text as="p" variant="bodyLg" fontWeight="bold">
         NOTE: Red shadow is for demo/debug purposes only.
         <br />
@@ -1293,6 +1293,6 @@ export function WithShadowOverComplexChildren() {
           </p>
         </Box>
       </Scrollable>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
index 1aa989c2802..d4321988984 100644
--- a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
+++ b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
@@ -8,7 +8,7 @@ import {
   Card,
   Button,
   Badge,
-  VerticalStack,
+  BlockStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -124,7 +124,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -133,22 +133,22 @@ export function WithPrimitiveComponents() {
           <InlineStack align="start">{actionMarkup}</InlineStack>
         </Box>
       ) : null}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
     <Card>
-      <VerticalStack gap={{xs: '4', sm: '5'}}>
+      <BlockStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <VerticalStack gap={{xs: '2', sm: '4'}}>
+          <BlockStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </VerticalStack>
+          </BlockStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
@@ -238,7 +238,7 @@ export function WithPrimitiveComponentsAndLongTitle() {
   );
 
   const descriptionMarkup = (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -247,22 +247,22 @@ export function WithPrimitiveComponentsAndLongTitle() {
           <InlineStack align="start">{actionMarkup}</InlineStack>
         </Box>
       ) : null}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
     <Card>
-      <VerticalStack gap={{xs: '4', sm: '5'}}>
+      <BlockStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <VerticalStack gap={{xs: '2', sm: '4'}}>
+          <BlockStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </VerticalStack>
+          </BlockStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
index bbec571a8ec..c3e5be675eb 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import type {BoxProps} from '@shopify/polaris';
-import {Box, VerticalStack, InlineCode} from '@shopify/polaris';
+import {Box, BlockStack, InlineCode} from '@shopify/polaris';
 
 import {useFeatures} from '../../utilities/features';
 
@@ -34,7 +34,7 @@ export function Default() {
   ];
 
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <ShadowBevel boxShadow="md" borderRadius="3">
         <Box background="bg" padding="4">
           Default
@@ -88,6 +88,6 @@ export function Default() {
         ))}
 
       <br />
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 85dac8ae1fc..7f254ace0b0 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {useI18n} from '../../utilities/i18n';
 import {Box} from '../Box';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {InlineStack} from '../InlineStack';
 
 import styles from './SkeletonPage.scss';
@@ -66,7 +66,7 @@ export function SkeletonPage({
   ) : null;
 
   return (
-    <VerticalStack gap="4" inlineAlign="center">
+    <BlockStack gap="4" inlineAlign="center">
       <Box
         width="100%"
         padding="0"
@@ -82,7 +82,7 @@ export function SkeletonPage({
           maxWidth: 'none',
         })}
       >
-        <VerticalStack>
+        <BlockStack>
           <Box
             paddingBlockStart={{xs: '4', md: '5'}}
             paddingBlockEnd={{xs: '4', md: '5'}}
@@ -103,8 +103,8 @@ export function SkeletonPage({
           <Box paddingBlockEnd="2" width="100%">
             {children}
           </Box>
-        </VerticalStack>
+        </BlockStack>
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
diff --git a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.stories.tsx b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.stories.tsx
index c782eeedd3c..7475cc56026 100644
--- a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.stories.tsx
+++ b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.stories.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {SkeletonThumbnail, VerticalStack} from '@shopify/polaris';
+import {SkeletonThumbnail, BlockStack} from '@shopify/polaris';
 
 export function All() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <ExtraSmall />
       <Small />
       <Medium />
       <Large />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/Tabs/Tabs.stories.tsx b/polaris-react/src/components/Tabs/Tabs.stories.tsx
index aaaba0ce5fa..48ff30dafc3 100644
--- a/polaris-react/src/components/Tabs/Tabs.stories.tsx
+++ b/polaris-react/src/components/Tabs/Tabs.stories.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Tabs, VerticalStack, LegacyCard} from '@shopify/polaris';
+import {Tabs, BlockStack, LegacyCard} from '@shopify/polaris';
 
 export default {
   component: Tabs,
@@ -8,14 +8,14 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <Default />
       <InsideOfACard />
       <Fitted />
       <WithActions />
       <WithBadgeContent />
       <WithCustomDisclosure />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 export function Default() {
diff --git a/polaris-react/src/components/TextContainer/TextContainer.tsx b/polaris-react/src/components/TextContainer/TextContainer.tsx
index 9ef6b4e0555..62d2395ca14 100644
--- a/polaris-react/src/components/TextContainer/TextContainer.tsx
+++ b/polaris-react/src/components/TextContainer/TextContainer.tsx
@@ -13,7 +13,7 @@ export interface TextContainerProps {
   children?: React.ReactNode;
 }
 
-/** @deprecated Use VerticalStack instead */
+/** @deprecated Use BlockStack instead */
 export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,
diff --git a/polaris-react/src/components/Thumbnail/Thumbnail.stories.tsx b/polaris-react/src/components/Thumbnail/Thumbnail.stories.tsx
index 50bdc3c79b8..f1e43cbd201 100644
--- a/polaris-react/src/components/Thumbnail/Thumbnail.stories.tsx
+++ b/polaris-react/src/components/Thumbnail/Thumbnail.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {InlineStack, Thumbnail, VerticalStack} from '@shopify/polaris';
+import {InlineStack, Thumbnail, BlockStack} from '@shopify/polaris';
 import {NoteMinor} from '@shopify/polaris-icons';
 
 export default {
@@ -9,7 +9,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack gap="4" blockAlign="center">
         <ExtraSmall />
         <Small />
@@ -17,7 +17,7 @@ export function All() {
         <Large />
       </InlineStack>
       <WithComponentSource />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 43c4c5f825f..9f01b4be3f0 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -10,7 +10,7 @@ import {
   Tooltip,
   Box,
   InlineStack,
-  VerticalStack,
+  BlockStack,
   Popover,
 } from '@shopify/polaris';
 import type {TooltipProps} from '@shopify/polaris';
@@ -21,7 +21,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="16">
+    <BlockStack gap="16">
       <Default />
       <PreferredPosition />
       <Width />
@@ -35,7 +35,7 @@ export function All() {
       <HasUnderline />
       <PersistOnClick />
       <ActiveStates />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -256,8 +256,8 @@ export function VisibleOnlyWithChildInteraction() {
 
 export function WithHoverDelay() {
   return (
-    <VerticalStack gap="4">
-      <VerticalStack gap="2">
+    <BlockStack gap="4">
+      <BlockStack gap="2">
         <Text variant="headingMd" fontWeight="bold" as="h1">
           TEXT EXAMPLE
         </Text>
@@ -278,9 +278,9 @@ export function WithHoverDelay() {
             </Text>
           </Tooltip>
         </InlineStack>
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <Text variant="headingMd" fontWeight="bold" as="h1">
           BUTTON EXAMPLE
         </Text>
@@ -297,8 +297,8 @@ export function WithHoverDelay() {
             <Button>2 seconds hover delay</Button>
           </Tooltip>
         </InlineStack>
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
@@ -538,14 +538,14 @@ export function ActiveStates() {
               }}
             >
               <div style={{padding: '12px'}}>
-                <VerticalStack>
+                <BlockStack>
                   <Text variant="bodyMd" fontWeight="bold" as="span">
                     popoverActive: {popoverActive.toString()}
                   </Text>
                   <Text variant="bodyMd" fontWeight="bold" as="span">
                     tooltipActive: {tooltipActive?.toString()}
                   </Text>
-                </VerticalStack>
+                </BlockStack>
               </div>
             </Popover>
           </Text>
diff --git a/polaris-react/src/components/VerticalStack/index.ts b/polaris-react/src/components/VerticalStack/index.ts
deleted file mode 100644
index 70179f40186..00000000000
--- a/polaris-react/src/components/VerticalStack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './VerticalStack';
diff --git a/polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx b/polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx
deleted file mode 100644
index 06ce83610d8..00000000000
--- a/polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import {mountWithApp} from 'tests/utilities';
-
-import {VerticalStack} from '../VerticalStack';
-
-const text = 'This is a stack';
-const children = <p>{text}</p>;
-
-describe('<VerticalStack />', () => {
-  it('renders children', () => {
-    const verticalStack = mountWithApp(
-      <VerticalStack>{children}</VerticalStack>,
-    );
-
-    expect(verticalStack).toContainReactComponent('p', {children: text});
-  });
-
-  it('renders custom properties by default', () => {
-    const verticalStack = mountWithApp(
-      <VerticalStack>{children}</VerticalStack>,
-    );
-
-    expect(verticalStack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-vertical-stack-order': 'column',
-      }) as React.CSSProperties,
-    });
-  });
-
-  it('overrides custom properties if they are passed in', () => {
-    const verticalStack = mountWithApp(
-      <VerticalStack inlineAlign="center" gap="10">
-        {children}
-      </VerticalStack>,
-    );
-
-    expect(verticalStack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-vertical-stack-inline-align': 'center',
-        '--pc-vertical-stack-gap-xs': 'var(--p-space-10)',
-      }) as React.CSSProperties,
-    });
-  });
-
-  it('accepts gap based on breakpoints', () => {
-    const verticalStack = mountWithApp(
-      <VerticalStack gap={{xs: '2', md: '8'}}>{children}</VerticalStack>,
-    );
-
-    expect(verticalStack).toContainReactComponent('div', {
-      style: expect.objectContaining({
-        '--pc-vertical-stack-gap-md': 'var(--p-space-8)',
-        '--pc-vertical-stack-gap-xs': 'var(--p-space-2)',
-      }) as React.CSSProperties,
-    });
-  });
-});
diff --git a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.stories.tsx b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.stories.tsx
index 13608a25cbb..8a8ebd55555 100644
--- a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.stories.tsx
+++ b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {MediaCard, Text, VerticalStack, VideoThumbnail} from '@shopify/polaris';
+import {MediaCard, Text, BlockStack, VideoThumbnail} from '@shopify/polaris';
 
 export default {
   component: VideoThumbnail,
@@ -8,28 +8,28 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="8">
-      <VerticalStack gap="4">
+    <BlockStack gap="8">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With progress
         </Text>
         <WithProgress />
-      </VerticalStack>
+      </BlockStack>
 
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Outside media card
         </Text>
         <OutsideMediaCard />
-      </VerticalStack>
-    </VerticalStack>
+      </BlockStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index e0b6db19657..e6eba3225ae 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -394,8 +394,8 @@ export type {UnstyledButtonProps} from './components/UnstyledButton';
 export {UnstyledLink} from './components/UnstyledLink';
 export type {UnstyledLinkProps} from './components/UnstyledLink';
 
-export {VerticalStack} from './components/VerticalStack';
-export type {VerticalStackProps} from './components/VerticalStack';
+export {BlockStack} from './components/BlockStack';
+export type {BlockStackProps} from './components/BlockStack';
 
 export {VideoThumbnail} from './components/VideoThumbnail';
 
diff --git a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md b/polaris.shopify.com/content/components/layout-and-structure/block-stack.md
similarity index 90%
rename from polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
rename to polaris.shopify.com/content/components/layout-and-structure/block-stack.md
index e7b60d92134..bd1cd4db87a 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/block-stack.md
@@ -1,5 +1,5 @@
 ---
-title: Vertical stack
+title: Block stack
 description: Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
 category: Layout and structure
 keywords:
@@ -15,15 +15,15 @@ status:
   value: Alpha
   message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
-  - fileName: vertical-stack-with-gap.tsx
+  - fileName: block-stack-with-gap.tsx
     title: Gap
     description: >-
       Control the vertical space between children using the `gap` prop.
-  - fileName: vertical-stack-with-align.tsx
+  - fileName: block-stack-with-align.tsx
     title: Align
     description: >-
       Control the vertical alignment of children using the `align` prop.
-  - fileName: vertical-stack-with-inline-align.tsx
+  - fileName: block-stack-with-inline-align.tsx
     title: Inline align
     description: >-
       Control the horizontal alignment of children using the `inlineAlign` prop.
diff --git a/polaris.shopify.com/content/patterns/variant.md.template b/polaris.shopify.com/content/patterns/variant.md.template
index 39f94544a7a..4635862d45e 100644
--- a/polaris.shopify.com/content/patterns/variant.md.template
+++ b/polaris.shopify.com/content/patterns/variant.md.template
@@ -55,7 +55,7 @@ This pattern uses the <!-- [`Box`](/components/box), ... etc --> components.
 <!-- prettier-ignore -->
 ```javascript {"type":"livePreview","id":"example"}
 <Page divider>
-  <VerticalStack gap="16">Coming Soon</VerticalStack>
+  <BlockStack gap="16">Coming Soon</BlockStack>
 </Page>
 ```
 
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
index 142af46a514..4ebc3d5345b 100644
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {VerticalStack, Bleed, Box, Text, InlineStack} from '@shopify/polaris';
+import {BlockStack, Bleed, Box, Text, InlineStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
-    <VerticalStack gap="6">
+    <BlockStack gap="6">
       <Box
         background="bg"
         borderWidth="1"
@@ -46,7 +46,7 @@ function BleedSpecificDirectionExample() {
           <Placeholder label="marginBlockEnd" />
         </Bleed>
       </Box>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
rename to polaris.shopify.com/pages/examples/block-stack-with-align.tsx
index 6f32899e7a8..66d1692e19d 100644
--- a/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
@@ -1,34 +1,34 @@
 import React from 'react';
-import {VerticalStack, InlineStack, Text, Divider} from '@shopify/polaris';
+import {BlockStack, InlineStack, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function VerticalStackWithAlignExample() {
+function BlockStackWithAlignExample() {
   return (
     <>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <VerticalStack align="start">
+        <BlockStack align="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
+        </BlockStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <VerticalStack align="center">
+        <BlockStack align="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
+        </BlockStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <VerticalStack align="end">
+        <BlockStack align="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
+        </BlockStack>
       </div>
       <Divider />
     </>
@@ -68,4 +68,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(VerticalStackWithAlignExample);
+export default withPolarisExample(BlockStackWithAlignExample);
diff --git a/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
rename to polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
index 27a94f96731..ebd25f4e1a5 100644
--- a/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-gap.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {VerticalStack} from '@shopify/polaris';
+import {BlockStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function VerticalStackWithGapExample() {
+function BlockStackWithGapExample() {
   return (
     <SpacingBackground>
-      <VerticalStack gap="5">
+      <BlockStack gap="5">
         <Placeholder height="48px" />
         <Placeholder height="48px" />
         <Placeholder height="48px" />
-      </VerticalStack>
+      </BlockStack>
     </SpacingBackground>
   );
 }
@@ -40,4 +40,4 @@ const Placeholder = ({height = 'auto'}) => {
   );
 };
 
-export default withPolarisExample(VerticalStackWithGapExample);
+export default withPolarisExample(BlockStackWithGapExample);
diff --git a/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
similarity index 80%
rename from polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
rename to polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
index 39d73128710..50b7028e79c 100644
--- a/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
+++ b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  VerticalStack,
+  BlockStack,
   Page,
   InlineStack,
   Text,
@@ -9,28 +9,28 @@ import {
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function VerticalStackWithInlineAlignExample() {
+function BlockStackWithInlineAlignExample() {
   return (
     <Page>
-      <VerticalStack gap="8">
-        <VerticalStack inlineAlign="start">
+      <BlockStack gap="8">
+        <BlockStack inlineAlign="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
+        </BlockStack>
         <Divider />
-        <VerticalStack inlineAlign="center">
+        <BlockStack inlineAlign="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
+        </BlockStack>
         <Divider />
-        <VerticalStack inlineAlign="end">
+        <BlockStack inlineAlign="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </VerticalStack>
-      </VerticalStack>
+        </BlockStack>
+      </BlockStack>
     </Page>
   );
 }
@@ -68,4 +68,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(VerticalStackWithInlineAlignExample);
+export default withPolarisExample(BlockStackWithInlineAlignExample);
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index 57c8cbece52..58f66a147dc 100644
--- a/polaris.shopify.com/pages/examples/box-with-padding.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {VerticalStack, Box, Text, InlineStack} from '@shopify/polaris';
+import {BlockStack, Box, Text, InlineStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithPaddingExample() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <div
         style={{
           backgroundColor: 'var(--p-color-bg-info-strong)',
@@ -40,7 +40,7 @@ function BoxWithPaddingExample() {
           </Box>
         </div>
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
index 1db08eebc9a..eb7aa1bda1a 100644
--- a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
+++ b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
@@ -1,10 +1,10 @@
-import {Card, Text, VerticalStack} from '@shopify/polaris';
+import {Card, Text, BlockStack} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function CardExample() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Card>
         <Placeholder label="Content inside a card" />
       </Card>
@@ -17,7 +17,7 @@ function CardExample() {
       <Card padding="0">
         <Placeholder label="Content inside a card" />
       </Card>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
index dfa662c37e1..f6a427bdccb 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
+++ b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Divider, Text, VerticalStack} from '@shopify/polaris';
+import {Divider, Text, BlockStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function DividerWithBorderColorExample() {
   return (
-    <VerticalStack gap="5">
+    <BlockStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -22,7 +22,7 @@ function DividerWithBorderColorExample() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
index 9f1a8ba62f4..b4f62b78354 100644
--- a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
@@ -9,7 +9,7 @@ import {
   ChoiceList,
   RangeSlider,
   Badge,
-  VerticalStack,
+  BlockStack,
   InlineStack,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, TabProps} from '@shopify/polaris';
@@ -303,7 +303,7 @@ function IndexTableWithViewsSearchFilterSorting() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <VerticalStack gap="1">
+          <BlockStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -319,7 +319,7 @@ function IndexTableWithViewsSearchFilterSorting() {
               {paymentStatus}
               {fulfillmentStatus}
             </InlineStack>
-          </VerticalStack>
+          </BlockStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
index 83550471681..7ef38257177 100644
--- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
@@ -5,7 +5,7 @@ import {
   Text,
   InlineStack,
   Badge,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -60,7 +60,7 @@ function SimpleSmallScreenIndexTableExample() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <VerticalStack gap="1">
+          <BlockStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -76,7 +76,7 @@ function SimpleSmallScreenIndexTableExample() {
               {paymentStatus}
               {fulfillmentStatus}
             </InlineStack>
-          </VerticalStack>
+          </BlockStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
index 62f8244e157..3d10e690466 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
@@ -1,18 +1,12 @@
 import React from 'react';
-import {
-  VerticalStack,
-  InlineStack,
-  Text,
-  Page,
-  Divider,
-} from '@shopify/polaris';
+import {BlockStack, InlineStack, Text, Page, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithAlignExample() {
   return (
     <Page narrowWidth>
-      <VerticalStack gap="16">
+      <BlockStack gap="16">
         <InlineStack align="start">
           <Placeholder width="106px" label="Start" />
           <Placeholder width="106px" height="20px" showBorder />
@@ -42,7 +36,7 @@ function InlineWithAlignExample() {
           <Placeholder width="106px" height="20px" />
           <Placeholder width="106px" height="20px" showBorder />
         </InlineStack>
-      </VerticalStack>
+      </BlockStack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
index cd966bb675b..85d2feb21a6 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {InlineStack, Text, VerticalStack, Divider} from '@shopify/polaris';
+import {InlineStack, Text, BlockStack, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithBlockAlignExample() {
   return (
-    <VerticalStack gap="8">
+    <BlockStack gap="8">
       <InlineStack blockAlign="start">
         <Placeholder width="106px" label="Start" />
         <Placeholder width="106px" height="20px" showBorder />
@@ -50,7 +50,7 @@ function InlineWithBlockAlignExample() {
         <Placeholder width="106px" minHeight="20px" showBorder />
         <Placeholder width="106px" minHeight="20px" showBorder />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
index b2466068f81..dbd177656d2 100644
--- a/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/inline-stack-with-gap.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {InlineStack, VerticalStack} from '@shopify/polaris';
+import {InlineStack, BlockStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithGapExample() {
   return (
-    <VerticalStack>
+    <BlockStack>
       <InlineStack>
         <SpacingBackground width="436px" height="20px" margin>
           <InlineStack gap="4" wrap={false} blockAlign="center">
@@ -22,7 +22,7 @@ function InlineWithGapExample() {
           <Placeholder width="106px" height="20px" />
         </InlineStack>
       </SpacingBackground>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
index 4f6b5776dd9..33515d2953f 100644
--- a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
+++ b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
@@ -5,7 +5,7 @@ import {
   Card,
   Button,
   Badge,
-  VerticalStack,
+  BlockStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -96,7 +96,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -105,22 +105,22 @@ export function WithPrimitiveComponents() {
           <InlineStack align="start">{actionMarkup}</InlineStack>
         </Box>
       ) : null}
-    </VerticalStack>
+    </BlockStack>
   );
 
   return (
     <Card>
-      <VerticalStack gap={{xs: '4', sm: '5'}}>
+      <BlockStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <VerticalStack gap={{xs: '2', sm: '4'}}>
+          <BlockStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </VerticalStack>
+          </BlockStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </VerticalStack>
+      </BlockStack>
     </Card>
   );
 }
diff --git a/polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png b/polaris.shopify.com/public/images/components/layout-and-structure/block-stack.png
similarity index 100%
rename from polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png
rename to polaris.shopify.com/public/images/components/layout-and-structure/block-stack.png
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
index e15502bb7ff..b83ac8b1308 100644
--- a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
+++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
@@ -1,4 +1,4 @@
-import {VerticalStack, Icon, InlineStack, Text} from '@shopify/polaris';
+import {BlockStack, Icon, InlineStack, Text} from '@shopify/polaris';
 import {InfoMinor} from '@shopify/polaris-icons';
 import styles from './TipBanner.module.scss';
 
@@ -10,7 +10,7 @@ interface Props {
 function TipBanner({title, children}: Props) {
   return (
     <div className={styles.TipBanner}>
-      <VerticalStack gap="2">
+      <BlockStack gap="2">
         <InlineStack gap="2">
           <div>
             <Icon source={InfoMinor} color="highlight" />
@@ -20,7 +20,7 @@ function TipBanner({title, children}: Props) {
           </Text>
         </InlineStack>
         {children}
-      </VerticalStack>
+      </BlockStack>
     </div>
   );
 }