@designcrowd/library.brand-page 5.18.8 → 5.18.9-ast-padding-1

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -1,11 +1,10 @@
 <template>
   <div data-component="social-links">
     <div
-      class="tw-pb-8"
       :class="{
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="containerStyles"
+      :style="[containerStyles, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <TextWrapper
@@ -14,7 +13,7 @@
         :text="title"
         element="h1"
         :class="textAlignClass"
-        class="tw-py-8"
+        class="tw-pb-8"
       />
       <SocialLinksItems
         :id="id"
@@ -34,6 +33,7 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
 import type { BrandPageContext, LinksItem } from '@brand-page/models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -51,6 +51,10 @@ const containerStyles = computed((): BrandPageCssStyle => {
   return props.viewModel.backgroundStyles || {};
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const iconStyle = computed((): BrandPageCssStyle => {
   return props.viewModel.iconFillStyles || {};
 });

package/src/brand-page/components/testimonial-section/TestimonialSection.mixin.ts

@@ -3,7 +3,10 @@ import type { PropType } from 'vue';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import type { TestimonialSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
@@ -44,6 +47,9 @@ export default defineComponent({
     }, DEBOUNCE_WAIT_MS);
   },
   computed: {
+    contentPaddingStyle() {
+      return toContentPaddingStyle(this.viewModel);
+    },
     textAlignClass() {
       return {
         'c_testimonial-big-image-text-item':

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -3,7 +3,7 @@
     data-component="testimonial-section"
     class="c_testimonial-image"
     style="container-type: inline-size"
-    :style="viewModel.backgroundStyle"
+    :style="[viewModel.backgroundStyle, contentPaddingStyle]"
   >
     <div
       :class="{
@@ -221,17 +221,15 @@ export default {
   --line-height: 1.5;
   --name-spacing: 0.75rem;
   --title-spacing: 1rem;
-  @apply tw-relative tw-p-24 tw-box-border tw-max-w-full;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+  @apply tw-relative tw-box-border tw-max-w-full;
+  /* Top/bottom padding is config-bound via the Padding Control sliders (BP-5703),
+     applied as an inline style on the root. Horizontal padding stays responsive. */
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
 
 @media (min-width: 767px) {
   .c_testimonial-image {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
     padding-left: 4rem;
     padding-right: 4rem;
   }

package/src/brand-page/components/text/Text.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="!context.isBrandSite"
-      :style="containerStyle"
+      :style="[containerStyle, contentPaddingStyle]"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="containerStyle">
+    <div v-else :style="[containerStyle, contentPaddingStyle]">
       <div
-        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,7 +41,10 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -51,6 +54,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -83,7 +90,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-py-3 tw-px-6';
+  return 'tw-px-6';
 });
 
 const renderText = computed(() => {

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -1,12 +1,12 @@
 <template>
   <section data-component="text-media-section">
     <div
-      class="tw-relative tw-w-full tw-box-border tw-py-8"
+      class="tw-relative tw-w-full tw-box-border"
       :class="{
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
     >
       <div
         :class="[
@@ -148,7 +148,11 @@ import {
   MEDIA_ONLY,
 } from '../../constants';
 import { isHexTransparent } from '@brand-page/utils/color.util';
-import { escapeContentText, getRenderText } from '@brand-page/utils';
+import {
+  escapeContentText,
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {
@@ -171,6 +175,10 @@ const props = defineProps({
   },
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const items = computed(() => props.viewModel.items);
 
 const shouldDisplayText = computed(

package/src/brand-page/components/video/Video.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { VideoViewModel } from '@brand-page/view-models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import {
   DISPLAY_STYLE_PREVIEW,
@@ -22,6 +23,10 @@ export default defineComponent({
     title: 'Video',
   }),
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     arrowStyle(): BrandPageCssStyle {
       return {
         color: this.viewModel.buttonStyles.style?.color,

package/src/brand-page/components/video/Video.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-video">
+  <div class="c-video" :style="contentPaddingStyle">
     <div v-if="viewModel.videoUrl">
       <!-- Start -->
       <div

package/src/brand-page/constants/font.constants.ts

@@ -8,10 +8,10 @@ export const DISPlAY_TEXT_BUTTONS = 'Button Texts';
 export const DEFAULT_TEXT_DECORATION = undefined;
 export const DEFAULT_FONT_STYLE = undefined;
 
-export const FONT_SIZE_TITLE = '2.25rem';
-export const FONT_SIZE_HEADINGS = '1.5rem';
-export const FONT_SIZE_BODY = '1rem';
-export const FONT_SIZE_PROFILE_NAME = '1.5rem';
+export const FONT_SIZE_TITLE = '2.25em';
+export const FONT_SIZE_HEADINGS = '1.5em';
+export const FONT_SIZE_BODY = '1em';
+export const FONT_SIZE_PROFILE_NAME = '1.5em';
 
 export const FONT_WEIGHT_PROFILE_NAME = '800';
 export const FONT_WEIGHT_NORMAL = 'normal';

package/src/brand-page/constants/misc.constants.ts

@@ -38,6 +38,64 @@ export const ALIGN_LEFT_FULL_IMAGE = 'left-aligned-full-image';
 export const ALIGN_RIGHT_FULL_IMAGE = 'right-aligned-full-image';
 export const ALTERNATE_IMAGE = 'alternate-image';
 
+/**
+ * Padding Control (BP-5699): the top/bottom padding each Contact Form layout
+ * had hard-coded before the sliders existed. Single source for new-block
+ * defaults (content-settings) and the migration backfill for existing pages.
+ * The image layouts (full-image divided and card-over-image) are 0: the bg
+ * image expands with the section padding (banner-style), so the default starts
+ * flush at the edges; the spacing inside/over the image stays fixed.
+ */
+export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
+  '': 0, // collapsible (default on Brand Page / Brand Contact)
+  [ALIGN_CENTERED]: 32,
+  [ALIGN_CARD_CENTER]: 32,
+  [ALIGN_CARD_CENTER_IMAGE]: 0,
+  [TEXT_ONLY]: 32,
+  [ALIGN_LEFT_FULL_IMAGE]: 0,
+  [ALIGN_RIGHT_FULL_IMAGE]: 0,
+};
+
+/**
+ * Banner: full-bleed display styles (divided + full-width stacked) render the
+ * image flush to the section edges, so their top/bottom padding defaults to 0 to
+ * match prod — the standard 32 would push the image off the edges. Every other
+ * banner style keeps 32. Used by the banner display-style convertor and the
+ * migration backfill, mirroring contact-form's per-layout map above.
+ */
+export const BANNER_DEFAULT_PADDING = 32;
+export const BANNER_FULL_BLEED_DISPLAY_STYLES = [
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
+];
+export const bannerDisplayStyleDefaultPadding = (
+  displayStyle?: string,
+): number =>
+  displayStyle && BANNER_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
+    ? 0
+    : BANNER_DEFAULT_PADDING;
+
+/**
+ * About: a flat 32 for every display style, including the two full-image styles.
+ * The full-image About renders the image inside the padded container, so the
+ * standard 32 band is the intended look. Used by the About display-style
+ * convertor and the migration backfill.
+ */
+export const ABOUT_DEFAULT_PADDING = 32;
+
+/**
+ * Testimonials: a single top/bottom value across both breakpoints, replacing the
+ * old 32px mobile / 80px desktop split. The same value applies to every display
+ * style (centered / big-image / columns) — they share one root, so padding does
+ * not vary by style. Used by the new-block default and the migration backfill.
+ * Default (BP-5703): 48px — the single value chosen for both breakpoints (replaces
+ * the old 32px mobile / 80px desktop split).
+ */
+export const TESTIMONIAL_DEFAULT_PADDING = 48;
+
 export const BIG_IMAGE = 'big-image';
 export const MEDIA_ONLY = 'media-only';
 export const COLUMNS = 'columns';

package/src/brand-page/models/content.model.ts

@@ -51,6 +51,8 @@ export interface Content {
   id: string;
   type: ContentType;
   personalisationRole?: PersonalisationRole;
+  topPadding?: number;
+  bottomPadding?: number;
 
   // Overrides for personalisation
   imageUrlOverride?: string;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -292,6 +292,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "contents": [
           {
             "backgroundStyle": {},
+            "bottomPadding": 32,
             "buttonLinkType": "url",
             "buttonPageId": "",
             "buttonText": "Get Started",
@@ -330,6 +331,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
               "textAlign": "center",
               "wordBreak": "normal",
             },
+            "topPadding": 32,
             "type": "banner-section",
             "url": "",
           },
@@ -454,7 +456,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -751,6 +753,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -774,6 +777,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -897,7 +901,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1194,6 +1198,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
+            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1224,6 +1229,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
+            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1347,7 +1353,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 16,
+    "v": 17,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -156,7 +156,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1rem",
+          "fontSize": "1em",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -230,7 +230,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
           "fontFamily": "Lato",
-          "fontSize": "1rem",
+          "fontSize": "1em",
           "fontStyle": undefined,
           "fontWeight": "normal",
           "textAlign": "center",
@@ -410,7 +410,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1rem",
+              "fontSize": "1em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -426,7 +426,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1.5rem",
+              "fontSize": "1.5em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -442,7 +442,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "1rem",
+              "fontSize": "1em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,
@@ -458,7 +458,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "style": {
               "color": undefined,
               "fontFamily": "Lato",
-              "fontSize": "2.25rem",
+              "fontSize": "2.25em",
               "fontStyle": undefined,
               "fontWeight": undefined,
               "letterSpacing": undefined,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -155,7 +155,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -229,7 +229,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -384,7 +384,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -400,7 +400,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -416,7 +416,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -432,7 +432,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -605,7 +605,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -679,7 +679,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
         "fontFamily": "Lato",
-        "fontSize": "1rem",
+        "fontSize": "1em",
         "fontStyle": undefined,
         "fontWeight": "normal",
         "textAlign": "center",
@@ -849,7 +849,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -865,7 +865,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1.5rem",
+            "fontSize": "1.5em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -881,7 +881,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "1rem",
+            "fontSize": "1em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,
@@ -897,7 +897,7 @@ BrandPageModel {
           "style": {
             "color": undefined,
             "fontFamily": "Lato",
-            "fontSize": "2.25rem",
+            "fontSize": "2.25em",
             "fontStyle": undefined,
             "fontWeight": undefined,
             "letterSpacing": undefined,

package/src/brand-page/utils/content-padding.util.test.ts

@@ -0,0 +1,29 @@
+import { describe, test, expect } from 'vitest';
+import { contentPaddingStyle } from './content-padding.util';
+
+describe('content-padding.util', () => {
+  test('contentPaddingStyle should map stored padding to px values', () => {
+    expect(contentPaddingStyle({ topPadding: 53, bottomPadding: 24 })).toEqual({
+      paddingTop: '53px',
+      paddingBottom: '24px',
+    });
+  });
+
+  test('contentPaddingStyle should default missing values to 0 for content created before the field existed', () => {
+    expect(contentPaddingStyle({})).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+    expect(contentPaddingStyle({ topPadding: 16 })).toEqual({
+      paddingTop: '16px',
+      paddingBottom: '0px',
+    });
+  });
+
+  test('contentPaddingStyle should keep an explicit 0 rather than treating it as unset', () => {
+    expect(contentPaddingStyle({ topPadding: 0, bottomPadding: 0 })).toEqual({
+      paddingTop: '0px',
+      paddingBottom: '0px',
+    });
+  });
+});

package/src/brand-page/utils/content-padding.util.ts

@@ -0,0 +1,13 @@
+/**
+ * Block top/bottom padding (BP-5687) as a bindable CSS style object. Defaults
+ * live in the data — `content-settings` for new content, a migration for
+ * existing — so this just reads the stored value (`?? 0` covers content from
+ * before the field existed).
+ */
+export const contentPaddingStyle = (content: {
+  topPadding?: number;
+  bottomPadding?: number;
+}): { paddingTop: string; paddingBottom: string } => ({
+  paddingTop: `${content.topPadding ?? 0}px`,
+  paddingBottom: `${content.bottomPadding ?? 0}px`,
+});

package/src/brand-page/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/src/brand-page/utils/migration/migration-17.ts

@@ -0,0 +1,72 @@
+import type { MigrationData } from '../migration.util';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import {
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
+  TESTIMONIAL_DEFAULT_PADDING,
+  bannerDisplayStyleDefaultPadding,
+} from '../../constants';
+
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ *
+ * Exception — `testimonial-section` (BP-5703): testimonials had 32px mobile / 80px
+ * desktop and are intentionally collapsing to a single value across both breakpoints,
+ * so the backfill sets that single value rather than preserving the old desktop 80px.
+ * Existing testimonials will look tighter on desktop / roomier on mobile — by design.
+ */
+const BLOCK_DEFAULT_PADDING: Partial<Record<string, number>> = {
+  text: 12,
+  'images-section': 32,
+  'social-links': 32,
+  'shapes-section': 32,
+  'booking-section': 32,
+  'shop-section': 16,
+  'about-section': 32,
+  'testimonial-section': TESTIMONIAL_DEFAULT_PADDING,
+};
+
+export const migration17 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Contact Form and Banner previously varied their hard-coded spacing by
+      // layout/display style (full-bleed image layouts had no outer padding), so they're
+      // keyed by that rather than a single per-type value.
+      let value: number | undefined;
+
+      if (content.type === 'contact-form') {
+        value =
+          CONTACT_FORM_LAYOUT_DEFAULT_PADDING[
+            (content as ContactFormContent).layoutStyle ?? ''
+          ];
+      } else if (content.type === 'banner-section') {
+        value = bannerDisplayStyleDefaultPadding(
+          (content as BannerSectionContent).displayStyle,
+        );
+      } else {
+        value = BLOCK_DEFAULT_PADDING[content.type];
+      }
+
+      if (value === undefined) {
+        return;
+      }
+
+      if (content.topPadding === undefined) {
+        content.topPadding = value;
+      }
+
+      if (content.bottomPadding === undefined) {
+        content.bottomPadding = value;
+      }
+    });
+  });
+
+  return migrationResult;
+};