+
- {group.boxes.map((box, index) => renderItemGroup(props, box, index))}
+ {group.boxes.map((box, boxIndex) =>
+ renderItemGroup(props, box, boxIndex)
+ )}
);
}
function renderItemGroup(props, box, key) {
if (box.items.length) {
-
return (
@@ -101,10 +106,11 @@ function RestrictWidth({width, alignment, children}) {
}
}
-function groupItemsByPosition(items, shouldInline) {
+function groupItemsByPosition(items, shouldInline, isContentPadded) {
const groups = [];
let lastInlineBox = null;
+ let firstInlineBox = null;
let currentGroup, currentBox;
items.reduce((previousPosition, item, index) => {
@@ -161,6 +167,11 @@ function groupItemsByPosition(items, shouldInline) {
lastInlineBox = null;
}
+ if (position === 'inline' && !firstInlineBox) {
+ currentBox.atSectionStart = !isContentPadded;
+ firstInlineBox = currentBox;
+ }
+
currentGroup.boxes.push(currentBox)
}
@@ -168,6 +179,10 @@ function groupItemsByPosition(items, shouldInline) {
return position;
}, null);
+ if (currentBox) {
+ currentBox.atSectionEnd = true;
+ }
+
return groups;
}
diff --git a/entry_types/scrolled/package/src/frontend/layouts/index.js b/entry_types/scrolled/package/src/frontend/layouts/index.js
index 29ca1f5078..2df9f09545 100644
--- a/entry_types/scrolled/package/src/frontend/layouts/index.js
+++ b/entry_types/scrolled/package/src/frontend/layouts/index.js
@@ -14,7 +14,8 @@ export const Layout = React.memo(
prevProps.items === nextProps.items &&
prevProps.appearance === nextProps.appearance &&
prevProps.contentAreaRef === nextProps.contentAreaRef &&
- prevProps.sectionProps === nextProps.sectionProps
+ prevProps.sectionProps === nextProps.sectionProps &&
+ prevProps.isContentPadded === nextProps.isContentPadded
)
);
diff --git a/entry_types/scrolled/package/src/frontend/useSectionPaddingCustomProperties.js b/entry_types/scrolled/package/src/frontend/useSectionPaddingCustomProperties.js
index f6e9c6c854..1b0f2d9626 100644
--- a/entry_types/scrolled/package/src/frontend/useSectionPaddingCustomProperties.js
+++ b/entry_types/scrolled/package/src/frontend/useSectionPaddingCustomProperties.js
@@ -1,17 +1,13 @@
-import {usePortraitOrientation} from './usePortraitOrientation';
-
-export function useSectionPadding(section) {
- const portrait = usePortraitOrientation({
- active: section.portraitPaddingTop ||
- section.portraitPaddingBottom
- });
+export function useSectionPadding(section, {portrait} = {}) {
+ const usePortraitPaddings =
+ section.customPortraitPaddings !== false && portrait;
const paddingTop =
- portrait && section.portraitPaddingTop ?
+ usePortraitPaddings && section.portraitPaddingTop ?
section.portraitPaddingTop : section.paddingTop;
const paddingBottom =
- portrait && section.portraitPaddingBottom ?
+ usePortraitPaddings && section.portraitPaddingBottom ?
section.portraitPaddingBottom : section.paddingBottom;
const styles = {};
diff --git a/entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js b/entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js
index fceb46aac9..cb801d4802 100644
--- a/entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js
+++ b/entry_types/scrolled/package/src/frontend/v1/__mocks__/useMotifAreaState.js
@@ -1,28 +1,41 @@
-let currentState = {};
+import {useState, useCallback} from 'react';
+
+let initialState = {};
+let setStateRef = null;
export function useMotifAreaState() {
+ const [overrides, setOverrides] = useState(initialState);
+ setStateRef = setOverrides;
+
const state = {
paddingTop: 0,
isContentPadded: false,
minHeight: undefined,
intersectionRatioY: 0,
isMotifIntersected: false,
- ...currentState
+ ...overrides
};
- const setMotifAreaRef = () => {};
- const setContentAreaRef = () => {};
+ const setMotifAreaRef = useCallback(() => {}, []);
+ const setContentAreaRef = useCallback(() => {}, []);
return [state, setMotifAreaRef, setContentAreaRef];
}
beforeEach(() => {
- currentState = {};
+ initialState = {};
+ setStateRef = null;
});
useMotifAreaState.mockContentPadded = function() {
- currentState = {
+ const state = {
paddingTop: 100,
isContentPadded: true
};
+
+ if (setStateRef) {
+ setStateRef(state);
+ } else {
+ initialState = state;
+ }
};
diff --git a/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js b/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js
index 148befb6a9..e92f589fec 100644
--- a/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js
+++ b/entry_types/scrolled/package/src/frontend/v1/useBackdrop.js
@@ -53,14 +53,16 @@ function useFileBackdrop({section, collectionName, propertyName}) {
return {
[propertyName]: mobileFile,
motifArea: section.backdrop[`${propertyName}MobileMotifArea`],
- effects: section.backdropEffectsMobile
+ effects: section.backdropEffectsMobile,
+ portrait: true
}
}
else if (file) {
return {
[propertyName]: file,
motifArea: section.backdrop[`${propertyName}MotifArea`],
- effects: section.backdropEffects
+ effects: section.backdropEffects,
+ portrait: false
}
}
else {
diff --git a/entry_types/scrolled/spec/pageflow_scrolled/theme_options_default_scale_spec.rb b/entry_types/scrolled/spec/pageflow_scrolled/theme_options_default_scale_spec.rb
new file mode 100644
index 0000000000..e3ca15c702
--- /dev/null
+++ b/entry_types/scrolled/spec/pageflow_scrolled/theme_options_default_scale_spec.rb
@@ -0,0 +1,90 @@
+require 'spec_helper'
+
+module PageflowScrolled
+ RSpec.describe ThemeOptionsDefaultScale do
+ it 'adds scale defaults if no scale properties defined' do
+ transform = ThemeOptionsDefaultScale.new(
+ prefix: 'section_padding_top',
+ values: {'none' => '0', 'sm' => '1em'}
+ )
+
+ result = transform.call({})
+
+ expect(result).to eq(
+ properties: {
+ root: {
+ 'section_padding_top-none' => '0',
+ 'section_padding_top-sm' => '1em'
+ }
+ }
+ )
+ end
+
+ it 'preserves existing theme options' do
+ transform = ThemeOptionsDefaultScale.new(
+ prefix: 'section_padding_top',
+ values: {'none' => '0', 'sm' => '1em'}
+ )
+
+ result = transform.call(colors: {accent: '#f00'})
+
+ expect(result).to eq(
+ colors: {accent: '#f00'},
+ properties: {
+ root: {
+ 'section_padding_top-none' => '0',
+ 'section_padding_top-sm' => '1em'
+ }
+ }
+ )
+ end
+
+ it 'does not add defaults if theme defines any scale property' do
+ transform = ThemeOptionsDefaultScale.new(
+ prefix: 'section_padding_top',
+ values: {'none' => '0', 'sm' => '1em', 'md' => '2em'}
+ )
+
+ result = transform.call(
+ properties: {
+ root: {
+ 'section_padding_top-lg' => '5em'
+ }
+ }
+ )
+
+ expect(result).to eq(
+ properties: {
+ root: {
+ 'section_padding_top-lg' => '5em'
+ }
+ }
+ )
+ end
+
+ it 'adds defaults for one scale even if other scale is defined' do
+ transform = ThemeOptionsDefaultScale.new(
+ prefix: 'section_padding_top',
+ values: {'none' => '0', 'sm' => '1em'}
+ )
+
+ result = transform.call(
+ properties: {
+ root: {
+ 'section_padding_bottom-lg' => '5em'
+ }
+ }
+ )
+
+ expect(result).to eq(
+ properties: {
+ root: {
+ 'section_padding_bottom-lg' => '5em',
+ 'section_padding_top-none' => '0',
+ 'section_padding_top-sm' => '1em'
+ }
+ }
+ )
+ end
+ end
+end
diff --git a/lib/pageflow/themes.rb b/lib/pageflow/themes.rb
index dc1386d782..b42182370c 100644
--- a/lib/pageflow/themes.rb
+++ b/lib/pageflow/themes.rb
@@ -4,6 +4,38 @@ class Themes # rubocop:todo Style/Documentation
def initialize
@themes = HashWithIndifferentAccess.new
+ @options_transforms = []
+ end
+
+ # Register default options that apply to all themes. Can be called
+ # multiple times to accumulate defaults from different sources
+ # (gem, plugins, host app).
+ #
+ # @overload register_default_options(options)
+ # @param options [Hash]
+ # Default options to deep merge into theme options.
+ #
+ # @overload register_default_options(callable)
+ # @param callable [#call]
+ # Receives options hash, returns transformed options.
+ # Use for conditional defaults based on what theme defines.
+ #
+ # @since edge
+ def register_default_options(options_or_callable)
+ @options_transforms << if options_or_callable.respond_to?(:call)
+ options_or_callable
+ else
+ ->(options) { options_or_callable.deep_merge(options) }
+ end
+ end
+
+ # Apply all registered defaults to theme options.
+ #
+ # @api private
+ def apply_default_options(options)
+ @options_transforms.reduce(options.deep_dup) do |opts, transform|
+ transform.call(opts)
+ end
end
# Register a theme and supply theme options.
diff --git a/spec/pageflow/theme_customizations_spec.rb b/spec/pageflow/theme_customizations_spec.rb
index 2e4a39e042..c4ccd60d1e 100644
--- a/spec/pageflow/theme_customizations_spec.rb
+++ b/spec/pageflow/theme_customizations_spec.rb
@@ -471,5 +471,122 @@ module Pageflow
expect(customization.selected_files[:inverted_logo].urls[:small])
.to match(%r{small/image.png})
end
+
+ it 'deep merges hash default options into theme options' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register_default_options(colors: {accent: '#default', surface: '#fff'})
+ c.themes.register('dark')
+ end
+ end
+ entry = create(:published_entry,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ expect(entry.theme.options).to match(colors: {accent: '#default', surface: '#fff'})
+ end
+
+ it 'lets theme options override hash defaults' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register_default_options(colors: {accent: '#default', surface: '#fff'})
+ c.themes.register('dark', colors: {accent: '#f00'})
+ end
+ end
+ entry = create(:published_entry,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ expect(entry.theme.options).to match(colors: {accent: '#f00', surface: '#fff'})
+ end
+
+ it 'allows site customizations to override default options' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register_default_options(colors: {surface: '#fff'})
+ c.themes.register('dark', colors: {accent: '#f00'})
+ end
+ end
+ site = create(:site)
+ entry = create(:published_entry,
+ site:,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ Pageflow.theme_customizations.update(site:,
+ entry_type_name: 'rainbow',
+ overrides: {colors: {accent: '#0f0'}})
+
+ expect(entry.theme.options).to match(colors: {accent: '#0f0', surface: '#fff'})
+ end
+
+ it 'accumulates multiple register_default_options calls' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register_default_options(colors: {accent: '#default'})
+ c.themes.register_default_options(typography: {base: {fontSize: '16px'}})
+ c.themes.register('dark')
+ end
+ end
+ entry = create(:published_entry,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ expect(entry.theme.options).to match(
+ colors: {accent: '#default'},
+ typography: {base: {fontSize: '16px'}}
+ )
+ end
+
+ it 'supports callable for conditional defaults' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register_default_options(->(options) {
+ if options[:colors].blank?
+ options.deep_merge(colors: {accent: '#default'})
+ else
+ options
+ end
+ })
+ c.themes.register('dark', colors: {accent: '#f00'})
+ end
+ end
+ entry = create(:published_entry,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ expect(entry.theme.options).to match(colors: {accent: '#f00'})
+ end
+
+ it 'scopes default options by entry type' do
+ pageflow_configure do |config|
+ rainbow_entry_type = TestEntryType.register(config, name: 'rainbow')
+ other_entry_type = TestEntryType.register(config, name: 'other')
+
+ config.for_entry_type(rainbow_entry_type) do |c|
+ c.themes.register('dark', colors: {accent: '#f00'})
+ end
+
+ config.for_entry_type(other_entry_type) do |c|
+ c.themes.register_default_options(colors: {accent: '#other'})
+ c.themes.register('dark')
+ end
+ end
+ entry = create(:published_entry,
+ type_name: 'rainbow',
+ revision_attributes: {theme_name: 'dark'})
+
+ expect(entry.theme.options).to match(colors: {accent: '#f00'})
+ end
end
end
diff --git a/spec/support/pageflow/shared_contexts/fake_translations.rb b/spec/support/pageflow/shared_contexts/fake_translations.rb
index 03771bba45..0f56fe57fe 100644
--- a/spec/support/pageflow/shared_contexts/fake_translations.rb
+++ b/spec/support/pageflow/shared_contexts/fake_translations.rb
@@ -4,6 +4,7 @@
@fake_i18n_backend = I18n::Backend::Simple.new
I18n.backend = @fake_i18n_backend
+ @fake_i18n_backend.send(:init_translations)
example.run
I18n.backend = i18n_backend_backup
end