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

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

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="!context.isBrandSite"
-      :style="[containerStyle, contentPaddingStyle]"
+      :style="containerStyle"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="[containerStyle, contentPaddingStyle]">
+    <div v-else :style="containerStyle">
       <div
-        class="c-text-container tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,10 +41,7 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -54,10 +51,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -90,7 +83,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-px-6';
+  return 'tw-py-3 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"
+      class="tw-relative tw-w-full tw-box-border tw-py-8"
       :class="{
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      :style="viewModel.backgroundStyle"
     >
       <div
         :class="[
@@ -148,11 +148,7 @@ import {
   MEDIA_ONLY,
 } from '../../constants';
 import { isHexTransparent } from '@brand-page/utils/color.util';
-import {
-  escapeContentText,
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { escapeContentText, getRenderText } from '@brand-page/utils';
 
 const props = defineProps({
   viewModel: {
@@ -175,10 +171,6 @@ 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,7 +1,6 @@
 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,
@@ -23,10 +22,6 @@ 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" :style="contentPaddingStyle">
+  <div class="c-video">
     <div v-if="viewModel.videoUrl">
       <!-- Start -->
       <div

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

@@ -38,66 +38,6 @@ 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: their
- * padding sits on the section root and reveals the background colour around
- * the image block (same as the banner), while the spacing inside/over the
- * image stays fixed — existing pages rendered the image flush to the section
- * edges.
- */
-export const CONTACT_FORM_LAYOUT_DEFAULT_PADDING: Record<string, number> = {
-  '': 0, // collapsible (default on Brand Page / Brand Contact)
-  [ALIGN_CENTERED]: 24,
-  [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: same rule as the banner. The two full-image display styles render the
- * image flush to the section edges, so their top/bottom padding defaults to 0;
- * every other About style keeps 32. Used by the About display-style convertor
- * and the migration backfill.
- */
-export const ABOUT_DEFAULT_PADDING = 32;
-export const ABOUT_FULL_BLEED_DISPLAY_STYLES = [
-  ALIGN_LEFT_FULL_IMAGE,
-  ALIGN_RIGHT_FULL_IMAGE,
-];
-export const aboutDisplayStyleDefaultPadding = (
-  displayStyle?: string,
-): number =>
-  displayStyle && ABOUT_FULL_BLEED_DISPLAY_STYLES.includes(displayStyle)
-    ? 0
-    : ABOUT_DEFAULT_PADDING;
-
 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,8 +51,6 @@ 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,7 +292,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         "contents": [
           {
             "backgroundStyle": {},
-            "bottomPadding": 32,
             "buttonLinkType": "url",
             "buttonPageId": "",
             "buttonText": "Get Started",
@@ -331,7 +330,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
               "textAlign": "center",
               "wordBreak": "normal",
             },
-            "topPadding": 32,
             "type": "banner-section",
             "url": "",
           },
@@ -456,7 +454,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -753,7 +751,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
-            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -777,7 +774,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
-            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -901,7 +897,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1198,7 +1194,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       {
         "contents": [
           {
-            "bottomPadding": 12,
             "id": "bec5aca6-e3c5-4d4c-93fa-2894816a8040",
             "text": "",
             "textColor": {},
@@ -1229,7 +1224,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
               "textAlign": "center",
               "textStyleType": "paragraphs",
             },
-            "topPadding": 12,
             "type": "text",
           },
         ],
@@ -1353,7 +1347,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 17,
+    "v": 16,
   },
   "useOldLogoRenderSize": true,
 }

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

@@ -24,12 +24,6 @@ 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,
@@ -1470,145 +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 zero 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(0);
-        expect(about.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',
@@ -2832,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,
@@ -2945,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(),
@@ -2983,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,
@@ -3208,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,
-  aboutDisplayStyleDefaultPadding,
 } 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. The two
-    // full-image styles default to 0 (image flush to the edges); the rest to 32.
-    const padding = aboutDisplayStyleDefaultPadding(selectedOption?.value);
-
     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,
       },