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

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

@@ -47,8 +47,6 @@ export interface Content {
     id: string;
     type: ContentType;
     personalisationRole?: PersonalisationRole;
-    topPadding?: number;
-    bottomPadding?: number;
     imageUrlOverride?: string;
     imageUrlsOverride?: string;
     avatarImageUrlOverride?: string;

package/lib/src/brand-page/utils/index.d.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/lib/src/brand-page/utils/index.js

@@ -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/lib/src/brand-page/utils/migration.util.js

@@ -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';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -123,15 +122,6 @@ const MIGRATION_TABLE = [
         runAlways: true,
         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)',
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.d.ts

@@ -8,8 +8,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 id: string;
                 type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                topPadding?: number | undefined;
-                bottomPadding?: number | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;
                 avatarImageUrlOverride?: string | undefined;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -501,8 +501,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -552,8 +550,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -603,8 +599,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -654,8 +648,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -705,8 +697,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -756,8 +746,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -11,8 +11,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                 id: string;
                 type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                 personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                topPadding?: number | undefined;
-                bottomPadding?: number | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;
                 avatarImageUrlOverride?: string | undefined;
@@ -92,8 +90,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -143,8 +139,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -194,8 +188,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -245,8 +237,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -296,8 +286,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;
@@ -347,8 +335,6 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                         personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                        topPadding?: number | undefined;
-                        bottomPadding?: number | undefined;
                         imageUrlOverride?: string | undefined;
                         imageUrlsOverride?: string | undefined;
                         avatarImageUrlOverride?: string | undefined;

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

@@ -42,28 +42,6 @@ const SETTINGS_STYLE_FIElD_GROUPS = () => {
         },
     ];
 };
