Custom section paddings

app/models/pageflow/customized_theme.rb

@@ -1,9 +1,9 @@
 module Pageflow
   # @api private
   class CustomizedTheme < SimpleDelegator
-    def initialize(theme, overrides, files)
+    def initialize(theme, transformed_options, overrides, files)
       super(theme)
-      @options = __getobj__.options.deep_merge(overrides || {})
+      @options = transformed_options.deep_merge(overrides || {})
       @files = files
     end
 
@@ -24,6 +24,7 @@ def self.build(entry:, theme:, theme_customization:)
       config = Pageflow.config_for(entry)
 
       new(theme,
+          config.themes.apply_default_options(theme.options),
           config.transform_theme_customization_overrides.call(
             theme_customization.overrides,
             entry:,

entry_types/scrolled/config/locales/de.yml

@@ -1309,6 +1309,28 @@ de:
         add: Neues Element
         unset: Nicht mehr als Hintergrund verwenden
       scales:
+        sectionPaddingTop:
+          none: "-"
+          xxxs: XXXS
+          xxs: XXS
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
+          xxl: XXL
+          xxxl: XXXL
+        sectionPaddingBottom:
+          none: "-"
+          xxxs: XXXS
+          xxs: XXS
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
+          xxl: XXL
+          xxxl: XXXL
         contentElementBoxBorderRadius:
           none: Keine
       content_element_text_inline_file_rights_attributes:
@@ -1672,6 +1694,8 @@ de:
       cancel: Abbrechen
       default_padding: Standard
       drag_content_element: Ziehen, um Element zu verschieben
+      padding_suppressed_before_full_width: Abstand unterdrückt vor vollbreitem Element
+      padding_suppressed_after_full_width: Abstand unterdrückt nach vollbreitem Element
       edit_section_transition_after: Übergangseffekt bearbeiten
       edit_section_transition_before: Übergangseffekt bearbeiten
       flip_card: Karte wenden

entry_types/scrolled/config/locales/en.yml

@@ -1293,6 +1293,28 @@ en:
         add: New element
         unset: No longer use as backdrop
       scales:
+        sectionPaddingTop:
+          none: "-"
+          xxxs: XXXS
+          xxs: XXS
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
+          xxl: XXL
+          xxxl: XXXL
+        sectionPaddingBottom:
+          none: "-"
+          xxxs: XXXS
+          xxs: XXS
+          xs: XS
+          sm: S
+          md: M
+          lg: L
+          xl: XL
+          xxl: XXL
+          xxxl: XXXL
         contentElementBoxBorderRadius:
           none: None
       content_element_text_inline_file_rights_attributes:
@@ -1502,6 +1524,8 @@ en:
       cancel: Cancel
       default_padding: Default
       drag_content_element: Drag to move element
+      padding_suppressed_before_full_width: Padding suppressed before full width element
+      padding_suppressed_after_full_width: Padding suppressed after full width element
       edit_section_transition_after: Edit section transition
       edit_section_transition_before: Edit section transition
       flip_card: Flip card

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -7,6 +7,46 @@ def configure(config)
       end
 
       config.for_entry_type(PageflowScrolled.entry_type) do |c|
+        padding_scale = {
+          'none' => '0px',
+          'xxxs' => '1.375em',
+          'xxs' => '3em',
+          'xs' => '4.375em',
+          'sm' => '6em',
+          'md' => 'max(7em, 10svh)',
+          'lg' => 'max(8em, 10svh)',
+          'xl' => 'max(9em, 15svh)',
+          'xxl' => 'max(10em, 20svh)',
+          'xxxl' => 'max(11em, 30svh)'
+        }
+
+        c.themes.register_default_options(
+          ThemeOptionsDefaultScale.new(
+            prefix: 'section_padding_top',
+            values: padding_scale
+          )
+        )
+
+        c.themes.register_default_options(
+          ThemeOptionsDefaultScale.new(
+            prefix: 'section_padding_bottom',
+            values: padding_scale
+          )
+        )
+
+        c.themes.register_default_options(
+          properties: {
+            root: {
+              'section_default_padding_top' => '1.375em',
+              'section_default_padding_bottom' => '4.375em'
+            },
+            cards_appearance_section: {
+              'section_default_padding_top' => '3em',
+              'section_default_padding_bottom' => '6em'
+            }
+          }
+        )
+
         c.file_types.register(Pageflow::BuiltInFileType.image)
         c.file_types.register(Pageflow::BuiltInFileType.video)
         c.file_types.register(Pageflow::BuiltInFileType.audio)

entry_types/scrolled/lib/pageflow_scrolled/theme_options_default_scale.rb

@@ -0,0 +1,35 @@
+module PageflowScrolled
+  # Callable that ensures a scale with the given prefix is defined
+  # in theme options. If the theme already defines any properties
+  # with the prefix, the defaults are not added.
+  #
+  # @api private
+  class ThemeOptionsDefaultScale
+    def initialize(prefix:, values:)
+      @prefix = prefix
+      @values = values
+    end
+
+    def call(options)
+      return options if scale_defined?(options)
+
+      options.deep_merge(
+        properties: {
+          root: prefixed_values
+        }
+      )
+    end
+
+    private
+
+    def scale_defined?(options)
+      options.dig(:properties, :root)&.keys&.any? do |key|
+        key.to_s.start_with?("#{@prefix}-")
+      end
+    end
+
+    def prefixed_values
+      @values.transform_keys { |key| "#{@prefix}-#{key}" }
+    end
+  end
+end

entry_types/scrolled/package/spec/editor/views/EditSectionPaddingsView-spec.js

@@ -760,4 +760,103 @@ describe('EditSectionPaddingsView', () => {
       expect(listener).toHaveBeenCalledWith(entry.sections.get(1), {align: 'nearEnd', ifNeeded: true});
     });
   });
