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

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

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

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

@@ -1,5 +1,4 @@
 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.util.test.ts

@@ -1,6 +1,5 @@
 import { migrateBrandPageModel } from './migration.util';
 import { migrateNewLogoLogic } from './migration/migration-01';
-import { migration17 } from './migration/migration-17';
 import {
   BrandPageModel,
   type BrandPageData,
@@ -25,18 +24,11 @@ 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', () => {
@@ -1472,288 +1464,6 @@ 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,7 +19,6 @@ 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;
@@ -150,16 +149,6 @@ 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,34 +201,6 @@ 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',
@@ -1125,7 +1097,6 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       defaultValue: false,
       visibilityAssessor: imageGalleryFieldVisibilityAssessor,
     },
-    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddImageContents,
@@ -1165,7 +1136,6 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       label: contentSettingsTr(`muteLabel`),
       valueConvertor: videoContentStateConvertor,
     },
-    ...PADDING_CONTROL_FIELDS(),
   },
   isEnabled: true,
   isLocked: (features) => !features.canAddVideoContents,
@@ -1308,7 +1278,6 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = (): ContentSettingsConfig<
       variant: 'icon',
       visibilityAssessor: brandSiteTypeVisibilityAssessor,
     },
-    ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     backgroundColor: {
       type: 'color',
       defaultValue: {},
@@ -1767,7 +1736,6 @@ export const MAP_CONTENT_SETTINGS_CONFIG =
         type: 'address',
         title: contentSettingsTr(`addressTitle`),
       },
-      ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1819,7 +1787,6 @@ 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,
@@ -2004,7 +1971,6 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         defaultValue: {},
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
-      ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2072,7 +2038,6 @@ 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,
@@ -2205,7 +2170,6 @@ 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(),
@@ -2265,7 +2229,6 @@ 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`),
@@ -2544,7 +2507,6 @@ 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',
@@ -2632,7 +2594,6 @@ 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',
@@ -2720,7 +2681,6 @@ 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`),
@@ -2833,7 +2793,6 @@ 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,
@@ -2946,7 +2905,6 @@ 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(),
@@ -2984,7 +2942,6 @@ 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,
@@ -3046,7 +3003,6 @@ 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,
@@ -3210,7 +3166,6 @@ 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,7 +6,6 @@ import {
   ALIGN_RIGHT_ALIGNED,
   ALIGN_RIGHT_FULL_IMAGE,
   TEXT_ONLY,
-  ABOUT_DEFAULT_PADDING,
 } from '@brand-page/constants';
 
 import type { AboutSectionContent } from '@brand-page';
@@ -77,18 +76,11 @@ 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,
         },
@@ -102,8 +94,6 @@ 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,7 +15,6 @@ import {
   ALIGN_TOP_FULL_IMAGE,
   ALIGN_BOTTOM_FULL_IMAGE,
   ALIGN_MIDDLE_FULL_IMAGE,
-  bannerDisplayStyleDefaultPadding,
 } from '@brand-page/constants';
 import type { BannerSectionContent } from '@brand-page';
 
@@ -173,15 +172,8 @@ 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,
       },