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

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

@@ -11,6 +11,8 @@ 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;
@@ -90,6 +92,8 @@ 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;
@@ -139,6 +143,8 @@ 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;
@@ -188,6 +194,8 @@ 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;
@@ -237,6 +245,8 @@ 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;
@@ -286,6 +296,8 @@ 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;
@@ -335,6 +347,8 @@ 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;
@@ -1312,8 +1326,8 @@ declare const _default: import("vue").DefineComponent<{}, {
 }>, {
     viewport: import("@brand-page").ViewportsType;
     isMobileDevice: boolean;
-    containerClientWidth: number | undefined;
     containerClientHeight: number | undefined;
+    containerClientWidth: number | undefined;
     isContentSelected: boolean;
     isHeaderSelected: boolean;
     isFooterSelected: boolean;

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

@@ -42,6 +42,28 @@ 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: {},
@@ -799,6 +821,7 @@ export const IMAGE_GALLERY_CONTENT_SETTINGS_CONFIG = () => ({
             defaultValue: false,
             visibilityAssessor: imageGalleryFieldVisibilityAssessor,
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddImageContents,
@@ -835,6 +858,7 @@ export const VIDEO_CONTENT_SETTINGS_CONFIG = () => ({
             label: contentSettingsTr(`muteLabel`),
             valueConvertor: videoContentStateConvertor,
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddVideoContents,
@@ -977,6 +1001,7 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = () => ({
             valueConvertor: backgroundColorConvertor,
             groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -1384,6 +1409,7 @@ export const MAP_CONTENT_SETTINGS_CONFIG = () => ({
             type: 'address',
             title: contentSettingsTr(`addressTitle`),
         },
+        ...PADDING_CONTROL_FIELDS(),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddMapContents,
@@ -1432,6 +1458,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,
@@ -1602,6 +1629,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,
@@ -1666,6 +1694,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,
@@ -1814,6 +1843,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             title: contentSettingsTr(`backgroundColorTitle`),
             valueConvertor: backgroundColorConvertor,
         },
+        ...PADDING_CONTROL_FIELDS(CONTACT_FORM_GROUPS.style),
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,
@@ -2204,6 +2234,7 @@ export const IMAGES_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,
@@ -2370,6 +2401,7 @@ export const SOCIAL_LINKS_SETTINGS_CONFIG = () => ({
             title: contentSettingsTr(`backgroundColorTitle`),
             valueConvertor: backgroundColorConvertor,
         },
+        ...PADDING_CONTROL_FIELDS(SOCIAL_LINKS_GROUPS.style),
     },
     isEnabled: true,
     isLocked: false,
@@ -2477,6 +2509,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,
@@ -2724,6 +2757,7 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
             validator: urlValidator,
             defaultValue: '',
         },
+        ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
     },
     isEnabled: true,
     isLocked: false,

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, } 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) {
@@ -28,6 +28,54 @@ export const bannerAlignDisplayStyleConvertor = {
                     iconViewBox: '0 0 110 64',
                     dataAttribute: 'data-test-btn-text-only',
                 },
+                {
+                    title: '',
+                    value: ALIGN_TOP_CARD_IMAGE,
+                    isSelected: value === ALIGN_TOP_CARD_IMAGE,
+                    iconName: 'display-style-banner-10',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_CARD_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_CARD_IMAGE,
+                    iconName: 'display-style-banner-11',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_CARD_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_CARD_IMAGE,
+                    iconName: 'display-style-banner-12',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-card-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_TOP_FULL_IMAGE,
+                    isSelected: value === ALIGN_TOP_FULL_IMAGE,
+                    iconName: 'display-style-banner-13',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-top-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_BOTTOM_FULL_IMAGE,
+                    isSelected: value === ALIGN_BOTTOM_FULL_IMAGE,
+                    iconName: 'display-style-banner-14',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-bottom-full-image',
+                },
+                {
+                    title: '',
+                    value: ALIGN_MIDDLE_FULL_IMAGE,
+                    isSelected: value === ALIGN_MIDDLE_FULL_IMAGE,
+                    iconName: 'display-style-banner-15',
+                    iconViewBox: '0 0 110 64',
+                    dataAttribute: 'data-test-btn-middle-full-image',
+                },
                 {
                     title: '',
                     value: BIG_IMAGE,
@@ -86,7 +134,13 @@ export const bannerAlignDisplayStyleConvertor = {
         if (!selectedOption ||
             selectedOption.value === ALIGN_CENTERED ||
             selectedOption.value === BIG_IMAGE ||
-            selectedOption.value === ALIGN_CARD_CENTER_IMAGE) {
+            selectedOption.value === ALIGN_CARD_CENTER_IMAGE ||
+            selectedOption.value === ALIGN_TOP_CARD_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_CARD_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_CARD_IMAGE ||
+            selectedOption.value === ALIGN_TOP_FULL_IMAGE ||
+            selectedOption.value === ALIGN_BOTTOM_FULL_IMAGE ||
+            selectedOption.value === ALIGN_MIDDLE_FULL_IMAGE) {
             textAlign = 'center';
         }
         return {

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, } from '@brand-page/constants';
+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';
 export const contactLayoutStyleConvertor = {
     convertBackToMultipleValues: true,
     convert(value) {
@@ -64,8 +64,13 @@ 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, } 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, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -101,6 +101,8 @@ export const createInitialImageGalleryContent = () => {
         galleryStyles: {
             galleryType: 'grid',
         },
+        topPadding: 0,
+        bottomPadding: 0,
     };
 };
 export const createInitialVideoContent = () => {
@@ -111,6 +113,8 @@ export const createInitialVideoContent = () => {
         displayStyle: DISPLAY_STYLE_PREVIEW,
         mute: false,
         videoUrl: '',
+        topPadding: 0,
+        bottomPadding: 0,
     };
 };
 export const createInitialProfileContent = (options) => {
@@ -160,6 +164,8 @@ export const createInitialTextContent = (options) => {
             ]
             : undefined,
         type: 'text',
+        topPadding: 12,
+        bottomPadding: 12,
         textSize: {
             fontSize: FONT_SIZE_BODY,
             lineHeight: LINE_HEIGHT_BODY,
@@ -201,12 +207,16 @@ 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',
@@ -237,6 +247,8 @@ export const createInitialRequestPaymentContent = (options) => {
         successMessage: '',
         title: contentSettingsTr(`buyNowTitle`),
         type: 'request-payment',
+        topPadding: 0,
+        bottomPadding: 0,
         fillColor: {},
         defaultBorderColor: {},
         selectedBorderColor: {},
@@ -322,6 +334,8 @@ 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,
@@ -354,13 +368,19 @@ 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: options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+        layoutStyle,
+        topPadding: padding,
+        bottomPadding: padding,
         imageUrl: '',
         fields: [
             {
@@ -493,6 +513,8 @@ 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,
@@ -519,6 +541,8 @@ export const createInitialImagesSectionContent = (options) => {
         title: contentSettingsTr(`imagesTitle`),
         description: '',
         type: 'images-section',
+        topPadding: 32,
+        bottomPadding: 32,
         displayStyle: 'centered',
         aspectRatio: 'Default',
         areImagesFullWidth: false,
@@ -668,6 +692,8 @@ export const createInitialSocialLinksContent = (options) => {
     return {
         id: uuid.v4(),
         type: 'social-links',
+        topPadding: 32,
+        bottomPadding: 32,
         title: contentSettingsTr(`followUsOnTitle`),
         links: [
             {
@@ -718,6 +744,8 @@ 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,6 +5054,8 @@ 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;
@@ -10160,6 +10162,8 @@ 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;
@@ -15272,6 +15276,8 @@ 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;
@@ -20378,6 +20384,8 @@ 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;
@@ -25490,6 +25498,8 @@ 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;
@@ -30596,6 +30606,8 @@ 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;