+
+  describe('slider default value', () => {
+    useFakeTranslations({
+      'pageflow_scrolled.editor.edit_section_paddings.tabs.sectionPaddings': 'Landscape',
+      'pageflow_scrolled.editor.section_padding_visualization.top_padding': 'TopPadding',
+      'pageflow_scrolled.editor.section_padding_visualization.bottom_padding': 'Bottom'
+    });
+
+    it('displays default value text when section has no paddingTop set', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color'}}],
+        themeOptions: {
+          properties: {
+            root: {
+              sectionDefaultPaddingTop: '3em',
+              'sectionPaddingTop-none': '0',
+              'sectionPaddingTop-sm': '1.375em',
+              'sectionPaddingTop-lg': '3em',
+              'sectionPaddingBottom-none': '0',
+              'sectionPaddingBottom-sm': '1.375em',
+              'sectionPaddingBottom-lg': '3em'
+            }
+          }
+        },
+        themeTranslations: {
+          scales: {
+            sectionPaddingTop: {
+              none: 'None',
+              sm: 'Small',
+              lg: 'Large'
+            },
+            sectionPaddingBottom: {
+              none: 'None',
+              sm: 'Small',
+              lg: 'Large'
+            }
+          }
+        }
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      // Find the first slider's value display element
+      const sliderValueText = view.$el.find('.slider_input .value').eq(0).text();
+      expect(sliderValueText).toEqual('Large');
+    });
+
+    it('prefers appearance-specific default over root default', () => {
+      const entry = createEntry({
+        sections: [{id: 1, configuration: {backdropType: 'color', appearance: 'cards'}}],
+        themeOptions: {
+          properties: {
+            root: {
+              sectionDefaultPaddingTop: '1.375em',
+              'sectionPaddingTop-none': '0',
+              'sectionPaddingTop-sm': '1.375em',
+              'sectionPaddingTop-lg': '3em',
+              'sectionPaddingBottom-none': '0',
+              'sectionPaddingBottom-sm': '1.375em',
+              'sectionPaddingBottom-lg': '3em'
+            },
+            cardsAppearanceSection: {
+              sectionDefaultPaddingTop: '3em'
+            }
+          }
+        },
+        themeTranslations: {
+          scales: {
+            sectionPaddingTop: {
+              none: 'None',
+              sm: 'Small',
+              lg: 'Large'
+            },
+            sectionPaddingBottom: {
+              none: 'None',
+              sm: 'Small',
+              lg: 'Large'
+            }
+          }
+        }
+      });
+
+      const view = new EditSectionPaddingsView({
+        model: entry.sections.get(1),
+        entry
+      });
+
+      renderBackboneView(view);
+
+      // Should display 'Large' (3em from cardsAppearanceSection) not 'Small' (1.375em from root)
+      const sliderValueText = view.$el.find('.slider_input .value').eq(0).text();
+      expect(sliderValueText).toEqual('Large');
+    });
+  });
 });

entry_types/scrolled/package/spec/frontend/Layout-spec.js

@@ -814,6 +814,105 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('( 1 || 2 || 3 )');
       });
     });
+
+    describe('atSectionStart and atSectionEnd props', () => {
+      beforeAll(() => {
+        TwoColumn.GroupComponent = 'div';
+      });
+
+      const SectionBoundaryBox = function SectionBoundaryBox({atSectionStart, atSectionEnd, children}) {
+        return (
+          <div>{atSectionStart ? '[' : ''}{children}{atSectionEnd ? ']' : ''}</div>
+        );
+      };
+
+      it('marks first box with atSectionStart in two column variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[1 2 ]');
+      });
+
+      it('marks first and last boxes in multiple groups', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'sticky'},
+          {id: 3, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[1 2 3 ]');
+      });
+
+      it('marks first inline box with atSectionStart when first element is sticky', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'sticky'},
+          {id: 2, type: 'probe', position: 'inline'},
+          {id: 3, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('1 [2 3 ]');
+      });
+
+      it('marks first and last boxes in center variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline'},
+          {id: 3, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'center'}} items={items}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[1 2 3 ]');
+      });
+
+      it('does not mark first box with atSectionStart when isContentPadded in two column variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items} isContentPadded={true}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('1 2 ]');
+      });
+
+      it('does not mark first box with atSectionStart when isContentPadded in center variant', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'center'}} items={items} isContentPadded={true}>
+            {(children, boxProps) => <SectionBoundaryBox {...boxProps}>{children}</SectionBoundaryBox>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('1 2 ]');
+      });
+    });
   });
 
   describe('floating items in centered variant', () => {