diff --git a/assets/wizards/popups/components/segment-group/SegmentGroup.test.js b/assets/wizards/popups/components/segment-group/SegmentGroup.test.js
index 017f6c5358..3b0cd21b46 100644
--- a/assets/wizards/popups/components/segment-group/SegmentGroup.test.js
+++ b/assets/wizards/popups/components/segment-group/SegmentGroup.test.js
@@ -242,6 +242,7 @@ describe( 'A segment with conflicting prompts', () => {
custom_placements: {
custom1: 'Custom Placement 1',
},
+ overlay_placements: [ 'center' ],
};
} );
diff --git a/assets/wizards/popups/components/settings-modal/index.js b/assets/wizards/popups/components/settings-modal/index.js
index 078bb7308f..722cc97191 100644
--- a/assets/wizards/popups/components/settings-modal/index.js
+++ b/assets/wizards/popups/components/settings-modal/index.js
@@ -17,7 +17,12 @@ import {
Settings,
hooks,
} from '../../../../components/src';
-import { frequenciesForPopup, isOverlay, placementsForPopups } from '../../utils';
+import {
+ frequenciesForPopup,
+ isOverlay,
+ placementsForPopups,
+ overlaySizesForPopups,
+} from '../../utils';
const { SettingsCard } = Settings;
@@ -58,7 +63,7 @@ const PromptSettingsModal = ( { prompt, disabled, onClose, segments, updatePopup
+ { isOverlay( prompt ) && (
+ {
+ setPromptConfig( { options: { overlay_size: value } } );
+ } }
+ options={ overlaySizesForPopups( prompt ) }
+ value={ promptConfig.options.overlay_size }
+ />
+ ) }
overlayPlacements.indexOf( popup.options.placement ) >= 0;
+export const isOverlay = popup => {
+ const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements || [];
+ return -1 < overlayPlacements.indexOf( popup.options.placement );
+};
/**
* Check whether the given popup is above-header.
@@ -47,9 +45,15 @@ export const isCustomPlacement = popup => {
export const isInline = prompt => ! isOverlay( prompt );
const placementMap = {
- center: __( 'Center Overlay', 'newspack' ),
top: __( 'Top Overlay', 'newspack' ),
+ top_left: __( 'Top Left Overlay', 'newspack' ),
+ top_right: __( 'Top Right Overlay', 'newspack' ),
+ center: __( 'Center Overlay', 'newspack' ),
+ center_left: __( 'Center Left Overlay', 'newspack' ),
+ center_right: __( 'Center Right Overlay', 'newspack' ),
bottom: __( 'Bottom Overlay', 'newspack' ),
+ bottom_left: __( 'Bottom Left Overlay', 'newspack' ),
+ bottom_right: __( 'Bottom Right Overlay', 'newspack' ),
inline: __( 'Inline', 'newspack' ),
archives: __( 'In archive pages', 'newspack' ),
above_header: __( 'Above Header', 'newspack' ),
@@ -66,6 +70,7 @@ export const placementForPopup = ( { options: { frequency, placement } } ) => {
export const placementsForPopups = prompt => {
const customPlacements = window.newspack_popups_wizard_data?.custom_placements;
+ const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements;
const options = Object.keys( placementMap )
.filter( key =>
isOverlay( prompt )
@@ -98,6 +103,10 @@ export const frequenciesForPopup = popup => {
.map( key => ( { label: frequencyMap[ key ], value: key } ) );
};
+export const overlaySizesForPopups = () => {
+ return window.newspack_popups_wizard_data?.overlay_sizes;
+};
+
export const getCardClassName = ( { status } ) => {
if ( 'publish' !== status ) {
return 'newspack-card__is-disabled';
diff --git a/includes/configuration_managers/class-newspack-popups-configuration-manager.php b/includes/configuration_managers/class-newspack-popups-configuration-manager.php
index e783a0aee3..7bc8844601 100644
--- a/includes/configuration_managers/class-newspack-popups-configuration-manager.php
+++ b/includes/configuration_managers/class-newspack-popups-configuration-manager.php
@@ -108,6 +108,24 @@ public function get_custom_placement_values() {
$this->unconfigured_error();
}
+ /**
+ * Get overlay placements.
+ */
+ public function get_overlay_placements() {
+ return $this->is_configured() ?
+ \Newspack_Popups_Model::get_overlay_placements() :
+ $this->unconfigured_error();
+ }
+
+ /**
+ * Get overlay sizes.
+ */
+ public function get_overlay_sizes() {
+ return $this->is_configured() ?
+ \Newspack_Popups_Model::get_popup_size_options() :
+ $this->unconfigured_error();
+ }
+
/**
* Set plugin settings.
*
diff --git a/includes/wizards/class-popups-wizard.php b/includes/wizards/class-popups-wizard.php
index 5ff033c97f..6cdaa945d2 100644
--- a/includes/wizards/class-popups-wizard.php
+++ b/includes/wizards/class-popups-wizard.php
@@ -469,15 +469,19 @@ public function enqueue_scripts_and_styles() {
$newspack_popups_configuration_manager = Configuration_Managers::configuration_manager_class_for_plugin_slug( 'newspack-popups' );
$custom_placements = $newspack_popups_configuration_manager->get_custom_placements();
+ $overlay_placements = $newspack_popups_configuration_manager->get_overlay_placements();
+ $overlay_sizes = $newspack_popups_configuration_manager->get_overlay_sizes();
\wp_localize_script(
'newspack-popups-wizard',
'newspack_popups_wizard_data',
[
- 'preview_post' => $preview_post,
- 'preview_archive' => $preview_archive,
- 'frontend_url' => get_site_url(),
- 'custom_placements' => $custom_placements,
+ 'preview_post' => $preview_post,
+ 'preview_archive' => $preview_archive,
+ 'frontend_url' => get_site_url(),
+ 'custom_placements' => $custom_placements,
+ 'overlay_placements' => $overlay_placements,
+ 'overlay_sizes' => $overlay_sizes,
]
);