Merge pull request #2364 from tf/new-spacing-defaults

New spacing defaults

Author: tf

app/models/pageflow/customized_theme.rb

@@ -24,7 +24,7 @@ def self.build(entry:, theme:, theme_customization:)
       config = Pageflow.config_for(entry)
 
       new(theme,
-          config.themes.apply_default_options(theme.options),
+          config.themes.apply_default_options(theme.options, entry:),
           config.transform_theme_customization_overrides.call(
             theme_customization.overrides,
             entry:,

app/models/pageflow/entry_at_revision.rb

@@ -26,7 +26,8 @@ def initialize(entry, revision, theme: nil)
              :type_name,
              to: :entry)
 
-    delegate(:title, :summary, :credits,
+    delegate(:layout_version,
+             :title, :summary, :credits,
              :widgets,
              :storylines, :main_storyline_chapters, :chapters, :pages,
              :share_url, :share_image_id, :share_image_x, :share_image_y,

db/migrate/20260303000000_add_layout_version_to_revisions.rb

@@ -0,0 +1,6 @@
+class AddLayoutVersionToRevisions < ActiveRecord::Migration[6.0]
+  def change
+    add_column :pageflow_revisions, :layout_version, :integer
+    change_column_default :pageflow_revisions, :layout_version, from: nil, to: 1
+  end
+end

entry_types/scrolled/config/locales/de.yml

@@ -123,14 +123,10 @@ de:
                   name: 360° Bilder
     decoration_effects:
       feature_name: Dekoration-Effekte
-    content_element_margins:
-      feature_name: "Element Margins"
     icon_scroll_indicator:
       feature_name: Icon Scroll-Indikator
     iconScrollIndicator:
       widget_type_name: Icon unten am Viewport-Rand
-    section_paddings:
-      feature_name: "Abschnittsinnenabstände"
   pageflow_scrolled:
     editor:
       backdrop_effects:
@@ -1241,12 +1237,8 @@ de:
             label: Hintergrund-Video (Hochkant)
           dynamicShadowOpacity:
             inline_help: Intensität der Abblendung, die - gesteuert durch die Scrollposition - hinter dem Text eingeblendet wird, sobald sich Motivbereich und Inhalt des Abschnitts zu überschneiden beginnen, um einen ausreichnenden Kontrast zu gewährleisten. Beachte, dass diese Abblendung nur sichtbar ist, wenn Motivbereich und Inhalt nicht nebeneinander dargestellt werden können. Wechsle am besten in die Phone-Vorschau, wenn du den eingestellten Wert veränderst.
-            inline_help_disabled: Aktiviere "Motivbereich freilegen" weiter oben, um diese Einstellung zu verwenden.
+            inline_help_disabled: Setze den oberen Innenabstand in den Abstandseinstellungen des Abschnitts auf "Automatisch anpassen", um diese Einstellung zu verwenden.
             label: Dynamische Abblendung
-          exposeMotifArea:
-            inline_help: Sicherstellen, dass der markierte Motivbereich des Hintergrunds beim Erreichen des Abschnitts sichtbar ist und nicht von anderen Elementen überlagert wird. Wenn Motivbereich und Inhalt des Abschnitts nicht nebeneiner dargestellt werden können, wird zusätzlicher Freiraum am Anfang des Abschnitts eingefügt und der Inhalt nach unten verschoben.
-            inline_help_disabled: Wähle "Motivbereich markieren" im Drei-Punkte-Menü des Hintergrund-Bilds/Videos weiter oben, um diese Funktion zu verwenden. du kannst damit sicherzustellen, dass wichtige Teile des Hintegrunds nicht von anderen Elementen überdeckt werden.
-            label: Motivbereich freilegen
           fullHeight:
             inline_help: Aktiviere diese Einstellung, wenn der Hintergrund des Abschnitts (z.B. Bild, Farbfläche oder Hintergrundvideo) so groß angezeigt werden soll, dass das gesamte Browserfenster (der sogenannte Viewport) gefüllt ist. Wenn du mit kurzen Abschnitten arbeiten möchtest, musst du diese Option deaktivieren. Dann nimmt der Abschnitt und sein Hintergrund vertikal nur so viel Platz ein, wie für den Inhalt des Abschnitts unbedingt nötig ist. Es können dann mehrere Abschnitte mit verschiedenen Hintergründen gleichzeitig auf dem Bildschirm des Nutzers sichtbar sein. Um einen Überblendeffekt zwischen den Hintergründen zweier Abschnitte verwenden zu können, muss diese Option für beide Abschnitte aktiviert sein.
             label: Volle Viewport-Höhe
@@ -1646,10 +1638,11 @@ de:
              rechts neben dem Text dargestellt werden kann, so wird
              kein zusätzlicher Abstand oberhalb des Texts eingefügt.
 
-             Deaktiviere die Option **Motivbereich freilegen**, falls
-             der Bildauschnitt zwar passend zum Motivbereich gewählt
-             werden soll, der Inhalt des Abschnitts das Motiv aber
-             überlagern darf.
+             Wähle in den Abstandseinstellungen des Abschnitts beim
+             oberen Innenabstand die Option **Manuell festlegen**,
+             falls der Bildauschnitt zwar passend zum Motivbereich
+             gewählt werden soll, der Inhalt des Abschnitts das Motiv
+             aber überlagern darf.
 
           Der Motivbereich kann über den Menüpunkt **Bildmotiv
           markieren** der **Hintergrund-Bild**- und **Hintergrund

entry_types/scrolled/config/locales/en.yml

@@ -123,14 +123,10 @@ en:
                   name: 360° images
     decoration_effects:
       feature_name: Decoration Effects
-    content_element_margins:
-      feature_name: "Element Margins"
     icon_scroll_indicator:
       feature_name: Icon Scroll Indicator
     iconScrollIndicator:
       widget_type_name: Icon at bottom of viewport
-    section_paddings:
-      feature_name: "Section paddings"
   pageflow_scrolled:
     editor:
       backdrop_effects:
@@ -1225,12 +1221,8 @@ en:
             label: Background-Video (Portrait)
           dynamicShadowOpacity:
             inline_help: Intensity of the shadow which is faded in behind the text to ensure contrast when content is scrolled to intersect with the motif area. Note that this shadow is only visible if motif area and section content do not fit side by side. It's best to switch to phone preview when adjusting this value.
-            inline_help_disabled: Activate "Expose motif area" above to use this setting.
+            inline_help_disabled: Set top padding to "Adjust automatically" in the section's padding settings to use this option.
             label: Dynamic shadow
-          exposeMotifArea:
-            inline_help: Ensure the selected motif area of the background asset is visible and not covered by other elements when first reaching the section. If motif area and section content do not fit side by side, extra space will be inserted at the top of the section to move content down.
-            inline_help_disabled: Click "Select motif area" in the "three dots" menu of the background image/video field above to use this feature. It let's you make sure important parts of the backdrop asset won't be hidden by other elements.
-            label: Expose motif area
           fullHeight:
             inline_help: Activate this option if the background of this section (e.g. image, color or video) is supposed to be enlarged such that the whole browser window (the so called viewport) is covered. Deactivate this option to create a short section. The height of the section and its background is then determined only by the content of the section.  Multiple sections with different backgrounds can then be visible at once on the user's screen. This option needs to be activated for two adjacent sections to be able to use a fade transition between them.
             label: Use Full Viewport-Height

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -30,21 +30,21 @@ def configure(config)
           'xxl' => '16em'
         }
 
-        c.themes.register_default_options(
+        c.themes.register_options_transform(
           ThemeOptionsDefaultScale.new(
             prefix: 'section_padding_top',
             values: padding_scale
           )
         )
 
-        c.themes.register_default_options(
+        c.themes.register_options_transform(
           ThemeOptionsDefaultScale.new(
             prefix: 'section_padding_bottom',
             values: padding_scale
           )
         )
 
-        c.themes.register_default_options(
+        c.themes.register_options_transform(
           ThemeOptionsDefaultScale.new(
             prefix: 'content_element_margin',
             values: margin_scale
@@ -54,16 +54,37 @@ def configure(config)
         c.themes.register_default_options(
           properties: {
             root: {
-              'section_default_padding_top' => '1.375em',
-              'section_default_padding_bottom' => '4.375em',
+              'section_default_padding_top' => 'max(10em, 20svh)',
+              'section_default_padding_bottom' => 'max(10em, 20svh)',
               'content_element_margin_style_default' => '2em'
             },
+            cards_appearance_section: {
+              'section_default_padding_top' => 'max(10em, 20svh)',
+              'section_default_padding_bottom' => 'max(10em, 20svh)'
+            }
+          }
+        )
+
+        legacy_paddings = {
+          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.themes.register_options_transform(lambda { |options, entry:, **|
+          if entry.layout_version
+            options
+          else
+            options.deep_merge(legacy_paddings)
+          end
+        })
 
         c.themes.register_default_options(
           typography: {
@@ -174,9 +195,7 @@ def configure(config)
         c.features.register('backdrop_content_elements')
         c.features.register('custom_palette_colors')
         c.features.register('decoration_effects')
-        c.features.register('content_element_margins')
         c.features.register('backdrop_size')
-        c.features.register('section_paddings')
 
         c.features.register('faq_page_structured_data') do |feature_config|
           feature_config.entry_structured_data_types.register(

entry_types/scrolled/lib/pageflow_scrolled/theme_options_default_scale.rb

@@ -10,7 +10,7 @@ def initialize(prefix:, values:)
       @values = values
     end
 
-    def call(options)
+    def call(options, **)
       return options if scale_defined?(options)
 
       options.deep_merge(

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

@@ -2,7 +2,6 @@ import '@testing-library/jest-dom/extend-expect';
 import {fireEvent} from '@testing-library/react';
 
 import {EditDefaultsView} from 'editor/views/EditDefaultsView';
-import {features} from 'pageflow/frontend';
 import {CheckBoxInputView} from 'pageflow/ui';
 
 import {ConfigurationEditor, useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
@@ -99,50 +98,46 @@ describe('EditDefaultsView', () => {
     expect(getByText('Changes to these settings have no effect on existing elements.')).toBeInTheDocument();
   });
 
-  describe('with section_paddings feature flag', () => {
-    beforeEach(() => features.enable('frontend', ['section_paddings']));
-
-    it('contains defaultSectionPaddingTop slider input', () => {
-      const entry = createEntry({});
-
-      const view = new EditDefaultsView({
-        model: entry.metadata,
-        entry
-      });
-
-      view.render();
-      const configurationEditor = ConfigurationEditor.find(view);
+  it('contains defaultSectionPaddingTop slider input', () => {
+    const entry = createEntry({});
 
-      expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingTop');
+    const view = new EditDefaultsView({
+      model: entry.metadata,
+      entry
     });
 
-    it('contains defaultSectionPaddingBottom slider input', () => {
-      const entry = createEntry({});
+    view.render();
+    const configurationEditor = ConfigurationEditor.find(view);
 
-      const view = new EditDefaultsView({
-        model: entry.metadata,
-        entry
-      });
+    expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingTop');
+  });
 
-      view.render();
-      const configurationEditor = ConfigurationEditor.find(view);
+  it('contains defaultSectionPaddingBottom slider input', () => {
+    const entry = createEntry({});
 
-      expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingBottom');
+    const view = new EditDefaultsView({
+      model: entry.metadata,
+      entry
     });
 
-    it('shows padding visualizations', () => {
-      const entry = createEntry({});
+    view.render();
+    const configurationEditor = ConfigurationEditor.find(view);
 
-      const view = new EditDefaultsView({
-        model: entry.metadata,
-        entry
-      });
+    expect(configurationEditor.inputPropertyNames()).toContain('defaultSectionPaddingBottom');
+  });
 
-      const {getByRole} = renderBackboneView(view);
+  it('shows padding visualizations', () => {
+    const entry = createEntry({});
 
-      expect(getByRole('img', {name: 'TopPadding'})).toBeInTheDocument();
-      expect(getByRole('img', {name: 'Bottom'})).toBeInTheDocument();
+    const view = new EditDefaultsView({
+      model: entry.metadata,
+      entry
     });
+
+    const {getByRole} = renderBackboneView(view);
+
+    expect(getByRole('img', {name: 'TopPadding'})).toBeInTheDocument();
+    expect(getByRole('img', {name: 'Bottom'})).toBeInTheDocument();
   });
 
   describe('with content element type defaultsInputs', () => {

entry_types/scrolled/package/spec/frontend/features/marginIndicator-spec.js

@@ -1,14 +1,12 @@
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
-import {features} from 'pageflow/frontend';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('MarginIndicator', () => {
   useInlineEditingPageObjects();
 
   beforeEach(() => {
     fakeParentWindow();
-    features.enable('frontend', ['content_element_margins']);
   });
 
   it('displays scale translation for top margin when element is selected', () => {

entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js

@@ -1,7 +1,6 @@
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
 import {useMotifAreaState} from 'frontend/v1/useMotifAreaState';
-import {features} from 'pageflow/frontend';
 import '@testing-library/jest-dom/extend-expect';
 
 jest.mock('frontend/v1/useMotifAreaState');
@@ -11,7 +10,6 @@ describe('PaddingIndicator', () => {
 
   beforeEach(() => {
     fakeParentWindow();
-    features.enable('frontend', ['section_paddings']);
   });
 
   it('displays scale translation for top padding when section is selected', () => {