-/**
- * 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) => ({
-    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 = () => ({
     type: 'text-style',
     defaultValue: {},
@@ -821,7 +799,6 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = () => ({
             defaultValue: false,
             visibilityAssessor: imageGalleryFieldVisibilityAssessor,
         },
-        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddImageContents,
@@ -858,7 +835,6 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`muteLabel`),
             valueConvertor: videoContentStateConvertor,
         },
-        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddVideoContents,
@@ -992,7 +968,6 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = () => ({
             variant: 'icon',
             visibilityAssessor: brandSiteTypeVisibilityAssessor,
         },
-        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
         backgroundColor: {
             type: 'color',
             defaultValue: {},
@@ -1409,7 +1384,6 @@ export const MAP_CONTENT_SETTINGS_CONFIG = () => ({
             type: 'address',
             title: contentSettingsTr(`addressTitle`),
         },
-        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1458,7 +1432,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,
@@ -1629,7 +1602,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,
@@ -1694,7 +1666,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,
@@ -1820,7 +1791,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(),
@@ -1878,7 +1848,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`),
@@ -2094,7 +2063,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',
@@ -2177,7 +2145,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',
@@ -2260,7 +2227,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`),
@@ -2368,7 +2334,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,
@@ -2477,7 +2442,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(),
@@ -2513,7 +2477,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,
@@ -2567,7 +2530,6 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             optionsConvertor: shopAspectRatioConvertor,
             visibilityAssessor: shopImageOptionVisibilityAssessor,
         },
-        ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
         title: {
             type: 'title',
             groupId: REQUEST_PAYMENT_GROUPS.settings,
@@ -2726,7 +2688,6 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.settings,
             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/lib/src/brand-page-maker/convertors/about-display-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_ALIGNED, ALIGN_RIGHT_FULL_IMAGE, TEXT_ONLY, ABOUT_DEFAULT_PADDING, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_ALIGNED, ALIGN_RIGHT_FULL_IMAGE, TEXT_ONLY, } from '@brand-page/constants';
 export const aboutDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -58,16 +58,10 @@ export const aboutDisplayStyleConvertor = {
     },
     convertBack(config) {
         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,
                 },
@@ -79,8 +73,6 @@ export const aboutDisplayStyleConvertor = {
         const textAlign = 'left';
         return {
             displayStyle: selectedOption?.value,
-            topPadding: padding,
-            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

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

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, bannerDisplayStyleDefaultPadding, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_ALIGNED, ALIGN_RIGHT_ALIGNED, BIG_IMAGE, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_LEFT_BIG_IMAGE, ALIGN_CARD_CENTER_IMAGE, ALIGN_CARD_LEFT_IMAGE, ALIGN_TOP_CARD_IMAGE, ALIGN_BOTTOM_CARD_IMAGE, ALIGN_MIDDLE_CARD_IMAGE, ALIGN_TOP_FULL_IMAGE, ALIGN_BOTTOM_FULL_IMAGE, ALIGN_MIDDLE_FULL_IMAGE, } from '@brand-page/constants';
 export const bannerAlignDisplayStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -143,14 +143,8 @@ export const bannerAlignDisplayStyleConvertor = {
             selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE) {
             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/lib/src/brand-page-maker/convertors/contact-layout-style.convertor.js

@@ -1,4 +1,4 @@
-import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, } from '@brand-page/constants';
+import { ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, ALIGN_CARD_CENTER_IMAGE, TEXT_ONLY, ALIGN_CARD_CENTER, } from '@brand-page/constants';
 export const contactLayoutStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -64,13 +64,8 @@ export const contactLayoutStyleConvertor = {
             selectedOption?.value === ALIGN_RIGHT_FULL_IMAGE) {
             textAlign = 'left';
         }
-        // Switching layout adopts that layout's canonical look — same as the
-        // textAlign resets below — including its default block padding.
-        const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[selectedOption?.value ?? ''] ?? 0;
         return {
             layoutStyle: selectedOption?.value,
-            topPadding: padding,
-            bottomPadding: padding,
             titleStyle: {
                 textAlign,
             },

package/lib/src/brand-page-maker/models/content-settings.js

@@ -1,4 +1,4 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -101,8 +101,6 @@ export const createInitialImageGalleryContent = () => {
         galleryStyles: {
             galleryType: 'grid',
         },
-        topPadding: 0,
-        bottomPadding: 0,
     };
 };
 export const createInitialVideoContent = () => {
@@ -113,8 +111,6 @@ export const createInitialVideoContent = () => {
         displayStyle: DISPLAY_STYLE_PREVIEW,
         mute: false,
         videoUrl: '',
-        topPadding: 0,
-        bottomPadding: 0,
     };
 };
 export const createInitialProfileContent = (options) => {
@@ -164,9 +160,6 @@ export const createInitialTextContent = (options) => {
             ]
             : undefined,
         type: 'text',
-        // Brand Site text blocks sit in a 12px outer padding; Brand Page / Brand Contact use 0.
-        topPadding: options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
-        bottomPadding: options?.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0,
         textSize: {
             fontSize: FONT_SIZE_BODY,
             lineHeight: LINE_HEIGHT_BODY,
@@ -208,16 +201,12 @@ export const createInitialMapContent = () => {
             formattedAddress: '',
             placeId: '',
         },
-        topPadding: 0,
-        bottomPadding: 0,
     };
 };
 export const createInitialMailingListContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'mailing-list',
-        topPadding: 0,
-        bottomPadding: 0,
         title: contentSettingsTr(`mailingListTitle`),
         buttonText: contentSettingsTr(`subscribePlaceholder`),
         acceptedFields: 'emailOnly',
@@ -248,8 +237,6 @@ export const createInitialRequestPaymentContent = (options) => {
         successMessage: '',
         title: contentSettingsTr(`buyNowTitle`),
         type: 'request-payment',
-        topPadding: 0,
-        bottomPadding: 0,
         fillColor: {},
         defaultBorderColor: {},
         selectedBorderColor: {},
@@ -279,8 +266,6 @@ export const createInitialShopContent = (options) => {
     return {
         id: uuid.v4(),
         description: '',
-        topPadding: 16,
-        bottomPadding: 16,
         products: [],
         displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
         aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
@@ -337,8 +322,6 @@ export const createInitialSupportMeContent = (options) => {
         successMessage: contentSettingsTr(`successSupportPlaceholder`),
         description: contentSettingsTr(`makeADonationDescription`),
         type: 'support-me',
-        topPadding: 0,
-        bottomPadding: 0,
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
             textStyleType: TEXT_STYLE_TYPES.headings,
@@ -371,19 +354,13 @@ export const createInitialContactFormContent = (options) => {
         typeof options?.userState.emailAddress === 'undefined') {
         console.error('userState.emailAddress should not be undefined');
     }
-    // New blocks inherit the padding their initial layout previously had
-    // hard-coded — same source as the migration backfill for existing pages.
-    const layoutStyle = options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
-    const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
     return {
         id: uuid.v4(),
         title: contentSettingsTr(`contactUsTitle`),
         description: '',
         buttonText: contentSettingsTr(`sendPlaceholder`),
         displayStyle: DISPLAY_STYLE_PREVIEW,
-        layoutStyle,
-        topPadding: padding,
-        bottomPadding: padding,
+        layoutStyle: options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
         imageUrl: '',
         fields: [
             {
@@ -473,8 +450,6 @@ export const createInitialContactFormContent = (options) => {
 export const createInitialBannerSectionContent = (options) => {
     return {
         id: uuid.v4(),
-        topPadding: 32,
-        bottomPadding: 32,
         imageUrl: '',
         title: contentSettingsTr(`thisIsABannerTitle`),
         description: '',
@@ -518,8 +493,6 @@ export const createInitialBookingSectionContent = (options) => {
         buttonText: contentSettingsTr(`bookNowLabel`),
         url: '',
         type: 'booking-section',
-        topPadding: 32,
-        bottomPadding: 32,
         descriptionStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
             textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -546,8 +519,6 @@ export const createInitialImagesSectionContent = (options) => {
         title: contentSettingsTr(`imagesTitle`),
         description: '',
         type: 'images-section',
-        topPadding: 32,
-        bottomPadding: 32,
         displayStyle: 'centered',
         aspectRatio: 'Default',
         areImagesFullWidth: false,
@@ -600,8 +571,6 @@ export const createInitialTestimonialSectionContent = (options) => {
         title: contentSettingsTr(`testimonialsTitle`),
         type: 'testimonial-section',
         displayStyle: 'centered',
-        topPadding: TESTIMONIAL_DEFAULT_PADDING,
-        bottomPadding: TESTIMONIAL_DEFAULT_PADDING,
         items: [],
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
@@ -647,8 +616,6 @@ export const createInitialAboutSectionContent = (options) => {
             textAlign: 'center',
         },
         backgroundStyle: {},
-        topPadding: 32,
-        bottomPadding: 32,
     };
 };
 export const createInitialDividerSectionContent = () => {
@@ -701,8 +668,6 @@ export const createInitialSocialLinksContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'social-links',
-        topPadding: 32,
-        bottomPadding: 32,
         title: contentSettingsTr(`followUsOnTitle`),
         links: [
             {
@@ -753,8 +718,6 @@ export const createInitialShapesSectionContent = (options) => {
         title: contentSettingsTr(`shapesTitle`),
         description: '',
         type: 'shapes-section',
-        topPadding: 32,
-        bottomPadding: 32,
         displayStyle: 'centered',
         items: [
             {

package/lib/src/brand-page-maker/stores/ai-checkpoint/ai-checkpoint-store.d.ts

@@ -5054,8 +5054,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;
@@ -10162,8 +10160,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;
@@ -15276,8 +15272,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;
@@ -20384,8 +20378,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;
@@ -25498,8 +25490,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;
@@ -30606,8 +30596,6 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
                     id: string;
                     type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section" | "booking-section";
                     personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
-                    topPadding?: number | undefined;
-                    bottomPadding?: number | undefined;
                     imageUrlOverride?: string | undefined;
                     imageUrlsOverride?: string | undefined;
                     avatarImageUrlOverride?: string | undefined;