@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-1

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

@@ -0,0 +1,77 @@
+import type { MigrationData } from '../migration.util';
+import type { BannerSectionContent, ContactFormContent } from '../../models';
+import { BRAND_PAGE_TYPES } 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>> = {
+  '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 if (content.type === 'text') {
+        // Text outer padding is brand-page-type specific: 12 on Brand Site, 0 on
+        // Brand Page / Brand Contact - backfill per type so existing pages render unchanged.
+        value =
+          brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0;
+      } 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;
+};

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

@@ -1,5 +1,6 @@
 import { migrateBrandPageModel } from './migration.util';
 import { migrateNewLogoLogic } from './migration/migration-01';
+import { migration17 } from './migration/migration-17';
 import {
   BrandPageModel,
   type BrandPageData,
@@ -24,11 +25,18 @@ import {
   createInitialTestimonialSectionContent,
 } from '@brand-page-maker/models';
 import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
   DEFAULT_LETTER_SPACING,
   LINE_HEIGHT_BODY,
   LINE_HEIGHT_HEADINGS,
   LINE_HEIGHT_TITLE,
   TEXT_ONLY,
+  TESTIMONIAL_DEFAULT_PADDING,
 } from '../constants';
 
 describe('migration.util', () => {
@@ -1464,6 +1472,288 @@ describe('migration.util', () => {
       expect(content.layoutStyle).toBe(TEXT_ONLY);
     });
 
+    test('migration17 should backfill contact form padding from its layout style', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const collapsible = model.brandPageModel.pages[3]
+        .contents[0] as ContactFormContent;
+      const textOnly = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(collapsible.topPadding).toBe(0);
+      expect(collapsible.bottomPadding).toBe(0);
+      expect(textOnly.topPadding).toBe(32);
+      expect(textOnly.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_CARD_CENTER_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s contact form layout',
+      async (layoutStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[3].contents[1] as ContactFormContent
+        ).layoutStyle = layoutStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const content = model.brandPageModel.pages[3]
+          .contents[1] as ContactFormContent;
+
+        expect(content.topPadding).toBe(0);
+        expect(content.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should not overwrite contact form padding that is already set', async () => {
+      const brandPageModel = getBsModel();
+
+      (brandPageModel.pages[3].contents[1] as ContactFormContent).topPadding =
+        10;
+
+      const model = await migrateBrandPageModel(brandPageModel, {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      const content = model.brandPageModel.pages[3]
+        .contents[1] as ContactFormContent;
+
+      expect(content.topPadding).toBe(10);
+      expect(content.bottomPadding).toBe(32);
+    });
+
+    test('migration17 should backfill 32 padding for standard banner display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[0] is a 'centered' banner (standard, not full-bleed).
+      const banner = model.brandPageModel.pages[0]
+        .contents[0] as BannerSectionContent;
+
+      expect(banner.topPadding).toBe(32);
+      expect(banner.bottomPadding).toBe(32);
+    });
+
+    test.each([
+      [ALIGN_LEFT_FULL_IMAGE],
+      [ALIGN_RIGHT_FULL_IMAGE],
+      [ALIGN_TOP_FULL_IMAGE],
+      [ALIGN_BOTTOM_FULL_IMAGE],
+      [ALIGN_MIDDLE_FULL_IMAGE],
+    ])(
+      'migration17 should backfill zero padding for the %s full-bleed banner style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[0] as BannerSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const banner = model.brandPageModel.pages[0]
+          .contents[0] as BannerSectionContent;
+
+        expect(banner.topPadding).toBe(0);
+        expect(banner.bottomPadding).toBe(0);
+      },
+    );
+
+    test('migration17 should backfill 32 padding for standard about display styles', async () => {
+      const model = await migrateBrandPageModel(getBsModel(), {
+        isUserDraft: false,
+        isServerRender: false,
+      });
+
+      // pages[0].contents[2] is a 'centered' about section (standard, not full-image).
+      const about = model.brandPageModel.pages[0]
+        .contents[2] as AboutSectionContent;
+
+      expect(about.topPadding).toBe(32);
+      expect(about.bottomPadding).toBe(32);
+    });
+
+    test.each([[ALIGN_LEFT_FULL_IMAGE], [ALIGN_RIGHT_FULL_IMAGE]])(
+      'migration17 should backfill 32 padding for the %s full-image about style',
+      async (displayStyle) => {
+        const brandPageModel = getBsModel();
+
+        (
+          brandPageModel.pages[0].contents[2] as AboutSectionContent
+        ).displayStyle = displayStyle;
+
+        const model = await migrateBrandPageModel(brandPageModel, {
+          isUserDraft: false,
+          isServerRender: false,
+        });
+
+        const about = model.brandPageModel.pages[0]
+          .contents[2] as AboutSectionContent;
+
+        expect(about.topPadding).toBe(32);
+        expect(about.bottomPadding).toBe(32);
+      },
+    );
+
+    test('migration17 should backfill 16 padding for the shop section', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1' }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(16);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
+    test('migration17 should not overwrite shop padding that is already set', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'shop',
+            title: 'Shop',
+            contents: [{ type: 'shop-section', id: 'shop-1', topPadding: 40 }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const shop = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(shop.topPadding).toBe(40);
+      expect(shop.bottomPadding).toBe(16);
+    });
+
+    test('migration17 should backfill the single testimonial padding across both breakpoints', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'testimonials',
+            title: 'Testimonials',
+            contents: [{ type: 'testimonial-section', id: 'testimonial-1' }],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const testimonial = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(testimonial.topPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+      expect(testimonial.bottomPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+    });
+
+    test('migration17 should not overwrite testimonial padding that is already set', async () => {
+      const oldTemplate: BrandPageModel = {
+        pages: [
+          {
+            slug: 'testimonials',
+            title: 'Testimonials',
+            contents: [
+              {
+                type: 'testimonial-section',
+                id: 'testimonial-1',
+                topPadding: 40,
+              },
+            ],
+          },
+        ],
+        brandPageType: 'brandSite',
+      } as any;
+
+      const model = await migrateBrandPageModel(
+        new BrandPageModel(oldTemplate),
+        {
+          isUserDraft: false,
+          isServerRender: false,
+        },
+      );
+      const testimonial = model.brandPageModel.pages[0].contents[0] as any;
+
+      expect(testimonial.topPadding).toBe(40);
+      expect(testimonial.bottomPadding).toBe(TESTIMONIAL_DEFAULT_PADDING);
+    });
+
+    const runMigration17ForText = async (brandPageType: string) => {
+      const brandPageModel = {
+        brandPageType,
+        pages: [
+          {
+            slug: 'home',
+            title: 'Home',
+            contents: [{ type: 'text', id: 'text-1' }],
+          },
+        ],
+      } as any;
+
+      const result = await migration17({
+        brandPageModel,
+        useOldLogoRenderSize: false,
+      });
+
+      return result.brandPageModel.pages[0].contents[0] as any;
+    };
+
+    test('migration17 should backfill 12 text padding for brand site', async () => {
+      const text = await runMigration17ForText('brandSite');
+
+      expect(text.topPadding).toBe(12);
+      expect(text.bottomPadding).toBe(12);
+    });
+
+    test.each(['default', 'brandContact'])(
+      'migration17 should backfill 0 text padding for %s (Brand Page / Brand Contact)',
+      async (brandPageType) => {
+        const text = await runMigration17ForText(brandPageType);
+
+        expect(text.topPadding).toBe(0);
+        expect(text.bottomPadding).toBe(0);
+      },
+    );
+
     test('migrateNewLogoLogic should migrate logoDraftToken and logoVariation', () => {
       const oldTemplate: BrandPageData = {
         pages: [

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

@@ -19,6 +19,7 @@ import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
+import { migration17 } from './migration/migration-17';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -149,6 +150,16 @@ const MIGRATION_TABLE = [
     description:
       'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
   },
+  {
+    version: 17,
+    migrateFn: migration17,
+    // runAlways: re-apply on every load (ticket stack) so already-migrated pages
+    // pick up newly-added block defaults (e.g. Store) without a new migration.
+    // Idempotent — only backfills when topPadding/bottomPadding aren't already set.
+    runAlways: true,
+    description:
+      'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -201,6 +201,34 @@ const SETTINGS_STYLE_FIElD_GROUPS = (): ContentSettingsFieldGroup[] => {
   ];
 };
 
+/**
+ * Shared Top/Bottom padding sliders (BP-5687). Reuses the same `slider` control
+ * as the Divider block (track + editable number box), range 0–100, continuous.
+ * Spread into a block's `fields` to expose the Padding Control on that block.
+ * Pass the Style field-group id for blocks that use grouped panels.
+ */
+const PADDING_CONTROL_FIELDS = (
+  groupId?: string,
+): {
+  topPadding: ContentSettingsField<Content>;
+  bottomPadding: ContentSettingsField<Content>;
+} => ({
+  topPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`topPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+  bottomPadding: {
+    type: 'slider',
+    title: contentSettingsTr(`bottomPaddingTitle`),
+    minLength: 0,
+    maxLength: 100,
+    groupId,
+  },
+});
+
 const DEFAULT_TITLE_STYLE_SETTINGS_FILED =
   (): ContentSettingsField<Content> => ({
     type: 'text-style',
@@ -1097,6 +1125,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       defaultValue: false,
       visibilityAssessor: imageGalleryFieldVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddImageContents,
@@ -1136,6 +1165,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       label: contentSettingsTr(`muteLabel`),
       valueConvertor: videoContentStateConvertor,
     },
+    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddVideoContents,
@@ -1278,6 +1308,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       variant: 'icon',
       visibilityAssessor: brandSiteTypeVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     backgroundColor: {
       type: 'color',
       defaultValue: {},
@@ -1736,6 +1767,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG =
         type: 'address',
         title: contentSettingsTr(`addressTitle`),
       },
+      ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1787,6 +1819,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG =
       },
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1971,6 +2004,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         defaultValue: {},
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
+      ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2038,6 +2072,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`itemStyleLabel`),
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2170,6 +2205,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         variant: 'icon',
         visibilityAssessor: brandSiteTypeVisibilityAssessor,
       },
+      ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
@@ -2229,6 +2265,7 @@ export const BANNER_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       overlayColor: {
         type: 'color',
         title: contentSettingsTr(`overlayColorTitle`),
@@ -2507,6 +2544,7 @@ export const ABOUT_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       paragraphStyle: {
         type: 'text-style',
@@ -2594,6 +2632,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.image),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       aspectRatio: {
         type: 'radio',
         role: 'multi',
@@ -2681,6 +2720,7 @@ export const TESTIMONIALS_SECTION_SETTINGS_CONFIG =
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       title: {
         type: 'text',
         placeholder: contentSettingsTr(`titlePlaceholder`),
@@ -2793,6 +2833,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG =
         optionsConvertor: socialLinksIconDisplayStyleConvertor,
         variant: 'icon',
       },
+      ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
       titleStyle: {
         type: 'text-style',
         groupId: SOCIAL_LINKS_GROUPS.style,
@@ -2905,6 +2946,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
     ],
     fields: {
       displayStyle: TEXT_MEDIA_DISPLAY_STYLE_FIELD(MEDIA_TYPES.shape),
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       size: IMAGE_SIZE_FIELD(),
       title: TEXT_MEDIA_TITLE_FIELD(),
       description: TEXT_MEDIA_DESCRIPTION_FIELD(),
@@ -2942,6 +2984,7 @@ export const SHAPES_SECTION_SETTINGS_CONFIG =
             ? MAX_BS_MEDIA_AND_IMAGE_ITEMS
             : MAX_BP_MEDIA_AND_IMAGE_ITEMS,
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -3003,6 +3046,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       optionsConvertor: shopAspectRatioConvertor,
       visibilityAssessor: shopImageOptionVisibilityAssessor,
     },
+    ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     title: {
       type: 'title',
       groupId: REQUEST_PAYMENT_GROUPS.settings,
@@ -3166,6 +3210,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
         visibilityAssessor: (c, b) =>
           personalisationOverrideVisibility(c, b, 'buttonText'),
       },
+      ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
       backgroundStyle: {
         type: 'color',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

package/src/brand-page-maker/convertors/about-display-style.convertor.ts

@@ -6,6 +6,7 @@ import {
   ALIGN_RIGHT_ALIGNED,
   ALIGN_RIGHT_FULL_IMAGE,
   TEXT_ONLY,
+  ABOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 
 import type { AboutSectionContent } from '@brand-page';
@@ -76,11 +77,18 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
   convertBack(config: ButtonGroupConfig): Partial<AboutSectionContent> {
     const selectedOption = config.options.find((v) => v.isSelected);
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign reset below — including its default block padding (a flat 32
+    // for every About style).
+    const padding = ABOUT_DEFAULT_PADDING;
+
     if (!selectedOption || selectedOption.value === ALIGN_CENTERED) {
       const textAlign = 'center';
 
       return {
         displayStyle: selectedOption?.value,
+        topPadding: padding,
+        bottomPadding: padding,
         titleStyle: {
           textAlign,
         },
@@ -94,6 +102,8 @@ export const aboutDisplayStyleConvertor: ValueConvertor<
 
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/banner-align-display-style.convertor.ts

@@ -15,6 +15,7 @@ import {
   ALIGN_TOP_FULL_IMAGE,
   ALIGN_BOTTOM_FULL_IMAGE,
   ALIGN_MIDDLE_FULL_IMAGE,
+  bannerDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -172,8 +173,15 @@ export const bannerAlignDisplayStyleConvertor: ValueConvertor<
       textAlign = 'center';
     }
 
+    // Switching display style adopts that style's canonical look — like the
+    // textAlign resets above — including its default block padding. Full-bleed
+    // image styles default to 0 (image flush to the edges); the rest to 32.
+    const padding = bannerDisplayStyleDefaultPadding(selectedOption?.value);
+
     return {
       displayStyle: selectedOption?.value,
+      topPadding: padding,
+      bottomPadding: padding,
       titleStyle: {
         textAlign,
       },

package/src/brand-page-maker/convertors/contact-layout-style.convertor.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect } from 'vitest';
+import { contactLayoutStyleConvertor } from './contact-layout-style.convertor';
+import {
+  ALIGN_CENTERED,
+  ALIGN_CARD_CENTER,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  TEXT_ONLY,
+} from '@brand-page/constants';
+
+const configWithSelected = (selected: string) => ({
+  options: contactLayoutStyleConvertor
+    .convert(selected)
+    .options.map((option) => ({
+      ...option,
+      isSelected: option.value === selected,
+    })),
+});
+
+describe('contact-layout-style.convertor', () => {
+  test.each([
+    [ALIGN_CARD_CENTER, 32, 'center'],
+    [ALIGN_CENTERED, 32, 'center'],
+    [ALIGN_CARD_CENTER_IMAGE, 0, 'center'],
+    [TEXT_ONLY, 32, 'left'],
+    [ALIGN_LEFT_FULL_IMAGE, 0, 'left'],
+  ])(
+    'convertBack should apply the default padding and text alignment for %s',
+    (layoutStyle, padding, textAlign) => {
+      const result = contactLayoutStyleConvertor.convertBack(
+        configWithSelected(layoutStyle),
+      );
+
+      expect(result).toStrictEqual({
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
+        titleStyle: {
+          textAlign,
+        },
+        descriptionStyle: {
+          textAlign,
+        },
+        buttonTextStyle: {
+          textAlign: 'center',
+        },
+      });
+    },
+  );
+});